Updated Storybook to version 8

.storybook/main.js

@@ -1,47 +1,59 @@
 import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
+import path from "path";
+import { mergeDeepLeft } from "ramda";
 
-const path = require("path");
-const { mergeDeepLeft } = require("ramda");
+import commonResolve from "@bigbinary/neeto-commons-frontend/configs/nanos/webpack/resolve.js";
+import projectResolve from "../resolve.js";
 
-const commonResolve = require("@bigbinary/neeto-commons-frontend/configs/nanos/webpack/resolve.js");
-const projectResolve = require("../resolve.js");
 const rootResolve = mergeDeepLeft(projectResolve, commonResolve);
 
-module.exports = {
+const config = {
   staticDirs: ["./public"],
 
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
 
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-scss",
-    "@storybook/addon-postcss",
     "@storybook/addon-docs",
-    "storybook-addon-designs",
-    "@storybook/addon-console",
     "storybook-dark-mode",
   ],
 
   webpackFinal: async config => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      ...rootResolve.alias,
-      src: path.resolve(__dirname, "..", "src"),
-      "@bigbinary/neetoui": path.resolve(__dirname, "..", "src"),
-    };
-
-    config.plugins = [
-      ...config.plugins,
-      new MonacoWebpackPlugin({
-        languages: ["javascript"],
-      }),
-    ];
+    config.module.rules.push({
+      test: /\.(js|jsx|mjs|ts|tsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader",
+      },
+    });
 
-    return config;
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          ...rootResolve.alias,
+          src: path.resolve(__dirname, "..", "src"),
+          "@bigbinary/neetoui": path.resolve(__dirname, "..", "src"),
+        },
+        extensions: [
+          ...(config.resolve.extensions || []),
+          ".js",
+          ".jsx",
+          ".mdx",
+          ".ts",
+          ".tsx",
+        ],
+      },
+      plugins: [
+        ...config.plugins,
+        new MonacoWebpackPlugin({
+          languages: ["javascript"],
+        }),
+      ],
+    };
   },
 
   framework: {
@@ -53,3 +65,5 @@ module.exports = {
     autodocs: true,
   },
 };
+
+export default config;

package.json

@@ -74,10 +74,10 @@
     "@babel/core": "^7.19.1",
     "@babel/eslint-parser": "7.17.0",
     "@babel/plugin-transform-runtime": "^7.19.1",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-env": "7.17.10",
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.19.0",
+    "@babel/runtime": "7.19.0",
     "@bigbinary/babel-preset-neeto": "^1.0.3",
     "@bigbinary/eslint-plugin-neeto": "^1.1.30",
     "@bigbinary/neeto-cist": "1.0.3",
@@ -91,13 +91,13 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-console": "^2.0.0",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-links": "7.5.3",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-docs": "^8.4.1",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "^14.0.0",
@@ -109,11 +109,12 @@
     "avvvatars-react": "^0.4.2",
     "babel-loader": "^8.2.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-import": "^1.13.5",
+    "babel-plugin-import": "^1.13.8",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-js-logger": "1.0.17",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-preval": "^5.1.0",
+    "babel-plugin-transform-imports": "^2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-preset-react": "6.24.1",
     "babel-preset-typescript": "^7.0.0-alpha.19",
@@ -180,9 +181,9 @@
     "rollup-plugin-styles": "^4.0.0",
     "sass": "1.26.11",
     "sass-loader": "10.0.2",
-    "storybook": "^7.5.3",
+    "storybook": "^8.3.6",
     "storybook-addon-designs": "^6.3.1",
-    "storybook-dark-mode": "^3.0.1",
+    "storybook-dark-mode": "^4.0.2",
     "style-loader": "1.2.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "tinycolor2": "^1.4.2",
