@qoretechnologies/reqore 0.20.1 → 0.20.2

package/src/stories/Table/Table.stories.tsx

@@ -0,0 +1,151 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqoreTableColumn, IReqoreTableProps } from '../../components/Table';
+import { ReqoreTable } from '../../index';
+import tableData from '../../mock/tableData';
+import { argManager, CustomIntentArg, FlatArg, IntentArg, SizeArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreTableProps>();
+
+export default {
+  title: 'Components/Table',
+  argTypes: {
+    ...createArg('rounded', {
+      type: 'boolean',
+      name: 'Rounded',
+      description: 'If the table should have rounded corners',
+    }),
+    ...createArg('striped', {
+      type: 'boolean',
+      name: 'Striped',
+      description: 'If the table should have striped rows',
+    }),
+    ...createArg('selectable', {
+      type: 'boolean',
+      name: 'Selectable',
+      description: 'If the table should be selectable',
+    }),
+    ...createArg('columns', {
+      name: 'Columns',
+      defaultValue: [
+        {
+          dataId: 'id',
+          header: 'ID',
+          width: 50,
+          align: 'center',
+          sortable: true,
+          tooltip: 'Custom ID tooltip nice',
+          content: 'tag',
+        },
+        {
+          header: 'Name',
+          dataId: 'name',
+          grow: 3,
+          columns: [
+            {
+              icon: 'SlideshowLine',
+              dataId: 'firstName',
+              header: 'First Name',
+              width: 150,
+              grow: 2,
+            },
+            {
+              icon: 'SlideshowLine',
+              dataId: 'lastName',
+              header: 'Last Name',
+              width: 150,
+              grow: 1,
+              sortable: true,
+              onCellClick: ({ lastName }) => alert(`Clicked last name cell ${lastName}`),
+              content: 'title:info',
+            },
+          ],
+        },
+        {
+          dataId: 'address',
+          header: 'Address',
+          width: 300,
+          grow: 2,
+          onClick: () => alert('clicked address'),
+        },
+        {
+          icon: 'User4Line',
+          dataId: 'age',
+          header: 'Really long age header',
+          width: 50,
+          align: 'center',
+          sortable: true,
+          intent: 'danger',
+          content: 'tag:#000000',
+          onCellClick: ({ age }) => alert(`Clicked age cell ${age}`),
+        },
+        {
+          header: 'Data',
+          dataId: 'data',
+          columns: [
+            { dataId: 'occupation', header: 'Ocuppation', width: 200, content: 'text:warning' },
+            { dataId: 'group', header: 'Group', width: 150, intent: 'muted' },
+          ],
+        },
+        {
+          dataId: 'date',
+          header: 'Date',
+          sortable: true,
+          content: 'time-ago',
+        },
+      ] as IReqoreTableColumn[],
+    }),
+    ...createArg('width', {
+      type: 'number',
+      defaultValue: 800,
+      name: 'Width',
+      description: 'The width of the table',
+    }),
+    ...createArg('height', {
+      type: 'number',
+      defaultValue: 600,
+      name: 'Height',
+      description: 'The height of the table',
+    }),
+    ...createArg('data', {
+      type: 'array',
+      defaultValue: tableData.data,
+      name: 'Data',
+      description: 'The data to be displayed in the table',
+      table: {
+        disable: true,
+      },
+    }),
+    ...createArg('selectToggleTooltip', {
+      type: 'string',
+      defaultValue: 'Select This Row',
+      name: 'Select Toggle Tooltip',
+      description: 'The tooltip of the select toggle',
+    }),
+    ...SizeArg,
+    ...FlatArg,
+    ...IntentArg,
+    ...CustomIntentArg('selectedRowIntent'),
+  },
+} as Meta<IReqoreTableProps>;
+
+const Template: Story<IReqoreTableProps> = (args) => {
+  return <ReqoreTable {...args} sort={{ by: 'age', direction: 'desc' }} />;
+};
+
+export const Basic = Template.bind({});
+export const Flat = Template.bind({});
+Flat.args = {
+  flat: true,
+};
+export const Striped = Template.bind({});
+Striped.args = {
+  striped: true,
+};
+export const Rounded = Template.bind({});
+Rounded.args = {
+  rounded: true,
+};
+export const Selectable = Template.bind({});
+Selectable.args = {
+  selectable: true,
+};

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

@@ -0,0 +1,233 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqoreTabsProps } from '../../components/Tabs';
+import { ReqoreTabs, ReqoreTabsContent } from '../../index';
+import { argManager, FlatArg, IntentArg, SizeArg } from '../utils/args';
+
+const tabs = [
+  {
+    label: 'Tab 1',
+    id: 'tab1',
+    icon: 'Home3Line',
+    tooltip: 'Hooooooome!',
+  },
+  {
+    label: 'Tab 2',
+    id: 'tab2',
+    icon: 'Settings6Line',
+    as: 'a',
+    props: {
+      href: 'https://google.com',
+    },
+  },
+  {
+    label: 'Really long tab name with tooltip',
+    id: 3,
+    icon: 'FileSettingsLine',
+    tooltip: 'Click to go to page 3!',
+  },
+  {
+    id: 'tab4',
+    icon: 'LightbulbLine',
+    intent: 'success',
+    onCloseClick: (id) => {
+      alert(`${id} close click`);
+    },
+    closeIcon: 'DeleteBinFill',
+  },
+  {
+    label: 'Tab 5',
+    id: 'tab5',
+    icon: 'Polaroid2Line',
+    disabled: true,
+    onCloseClick: (id) => {
+      alert(`${id} close click`);
+    },
+  },
+  {
+    label: 'Lorem Ipsum',
+    id: 'tab6',
+    icon: 'DragMoveLine',
+    intent: 'danger',
+  },
+  {
+    label: 'Hey I am another long tab',
+    id: 'tab7',
+    icon: 'LeafFill',
+    onCloseClick: (id) => {
+      alert(`${id} close click`);
+    },
+  },
+  {
+    label: 'Tab 8',
+    id: 'tab8',
+    icon: 'MapPin3Line',
+  },
+  {
+    label: 'Tab 9',
+    id: 'tab9',
+    icon: 'EjectLine',
+  },
+] as IReqoreTabsProps['tabs'];
+
+const { createArg } = argManager<IReqoreTabsProps>();
+
+export default {
+  title: 'Components/Tabs',
+  argTypes: {
+    ...FlatArg,
+    ...SizeArg,
+    ...IntentArg,
+    ...createArg('fill', {
+      type: 'boolean',
+      defaultValue: false,
+      name: 'Fill',
+      description: 'If the tabs should fill the container',
+    }),
+    ...createArg('vertical', {
+      type: 'boolean',
+      defaultValue: false,
+      name: 'Vertical',
+      description: 'If the tabs should be vertical',
+    }),
+  },
+} as Meta<IReqoreTabsProps>;
+
+const Template: Story<IReqoreTabsProps> = (args) => {
+  return (
+    <ReqoreTabs {...args} tabs={tabs}>
+      <ReqoreTabsContent tabId='tab1'>
+        <h3>Tab 1</h3>
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='tab2'>
+        <h3>Tab 2</h3>
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId={3}>
+        <h3>Tab 3</h3>
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='tab4'>
+        <h3>Tab 4</h3>
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='tab5'>
+        <h3>Tab 5</h3>
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='tab6'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae nisi ligula. Proin
+        laoreet vitae risus sed pretium. Sed eu elit non tortor congue molestie vel ut elit. Duis id
+        turpis tincidunt libero accumsan cursus. Quisque urna nibh, tempor ac lorem sed, dapibus
+        ornare arcu. Vestibulum at nunc tempus, ultricies justo eget, luctus turpis. Curabitur et
+        sapien in est rhoncus suscipit vitae id purus. Cras malesuada, metus vitae vulputate ornare,
+        ligula ipsum fringilla ligula, a cursus tortor ligula semper sem. Praesent fringilla dui
+        volutpat elementum ultrices. Nam rutrum, augue finibus tempus auctor, eros metus iaculis
+        neque, at vehicula ante quam et metus. Etiam quis commodo nunc. Aenean rhoncus, mi ac
+        tincidunt efficitur, nisl nunc tempor ipsum, accumsan eleifend felis nisl vitae diam. Nunc
+        vitae dapibus nisi. Donec cursus vitae justo ut interdum. Suspendisse mattis, erat vel
+        molestie faucibus, tortor neque mollis erat, vulputate aliquet tortor nulla eu diam. Ut eget
+        fringilla sapien. Vivamus ut leo in tellus ultrices lacinia non vel lorem. Sed imperdiet
+        sapien ut odio sagittis gravida nec vel lacus. Morbi euismod libero sed tristique
+        condimentum. Nullam id erat justo. Ut in justo turpis. Nam eleifend tincidunt lacinia. Duis
+        non lacinia purus. Mauris accumsan nunc nulla, at consectetur odio pharetra eu. Phasellus
+        non massa maximus, placerat velit eget, porta ante. Sed porttitor arcu orci, vitae
+        vestibulum odio blandit et. Fusce fringilla ipsum eu ante venenatis dapibus. Morbi ornare
+        ultricies risus ut ullamcorper. Curabitur feugiat enim libero, non commodo nibh facilisis
+        nec. Integer suscipit quis ligula a porta. Mauris eget odio tincidunt, fermentum tellus non,
+        tincidunt tellus. Aliquam erat volutpat. Ut metus libero, facilisis quis est nec, auctor
+        finibus justo. Quisque scelerisque placerat mi ac ullamcorper. Aenean vestibulum lorem id
+        elit blandit, id viverra tortor fringilla. Vivamus consectetur sodales mauris, in semper
+        tellus dapibus vitae. Donec eget sapien in eros accumsan vestibulum. Praesent nec purus
+        libero. Aliquam maximus sem ac quam gravida, eu fermentum quam varius. In quam augue, rutrum
+        maximus posuere non, molestie ut arcu. Sed pretium rhoncus ullamcorper. Praesent quis purus
+        ac dolor tincidunt porttitor eget vitae felis. Sed posuere tellus eu ex dignissim porta.
+        Nullam in molestie nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
+        per inceptos himenaeos. Proin et varius justo, in faucibus diam. Aenean arcu ex, gravida
+        vitae nunc nec, tincidunt venenatis sapien. Duis congue pulvinar ipsum. Integer maximus
+        felis mattis ipsum vestibulum lacinia. Maecenas tortor risus, malesuada a est at, lobortis
+        tempus tellus. Quisque commodo velit id nisi viverra, non dignissim turpis tristique.
+        Suspendisse felis est, fringilla non pellentesque sit amet, varius quis sem. In non velit
+        massa. Aenean at porttitor est. Sed viverra eleifend cursus. Ut nec justo porttitor,
+        sollicitudin nisl ac, malesuada leo. Morbi consequat ornare suscipit. Maecenas eleifend quam
+        sagittis tortor volutpat porttitor. Vivamus dictum ex id finibus tristique. Nulla rutrum,
+        ante sagittis molestie aliquet, lectus quam condimentum nisl, a convallis mauris massa sed
+        risus. Curabitur ac suscipit dolor, nec dapibus justo. Pellentesque nec sollicitudin sapien.
+        Ut metus neque, volutpat eu est eu, iaculis suscipit augue. Fusce blandit magna tincidunt
+        turpis semper venenatis. Nullam sit amet accumsan massa. Donec interdum ut dui nec varius.
+        Pellentesque ut tellus sit amet tellus mollis consectetur. Aenean aliquam leo elit. Nullam
+        convallis felis et rhoncus fermentum. Nunc rutrum nulla sed nisl efficitur laoreet.
+        Suspendisse potenti. Sed vitae consequat tellus. Vestibulum in eros at turpis pretium
+        rutrum. Phasellus commodo commodo libero, eu volutpat nunc tempus nec. Donec tempus
+        dignissim lectus, quis molestie quam dignissim a. Cras eget mauris id libero suscipit
+        consequat. Nulla facilisi. Donec arcu arcu, venenatis quis mattis quis, pretium nec justo.
+        Praesent aliquet tortor in nulla pellentesque, condimentum congue sapien laoreet. Nullam
+        semper consectetur feugiat. Nunc a orci non leo malesuada aliquam eu eget tellus.
+        Suspendisse potenti. Nam ornare ornare ullamcorper. Sed semper porttitor sem, eu vehicula
+        purus egestas sit amet. Cras sit amet aliquet augue. Cras velit leo, pellentesque quis eros
+        eu, feugiat gravida quam. Mauris in turpis nunc. Suspendisse varius urna quam, sit amet
+        tempus sem tristique ut. Quisque at velit nec nibh varius tempor venenatis vel felis. Morbi
+        velit sapien, facilisis ut odio quis, laoreet euismod magna. Quisque efficitur euismod diam,
+        in ullamcorper sapien tristique vitae. Nullam ac volutpat quam. Morbi vulputate arcu nisl,
+        et tempus dui tincidunt vel. Morbi finibus pretium pretium. Aliquam fermentum turpis sit
+        amet est faucibus elementum ac quis sem. Maecenas scelerisque commodo magna eget blandit.
+        Praesent vitae bibendum mauris, eu blandit dui.
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='tab7'>
+        <h3>Tab 7</h3>
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='tab8'>
+        <h3>Tab 8</h3>
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='tab9'>
+        <h3>Tab 9</h3>
+      </ReqoreTabsContent>
+    </ReqoreTabs>
+  );
+};
+
+export const Basic = Template.bind({});
+export const Fill = Template.bind({});
+Fill.args = {
+  fill: true,
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  vertical: true,
+  fillParent: true,
+};
+
+export const VerticalWithWrapping = Template.bind({});
+VerticalWithWrapping.args = {
+  tabs: {
+    ...tabs,
+    vertical: true,
+    fillParent: true,
+    wrapTabNames: true,
+  },
+};
+
+export const VerticalFill = Template.bind({});
+VerticalFill.args = {
+  tabs: {
+    ...tabs,
+    vertical: true,
+    fill: true,
+    fillParent: true,
+  },
+};
+
+export const VerticalCustomWidth = Template.bind({});
+VerticalCustomWidth.args = {
+  tabs: {
+    ...tabs,
+    vertical: true,
+    fill: true,
+    fillParent: true,
+    width: '300px',
+  },
+};
+
+export const Flat = Template.bind({});
+Flat.args = {
+  tabs: {
+    ...tabs,
+    flat: true,
+  },
+};

