feat: Added test infrastructure and initial component tests

.babelrc.json

@@ -1,40 +1,33 @@
 {
-    "sourceType": "unambiguous",
     "presets": [
         [
             "@babel/preset-env",
             {
+                "modules": false,
                 "targets": {
-                    "chrome": 100
+                    "node": "14",
+                    "browsers": ">0.25%, not ie 11, not op_mini all"
                 }
             }
         ],
-        "@babel/preset-typescript",
-        ["@babel/preset-react", { "runtime": "automatic" }]
+        "@babel/preset-react",
+        "@babel/preset-typescript"
     ],
-    "plugins": [
-        "@babel/plugin-proposal-optional-chaining",
-        [
-            "module-resolver",
-            {
-                "extensions": [".ts", ".tsx"],
-                "root": "./src",
-                "alias": {
-                    "#components": "./src/components",
-                    "#types": ["./src/types"],
-                    "#hooks": ["./src/hooks"],
-                    "#lib": ["./src/lib"]
-                }
-            }
-        ],
-        [
-            "@emotion",
-            {
-                "sourceMap": true,
-                "autoLabel": "dev-only",
-                "labelFormat": "[local]",
-                "cssPropOptimization": true
-            }
-        ]
-    ]
+    "env": {
+        "node": {
+            "plugins": [
+                [
+                    "babel-plugin-transform-import-ignore",
+                    {
+                        "patterns": [
+                            "*.css",
+                            "react",
+                            "react-dom",
+                            "framer-motion"
+                        ]
+                    }
+                ]
+            ]
+        }
+    }
 }

.github/workflows/main.yml

@@ -39,11 +39,52 @@ jobs:
       - name: Prettier Check
         run: pnpm run prettier-check
 
+  Test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+    needs: [Prettier-check]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        id: cache-primes
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Setup PNPM environment
+        if: steps.cache-primes.outputs.cache-hit != 'true'
+        run: |
+          npm install -g pnpm@latest
+          pnpm config set store-dir ~/.pnpm-store
+
+      - name: Cache PNPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-v3-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-v3-
+
+      - name: Install dependencies
+        if: steps.cache-primes.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Tests
+        run: pnpm run test:ci
+
+      - name: Upload coverage
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/lcov.info
+          fail_ci_if_error: true
+          verbose: true
 
   Build:
     name: Build project
     runs-on: ubuntu-latest
-    needs: [ Prettier-check ]
+    needs: [Prettier-check, Test]
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
@@ -73,3 +114,19 @@ jobs:
 
       - name: Build
         run: pnpm run build
+
+  Status-Check:
+    name: Status Check
+    runs-on: ubuntu-latest
+    needs: [Prettier-check, Test, Build]
+    if: always()
+    steps:
+      - name: Check status
+        run: |
+          if [ "${{ needs.Prettier-check.result }}" != "success" ] || \
+             [ "${{ needs.Test.result }}" != "success" ] || \
+             [ "${{ needs.Build.result }}" != "success" ]; then
+            echo "One or more jobs failed"
+            exit 1
+          fi
+          echo "All jobs passed successfully"

.gitignore

@@ -4,6 +4,7 @@ node_modules
 .cache
 dist
 .idea
+.vscode
 
 
 # storybook
@@ -17,3 +18,5 @@ storybook-static
 # public folder temp files
 public
 /stories/Uploader.stories.js
+
+coverage

.npmignore

@@ -11,5 +11,4 @@ tsconfig.json
 postcss.config.js
 tailwind.config.js
 tsdx.config.js
-dist/hooks/useUpup.d.ts
-dist/version.ts
+!dist

.npmrc

@@ -1 +1,5 @@
+strict-peer-dependencies=false
+legacy-peer-deps=true
 auto-install-peers=true
+node-linker=hoisted
+shamefully-hoist=true

.prettierrc.json

@@ -7,5 +7,8 @@
     "plugins": [
         "prettier-plugin-organize-imports",
         "prettier-plugin-tailwindcss"
-    ]
+    ],
+    "importOrder": ["^react$", "^[^.]", "^\\."],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
 }

