@udixio/ui-react 0.4.2 → 1.0.0

package/src/stories/assets/youtube.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z" fill="#ED1D24"/>
+<path d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z" fill="white"/>
+</svg>

package/src/stories/communication/ProgressIndicator.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import {
+  ProgressIndicator,
+  ProgressIndicatorInterface,
+  ProgressIndicatorVariant,
+  ReactProps,
+} from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Communication/ProgressIndicator',
+  component: ProgressIndicator,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof ProgressIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Function to create ProgressIndicatorComponent stories
+const createProgressIndicatorStory = (variant: ProgressIndicatorVariant) => {
+  const ProgressIndicatorStory: Story = (
+    args: ReactProps<ProgressIndicatorInterface>,
+  ) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <ProgressIndicator {...args} />
+      </div>
+    </div>
+  );
+  ProgressIndicatorStory.args = {
+    variant: variant,
+    value: 50,
+  };
+  return ProgressIndicatorStory;
+};
+
+export const LinearDeterminate =
+  createProgressIndicatorStory('linear-determinate');
+
+LinearDeterminate.argTypes = {
+  value: { control: { type: 'range', min: 0, max: 100 } },
+};
+
+export const CircularIndeterminate = createProgressIndicatorStory(
+  'circular-indeterminate',
+);
+
+CircularIndeterminate.argTypes = {
+  value: { control: { type: 'range', min: 0, max: 100 } },
+};

package/src/stories/communication/SnackBar.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ReactProps, Snackbar, SnackbarInterface } from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Communication/Snackbar',
+  component: Snackbar,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof Snackbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Function to create Snackbar stories
+const createSnackbarStory = (supportingText: string) => {
+  const SnackbarStory: Story = (args: ReactProps<SnackbarInterface>) => (
+    <Snackbar {...args} />
+  );
+  SnackbarStory.args = {
+    supportingText: supportingText,
+  };
+  return SnackbarStory;
+};
+
+export const SingleLineSnackbar = createSnackbarStory('Single-line snackbar');

package/src/stories/communication/tool-tip.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, ReactProps, ToolTip, ToolTipInterface } from '../../lib';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Communication/ToolTip',
+  component: ToolTip,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof ToolTip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createToolTipStory = (
+  variant: ReactProps<ToolTipInterface>['variant'],
+  auto = false,
+) => {
+  const ToolTipStory: Story = (args: ReactProps<ToolTipInterface>) => (
+    <div className="h-96 relative">
+      <div className="h-96 relative">
+        <div className="absolute top-0 left-0">
+          <ToolTip
+            position="bottom-right"
+            {...args}
+            text="Cliquez pour plus d'infos"
+            title="Info rapide"
+          >
+            <Button variant={'filledTonal'} label={'Bottom-right'}></Button>
+          </ToolTip>
+        </div>
+        <div className="absolute top-0 left-1/2 -translate-x-1/2">
+          <ToolTip
+            position="bottom"
+            {...args}
+            text="Cet élément représente les statistiques globales de votre projet."
+            title="Statistiques"
+          >
+            <Button variant={'filledTonal'} label={'Bottom-center'}></Button>
+          </ToolTip>
+        </div>
+        <div className="absolute top-0 right-0">
+          <ToolTip
+            position="bottom-left"
+            {...args}
+            text="Cliquez ici pour télécharger le fichier associé."
+            title="Téléchargement"
+          >
+            <Button variant={'filledTonal'} label={'Bottom-left'}></Button>
+          </ToolTip>
+        </div>
+        <div className="absolute top-1/2 left-0 -translate-y-1/2">
+          <ToolTip
+            position="right"
+            {...args}
+            text="Cette action ne peut pas être annulée une fois confirmée."
+            title="Attention"
+          >
+            <Button variant={'filledTonal'} label={'Center-right'}></Button>
+          </ToolTip>
+        </div>
+        <div className="absolute top-1/2 right-0 -translate-y-1/2">
+          <ToolTip
+            position="left"
+            {...args}
+            text="Modifiez les paramètres dans l'onglet dédié à la personnalisation."
+            title="Personnalisation"
+          >
+            <Button variant={'filledTonal'} label={'Center-left'}></Button>
+          </ToolTip>
+        </div>
+        <div className="absolute bottom-0 left-0">
+          <ToolTip
+            position="top-right"
+            {...args}
+            text="L'action demandée supprimera toutes les données correspondantes."
+            title="Suppression de données"
+          >
+            <Button variant={'filledTonal'} label={'Top-right'}></Button>
+          </ToolTip>
+        </div>
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
+          <ToolTip
+            position="top"
+            {...args}
+            text="Double-cliquez pour agrandir l'aperçu de l'élément sélectionné."
+            title="Aperçu"
+          >
+            <Button variant={'filledTonal'} label={'Top-center'}></Button>
+          </ToolTip>
+        </div>
+        <div className="absolute bottom-0 right-0">
+          <ToolTip
+            position="top-left"
+            {...args}
+            text="Passez la souris sur d'autres icônes pour plus de détails."
+            title="Icones et navigation"
+          >
+            <Button variant={'filledTonal'} label={'Top-left'}></Button>
+          </ToolTip>
+        </div>
+      </div>
+    </div>
+  );
+  ToolTipStory.args = {
+    variant: variant,
+    title: 'Title',
+    text: 'Supporting line text lorem ipsum dolor sit amet, consectetur',
+    buttons: [
+      {
+        label: 'Label',
+        onClick: () => {},
+      },
+      {
+        label: 'Label',
+        onClick: () => {},
+      },
+    ],
+    ...(auto ? { position: undefined } : {}),
+  };
+  return ToolTipStory;
+};
+export const Plain = createToolTipStory('plain');
+export const PlainAuto = createToolTipStory('plain', true);
+export const Rich = createToolTipStory('rich');
+export const RichAuto = createToolTipStory('rich', true);

