@feminab/box-ui 0.1.0 → 0.1.3

package/dist/stories/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../src/stories/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAW,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAO7B,CAAA;AAED,eAAe,IAAI,CAAC;AAEpB,UAAU,KAAM,SAAQ,WAAW;IAC/B,QAAQ,EAAE,KAAK,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAwBnC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,KAAK,CAyB1C,CAAA"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAW,WAAW,EAAE,MAAM,gBAAgB,CAAC;;AAOtD,wBAOU;AACV,UAAU,KAAM,SAAQ,WAAW;IAC/B,QAAQ,EAAE,KAAK,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CA2BnC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,KAAK,CA4B1C,CAAA"}

package/dist/stories/SideNav.stories.d.ts

@@ -1,8 +1,7 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { SideNavProps } from "../@interfaces";
-import { SideNav } from "../Nav/SideNav";
-declare const meta: Meta<typeof SideNav>;
-export default meta;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
+export default _default;
 interface Props extends SideNavProps {
     darkMode: boolean;
 }

package/dist/stories/SideNav.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.stories.d.ts","sourceRoot":"","sources":["../src/stories/SideNav.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAIzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,KAAM,SAAQ,YAAY;IAClC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAmBnC,CAAC"}
+{"version":3,"file":"SideNav.stories.d.ts","sourceRoot":"","sources":["SideNav.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;;AAK9C,wBAGU;AAEV,UAAU,KAAM,SAAQ,YAAY;IAClC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiBD,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAKnC,CAAC"}

package/dist/stories/TextInput.stories.d.ts

@@ -1,8 +1,7 @@
 import { TextInputProps } from "../@interfaces";
-import { Meta, StoryObj } from "@storybook/react";
-import { TextInput } from "../TextInput";
-declare const meta: Meta<typeof TextInput>;
-export default meta;
+import { StoryObj } from "@storybook/react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
+export default _default;
 interface Props extends TextInputProps {
     darkMode: boolean;
 }

package/dist/stories/TextInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../src/stories/TextInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,KAAM,SAAQ,cAAc;IACpC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAwCnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAuC5C,CAAC"}
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["TextInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;;AAMlD,wBAGU;AAEV,UAAU,KAAM,SAAQ,cAAc;IACpC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAMnC,CAAC;AAyCF,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAM5C,CAAC"}

package/dist/stories/Typography.stories.d.ts

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Typography, TypographyProps } from "../Typography";
-declare const meta: Meta<typeof Typography>;
-export default meta;
+import { StoryObj } from "@storybook/react";
+import { TypographyProps } from "../Typography";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
+export default _default;
 interface Props extends TypographyProps {
     darkMode: boolean;
 }

package/dist/stories/Typography.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../src/stories/Typography.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAMjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,KAAM,SAAQ,eAAe;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,KAAK,CAqB7C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,KAAK,CAsC9C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,KAAK,CAgC1C,CAAC"}
+{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["Typography.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;;AAG5D,wBAMU;AAEV,UAAU,KAAM,SAAQ,eAAe;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,KAAK,CAqB7C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,KAAK,CAsC9C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,KAAK,CAgC1C,CAAC"}

package/dist/utils/IconWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { IconType } from "react-icons";
+interface IconWrapperProps {
+    Icon: IconType;
+}
+export declare const IconWrapper: ({ Icon, ...props }: IconWrapperProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=IconWrapper.d.ts.map

package/dist/utils/IconWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconWrapper.d.ts","sourceRoot":"","sources":["IconWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,uBAAwB,gBAAgB,sBAG/D,CAAC"}

package/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['/node_modules/'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom',
+    '<rootDir>/jest.setup.ts', // 👈 Add this line
+  ],
+  moduleNameMapper: {
+    '^.+\\.(css|scss|sass)$': 'identity-obj-proxy',
+    '^storybook/internal/preview-api$': '<rootDir>/node_modules/@storybook/preview-api',
+  },
+};

package/jest.setup.ts

@@ -0,0 +1,3 @@
+import ResizeObserver from 'resize-observer-polyfill';
+
+globalThis.ResizeObserver = ResizeObserver;

package/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  command = "npm run storybook:build"
+  publish = "storybook-static"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feminab/box-ui",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -8,19 +8,15 @@
   "dependencies": {
     "@headlessui/react": "^2.2.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
     "@types/node": "^16.18.126",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "classnames": "^2.5.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-headless-pagination": "^1.1.0",
     "react-icons": "^5.5.0",
-    "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -29,16 +25,13 @@
     "test": "tsdx test",
     "eject": "tsdx eject",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "storybook:build": "build-storybook",
-    "storybook:deploy": "gh-pages -d storybook-static",
+    "storybook:build": "storybook build -o storybook-static",
     "build:css": "postcss ./src/styles/tailwind.css build -o css/tailwind.dist.css --minify"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended"
+      "react-app/jest"
     ]
   },
   "browserslist": {
@@ -59,33 +52,39 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
-    "@chromatic-com/storybook": "^3.2.6",
-    "@storybook/addon-essentials": "^8.6.0",
-    "@storybook/addon-interactions": "^8.6.0",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.0",
-    "@storybook/blocks": "^8.6.0",
-    "@storybook/preset-create-react-app": "^8.6.0",
-    "@storybook/react": "^8.6.0",
-    "@storybook/react-webpack5": "^8.6.0",
-    "@storybook/test": "^8.6.0",
+    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-interactions": "7.6.20",
+    "@storybook/addon-links": "7.6.20",
+    "@storybook/cli": "^7.6.20",
+    "@storybook/preset-create-react-app": "7.6.20",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^0.11.3",
     "eslint-plugin-tailwindcss": "^3.18.0",
     "gh-pages": "^6.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.2",
     "prop-types": "^15.8.1",
     "react-refresh": "^0.17.0",
-    "storybook": "^8.6.0",
+    "react-scripts": "^5.0.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.6.20",
     "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.3.1",
+    "ts-loader": "^9.5.2",
     "tsdx": "^0.14.1",
-    "typescript": "^5.8.2",
+    "typescript": "^4.9.5",
     "webpack": "^5.98.0"
   }
 }

