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

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.4.15",
-  "main": "index.js",
+  "version": "0.5.1",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"
   },
   "license": "UNLICENSED",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
-    "build": "rimraf lib && yarn build:style-variables && gulp build",
+    "build": "yarn build:style-variables && gulp build && yarn build:types",
     "build:style-variables": "rimraf src/styles/variables && style-dictionary build --config ./config.js",
-    "storybook": "yarn build:style-variables && storybook dev --host genesis.proxysense.co --port 6006",
+    "build:types": "tsc --project tsconfig.declaration.json && cp src/types/flow-to-typescript-codemod.d.ts lib/ ",
+    "prebuild": "rimraf lib",
+    "storybook": "yarn build:style-variables && rimraf node_modules/.cache/storybook && storybook dev --host genesis.proxysense.co --port 6006",
     "storybook:export": "yarn build:style-variables && rimraf storybook-static && storybook build",
     "build-storybook": "yarn build:style-variables && rimraf storybook-static && storybook build",
     "generate": "node ./scripts/create-component",
@@ -19,16 +22,25 @@
     "release": "yarn build:changelog && yarn publish",
     "build:changelog": "standard-version",
     "build:no-bump-changelog": "standard-version --skip.bump --skip.commit --skip.tag",
-    "flow": "flow",
-    "flow:all": "flow --show-all-errors",
-    "flow:json": "flow --json --pretty",
-    "flow:version": "flow version",
-    "lint": "eslint 'src/**/*.{js,jsx}'",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx}'",
-    "lint:strict": "eslint --quiet 'src/**/*.{js,jsx}' && echo 'ok!'",
+    "flow": "tsc --noEmit",
+    "flow:storybook": "tsc --project .storybook/tsconfig.json --noEmit",
+    "flow:all": "tsc --noEmit --listFiles",
+    "flow:json": "tsc --noEmit --pretty",
+    "flow:version": "tsc --version",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
+    "lint:strict": "eslint --quiet 'src/**/*.{ts,tsx}' && echo 'ok!'",
     "spell-check": "cspell \"**\"",
     "test": "test-storybook",
-    "visual-test": "npx chromatic --project-token=f0e2813801c4"
+    "visual-test": "npx chromatic --project-token=f0e2813801c4",
+    "prettier": "prettier --write 'src/**/*.{ts,tsx}'",
+    "typescriptify": "node ../flow-to-typescript-codemod/bin.js",
+    "fix:forwardref": "node scripts/fix-all-forwardref.js",
+    "fix:forwardref:file": "node scripts/fix-forwardref-simple.js",
+    "fix:forwardref:check": "yarn flow && echo '✅ Type checking completed'",
+    "fix:unused": "node scripts/fix-unused-variables-targeted.js",
+    "fix:unused:all": "node scripts/fix-unused-variables.js",
+    "fix:all": "yarn fix:forwardref && yarn fix:unused  && yarn fix:forwardref:check"
   },
   "keywords": [
     "React",
@@ -60,22 +72,41 @@
     "@babel/core": "^7.18.13",
     "@babel/eslint-parser": "^7.28.0",
     "@babel/eslint-plugin": "^7.25.9",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-flow": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@chromatic-com/storybook": "^4.1.0",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^9.0.10",
-    "@storybook/addon-docs": "^9.0.10",
+    "@regrapes/babel-plugin-add-react-memo-displayname": "^1.0.0",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.0.10",
+    "@storybook/react-webpack5": "^9.1.2",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/react": "^11.2.7",
+    "@types/babel-plugin-macros": "~3.1.3",
+    "@types/babel__core": "~7.20.5",
+    "@types/babel__preset-env": "~7.10.0",
+    "@types/eslint": "~9.6.1",
+    "@types/gulp": "~4.0.17",
+    "@types/gulp-babel": "~6.1.33",
+    "@types/gulp-rename": "~2.0.6",
+    "@types/invariant": "~2.2.37",
+    "@types/lint-staged": "~13.3.0",
+    "@types/lodash": "^4.17.20",
+    "@types/moment": "^2.13.0",
+    "@types/moment-timezone": "^0.5.30",
+    "@types/react": "~19.1.9",
+    "@types/react-dom": "~19.1.7",
+    "@types/react-window": "^1.8.8",
+    "@types/standard-version": "~7.1.3",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^10.0.0",
     "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-react-anonymous-display-name": "^0.1.0",
     "babel-preset-react-app": "^10.0.0",
     "chalk": "^5.0.1",
     "chromatic": "^6.11.4",
@@ -106,10 +137,12 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^9.0.10",
+    "storybook": "^9.1.2",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
-    "style-dictionary": "^3.7.1"
+    "style-dictionary": "^3.7.1",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.8.0"
   },
   "homepage": "https://spaced-out.github.io/ui-design-system",
   "repository": {
@@ -121,12 +154,12 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged && yarn flow",
+      "pre-commit": "lint-staged && yarn flow && yarn flow:storybook",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
   "volta": {
-    "node": "20.19.2",
+    "node": "22.18.0",
     "yarn": "1.22.19"
   }
 }

