@unbxd-ui/unbxd-react-components 0.2.145-beta.4 → 0.2.145-beta.5

package/components/TabsComponent/TabsComponent.stories.js

@@ -3,59 +3,297 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.VerticalTabs = exports.SimpleUsage = exports.HorizontalTabs = void 0;
+exports["default"] = exports.WithEventHandling = exports.WithDisabledTabs = exports.VerticalTabs = exports.DisabledWithStaticContent = exports.Default = exports.CustomTabTitle = exports.CustomStyling = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TabsComponent = _interopRequireDefault(require("./TabsComponent"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var SetupTab = function SetupTab() {
-  return /*#__PURE__*/_react["default"].createElement("div", null, "This is Setup Tab");
-};
-var ConfigTab = function ConfigTab() {
-  return /*#__PURE__*/_react["default"].createElement("div", null, "This is Configuration Tab");
-};
-var InfoTab = function InfoTab() {
-  return /*#__PURE__*/_react["default"].createElement("div", null, "This is Info Tab");
-};
-var items = [{
-  id: "SETUP",
-  label: "Setup",
-  disabled: true,
-  bodyComponent: /*#__PURE__*/_react["default"].createElement(SetupTab, null)
-}, {
-  id: "CONFIG",
-  label: "Configuration",
-  bodyComponent: /*#__PURE__*/_react["default"].createElement(ConfigTab, null)
-}, {
-  id: "INFO",
-  label: "Info",
-  bodyComponent: /*#__PURE__*/_react["default"].createElement(InfoTab, null)
-}];
-var _default = exports["default"] = {
-  title: "TabsComponent"
-};
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  var onTabChanged = function onTabChanged() {};
-  return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
-    items: items,
-    selectedTab: "CONFIG",
-    onTabChanged: onTabChanged
-  });
-};
-var HorizontalTabs = exports.HorizontalTabs = function HorizontalTabs() {
-  var onTabChanged = function onTabChanged() {};
-  return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
-    items: items,
-    selectedTab: "CONFIG",
-    onTabChanged: onTabChanged,
-    appearance: "HORIZONTAL"
-  });
-};
-var VerticalTabs = exports.VerticalTabs = function VerticalTabs() {
-  var onTabChanged = function onTabChanged() {};
-  return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
-    items: items,
-    selectedTab: "CONFIG",
-    onTabChanged: onTabChanged,
-    appearance: "VERTICAL"
-  });
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'Components/TabsComponent',
+  component: _TabsComponent["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: ['HORIZONTAL', 'VERTICAL'],
+      description: 'Orientation of the tabs'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether all tabs are disabled'
+    },
+    selectedTab: {
+      control: 'text',
+      description: 'ID of the initially selected tab'
+    }
+  }
+};
+var _default = exports["default"] = meta;
+var Tab1Content = function Tab1Content() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "First Tab Content"), /*#__PURE__*/_react["default"].createElement("p", null, "This is the content of the first tab."));
+};
+var Tab2Content = function Tab2Content() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Second Tab Content"), /*#__PURE__*/_react["default"].createElement("p", null, "This is the content of the second tab."));
+};
+var Tab3Content = function Tab3Content() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Third Tab Content"), /*#__PURE__*/_react["default"].createElement("p", null, "This is the content of the third tab."));
+};
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
+      items: [{
+        id: 'tab1',
+        label: 'Tab 1',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab1Content, null)
+      }, {
+        id: 'tab2',
+        label: 'Tab 2',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab2Content, null)
+      }, {
+        id: 'tab3',
+        label: 'Tab 3',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab3Content, null)
+      }],
+      appearance: "HORIZONTAL"
+    });
+  }
+};
+var VerticalTabs = exports.VerticalTabs = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
+      items: [{
+        id: 'tab1',
+        label: 'Tab 1',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab1Content, null)
+      }, {
+        id: 'tab2',
+        label: 'Tab 2',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab2Content, null)
+      }, {
+        id: 'tab3',
+        label: 'Tab 3',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab3Content, null)
+      }],
+      appearance: "VERTICAL"
+    });
+  }
+};
+var WithDisabledTabs = exports.WithDisabledTabs = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
+      items: [{
+        id: 'tab1',
+        label: 'Enabled Tab',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab1Content, null)
+      }, {
+        id: 'tab2',
+        label: 'Disabled Tab',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab2Content, null),
+        disabled: true
+      }, {
+        id: 'tab3',
+        label: 'Enabled Tab',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab3Content, null)
+      }],
+      appearance: "HORIZONTAL"
+    });
+  }
+};
+var CustomStyling = exports.CustomStyling = {
+  render: function render() {
+    var customItems = [{
+      id: 'success',
+      label: /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          color: '#4CAF50'
+        }
+      }, "\u2713 Success"),
+      bodyComponent: /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          padding: '20px',
+          color: '#4CAF50'
+        }
+      }, "Success content")
+    }, {
+      id: 'warning',
+      label: /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          color: '#FFC107'
+        }
+      }, "\u26A0 Warning"),
+      bodyComponent: /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          padding: '20px',
+          color: '#FFC107'
+        }
+      }, "Warning content")
+    }, {
+      id: 'error',
+      label: /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          color: '#F44336'
+        }
+      }, "\u2715 Error"),
+      bodyComponent: /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          padding: '20px',
+          color: '#F44336'
+        }
+      }, "Error content")
+    }];
+    return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
+      items: customItems,
+      appearance: "HORIZONTAL",
+      className: "custom-tabs"
+    });
+  }
+};
+var WithEventHandling = exports.WithEventHandling = {
+  render: function render() {
+    var _React$useState = _react["default"].useState('tab1'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      activeTab = _React$useState2[0],
+      setActiveTab = _React$useState2[1];
+    var _React$useState3 = _react["default"].useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      log = _React$useState4[0],
+      setLog = _React$useState4[1];
+    var handleTabChange = function handleTabChange(tabId) {
+      setLog(function (prev) {
+        return [].concat(_toConsumableArray(prev), ["Tab change requested: ".concat(tabId)]);
+      });
+      return tabId !== 'tab3';
+    };
+    var handleTabChanged = function handleTabChanged(tabId) {
+      setLog(function (prev) {
+        return [].concat(_toConsumableArray(prev), ["Tab changed to: ".concat(tabId)]);
+      });
+      setActiveTab(tabId);
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
+      items: [{
+        id: 'tab1',
+        label: 'Tab 1',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab1Content, null)
+      }, {
+        id: 'tab2',
+        label: 'Tab 2',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab2Content, null)
+      }, {
+        id: 'tab3',
+        label: 'Tab 3 (Blocked)',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab3Content, null)
+      }],
+      selectedTab: activeTab,
+      onTabChange: handleTabChange,
+      onTabChanged: handleTabChanged
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginTop: '20px',
+        padding: '10px',
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", null, "Event Log:"), log.map(function (entry, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: index
+      }, entry);
+    })));
+  }
+};
+var DisabledWithStaticContent = exports.DisabledWithStaticContent = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
+      items: [{
+        id: 'tab1',
+        label: 'Tab 1',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab1Content, null)
+      }, {
+        id: 'tab2',
+        label: 'Tab 2',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab2Content, null)
+      }, {
+        id: 'tab3',
+        label: 'Tab 3',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab3Content, null)
+      }],
+      disabled: true,
+      staticTabContent: /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          padding: '20px',
+          textAlign: 'center',
+          color: '#666'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("h3", null, "Tabs are currently disabled"), /*#__PURE__*/_react["default"].createElement("p", null, "This content is shown when all tabs are disabled."))
+    });
+  }
+};
+var CustomTabTitle = exports.CustomTabTitle = {
+  render: function render() {
+    var CustomTitle = function CustomTitle(props) {
+      var itemData = props.itemData,
+        selected = props.selected,
+        changeTab = props.changeTab;
+      var id = itemData.id,
+        label = itemData.label;
+      var isSelected = id === selected;
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        onClick: function onClick() {
+          return changeTab(id);
+        },
+        style: {
+          padding: '10px 20px',
+          cursor: 'pointer',
+          backgroundColor: isSelected ? '#3E71F2' : '#fff',
+          color: isSelected ? '#fff' : '#000',
+          borderRadius: '20px',
+          margin: '0 5px',
+          listStyle: 'none'
+        }
+      }, label);
+    };
+    return /*#__PURE__*/_react["default"].createElement(_TabsComponent["default"], {
+      items: [{
+        id: 'tab1',
+        label: 'Custom Tab 1',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab1Content, null)
+      }, {
+        id: 'tab2',
+        label: 'Custom Tab 2',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab2Content, null)
+      }, {
+        id: 'tab3',
+        label: 'Custom Tab 3',
+        bodyComponent: /*#__PURE__*/_react["default"].createElement(Tab3Content, null)
+      }],
+      TabTitleItem: CustomTitle
+    });
+  }
 };

