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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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.
- **/