package/tsconfig.declaration.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./lib",
+    "noEmitOnError": false,
+  },
+}

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "flow-to-typescript-codemod": [
+        "./src/types/flow-to-typescript-codemod.d.ts"
+      ]
+    },
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
+    "noImplicitReturns": false,
+    "noImplicitThis": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "resolveJsonModule": true,
+    "strict": true,
+    "rootDir": "./src",
+    "types": ["node"],
+    "target": "es2019",
+    "module": "commonjs",
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "typeRoots": ["./src/types/**/*", "./node_modules/@types"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/types/**/*"],
+  "exclude": ["**/__tests__/**"]
+}

package/.flowconfig

@@ -1,45 +0,0 @@
-[include]
-./node_modules/react
-
-[ignore]
-./node_modules/react/node_modules/.*
-.*/**/malformed_package_json/package.json
-./node_modules/systemjs-builder/.*
-./build/.*
-./lib/.*
-
-[declarations]
-
-[libs]
-./node_modules/fbjs/flow/lib
-
-[options]
-sharedmemory.hash_table_pow=21
-
-module.system.node.resolve_dirname=node_modules
-module.system.node.allow_root_relative=true
-
-module.name_mapper='^\(.*\)\.\(png\|jpg\|gif\|mp3\|wav\)$' -> '<PROJECT_ROOT>/flow/FileFlowStub.js.flow'
-module.name_mapper='^\(.*\)\.css$' -> '<PROJECT_ROOT>/flow/CSSFlowStub.js.flow'
-module.name_mapper='^\(.*\)\.svg$' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js.flow'
-module.name_mapper='^\(.*\)\.svg\?noDimensions$' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js.flow'
-module.name_mapper='^\(.*\)\.svg\?noAttrs$' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js.flow'
-
-exact_by_default=true
-
-[strict]
-nonstrict-import
-unclear-type
-unsafe-getters-setters
-untyped-import
-untyped-type-import
-deprecated-type
-unnecessary-invariant
-unnecessary-optional-chain
-
-[lints]
-deprecated-type=warn
-sketchy-number=error
-unclear-type=warn
-unnecessary-invariant=warn
-unnecessary-optional-chain=warn

package/.storybook/SenseTheme.js

@@ -1,11 +0,0 @@
-import {create} from 'storybook/theming';
-
-export default 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',
-});

package/.storybook/main.js

@@ -1,93 +0,0 @@
-const path = require('path');
-module.exports = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.jsx'],
-
-  features: {
-    buildStoriesJson: true,
-  },
-
-  // Add any Storybook addons you want here: https://storybook.js.org/addons/
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: null,
-        transcludeMarkdown: true,
-      },
-    }, // 'storybook-vscode-component/register', This is not supported in storybook 7
-    'storybook-css-modules',
-    '@storybook/addon-a11y',
-    '@storybook/addon-webpack5-compiler-babel',
-    '@chromatic-com/storybook',
-  ],
-
-  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',
-      '@babel/preset-flow',
-    ],
-    plugins: ['macros'],
-  }),
-
-  webpackFinal: async (config) => {
-    config.module.rules = config.module.rules.map((rule) => {
-      if (rule.test && rule.test.toString().includes('woff')) {
-        return {
-          ...rule,
-          test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/,
-        };
-      }
-      return rule;
-    });
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
-      include: path.resolve(__dirname, '../'),
-    });
-    config.module.rules.push({
-      test: /\.(js|jsx)$/,
-      loader: require.resolve('babel-loader'),
-      options: {
-        presets: [
-          [
-            'react-app',
-            {
-              flow: true,
-              typescript: false,
-            },
-          ],
-        ],
-      },
-    });
-
-    config.resolve.extensions.push('.js', '.jsx');
-    return config;
-  },
-
-  staticDirs: ['public', '../design-tokens'],
-
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
-  },
-
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-  },
-};

package/.storybook/manager.js

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

package/.storybook/preview.js

