@feminab/box-ui 0.1.0 → 0.1.2

package/src/styles/global.css

@@ -184,184 +184,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
-
-
-.App {
-    text-align: center;
-  }
-  
-  .App-logo {
-    height: 40vmin;
-    pointer-events: none;
-  }
-  
-  @media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-      animation: App-logo-spin infinite 20s linear;
-    }
-  }
-  
-  .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-  }
-  
-  .App-link {
-    color: #61dafb;
-  }
-  
-  @keyframes App-logo-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  
-
-
-.storybook-button {
-    display: inline-block;
-    cursor: pointer;
-    border: 0;
-    border-radius: 3em;
-    font-weight: 700;
-    line-height: 1;
-    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
-  .storybook-button--primary {
-    background-color: #555ab9;
-    color: white;
-  }
-  .storybook-button--secondary {
-    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-    background-color: transparent;
-    color: #333;
-  }
-  .storybook-button--small {
-    padding: 10px 16px;
-    font-size: 12px;
-  }
-  .storybook-button--medium {
-    padding: 11px 20px;
-    font-size: 14px;
-  }
-  .storybook-button--large {
-    padding: 12px 24px;
-    font-size: 16px;
-  }
-  
-
-  .storybook-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 15px 20px;
-    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
-  
-  .storybook-header svg {
-    display: inline-block;
-    vertical-align: top;
-  }
-  
-  .storybook-header h1 {
-    display: inline-block;
-    vertical-align: top;
-    margin: 6px 0 6px 10px;
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 1;
-  }
-  
-  .storybook-header button + button {
-    margin-left: 10px;
-  }
-  
-  .storybook-header .welcome {
-    margin-right: 10px;
-    color: #333;
-    font-size: 14px;
-  }
-  
-
-  .storybook-page {
-    margin: 0 auto;
-    padding: 48px 20px;
-    max-width: 600px;
-    color: #333;
-    font-size: 14px;
-    line-height: 24px;
-    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
-  
-  .storybook-page h2 {
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 0 4px;
-    font-weight: 700;
-    font-size: 32px;
-    line-height: 1;
-  }
-  
-  .storybook-page p {
-    margin: 1em 0;
-  }
-  
-  .storybook-page a {
-    color: inherit;
-  }
-  
-  .storybook-page ul {
-    margin: 1em 0;
-    padding-left: 30px;
-  }
-  
-  .storybook-page li {
-    margin-bottom: 8px;
-  }
-  
-  .storybook-page .tip {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 10px;
-    border-radius: 1em;
-    background: #e7fdd8;
-    padding: 4px 12px;
-    color: #357a14;
-    font-weight: 700;
-    font-size: 11px;
-    line-height: 12px;
-  }
-  
-  .storybook-page .tip-wrapper {
-    margin-top: 40px;
-    margin-bottom: 40px;
-    font-size: 13px;
-    line-height: 20px;
-  }
-  
-  .storybook-page .tip-wrapper svg {
-    display: inline-block;
-    vertical-align: top;
-    margin-top: 3px;
-    margin-right: 4px;
-    width: 12px;
-    height: 12px;
-  }
-  
-  .storybook-page .tip-wrapper svg path {
-    fill: #1ea7fd;
-  }
-  
-
- 
+}

package/src/tests/Badge.test.tsx

@@ -0,0 +1,48 @@
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as stories from '../stories/Badge.stories';
+
+const {
+    Default, LeadingIconBadge, ImageIconBadge, TrailingIconBadge
+  } = composeStories(stories);
+
+
+describe('📘 Badge Storybook Stories', () => {
+  test('renders Default badge', () => {
+    const Story = Default;
+    const { container } = render(
+        Story(Story.args ?? {})
+      );
+    expect(screen.getByText('Label')).toBeInTheDocument();
+    expect(container).toMatchSnapshot(); // Optional: snapshot for structure
+  });
+
+  test('renders Badge with leading icon', () => {
+    const Story = LeadingIconBadge;
+    render(
+        Story(Story.args ?? {})
+      );
+    expect(screen.getByText('Label')).toBeInTheDocument();
+    expect(screen.getByTestId('leadingIcon')).toBeInTheDocument(); // Checks for <FiStar /> icon
+  });
+
+  test('renders Badge with image icon', () => {
+    const Story = ImageIconBadge;
+    render(
+        Story(Story.args ?? {})
+      );
+    expect(screen.getByText('Newzeland')).toBeInTheDocument();
+    expect(screen.getByTestId('iconOnly')).toBeInTheDocument(); // Checks for image icon
+  });
+
+  test('renders Badge with trailing icon', () => {
+    const Story = TrailingIconBadge;
+    render(
+        Story(Story.args ?? {})
+      );
+    expect(screen.getByText('Label')).toBeInTheDocument();
+    expect(screen.getByTestId('trailingIcon')).toBeInTheDocument(); // Checks for <FiArrowRight /> icon
+  });
+});

package/src/tests/Button.test.tsx

@@ -0,0 +1,69 @@
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as stories from '../stories/Button.stories';
+
+const {
+    Default, Variants, Sizes, LeadingIconButton, TrailingIconButton, IconOnlyButton
+  } = composeStories(stories);
+
+describe('📘 Button Storybook Stories', () => {
+    test('renders Default button', () => {
+      const Story = Default;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+      expect(screen.getByText('Primary')).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  
+    test('renders all button variants', () => {
+      const Story = Variants;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+      ['Primary', 'Secondary', 'Secondary Gray', 'Tertiary', 'Tertiary Gray'].forEach(label => {
+        expect(screen.getByText(label)).toBeInTheDocument();
+      });
+      expect(container).toMatchSnapshot();
+    });
+  
+    test('renders all button sizes', () => {
+      const Story = Sizes;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+      ['sm', 'md', 'lg', 'xl', '2xl'].forEach(label => {
+        expect(screen.getByText(label)).toBeInTheDocument();
+      });
+      expect(container).toMatchSnapshot();
+    });
+  
+    test('renders button with trailing icon', () => {
+      const Story = TrailingIconButton;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+      expect(screen.getByText('Button')).toBeInTheDocument();
+      expect(container.querySelector('svg')).toBeInTheDocument(); // FiArrowRight
+    });
+  
+    test('renders button with leading icon', () => {
+      const Story = LeadingIconButton;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+      expect(screen.getByText('Button')).toBeInTheDocument();
+      expect(container.querySelector('svg')).toBeInTheDocument(); // FiArrowLeft
+    });
+  
+    test('renders icon-only button', () => {
+      const Story = IconOnlyButton;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+      expect(container.querySelector('svg')).toBeInTheDocument(); // FiStar
+    });
+  });

package/src/tests/ButtonGroup.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as stories from '../stories/ButtonGroup.stories';
+import { options1, options2 } from "../data/options";
+
+const {
+  LabelButtonGroup,
+  IconButtonGroup,
+  LabelIconButtonGroup
+} = composeStories(stories);
+
+describe('📘 ButtonGroup Storybook Stories', () => {
+
+  test('renders LabelButtonGroup', () => {
+    const Story = LabelButtonGroup;
+    const { container } = render(Story(Story.args ?? {}));
+
+    const labelTexts = ['Leading', 'Middle', 'Trailing'];
+
+    labelTexts.forEach((val) => {
+      expect(screen.getByText(val)).toBeInTheDocument();
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders IconButtonGroup with icons', () => {
+    const Story = IconButtonGroup;
+    const { container } = render(Story(Story.args ?? {}));
+
+    expect(container.querySelector('svg')).toBeInTheDocument();  // Check for an icon (List or Grid)
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders LabelIconButtonGroup', () => {
+    const Story = LabelIconButtonGroup;
+    const { container } = render(Story(Story.args ?? {}));
+
+    const labelTexts = ['First', 'Second', 'Third'];
+
+    labelTexts.forEach((text) => {
+      expect(screen.getByText(text)).toBeInTheDocument();
+    });
+    expect(container.querySelector('svg')).toBeInTheDocument(); // Check for icons
+
+    expect(container).toMatchSnapshot();
+  });
+
+});

package/src/tests/MobileNav.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { composeStories } from '@storybook/react';
+import * as stories from "../stories/MobileNav.stories";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+
+const { Default } = composeStories(stories);
+
+describe("MobileNavbar and SideNav interaction", () => {
+  
+  test("should render the mobile nav toggle button", () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+    const toggleBtn = screen.getByTestId("mobile-nav-toggle");
+    expect(toggleBtn).toBeInTheDocument();
+  });
+
+  test("should open SideNav on toggle button click", async () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+    fireEvent.click(screen.getByTestId("mobile-nav-toggle"));
+
+    const sideNav = await screen.findByTestId("side-nav");
+    expect(sideNav).toBeInTheDocument();
+  });
+
+  test("should close SideNav on close icon click", async () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+
+    fireEvent.click(screen.getByTestId("mobile-nav-toggle"));
+    const sideNav = await screen.findByTestId("side-nav");
+    expect(sideNav).toBeInTheDocument();
+
+    const closeIcon = await screen.findByTestId("close-icon");
+    fireEvent.click(closeIcon);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("side-nav")).not.toBeInTheDocument();
+    });
+  });
+
+  test("should close SideNav on backdrop click", async () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+
+    fireEvent.click(screen.getByTestId("mobile-nav-toggle"));
+    expect(await screen.findByTestId("side-nav")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("backdrop"));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("side-nav")).not.toBeInTheDocument();
+    });
+  });
+
+  test("should show username and email when SideNav is open", async () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+
+    fireEvent.click(screen.getByTestId("mobile-nav-toggle"));
+
+    expect(await screen.findByText("Veronica Woods")).toBeInTheDocument();
+    expect(await screen.findByText("veronica@example.com")).toBeInTheDocument();
+  });
+});

