@spaced-out/ui-design-system 0.4.15 → 0.5.0

package/.cspell/custom-words.txt

@@ -139,4 +139,9 @@ yourcomponentname
 Yuzhno
 yxxx
 incase
+codemod
 diwaker
+curre
+heapsnapshot
+typescriptify
+forwardref

package/.github/workflows/pages.yml

@@ -35,7 +35,7 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.19.2'
+          node-version: '22.18.0'
       - name: Install and Build 🔧
         # Install npm packages and build the Storybook files
         run: |

package/.github/workflows/publish_to_npm.yml

@@ -43,35 +43,18 @@ jobs:
           fetch-depth: '0'
           ref: ${{ github.event.inputs.branch }} # Note(Nishant): Dynamically checkout the selected branch from input
 
-      - name: Setup Node.js @18
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '20.19.2'
+          node-version: '22.18.0'
 
       # -------------------------------------------------------------------------------------
-      # Note(Nishant): Install isolated dependencies for app and the DTS generator tool
-      # -------------------------------------------------------------------------------------
-      # Our project uses `flow-to-ts` to convert `.js.flow` files into `.d.ts` files.
-      # This is handled in a dedicated subproject located at `dts-generator/`,
-      # which contains its own `package.json` with pinned versions of `flow-to-ts`,
-      # `jscodeshift`, and `glob`.
-      #
-      # We keep it isolated to:
-      #   - Avoid dependency conflicts with the main project (e.g. Babel, Yarn PnP)
-      #   - Maintain cleaner separation of concerns (build vs type generation)
-      #   - Simplify upgrades or testing for Flow → TS conversions
-      #
-      # The `yarn --cwd` command ensures that only the dependencies inside
-      # `dts-generator` are installed, and is necessary before invoking
-      # `yarn build`, as our `gulpfile.js` calls this tool via `spawnSync`.
-      #
-      # DO NOT remove this step — skipping it will break `.d.ts` generation in CI.
+      # Note(Nishant): Install isolated dependencies
       # -------------------------------------------------------------------------------------
       - name: Install dependencies
         run: |
           yarn install
-          yarn --cwd dts-generator install
 
       # ToDo(Nishant): Activate this once we have chromatic tests ready.
       #- name: Run tests

package/.github/workflows/pull_request_checks.yml

@@ -19,17 +19,16 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - name: Setup Node.js @18
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '20.19.2'
+          node-version: '22.18.0'
 
       # Install project dependencies
       - name: Install dependencies
         run: |
           yarn install
-          yarn --cwd dts-generator install
 
       # Run Yarn Flow static type checking
       - name: Run Yarn Flow

package/.prettierrc

@@ -9,10 +9,11 @@
     {
       "files": [
         "*.js",
-        "*.jsx"
+        "*.ts",
+        "*.tsx"
       ],
       "options": {
-        "parser": "babel-flow"
+        "parser": "typescript"
       }
     },
     {

package/.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.jsx'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
 
   features: {
     buildStoriesJson: true,
@@ -40,7 +40,7 @@ module.exports = {
         },
       ],
       '@babel/preset-react',
-      '@babel/preset-flow',
+      '@babel/preset-typescript',
     ],
     plugins: ['macros'],
   }),
@@ -61,22 +61,22 @@ module.exports = {
       include: path.resolve(__dirname, '../'),
     });
     config.module.rules.push({
-      test: /\.(js|jsx)$/,
+      test: /\.(ts|tsx)$/,
       loader: require.resolve('babel-loader'),
       options: {
         presets: [
           [
             'react-app',
             {
-              flow: true,
-              typescript: false,
+              flow: false,
+              typescript: true,
             },
           ],
         ],
       },
     });
 
-    config.resolve.extensions.push('.js', '.jsx');
+    config.resolve.extensions.push('.ts', '.tsx');
     return config;
   },
 

package/.vscode/extensions.json

@@ -4,7 +4,6 @@
     "streetsidesoftware.code-spell-checker",
     "esbenp.prettier-vscode",
     "simonsiefke.svg-preview",
-    "flowtype.flow-for-vscode",
     "johnpapa.vscode-peacock"
   ]
 }

package/.vscode/settings.json

@@ -23,5 +23,10 @@
     "titleBar.inactiveForeground": "#15202b99"
   },
   "peacock.color": "#42b883",