package/components/Tooltip/Tooltip.stories.js

@@ -3,21 +3,215 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SimpleUsage = void 0;
+exports["default"] = exports.RichContent = exports.ProgrammaticControl = exports.DirectionsDemo = exports.Default = exports.CustomStyling = exports.ClickActivated = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var CustomActivator = function CustomActivator() {
-  return /*#__PURE__*/_react["default"].createElement("span", null, "Hover over me");
-};
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-    tooltipActivator: /*#__PURE__*/_react["default"].createElement(CustomActivator, null)
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: "https://cdn1.iconfinder.com/data/icons/hawcons/32/700231-icon-61-warning-512.png",
-    width: 20
-  }), "This is a sample tooltip");
-};
-var _default = exports["default"] = {
-  title: "Tooltip"
+var meta = {
+  title: 'Components/Tooltip',
+  component: _Tooltip["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['right', 'bottom', 'left', 'top'],
+      description: 'Direction in which the tooltip appears'
+    },
+    activatorAction: {
+      control: 'radio',
+      options: ['click', 'hover'],
+      description: 'Action that triggers the tooltip'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Custom activator components
+var InfoIcon = function InfoIcon() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '20px',
+      height: '20px',
+      borderRadius: '50%',
+      backgroundColor: '#3E71F2',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '14px',
+      cursor: 'pointer'
+    }
+  }, "i");
+};
+var QuestionIcon = function QuestionIcon() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '20px',
+      height: '20px',
+      borderRadius: '50%',
+      backgroundColor: '#6c757d',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '14px',
+      cursor: 'pointer'
+    }
+  }, "?");
+};
+
+// Default story with hover action
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], null, "This is a default tooltip that appears on hover"));
+  }
+};
+
+// Story demonstrating different directions
+var DirectionsDemo = exports.DirectionsDemo = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '50px',
+        padding: '50px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "right"
+    }, "Tooltip on the right"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "left"
+    }, "Tooltip on the left"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "top"
+    }, "Tooltip on the top"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      direction: "bottom"
+    }, "Tooltip on the bottom"));
+  }
+};
+
+// Story with click action
+var ClickActivated = exports.ClickActivated = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      activatorAction: "click",
+      TooltipActivator: InfoIcon
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, "This tooltip is activated by clicking")));
+  }
+};
+
+// Story with custom activator and rich content
+var RichContent = exports.RichContent = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      TooltipActivator: QuestionIcon,
+      direction: "bottom"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '15px',
+        maxWidth: '200px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", {
+      style: {
+        margin: '0 0 10px 0'
+      }
+    }, "Help Information"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '0'
+      }
+    }, "This tooltip contains rich HTML content with styling and formatting."), /*#__PURE__*/_react["default"].createElement("ul", {
+      style: {
+        margin: '10px 0 0 0',
+        paddingLeft: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("li", null, "Feature 1"), /*#__PURE__*/_react["default"].createElement("li", null, "Feature 2"), /*#__PURE__*/_react["default"].createElement("li", null, "Feature 3")))));
+  }
+};
+
+// Story showing custom styling
+var CustomStyling = exports.CustomStyling = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      className: "custom-tooltip",
+      TooltipActivator: function TooltipActivator() {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            padding: '5px 10px',
+            backgroundColor: '#28a745',
+            color: 'white',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }
+        }, "Hover me");
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '10px',
+        backgroundColor: '#28a745',
+        color: 'white',
+        borderRadius: '4px',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+      }
+    }, "Custom styled tooltip content")));
+  }
+};
+
+// Story demonstrating programmatic control
+var ProgrammaticControl = exports.ProgrammaticControl = {
+  render: function render() {
+    var tooltipRef = _react["default"].useRef();
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        return tooltipRef.current.hideToolTip();
+      },
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#dc3545',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      }
+    }, "Hide Tooltip")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      ref: tooltipRef,
+      activatorAction: "click",
+      TooltipActivator: InfoIcon
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, "This tooltip can be controlled programmatically")));
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unbxd-ui/unbxd-react-components",
-  "version": "0.2.145-beta.4",
+  "version": "0.2.145-beta.5",
   "description": "React components library",
   "keywords": [
     "react components",
@@ -19,8 +19,6 @@
     "*.css"
   ],
   "scripts": {
-    "storybook": "start-storybook -p 6006 -s public",
-    "deploy-storybook": "storybook-to-ghpages",
     "scss": "node-sass src/components -o src/components --output-style compressed",
     "publish-scss": "node-sass src/components -o lib/components --output-style compressed",
     "postcss": "postcss src/components/*.css --use autoprefixer --dir src/components",
@@ -33,21 +31,22 @@
     "copyscss": "cp  -rf src/components/core.scss src/components/theme.scss lib/components",
     "link": "npm run build-css && npm run publish-css && npm run build && npm run copypackage && npm run copyscss && cd lib && npm link",
     "publish-prod": "npm run publish-css && npm run build && npm run copypackage && npm run copyscss && cd lib && npm publish",
-    "publish-beta": "npm run publish-css && npm run build && npm run copypackage && npm run copyscss && cd lib && npm publish --tag beta"
+    "publish-beta": "npm run publish-css && npm run build && npm run copypackage && npm run copyscss && cd lib && npm publish --tag beta",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "gh-pages -d storybook-static"
   },
   "dependencies": {
-    "@storybook/addon-a11y": "^7.0.25",
-    "@storybook/addon-storysource": "^7.0.25",
     "bluebird": "^3.7.2",
     "dequal": "^1.0.1",
     "lodash.clonedeep": "^4.5.0",
     "motion": "^12.0.6",
     "postcss": "^8.4.28",
+    "postcss-loader": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-window": "^1.8.6",
     "react-window-infinite-loader": "^1.0.7",
-    "sass": "^1.63.6",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
@@ -57,25 +56,32 @@
     "@babel/plugin-proposal-export-default-from": "^7.14.5",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@storybook/addon-actions": "^7.0.25",
-    "@storybook/addon-console": "^2.0.0",
-    "@storybook/addon-docs": "^7.0.26",
-    "@storybook/addon-info": "^4.1.8",
-    "@storybook/addon-links": "^7.0.25",
-    "@storybook/addons": "^7.0.25",
-    "@storybook/react": "^7.0.25",
-    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "autoprefixer": "^10.4.14",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
-    "eslint": "^7.2.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.57.1",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-storybook": "^0.12.0",
+    "gh-pages": "^6.3.0",
     "node-sass": "^8.0.0",
     "postcss-cli": "^10.1.0",
-    "sass-loader": "^7.3.1",
-    "storybook-readme": "^4.0.5"
+    "prop-types": "^15.8.1",
+    "sass": "^1.89.0",
+    "sass-loader": "^13.3.2",
+    "storybook": "^8.6.14",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.88.0"
   },
   "overrides": {
     "fbjs": "^3.0.5",