@feminab/box-ui 0.1.0 → 0.1.3

package/src/stories/MobileNav.stories.tsx

@@ -1,30 +1,27 @@
-
 import React, { useState } from "react";
 import { Meta, StoryObj } from "@storybook/react";
-import { MobileNavProps} from "../@interfaces";
+import { MobileNavProps } from "../@interfaces";
 import { SideNav } from "../Nav/SideNav";
 import { StoryLayout } from "../StoryLayout";
 import { navItemsTop, navItemsBottom } from "../data/navItems";
 import { MobileNavbar } from "../Nav/MobileNav";
-import { FiX } from "react-icons/fi";
+import { FiX } from "react-icons/fi"; // Directly import FiX
+import type { IconBaseProps } from "react-icons";
 
-const meta: Meta<typeof SideNav> = {
+const CloseIcon = FiX as React.FC<IconBaseProps>;
+// Wrapper to fix TS JSX issues
+ 
+export default {
   title: "Example/MobileNav",
   component: MobileNavbar,
-};
-
-export default meta;
+} as Meta;
 
 interface Props extends MobileNavProps {
   darkMode: boolean;
 }
 
-export const Default: StoryObj<Props> = {
-  args: {
-    darkMode: false,
-  },
-  render: (args) => {
-    const [open, setOpen] = useState<boolean>(false);
+const MobileNavWithState = (args: Props) => {
+  const [open, setOpen] = useState<boolean>(false);
 
   const handleToggle = () => {
     setOpen(!open);
@@ -34,16 +31,23 @@ export const Default: StoryObj<Props> = {
     <StoryLayout {...args}>
       <MobileNavbar open={open} toggleOpen={handleToggle} />
 
-      {open ? (
+      {open && (
         <div
+          data-testid="backdrop"
           className="fixed top-0 left-0 z-40 w-screen h-screen bg-gray-500 cursor-pointer bg-opacity-80"
           onClick={() => setOpen(false)}
         >
-          <FiX size={40} className="fixed text-white top-5 right-9" />
+           <CloseIcon
+            data-testid="close-icon"
+            size={40}
+            className="fixed text-white top-5 right-9"
+            role="button"
+            aria-label="Close sidebar"
+          />
         </div>
-      ) : null}
+      )}
 
-      {open ? (
+      {open && (
         <SideNav
           className="relative z-50 h-screen -mt-20"
           navItemsTop={navItemsTop}
@@ -53,8 +57,14 @@ export const Default: StoryObj<Props> = {
           username="Veronica Woods"
           email="veronica@example.com"
         />
-      ) : null}
+      )}
     </StoryLayout>
-    );
+  );
+};
+
+export const Default: StoryObj<Props> = {
+  args: {
+    darkMode: false,
   },
+  render: (args) => <MobileNavWithState {...args} />,
 };

package/src/stories/Paginate.stories.tsx

@@ -4,41 +4,56 @@ import { Meta, StoryObj } from "@storybook/react";
 import { PaginationProps } from "../@interfaces";
 import {Paginate} from "../Paginate";
 
-const meta: Meta<typeof Paginate> = {
+export default {
   title: "Example/Pagination",
   component: Paginate,
   parameters: {
     layout: "centered",
   },
   tags: ["autodocs"],
-};
-
-export default meta;
-
+} as Meta;
 interface Props extends PaginationProps {
   darkMode: boolean;
 }
 
+const DesktopPaginationComponent = (args: Props) => {
+  const [currentPage, setCurrentPage] = useState<number>(0);
+
+  return (
+    <StoryLayout {...args}>
+      <Paginate
+        className=""
+        isMobile={false}
+        totalPages={args.totalPages}
+        page={currentPage}
+        setPage={setCurrentPage}
+      />
+    </StoryLayout>
+  );
+};
+
 export const DesktopPagination: StoryObj<Props> = {
   args: {
     darkMode: false,
     totalPages: 10,
   },
-  render: (args) => {
-    const [currentPage, setCurrentPage] = useState<number>(0);
+  render: (args) => <DesktopPaginationComponent {...args} />,
+};
 
-    return (
-      <StoryLayout {...args}>
-        <Paginate
-          className=""
-          isMobile={false}
-          totalPages={args.totalPages}
-          page={currentPage}
-          setPage={setCurrentPage}
-        />
-      </StoryLayout>
-    );
-  },
+const MobilePaginationComponent = (args: Props) => {
+  const [currentPage, setCurrentPage] = useState<number>(0);
+
+  return (
+    <StoryLayout {...args}>
+      <Paginate
+        className=""
+        isMobile={true}
+        totalPages={args.totalPages}
+        page={currentPage}
+        setPage={setCurrentPage}
+      />
+    </StoryLayout>
+  );
 };
 
 export const MobilePagination: StoryObj<Props> = {
@@ -46,19 +61,5 @@ export const MobilePagination: StoryObj<Props> = {
     darkMode: false,
     totalPages: 10,
   },
-  render: (args) => {
-    const [currentPage, setCurrentPage] = useState<number>(0);
-
-    return (
-      <StoryLayout {...args}>
-        <Paginate
-          className=""
-          isMobile={true}
-          totalPages={args.totalPages}
-          page={currentPage}
-          setPage={setCurrentPage}
-        />
-      </StoryLayout>
-    );
-  },
-};
+  render: (args) => <MobilePaginationComponent {...args} />,
+};

package/src/stories/Select.stories.tsx

@@ -1,24 +1,21 @@
-
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import { Select } from "../Select";
 import { IOption, SelectProps } from "../@interfaces";
 import { StoryLayout } from "../StoryLayout";
 import { countries } from "../data/countries";
 import { prices } from "../data/prices";
-import {FiDollarSign} from 'react-icons/fi';
+import { FiDollarSign } from 'react-icons/fi';
+import { IconWrapper } from "../utils/IconWrapper";
 
-const meta: Meta<typeof Select> = {
+export default {
     title: "Example/Select",
     component: Select,
     parameters: {
         layout: "centered",
     },
     tags: ["autodocs"],
-}
-
-export default meta;
-
+} as Meta;
 interface Props extends SelectProps {
     darkMode: false;
 }
@@ -28,24 +25,27 @@ export const Default: StoryObj<Props> = {
         darkMode: false
     },
     render: (args) => {
-        const [selectedCountry, setSelectedCountry] = useState<IOption>(countries[0]);
+        const SelectStory = () => {
+            const [selectedCountry, setSelectedCountry] = useState<IOption>(countries[0]);
+
+            const handleSelectedCountry = (country: string) => {
+                const option = countries.find((obj) => obj.value === country) as IOption;
+                setSelectedCountry(option);
+            }
 
-        const handleSelectedCountry = (country:string) => {
-            const option = countries.find((obj) => obj.value === country) as IOption;
-            setSelectedCountry(option);
-        }
-        
-        return(
-            <StoryLayout {...args} className="flex">
-                <Select 
-                options={countries}
-                selectedOption={selectedCountry}
-                setSelectedOption={handleSelectedCountry}
-                placeholder="Select country"
-                width="w-50"
-                />
-            </StoryLayout>
-        )
+            return (
+                <StoryLayout {...args} className="flex">
+                    <Select
+                        options={countries}
+                        selectedOption={selectedCountry}
+                        setSelectedOption={handleSelectedCountry}
+                        placeholder="Select country"
+                        width="w-50"
+                    />
+                </StoryLayout>
+            );
+        };
+        return <SelectStory />;
     }
 }
 
@@ -54,24 +54,27 @@ export const SelectWithIcon: StoryObj<Props> = {
         darkMode: false
     },
     render: (args) => {
-        const [selectedPrice, setSelectedPrice] = useState<IOption>(prices[0]);
+        const SelectWithIconStory = () => {
+            const [selectedPrice, setSelectedPrice] = useState<IOption>(prices[0]);
+
+            const handleSelectedPrice = (price: string) => {
+                const option = prices.find((obj) => obj.value === price) as IOption;
+                setSelectedPrice(option);
+            }
 
-        const handleSelectedPrice = (price:string) => {
-            const option = prices.find((obj) => obj.value === price) as IOption;
-            setSelectedPrice(option);
-        }
-        
-        return(
-            <StoryLayout {...args} className="flex">
-                <Select 
-                options={prices}
-                selectedOption={selectedPrice}
-                setSelectedOption={handleSelectedPrice}
-                placeholder="Select a price"
-                LeadingIcon={<FiDollarSign />}
-                width="w-50"
-                />
-            </StoryLayout>
-        )
+            return (
+                <StoryLayout {...args} className="flex">
+                    <Select
+                        options={prices}
+                        selectedOption={selectedPrice}
+                        setSelectedOption={handleSelectedPrice}
+                        placeholder="Select a price"
+                        LeadingIcon={<IconWrapper Icon={FiDollarSign} />}
+                        width="w-50"
+                    />
+                </StoryLayout>
+            );
+        };
+        return <SelectWithIconStory />;
     }
 }

