refactor: monorepo setup with lerna (#243)

packages/app/.editorconfig

@@ -0,0 +1,19 @@
+# https://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+quote_type = single
+spaces_around_operators = true
+
+[*.css]
+quote_type = single
+
+[*.md]
+trim_trailing_whitespace = false

packages/app/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+dev-test
+.js

packages/app/.eslintrc.js

@@ -0,0 +1,131 @@
+module.exports = {
+  parser: '@babel/eslint-parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:cypress/recommended',
+    'prettier',
+    'plugin:import/recommended',
+  ],
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+    jest: true,
+    'cypress/globals': true,
+  },
+  globals: {
+    STATIC_CMS_CORE_VERSION: false,
+    CMS_ENV: false,
+  },
+  rules: {
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+    'no-console': [0],
+    'react/prop-types': [0],
+    'react/require-default-props': 0,
+    'import/no-named-as-default': 0,
+    'react/react-in-jsx-scope': 'off',
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        groups: [['builtin', 'external'], ['internal', 'parent', 'sibling', 'index'], ['type']],
+      },
+    ],
+    'no-duplicate-imports': 'error',
+    '@emotion/no-vanilla': 'off',
+    '@emotion/import-from-emotion': 'error',
+    '@emotion/styled-import': 'error',
+    'require-atomic-updates': [0],
+    'object-shorthand': ['error', 'always'],
+    'prefer-const': [
+      'error',
+      {
+        destructuring: 'all',
+      },
+    ],
+    'unicorn/prefer-string-slice': 'error',
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['@mui/*/*/*', '!@mui/material/test-utils/*'],
+            message: 'Do not import material imports as 3rd level imports',
+            allowTypeImports: true,
+          },
+          {
+            group: ['@mui/material', '!@mui/material/'],
+            message: 'Please import material imports as defaults or 2nd level imports',
+            allowTypeImports: true,
+          },
+        ],
+      },
+    ],
+    'import/prefer-default-export': 'error',
+  },
+  plugins: ['babel', '@emotion', 'cypress', 'unicorn', 'react-hooks'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
+    },
+    'import/core-modules': ['src'],
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:cypress/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+      ],
+      parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      rules: {
+        'react/react-in-jsx-scope': 'off',
+        'react/prop-types': [0],
+        'react/require-default-props': 0,
+        'no-duplicate-imports': [0], // handled by @typescript-eslint
+        '@typescript-eslint/ban-types': [0], // TODO enable in future
+        '@typescript-eslint/no-non-null-assertion': [0],
+        '@typescript-eslint/consistent-type-imports': 'error',
+        '@typescript-eslint/explicit-function-return-type': [0],
+        '@typescript-eslint/explicit-module-boundary-types': [0],
+        '@typescript-eslint/no-duplicate-imports': 'error',
+        '@typescript-eslint/no-use-before-define': [
+          'error',
+          { functions: false, classes: true, variables: true },
+        ],
+      },
+    },
+    {
+      files: ['website/**/*'],
+      rules: {
+        'import/no-unresolved': [0],
+      },
+    },
+  ],
+};

packages/app/.gitignore

@@ -0,0 +1,56 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+dist/
+bin/
+.tern-project
+.vscode/
+.idea/
+manifest.yml
+.imdone/
+data/contributors.json
+cypress/videos
+cypress/screenshots
+__diff_output__
+.cache
+*.log
+.env
+.temp/
+*.tgz
+public/sw.js
+public/workbox*.js
+

packages/app/.prettierignore

@@ -0,0 +1,4 @@
+dist/
+bin/
+public/
+.cache/

packages/app/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100
+}

packages/app/babel.config.js

@@ -0,0 +1,96 @@
+const path = require('path');
+
+const coreVersion = require('./package.json').version;
+const isProduction = process.env.NODE_ENV === 'production';
+const isTest = process.env.NODE_ENV === 'test';
+const isESM = process.env.NODE_ENV === 'esm';
+
+console.info('Build Package:', path.basename(process.cwd()));
+
+const defaultPlugins = [
+  'lodash',
+  [
+    'babel-plugin-transform-builtin-extend',
+    {
+      globals: ['Error'],
+    },
+  ],
+  'transform-export-extensions',
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-proposal-object-rest-spread',
+  '@babel/plugin-proposal-export-default-from',
+  '@babel/plugin-proposal-nullish-coalescing-operator',
+  '@babel/plugin-proposal-optional-chaining',
+  '@babel/plugin-syntax-dynamic-import',
+  'babel-plugin-inline-json-import',
+];
+
+const svgo = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};
+
+function presets() {
+  return [
+    '@babel/preset-react',
+    '@babel/preset-env',
+    [
+      '@emotion/babel-preset-css-prop',
+      {
+        autoLabel: 'always',
+      },
+    ],
+    '@babel/typescript',
+  ];
+}
+
+function plugins() {
+  if (isESM) {
+    return [
+      ...defaultPlugins,
+      [
+        'transform-define',
+        {
+          STATIC_CMS_CORE_VERSION: `${coreVersion}`,
+        },
+      ],
+      [
+        'inline-react-svg',
+        {
+          svgo,
+        },
+      ],
+    ];
+  }
+
+  if (isTest) {
+    return [
+      ...defaultPlugins,
+      [
+        'inline-react-svg',
+        {
+          svgo,
+        },
+      ],
+    ];
+  }
+
+  if (!isProduction) {
+    return [...defaultPlugins];
+  }
+
+  return defaultPlugins;
+}
+
+module.exports = {
+  presets: presets(),
+  plugins: plugins(),
+};