@@ -1,124 +0,0 @@
-/**
- * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
- * for more information about the purpose of this file.
- *
- * Use preview.js for global code (such as CSS imports or JavaScript mocks)
- * that applies to all stories. For example, `import thirdPartyCss.css`.
- *
- * This file can have three exports:
- * - decorators - an array of global decorators
- * - parameters - an object of global parameters
- * - globalTypes - definition of globalTypes
- */
-
-/**
- * Decorators
- *
- * A decorator is a way to wrap a story in extra “rendering” functionality.
- *
- * Example:
- *
- * import React from 'react';
- * export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
- *
- * Each story throughout the library will be wrapped in a div with a margin of 3
- */
-
-/**
- * Parameters
- *
- * Most Storybook addons are configured via a parameter-based API.
- * You can set global parameters in this file
- **/
-
-import {themes} from 'storybook/theming';
-import {wd} from 'paths.macro';
-
-export const parameters = {
-  // Note(Nishant): This is a workaround to disable the a11y checks for the storybook.
-  // This is because the storybook is not a web application and does not have a viewport.
-  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,
-  },
-  Canvas: {
-    theme: themes.light,
-  },
-  storySource: {
-    repository: 'https://github.com/Spaced-Out/ui-design-system',
-    workingDir: wd,
-    branch: 'master',
-  },
-  options: {
-    storySort: {
-      method: 'alphabetical',
-      order: [
-        'Introduction',
-        'Changelog',
-        'Usage',
-        'Contribution',
-        'Design Tokens',
-        'Tokens',
-        'Components',
-        'Form Components',
-        '*',
-      ],
-      locales: 'en-US',
-    },
-  },
-};
-/**
- * With backgrounds, you configure the list of backgrounds that every story can render in.
- */
-
-/**
- * Global Types
- *
- * Global Types allow you to add your own toolbars by creating
- * globalTypes with a toolbar annotation:
- *
- * For example:
- **/
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'dark',
-    toolbar: {
-      icon: 'circlehollow',
-      // array of plain string values or MenuItem shape
-      items: ['light', 'dark'],
-    },
-  },
-};
-/**
- *
- * Will add a new dropdown in your toolbar with options light and dark.
- **/

package/dts-generator/.editorconfig

@@ -1,10 +0,0 @@
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-[*.{js,json,yml}]
-charset = utf-8
-indent_style = space
-indent_size = 2

package/dts-generator/.gitattributes

@@ -1,4 +0,0 @@
-/.yarn/**            linguist-vendored
-/.yarn/releases/*    binary
-/.yarn/plugins/**/*  binary
-/.pnp.*              binary linguist-generated

package/dts-generator/README.md