package/src/stories/Tag/Tag.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { noop } from 'lodash';
+import { IReqoreTagProps } from '../../components/Tag';
+import { IReqoreTagGroup } from '../../components/Tag/group';
+import { ReqoreTag, ReqoreTagGroup } from '../../index';
+import { argManager, SizeArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreTagGroup & IReqoreTagProps>();
+
+export default {
+  title: 'Components/Tag',
+  argTypes: {
+    ...SizeArg,
+    ...createArg('columns', {
+      name: 'Columns',
+      description: 'Number of columns',
+      control: 'number',
+    }),
+    ...createArg('onClick', {
+      defaultValue: noop,
+      table: {
+        disable: true,
+      },
+    }),
+    ...createArg('onRemoveClick', {
+      defaultValue: noop,
+      table: {
+        disable: true,
+      },
+    }),
+    ...createArg('actions', {
+      defaultValue: [
+        {
+          icon: '24HoursFill',
+          onClick: noop,
+          disabled: true,
+          intent: 'info',
+          tooltip: { content: 'I am a tooltip' },
+        },
+        {
+          icon: 'PsychotherapyFill',
+          onClick: noop,
+        },
+        {
+          icon: 'SpyFill',
+          onClick: noop,
+          intent: 'success',
+          tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+        },
+      ],
+      table: {
+        disable: true,
+      },
+    }),
+  },
+} as Meta<IReqoreTagGroup & IReqoreTagProps>;
+
+const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }) => {
+  return (
+    <ReqoreTagGroup columns={columns} size={args.size}>
+      <ReqoreTag label='Basic Tag' icon='AlarmWarningLine' {...args} />
+      <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' {...args} />
+      <ReqoreTag label='300px Tag' width='300px' icon='AlarmWarningLine' {...args} />
+      <ReqoreTag label='Danger Tag' icon='AlarmWarningLine' intent='danger' {...args} />
+      <ReqoreTag label='Custom Color Tag' icon='AlarmWarningLine' color='#38fdb2' {...args} />
+    </ReqoreTagGroup>
+  );
+};
+
+export const Basic = Template.bind({});
+export const Badge = Template.bind({});
+Badge.args = { badge: true };