@@ -193,13 +194,13 @@
   "peerDependencies": {
     "@babel/runtime": "7.19.0",
     "@bigbinary/neeto-cist": "1.0.3",
-    "@bigbinary/neeto-commons-frontend": "latest",
+    "@bigbinary/neeto-commons-frontend": "^3.0.10",
     "@bigbinary/neeto-hotkeys": "1.0.4",
-    "@bigbinary/neeto-icons": "latest",
-    "@tippyjs/react": "4.2.6",
-    "@wojtekmaj/react-timerange-picker": "5.5.0",
-    "antd": "5.9.2",
-    "avvvatars-react": "0.4.2",
+    "@bigbinary/neeto-icons": "^1.9.22",
+    "@tippyjs/react": "4.2.5",
+    "@wojtekmaj/react-timerange-picker": "^5.5.0",
+    "antd": "5.16.0",
+    "avvvatars-react": "^0.4.2",
     "classnames": "2.2.1",
     "dayjs": "1.11.10",
     "formik": "2.2.0",
@@ -209,23 +210,20 @@
     "linkifyjs": "4.1.2",
     "qs": "^6.11.2",
     "ramda": "^0.29.0",
-    "react": "18.2.0",
-    "react-colorful": "5.6.1",
-    "react-dom": "18.2.0",
-    "react-drag-listview": "2.0.0",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.2.0",
+    "react-drag-listview": "^2.0.0",
     "react-i18next": "11.16.8",
-    "react-resizable": "3.0.4",
+    "react-resizable": "^3.0.4",
     "react-router-dom": "5.3.3",
-    "react-time-picker": "6.5.2",
-    "react-toastify": "8.0.2",
+    "react-time-picker": "^6.5.2",
+    "react-toastify": "9.0.1",
     "tippy.js": "6.3.7",
     "yup": "0.32.11",
     "zustand": "4.3.2"
   },
   "resolutions": {
-    "@storybook/addon-essentials/**/glob-parent": "5.1.2",
-    "@storybook/builder-webpack5/**/glob-parent": "5.1.2",
-    "@storybook/react/**/glob-parent": "5.1.2",
     "**/trim": "0.0.3",
     "tailwindcss/**/postcss": "7.0.36",
     "cssnano/**/nth-check": "2.0.1"

stories/Components/Accordion.stories.jsx

@@ -2,21 +2,64 @@ import React from "react";
 
 import Accordion from "components/Accordion";
 
-import AccordionCSSCustomization from "!raw-loader!./AccordionStoriesDocs/AccordionCSSCustomization.mdx";
-import AccordionDocs from "!raw-loader!./AccordionStoriesDocs/AccordionDocs.mdx";
+const description = `
+\`import { Accordion } from "@bigbinary/neetoui";\`
+
+\`Accordion\` allows users to expand or collapse sections of content organized in
+a vertical stack to reveal or hide additional information.
+
+\`Accordion\` component has one subcomponent:
+
+- \`Accordion.Item\`: Represents an individual section within an accordion that can be expanded or collapsed.
+`;
 
 const metadata = {
   title: "Components/Accordion",
   component: Accordion,
   subcomponents: { "Accordion.Item": Accordion.Item },
   parameters: {
     layout: "padded",
-    docs: { description: { component: AccordionDocs } },
+    docs: { description: { component: description } },
     design: {
       type: "figma",
       url: "https://www.figma.com/file/zhdsnPzXzr264x1WUeVdmA/02-Components?node-id=104%3A15",
     },
   },
+  argTypes: {
+    children: {
+      description:
+        "To specify the content to be rendered inside the Accordion.",
+      control: "object",
+      table: { type: { summary: "node" } },
+    },
+    style: {
+      description: "To set the style of the Accordion.",
+      control: "radio",
+      options: Object.values({
+        primary: "primary",
+        secondary: "secondary",
+      }),
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "primary" },
+      },
+    },
+    padded: {
+      description: "To add padding to the Accordion container.",
+      control: "boolean",
+      table: { type: { summary: "boolean" }, defaultValue: { summary: false } },
+    },
+    defaultActiveKey: {
+      description: "Index of the Accordion item to be opened initially.",
+      control: "number",
+      table: { type: { summary: "number" } },
+    },
+    className: {
+      description: "To provide external classnames to Accordion container.",
+      control: "text",
+      table: { type: { summary: "string" } },
+    },
+  },
 };
 
 const AccordionStory = args => (
@@ -123,6 +166,68 @@ const AccordionWithCustomizedIcon = args => (
 AccordionWithCustomizedIcon.storyName = "Accordion with customized icon";
 AccordionWithCustomizedIcon.parameters = { layout: "default" };
 
+const AccordionCSSCustomization = `
+Starting from v6, neeto-ui supports enhanced customization of components using
+CSS variables. These are the variables that are being used in the \`Accordion\`
+component.
+
+\`\`\`css
+// Outer wrapper
+--neeto-ui-accordion-outer-wrapper-padding-x: 0px;
+--neeto-ui-accordion-outer-wrapper-padding-y: 0px;
+--neeto-ui-accordion-outer-wrapper-border-radius: 0px;
+--neeto-ui-accordion-outer-wrapper-bg-color: transparent;
+
+// Wrapper
+--neeto-ui-accordion-wrapper-border-width: 1px;
+--neeto-ui-accordion-wrapper-border-color: rgb(var(--neeto-ui-gray-300));
+--neeto-ui-accordion-wrapper-border-radius: 0px;
+
+// Item
+--neeto-ui-accordion-item-padding-x: 8px;
+--neeto-ui-accordion-item-padding-y: 16px;
+--neeto-ui-accordion-item-font-size: var(--neeto-ui-text-base);
+--neeto-ui-accordion-item-font-weight: var(--neeto-ui-font-medium);
+--neeto-ui-accordion-item-line-height: 16px;
+--neeto-ui-accordion-item-color: rgb(var(--neeto-ui-gray-800));
+--neeto-ui-accordion-item-bg-color: transparent;
+
+// Drop
+--neeto-ui-accordion-drop-padding-x: 8px;
+--neeto-ui-accordion-drop-padding-top: 4px;
+--neeto-ui-accordion-drop-padding-bottom: 16px;
+--neeto-ui-accordion-drop-color: rgb(var(--neeto-ui-gray-800));
+--neeto-ui-accordion-drop-margin-bottom: 0px;
+
+// Item - Open
+--neeto-ui-accordion-item-open-color: rgb(var(--neeto-ui-black));
+
+// Item - Hover
+--neeto-ui-accordion-item-hover-color: rgb(var(--neeto-ui-black));
+
+// Item - Focus Visible
+--neeto-ui-accordion-item-focus-visible-color: rgb(var(--neeto-ui-black));
+--neeto-ui-accordion-item-focus-visible-outline: 3px solid rgba(var(--neeto-ui-primary-500), 50%);
+--neeto-ui-accordion-item-focus-visible-outline-offset: 1px;
+--neeto-ui-accordion-item-focus-visible-box-shadow: none;
+\`\`\`
+
+You can use these variables to customize the component to your liking. Here is
+an example:
+
+\`\`\`css
+.neetix-accordion {
+  --neeto-ui-accordion-item-padding-x: 0px;
+  --neeto-ui-accordion-drop-padding-x: 0px;
+  --neeto-ui-accordion-item-color: rgb(var(--neeto-ui-primary-500));
+  --neeto-ui-accordion-item-hover-color: rgb(var(--neeto-ui-primary-600));
+  --neeto-ui-accordion-item-open-color: rgb(var(--neeto-ui-primary-800));
+}
+\`\`\`
+
+#### Output
+`;
+
 const CSSCustomization = args => (
   <Accordion {...args}>
     <Accordion.Item title="Custom Accordion 1">