feat: #1920 reapit elements next init packages (#2065)

.gitignore

@@ -83,4 +83,6 @@ credentials.json
 # Locally I have had to add these because of: https://github.com/yarnpkg/yarn/issues/7807
 # May need to include globally if other people experienece installing issues
 .yarnrc
-.yarn
+.yarn
+
+.docz/

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.18.0.js"

package.json

@@ -91,6 +91,7 @@
     "@types/jest": "^24.0.23",
     "@types/node": "10.17.13",
     "@types/react": "^16.9.0",
+    "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.0.9",
     "@types/react-router": "^5.1.3",
@@ -134,7 +135,7 @@
     "husky": "^4.2.3",
     "isomorphic-fetch": "^2.2.1",
     "jest": "^25.1.0",
-    "jest-config": "^25.1.0",
+    "jest-config": "^26.1.0",
     "jest-coverage-badges": "^1.1.2",
     "jest-fetch-mock": "^2.1.2",
     "jest-transform-graphql": "^2.1.0",
@@ -151,6 +152,7 @@
     "prettier": "^1.19.1",
     "prettier-plugin-packagejson": "^2.0.1",
     "query-string": "5.0.0",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-docgen-typescript-loader": "^3.3.0",
     "regenerator-runtime": "^0.13.5",
     "rimraf": "^3.0.0",

packages/admin-portal/package.json

@@ -34,7 +34,6 @@
     "lodash.isequal": "^4.5.0",
     "lodash.orderby": "^4.6.0",
     "react-chartjs-2": "^2.8.0",
-    "react-copy-to-clipboard": "^5.0.2",
     "swagger-ui-react": "3.24.3",
     "react-responsive": "8.1.0",
     "snyk": "^1.341.1"

packages/developer-portal/package.json

@@ -33,7 +33,6 @@
     "lodash.isequal": "^4.5.0",
     "lodash.orderby": "^4.6.0",
     "react-chartjs-2": "^2.8.0",
-    "react-copy-to-clipboard": "^5.0.2",
     "swagger-ui-react": "3.24.3",
     "react-responsive": "8.1.0",
     "snyk": "^1.341.1"

packages/developer-portal/src/components/pages/app-detail/app-authentication-detail.tsx

@@ -5,7 +5,7 @@ import { requestAuthenticationCode } from '@/actions/app-detail'
 import styles from '@/styles/blocks/app-authentication-detail.scss?mod'
 import { Loader, Content, H5 } from '@reapit/elements'
 import { FaCopy } from 'react-icons/fa'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
+import CopyToClipboard from 'react-copy-to-clipboard'
 import { selectAppAuthenticationCode, selectAppAuthenticationLoading } from '@/selector/app-detail'
 
 export type AppAuthenticationDetailProps = {

packages/elements-next/doczrc.js

@@ -0,0 +1,53 @@
+// TODO - a start on theming - needs some work - ideally, should look like Elements itself
+export default {
+  typescript: true,
+  showDarkModeSwitch: false,
+  themeConfig: {
+    colors: {
+      text: '#3b454e',
+      background: '#fff',
+      primary: '#0061a8',
+    },
+    prism: {
+      plain: {
+        fontFamily: '"Source Code Pro", monospace',
+        color: '#393A34',
+        backgroundColor: '#f5f7f9',
+      },
+    },
+    fonts: {
+      body: '"Roboto", sans-serif',
+      heading: '"Roboto", sans-serif',
+      monospace: '"Source Code Pro", monospace',
+    },
+    radii: {
+      square: 0,
+      radius: 0,
+      rounded: 0,
+    },
+    styles: {
+      h1: {
+        fontSize: '2rem',
+        fontFamily: 'heading',
+        fontWeight: 'heading',
+        color: 'text',
+        mt: 0,
+        mb: 4,
+      },
+      code: {
+        fontFamily: '"Source Code Pro", monospace',
+      },
+      inlineCode: {
+        fontFamily: '"Source Code Pro", monospace',
+      },
+      pre: {
+        my: 4,
+        p: 3,
+        variant: 'prism',
+        textAlign: 'left',
+        fontFamily: '"Source Code Pro", monospace',
+        borderRadius: 'radius',
+      },
+    },
+  },
+}

packages/elements-next/gatsby-browser.js

@@ -0,0 +1,2 @@
+import '@/styles/global'
+import '@/styles/docs'

packages/elements-next/gatsby-config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    {
+      resolve: 'gatsby-plugin-typescript',
+      options: {
+        isTSX: true,
+        allExtensions: true,
+      },
+    },
+    'gatsby-plugin-linaria',
+  ],
+}