package/src/Nav/MobileNav.tsx

@@ -12,6 +12,7 @@ export const MobileNavbar: FC<MobileNavProps> = ({ open, toggleOpen }) => (
        Box UI
     </Typography>
     <svg
+      role="button"
       width="32"
       height="32"
       viewBox="0 0 32 32"
@@ -22,6 +23,7 @@ export const MobileNavbar: FC<MobileNavProps> = ({ open, toggleOpen }) => (
           "opacity-0": open,
         },
       )}
+      data-testid= "mobile-nav-toggle"
       onClick={toggleOpen}
     >
       <path

package/src/Nav/SideNav.tsx

@@ -55,6 +55,7 @@ export const SideNav = ({
     
     return (
         <div
+        data-testid= "side-nav"
           className={classNames(
             "py-6 flex flex-col flex-grow bg-white dark:bg-gray-900 transform ease-out duration-100 overflow-y-auto xs:overflow-y-visible",
             {

package/src/Paginate.tsx

@@ -22,6 +22,7 @@ export const Paginate = ({
     return (
       <div className={classNames("flex w-full h-10 items-center", className)}>
         <ArrowLeft
+          data-testid="prevBtn"
           size={20}
           className={classNames("mr-3 text-gray-500 dark:text-white", {
             "cursor-pointer": page !== 0,
@@ -37,6 +38,7 @@ export const Paginate = ({
           {`Page ${page} of ${totalPages}`}
         </div>
         <ArrowRight
+          data-testid="nextBtn"
           size={20}
           className={classNames("ml-3 text-gray-500 dark:text-white", {
             "cursor-pointer": page !== totalPages - 1,

package/src/Select.tsx

@@ -56,7 +56,7 @@ export const Select: FC<SelectProps> = ({
                 },
                 width,)}>
               {LeadingIcon && (
-                <div className="w-5 h-5 mr-2 overflow-hidden">
+                <div className="w-5 h-5 mr-2 overflow-hidden" data-testid="leading-icon">
                   {setProps(LeadingIcon, 20, classNames("text-gray-400"))}
                 </div>
               )}

package/src/TextInput.tsx

@@ -18,18 +18,21 @@ export const TextInput: FC<TextInputProps> = ({
   handleChange,
 }) => {
   const { setClassName } = useIconClassName();
+  const inputId = `textinput-${label?.toLowerCase().replace(/\s+/g, '-') || 'input'}`;
 
   return (
     <div>
       {label && (
-        <Typography
-          variant="sm"
-          customWeight="medium"
-          customColor="text-gray-700 dark:text-white"
-          className="mb-1.5"
-        >
-          {label}
-        </Typography>
+        <label htmlFor={inputId}>
+          <Typography
+            variant="sm"
+            customWeight="medium"
+            customColor="text-gray-700 dark:text-white"
+            className="mb-1.5"
+          >
+            {label}
+          </Typography>
+        </label>
       )}
       <div
         className={classNames("relative", { "flex items-center": leadingText })}
@@ -47,17 +50,18 @@ export const TextInput: FC<TextInputProps> = ({
             variant="sm"
             customWeight="regular"
             className={classNames(
-                "flex items-center h-11 text-lg text-gray-500 pl-3.5 pr-3 border border-r-0 rounded-l-lg border-gray-300 dark:border-gray-500",
-                {
-                  "bg-gray-50 dark:bg-gray-700": disabled,
-                  "dark:bg-gray-800": !disabled,
-                },
-              )}
+              "flex items-center h-11 text-lg text-gray-500 pl-3.5 pr-3 border border-r-0 rounded-l-lg border-gray-300 dark:border-gray-500",
+              {
+                "bg-gray-50 dark:bg-gray-700": disabled,
+                "dark:bg-gray-800": !disabled,
+              }
+            )}
           >
             {leadingText}
           </Typography>
         )}
         <input
+          id={inputId}
           type={type}
           value={value}
           placeholder={placeholder}
@@ -76,27 +80,19 @@ export const TextInput: FC<TextInputProps> = ({
                 error,
               "bg-white dark:bg-gray-800": !disabled,
               "bg-gray-50 dark:bg-gray-700": disabled,
-            },
+            }
           )}
         />
       </div>
       {error && (
-        <Typography
-          variant="sm"
-          customWeight="regular"
-          className="mt-1.5 text-error-500"
-        >
+        <label className="text-sm font-normal mt-1.5 text-error-500">
           {error}
-        </Typography>
+        </label>
       )}
       {helperText && (
-        <Typography
-          variant="sm"
-          customWeight="regular"
-          className="mt-1.5 text-gray-500"
-        >
+        <label className="text-sm font-normal mt-1.5 text-gray-500">
           {helperText}
-        </Typography>
+        </label>
       )}
     </div>
   );

package/src/index.js

@@ -12,4 +12,4 @@ export * from "./Nav/MobileNav";
 
 export * from "./@interfaces";
 export * from "./data";
-export * from "./data/images";
+export * from "./data/images"; // Adjust the path as necessary

package/src/stories/Badge.stories.tsx

@@ -5,18 +5,16 @@ import {images} from '../data/images'
 import {Meta, StoryObj} from '@storybook/react';
 import { StoryLayout } from '../StoryLayout';
 import { FiArrowRight, FiStar } from 'react-icons/fi';
+import { IconWrapper } from '../utils/IconWrapper';
 
-const meta:Meta<typeof Badge> = {
+export default {
     title: 'Example/Badge',
     component: Badge,
     parameters: {
         layout: 'centered',
     },
     tags: ['autodocs'],
-}
-
-export default meta;
-
+} as Meta;
 interface Props extends BadgeProps {
     darkMode: boolean;
 }
@@ -35,7 +33,7 @@ export const LeadingIconBadge:StoryObj<Props>  = {
         darkMode: false,
         variant: "success",
         size: "md",
-        LeadingIcon:< FiStar/>
+        LeadingIcon: <IconWrapper Icon={FiStar} data-testid="leadingIcon"/>
     },
     render: (args) => {
         return (
@@ -53,7 +51,7 @@ export const ImageIconBadge:StoryObj<Props>  = {
         darkMode: false,
         variant: "gray",
         size: "md",
-        LeadingIcon: <img src={images.NL} alt="nl" className="w-4 h-4" />
+        LeadingIcon: <img src={images.NL} alt="nl" className="w-4 h-4" data-testid="iconOnly" />
     },
     render: (args) => {
         return (
@@ -71,7 +69,7 @@ export const TrailingIconBadge:StoryObj<Props>  = {
         darkMode: false,
         variant: "primary",
         size: "md",
-        TrailingIcon: < FiArrowRight/>
+        TrailingIcon: <IconWrapper Icon={FiArrowRight} data-testid="trailingIcon"/>
     },
     render: (args) => {
         return (

package/src/stories/Button.stories.tsx

@@ -4,18 +4,16 @@ import { Button } from "../Button";
 import { ButtonProps } from "../@interfaces";
 import { FiArrowLeft, FiArrowRight, FiStar } from "react-icons/fi";
 import { StoryLayout } from "../StoryLayout";
+import { IconWrapper } from "../utils/IconWrapper";
 
-const meta: Meta<typeof Button> = {
+export default{
   title: "Example/Button",
   component: Button,
   parameters: {
     layout: "centered",
   },
   tags: ["autodocs"],
-};
-
-export default meta;
-
+} as Meta;
 interface Props extends ButtonProps {
   darkMode: boolean;
 }
@@ -84,21 +82,36 @@ export const TrailingIconButton: Story = {
   args: {
     darkMode: false,
     children: "Button",
-    TrailingIcon: <FiArrowRight />,
+    TrailingIcon: <IconWrapper Icon={FiArrowRight} data-testid="trailingIcon"/>,
   },  
+  render: (args) => (
+    <StoryLayout {...args}>
+      <Button {...args} />
+    </StoryLayout>
+  ),
 };
 
 export const LeadingIconButton: Story = {
   args: {
     darkMode: false,
     children: "Button",
-    LeadingIcon: <FiArrowLeft />,
+    LeadingIcon: <IconWrapper Icon={FiArrowLeft} data-testid="LeadingIcon"/>,
   },
+  render: (args) => (
+    <StoryLayout {...args}>
+      <Button {...args} />
+    </StoryLayout>
+  ),
 };
 
 export const IconOnlyButton: Story = {
   args: {
     darkMode: false,
-    IconOnly: <FiStar />,
+    IconOnly: <IconWrapper Icon={FiStar} data-testid="iconOnly"/>,
   },
+  render: (args) => (
+    <StoryLayout {...args}>
+      <Button {...args} />
+    </StoryLayout>
+  ),
 };

package/src/stories/ButtonGroup.stories.tsx

@@ -4,80 +4,80 @@ import { ButtonGroupProps, ButtonGroup } from "../ButtonGroup";
 import { StoryLayout } from "../StoryLayout";
 import { options1, options2, options3 } from "../data/options";
 
-const meta: Meta<typeof ButtonGroup> = {
+export default {
   title: "Example/ButtonGroup",
   component: ButtonGroup,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
-};
-
-export default meta;
-
+} as Meta;
 interface Props extends ButtonGroupProps {
   darkMode: boolean;
 }
 
+const LabelButtonGroupComponent = (args: Props) => {
+  const [activeItem1, setActiveItem1] = useState<string>(options1[1].value);
+
+  return (
+    <StoryLayout {...args}>
+      <ButtonGroup
+        {...args}
+        options={options1}
+        activeOption={activeItem1}
+        setActiveOption={setActiveItem1}
+      />
+    </StoryLayout>
+  );
+};
+
 export const LabelButtonGroup: StoryObj<Props> = {
   args: {
     darkMode: false,
   },
-  render: (args) => {
-    const [activeItem1, setActiveItem1] = useState<string>(options1[1].value);
+  render: (args) =>  <LabelButtonGroupComponent {...args} />,
+};
 
-    return (
-      <StoryLayout {...args}>
-        <div>
-          <ButtonGroup
-            options={options1}
-            activeOption={activeItem1}
-            setActiveOption={setActiveItem1}
-          />
-        </div>
-      </StoryLayout>
-    );
-  },
+const IconButtonGroupComponent = (args: Props) => {
+  const [activeView, setViewOption] = useState<string>("list");
+
+  return (
+    <StoryLayout {...args}>
+      <ButtonGroup
+        {...args}
+        options={options3}
+        activeOption={activeView}
+        setActiveOption={setViewOption}
+      />
+    </StoryLayout>
+  );
 };
 
 export const IconButtonGroup: StoryObj<Props> = {
   args: {
     darkMode: false,
   },
-  render: (args) => {
-    const [activeView, setViewOption] = useState<string>("list");
+  render: (args) => <IconButtonGroupComponent {...args} />,
+};
 
-    return (
-      <StoryLayout {...args}>
-        <div>
-          <ButtonGroup
-            options={options3}
-            activeOption={activeView}
-            setActiveOption={setViewOption}
-          />
-        </div>
-      </StoryLayout>
-    );
-  },
+const LabelIconButtonGroupComponent = (args: Props) => {
+  const [activeItem2, setActiveItem2] = useState<string>(options2[1].value);
+
+  return (
+    <StoryLayout {...args}>
+      <ButtonGroup
+        {...args}
+        options={options2}
+        activeOption={activeItem2}
+        setActiveOption={setActiveItem2}
+      />
+    </StoryLayout>
+  );
 };
 
 export const LabelIconButtonGroup: StoryObj<Props> = {
   args: {
     darkMode: false,
   },
-  render: (args) => {
-    const [activeItem2, setActiveItem2] = useState<string>(options2[1].value);
-
-    return (
-      <StoryLayout {...args}>
-        <div>
-          <ButtonGroup
-            options={options2}
-            activeOption={activeItem2}
-            setActiveOption={setActiveItem2}
-          />
-        </div>
-      </StoryLayout>
-    );
-  },
+  render: (args) => <LabelIconButtonGroupComponent {...args} />,
 };

package/src/stories/Colors.stories.tsx

@@ -4,14 +4,12 @@ import { ColorBox } from "../ColorBox";
 import { colors } from "../data/colors";
 import { StoryLayout } from "../StoryLayout";
 
-const meta: Meta<Props> = {
+export default {
   title: "Colors",
   parameters: {
     controls: { expanded: true },
   },
-};
-
-export default meta;
+} as Meta;
 
 interface Props {
   darkMode: boolean;