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

package/.cspell/custom-words.txt

@@ -17,12 +17,14 @@ Branco
 Choibalsan
 Chuuk
 circlehollow
+codemod
 CODEOWNERS
 Combobox
 commitlint
 contributorsrc
 Crespo
 Cuiaba
+curre
 D'Urville
 Danmarkshavn
 darsh-mecwan-sense
@@ -30,6 +32,8 @@ datetime
 DEFAULTTEXT
 Dili
 dismissable
+displayname
+diwaker
 diwakersurya
 Docgen
 drilldown
@@ -45,12 +49,15 @@ fbjs
 Fennimore
 flowtype
 fontawesome
+forwardref
 framename
 Gaurav
 gulpfile
+heapsnapshot
 Heatmaps
 highcharts
 Hovd
+incase
 innerref
 interdimensional
 Jangid
@@ -93,6 +100,7 @@ preminor
 prepatch
 progressbar
 proxysense
+regrapes
 rerouter
 rgba
 Rica
@@ -122,6 +130,7 @@ Tongatapu
 transclude
 Typeahead
 typeof
+typescriptify
 Ulaanbaatar
 Urville
 useRowspanHeaders
@@ -138,5 +147,3 @@ xmark
 yourcomponentname
 Yuzhno
 yxxx
-incase
-diwaker

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/SenseTheme.ts

@@ -0,0 +1,13 @@
+import {create} from 'storybook/theming/create';
+
+const senseTheme = create({
+  base: 'light',
+  brandTitle: 'Genesis',
+  brandImage: 'https://cdn.sensehq.com/genesis/hashed/static/images/Logo.png',
+
+  fontBase: '"Centra No 2", "proxima-nova", "Helvetica Neue"',
+  textColor: '#17172A',
+  textInverseColor: '#ffffff',
+});
+
+export default senseTheme;

package/.storybook/main.ts

@@ -0,0 +1,93 @@
+import type {StorybookConfig} from '@storybook/react-webpack5';
+import path from 'node:path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
+
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        // Not needed with automatic runtime, but harmless if you keep it
+        configureJSX: false,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
+      },
+    },
+    'storybook-css-modules',
+    '@storybook/addon-a11y',
+    // Forces Babel (not SWC) so our plugins run on TSX:
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
+  ],
+
+  // Global Babel for anything SB pipes through its own babel pass
+  babel: async (options) => ({
+    ...options,
+    sourceType: 'unambiguous',
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: [
+            'last 2 Chrome versions',
+            'last 2 Safari versions',
+            'last 2 Firefox versions',
+            'last 2 Edge versions',
+            'last 3 iOS Major versions',
+          ],
+        },
+      ],
+      ['@babel/preset-react', {runtime: 'automatic', development: true}],
+      '@babel/preset-typescript',
+    ],
+    plugins: ['macros', '@regrapes/babel-plugin-add-react-memo-displayname'],
+  }),
+
+  webpackFinal: async (config) => {
+    // Fix font rule clobbering images
+    config.module!.rules = (config.module!.rules || []).map((rule: any) => {
+      if (rule.test && rule.test.toString().includes('woff')) {
+        return {
+          ...rule,
+          test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/,
+        };
+      }
+      return rule;
+    });
+
+    // SCSS modules support (matches your current setup)
+    config.module!.rules!.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Ensure TSX goes through babel-loader (so plugins above actually run)
+    config.module!.rules!.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve('babel-loader'),
+      options: {
+        presets: [['react-app', {flow: false, typescript: true}]],
+        plugins: ['@regrapes/babel-plugin-add-react-memo-displayname'],
+      },
+    });
+
+    (config.resolve!.extensions as string[]).push('.ts', '.tsx');
+    return config;
+  },
+
+  staticDirs: ['public', '../design-tokens'],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;

package/.storybook/manager-head.html

@@ -123,4 +123,8 @@
   .sidebar-item[data-selected='true'] > button {
     color: #fff !important;
   }
+
+  div#sidebar-bottom-wrapper {
+    display: none;
+  }
 </style>

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import {addons} from 'storybook/manager-api';
+import senseTheme from './SenseTheme';
+
+addons.setConfig({
+  theme: senseTheme,
+});

