@axinom/mosaic-ui 0.42.0 → 0.43.0-rc.1

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { faker } from '@faker-js/faker';
+import { useArgs } from '@storybook/preview-api';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useMemo } from 'react';
+import { TabsProps } from 'react-tabs';
+import { Tab, TabList, TabPanel, Tabs } from '.';
+import { createGroups } from '../../helpers/storybook';
+
+const groups = createGroups({
+  Storybook: ['amount'],
+});
+
+type TabsStoryComponentProps = React.FC<
+  typeof Tabs & {
+    amount: number;
+    selectedIndex?: number;
+  }
+>;
+
+const meta: Meta<TabsStoryComponentProps> = {
+  title: 'Other Components/Tabs',
+  component: Tabs,
+  argTypes: {
+    ...groups,
+    amount: {
+      ...groups.amount,
+      description: '<b>[Storybook only]</b> The amount of tabs to render.',
+      type: 'number',
+      control: { type: 'number', min: 0, max: 30 },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    amount: 3,
+  },
+};
+
+const generateItems = (count: number): [JSX.Element[], JSX.Element[]] => {
+  const tabs = [];
+  const panels = [];
+
+  for (let i = 0; i < count; i++) {
+    const title = faker.random.words(faker.datatype.number({ min: 1, max: 3 }));
+    tabs.push(<Tab key={i}>{title}</Tab>);
+    panels.push(
+      <TabPanel key={i}>
+        <h2>{title}</h2>
+        <p>{faker.lorem.paragraph(20)}</p>
+      </TabPanel>,
+    );
+  }
+
+  return [tabs, panels];
+};
+
+export default meta;
+
+export const Default: StoryObj<TabsStoryComponentProps> = {
+  render: (props) => {
+    const [tabs, panels] = generateItems(props.amount);
+
+    return (
+      <Tabs>
+        <TabList>{tabs}</TabList>
+        {panels}
+      </Tabs>
+    );
+  },
+};
+
+export const Controlled: StoryObj<TabsStoryComponentProps> = {
+  argTypes: {
+    ...meta.argTypes,
+    selectedIndex: {
+      ...groups.amount,
+      description: '<b>[Storybook only]</b> Index of the selected Tab.',
+      type: 'number',
+      control: { type: 'number', min: 0, max: 30 },
+    },
+  },
+  args: {
+    ...meta.args,
+    selectedIndex: 0,
+  },
+  render: (props) => {
+    const [tabs, panels] = useMemo(
+      () => generateItems(props.amount),
+      [props.amount],
+    );
+    const [{ selectedIndex }, updateArgs] = useArgs();
+
+    const onSelect: TabsProps['onSelect'] = (index) => {
+      updateArgs({ selectedIndex: index });
+    };
+
+    return (
+      <Tabs selectedIndex={selectedIndex} onSelect={onSelect}>
+        <TabList>{tabs}</TabList>
+        {panels}
+      </Tabs>
+    );
+  },
+};

package/src/components/Tabs/index.ts

@@ -0,0 +1,4 @@
+export { Tabs } from 'react-tabs';
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';

package/dist/components/FormStation/StationErrorStateType.d.ts

@@ -1,5 +0,0 @@
-import { StationError } from '../models';
-export interface StationErrorStateType extends StationError {
-    type?: string;
-}
-//# sourceMappingURL=StationErrorStateType.d.ts.map

package/dist/components/FormStation/StationErrorStateType.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StationErrorStateType.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/StationErrorStateType.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/components/FormStation/useValidationError.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useValidationError.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/useValidationError.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAehE;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,qBAAqB,GAAG,SAAS,EAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAC7B,KAAK,CAAC,cAAc,CAAC,qBAAqB,GAAG,SAAS,CAAC,CACxD,GACA;IACD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC,CAyBA"}

package/src/components/FormStation/StationErrorStateType.tsx

@@ -1,5 +0,0 @@
-import { StationError } from '../models';
-
-export interface StationErrorStateType extends StationError {
-  type?: string;
-}