package/src/tests/Paginate.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as stories from '../stories/Paginate.stories';
+
+const {
+  DesktopPagination,
+  MobilePagination
+} = composeStories(stories);
+
+describe('📘 Pagination Storybook Stories', () => {
+  test('renders DesktopPagination component', () => {
+    const Story = DesktopPagination;
+    const { container } = render(
+      Story(Story.args ?? {})
+    );
+    
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('Previous')).toBeInTheDocument();
+    expect(screen.getByText('Next')).toBeInTheDocument();
+    
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders MobilePagination component', () => {
+    const Story = MobilePagination;
+    const { container } = render(
+      Story(Story.args ?? {})
+    );
+    
+    expect(container.querySelector('svg')).toBeInTheDocument(); // FiArrowRight
+
+    expect(screen.getByTestId('prevBtn')).toBeInTheDocument();
+    expect(screen.getByTestId('nextBtn')).toBeInTheDocument();    
+    expect(screen.getByText('Page 0 of 10')).toBeInTheDocument();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders DesktopPagination with total pages', () => {
+    const Story = DesktopPagination;
+    const { container } = render(
+        Story({ totalPages: 5 })
+    );
+    
+    for (let i = 1; i <= 5; i++) {
+      expect(screen.getByText(i.toString())).toBeInTheDocument();
+    }
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders MobilePagination with page information', () => {
+    const Story = MobilePagination;
+    const { container } = render(
+      Story({ totalPages: 5 })
+    );
+    
+    expect(screen.getByText('Page 0 of 5')).toBeInTheDocument();
+    
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders DesktopPagination in dark mode', () => {
+    const Story = DesktopPagination;
+    const { container } = render(
+      Story({ darkMode: true, totalPages: 5 })
+    );
+
+    expect(container.firstChild).toHaveClass('dark'); // Assuming you have dark mode styling applied with a class 'dark'
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders MobilePagination in dark mode', () => {
+    const Story = MobilePagination;
+    const { container } = render(
+      Story({ darkMode: true, totalPages: 5 })
+    );
+
+    expect(container.firstChild).toHaveClass('dark');
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/tests/Select.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as stories from '../stories/Select.stories';
+import { prices, countries } from '../data';
+
+const { Default, SelectWithIcon } = composeStories(stories);
+
+describe('🧪 Select Story Tests (Direct function call style)', () => {
+  
+  test('Default story renders with a default country and placeholder', () => {
+    const Story = Default;
+    const { container } = render(Story(Story.args ?? {}));
+
+    // Check if the default country is visible
+    expect(screen.getByText('Ahmedabad, IN')).toBeInTheDocument();
+    // Snapshot test
+    expect(container).toMatchSnapshot();
+  });
+
+  // Test case 2: SelectWithIcon story renders with a leading dollar sign icon and price
+  test('SelectWithIcon story renders with a leading dollar sign icon and price', () => {
+    const Story = SelectWithIcon;
+    const { container } = render(Story(Story.args ?? {}));
+
+    // Check if the icon is visible (using a test ID or a class, depending on how the icon is rendered)
+    expect(screen.getByTestId('leading-icon')).toBeInTheDocument(); // If you've added a data-testid to the icon
+    // Check if the default price is visible
+    expect(screen.getByText('Any price')).toBeInTheDocument();
+    // Snapshot test
+    expect(container).toMatchSnapshot();
+  });
+
+  // Test case 3: Typing works in Default Select (Country selection)
+  test('typing works in Default Select (Country selection)', async () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+  
+    const selectButton = screen.getByRole('button', { name: /Ahmedabad, IN/i });
+    expect(selectButton).toBeInTheDocument();
+    fireEvent.click(selectButton);
+  
+    const option = await screen.findByText('Amsterdam, NL');
+  
+    expect(option).toHaveTextContent('Amsterdam, NL');
+  });  
+
+  test('typing works in SelectWithIcon (Price selection)', async() => {
+    const Story = SelectWithIcon;
+    render(Story(Story.args ?? {}));
+
+    const priceSelect = screen.getByRole('button', { name: /any price/i });
+    expect(priceSelect).toBeInTheDocument();
+    fireEvent.click(priceSelect);
+
+    const option = await screen.findByText('100 - 200');
+    fireEvent.click(option);
+    
+    expect(priceSelect).toHaveTextContent('100 - 200');
+  });
+});
+ 

package/src/tests/SideNav.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { composeStories } from '@storybook/react';
+import * as stories from "../stories/SideNav.stories";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+
+const { Default } = composeStories(stories);
+
+describe("SideNav Component", () => {
+  test("should render SideNav when open is true", () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+
+    const sideNav = screen.getByTestId("side-nav");
+    expect(sideNav).toBeInTheDocument();
+  });
+
+  test("should display username and email in SideNav", () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+
+    expect(screen.getByText("Veronica Woods")).toBeInTheDocument();
+    expect(screen.getByText("veronica@example.com")).toBeInTheDocument();
+  });
+
+  test("should render top and bottom nav items", () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+  });
+
+  test("should respond correctly when a nav item is clicked", () => {
+    const Story = Default;
+    render(Story(Story.args ?? {}));
+  
+    const navItem = screen.getByText("Home");
+    fireEvent.click(navItem);
+  
+    expect(navItem).toBeInTheDocument();
+  });
+});