package/src/stories/SideNav.stories.tsx

@@ -5,34 +5,33 @@ import { SideNav } from "../Nav/SideNav";
 import { StoryLayout } from "../StoryLayout";
 import { navItemsTop, navItemsBottom } from "../data/navItems";
 
-const meta: Meta<typeof SideNav> = {
+export default {
   title: "Example/SideNav",
   component: SideNav,
-};
-
-export default meta;
+} as Meta;
 
 interface Props extends SideNavProps {
   darkMode: boolean;
 }
 
+const SideNavWithState = (args: Props) => {
+  const [open, setOpen] = useState<boolean>(true);
+  return (
+    <StoryLayout {...args} className="flex flex-col h-screen">
+      <SideNav 
+      {...args}
+      navItemsTop={navItemsTop}
+      navItemsBottom={navItemsBottom} 
+      open={open}
+      setOpen={setOpen} 
+      username="Veronica Woods"
+      email="veronica@example.com"/>
+    </StoryLayout>
+  );
+}
 export const Default: StoryObj<Props> = {
   args: {
     darkMode: false,
   },
-  render: (args) => {
-    const [open, setOpen] = useState<boolean>(true);
-    return (
-      <StoryLayout {...args} className="flex flex-col h-screen">
-        <SideNav 
-        {...args}
-        navItemsTop={navItemsTop}
-        navItemsBottom={navItemsBottom} 
-        open={open} 
-        setOpen={setOpen} 
-        username="Veronica Woods"
-        email="veronica@example.com"/>
-      </StoryLayout>
-    );
-  },
+  render: (args) => <SideNavWithState {...args} />,
 };