@@ -1,63 +0,0 @@
-# DTS Generator
-
-This folder contains a standalone utility to generate TypeScript declaration (`.d.ts`) files from existing `.js.flow` files using [`flow-to-ts`](https://github.com/MarcoPolo/flowToTs). These typings are essential for supporting downstream TypeScript consumers of the Genesis component library.
-
----
-
-## Why this exists
-
-Although Genesis is written in Flow, the JavaScript ecosystem (including editors like VSCode, tsserver, and downstream NPM consumers) expects `.d.ts` files for rich type support. This tool bridges that gap by converting `.js.flow` files into `.d.ts` files that TypeScript understands — without requiring a full migration to TypeScript.
-
-This is **not a Flow-to-TypeScript migration**. It's a compatibility layer that allows us to continue using Flow internally while supporting TS externally.
-
----
-
-## What it does
-
-- Scans `lib/` for `.js.flow` files
-- Uses `flow-to-ts` to convert each file into a `.d.ts` equivalent
-- Writes the `.d.ts` files alongside the original files
-- Formats the output with Prettier
-
-This process runs automatically as part of the `yarn build` step (via Gulp), ensuring typings are up-to-date with every release.
-
----
-
-## Usage
-
-Install dependencies:
-
-```bash
-yarn --cwd dts-generator install
-```
-
-Run the generator:
-
-```bash
-yarn --cwd dts-generator generate
-```
-
-This will generate and format all `.d.ts` files for the project based on the current contents of `lib/`.
-
----
-
-## Included in Release
-
-The `.d.ts` files generated here are published as part of our NPM release and are used by any project consuming Genesis with TypeScript.
-
----
-
-## Tech Stack
-
-- [`flow-to-ts`](https://github.com/khan/flow-to-ts)
-- [`jscodeshift`](https://github.com/facebook/jscodeshift)
-- [`glob`](https://www.npmjs.com/package/glob)
-- [`prettier`](https://prettier.io)
-
----
-
-## Related Context
-
-This setup is a foundational step toward the long-term vision of migrating all frontend codebases (`ui_server`, `ui_design_system`, `ui_chatbot`) to TypeScript at Sense.
-
----

package/dts-generator/convert.js

@@ -1,107 +0,0 @@
-/**
- * Note(Nishant): This script is part of our long-term migration and type safety strategy.
- *
- * Context:
- * Our codebase has historically used Flow for type checking. Flow offers strong static typing,
- * but has limited ecosystem support compared to TypeScript. Since the TypeScript ecosystem
- * (including editors like VSCode, IDE integrations, and npm consumers) natively expects `.d.ts`
- * files for type definitions, we need to bridge that gap.
- *
- * Purpose of this script:
- * 1. It converts `.js.flow` files (Flow declaration files) in our `lib/` directory to
- *    corresponding `.d.ts` files using `flow-to-ts`.
- * 2. The output `.d.ts` files provide equivalent type declarations in TypeScript syntax.
- * 3. We format these generated files using `prettier` to ensure consistent and readable output.
- *
- * Why `.d.ts` files matter:
- * - TypeScript consumers of our NPM package (like internal projects or external partners)
- *   rely on `.d.ts` files to get autocompletion, compile-time checking, and rich IDE support.
- * - They serve as the public API contract of our component library.
- * - Without `.d.ts` files, consumers would have to fall back to `any` or custom typings,
- *   defeating the purpose of having a typed library.
- *
- * Why not just migrate to TS directly?
- * - A full migration to TS is non-trivial and requires coordination across all teams.
- * - In the interim, this approach gives us compatibility with the TypeScript ecosystem
- *   without dropping Flow support.
- *
- * How it works:
- * - We locate all `.js.flow` files under `lib/`
- * - Each file is passed through `flow-to-ts` with `-o d.ts` to get a `.d.ts` representation.
- * - We write the output next to the original file.
- * - The result is then formatted using Prettier.
- *
- * This script is invoked as part of the build pipeline, and must run **after** the Gulp build step.
- * Do not remove or bypass this logic — breaking `.d.ts` generation will break downstream consumers.
- *
- * Future:
- * - Once we fully migrate to TypeScript, this step can be replaced by native `.d.ts` generation
- *   via `tsc` or Babel.
- */
-
-const fs = require('fs');
-const path = require('path');
-const glob = require('glob');
-const {spawnSync} = require('child_process');
-
-
-const files = glob.sync(path.resolve(__dirname, '../lib/**/*.js.flow'));
-
-// eslint-disable-next-line no-console
-console.log('🔄 Converting .js.flow files to TypeScript declaration files...');
-
-files.forEach((file) => {
-  const outPath = file.replace(/\.js\.flow$/, '.d.ts');
-  const flowToTs = path.resolve(__dirname, './node_modules/.bin/flow-to-ts');
-  // Note(Nishant) For some reason if i try to install prettier locally it fails for few components. Not
-  // spending too much time on it because the idea here is to move to ts eventually
-  const prettier = path.resolve(__dirname, '../node_modules/.bin/prettier');
-
-  const result = spawnSync(flowToTs, ['-o', 'd.ts', file], {
-    encoding: 'utf-8',
-    // Note(Nishant): Tells Node.js to run the command inside a shell, like bash or sh.
-    // essential for calling binaries via relative paths (e.g., from node_modules/.bin/)
-    shell: true,
-  });
-
-  const stdout = result.stdout?.trim();
-  const stderr = result.stderr?.trim();
-
-  if (result.error) {
-    console.error(`Spawn error converting ${file}:`, result.error.message);
-    return;
-  }
-
-  if (stderr) {
-    console.error(`stderr converting ${file}:\n${stderr}`);
-    return;
-  }
-
-  if (result.status !== 0) {
-    console.error(`Non-zero exit code for ${file}`);
-    return;
-  }
-
-  if (stdout && !stdout.includes('Processing') && !stdout.includes('Results')) {
-    fs.writeFileSync(outPath, stdout);
-    // eslint-disable-next-line no-console
-    console.log(`✅ Converted: ${file} → ${outPath}`);
-
-    // Format with Prettier
-    const fmt = spawnSync(prettier, ['--write', outPath], {
-      encoding: 'utf-8',
-      shell: true,
-    });
-
-    if (fmt.status !== 0) {
-      console.error(`Prettier formatting failed for ${outPath}`);
-    }
-  } else {
-    console.warn(
-      `⚠️ No meaningful output for ${file}. It may be empty or skipped.`,
-    );
-  }
-});
-
-// eslint-disable-next-line no-console
-console.log(`✅ Flow to d.ts Job Finished`);

package/dts-generator/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "dts-generator",
-  "private": true,
-  "scripts": {
-    "generate": "node convert.js"
-  },
-  "dependencies": {
-    "@khanacademy/flow-to-ts": "^0.5.2",
-    "glob": "^11.0.1",
-    "jscodeshift": "^17.3.0"
-  },
-  "volta": {
-    "node": "20.19.2",
-    "yarn": "1.22.19"
-  }
-}