package/src/stories/containment/card.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardInterface, ReactProps } from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'containment/Card',
+  component: Card,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createCardStory = (variant: ReactProps<CardInterface>['variant']) => {
+  const CardStory: Story = (args: ReactProps<CardInterface>) => (
+    <>
+      <Card className={'w-[360px] h-[360px]'} {...args}></Card>
+      <a className={'group'} href={'https://example.com/'} target={'_blank'}>
+        <Card
+          isInteractive={true}
+          className={'w-[360px] h-[360px]'}
+          {...args}
+        ></Card>
+      </a>
+    </>
+  );
+  CardStory.args = {
+    variant: variant,
+  };
+  return CardStory;
+};
+export const Outlined = createCardStory('outlined');
+export const Elevated = createCardStory('elevated');
+export const Filled = createCardStory('filled');

package/src/stories/containment/carousel.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Carousel, CarouselInterface, CarouselItem, ReactProps } from '../../';
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'containment/Carousel',
+  component: Carousel,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const src: string[] = [
+  'https://images.unsplash.com/photo-1738694237335-a537515c0b7b?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1738189669835-61808a9d5981?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1737995720044-8d9bd388ff4f?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1737625751736-49f5d69fe450?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1737099049906-fdf13033c12b?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1736182792109-2db1c298a703?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://plus.unsplash.com/premium_photo-1727342635651-6695593ee0d6?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1734249201319-e7227b1b4f54?q=80&w=2427&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1733392898848-72e6a57df7fe?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1512389136781-65f9031df878?q=80&w=2500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+];
+
+const createCarouselStory = (args?: Partial<ReactProps<CarouselInterface>>) => {
+  const carouselStory: Story = (args: ReactProps<CarouselInterface>) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <Carousel
+          className={'md:h-[600px] h-[200px]'}
+          outputRange={[40, 500]}
+          {...args}
+        >
+          {Array.from({ length: 10 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <img
+                className={'object-cover  h-full w-full'}
+                alt={'illustration'}
+                src={src[index]}
+              />
+            </CarouselItem>
+          ))}
+        </Carousel>
+      </div>
+    </div>
+  );
+  carouselStory.args = {
+    onChange: (e) => console.log(e),
+    ...args,
+  };
+  return carouselStory;
+};
+export const hero = createCarouselStory();
+export const centerAlignedHero = createCarouselStory();
+export const multiBrowse = createCarouselStory();
+export const unContained = createCarouselStory();
+export const fullScreen = createCarouselStory();

package/src/stories/containment/divider.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Divider, DividerInterface, ReactProps } from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Data Display/Divider',
+  component: Divider,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createTabStory = (args?: Partial<ReactProps<DividerInterface>>) => {
+  const tabStory: Story = (args: ReactProps<DividerInterface>) => (
+    <div className="h-96 w-96 flex">
+      <Divider {...args} />
+    </div>
+  );
+  tabStory.args = {
+    ...args,
+  };
+  return tabStory;
+};
+
+export const Horizontal = createTabStory();
+export const Vertical = createTabStory({ orientation: 'vertical' });

package/src/stories/effect/smooth-scroll.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SmoothScroll } from '../../';
+import { JSX } from 'react/jsx-runtime';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'effect/SmoothScroll',
+  component: SmoothScroll,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof SmoothScroll>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createSmoothScrollStory = () => {
+  const SmoothScrollStory: () => JSX.Element = () => (
+    <div className={'h-96'}>
+      <SmoothScroll transition={'1s'}>
+        <div className={' h-52 bg-primary'} />
+        <div className={' h-52 bg-secondary'} />
+        <div className={' h-52 bg-tertiary'} />{' '}
+        <div className={' h-52 bg-primary'} />
+        <div className={' h-52 bg-secondary'} />
+        <div className={' h-52 bg-tertiary'} />{' '}
+        <div className={' h-52 bg-primary'} />
+        <div className={' h-52 bg-secondary'} />
+        <div className={' h-52 bg-tertiary'} />{' '}
+        <div className={' h-52 bg-primary'} />
+        <div className={' h-52 bg-secondary'} />
+        <div className={' h-52 bg-tertiary'} />
+      </SmoothScroll>
+    </div>
+  );
+
+  return SmoothScrollStory;
+};
+export const SmoothScrollStory = createSmoothScrollStory();