packages/app/jest.config.integration.js

@@ -0,0 +1,18 @@
+const { pathsToModuleNameMapper } = require('ts-jest');
+
+const { compilerOptions } = require('./tsconfig.base');
+
+module.exports = {
+  preset: 'ts-jest',
+  transform: {
+    '\\.[jt]sx?$': ['ts-jest', { tsConfig: 'tsconfig.dev.json' }],
+    '^.+\\.svg$': './test/fileTransformer',
+  },
+  moduleNameMapper: {
+    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
+    '\\.(css|less)$': '<rootDir>/src/__mocks__/styleMock.ts',
+  },
+  transformIgnorePatterns: [],
+  setupFiles: ['./test/setupEnv.js'],
+  testRegex: '\\.ispec\\.tsx?$',
+};

packages/app/jest.config.js

@@ -0,0 +1,18 @@
+const { pathsToModuleNameMapper } = require('ts-jest');
+
+const { compilerOptions } = require('./tsconfig.base');
+
+module.exports = {
+  preset: 'ts-jest',
+  transform: {
+    '\\.[jt]sx?$': ['ts-jest', { tsConfig: 'tsconfig.dev.json' }],
+    '^.+\\.svg$': './test/fileTransformer',
+  },
+  moduleNameMapper: {
+    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
+    '\\.(css|less)$': '<rootDir>/src/__mocks__/styleMock.ts',
+  },
+  setupFiles: ['./test/setupEnv.js'],
+  testRegex: '\\.spec\\.tsx?$',
+  snapshotSerializers: ['@emotion/jest/serializer'],
+};

packages/app/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@staticcms/app",
+  "version": "1.0.0-beta4",
+  "license": "MIT",
+  "description": "Static CMS application.",
+  "repository": "https://github.com/StaticJsCMS/static-cms",
+  "bugs": "https://github.com/StaticJsCMS/static-cms/issues",
+  "keywords": [
+    "simple",
+    "cms",
+    "app"
+  ],
+  "scripts": {
+    "build:webpack": "webpack",
+    "build": "cross-env NODE_ENV=production run-s clean build:webpack",
+    "clean": "rimraf dist dev-test/dist",
+    "prepublishOnly": "yarn build ",
+    "prepack": "cp ../../README.md ./",
+    "postpack": "rm ./README.md"
+  },
+  "main": "dist/static-cms-app.js",
+  "files": [
+    "dist/**/*"
+  ],
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 ChromeAndroid versions",
+    "last 2 Edge versions",
+    "last 2 Firefox versions",
+    "last 2 iOS versions",
+    "last 2 Opera versions",
+    "last 2 Safari versions"
+  ],
+  "dependencies": {
+    "@babel/eslint-parser": "7.19.1",
+    "@babel/runtime": "7.20.6",
+    "@emotion/babel-preset-css-prop": "11.10.0",
+    "@staticcms/core": "1.0.0-beta4",
+    "buffer": "6.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "stream-browserify": "3.0.0",
+    "ts-loader": "9.4.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.19.3",
+    "@babel/core": "7.20.5",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-export-default-from": "7.18.10",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@babel/plugin-proposal-numeric-separator": "7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "7.20.2",
+    "@babel/plugin-proposal-optional-chaining": "7.18.9",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/preset-env": "7.20.2",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@emotion/eslint-plugin": "11.10.0",
+    "@emotion/jest": "11.10.5",
+    "@types/node": "16.18.9",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@typescript-eslint/eslint-plugin": "5.46.1",
+    "@typescript-eslint/parser": "5.46.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-loader": "9.1.0",
+    "babel-plugin-emotion": "11.0.0",
+    "babel-plugin-inline-json-import": "0.3.2",
+    "babel-plugin-inline-react-svg": "2.0.1",
+    "babel-plugin-lodash": "3.3.4",
+    "babel-plugin-transform-builtin-extend": "1.1.2",
+    "babel-plugin-transform-define": "2.1.0",
+    "babel-plugin-transform-export-extensions": "6.22.0",
+    "babel-plugin-transform-inline-environment-variables": "0.4.4",
+    "cross-env": "7.0.3",
+    "dotenv": "16.0.3",
+    "eslint": "8.29.0",
+    "eslint-import-resolver-typescript": "3.5.2",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-unicorn": "45.0.2",
+    "npm-run-all": "4.1.5",
+    "postcss": "8.4.20",
+    "postcss-scss": "4.0.6",
+    "prettier": "2.8.1",
+    "source-map-loader": "4.0.1",
+    "style-loader": "3.3.1",
+    "to-string-loader": "1.2.0",
+    "tsconfig-paths-webpack-plugin": "4.0.0",
+    "typescript": "4.9.4",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "lint-staged": {
+    "*.ts": "prettier --write",
+    "*.tsx": "prettier --write"
+  }
+}