packages/elements-next/gatsby-node.js

@@ -0,0 +1,12 @@
+const path = require('path')
+
+exports.onCreateWebpackConfig = args => {
+  args.actions.setWebpackConfig({
+    resolve: {
+      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
+      alias: {
+        '@': path.resolve(__dirname, '../src/'),
+      },
+    },
+  })
+}

packages/elements-next/jest.config.js

@@ -0,0 +1,28 @@
+const baseConfig = require('../../scripts/jest/jest.config')
+
+module.exports = {
+  ...baseConfig,
+  testPathIgnorePatterns: ['<rootDir>/src/tests/'],
+  collectCoverageFrom: ['<rootDir>/src/**/*.ts', '<rootDir>/src/**/*.tsx'],
+  coveragePathIgnorePatterns: [
+    '<rootDir>[/\\\\](node_modules|src/types|src/tests|src/scripts|src/helpers|src/styles|src/utils)[/\\\\]',
+    '__styles__',
+    'src/index.tsx',
+    'index.ts'
+  ],
+  modulePathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|public|dist)[/\\\\]'],
+  transform: {
+    '^.+\\.svg$': '<rootDir>/src/scripts/svg-transform.js'
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/src/scripts/style-mock.js'
+  },
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 90,
+      lines: 90,
+      statements: 90
+    }
+  }
+}

packages/elements-next/linaria.config.js

@@ -0,0 +1,8 @@
+const dashify = require('dashify')
+
+module.exports = {
+  evaluate: true,
+  displayName: false,
+  // converts camelCase classNames to kebab-case-for-friendly-css
+  classNameSlug: (_hash, title) => dashify(title),
+}

packages/elements-next/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@reapit/elements-next",
+  "version": "0.0.1",
+  "description": "Next generation of elements",
+  "scripts": {
+    "test": "",
+    "build:prod": "rollup -c && docz build",
+    "start:dev": "docz dev",
+    "start:prod": "docz build && docz serve"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/elements.cjs.js",
+  "module": "dist/elements.esm.js",
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/runtime": "^7.10.4",
+    "@rollup/plugin-babel": "^5.0.4",
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@types/react-copy-to-clipboard": "^4.3.0",
+    "babel-preset-gatsby": "^0.5.1",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "dashify": "^2.0.0",
+    "docz": "^2.3.1",
+    "gatsby-plugin-linaria": "^2.0.0",
+    "linaria": "1.4.0-beta.10",
+    "prism-react-renderer": "^1.1.1",
+    "react-copy-to-clipboard": "^5.0.2",
+    "react-icons": "^3.10.0",
+    "rollup": "^2.18.2",
+    "rollup-plugin-scss": "^2.5.0",
+    "rollup-plugin-terser": "^6.1.0",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "typescript": "^3.9.6"
+  },
+  "dependencies": {}
+}

packages/elements-next/rollup.config.js

@@ -0,0 +1,81 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import babel from '@rollup/plugin-babel'
+import scss from 'rollup-plugin-scss'
+import linaria from 'linaria/rollup'
+import typescript from 'rollup-plugin-typescript2'
+
+const globals = {
+  react: 'react',
+  'react-dom': 'react-dom',
+  'react-router-dom': 'react-router-dom',
+}
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      format: 'cjs',
+      name: 'elements-cjs',
+      file: './dist/elements.cjs.js',
+      globals,
+    },
+    {
+      format: 'es',
+      name: 'elements-esm',
+      file: './dist/elements.esm.js',
+      globals,
+    },
+  ],
+  plugins: [
+    resolve({
+      browser: true,
+    }),
+    commonjs(),
+    json(),
+    typescript(),
+    // use Babel here to transpile @ alias from the styles and components which linaria cannot understanding the alias
+    babel({
+      exclude: /node_modules/,
+      extensions: ['.ts', '.tsx'],
+      babelHelpers: 'bundled',
+      plugins: [
+        ['module-resolver',
+          {
+            alias: {
+              '@': './src',
+            }
+          }
+        ]
+      ],
+    }),
+    linaria(),
+    scss({
+      output: 'dist/index.css',
+    }),
+    babel({
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              ie: '11',
+            },
+            useBuiltIns: 'usage',
+            corejs: 3,
+          },
+        ],
+        '@babel/preset-react',
+        'linaria/babel'
+      ],
+      exclude: /node_modules/,
+      include: /node_modules\/(linaria)/,
+      extensions: ['.js', '.jsx'],
+      babelHelpers: 'runtime',
+      plugins: ['@babel/plugin-transform-runtime'],
+    }),
+    terser(),
+  ],
+}