@spaced-out/ui-design-system 0.4.15-beta.0 → 0.4.15

package/.cspell/custom-words.txt

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

package/CHANGELOG.md

@@ -2,7 +2,12 @@
 
 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.15-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.4.14...v0.4.15-beta.0) (2025-08-13)
+### [0.4.15](https://github.com/spaced-out/ui-design-system/compare/v0.4.14...v0.4.15) (2025-08-13)
+
+
+### Bug Fixes
+
+* toggle checked control ([#389](https://github.com/spaced-out/ui-design-system/issues/389)) ([a56ea7c](https://github.com/spaced-out/ui-design-system/commit/a56ea7c7819cd0789c0909472499004fc2ce36e6))
 
 ### [0.4.14](https://github.com/spaced-out/ui-design-system/compare/v0.4.13...v0.4.14) (2025-08-11)
 

package/babel.config.js

@@ -14,7 +14,7 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
-    '@babel/preset-typescript',
+    '@babel/preset-flow',
   ],
   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 = '';
+        const addStr = `// @flow strict\n\n`;
         str = addStr + str;
       }
       return str;
@@ -56,7 +56,7 @@ module.exports = {
       transformGroup: 'js',
       buildPath: `src/styles/variables/`,
       files: tokens.map((tokenCategory) => ({
-        destination: `_${tokenCategory}.ts`,
+        destination: `_${tokenCategory}.js`,
         format: `customJsFormat`,
         filter: {
           attributes: {
@@ -71,7 +71,7 @@ module.exports = {
       buildPath: `src/styles/`,
       files: [
         {
-          destination: `index.ts`,
+          destination: `index.js`,
           format: `customJsFormat`,
           filter: ({attributes}) => !attributes.category.includes('base'),
         },

package/cspell.json

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

package/eslint.config.mjs

@@ -1,11 +1,13 @@
 // ESLint 9 flat config for @spaced-out/ui-design-system
-// TypeScript-first config (Flow removed)
+// 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
 
-import tseslint from 'typescript-eslint';
-import ftFlowPlugin from 'eslint-plugin-ft-flow';
+import babelParser from '@babel/eslint-parser';
 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';
@@ -20,19 +22,17 @@ export default [
       'lib/**',
       'dist/**',
       'storybook-static/**',
-      'src/assets/fontawesome/**'
+      'src/assets/fontawesome/**',
     ],
   },
 
-  // 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}'],
+  // Lint project source
+  {
+    files: ['src/**/*.{js,jsx}'],
     languageOptions: {
-      ...(cfg.languageOptions ?? {}),
+      parser: babelParser,
       parserOptions: {
-        ...(cfg.languageOptions?.parserOptions ?? {}),
+        requireConfigFile: true,
         ecmaVersion: 'latest',
         sourceType: 'module',
         ecmaFeatures: { jsx: true },
@@ -47,22 +47,15 @@ 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'],
@@ -70,15 +63,15 @@ export default [
       'comma-spacing': ['warn', { before: false, after: true }],
       'eol-last': 'warn',
       eqeqeq: ['error', 'always', { null: 'ignore' }],
-      indent: 'off',
+      indent: ['error', 2],
       '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',
-      // Allow TS overloads
-      'no-dupe-class-members': 'off',
+      'no-dupe-class-members': 'error',
       'no-empty-function': 'warn',
       'no-empty-pattern': 'error',
       'no-eval': 'error',
@@ -91,7 +84,7 @@ export default [
       'no-mixed-requires': 'off',
       'no-nested-ternary': 'off',
       'no-new-symbol': 'error',
-      'no-redeclare': 'off', // use TS rule
+      'no-redeclare': 'error',
       'no-restricted-globals': ['error', 'event', 'location'],
       'no-sparse-arrays': 'error',
       'no-tabs': 'warn',
@@ -99,9 +92,9 @@ export default [
       'no-trailing-spaces': 'warn',
       'no-underscore-dangle': 'off',
       'no-unmodified-loop-condition': 'warn',
-      'no-undef': 'off', // TS handles this
+      'no-undef': ['error', { typeof: true }],
       'no-unreachable': 'warn',
-      'no-useless-constructor': 'off', // use TS rule
+      'no-useless-constructor': 'error',
       'no-var': 'error',
       'no-with': 'error',
       'object-shorthand': 'error',
@@ -120,16 +113,23 @@ export default [
       // react
       'react/jsx-no-undef': 'error',
       'react/jsx-pascal-case': 'warn',
-      'react/jsx-uses-react': 'off',
+      'react/jsx-uses-react': 'error',
       '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': 'off',
+      'react/react-in-jsx-scope': 'error',
 
-      // hooks //NOTE:(diwaker) temp keep as warn during migration; tighten later
+      // 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
       'react-hooks/rules-of-hooks': 'warn',
 
       // sorting
@@ -147,33 +147,12 @@ 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 (JS/TS)
+  // Tests
   {
-    files: ['**/__tests__/*.{js,jsx,ts,tsx}'],
+    files: ['**/__tests__/*.{js,jsx}'],
     languageOptions: {
       globals: globals.jest,
     },
@@ -184,15 +163,15 @@ export default [
 
   // Storybook specifics
   {
-    files: ['**/*.stories.{jsx,tsx}'],
+    files: ['**/*.stories.jsx'],
     rules: {
       semi: ['warn', 'always'],
     },
   },
 
-  // Project import sort groups (apply to JS and TS)
+  // Project import sort groups
   {
-    files: ['*.{js,jsx,ts,tsx}', '**/*.{js,jsx,ts,tsx}'],
+    files: ['*.{js,jsx}', '**/*.{js,jsx}'],
     rules: {
       'simple-import-sort/imports': [
         'error',

package/gulpfile.js

@@ -2,6 +2,8 @@ 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');
 
@@ -9,13 +11,13 @@ const babelRc = require('./babel.config');
 const doNotBuildThese = [
   'src/__tests__/**',
   'src/**/*.test.js',
-  'src/**/*.stories.tsx',
+  'src/**/*.stories.jsx',
   'src/**/*.stories.module.css',
   'src/stories/**',
 ];
 
 function getJsStream() {
-  return gulp.src('src/**/*.{ts,tsx}', {
+  return gulp.src('src/**/*.{js,jsx}', {
     ignore: doNotBuildThese,
   });
 }
@@ -23,20 +25,47 @@ function getJsStream() {
 function buildCjs() {
   return getJsStream()
     .pipe(babel(babelRc))
-    .pipe(replace('.tsx', '.js'))
-    .pipe(replace('.ts', '.js'))
+    .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(gulp.dest('lib'));
 }
 
 function copyOther() {
   return gulp
     .src('src/**/*', {
-      ignore: ['src/**/*.{ts,tsx}', ...doNotBuildThese],
+      ignore: ['src/**/*.{js,jsx}', ...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);
 
-const coreBuild = gulp.parallel(buildCjs, 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/Accordion/Accordion.js

@@ -21,13 +21,12 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
     classNames,
     isOpen = false,
     showToggle = false,
+    checked = false,
     children
   } = _ref;
   const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
-  const [checked, setChecked] = React.useState(false);
   const handleToggle = () => {
-    setChecked(!checked);
-    onToggle?.(id, !checked);
+    onToggle?.(!checked);
   };
   const handleAccordionClick = () => {
     if (!disabled) {
@@ -54,14 +53,13 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
   }, /*#__PURE__*/React.createElement(_Toggle.Toggle, {
     checked: checked,
     onChange: handleToggle,
-    ariaLabel: 'toggle'
+    ariaLabel: 'toggle',
+    disabled: disabled
   })), header), /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
     disabled: disabled,
     size: "small",
-    type: "ghost"
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    type: "ghost",
     className: _AccordionModule.default.icon,
     ariaLabel: 'Collapse button'
     // we are not defining onClick here as we are using onClick of the parent here.

package/lib/components/Accordion/Accordion.js.flow

@@ -0,0 +1,115 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import {Toggle} from '../Toggle';
+
+import css from './Accordion.module.css';
+
+
+export type AccordionClassNames = $ReadOnly<{
+  wrapper?: string,
+  headerWrapper?: string,
+  header?: string,
+  content?: string,
+}>;
+
+export type AccordionPropsType = {
+  id: string,
+  header: React.Node,
+  children: React.Node,
+  classNames?: AccordionClassNames,
+  isOpen?: boolean,
+  disabled?: boolean,
+  showToggle?: boolean,
+  onChange?: ?(id?: string, isOpen: boolean) => mixed,
+  checked?: boolean,
+  onToggle?: (checked: boolean) => mixed,
+};
+
+export const Accordion: React$AbstractComponent<
+  AccordionPropsType,
+  HTMLDivElement,
+> = React.forwardRef<AccordionPropsType, HTMLDivElement>(
+  (
+    {
+      id,
+      header,
+      onChange,
+      onToggle,
+      disabled = false,
+      classNames,
+      isOpen = false,
+      showToggle = false,
+      checked = false,
+      children,
+    }: AccordionPropsType,
+    ref,
+  ) => {
+    const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
+    const handleToggle = () => {
+      onToggle?.(!checked);
+    };
+
+    const handleAccordionClick = () => {
+      if (!disabled) {
+        onChange?.(id, !accordionIsOpen);
+        setAccordionIsOpen((prev) => !prev);
+      }
+    };
+
+    React.useEffect(() => {
+      setAccordionIsOpen(isOpen);
+    }, [isOpen]);
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Accordion"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        <div
+          className={classify(css.headerWrapper, classNames?.headerWrapper)}
+          onClick={handleAccordionClick}
+        >
+          <div className={classify(css.header, classNames?.header)}>
+            {showToggle && (
+              <div
+                onClick={(e) => {
+                  e.stopPropagation(); // prevent toggle click from triggering accordion toggle
+                }}
+              >
+                <Toggle
+                  checked={checked}
+                  onChange={handleToggle}
+                  ariaLabel={'toggle'}
+                  disabled={disabled}
+                />
+              </div>
+            )}
+            {header}
+          </div>
+          <Button
+            iconLeftName={accordionIsOpen ? 'chevron-up' : 'chevron-down'}
+            disabled={disabled}
+            size="small"
+            type="ghost"
+            className={css.icon}
+            ariaLabel={'Collapse button'}
+            // we are not defining onClick here as we are using onClick of the parent here.
+          />
+        </div>
+
+        {accordionIsOpen && (
+          <div className={classify(css.content, classNames?.content)}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';

package/lib/components/Accordion/AccordionGroup.js

@@ -14,18 +14,15 @@ const AccordionGroup = _ref => {
     children,
     onAccordionClick,
     onToggle,
-    enabledToggleIds = [],
     initialOpenId = '',
     classNames
   } = _ref;
   const [openId, setOpenedId] = React.useState(initialOpenId);
-  const [checks, setChecks] = React.useState(enabledToggleIds);
   const handleAccordionChange = (id, isOpen) => {
     setOpenedId(isOpen ? id : '');
     onAccordionClick?.(id, isOpen);
   };
   const handleToggle = (id, checked) => {
-    setChecks(prev => checked ? [...prev, id] : prev.filter(x => x !== id));
     setOpenedId(prev => checked ? id : prev === id ? '' : prev);
     onToggle?.(id, checked);
   };
@@ -33,22 +30,22 @@ const AccordionGroup = _ref => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
-
-    // @ts-ignore - TS2571 - Object is of type 'unknown'.
     const childId = child.props.id;
-    const isDisabled = !checks.includes(childId);
     const isOpen = openId === childId;
+    const accordionOnToggle = checked => {
+      handleToggle(childId, checked); // parents onToggle, pass id as well.
+      child.props.onToggle?.(checked);
+    };
     return /*#__PURE__*/React.cloneElement(child, {
-      // @ts-ignore - TS2769 - No overload matches this call.
       classNames: {
-        headerWrapper: _AccordionGroupModule.default.accordionHeaderWrapper,
-        wrapper: _AccordionGroupModule.default.accordionWrapper
+        ...child.props.classNames,
+        wrapper: (0, _classify.default)(_AccordionGroupModule.default.accordionWrapper, child.props.classNames?.wrapper)
       },
       onChange: handleAccordionChange,
-      onToggle: handleToggle,
+      onToggle: accordionOnToggle,
       showToggle: true,
-      disabled: isDisabled,
-      isOpen
+      isOpen,
+      key: childId
     });
   });
   return /*#__PURE__*/React.createElement("div", {

package/lib/components/Accordion/AccordionGroup.js.flow

@@ -0,0 +1,77 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './AccordionGroup.module.css';
+
+
+export type AccordionGroupClassNames = $ReadOnly<{
+  wrapper?: string,
+}>;
+
+export type AccordionGroupPropsType = {
+  children: React.Node,
+  onAccordionClick?: (id: string, isOpen: boolean) => mixed,
+  onToggle?: (id: string, checked?: boolean) => mixed,
+  enabledToggleIds?: Array<string>,
+  initialOpenId?: string,
+  classNames?: AccordionGroupClassNames,
+};
+
+export const AccordionGroup = ({
+  children,
+  onAccordionClick,
+  onToggle,
+  initialOpenId = '',
+  classNames,
+}: AccordionGroupPropsType): React.Node => {
+  const [openId, setOpenedId] = React.useState(initialOpenId);
+
+  const handleAccordionChange = (id, isOpen) => {
+    setOpenedId(isOpen ? id : '');
+    onAccordionClick?.(id, isOpen);
+  };
+  const handleToggle = (id, checked) => {
+    setOpenedId((prev) => (checked ? id : prev === id ? '' : prev));
+    onToggle?.(id, checked);
+  };
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
+    const childId = child.props.id;
+
+    const isOpen = openId === childId;
+
+    const accordionOnToggle = (checked) => {
+      handleToggle(childId, checked); // parents onToggle, pass id as well.
+      child.props.onToggle?.(checked);
+    };
+
+    return React.cloneElement(child, {
+      classNames: {
+        ...child.props.classNames,
+        wrapper: classify(
+          css.accordionWrapper,
+          child.props.classNames?.wrapper,
+        ),
+      },
+      onChange: handleAccordionChange,
+      onToggle: accordionOnToggle,
+      showToggle: true,
+      isOpen,
+      key: childId,
+    });
+  });
+
+  return (
+    <div className={classify(css.wrapper, classNames?.wrapper)}>
+      {enhancedChildren}
+    </div>
+  );
+};
+
+AccordionGroup.displayName = 'AccordionGroup';

package/lib/components/Accordion/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Accordion';
+export * from './AccordionGroup';