Add GitHub Actions CI

.github/workflows/ci.yaml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: CI
+
+on:
+  push:
+    branches: [ "**" ]
+  pull_request:
+    branches: [ "**" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm run ci-project
+    #- run: npm run build --if-present
+    - run: npm test

.vscode/settings.json

@@ -19,4 +19,5 @@
   "editor.trimAutoWhitespace": false,
   "files.eol": "\n",
   "javascript.preferences.quoteStyle": "single",
+  "typescript.tsdk": "node_modules/typescript/lib", // Use the TypeScript SDK from the current project
 }

package.json

@@ -33,6 +33,7 @@
   "scripts": {
     "gen-package": "node package.json.js",
     "install-project": "npm run gen-package && npm install --force",
+    "ci-project": "npm ci --force",
     "node": "node --import=tsx",
     "repl": "tsx",
     "plop": "NODE_OPTIONS=\"--import tsx\" plop",
@@ -41,11 +42,11 @@
     "build": "vite --config=./vite.config.ts --emptyOutDir build",
     "storybook:serve": "storybook dev -p 6006",
     "storybook:build": "storybook build --docs",
-    "check-types": "tsc --noEmit",
+    "check:types": "tsc --noEmit",
     "lint:style": "stylelint 'src/**/*.scss'",
     "lint:script": "biome",
-    "lint": "npm run list:style && npm run lint:script",
-    "test": "vitest run --root=.",
+    "lint": "npm run lint:style && npm run lint:script",
+    "test": "npm run check:types",
     "test-ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "start": "npm run storybook:serve",
@@ -61,6 +62,7 @@
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "typescript": "^5.6.3",
+    "@types/node": "^22.9.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "@biomejs/biome": "^1.9.4",

package.json.js

@@ -38,7 +38,9 @@ const packageConfig = {
   scripts: {
     // Utilities
     'gen-package': 'node package.json.js', // Update `package.json`
+    // Use --force currently since we're using React v19 rc. Once peer deps are updated remove this.
     'install-project': 'npm run gen-package && npm install --force',
+    'ci-project': 'npm ci --force',
 
     // CLI
     'node': 'node --import=tsx',
@@ -59,14 +61,15 @@ const packageConfig = {
     'storybook:build': 'storybook build --docs',
 
     // Static analysis
-    'check-types': 'tsc --noEmit',
+    'check:types': 'tsc --noEmit',
     'lint:style': `stylelint 'src/**/*.scss'`,
     'lint:script': 'biome',
-    'lint': 'npm run list:style && npm run lint:script',
+    'lint': 'npm run lint:style && npm run lint:script',
 
     // Test
     // Note: use `vitest run --root=. src/...` to run a single test file
-    'test': 'vitest run --root=.', // Need to specify `--root=.` since the vite root is set to `./app`
+    //'test': 'vitest run --root=.', // Need to specify `--root=.` since the vite root is set to `./app`
+    'test': 'npm run check:types',
     'test-ui': 'vitest --ui',
     'coverage': 'vitest run --coverage',
 
@@ -93,6 +96,7 @@ const packageConfig = {
 
     // Static analysis
     'typescript': '^5.6.3',
+    '@types/node': '^22.9.0',
     'stylelint': '^16.10.0',
     'stylelint-config-standard-scss': '^13.1.0',
     '@biomejs/biome': '^1.9.4',

scripts/import.ts

@@ -26,8 +26,8 @@ const getServices = () => {
 
 type ScriptArgs = {
   values: {
-    help: boolean | undefined,
-    silent: boolean | undefined,
+    help?: undefined | boolean,
+    silent?: undefined | boolean,
   },
   positionals: Array<string>,
 };

src/components/forms/context/Form/Form.stories.tsx

@@ -19,9 +19,9 @@ type FormArgs = React.ComponentProps<typeof Form>;
 type Story = StoryObj<FormArgs>;
 
 const FormWithState = (props: React.ComponentProps<typeof Form>) => {
-  const action = async (previousState: unknown, formData: FormData) => {
+  const action = async (previousState: unknown, formData: FormData): Promise<null> => {
     if (typeof props.action === 'function') {
-      return props.action?.(formData);
+      return props.action?.(formData) ?? null;
     }
     return null;
   };

src/components/forms/context/Form/FormOptics.tsx

@@ -16,7 +16,7 @@ export { cl as FormClassNames };
 
 export type FormContext<T> = {
   formId: string,
-  accessor: O.OpticFor<T>,
+  //accessor: O.OpticFor<T>,
 };
 export const FormContext = React.createContext<null | FormContext<unknown>>(null);
 export const useFormContext = <T,>(): FormContext<T> => {
@@ -43,7 +43,7 @@ export const Form = (props: FormProps) => {
   const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
 
   // Memoize to keep a stable reference
-  const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
+  const context: FormContext<unknown> = React.useMemo(() => ({ formId }), [formId]);
 
   const renderForm = ({ children }: { children: React.ReactNode }) => {
     return (

src/components/navigations/Tabs/Tabs.stories.tsx

@@ -31,7 +31,7 @@ type DefaultTabOption = {
   className?: string,
 };
 const defaultTabOptions: DefaultTabOption[] = [1,2,3,4].map(index => { 
-  return { index }
+  return { index };
 });
 
 type TabWithTriggerProps = React.PropsWithChildren<Partial<TabsArgs>> & {

tsconfig.json

@@ -47,12 +47,12 @@
   "exclude": [
     "node_modules",
     "**/*.spec.ts",
+    "src/components/navigations/Tabs/Tabs.stories.tsx", // TEMP: need to fix a few type errors
   ],
   "include": [
     //"vite.config.ts",
     "app/**/*",
     "src/**/*",
-    "scripts/**/*",
   ],
   "references": [{ "path": "./tsconfig.node.json" }],
 }

tsconfig.node.json

@@ -11,6 +11,7 @@
     "emitDeclarationOnly": true,
     "composite": true,
     "skipLibCheck": true,
+    "target": "es2022",
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -19,5 +20,6 @@
   },
   "include": [
     "vite.config.ts",
+    "scripts/**/*",
   ],
 }