fix: storybook

Author: maxgfr

.github/workflows/build.yml

@@ -12,3 +12,5 @@ jobs:
         run: yarn
       - name: Build
         run: yarn build
+      - name: Build storybook
+        run: yarn storybook:build

.github/workflows/storybook.yml

@@ -0,0 +1,36 @@
+name: Storybook
+
+on:
+  push:
+    branches: [main]
+
+concurrency:
+  cancel-in-progress: true
+  group: storybook-${{ github.ref }}
+
+jobs:
+  storybook:
+    name: Deployment storybook on gh-pages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: |
+          yarn install --prefer-offline --frozen-lockfile
+      - name: Deploy
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          yarn storybook:deploy:action
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierrc

@@ -3,7 +3,7 @@
   "trailingComma": "all",
   "overrides": [
     {
-      "files": "*.ts",
+      "files": "*.{ts,tsx}",
       "options": {
         "parser": "typescript"
       }

.swcrc

@@ -1,18 +1,14 @@
 {
+  "sourceMaps": true,
   "jsc": {
     "parser": {
       "syntax": "typescript",
       "tsx": true
     },
-    "target": "es2021"
-  },
-  "module": {
-    "type": "commonjs"
-  },
-  "transform": {
-    "react": {
-      "runtime": "automatic"
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
     }
-  },
-  "sourceMaps": true
+  }
 }

jest.config.js

@@ -1,8 +1,14 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
+  testMatch: [
+    '<rootDir>/**/*.test.{ts,tsx,js,jsx}',
+    '<rootDir>/*.test.{ts,tsx,js,jsx}',
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   transform: {
-    '^.+\\.(t|j)s$': '@swc/jest',
+    '^.+\\.(t|j)sx?$': ['@swc/jest'],
   },
+  testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['/node_modules/', '/build/'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 };

package.json

@@ -34,8 +34,10 @@
     "build:swc:watch": "swc ./src -d build -w",
     "lint": "eslint ./src --ext .ts",
     "prettier": "prettier --write './src/**/*.{ts,js,json}'",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook:start": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "storybook:deploy": "npm run storybook:build && gh-pages -d .out",
+    "storybook:deploy:action": "npm run storybook:build && gh-pages -d .out -u \"github-actions-bot <support+actions@github.com>\""
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -55,6 +57,7 @@
     "@swc/cli": "0.1.57",
     "@swc/core": "1.3.14",
     "@swc/jest": "0.2.23",
+    "@swc/plugin-styled-jsx": "^1.5.20",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -71,7 +74,9 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-storybook": "^0.6.7",
+    "gh-pages": "^4.0.0",
     "jest": "29.3.0",
+    "jest-environment-jsdom": "^29.3.0",
     "nodemon": "2.0.20",
     "prettier": "2.7.1",
     "rimraf": "3.0.2",

src/Input.tsx

@@ -5,8 +5,9 @@ export function Input() {
   return (
     <div>
       <h1 data-testid="input-result">Input result : {name}!</h1>
+      <label htmlFor="input-type">Enter a value</label>
       <input
-        data-testid="input"
+        id="input-type"
         type="text"
         value={name}
         onChange={(e) => setName(e.target.value)}

src/__tests__/Input.test.tsx

@@ -10,10 +10,11 @@ describe('<Input />', () => {
 
   test('Input writing', () => {
     render(<Input />);
-
-    userEvent.type(screen.getByTestId('input'), 'résultat');
-    expect(screen.getAllByTestId('input-result')).toBe(
-      'Input result : résultat!',
-    );
+    const input = screen.getByLabelText(/enter a value/i);
+    userEvent.type(input, 'résultat');
+    console.log(input);
+    expect(input).toHaveValue('résultat');
+    const result = screen.getByTestId('input-result');
+    expect(result).toBe('Input result : résultat!');
   });
 });

tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["src/**/*.spec.{ts,tsx}", "src/**/*.test.{ts,tsx}"]
+  "exclude": ["src/**/*.spec.tsx", "src/**/*.test.tsx"]
 }

tsconfig.json

@@ -10,7 +10,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     "lib": [
       "dom",
       "dom.iterable",
@@ -27,7 +27,7 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "ESNext" /* Specify what module code is generated. */,
+    "module": "CommonJS" /* Specify what module code is generated. */,
     "rootDir": "./src" /* Specify the root folder within your source files. */,
     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */