@udixio/ui-react 0.0.1 → 0.1.0

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,
+});

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

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  faCircleUser,
+  faHeart,
+  faMagnifyingGlass,
+  faMessage,
+  faPlane,
+} from '@fortawesome/free-solid-svg-icons';
+import { ReactProps, Tab, Tabs, TabsInterface, TabsVariant } from '../../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Navigation/Tabs',
+  component: Tabs,
+  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 Tabs>;
+
+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<ReactProps<TabsInterface>>,
+) => {
+  const tabStory: Story = (args: ReactProps<TabsInterface>) => (
+    <div className="w-full flex flex-col gap-8">
+      <Tabs {...args} onTabSelected={(tab: any) => console.log(tab)}>
+        {
+          // @ts-ignore
+          args.children.map((child) => child)
+        }
+      </Tabs>
+      <Tabs scrollable {...args} onTabSelected={(tab: any) => console.log(tab)}>
+        {
+          // @ts-ignore
+          args.children.map((child) => child)
+        }
+        {
+          // @ts-ignore
+          args.children.slice(1).map((child) => child)
+        }
+      </Tabs>
+    </div>
+  );
+
+  tabStory.args = {
+    variant,
+    children: [
+      <Tab label={'Explorer'} selected></Tab>,
+      <Tab label={'Favoris'}></Tab>,
+      <Tab label={'Voyages'}></Tab>,
+      <Tab label={'Messages'}></Tab>,
+      <Tab label={'Profil'}></Tab>,
+    ],
+    ...args,
+  };
+
+  return tabStory;
+};
+
+export const PrimaryLabelOnly = createTabStory('primary');
+
+export const PrimaryIconAndLabel = createTabStory('primary', {
+  children: [
+    <Tab label={'Explorer'} icon={faMagnifyingGlass} selected />,
+    <Tab label={'Favoris'} icon={faHeart} />,
+    <Tab label={'Voyages'} icon={faPlane} />,
+    <Tab label={'Messages'} icon={faMessage} />,
+    <Tab label={'Profil'} icon={faCircleUser} />,
+  ],
+});
+
+export const PrimaryIconOnly = createTabStory('primary', {
+  children: [
+    <Tab icon={faMagnifyingGlass} selected />,
+    <Tab icon={faHeart} />,
+    <Tab icon={faPlane} />,
+    <Tab icon={faMessage} />,
+    <Tab icon={faCircleUser} />,
+  ],
+});
+
+export const SecondaryLabelOnly = createTabStory('secondary');
+
+export const SecondaryIconAndLabel = createTabStory('secondary', {
+  children: [
+    <Tab label={'Explorer'} icon={faMagnifyingGlass} selected />,
+    <Tab label={'Favoris'} icon={faHeart} />,
+    <Tab label={'Voyages'} icon={faPlane} />,
+    <Tab label={'Messages'} icon={faMessage} />,
+    <Tab label={'Profil'} icon={faCircleUser} />,
+  ],
+});

package/src/stories/selection/slider.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactProps, Slider, SliderInterface } from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Selection/Slider',
+  component: Slider,
+  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 Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createSliderStory = (args?: Partial<ReactProps<SliderInterface>>) => {
+  const sliderStory: Story = (args: ReactProps<SliderInterface>) => (
+    <div className="">
+      <div className="flex flex-col m-4 gap-4 items-center">
+        <Slider value={0} min={0} max={100} step={1} {...args} />
+        <Slider value={50} min={0} max={100} step={1} {...args} />
+        <Slider value={100} min={0} max={100} step={1} {...args} />
+      </div>
+    </div>
+  );
+  sliderStory.args = {
+    name: 'test',
+    ...args,
+  };
+  return sliderStory;
+};
+export const continuousSlider = createSliderStory({});
+export const discreteSlider = createSliderStory({
+  marks: [
+    {
+      value: 0,
+      label: '0%',
+    },
+    {
+      value: 10,
+      label: '10%',
+    },
+    {
+      value: 20,
+      label: '20%',
+    },
+    {
+      value: 30,
+      label: '30%',
+    },
+    {
+      value: 40,
+      label: '40%',
+    },
+    {
+      value: 50,
+      label: '50%',
+    },
+    {
+      value: 60,
+      label: '60%',
+    },
+    {
+      value: 70,
+      label: '70%',
+    },
+    {
+      value: 80,
+      label: '80%',
+    },
+    {
+      value: 90,
+      label: '90%',
+    },
+    {
+      value: 100,
+      label: '100%',
+    },
+  ],
+});