-  "eslint.notebooks.rules.customizations": []
+  "eslint.notebooks.rules.customizations": [],
+  "typescript.validate.enable": true,
+  "javascript.validate.enable": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true
 }

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.5.0](https://github.com/spaced-out/ui-design-system/compare/v0.4.15...v0.5.0) (2025-08-18)
+
 ### [0.4.15](https://github.com/spaced-out/ui-design-system/compare/v0.4.14...v0.4.15) (2025-08-13)
 
 

package/babel.config.js

@@ -14,7 +14,7 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
-    '@babel/preset-flow',
+    '@babel/preset-typescript',
   ],
   plugins: ['macros'],
 };

package/config.js

@@ -12,7 +12,7 @@ const customJsFormat = ({dictionary, file}) =>
     .map((token, idx) => {
       let str = `export const ${token.name} = '${token.value}';\n`;
       if (!idx) {
-        const addStr = `// @flow strict\n\n`;
+        const addStr = '';
         str = addStr + str;
       }
       return str;
@@ -56,7 +56,7 @@ module.exports = {
       transformGroup: 'js',
       buildPath: `src/styles/variables/`,
       files: tokens.map((tokenCategory) => ({
-        destination: `_${tokenCategory}.js`,
+        destination: `_${tokenCategory}.ts`,
         format: `customJsFormat`,
         filter: {
           attributes: {
@@ -71,7 +71,7 @@ module.exports = {
       buildPath: `src/styles/`,
       files: [
         {
-          destination: `index.js`,
+          destination: `index.ts`,
           format: `customJsFormat`,
           filter: ({attributes}) => !attributes.category.includes('base'),
         },

package/cspell.json

@@ -12,7 +12,9 @@
     "README.md",
     "src/stories/INTRODUCTION.mdx",
     ".github/CODEOWNERS",
-    ".github/workflows/pull_request_semantics_checker.yml"
+    ".github/workflows/pull_request_semantics_checker.yml",
+    "tsconfig.tsbuildinfo",
+    "tsconfig.declaration.tsbuildinfo"
   ],
   // Enable your dictionary by adding it to the list of `dictionaries`
   "dictionaries": ["custom-words"],

package/eslint.config.mjs

@@ -1,13 +1,11 @@
 // ESLint 9 flat config for @spaced-out/ui-design-system
-// Uses Babel parser to support Flow and JSX
-// Install these dependencies with:
-// yarn add -D @babel/eslint-parser eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-flowtype eslint-plugin-simple-import-sort eslint-plugin-unused-imports eslint-plugin-jest eslint-plugin-storybook globals
+// TypeScript-first config (Flow removed)
 
-import babelParser from '@babel/eslint-parser';
+import tseslint from 'typescript-eslint';
+import ftFlowPlugin from 'eslint-plugin-ft-flow';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import importPlugin from 'eslint-plugin-import';
-import ftFlowPlugin from 'eslint-plugin-ft-flow';
 import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
 import unusedImportsPlugin from 'eslint-plugin-unused-imports';
 import jestPlugin from 'eslint-plugin-jest';
@@ -22,17 +20,19 @@ export default [
       'lib/**',
       'dist/**',
       'storybook-static/**',
-      'src/assets/fontawesome/**',
+      'src/assets/fontawesome/**'
     ],
   },
 
-  // Lint project source
-  {
-    files: ['src/**/*.{js,jsx}'],
+  // TypeScript rules for project source (non type-aware for now) //NOTE:(diwaker) make it type-aware later
+  // Bring in TS-ESLint recommended (no type checking) scoped to TS files
+  ...tseslint.configs.recommended.map((cfg) => ({
+    ...cfg,
+    files: ['src/**/*.{ts,tsx}'],
     languageOptions: {
-      parser: babelParser,
+      ...(cfg.languageOptions ?? {}),
       parserOptions: {
-        requireConfigFile: true,
+        ...(cfg.languageOptions?.parserOptions ?? {}),
         ecmaVersion: 'latest',
         sourceType: 'module',
         ecmaFeatures: { jsx: true },
@@ -47,15 +47,22 @@ export default [
       react: { version: 'detect' },
     },
     plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      // Keep Flow plugin loaded so legacy inline directives don't error
+      'ft-flow': ftFlowPlugin,
       react: reactPlugin,
       'react-hooks': reactHooksPlugin,
       import: importPlugin,
-      'ft-flow': ftFlowPlugin,
       'simple-import-sort': simpleImportSortPlugin,
       'unused-imports': unusedImportsPlugin,
       jest: jestPlugin,
       storybook: storybookPlugin,
     },
+  })),
+
+  // Local project rule tweaks
+  {
+    files: ['src/**/*.{ts,tsx}'],
     rules: {
       // Core
       'arrow-body-style': ['warn', 'as-needed'],
@@ -63,15 +70,15 @@ export default [
       'comma-spacing': ['warn', { before: false, after: true }],
       'eol-last': 'warn',
       eqeqeq: ['error', 'always', { null: 'ignore' }],
-      indent: ['error', 2],
+      indent: 'off',
       'max-params': ['warn', { max: 4 }],
       'no-alert': 'warn',
       'no-console': ['error', { allow: ['warn', 'error'] }],
-      'no-const-assign': 'error',
       'no-dupe-args': 'error',
       'no-dupe-keys': 'error',
       'no-duplicate-case': 'error',
-      'no-dupe-class-members': 'error',
+      // Allow TS overloads
+      'no-dupe-class-members': 'off',
       'no-empty-function': 'warn',
       'no-empty-pattern': 'error',
       'no-eval': 'error',
@@ -84,7 +91,7 @@ export default [
       'no-mixed-requires': 'off',
       'no-nested-ternary': 'off',
       'no-new-symbol': 'error',
-      'no-redeclare': 'error',
+      'no-redeclare': 'off', // use TS rule
       'no-restricted-globals': ['error', 'event', 'location'],
       'no-sparse-arrays': 'error',
       'no-tabs': 'warn',
@@ -92,9 +99,9 @@ export default [
       'no-trailing-spaces': 'warn',
       'no-underscore-dangle': 'off',
       'no-unmodified-loop-condition': 'warn',
-      'no-undef': ['error', { typeof: true }],
+      'no-undef': 'off', // TS handles this
       'no-unreachable': 'warn',
-      'no-useless-constructor': 'error',
+      'no-useless-constructor': 'off', // use TS rule
       'no-var': 'error',
       'no-with': 'error',
       'object-shorthand': 'error',
@@ -113,23 +120,16 @@ export default [
       // react
       'react/jsx-no-undef': 'error',
       'react/jsx-pascal-case': 'warn',
-      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-react': 'off',
       'react/jsx-uses-vars': 'error',
       'react/no-array-index-key': 'warn',
       'react/no-deprecated': 'error',
       'react/no-direct-mutation-state': 'error',
       'react/no-string-refs': 'warn',
       'react/prop-types': 'off',
-      'react/react-in-jsx-scope': 'error',
+      'react/react-in-jsx-scope': 'off',
 
-      // flowtype
-      'ft-flow/define-flow-type': 'error',
-      'ft-flow/delimiter-dangle': ['warn', 'always-multiline'],
-      'ft-flow/no-existential-type': 'warn',
-      'ft-flow/no-weak-types': 'warn',
-      'ft-flow/semi': ['warn', 'always'],
-
-      // hooks //NOTE:(diwaker) temp disable for migration fix this later
+      // hooks //NOTE:(diwaker) temp keep as warn during migration; tighten later
       'react-hooks/rules-of-hooks': 'warn',
 
       // sorting
@@ -147,12 +147,33 @@ export default [
           argsIgnorePattern: '^_',
         },
       ],
+
+      // TS-specific replacements (non type-aware)
+      '@typescript-eslint/no-redeclare': 'error',
+      '@typescript-eslint/no-useless-constructor': 'error',
+      '@typescript-eslint/consistent-type-imports': ['warn', { prefer: 'type-imports' }],
+      //NOTE:(diwaker) temp disable for migration fix this later
+      '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
+      '@typescript-eslint/no-unused-vars': ['warn', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_'
+      }],
+      '@typescript-eslint/no-unused-expressions': ['warn', {
+        allowShortCircuit: false,
+        allowTaggedTemplates: false,
+        allowTernary: false
+      }],
+      '@typescript-eslint/no-this-alias': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+      '@typescript-eslint/no-unnecessary-type-constraint': 'warn',
     },
   },
 
-  // Tests
+  // Tests (JS/TS)
   {
-    files: ['**/__tests__/*.{js,jsx}'],
+    files: ['**/__tests__/*.{js,jsx,ts,tsx}'],
     languageOptions: {
       globals: globals.jest,
     },
@@ -163,15 +184,15 @@ export default [
 
   // Storybook specifics
   {
-    files: ['**/*.stories.jsx'],
+    files: ['**/*.stories.{jsx,tsx}'],
     rules: {
       semi: ['warn', 'always'],
     },
   },
 
-  // Project import sort groups
+  // Project import sort groups (apply to JS and TS)
   {
-    files: ['*.{js,jsx}', '**/*.{js,jsx}'],
+    files: ['*.{js,jsx,ts,tsx}', '**/*.{js,jsx,ts,tsx}'],
     rules: {
       'simple-import-sort/imports': [
         'error',

package/gulpfile.js

@@ -2,70 +2,41 @@ const gulp = require('gulp');
 const babel = require('gulp-babel');
 const rename = require('gulp-rename');
 const replace = require('gulp-replace');
-const {spawnSync} = require('child_process');
-const path = require('path');
 
 const babelRc = require('./babel.config');
 
 
 const doNotBuildThese = [
   'src/__tests__/**',
-  'src/**/*.test.js',
-  'src/**/*.stories.jsx',
+  'src/**/*.test.ts',
+  'src/**/*.stories.tsx',
   'src/**/*.stories.module.css',
   'src/stories/**',
 ];
 
-function getJsStream() {
-  return gulp.src('src/**/*.{js,jsx}', {
+function getTsStream() {
+  return gulp.src('src/**/*.{ts,tsx}', {
     ignore: doNotBuildThese,
   });
 }
 
 function buildCjs() {
-  return getJsStream()
+  return getTsStream()
     .pipe(babel(babelRc))
-    .pipe(replace('.jsx', '.js'))
-    .pipe(gulp.dest('lib'));
-}
-
-function copyFlow() {
-  return getJsStream()
-    .pipe(replace('.jsx', '.js'))
-    .pipe(
-      rename((path) => {
-        path.extname = path.extname.replace('jsx', 'js') + '.flow';
-      }),
-    )
+    .pipe(replace('.tsx', '.js'))
+    .pipe(replace('.ts', '.js'))
     .pipe(gulp.dest('lib'));
 }
 
 function copyOther() {
   return gulp
     .src('src/**/*', {
-      ignore: ['src/**/*.{js,jsx}', ...doNotBuildThese],
+      ignore: ['src/**/*.{ts,tsx}', ...doNotBuildThese],
     })
     .pipe(gulp.dest('lib'));
 }
 
-function generateDts(done) {
-  const result = spawnSync('yarn', ['generate'], {
-    stdio: 'inherit',
-    cwd: path.resolve(__dirname, 'dts-generator'),
-    shell: true,
-  });
-
-  if (result.status !== 0) {
-    return done(new Error('Failed to generate .d.ts files'));
-  }
-
-  done();
-}
-
-const coreBuild = gulp.parallel(buildCjs, copyFlow, copyOther);
 
-// Note(Nishant): To unblock flow to ts migration
-// const fullBuild = gulp.series(coreBuild, generateDts);
+const coreBuild = gulp.parallel(buildCjs, copyOther);
 
 module.exports.build = coreBuild;
-// module.exports.build = fullBuild;

package/lib/components/AIPromptFlow/AIPromptFlow.stories.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _AIPromptFlow: () => React.JSX.Element;
+//# sourceMappingURL=AIPromptFlow.stories.d.ts.map

package/lib/components/AIPromptFlow/AIPromptFlow.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIPromptFlow.stories.d.ts","sourceRoot":"","sources":["../../../src/components/AIPromptFlow/AIPromptFlow.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;AAe/B,wBAgBE;AA4JF,eAAO,MAAM,aAAa,yBA8OzB,CAAC"}

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+export type AccordionClassNames = Readonly<{
+    wrapper?: string;
+    headerWrapper?: string;
+    header?: string;
+    content?: string;
+}>;
+export type AccordionPropsType = {
+    id: string;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    classNames?: AccordionClassNames;
+    isOpen?: boolean;
+    disabled?: boolean;
+    showToggle?: boolean;
+    onChange?: ((id: string, isOpen: boolean) => unknown) | null | undefined;
+    checked?: boolean;
+    onToggle?: (checked: boolean) => unknown;
+};
+export declare const Accordion: Flow.AbstractComponent<AccordionPropsType, HTMLDivElement>;
+//# sourceMappingURL=Accordion.d.ts.map

package/lib/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,kBAAkB,EAClB,cAAc,CAiFf,CAAC"}

package/lib/components/Accordion/Accordion.js

@@ -59,7 +59,9 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
     iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
     disabled: disabled,
     size: "small",
-    type: "ghost",
+    type: "ghost"
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
     className: _AccordionModule.default.icon,
     ariaLabel: 'Collapse button'
     // we are not defining onClick here as we are using onClick of the parent here.