package/src/stories/navigation/navigation-rail/navigation-rail-item.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  NavigationRailItem,
+  NavigationRailItemInterface,
+  ReactProps,
+} from '../../../';
+import { faCircleUser as fasCircleUser } from '@fortawesome/free-solid-svg-icons';
+import { faCircleUser as farCircleUser } from '@fortawesome/free-regular-svg-icons';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Navigation/Navigation rail item',
+  component: NavigationRailItem,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    type: { table: { disable: true } },
+    icon: { table: { disable: true } },
+  },
+} satisfies Meta<typeof NavigationRailItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createNavigationRailItemStory = (
+  args?: Partial<ReactProps<NavigationRailItemInterface>>,
+) => {
+  const navigationRailItemStory: Story = (
+    args: ReactProps<NavigationRailItemInterface>,
+  ) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <NavigationRailItem {...args} />
+        <NavigationRailItem {...args} selected />
+      </div>
+    </div>
+  );
+  navigationRailItemStory.args = {
+    ...args,
+
+    icon: farCircleUser,
+    iconSelected: fasCircleUser,
+  };
+  return navigationRailItemStory;
+};
+export const VerticalIconAndLabel = createNavigationRailItemStory({
+  variant: 'vertical',
+  label: 'Label',
+});
+export const VerticalIconOnly = createNavigationRailItemStory({
+  variant: 'vertical',
+});
+export const HorizontalIconAndLabel = createNavigationRailItemStory({
+  variant: 'horizontal',
+  label: 'Label',
+});
+export const HorizontalLabelOnly = createNavigationRailItemStory({
+  variant: 'vertical',
+});

package/src/stories/navigation/navigation-rail/navigation-rail.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { faCircleUser as fasCircleUser } from '@fortawesome/free-solid-svg-icons';
+import {
+  Fab,
+  NavigationRail,
+  NavigationRailItem,
+  NavigationRailSection,
+  ReactProps,
+} from '../../../';
+import { NavigationRailInterface } from '../../..//interfaces/navigation-rail.interface';
+import { faCircleUser as farCircleUser } from '@fortawesome/free-regular-svg-icons';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Navigation/Navigation rail',
+  component: NavigationRail,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof NavigationRail>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createStory = (args?: Partial<ReactProps<NavigationRailInterface>>) => {
+  const story: Story = (
+    args?: Partial<ReactProps<NavigationRailInterface>>,
+  ) => (
+    <div className="w-full h-[90vh] flex bg-surface">
+      <NavigationRail alignment={'middle'} {...args}>
+        <Fab icon={farCircleUser} label={'Add Timer'} />
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Explorer'}
+          selected
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Favoris'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Voyages'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Messages'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Profil'}
+        ></NavigationRailItem>
+        <NavigationRailSection label={'Section Header'}></NavigationRailSection>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Explorer'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Favoris'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Voyages'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Messages'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Profil'}
+        ></NavigationRailItem>
+        <NavigationRailSection label={'Section Header'}></NavigationRailSection>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Explorer'}
+        ></NavigationRailItem>
+        <NavigationRailItem
+          icon={farCircleUser}
+          iconSelected={fasCircleUser}
+          label={'Favoris'}
+        ></NavigationRailItem>
+      </NavigationRail>
+      <div className={'flex-1 bg-surface-container'}></div>
+    </div>
+  );
+
+  story.args = {
+    ...(args as any),
+  };
+
+  return story;
+};
+
+export const PrimaryLabelOnly = createStory();
+
+export const PrimaryIconAndLabel = createStory();
+
+export const PrimaryIconOnly = createStory();
+
+export const SecondaryLabelOnly = createStory();
+
+export const SecondaryIconAndLabel = createStory();

package/src/stories/navigation/tabs/tab.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { faHome } from '@fortawesome/free-solid-svg-icons';
+import { Tab, TabProps, TabsVariant } from '../../../';
+import { fn } from '@storybook/test';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Navigation/Tab',
+  component: Tab,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    type: { table: { disable: true } },
+    icon: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Tab>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createTabStory = (variant: TabsVariant, args?: Partial<TabProps>) => {
+  const tabStory: Story = (args: TabProps) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <Tab {...args} />
+        <Tab {...args} selected />
+      </div>
+    </div>
+  );
+  tabStory.args = {
+    label: 'Tab',
+    variant: variant,
+    onClick: fn(),
+    onTabSelected: fn(),
+    ...args,
+  };
+  return tabStory;
+};
+export const PrimaryIconAndLabel = createTabStory('primary', {
+  icon: faHome,
+});
+export const PrimaryIconOnly = createTabStory('primary', {
+  label: undefined,
+  icon: faHome,
+});
+export const PrimaryLabelOnly = createTabStory('primary');
+export const SecondaryLabelOnly = createTabStory('secondary');
+export const SecondaryIconAndLabel = createTabStory('secondary', {
+  icon: faHome,
+});