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

package/.cspell/custom-words.txt

@@ -82,6 +82,7 @@ noreferrer
 Noronha
 nsfmc
 OPACITYS
+overscan
 Pago
 partialformat
 Paulo
@@ -138,9 +139,3 @@ yourcomponentname
 Yuzhno
 yxxx
 incase
-codemod
-diwaker
-curre
-heapsnapshot
-typescriptify
-forwardref

package/.github/workflows/publish_to_npm.yml

@@ -5,6 +5,11 @@ name: Release Genesis to NPM
 on:
   workflow_dispatch:
     inputs:
+      branch:
+        # Note(Nishant): New input added to dynamically select release branch from UI
+        description: 'Branch to release from'
+        required: true
+        default: master
       release-type:
         description: 'Select Release type (prerelease appends beta in build number)'
         type: choice
@@ -36,6 +41,8 @@ jobs:
         with:
           token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
           fetch-depth: '0'
+          ref: ${{ github.event.inputs.branch }} # Note(Nishant): Dynamically checkout the selected branch from input
+
       - name: Setup Node.js @18
         uses: actions/setup-node@v4
         with:
@@ -76,35 +83,49 @@ jobs:
           git config --global user.email "86281150+superrover@users.noreply.github.com"
           git config --global user.name "Nishant Gaurav"
           git fetch --all
-          git checkout master
-          git pull origin master
+          git checkout ${{ github.event.inputs.branch }}  # Note(Nishant): Checkout the correct branch before release
+          git pull origin ${{ github.event.inputs.branch }}
 
       # Bump package version
       # Use tag latest
-      - name: Bump release version
-        if: startsWith(github.event.inputs.release-type, 'pre') != true
-        run: |
-          yarn build:changelog --release-as $RELEASE_TYPE
-          echo "RELEASE_TAG=latest" >> $GITHUB_ENV
-        env:
-          RELEASE_TYPE: ${{ github.event.inputs.release-type }}
-
       # Bump package pre-release version
       # Use tag beta for pre-release versions
-      - name: Bump pre-release version
-        if: startsWith(github.event.inputs.release-type, 'pre')
+      - name: Validate release type against selected branch
+        id: validate-release
         run: |
-          yarn build:changelog --$RELEASE_TYPE beta
-          echo "RELEASE_TAG=beta" >> $GITHUB_ENV
-        env:
-          RELEASE_TYPE: ${{ github.event.inputs.release-type }}
+          BRANCH="${{ github.event.inputs.branch }}"
+          RELEASE_TYPE="${{ github.event.inputs.release-type }}"
+
+          if [[ "$BRANCH" != "master" && "$RELEASE_TYPE" != "prerelease" ]]; then
+            echo "❌ Only prerelease is allowed on non-master branches."
+            exit 1
+          fi
+
+          if [[ "$RELEASE_TYPE" == "prerelease" ]]; then
+            echo "RELEASE_TAG=beta" >> $GITHUB_ENV
+            echo "IS_PRERELEASE=true" >> $GITHUB_ENV
+          else
+            echo "RELEASE_TAG=latest" >> $GITHUB_ENV
+            echo "IS_PRERELEASE=false" >> $GITHUB_ENV
+          fi
+        # Note(Nishant): Enforces prerelease-only behavior on non-master branches
+
+      - name: Bump version and generate changelog
+        run: |
+          if [[ "$IS_PRERELEASE" == "true" ]]; then
+            yarn build:changelog --${{ github.event.inputs.release-type }} beta
+          else
+            yarn build:changelog --release-as ${{ github.event.inputs.release-type }}
+          fi
+        # Note(Nishant): Unified step for version bump, respecting prerelease condition
 
       # Push changes
       - name: Push CHANGELOG.md and created release tag
         run: |
-          git push --follow-tags origin master
+          git push --follow-tags origin ${{ github.event.inputs.branch }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        # Note(Nishant): Push to selected branch, not hardcoded master
 
       # Publish version to NPM repository
       - name: Publish to NPM

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

package/CHANGELOG.md

@@ -2,19 +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)
+### [0.4.14](https://github.com/spaced-out/ui-design-system/compare/v0.4.13...v0.4.14) (2025-08-11)
 
 
 ### Bug Fixes
 
