Fix/storybook packages

.babelrc

@@ -0,0 +1,34 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript",
+    ],
+    "plugins": [
+        // Reuse babel's injected headers
+        // ["@babel/plugin-transform-runtime", { "version": "^7.11.2" }],
+
+        // Handle absolute imports
+        ["polyfill-corejs3", {
+            "method": "usage-pure",
+        }],
+
+        // Handle absolute imports
+        ["babel-plugin-module-resolver", {
+            "root": ["."],
+            "extensions": [".js", ".jsx", ".ts", ".tsx"],
+            "alias": {
+                "#components": "./src/components",
+                "#hooks": "./src/hooks",
+                "#utils": "./src/utils",
+            },
+        }],
+
+        // Extends javascript support
+        "@babel/plugin-syntax-dynamic-import",
+
+        // Extends react support
+        "@babel/plugin-transform-react-constant-elements",
+        // "@babel/plugin-transform-react-inline-elements",
+    ]
+}

.browserslistrc

@@ -1,2 +1,2 @@
 # Support all browsers with more than 1% market share
-> 1%
+>= 1%

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
         'airbnb/hooks',
         // 'plugin:postcss-modules/recommended',
         'plugin:@typescript-eslint/recommended',
+        'plugin:storybook/recommended',
     ],
     env: {
         browser: true,
@@ -28,6 +29,8 @@ module.exports = {
                 extensions: ['.js', '.jsx', '.ts', '.tsx'],
                 alias: {
                     '#components': './src/components',
+                    '#hooks': './src/hooks',
+                    '#utils': './src/utils',
                 },
             },
         },
