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

package/lib/utils/makeClassNameComponent/makeClassNameComponent.js

@@ -4,66 +4,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.makeClassNameComponent = makeClassNameComponent;
-exports.makeClassNameComponentCustom = makeClassNameComponentCustom;
 exports.nameHoc = nameHoc;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../classify"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/** Extract the actual ref instance type from a JSX element/component type */
+
+/** Public props for generated components: original props (no ref) + optional className */
+
+/** Utility: set displayName on a component */
+function nameComponent(component, name) {
+  component.displayName = name;
+  return component;
+}
+
+/** HOC display name helper: sets Wrapper.displayName = `${hocName}(WrappedName)` */
 function nameHoc(WrapperComponent, WrappedComponent, hocName) {
   const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WrapperComponent.displayName = `${hocName}(${wrappedComponentName})`;
   return WrapperComponent;
 }
-// @ts-ignore - TS2345 - Argument of type 'C' is not assignable to parameter of type 'C'.
 
-// @ts-ignore - TS2345 - Argument of type 'C' is not assignable to parameter of type 'C'.
-function makeClassNameComponent(baseClassName) {
-  let ComponentType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
-  let name
-  //@ts-expect-error
-  = arguments.length > 2 ? arguments[2] : undefined;
-  return /*#__PURE__*/React.forwardRef(
-  // @ts-ignore - TS7031 - Binding element 'className' implicitly has an 'any' type. | TS7006 - Parameter 'ref' implicitly has an 'any' type.
-  nameComponent((_ref, ref) => {
+/** Public alias for “className-merging” components */
+
+/**
+ * Factory: builds a component for a given intrinsic tag or component type
+ * that merges `className` with a base class and forwards its ref.
+ */
+function makeClassNameComponent(baseClassName, ComponentType, name) {
+  const Comp = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       className,
       ...props
     } = _ref;
-    return (
-      /*#__PURE__*/
-      // @ts-ignore - TS2604 - JSX element type 'ComponentType' does not have any construct or call signatures.
-      React.createElement(ComponentType, _extends({}, props, {
-        ref: ref,
-        className: (0, _classify.default)(baseClassName, className)
-      }))
-    );
-  }, `CNC(${name || ComponentType})`));
-}
-function makeClassNameComponentCustom(baseClassName, ComponentType) {
-  return /*#__PURE__*/React.forwardRef(
-  // @ts-ignore - TS2345 - Argument of type 'ComponentType<unknown>' is not assignable to parameter of type 'ForwardRefRenderFunction<B, unknown>'.
-  nameHoc(
-  // @ts-ignore - TS2345 - Argument of type '({ className, ...props }: { [x: string]: any; className: any; }, ref: any) => Element' is not assignable to parameter of type 'ComponentType<unknown>'. | TS7031 - Binding element 'className' implicitly has an 'any' type. | TS7006 - Parameter 'ref' implicitly has an 'any' type.
-  (_ref2, ref) => {
-    let {
-      className,
-      ...props
-    } = _ref2;
-    return (
-      /*#__PURE__*/
-      // @ts-ignore - TS2769 - No overload matches this call.
-      React.createElement(ComponentType, _extends({}, props, {
-        ref: ref,
-        className: (0, _classify.default)(baseClassName, className)
-      }))
-    );
-  }, ComponentType, 'CNC'));
-}
-
-// @ts-ignore - TS7006 - Parameter 'component' implicitly has an 'any' type.
-function nameComponent(component, name) {
-  component.displayName = name;
-  return component;
+    return /*#__PURE__*/React.createElement(ComponentType ?? 'div', {
+      ...props,
+      ref,
+      className: (0, _classify.default)(baseClassName, className)
+    });
+  });
+  nameComponent(Comp, `CNC(${name || ComponentType || 'div'})`);
+  // Bridge Flow.AbstractComponent signature
+  return Comp;
 }

package/lib/utils/merge-refs/merge-refs.d.ts

@@ -1,4 +1,4 @@
 export declare function mergeRefs(refs: Array<{
     current: HTMLElement | null | undefined;
-}>): (value?: HTMLElement | null | undefined) => void;
+} | ((value?: HTMLElement | null | undefined) => void)>): (value?: HTMLElement | null | undefined) => void;
 //# sourceMappingURL=merge-refs.d.ts.map

package/lib/utils/merge-refs/merge-refs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"merge-refs.d.ts","sourceRoot":"","sources":["../../../src/utils/merge-refs/merge-refs.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CACvB,IAAI,EAAE,KAAK,CAAC;IACV,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;CACzC,CAAC,GACD,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAWlD"}
+{"version":3,"file":"merge-refs.d.ts","sourceRoot":"","sources":["../../../src/utils/merge-refs/merge-refs.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CACvB,IAAI,EAAE,KAAK,CACP;IAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAA;CAAC,GACzC,CAAC,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC,CACrD,GACA,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAUlD"}

package/lib/utils/merge-refs/merge-refs.js

@@ -8,7 +8,6 @@ function mergeRefs(refs) {
   return value => {
     refs.forEach(ref => {
       if (typeof ref === 'function') {
-        // @ts-ignore - TS2349 - This expression is not callable.
         ref(value);
       } else if (ref != null) {
         ref.current = value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"
@@ -13,7 +13,7 @@
     "build:style-variables": "rimraf src/styles/variables && style-dictionary build --config ./config.js",
     "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 && storybook dev --host genesis.proxysense.co --port 6006",
+    "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",
@@ -23,6 +23,7 @@
     "build:changelog": "standard-version",
     "build:no-bump-changelog": "standard-version --skip.bump --skip.commit --skip.tag",
     "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",
@@ -71,28 +72,46 @@
     "@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-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@babel/preset-react": "^7.18.6",
+    "@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",
     "cspell": "^9.1.2",
     "eslint": "^9.9.0",
-    "typescript-eslint": "^8.8.0",
     "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^29.0.1",
@@ -118,25 +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",
-    "@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/react": "~19.1.9",
-    "@types/react-dom": "~19.1.7",
-    "@types/react-window": "~1.8.8",
-    "@types/standard-version": "~7.1.3",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.8.0"
   },
   "homepage": "https://spaced-out.github.io/ui-design-system",
   "repository": {
@@ -148,7 +154,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged && yarn flow",
+      "pre-commit": "lint-staged && yarn flow && yarn flow:storybook",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },

package/tsconfig.json

@@ -27,11 +27,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "skipLibCheck": true,
-    "allowImportingTsExtensions":true,
+    "allowImportingTsExtensions": true,
     "typeRoots": ["./src/types/**/*", "./node_modules/@types"]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx","src/types/**/*"],
-  "exclude": [
-    "**/__tests__/**",
-  ]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/types/**/*"],
+  "exclude": ["**/__tests__/**"]
 }

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.
- **/