package/src/stories/TextArea/TextArea.stories.tsx

@@ -0,0 +1,74 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import { IReqoreTextareaProps } from '../../components/Textarea';
+import { ReqoreTextarea } from '../../index';
+import { argManager, DisabledArg, MinimalArg, SizeArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreTextareaProps>();
+
+export default {
+  title: 'Components/TextArea',
+  argTypes: {
+    ...MinimalArg(),
+    ...DisabledArg,
+    ...SizeArg,
+    ...createArg('scaleWithContent', {
+      name: 'Scale with content',
+      description: 'Scale with content',
+      control: 'boolean',
+      defaultValue: true,
+    }),
+    ...createArg('fluid', {
+      name: 'Fluid',
+      description: 'Fluid',
+      control: 'boolean',
+      defaultValue: false,
+    }),
+    ...createArg('placeholder', {
+      name: 'Placeholder',
+      description: 'Placeholder',
+      control: 'text',
+      defaultValue: 'Placeholder',
+    }),
+  },
+} as Meta<IReqoreTextareaProps>;
+
+const str =
+  '✔ Checking your system\n' +
+  '✔ Locating Application\n' +
+  '✔ Preparing native dependencies\n' +
+  '✔ Compiling Main Process Code\n' +
+  '✔ Launch Dev Servers\n' +
+  '✔ Compiling Preload Scripts\n' +
+  '✔ Launching Application\n';
+
+const Template: Story<IReqoreTextareaProps> = (args) => {
+  const [value, setValue] = useState(str);
+
+  const handleValueChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  const handleValueClear = () => {
+    setValue('');
+  };
+
+  return (
+    <ReqoreTextarea
+      {...args}
+      onChange={handleValueChange}
+      onClearClick={handleValueClear}
+      value={value}
+    />
+  );
+};
+
+export const Basic = Template.bind({});
+export const Minimal = Template.bind({});
+Minimal.args = {
+  minimal: true,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

package/src/stories/Tree/Tree.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { noop } from 'lodash';
+import { IReqoreTreeProps, ReqoreTree } from '../../components/Tree';
+import MockObject from '../../mock/object.json';
+import { argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqoreTreeProps>();
+
+export default {
+  title: 'Components/Tree',
+  argTypes: {
+    ...createArg('withLabelCopy', {
+      name: 'With label copy',
+      description: 'With label copy',
+      control: 'boolean',
+      defaultValue: true,
+    }),
+    ...createArg('showTypes', {
+      name: 'Show types',
+      description: 'Show types',
+      control: 'boolean',
+      defaultValue: true,
+    }),
+    ...createArg('expanded', {
+      name: 'Expanded',
+      description: 'Expanded',
+      control: 'boolean',
+      defaultValue: false,
+    }),
+  },
+} as Meta<IReqoreTreeProps>;
+
+const data = MockObject;
+
+const Template: Story<IReqoreTreeProps> = (args: IReqoreTreeProps) => {
+  return <ReqoreTree data={data} onItemClick={noop} {...args} />;
+};
+
+export const Basic = Template.bind({});
+export const TextView = Template.bind({});
+TextView.args = {
+  mode: 'copy',
+};

package/src/stories/Wrapper.tsx

@@ -0,0 +1,13 @@
+import { ReqoreLayoutContent } from '..';
+import ReqoreContent from '../components/Content';
+import ReqoreUIProvider, { IReqoreUIProviderProps } from '../containers/UIProvider';
+
+export const StoryWrapper = ({ children, ...args }: IReqoreUIProviderProps) => {
+  return (
+    <ReqoreUIProvider {...args}>
+      <ReqoreLayoutContent>
+        <ReqoreContent style={{ padding: '20px' }}>{children}</ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+};