@@ -86,6 +89,10 @@ module.exports = {
 
         'react/prop-types': 0,
         'react/jsx-props-no-spreading': 0,
+        'react/jsx-key': ['warn', {
+            checkFragmentShorthand: true,
+            checkKeyMustBeforeSpread: true,
+        }],
         // 'react/prop-types': [1, { ignore: [], customValidators: [], skipUndeclared: false }],
         'react/no-unused-state': 'warn',
         'react/require-default-props': 'warn',

.github/workflows/chromatic.yml

@@ -13,10 +13,15 @@ jobs:
     # the list of steps that the action will go through
     steps:
       - uses: actions/checkout@v1
-      - run: yarn
-      #- run: yarn build-storybook
-      - uses: chromaui/action@v1
+      - name: Install dependencies
+        run: yarn
+      - name: Install storybook dependencies
+        run: yarn
+        working-directory: storybook
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
         # options required to the GitHub chromatic action
         with:
+          workingDir: storybook
           projectToken: ${{ secrets.CHROMATIC_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -0,0 +1,72 @@
+name: toggle ui CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  build_test:
+    name: 🚴 Build + Lint + Test 🚴  # Match the name below (8398a7/action-slack).
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: 🐳 Prepare Docker
+        id: prep
+        run: |
+          TAG=$(echo $GITHUB_SHA | head -c7)
+          IMAGE="docker.pkg.github.com/the-deep/deep-ui"
+          echo ::set-output name=tagged_image::${IMAGE}:${TAG}
+          echo ::set-output name=tag::${TAG}
+      - name: 🐳 Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@master
+
+      - name: 🐳 Cache Docker layers
+        uses: actions/cache@v2
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-single-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-single-buildx
+      - name: 🐳 Build image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          builder: ${{ steps.buildx.outputs.name }}
+          file: Dockerfile
+          push: false # This would be set to true in a real world deployment scenario.
+          load: true
+          tags: ${{ steps.prep.outputs.tagged_image }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      - name: 🤞 Run CSS Lint 🧪
+        env:
+            DOCKER_IMAGE: ${{ steps.prep.outputs.tagged_image }}
+        run: |
+          docker run --rm --workdir="/code/" $DOCKER_IMAGE sh -c 'yarn css-lint'
+      - name: 🤞 Run Lint 🧪
+        env:
+            DOCKER_IMAGE: ${{ steps.prep.outputs.tagged_image }}
+        run: |
+          docker run --rm --workdir="/code/" $DOCKER_IMAGE sh -c 'yarn lint'
+      - name: 🤞 Run Typecheck 🧪
+        env:
+            DOCKER_IMAGE: ${{ steps.prep.outputs.tagged_image }}
+        run: |
+          docker run --rm --workdir="/code/" $DOCKER_IMAGE sh -c 'yarn typecheck'
+      - name: 🤞 Run Build 🧪
+        env:
+            DOCKER_IMAGE: ${{ steps.prep.outputs.tagged_image }}
+        run: |
+          docker run --rm --workdir="/code/" $DOCKER_IMAGE sh -c 'yarn build'
+        # Temp fix
+        # https://github.com/docker/build-push-action/blob/master/docs/advanced/cache.md#github-cache
+        # https://github.com/docker/build-push-action/issues/252
+        # https://github.com/moby/buildkit/issues/1896
+      - name: 🐳 Move docker cache (🧙 Hack fix)
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules/
 /.pnp
 .pnp.js
 

Dockerfile

@@ -1,11 +1,13 @@
-FROM node:12.2.0-alpine
+FROM node:lts-alpine
+
+MAINTAINER togglecorp [email protected]
+
+RUN apk update\
+    && apk add --no-cache git bash python3 g++ make
 
 WORKDIR /code
 
-COPY ./package.json /code/package.json
-# RUN yarn install --network-concurrency 1
-RUN apk update \
-    && apk add --no-cache --virtual .build-deps\
-        git
+COPY ./package.json ./yarn.lock /code/
+RUN yarn install --frozen-lockfile
 
 COPY . /code/

package.json

@@ -18,7 +18,10 @@
         "prepack": "yarn build",
         "watch": "rollup -c -w",
         "typecheck": "tsc",
-        "lint": "eslint --rule 'import/no-unresolved: 0' 'src/**/*.[tj]s?(x)'",
+        "lint": "eslint 'src/**/*.[tj]s?(x)'",
+        "lint:stories": "eslint 'storybook/stories/**/*.[tj]s?(x)'",
+        "css-lint:stories": "stylelint 'storybook/**/*.css' --config .stylelintrc.json",
+        "css-lint": "stylelint 'src/**/*.css' --config .stylelintrc.json",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook"
     },
@@ -62,6 +65,7 @@
         "@babel/plugin-proposal-throw-expressions": "^7.10.4",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-react-constant-elements": "^7.17.12",
         "@babel/plugin-transform-runtime": "^7.11.5",
         "@babel/preset-env": "^7.11.5",
         "@babel/preset-react": "^7.10.4",
@@ -98,6 +102,7 @@
         "eslint-plugin-postcss-modules": "^1.2.0",
         "eslint-plugin-react": "^7.20.6",
         "eslint-plugin-react-hooks": "^4.1.2",
+        "eslint-plugin-storybook": "^0.5.13",
         "install-peers-cli": "^2.2.0",
         "path": "^0.12.7",
         "postcss-loader": "^3.0.0",

rollup.config.js

@@ -35,7 +35,7 @@ const PLUGINS = [
         include: ['**/*.jsx', '**/*.js', '**/*.ts', '**/*.tsx'],
     }),
     babel({
-        babelHelpers: 'runtime',
+        babelHelpers: 'inline',
         exclude: 'node_modules/**',
         extensions: ['.jsx', '.js', '.ts', '.tsx'],
     }),

src/components/Checkmark/index.tsx

@@ -8,8 +8,6 @@ import { _cs } from '@togglecorp/fujs';
 
 import { UiMode } from '../ThemeContext';
 
-import styles from './styles.css';
-
 export interface CheckmarkProps {
     className?: string;
     value: boolean | undefined | null;
@@ -26,7 +24,6 @@ function Checkmark(props: CheckmarkProps) {
 
     const iconClassName = _cs(
         className,
-        styles.checkmark,
         'tui-checkmark',
     );
 

src/components/Table/index.tsx

@@ -6,6 +6,7 @@ import {
     randomString,
 } from '@togglecorp/fujs';
 
+import { typedMemo } from '../../utils';
 import { UiMode } from '../ThemeContext';
 import { useThemeClassName } from '../../hooks';
 import TableHeader from './TableHeader';
@@ -283,4 +284,4 @@ function Table<D, K extends string | number, C extends Column<D, K, any, any>>(
     );
 }
 
-export default Table;
+export default typedMemo(Table);

src/components/UiModeContext.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export type UiMode = 'light' | 'dark';
+
+export interface UiModeContextProps {
+    uiMode: UiMode;
+    setUiMode: (newMode: UiMode) => void;
+}
+
+const UiModeContext = React.createContext<UiModeContextProps>({
+    uiMode: 'light',
+    setUiMode: () => {
+        console.warn('setUiMode called before it was assigned');
+    },
+});
+
+export default UiModeContext;