packages/app/src/index.ts

@@ -0,0 +1 @@
+import '@staticcms/core';

packages/app/tsconfig.json

@@ -0,0 +1,59 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true,
+    "jsx": "react",
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "preserveSymlinks": true,
+    "noEmit": false,
+    "strict": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "baseUrl": "./",
+    "lib": ["DOM", "es6", "ES2015", "ES2020"],
+    "paths": {
+      "@staticcms/boolean": ["../core/src/widgets/boolean"],
+      "@staticcms/boolean/*": ["../core/src/widgets/boolean/*"],
+      "@staticcms/code": ["../core/src/widgets/code"],
+      "@staticcms/code/*": ["../core/src/widgets/code/*"],
+      "@staticcms/colorstring": ["../core/src/widgets/colorstring"],
+      "@staticcms/colorstring/*": ["../core/src/widgets/colorstring/*"],
+      "@staticcms/datetime": ["../core/src/widgets/datetime"],
+      "@staticcms/datetime/*": ["../core/src/widgets/datetime/*"],
+      "@staticcms/file": ["../core/src/widgets/file"],
+      "@staticcms/file/*": ["../core/src/widgets/file/*"],
+      "@staticcms/image": ["../core/src/widgets/image"],
+      "@staticcms/image/*": ["../core/src/widgets/image/*"],
+      "@staticcms/list": ["../core/src/widgets/list"],
+      "@staticcms/list/*": ["../core/src/widgets/list/*"],
+      "@staticcms/map": ["../core/src/widgets/map"],
+      "@staticcms/map/*": ["../core/src/widgets/map/*"],
+      "@staticcms/markdown": ["../core/src/widgets/markdown"],
+      "@staticcms/markdown/*": ["../core/src/widgets/markdown/*"],
+      "@staticcms/number": ["../core/src/widgets/number"],
+      "@staticcms/number/*": ["../core/src/widgets/number/*"],
+      "@staticcms/object": ["../core/src/widgets/object"],
+      "@staticcms/object/*": ["../core/src/widgets/object/*"],
+      "@staticcms/relation": ["../core/src/widgets/relation"],
+      "@staticcms/relation/*": ["../core/src/widgets/relation/*"],
+      "@staticcms/select": ["../core/src/widgets/select"],
+      "@staticcms/select/*": ["../core/src/widgets/select/*"],
+      "@staticcms/string": ["../core/src/widgets/string"],
+      "@staticcms/string/*": ["../core/src/widgets/string/*"],
+      "@staticcms/text": ["../core/src/widgets/text"],
+      "@staticcms/text/*": ["../core/src/widgets/text/*"],
+      "@staticcms/core": ["../core/core/src/*"],
+      "@staticcms/core/*": ["../core/src/*"]
+    },
+    "types": ["@emotion/react/types/css-prop", "@types/jest", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
+}

packages/app/webpack.config.js

@@ -0,0 +1,111 @@
+const path = require('path');
+const webpack = require('webpack');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const isProduction = process.env.NODE_ENV === 'production';
+const devServerPort = parseInt(process.env.STATIC_CMS_DEV_SERVER_PORT || `${8080}`);
+
+function moduleNameToPath(libName) {
+  return path.resolve(__dirname, '..', '..', 'node_modules', libName);
+}
+
+module.exports = {
+  entry: './src/index.ts',
+  mode: isProduction ? 'production' : 'development',
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        enforce: 'pre',
+        use: ['source-map-loader'],
+        exclude: [
+          /(node_modules[\\/]@toast-ui[\\/]editor[\\/]dist)/,
+          /(node_modules[\\/]nth-check[\\/]lib)/,
+        ],
+      },
+      {
+        test: /\.m?js$/,
+        resolve: {
+          fullySpecified: false, // disable the behavior
+        },
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: [!isProduction && 'react-refresh/babel'].filter(Boolean),
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        include: ['ol', 'codemirror', '@toast-ui'].map(moduleNameToPath),
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+        ],
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+            },
+          },
+          {
+            loader: 'react-svg-loader',
+            options: {
+              jsx: true, // true outputs JSX tags
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    plugins: [new TsconfigPathsPlugin({})],
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    fallback: {
+      path: require.resolve('path-browserify'),
+      stream: require.resolve('stream-browserify'),
+      buffer: require.resolve('buffer/'),
+    },
+  },
+  plugins: [
+    !isProduction && new ReactRefreshWebpackPlugin(),
+    new webpack.IgnorePlugin({ resourceRegExp: /^esprima$/ }),
+    new webpack.IgnorePlugin({ resourceRegExp: /moment\/locale\// }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ].filter(Boolean),
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'static-cms-core.js',
+    library: {
+      name: 'StaticCmsCore',
+      type: 'umd',
+    },
+  },
+  devServer: {
+    static: {
+      directory: './dev-test',
+    },
+    host: '0.0.0.0',
+    port: devServerPort,
+    hot: true,
+  },
+};