-* **build:** only generated js artifacts are consumable now ([cffca5b](https://github.com/spaced-out/ui-design-system/commit/cffca5b7406c6ebb54a849714ba0b1b4fb214120))
+* added text container classname to override ([#385](https://github.com/spaced-out/ui-design-system/issues/385)) ([1dd0671](https://github.com/spaced-out/ui-design-system/commit/1dd0671cfb915ae9e2405a3cd44f6fe4503a906e))
+* modified npm release job to honour branch ([7ee7b2e](https://github.com/spaced-out/ui-design-system/commit/7ee7b2ea261eae4c4b2d238f18d3171d7fac8b81))
 
-### [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)
+### [0.4.13](https://github.com/spaced-out/ui-design-system/compare/v0.4.12...v0.4.13) (2025-08-04)
 
 
 ### Features
 
-* **codebase:** migration to typescript ([45d9f71](https://github.com/spaced-out/ui-design-system/commit/45d9f711ad69c09e7ce8e1ea205fe9ac07ee1f5b))
+* **table:** [GDS-529] table virtualisation and refactor ([#380](https://github.com/spaced-out/ui-design-system/issues/380)) ([32498d7](https://github.com/spaced-out/ui-design-system/commit/32498d7ccef6430d795781676027d342af664d6c))
 
 ### [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-typescript',
+    '@babel/preset-flow',
   ],
   plugins: ['macros'],
 };

package/config.js

@@ -12,8 +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 = '';
+        const addStr = `// @flow strict\n\n`;
         str = addStr + str;
       }
       return str;
@@ -57,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: {
@@ -72,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/gulpfile.js

@@ -1,6 +1,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');
@@ -15,7 +17,7 @@ const doNotBuildThese = [
 ];
 
 function getJsStream() {
-  return gulp.src('src/**/*.{ts,tsx}', {
+  return gulp.src('src/**/*.{js,jsx}', {
     ignore: doNotBuildThese,
   });
 }
@@ -23,21 +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'));
 }
 
-const coreBuild = gulp.parallel(buildCjs, copyOther);
+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);
 
 module.exports.build = coreBuild;
+// module.exports.build = fullBuild;

package/lib/components/Accordion/Accordion.js

@@ -59,9 +59,7 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
     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,116 @@
+// @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,
+  onToggle?: ?(id?: string, 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,
+      children,
+    }: AccordionPropsType,
+    ref,
+  ) => {
+    const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
+
+    const [checked, setChecked] = React.useState<boolean>(false);
+
+    const handleToggle = () => {
+      setChecked(!checked);
+      onToggle?.(id, !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'}
+                />
+              </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

@@ -33,13 +33,10 @@ 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;
     return /*#__PURE__*/React.cloneElement(child, {
-      // @ts-ignore - TS2769 - No overload matches this call.
       classNames: {
         headerWrapper: _AccordionGroupModule.default.accordionHeaderWrapper,
         wrapper: _AccordionGroupModule.default.accordionWrapper

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

@@ -0,0 +1,75 @@
+// @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,
+  enabledToggleIds = [],
+  initialOpenId = '',
+  classNames,
+}: AccordionGroupPropsType): React.Node => {
+  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);
+  };
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
+    const childId = child.props.id;
+
+    const isDisabled = !checks.includes(childId);
+
+    const isOpen = openId === childId;
+
+    return React.cloneElement(child, {
+      classNames: {
+        headerWrapper: css.accordionHeaderWrapper,
+        wrapper: css.accordionWrapper,
+      },
+      onChange: handleAccordionChange,
+      onToggle: handleToggle,
+      showToggle: true,
+      disabled: isDisabled,
+      isOpen,
+    });
+  });
+
+  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';

package/lib/components/Avatar/Avatar.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR_SIZE = exports.AVATAR_COLOR = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Text = require("../../components/Text");
-var _color = require("../../styles/variables/_color");
+var _color = _interopRequireWildcard(require("../../styles/variables/_color"));
+var COLORS = _color;
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _StatusIndicator = require("../StatusIndicator");
@@ -99,15 +100,10 @@ const AvatarConditionalContent = _ref2 => {
     className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image)
   }) : iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    type: iconType
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ small: string; medium: string; large: string; extraLarge: string; }>'.
-    ,
+    type: iconType,
     size: iconSize[size],
     className: classNames?.icon
-  }) : text ?
-  /*#__PURE__*/
-  // @ts-ignore - TS2786 - 'AvatarTextDecorator' cannot be used as a JSX component.
-  React.createElement(AvatarTextDecorator, {
+  }) : text ? /*#__PURE__*/React.createElement(AvatarTextDecorator, {
     avatarText: getAvatarText(text),
     size: size,
     className: classNames?.text
@@ -133,9 +129,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       [_AvatarModule.default.largeSize]: size === 'large',
       [_AvatarModule.default.mediumSize]: size === 'medium',
       [_AvatarModule.default.smallSize]: size === 'small'
-    }, classNames?.wrapper)
-    // @ts-ignore - TS2322 - Type 'unknown' is not assignable to type 'CSSProperties | undefined'.
-    ,
+    }, classNames?.wrapper),
     style: style,
     ref: ref
   }, ring ? /*#__PURE__*/React.createElement("div", {
@@ -178,9 +172,7 @@ const BaseAvatar = _ref4 => {
       [_AvatarModule.default.baseLargeSize]: size === 'large',
       [_AvatarModule.default.baseMediumSize]: size === 'medium',
       [_AvatarModule.default.baseSmallSize]: size === 'small'
-    }, classNames?.wrapper)
-    // @ts-ignore - TS2698 - Spread types may only be created from object types.
-    ,
+    }, classNames?.wrapper),
     style: {
       ...style,
       background: AVATAR_COLOR[color]