package/.storybook/paths-macro.d.ts

@@ -0,0 +1,6 @@
+declare module 'paths.macro' {
+  export const filename: string;
+  export const dirname: string;
+  export const extension: string;
+  export const wd: string;
+}

package/.storybook/preview.ts

@@ -0,0 +1,67 @@
+import type {Preview} from '@storybook/react';
+import {themes} from 'storybook/theming';
+import {wd} from 'paths.macro';
+
+const preview: Preview = {
+  parameters: {
+    // a11y overrides (unchanged)
+    a11y: {
+      config: {
+        rules: [
+          {id: 'landmark-one-main', enabled: false},
+          {id: 'meta-viewport', enabled: false},
+          {id: 'page-has-heading-one', enabled: false},
+        ],
+      },
+    },
+    controls: {disableSaveFromUI: true},
+    backgrounds: {
+      values: [
+        {name: 'Dark', value: '#000'},
+        {name: 'Light', value: '#fff'},
+      ],
+    },
+    docs: {
+      theme: themes.light,
+      codePanel: true as any, // SB typing doesn't include this flag; keep behavior
+    },
+    Canvas: {
+      theme: themes.light,
+    },
+    storySource: {
+      repository: 'https://github.com/Spaced-Out/ui-design-system',
+      workingDir: wd,
+      branch: 'master',
+    } as any, // non-standard param your addon reads; keep with loose typing
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          'Introduction',
+          'Changelog',
+          'Usage',
+          'Contribution',
+          'Design Tokens',
+          'Tokens',
+          'Components',
+          'Form Components',
+          '*',
+        ],
+        locales: 'en-US',
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'dark',
+      toolbar: {
+        icon: 'circlehollow',
+        items: ['light', 'dark'],
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "rootDir": "..",
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
+    "jsx": "react-jsx",
+    "types": ["node", "webpack-env"],
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"]
+}

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,29 @@
 
 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.1](https://github.com/spaced-out/ui-design-system/compare/v0.5.0...v0.5.1) (2025-08-25)
+
+
+### Features
+
+* added support for remove file button ([#393](https://github.com/spaced-out/ui-design-system/issues/393)) ([a4bba48](https://github.com/spaced-out/ui-design-system/commit/a4bba48aca46f5e4f11dbd545c5f3309d451bc3b))
+* upgraded storybook and moved it to use typescript ([b57a5bc](https://github.com/spaced-out/ui-design-system/commit/b57a5bc9fa826adc020c1b8270312634b561c92f))
+
+
+### Bug Fixes
+
+* added storybook type checks ([e0c071a](https://github.com/spaced-out/ui-design-system/commit/e0c071a949a25cf19dab3bf6d52a51b074ac6f1d))
+* fixes comp generation scripts in ts ([#391](https://github.com/spaced-out/ui-design-system/issues/391)) ([9b52baa](https://github.com/spaced-out/ui-design-system/commit/9b52baac9dad512715d569f4a8811b28fe854c7e))
+* fixes most common ts errors ([#392](https://github.com/spaced-out/ui-design-system/issues/392)) ([aa33b7a](https://github.com/spaced-out/ui-design-system/commit/aa33b7a66fafb4696b6257b420b35118afe12047))
+* fixes the display name ([3e4a9f6](https://github.com/spaced-out/ui-design-system/commit/3e4a9f617b053c2ef8af51fd781d375ffc72257a))
+* updated changelog ([246a50f](https://github.com/spaced-out/ui-design-system/commit/246a50fe0ac951363ea2dda6e56f559768caed05))
+
+## [0.5.0](https://github.com/spaced-out/ui-design-system/compare/v0.4.15...v0.5.0) (2025-08-18)
+
+
+### Features
+* **ts-migration:** migrated the codebase to typescript ([#388](https://github.com/spaced-out/ui-design-system/issues/388)) ([557b87d](https://github.com/Spaced-Out/ui-design-system/commit/557b87d6816c72308b95f369d603c938bc2e887e))
+
 ### [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',