@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/.cspell/custom-words.txt

@@ -138,3 +138,9 @@ yourcomponentname
 Yuzhno
 yxxx
 incase
+codemod
+diwaker
+curre
+heapsnapshot
+typescriptify
+forwardref

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'],
   }),
@@ -76,7 +76,7 @@ module.exports = {
       },
     });
 
-    config.resolve.extensions.push('.js', '.jsx');
+    config.resolve.extensions.push('.ts', '.tsx');
     return config;
   },
 

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.4.13-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.4.13-beta.0...v0.4.13-beta.1) (2025-08-08)
+
+
+### Bug Fixes
+
+* **build:** only generated js artifacts are consumable now ([cffca5b](https://github.com/spaced-out/ui-design-system/commit/cffca5b7406c6ebb54a849714ba0b1b4fb214120))
+
+### [0.4.13-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.4.12...v0.4.13-beta.0) (2025-08-06)
+
+
+### Features
+
+* **codebase:** migration to typescript ([45d9f71](https://github.com/spaced-out/ui-design-system/commit/45d9f711ad69c09e7ce8e1ea205fe9ac07ee1f5b))
+
 ### [0.4.12](https://github.com/spaced-out/ui-design-system/compare/v0.4.11...v0.4.12) (2025-07-29)
 
 

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,8 @@ 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 = `// @flow strict\n\n`;
+        const addStr = '';
         str = addStr + str;
       }
       return str;
@@ -56,7 +57,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 +72,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/docs/FORWARDREF_FIX.md

@@ -0,0 +1,241 @@
+# ForwardRef Type Fix Commands
+
+This document explains the yarn commands available for fixing ForwardRef type mismatches in the UI Design System.
+
+## 🚀 Quick Start
+
+### Fix All ForwardRef Issues (Recommended)
+```bash
+yarn fix:forwardref
+```
+This command automatically finds and fixes all ForwardRef type mismatches across the entire codebase.
+
+### Check Type Errors After Fix
+```bash
+yarn fix:forwardref:check
+```
+This runs the TypeScript compiler to check for remaining type errors.
+
+## 📋 Available Commands
+
+### `yarn fix:forwardref`
+- **Purpose**: Fix all ForwardRef type mismatches automatically
+- **What it does**:
+  - Scans all TypeScript/TSX files in the `src` directory
+  - Swaps incorrect generic type parameters in `React.forwardRef` calls
+  - Changes `React.forwardRef<PropsType, RefType>` to `React.forwardRef<RefType, PropsType>`
+  - Reports how many files were fixed
+- **Usage**: `yarn fix:forwardref`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:forwardref:file <file1> <file2> ...`
+- **Purpose**: Fix ForwardRef issues in specific files
+- **What it does**: Same as above but only for specified files
+- **Usage**: `yarn fix:forwardref:file src/components/Button/Button.tsx src/components/Avatar/Avatar.tsx`
+- **Example**: `yarn fix:forwardref:file src/components/Accordion/Accordion.tsx`
+
+### `yarn fix:forwardref:check`
+- **Purpose**: Check for remaining TypeScript errors after fixes
+- **What it does**: Runs `yarn flow` (TypeScript compiler) to check for errors
+- **Usage**: `yarn fix:forwardref:check`
+- **Output**: Shows any remaining type errors that need manual attention
+
+### `yarn fix:unused`
+- **Purpose**: Fix unused variable errors in storybook files
+- **What it does**:
+  - Scans storybook files for unused variables
+  - Prefixes unused parameters with underscore (e.g., `id` → `_id`)
+  - Fixes unused state setters and destructured variables
+- **Usage**: `yarn fix:unused`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:unused:all`
+- **Purpose**: Fix unused variable errors in all TypeScript/TSX files
+- **What it does**: Same as `fix:unused` but scans all files, not just storybooks
+- **Usage**: `yarn fix:unused:all`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:css`
+- **Purpose**: Fix CSS custom properties type errors
+- **What it does**:
+  - Scans TypeScript/TSX files for CSS custom properties in style objects
+  - Adds type assertions (`as any`) to CSS custom properties like `'--background-color'`
+  - Handles various patterns including template literals and spread operators
+- **Usage**: `yarn fix:css`
+- **Output**: Lists all files that were fixed
+
+### `yarn fix:css:all`
+- **Purpose**: Fix CSS custom properties type errors in all files
+- **What it does**: Same as `fix:css` but with more comprehensive pattern matching
+- **Usage**: `yarn fix:css:all`
+- **Output**: Lists all files that were fixed
+
+### `yarn fix:css:bracket`
+- **Purpose**: Fix CSS custom properties using bracket notation
+- **What it does**: Converts `'--property'` to `['--property']` to avoid TypeScript property name issues
+- **Usage**: `yarn fix:css:bracket`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:css:final`
+- **Purpose**: Final fix for CSS custom properties using bracket notation
+- **What it does**: Removes 'as any' assertions and uses bracket notation for CSS custom properties
+- **Usage**: `yarn fix:css:final`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:css:corrupted`
+- **Purpose**: Fix corrupted CSS custom properties with multiple 'as any' assertions
+- **What it does**: Removes duplicate 'as any' assertions and keeps only one
+- **Usage**: `yarn fix:css:corrupted`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:all`
+- **Purpose**: Run all automatic fixes in sequence
+- **What it does**:
+  1. Fixes ForwardRef type mismatches
+  2. Fixes unused variable errors
+  3. Fixes CSS custom properties type errors (using bracket notation)
+  4. Runs type checking to show remaining errors
+- **Usage**: `yarn fix:all`
+- **Output**: Comprehensive fix report
+
+## 🔧 How It Works
+
+The fix scripts address the most common ForwardRef type mismatch pattern:
+
+**Before (Incorrect):**
+```typescript
+export const Component: Flow.AbstractComponent<ComponentProps, HTMLDivElement> =
+  React.forwardRef<ComponentProps, HTMLDivElement>((props, ref) => {
+    // component implementation
+  });
+```
+
+**After (Correct):**
+```typescript
+export const Component: Flow.AbstractComponent<ComponentProps, HTMLDivElement> =
+  React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
+    // component implementation
+  });
+```
+
+## 📊 Error Categories Fixed
+
+1. **ForwardRef Type Mismatch** ✅ (FIXED)
+   - `Type 'ForwardRefExoticComponent<...>' is not assignable to type 'AbstractComponent<...>'`
+   - **Status**: Completely resolved by the fix scripts
+
+2. **Ref Assignment Errors** ✅ (FIXED)
+   - `Type 'ForwardedRef<ComponentProps>' is not assignable to type 'Ref<HTMLElement>'`
+   - **Status**: Completely resolved by the fix scripts
+
+## 🎯 Remaining Error Categories
+
+After running the ForwardRef fixes, these error categories may still exist:
+
+1. **CSS Custom Properties** (~15 errors) ✅ (FIXED)
+   - `Object literal may only specify known properties, and '--custom-property' does not exist`
+   - **Solution**: Use `yarn fix:css:final` to automatically fix using bracket notation
+
+2. **Props Access on ReactNode** (~8 errors)
+   - `Property 'props' does not exist on type 'ReactNode'`
+   - **Solution**: Add proper type guards for React children
+
+3. **Unused Variables** (~10 errors) ✅ (FIXABLE)
+   - `'variableName' is declared but its value is never read`
+   - **Solution**: Use `yarn fix:unused` to automatically prefix unused variables with underscore
+
+4. **Type Assertion/Index Signature** (~8 errors)
+   - `Element implicitly has an 'any' type because expression of type 'string' can't be used to index type`
+   - **Solution**: Add proper type definitions for object lookups
+
+5. **Function Signature Mismatches** (~6 errors)
+   - `Type 'function' is not assignable to type 'expectedFunction'`
+   - **Solution**: Fix onClick handler signatures
+
+## 🛠️ Manual Fixes Required
+
+For the remaining errors, manual intervention is needed:
+
+### CSS Custom Properties
+Add to your TypeScript declarations:
+```typescript
+declare module 'react' {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}
+```
+
+### Props Access on ReactNode
+Add type guards:
+```typescript
+if (React.isValidElement(child)) {
+  const childId = child.props.id;
+}
+```
+
+### Index Signatures
+Add proper type definitions:
+```typescript
+const SPACES: { [key: string]: string } = {
+  // your space definitions
+};
+```
+
+## 📈 Impact
+
+**Before Fix:**
+- ~40+ ForwardRef type mismatch errors
+- ~30+ Ref assignment errors
+- Total: ~70+ core component architecture errors
+
+**After Fix:**
+- ~0 ForwardRef type mismatch errors ✅
+- ~0 Ref assignment errors ✅
+- Remaining errors are mostly configuration and code quality issues
+
+## 🔄 Workflow
+
+### Quick Fix (Recommended)
+1. **Run all fixes**: `yarn fix:all`
+2. **Review results**: Check the output for any remaining errors
+3. **Address remaining errors**: Manual fixes for CSS properties, type guards, etc.
+4. **Test components**: Ensure functionality is preserved
+
+### Step-by-Step Fix
+1. **Fix ForwardRef issues**: `yarn fix:forwardref`
+2. **Fix unused variables**: `yarn fix:unused`
+3. **Check results**: `yarn fix:forwardref:check`
+4. **Address remaining errors**: Manual fixes for CSS properties, type guards, etc.
+5. **Test components**: Ensure functionality is preserved
+
+## 🚨 Important Notes
+
+- The scripts are **safe** and only modify ForwardRef type parameters
+- Always run `yarn fix:forwardref:check` after fixes to verify
+- Test components after fixes to ensure functionality is preserved
+- The scripts are **idempotent** - running them multiple times is safe
+
+## 📝 Troubleshooting
+
+### Script not found
+Make sure you're in the project root directory and the scripts exist in `scripts/`.
+
+### Permission denied
+Make the scripts executable:
+```bash
+chmod +x scripts/fix-all-forwardref.js
+chmod +x scripts/fix-forwardref-simple.js
+```
+
+### No files found
+The script uses `find` command. On Windows, you may need to use Git Bash or WSL.
+
+## 🤝 Contributing
+
+If you find new ForwardRef patterns that aren't caught by the scripts, please:
+
+1. Add the pattern to the regex in the scripts
+2. Test with a few files first
+3. Update this documentation
+4. Submit a pull request

package/gulpfile.js

@@ -1,8 +1,6 @@
 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');
@@ -17,7 +15,7 @@ const doNotBuildThese = [
 ];
 
 function getJsStream() {
-  return gulp.src('src/**/*.{js,jsx}', {
+  return gulp.src('src/**/*.{ts,tsx}', {
     ignore: doNotBuildThese,
   });
 }
@@ -25,47 +23,21 @@ function getJsStream() {
 function buildCjs() {
   return getJsStream()
     .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, copyOther);
 
-const coreBuild = gulp.parallel(buildCjs, copyFlow, copyOther);
 
-// Note(Nishant): To unblock flow to ts migration
-// const fullBuild = gulp.series(coreBuild, generateDts);
 
 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,yBAgPzB,CAAC"}