package/src/tests/TextInput.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as stories from '../stories/TextInput.stories';
+
+const {Default, LeadingTextInput} = composeStories(stories);
+
+describe('🧪 TextInput Story Tests (Direct function call style)', () => {
+    test('Default story renders with email input and error', () => {
+      const Story = Default;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+  
+      expect(screen.getAllByLabelText(/Email/i)[0]).toBeInTheDocument();
+      expect(screen.getByText(/This is an error message/i)).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  
+    test('LeadingTextInput story renders with https prefix and error', () => {
+      const Story = LeadingTextInput;
+      const { container } = render(
+        Story(Story.args ?? {})
+      );
+  
+      expect(screen.getAllByLabelText(/Website/i)[0]).toBeInTheDocument();
+      expect(screen.getAllByText('https://')[0]).toBeInTheDocument();
+      expect(screen.getByText(/This is an error message/i)).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  
+    test('typing works in Default TextInput', () => {
+      const Story = Default;
+      render(Story(Story.args ?? {}));
+  
+      const input = screen.getAllByLabelText(/Email/i)[0] as HTMLInputElement;
+  
+      fireEvent.change(input, { target: { value: 'femina@example.com' } });
+      expect(input.value).toBe('femina@example.com');
+    });
+  });

package/src/tests/Typography.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as stories from '../stories/Typography.stories';
+
+const {
+  TypographyDynamic,
+  TypographyHeadings,
+  TypographyText,
+} = composeStories(stories);
+
+describe('📝 Typography Stories', () => {
+  test('should render heading variant text', () => {
+    const Story = TypographyDynamic;
+    const { container } = render(
+      // Manually call the story function (with args and dummy context)
+      Story(Story.args ?? {})
+    );
+    expect(screen.getByText(/Display h1/i)).toBeInTheDocument();
+    expect(screen.getByText(/regular/i)).toBeInTheDocument();
+  });
+
+  test('TypographyHeadings renders all heading variants', () => {
+    const Story = TypographyHeadings;
+    render(Story(Story.args ?? {}));
+
+    ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach((heading) => {
+      expect(screen.getByText(`Display ${heading}`)).toBeInTheDocument();
+    });
+  });
+
+  test('TypographyText renders all text variants', () => {
+    const Story = TypographyText;
+    render(Story(Story.args ?? {}));
+
+    ['xl', 'lg', 'md', 'sm', 'xs'].forEach((variant) => {
+      expect(screen.getByText(`Text ${variant}`)).toBeInTheDocument();
+    });
+  });
+});