From d6ad7968f1883ddee8d732bfe45a22d64352a395 Mon Sep 17 00:00:00 2001 From: Yash Raj Chhabra Date: Thu, 18 Sep 2025 13:51:40 +0530 Subject: [PATCH 1/2] chore: upgrade to storybook 7 --- .storybook/main.js | 18 +- .storybook/preview.js | 4 +- package.json | 36 +- src/components/Panel/Panel.stories.tsx | 116 +- yarn.lock | 8773 +++++++++++------------- 5 files changed, 4285 insertions(+), 4662 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 3aed07347..0099bf728 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,20 +1,23 @@ const webpackCommon = require('../webpack.common'); module.exports = { - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-links', - 'storybook-css-modules', '@storybook/addon-a11y', 'storybook-addon-rtl', ], + staticDirs: ['../public/assets'], - framework: '@storybook/react', - core: { - builder: 'webpack5', + + framework: { + name: '@storybook/react-webpack5', + options: {}, }, + typescript: { check: false, checkOptions: {}, @@ -25,6 +28,7 @@ module.exports = { prop.parent ? !/node_modules/.test(prop.parent.fileName) : true, }, }, + webpackFinal: async (config, { configType }) => { const webpackCommonConfig = webpackCommon( {}, @@ -40,4 +44,8 @@ module.exports = { }, }; }, + + docs: { + autodocs: true, + }, }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 8a8d686a0..0943ece64 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,2 +1,2 @@ -import { initializeRTL } from 'storybook-addon-rtl'; -initializeRTL(); +// import { initializeRTL } from 'storybook-addon-rtl'; +// initializeRTL(); diff --git a/package.json b/package.json index 948b9dff6..8c43125cd 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "url": "https://github.com/EightfoldAI/octuple" }, "scripts": { - "storybook": "start-storybook -p 2022", - "build-storybook": "rm -rf storybook-static && mkdir storybook-static && build-storybook -o storybook-static", + "storybook": "storybook dev -p 2022", + "build-storybook": "rm -rf storybook-static && mkdir storybook-static && storybook build -o storybook-static", "build": "rm -rf lib && yarn lint && rollup -c", "build:webpack": "rm -rf lib && yarn lint && webpack --config webpack.prod.js --mode production", "details": "webpack --config webpack.dev.js --mode development --stats-error-details", @@ -111,23 +111,21 @@ "@rollup/plugin-node-resolve": "15.2.3", "@rollup/plugin-terser": "0.4.4", "@rollup/plugin-typescript": "11.1.6", - "@storybook/addon-a11y": "6.5.13", - "@storybook/addon-actions": "6.5.13", - "@storybook/addon-docs": "6.5.13", - "@storybook/addon-essentials": "6.5.13", - "@storybook/addon-interactions": "6.5.13", - "@storybook/addon-links": "6.5.13", - "@storybook/addon-postcss": "2.0.0", - "@storybook/addon-storyshots": "6.5.13", - "@storybook/addon-viewport": "6.5.13", - "@storybook/addons": "6.5.13", - "@storybook/builder-webpack5": "6.5.13", - "@storybook/manager-webpack5": "6.5.13", - "@storybook/node-logger": "6.5.13", + "@storybook/addon-a11y": "7.6.20", + "@storybook/addon-actions": "7.6.20", + "@storybook/addon-docs": "7.6.20", + "@storybook/addon-essentials": "7.6.20", + "@storybook/addon-interactions": "7.6.20", + "@storybook/addon-links": "7.6.20", + "@storybook/addon-storyshots": "7.6.20", + "@storybook/addon-viewport": "7.6.20", + "@storybook/addons": "7.6.20", + "@storybook/node-logger": "7.6.20", "@storybook/preset-scss": "1.0.3", - "@storybook/react": "6.5.13", - "@storybook/source-loader": "6.5.13", - "@storybook/theming": "6.5.13", + "@storybook/react": "7.6.20", + "@storybook/react-webpack5": "7.6.20", + "@storybook/source-loader": "7.6.20", + "@storybook/theming": "7.6.20", "@svgr/webpack": "6.3.1", "@teamsupercell/typings-for-css-modules-loader": "2.5.1", "@testing-library/jest-dom": "5.16.2", @@ -220,9 +218,9 @@ "sinon": "14.0.1", "source-map-loader": "3.0.0", "standard-version": "9.5.0", + "storybook": "7.6.20", "storybook-addon-rtl": "0.4.3", "storybook-addon-state": "1.0.3", - "storybook-css-modules": "1.0.5", "style-loader": "3.3.1", "style-resources-loader": "1.5.0", "terser-webpack-plugin": "5.2.5", diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx index 28779c2f3..1849acd25 100644 --- a/src/components/Panel/Panel.stories.tsx +++ b/src/components/Panel/Panel.stories.tsx @@ -1,5 +1,5 @@ import { Stories } from '@storybook/addon-docs'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import React, { useState } from 'react'; import { Button, ButtonVariant } from '../Button'; @@ -83,8 +83,8 @@ export default {
  • Be concise. Limit labels to one or two words. Usually a single verb is best. Include a noun if there's any room for - interpretation about what the verb means. For example, “Save” - or “Save settings.” + interpretation about what the verb means. For example, "Save" + or "Save settings."
    • @@ -122,25 +122,26 @@ export default { options: ['top', 'right', 'bottom', 'left'], control: { type: 'radio' }, }, - panelLazyLoadContent: { - control: { type: 'boolean' }, - defaultValue: false, - }, }, decorators: [ - (Story, context) => ( - - - - ), + (Story, context) => { + // Get feature flag from parameters instead of args + const panelLazyLoadContent = + context.parameters?.panelLazyLoadContent ?? false; + return ( + + + + ); + }, ], -} as ComponentMeta; +} as Meta; -const FeatureFlag_Story: ComponentStory = ( +const FeatureFlag_Story: StoryFn = ( args ) => { return ( @@ -150,7 +151,7 @@ const FeatureFlag_Story: ComponentStory = ( ); }; -const Panel_Story: ComponentStory = (args) => { +const Panel_Story: StoryFn = (args) => { const [visible, setVisible] = useState(false); return ( <> @@ -181,7 +182,7 @@ const Panel_Story: ComponentStory = (args) => { ); }; -const Stacked_Story: ComponentStory = (args) => { +const Stacked_Story: StoryFn = (args) => { const [visible, setVisible] = useState>({}); return ( <> @@ -251,7 +252,7 @@ const Stacked_Story: ComponentStory = (args) => { ); }; -const Panel_Header_Story: ComponentStory = (args) => { +const Panel_Header_Story: StoryFn = (args) => { const [visible, setVisible] = useState(false); return ( <> @@ -316,9 +317,10 @@ const Panel_Header_Story: ComponentStory = (args) => { ); }; -const Panel_With_Dropdown_Story: ComponentStory = (args) => { +const Panel_With_Dropdown_Story: StoryFn = (args) => { const [visible, setVisible] = useState(false); - const [selectedOption, setSelectedOption] = useState('Select an option'); + const [selectedOption, setSelectedOption] = + useState('Select an option'); const menuItems = [ { text: 'Option 1', value: 'option1', type: MenuItemType.button }, @@ -358,17 +360,36 @@ const Panel_With_Dropdown_Story: ComponentStory = (args) => {

    Panel with Dropdown

    - This panel demonstrates keyboard handling with nested components. Try the following: + This panel demonstrates keyboard handling with nested components. + Try the following:

    • Open the dropdown, tooltip, or menu
      • -
    • Press Escape - it will close nested components first, then the panel
      • -
    • Press Tab to navigate between elements
      • +
    • + Press Escape - it will close nested components + first, then the panel +
      • +
    • + Press Tab to navigate between elements +
    - -
    + +
    -
    -

    Selected: {selectedOption}

    +

    + Selected: {selectedOption} +

    - Note: The panel uses canUseDocElement() to safely check for - browser environment and properly handle nested overlays before closing the panel itself. + Note: The panel uses{' '} + canUseDocElement() to safely check for browser + environment and properly handle nested overlays before closing the + panel itself.

    @@ -410,6 +435,22 @@ const Panel_With_Dropdown_Story: ComponentStory = (args) => { ); }; +const Panel_With_Lazy_Load_Content_Story: StoryFn = (args) => { + const [visible, setVisible] = useState(false); + return ( + <> +