orcs-design-system 3.3.1 → 3.3.3

package/es/components/Badge/Badge.stories.js

@@ -12,82 +12,116 @@ export const defaultBadge = () => /*#__PURE__*/_jsx(Badge, {
   children: "Default"
 });
 defaultBadge.storyName = "Default";
-export const colourVariants = () => /*#__PURE__*/_jsxs(_Fragment, {
-  children: [/*#__PURE__*/_jsx(Box, {
-    p: "r",
-    children: /*#__PURE__*/_jsx(Flex, {
-      flexWrap: "wrap",
-      children: /*#__PURE__*/_jsxs(Spacer, {
-        m: "1",
-        children: [/*#__PURE__*/_jsx(Badge, {
-          children: "Default"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "success",
-          children: "Success"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "warning",
-          children: "Warning"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "danger",
-          children: "Danger"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "primaryLight",
-          children: "Low priority"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "primary",
-          children: "Medium priority"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "primaryDark",
-          children: "High priority"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "secondary",
-          children: "Secondary"
-        })]
+
+// eslint-disable-next-line react/prop-types
+export const ColourVariants = function () {
+  let {
+    altStyle = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      p: "r",
+      children: /*#__PURE__*/_jsx(Flex, {
+        flexWrap: "wrap",
+        children: /*#__PURE__*/_jsxs(Spacer, {
+          m: "1",
+          children: [/*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            children: "Default"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "success",
+            children: "Success"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "warning",
+            children: "Warning"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "danger",
+            children: "Danger"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "primaryLight",
+            children: "Low priority"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "primary",
+            children: "Medium priority"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "primaryDark",
+            children: "High priority"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "secondary",
+            children: "Secondary"
+          })]
+        })
       })
-    })
-  }), /*#__PURE__*/_jsx(Box, {
-    p: "r",
-    bg: "greyDarkest",
-    children: /*#__PURE__*/_jsx(Flex, {
-      flexWrap: "wrap",
-      children: /*#__PURE__*/_jsxs(Spacer, {
-        m: "1",
-        children: [/*#__PURE__*/_jsx(Badge, {
-          children: "Default"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "success",
-          children: "Success"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "warning",
-          children: "Warning"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "danger",
-          children: "Danger"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "primaryLight",
-          children: "Low priority"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "primary",
-          children: "Medium priority"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "primaryDark",
-          children: "High priority"
-        }), /*#__PURE__*/_jsx(Badge, {
-          variant: "secondary",
-          children: "Secondary"
-        })]
+    }), !altStyle && /*#__PURE__*/_jsx(Box, {
+      p: "r",
+      bg: "greyDarkest",
+      children: /*#__PURE__*/_jsx(Flex, {
+        flexWrap: "wrap",
+        children: /*#__PURE__*/_jsxs(Spacer, {
+          m: "1",
+          children: [/*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            children: "Default"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "success",
+            children: "Success"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "warning",
+            children: "Warning"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "danger",
+            children: "Danger"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "primaryLight",
+            children: "Low priority"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "primary",
+            children: "Medium priority"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "primaryDark",
+            children: "High priority"
+          }), /*#__PURE__*/_jsx(Badge, {
+            altStyle: altStyle,
+            variant: "secondary",
+            children: "Secondary"
+          })]
+        })
       })
-    })
-  })]
+    })]
+  });
+};
+
+// eslint-disable-next-line react/no-unknown-property
+export const altStyleColourVariants = () => /*#__PURE__*/_jsx(ColourVariants, {
+  altStyle: true
 });
-colourVariants.storyName = "Colour variants";
+altStyleColourVariants.storyName = "Alt style colour variants";
+ColourVariants.storyName = "Colour variants";
 defaultBadge.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "defaultBadge"
 };
-colourVariants.__docgenInfo = {
+ColourVariants.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ColourVariants"
+};
+altStyleColourVariants.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "colourVariants"
+  "displayName": "altStyleColourVariants"
 };

package/es/components/Badge/index.js

@@ -26,53 +26,93 @@ const Item = styled("span").withConfig({
   borderRadius: 1,
   color: themeGet("colors.greyDarkest")(props),
   bg: themeGet("colors.greyLighter")(props),
-  whiteSpace: props.noWrap ? "nowrap" : "normal"
-}), props => variant({
-  variants: {
-    default: {},
-    success: {
-      color: themeGet("colors.successDarkest")(props),
-      bg: themeGet("colors.successLightest")(props)
-    },
-    successPending: {
-      color: themeGet("colors.successDark")(props),
-      bg: themeGet("colors.successEvenLighter")(props)
-    },
-    warning: {
-      color: themeGet("colors.warningDarkest")(props),
-      bg: themeGet("colors.warningLighter")(props)
-    },
-    danger: {
-      color: themeGet("colors.dangerDarkest")(props),
-      bg: themeGet("colors.dangerLightest")(props)
-    },
-    primaryLight: {
-      color: themeGet("colors.primaryDarker")(props),
-      bg: themeGet("colors.primaryLightest")(props)
-    },
-    primary: {
-      color: themeGet("colors.primaryDarkest")(props),
-      bg: themeGet("colors.primaryLighter")(props)
-    },
-    primaryDark: {
-      color: themeGet("colors.primaryDarkest")(props),
-      bg: themeGet("colors.primaryLight")(props)
-    },
-    secondary: {
-      color: themeGet("colors.secondaryDarkest")(props),
-      bg: themeGet("colors.secondaryEvenLighter")(props)
-    }
+  whiteSpace: props.noWrap ? "nowrap" : "normal",
+  ...(props.altStyle ? {
+    bg: themeGet("colors.white")(props),
+    p: "1px"
+  } : {})
+}), props => {
+  if (props.altStyle) {
+    return variant({
+      variants: {
+        default: {},
+        success: {
+          color: themeGet("colors.success")(props)
+        },
+        successPending: {
+          color: themeGet("colors.success")(props)
+        },
+        warning: {
+          color: themeGet("colors.warningDark")(props)
+        },
+        danger: {
+          color: themeGet("colors.danger")(props)
+        },
+        primaryLight: {
+          color: themeGet("colors.primaryLight")(props)
+        },
+        primary: {
+          color: themeGet("colors.primary")(props)
+        },
+        primaryDark: {
+          color: themeGet("colors.primaryDark")(props)
+        },
+        secondary: {
+          color: themeGet("colors.secondary")(props)
+        }
+      }
+    });
+  } else {
+    return variant({
+      variants: {
+        default: {},
+        success: {
+          color: themeGet("colors.successDarkest")(props),
+          bg: themeGet("colors.successLightest")(props)
+        },
+        successPending: {
+          color: themeGet("colors.successDark")(props),
+          bg: themeGet("colors.successEvenLighter")(props)
+        },
+        warning: {
+          color: themeGet("colors.warningDarkest")(props),
+          bg: themeGet("colors.warningLighter")(props)
+        },
+        danger: {
+          color: themeGet("colors.dangerDarkest")(props),
+          bg: themeGet("colors.dangerLightest")(props)
+        },
+        primaryLight: {
+          color: themeGet("colors.primaryDarker")(props),
+          bg: themeGet("colors.primaryLightest")(props)
+        },
+        primary: {
+          color: themeGet("colors.primaryDarkest")(props),
+          bg: themeGet("colors.primaryLighter")(props)
+        },
+        primaryDark: {
+          color: themeGet("colors.primaryDarkest")(props),
+          bg: themeGet("colors.primaryLight")(props)
+        },
+        secondary: {
+          color: themeGet("colors.secondaryDarkest")(props),
+          bg: themeGet("colors.secondaryEvenLighter")(props)
+        }
+      }
+    });
   }
-}), BadgeStyles);
+}, BadgeStyles);
 export default function Badge(_ref) {
   let {
     noWrap,
     children,
     theme,
+    altStyle,
     ...props
   } = _ref;
   const component = /*#__PURE__*/_jsx(Item, {
     noWrap: noWrap,
+    altStyle: altStyle,
     ...props,
     children: children
   });
@@ -89,7 +129,9 @@ Badge.propTypes = {
   /** The label text on the badge is passed as a child element. */
   children: PropTypes.node,
   /** Specifies the system theme. */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** Specifies use the alternative style */
+  altStyle: PropTypes.bool
 };
 Badge.__docgenInfo = {
   "description": "",
@@ -145,6 +187,13 @@ Badge.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "altStyle": {
+      "description": "Specifies use the alternative style",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };

package/es/components/TabsAlt/TabsAlt.stories.js

@@ -0,0 +1,64 @@
+import React from "react";
+import TabsAlt from ".";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import Box from "../Box";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "Components/TabsAlt",
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    boxBorder: "default",
+    shadow: "default",
+    pb: "200px",
+    children: storyFn()
+  })],
+  component: TabsAlt
+};
+const tabsList = [{
+  label: "Details",
+  path: "/details"
+}, {
+  label: "Strategy",
+  path: "/strategy"
+}, {
+  label: "Associations",
+  path: "/associations"
+}, {
+  label: "Visualisation",
+  path: "/visualisation"
+}, {
+  label: "Principles",
+  path: "/principles"
+}, {
+  label: "Planner",
+  path: "/planner"
+}, {
+  label: "Forecast",
+  path: "/forecast"
+}, {
+  label: "Team Builder",
+  path: "/teambuilder"
+}, {
+  label: "History",
+  path: "/history",
+  isVisible: false
+}];
+export const defaultTabs = () => /*#__PURE__*/_jsxs(BrowserRouter, {
+  children: [/*#__PURE__*/_jsx(TabsAlt, {
+    tabsList: tabsList
+  }), /*#__PURE__*/_jsx(Switch, {
+    children: tabsList.map(tab => /*#__PURE__*/_jsx(Route, {
+      path: tab.path,
+      children: /*#__PURE__*/_jsxs(Box, {
+        p: "l",
+        mt: "l",
+        children: ["ROUTE RENDERED: ", tab.label]
+      })
+    }, tab.path))
+  })]
+});
+defaultTabs.storyName = "Default";
+defaultTabs.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "defaultTabs"
+};

package/es/components/TabsAlt/index.js

@@ -0,0 +1,211 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import styled, { css } from "styled-components";
+import { NavLink, useLocation } from "react-router-dom";
+import { isEqual } from "lodash";
+import ActionsMenu, { ActionsMenuItem } from "../ActionsMenu";
+import Icon from "../Icon";
+import FlexItem from "../Flex";
+import { themeGet } from "@styled-system/theme-get";
+import PropTypes from "prop-types";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabsContainer = styled.div.withConfig({
+  displayName: "TabsAlt__TabsContainer",
+  componentId: "sc-hkpvfu-0"
+})(["position:relative;width:100%;&:after{content:\"\";position:absolute;bottom:0;width:100%;height:37px;background-color:", ";border-bottom:2px solid ", ";z-index:0;}"], themeGet("colors.white"), themeGet("colors.greyLighter"));
+const TabWrapper = styled.div.withConfig({
+  displayName: "TabsAlt__TabWrapper",
+  componentId: "sc-hkpvfu-1"
+})(["position:relative;width:100%;z-index:1;"]);
+const VisibleTabs = styled.div.withConfig({
+  displayName: "TabsAlt__VisibleTabs",
+  componentId: "sc-hkpvfu-2"
+})(["flex-shrink:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;"]);
+const activeTabStyle = css(["background-color:", ";color:", ";border-bottom:2px solid ", ";cursor:default;&:hover,&:focus{background-color:", ";color:", ";box-shadow:none;}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"));
+const Tab = styled(NavLink).withConfig({
+  displayName: "TabsAlt__Tab",
+  componentId: "sc-hkpvfu-3"
+})(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:", " ", ";font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
+  let {
+    fullWidth
+  } = _ref;
+  return fullWidth ? "100%" : "fit-content";
+}, themeGet("colors.greyLighter"), themeGet("space.3"), themeGet("space.4"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyDark"), _ref2 => {
+  let {
+    tabInShowMore
+  } = _ref2;
+  return tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
+}, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
+const ShowMoreButton = styled.button.withConfig({
+  displayName: "TabsAlt__ShowMoreButton",
+  componentId: "sc-hkpvfu-4"
+})(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";background-color:", ";border-bottom:2px solid ", ";transition:", ";padding:", " ", ";color:", ";display:", ";align-items:center;cursor:pointer;&:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.3"), themeGet("space.4"), themeGet("colors.greyDark"), _ref3 => {
+  let {
+    showMoreVisible
+  } = _ref3;
+  return showMoreVisible ? "flex" : "none";
+}, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
+const ShowMoreTabs = styled.div.withConfig({
+  displayName: "TabsAlt__ShowMoreTabs",
+  componentId: "sc-hkpvfu-5"
+})(["border-radius:", ";background-color:", ";width:fit-content;overflow:hidden;display:flex;gap:1px;flex-direction:column;justify-content:flex-start;box-shadow:", ";& [class^=\"TabsAlt__Tab\"]{border:0;padding:", ";text-align:left;}"], themeGet("radii.2"), themeGet("colors.greyLighter"), themeGet("shadows.boxDefault"), themeGet("space.3"));
+const tabsGap = 0;
+const TabsAlt = _ref4 => {
+  let {
+    tabsList
+  } = _ref4;
+  const [isMounted, setIsMounted] = useState(false);
+  const containerRef = useRef(null);
+  const containerVisibleWidth = useRef(0);
+  const [showMoreTabs, setShowMoreTabs] = useState([]);
+  const calculateVisibility = useCallback(actionElements => {
+    const showMoreButton = document.getElementById("show-more-button");
+    const showMoreButtonWidth = showMoreButton?.offsetWidth ?? 0;
+    // as we loop through the tabs, we need to calculate the width of the visible tabs.
+    let calculatedWidth = showMoreTabs.length ? showMoreButtonWidth : 0;
+
+    // variable for the list of hidden tabs which will be put to react state
+    const newShowMoreTabs = [];
+    [...actionElements].filter(el => el.tagName === "A") // this ensures that the ShowMore button is not included in this logic
+    .forEach((actionEl, i) => {
+      // visibleElementsWidth will be increased by
+      // the corresponding width of the element + gapWidth
+      calculatedWidth += actionEl.offsetWidth + tabsGap;
+
+      // compare computed widths and push into newShowMoreTabs if current tab width is bigger than container width
+      if (calculatedWidth >= containerVisibleWidth.current) {
+        newShowMoreTabs.push(i);
+      }
+    });
+    if (!isEqual(showMoreTabs, newShowMoreTabs)) {
+      // update React state with the list of hidden tabs
+      setShowMoreTabs(newShowMoreTabs);
+    }
+  }, [showMoreTabs]);
+  useEffect(() => {
+    const actionElements = containerRef.current?.children || [];
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.contentBoxSize) {
+          const contentBoxSize = entry.contentBoxSize[0];
+
+          // Math.ceil is necessary to round up and return
+          // the smallest integer for the size of observed element
+          containerVisibleWidth.current = Math.ceil(contentBoxSize.inlineSize);
+
+          // invoke the functions which calculates tabs visibility
+          // and sets data to the list of hidden tabs
+          calculateVisibility(actionElements);
+        }
+      }
+    });
+
+    // This is to help in cases where useEffect callback is triggered before React repaint.
+    if (!isMounted) {
+      setTimeout(() => {
+        setIsMounted(true);
+        calculateVisibility(actionElements);
+      }, 500);
+    } else {
+      // adding ResizeObserver to the observed container
+      resizeObserver.observe(containerRef.current);
+    }
+  }, [calculateVisibility, isMounted]);
+  const visibleTabsList = tabsList.filter(tab => tab.isVisible ?? true);
+  const showMoreTabsList = visibleTabsList.filter((_tab, i) => showMoreTabs.includes(i));
+  const location = useLocation();
+  const showMoreItemActive = showMoreTabsList.find(action => location.pathname.endsWith(action.path));
+  return /*#__PURE__*/_jsx(TabsContainer, {
+    children: /*#__PURE__*/_jsx(TabWrapper, {
+      children: /*#__PURE__*/_jsxs(VisibleTabs, {
+        style: {
+          gap: tabsGap
+        },
+        ref: containerRef,
+        role: "tablist",
+        children: [visibleTabsList.map((tab, i) => /*#__PURE__*/_jsx(Tab, {
+          className: tab.className,
+          id: tab.id,
+          "data-testid": tab["data-testid"],
+          tabInShowMore: showMoreTabs.includes(i),
+          to: tab.path,
+          role: "tab",
+          children: tab.label
+        }, tab.path)), /*#__PURE__*/_jsx(ActionsMenu, {
+          direction: "bottom-end",
+          role: "presentation",
+          renderTrigger: props => /*#__PURE__*/_jsxs(ShowMoreButton, {
+            ...props,
+            showMoreVisible: showMoreTabsList.length,
+            id: "show-more-button",
+            className: showMoreItemActive && "hasActive",
+            role: "tab",
+            children: [/*#__PURE__*/_jsx(FlexItem, {
+              flex: "0 0 auto",
+              children: "More"
+            }), /*#__PURE__*/_jsx(FlexItem, {
+              flex: "0 0 auto",
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: ["fas", "chevron-down"],
+                title: "Down",
+                ml: "xs",
+                size: "sm"
+              })
+            })]
+          }),
+          closeOnClick: true,
+          children: /*#__PURE__*/_jsx(ShowMoreTabs, {
+            children: showMoreTabsList.map(tab => /*#__PURE__*/_jsx(ActionsMenuItem, {
+              className: tab.className,
+              id: tab.id,
+              "data-testid": tab["data-testid"],
+              Component: Tab,
+              fullWidth: true,
+              to: tab.path,
+              children: tab.label
+            }, tab.path))
+          })
+        })]
+      })
+    })
+  });
+};
+TabsAlt.propTypes = {
+  /** isVisible defaults to true if not passed */
+  tabsList: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+    isVisible: PropTypes.bool
+  })).isRequired
+};
+TabsAlt.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TabsAlt",
+  "props": {
+    "tabsList": {
+      "description": "isVisible defaults to true if not passed",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "required": true
+            },
+            "path": {
+              "name": "string",
+              "required": true
+            },
+            "isVisible": {
+              "name": "bool",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": true
+    }
+  }
+};
+export default TabsAlt;

package/es/components.test.js

@@ -59,6 +59,7 @@ test("all components exported", () => {
       "SystemThemeProvider",
       "Table",
       "Tabs",
+      "TabsAlt",
       "Tag",
       "Text",
       "TextArea",

package/es/index.js

@@ -40,6 +40,7 @@ export { default as StatusDot } from "./components/StatusDot";
 export { default as StyledLink, styleLink } from "./components/StyledLink";
 export { default as Table } from "./components/Table";
 export { default as Tabs } from "./components/Tabs";
+export { default as TabsAlt } from "./components/TabsAlt";
 export { default as Tag } from "./components/Tag";
 export { default as TextInput } from "./components/TextInput";
 export { default as TextArea } from "./components/TextArea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "engines": {
     "node": "20.12.2"
   },
@@ -36,7 +36,7 @@
     "module": "BABEL_ENV=es babel lib -d es",
     "deploy-stack": "serverless deploy",
     "deploy-client": "serverless client deploy  --no-confirm",
-    "storybook": "storybook dev",
+    "storybook": "storybook dev -p 1337",
     "build-storybook": "storybook build -o .build_storybook",
     "deploy-storybook": "storybook-to-ghpages",
     "playroom": "playroom start",