.storybook/main.ts

@@ -1,32 +1,77 @@
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/react-webpack5'
-
-const config: StorybookConfig = {
-    framework: '@storybook/react-webpack5',
-    stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+    stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: [
-        // Other addons go here
-        // {
-        //     name: '@storybook/addon-docs',
-        //     options: {
-        //         mdxPluginOptions: {
-        //             mdxCompileOptions: {
-        //                 remarkPlugins: [remarkGfm],
-        //             },
-        //         },
-        //     },
-        // },
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/addon-docs',
         {
             name: '@storybook/addon-styling',
             options: {
-                // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
-                // For more details on this addon's options.
                 postCss: {
                     implementation: require.resolve('postcss'),
                 },
             },
         },
     ],
+    core: {
+        builder: '@storybook/builder-webpack5',
+    },
+    webpackFinal: async config => {
+        // Remove default rules for .md files
+        config.module.rules = config.module.rules.filter(
+            rule => !rule.test?.test?.('.md'),
+        )
+
+        return {
+            ...config,
+            resolve: {
+                ...config.resolve,
+                fallback: {
+                    ...config.resolve?.fallback,
+                    'highlight.js/lib/core': require.resolve(
+                        'highlight.js/lib/core',
+                    ),
+                    'highlight.js/lib/languages/c-like': false,
+                    'highlight.js/lib/languages/sql_more': false,
+                },
+                alias: {
+                    ...config.resolve?.alias,
+                    'lowlight/lib/core': require.resolve('lowlight'),
+                    'react-syntax-highlighter/dist/esm/light': require.resolve(
+                        'react-syntax-highlighter/dist/cjs/light',
+                    ),
+                    'react-syntax-highlighter/dist/esm/light-async':
+                        require.resolve(
+                            'react-syntax-highlighter/dist/cjs/light-async',
+                        ),
+                    '@emotion/react': require.resolve('@emotion/react'),
+                    '@emotion/styled': require.resolve('@emotion/styled'),
+                },
+            },
+            module: {
+                ...config.module,
+                rules: [
+                    ...config.module.rules,
+                    {
+                        test: /\.md$/,
+                        type: 'javascript/auto',
+                    },
+                    {
+                        test: /\.m?js$/,
+                        resolve: {
+                            fullySpecified: false,
+                        },
+                    },
+                ],
+            },
+        }
+    },
 }
 
 export default config

.storybook/preview.js

@@ -1,4 +1,4 @@
-import '../src/tailwind.css'
+import '../src/frontend/tailwind.css'
 
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+}
+
+export default preview

.storybook/webpack.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    resolve: {
+        fallback: {
+            'highlight.js/lib/core': require.resolve('highlight.js/lib/core'),
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                include: /node_modules\/lowlight/,
+                type: 'javascript/auto',
+            },
+        ],
+    },
+}

jest.config.cjs

@@ -0,0 +1,41 @@
+/** @type {import('jest').Config} */
+module.exports = {
+    roots: ['<rootDir>/src'],
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    moduleNameMapper: {
+        '^frontend/(.*)$': '<rootDir>/src/frontend/$1',
+        '^backend/(.*)$': '<rootDir>/src/backend/$1',
+        '^lib/(.*)$': '<rootDir>/src/lib/$1',
+        '\\.css$': 'identity-obj-proxy',
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+    transform: {
+        '^.+\\.(t|j)sx?$': [
+            'ts-jest',
+            {
+                tsconfig: 'tsconfig.json',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!(@mui|framer-motion)/)'],
+    testMatch: [
+        '<rootDir>/src/**/__tests__/**/*.{ts,tsx}',
+        '<rootDir>/src/**/*.{spec,test}.{ts,tsx}',
+    ],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    collectCoverageFrom: [
+        'src/**/*.{ts,tsx}',
+        '!src/**/*.stories.{ts,tsx}',
+        '!src/**/*.d.ts',
+        '!src/version.ts',
+    ],
+    coverageThreshold: {
+        global: {
+            branches: 1,
+            functions: 1,
+            lines: 1,
+            statements: 1,
+        },
+    },
+}