package/src/stories/selection/switch.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactProps, Switch, SwitchInterface } from '../../';
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Selection/Switch',
+  component: Switch,
+  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 Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createSwitchStory = (args?: Partial<ReactProps<SwitchInterface>>) => {
+  const switchStory: Story = (args: ReactProps<SwitchInterface>) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <Switch {...args} />
+        <Switch disabled {...args} />
+      </div>
+      <div className="flex m-4 gap-4 items-center">
+        <Switch activeIcon={faCheck} inactiveIcon={faXmark} {...args} />
+        <Switch
+          activeIcon={faCheck}
+          inactiveIcon={faXmark}
+          disabled
+          {...args}
+        />
+      </div>
+    </div>
+  );
+  switchStory.args = {
+    ...args,
+  };
+  return switchStory;
+};
+export const switchSelected = createSwitchStory({ selected: true });
+export const switchUnselected = createSwitchStory({ selected: false });

package/src/stories/text-inputs/text-field.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { v4 as uuidv4 } from 'uuid';
+import {
+  faCircleXmark,
+  faMagnifyingGlass,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  IconButton,
+  ReactProps,
+  TextField,
+  TextFieldInterface,
+  TextFieldVariant,
+} from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Text Inputs/TextField',
+  component: TextField,
+  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 TextField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Function to create TextField stories
+const createTextFieldStory = (
+  variant: TextFieldVariant,
+  args?: Partial<ReactProps<TextFieldInterface>>,
+) => {
+  const TextFieldStory: Story = (args: ReactProps<TextFieldInterface>) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <TextField {...args} name={'example' + uuidv4()} value="Input" />
+        <TextField
+          {...args}
+          name={'example' + uuidv4()}
+          value="Input"
+          errorText="invalid value"
+        />
+        <TextField
+          {...args}
+          name={'example' + uuidv4()}
+          value="Input"
+          disabled
+        />
+      </div>
+      <div className="flex m-4 gap-4 items-center">
+        <TextField {...args} name={'example' + uuidv4()} />
+        <TextField
+          {...args}
+          name={'example' + uuidv4()}
+          errorText="invalid value"
+        />
+        <TextField {...args} name={'example' + uuidv4()} disabled />
+      </div>
+    </div>
+  );
+  TextFieldStory.args = {
+    variant: variant,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    supportingText: 'Supporting text',
+    ...args,
+  };
+  return TextFieldStory;
+};
+
+export const Filled = createTextFieldStory('filled');
+
+export const FilledTrailingIcon = createTextFieldStory('filled', {
+  trailingIcon: (
+    <IconButton
+      onClick={() => console.log('clicked')}
+      arialLabel="Action description"
+      icon={faCircleXmark}
+    />
+  ),
+});
+
+export const FilledLealingIconAndTrailingIcon = createTextFieldStory('filled', {
+  leadingIcon: faMagnifyingGlass,
+  trailingIcon: (
+    <IconButton
+      onClick={() => console.log('clicked')}
+      arialLabel="Action description"
+      icon={faCircleXmark}
+    />
+  ),
+});
+
+export const FilledLealingIcon = createTextFieldStory('filled', {
+  leadingIcon: faMagnifyingGlass,
+});
+
+export const Outlined = createTextFieldStory('outlined');
+
+export const OutlinedTrailingIcon = createTextFieldStory('outlined', {
+  trailingIcon: (
+    <IconButton
+      onClick={() => console.log('clicked')}
+      arialLabel="Action description"
+      icon={faCircleXmark}
+    />
+  ),
+});
+
+export const OutlinedLealingIconAndTrailingIcon = createTextFieldStory(
+  'outlined',
+  {
+    leadingIcon: faMagnifyingGlass,
+    trailingIcon: (
+      <IconButton
+        onClick={() => console.log('clicked')}
+        arialLabel="Action description"
+        icon={faCircleXmark}
+      />
+    ),
+  },
+);
+
+export const OutlinedLealingIcon = createTextFieldStory('outlined', {
+  leadingIcon: faMagnifyingGlass,
+  className: () => ({
+    textField: 'w-full md:w-fit md:flex-1 ',
+    content: 'rounded-full overflow-hidden bg-surface',
+  }),
+});