package/src/stories/TextInput.stories.tsx

@@ -4,13 +4,12 @@ import { Meta, StoryObj } from "@storybook/react";
 import { TextInput } from "../TextInput";
 import { StoryLayout } from "../StoryLayout";
 import { FiMail, FiHelpCircle, FiAlertCircle } from "react-icons/fi";
+import { IconWrapper } from "../utils/IconWrapper";
 
-const meta: Meta<typeof TextInput> = {
+export default {
   title: "Example/TextInput",
   component: TextInput,
-};
-
-export default meta;
+} as Meta;
 
 interface Props extends TextInputProps {
   darkMode: boolean;
@@ -19,82 +18,93 @@ interface Props extends TextInputProps {
 export const Default: StoryObj<Props> = {
   args: {
     darkMode: false,
+    value: ''
   },
-  render: (args) => {
-    const [text1, setText1] = useState<string>(args.value);
+  render: (args) => <DefaultTextInputStory {...args} />,
+};
 
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      setText1(e.target.value);
-    };
+const DefaultTextInputStory = (args: Props) => {
+  const [text1, setText1] = useState<string>(args.value || "");
 
-    return (
-      <StoryLayout {...args}>
-        <TextInput
-          type="email"
-          value={text1}
-          handleChange={handleChange}
-          label="Email"
-          placeholder="veronica@example.com"
-          helperText="This is a hint text to help the user."
-          LeadingIcon={<FiMail />}
-          TrailingIcon={<FiHelpCircle />}
-          disabled={args.disabled}
-        />
-        <div className="mb-4" />
-        <TextInput
-          type="email"
-          value={text1}
-          handleChange={handleChange}
-          label="Email"
-          placeholder="veronica@example.com"
-          helperText="This is a hint text to help the user."
-          error="This is an error message."
-          LeadingIcon={<FiMail />}
-          TrailingIcon={<FiHelpCircle />}
-          disabled={args.disabled}
-        />
-      </StoryLayout>
-    );
-  },
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setText1(e.target.value);
+  };
+
+  return (
+    <StoryLayout {...args}>
+      <TextInput
+        {...args}
+        type="email"
+        value={text1}
+        handleChange={handleChange}
+        label="Email"
+        placeholder="veronica@example.com"
+        helperText="This is a hint text to help the user."
+        LeadingIcon={<IconWrapper Icon={FiMail} />}
+        TrailingIcon={<IconWrapper Icon={FiHelpCircle} />}
+        disabled={args.disabled}
+      />
+      <div className="mb-4" />
+      <TextInput
+        {...args}
+        type="email"
+        value={text1}
+        handleChange={handleChange}
+        label="Email"
+        placeholder="veronica@example.com"
+        helperText="This is a hint text to help the user."
+        error="This is an error message."
+        LeadingIcon={<IconWrapper Icon={FiMail} />}
+        TrailingIcon={<IconWrapper Icon={FiHelpCircle} />}
+        disabled={args.disabled}
+      />
+    </StoryLayout>
+  );
 };
 
 export const LeadingTextInput: StoryObj<Props> = {
   args: {
     darkMode: false,
+    value: ''
   },
-  render: (args) => {
-    const [text1, setText1] = useState<string>(args.value);
+  render: (args) => <LeadingTextInputStory {...args} />,
+};
 
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      setText1(e.target.value);
-    };
+const LeadingTextInputStory = (args: Props) => {
+  const [text1, setText1] = useState<string>(args.value || "");
 
-    return (
-      <StoryLayout {...args}>
-        <TextInput
-          type="text"
-          value={text1}
-          handleChange={handleChange}
-          label="Website"
-          placeholder="example.com"
-          leadingText="https://"
-          helperText="This is a hint text to help the user."
-          TrailingIcon={<FiHelpCircle />}
-          disabled={args.disabled}
-        />
-        <div className="mb-4" />
-        <TextInput
-          type="text"
-          value={text1}
-          handleChange={handleChange}
-          label="Website"
-          placeholder="example.com"
-          leadingText="https://"
-          error="This is an error message."
-          TrailingIcon={<FiAlertCircle />}
-          disabled={args.disabled}
-        />
-      </StoryLayout>
-    );
-  },
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setText1(e.target.value);
+  };
+
+  return (
+    <StoryLayout {...args}>
+      <TextInput
+        {...args}
+        type="text"
+        value={text1}
+        handleChange={handleChange}
+        label="Website"
+        placeholder="example.com"
+        leadingText="https://"
+        helperText="This is a hint text to help the user."
+        TrailingIcon={<IconWrapper Icon={FiHelpCircle} />}
+        disabled={args.disabled}
+      />
+      <div className="mb-4" />
+      <TextInput
+        {...args}
+        type="text"
+        value={text1}
+        handleChange={handleChange}
+        label="Website"
+        placeholder="example.com"
+        leadingText="https://"
+        error="This is an error message."
+        TrailingIcon={<IconWrapper Icon={FiAlertCircle} />}
+        disabled={args.disabled}
+      />
+    </StoryLayout>
+  );
 };
+

package/src/stories/Typography.stories.tsx

@@ -3,15 +3,13 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Typography, TypographyProps } from "../Typography";
 import { StoryLayout } from "../StoryLayout";
 
-const meta: Meta<typeof Typography> = {
+export default {
   title: "Example/Typography",
   component: Typography,
   parameters: {
     layout: 'centered',
   },
-};
-
-export default meta;
+} as Meta;
 
 interface Props extends TypographyProps {
   darkMode: boolean;