@qoretechnologies/reqore 0.35.3 → 0.36.1

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

@@ -1,14 +1,35 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import { IReqoreTagProps } from '../../components/Tag';
 import { IReqoreTagGroup } from '../../components/Tag/group';
 import { ReqoreTag, ReqoreTagGroup } from '../../index';
+import { StoryMeta } from '../utils';
 import { SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTagGroup & IReqoreTagProps>();
 
-export default {
+const meta = {
   title: 'Form/Tag/Stories',
+  component: ReqoreTag,
+  args: {
+    onClick: noop,
+    onRemoveClick: noop,
+    rightIcon: 'EBike2Line',
+    actions: [
+      {
+        icon: '24HoursFill',
+        onClick: noop,
+        disabled: true,
+        intent: 'info',
+        tooltip: { content: 'I am a tooltip' },
+      },
+      {
+        icon: 'SpyFill',
+        onClick: noop,
+        intent: 'success',
+      },
+    ],
+  },
   argTypes: {
     ...SizeArg,
     ...createArg('columns', {
@@ -35,30 +56,19 @@ export default {
       control: 'text',
     }),
     ...createArg('actions', {
-      defaultValue: [
-        {
-          icon: '24HoursFill',
-          onClick: noop,
-          disabled: true,
-          intent: 'info',
-          tooltip: { content: 'I am a tooltip' },
-        },
-        {
-          icon: 'SpyFill',
-          onClick: noop,
-          intent: 'success',
-        },
-      ],
       table: {
         disable: true,
       },
     }),
   },
-} as Meta<IReqoreTagGroup & IReqoreTagProps>;
+} as StoryMeta<typeof ReqoreTag>;
 
-const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<IReqoreTagProps> = (args) => {
   return (
-    <ReqoreTagGroup columns={columns} size={args.size} gapSize={args.gapSize} wrap={args.wrap}>
+    <ReqoreTagGroup>
       <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label={1} />
       <ReqoreTag
         {...args}
@@ -321,25 +331,34 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
   );
 };
 
-export const Basic = Template.bind({});
-export const BigGapSize = Template.bind({});
-BigGapSize.args = { gapSize: 'big' };
-export const Badge = Template.bind({});
-Badge.args = { asBadge: true };
-export const NoWrap = Template.bind({});
-NoWrap.args = { wrap: false };
+export const Basic: Story = {
+  render: Template,
+};
 
-export const Effect = Template.bind({});
-Effect.args = {
-  effect: {
-    gradient: {
-      direction: 'to right bottom',
-      colors: { 0: '#33023c', 100: '#0a487b' },
+export const Badge: Story = {
+  render: Template,
+  args: { asBadge: true },
+};
+
+export const Wrap: Story = {
+  render: Template,
+  args: { wrap: true },
+};
+
+export const Effect = {
+  render: Template,
+
+  args: {
+    effect: {
+      gradient: {
+        direction: 'to right bottom',
+        colors: { 0: '#33023c', 100: '#0a487b' },
+      },
+      color: '#ffffff',
+      spaced: 2,
+      uppercase: true,
+      weight: 'thick',
+      textSize: 'small',
     },
-    color: '#ffffff',
-    spaced: 2,
-    uppercase: true,
-    weight: 'thick',
-    textSize: 'small',
   },
 };

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

@@ -0,0 +1,297 @@
+import { StoryFn, StoryObj } from '@storybook/react';
+import { noop } from 'lodash';
+import { IReqoreTagGroup } from '../../components/Tag/group';
+import { ReqoreTag, ReqoreTagGroup } from '../../index';
+import { StoryMeta } from '../utils';
+import { SizeArg, argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqoreTagGroup>();
+
+const meta = {
+  title: 'Form/Tag Group/Stories',
+  component: ReqoreTagGroup,
+  args: {
+    onClick: noop,
+    onRemoveClick: noop,
+    rightIcon: 'EBike2Line',
+    actions: [
+      {
+        icon: '24HoursFill',
+        onClick: noop,
+        disabled: true,
+        intent: 'info',
+        tooltip: { content: 'I am a tooltip' },
+      },
+      {
+        icon: 'SpyFill',
+        onClick: noop,
+        intent: 'success',
+      },
+    ],
+  },
+  argTypes: {
+    ...SizeArg,
+    ...createArg('columns', {
+      name: 'Columns',
+      description: 'Number of columns',
+      control: 'number',
+    }),
+    ...createArg('onClick', {
+      defaultValue: noop,
+      table: {
+        disable: true,
+      },
+    }),
+  },
+} as StoryMeta<typeof ReqoreTagGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<IReqoreTagGroup> = (args) => {
+  return (
+    <ReqoreTagGroup {...args}>
+      <ReqoreTag actions={null} onRemoveClick={null} rightIcon={null} label={1} />
+      <ReqoreTag
+        actions={null}
+        onRemoveClick={null}
+        rightIcon={null}
+        label='Basic Tag'
+        onClick={() => console.log('Tag clicked')}
+      />
+      <ReqoreTag actions={null} onRemoveClick={null} rightIcon={null} labelKey='Number' label={2} />
+      <ReqoreTag label='With Icon' icon='AlarmWarningLine' />
+      <ReqoreTag label='With Icon Colors' icon='AlarmWarningLine' iconColor='warning:lighten:2' />
+      <ReqoreTag labelKey='Tag with' label='Label Key' icon='AlarmWarningLine' />
+      <ReqoreTag labelKey='Key' label='value' />
+      <ReqoreTag icon='QuestionAnswerLine' fixed />
+      <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' />
+      <ReqoreTag
+        label='300px Tag'
+        width='300px'
+        fixed
+        icon='AlarmWarningLine'
+        tooltip='I am wiiiiiiide'
+        actions={[
+          {
+            icon: 'ErrorWarningLine',
+            onClick: noop,
+            intent: 'info',
+            tooltip: {
+              content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
+              openOnMount: true,
+              intent: 'danger',
+            },
+            show: false,
+          },
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+          },
+        ]}
+      />
+      <ReqoreTag
+        label='300px fixed Tag with a big description that should wrap and make the tag bigger'
+        width='300px'
+        fixed
+        icon='AlarmWarningLine'
+        tooltip='I am wiiiiiiide'
+        actions={[
+          {
+            icon: 'ErrorWarningLine',
+            onClick: noop,
+            intent: 'info',
+            tooltip: {
+              content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
+              openOnMount: true,
+              intent: 'danger',
+            },
+            show: false,
+          },
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+          },
+        ]}
+      />
+      <ReqoreTag label='Danger Tag' icon='AlarmWarningLine' intent='danger' />
+      <ReqoreTag
+        label='Custom Color Tag'
+        icon='AlarmWarningLine'
+        color='#38fdb2'
+        tooltip={{ content: 'Hm, another tooltip', openOnMount: true }}
+      />
+      <ReqoreTag
+        label='Custom Effect Tag'
+        effect={{
+          gradient: {
+            colors: '#ff47a3',
+          },
+        }}
+        labelKeyEffect={{
+          gradient: {
+            colors: '#b8f58a',
+          },
+          weight: 'thin',
+          spaced: 2,
+          uppercase: true,
+        }}
+        labelEffect={{
+          gradient: {
+            colors: {
+              0: '#00e3e8',
+              100: '#143a40',
+            },
+          },
+          weight: 'bold',
+        }}
+        labelKey='Effect'
+        icon='Css3Fill'
+      />
+      <ReqoreTag
+        label='No Buttons Tag'
+        icon='CarLine'
+        color='#0b4578'
+        actions={null}
+        onRemoveClick={null}
+      />
+      <ReqoreTag
+        label='Minimal Tag'
+        minimal
+        icon='ShareForward2Fill'
+        actions={null}
+        onRemoveClick={null}
+      />
+      <ReqoreTag
+        label='Minimal Tag with Intent'
+        minimal
+        intent='warning'
+        icon='ShareForward2Fill'
+        actions={null}
+        onRemoveClick={null}
+      />
+      <ReqoreTag
+        labelKey='This is the key for a wrapped tag'
+        label='Wrapped tag with some long text and width specified, no wrap specified'
+        icon='ShareForward2Fill'
+        width='400px'
+        onRemoveClick={null}
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
+      />
+      <ReqoreTag
+        labelKey='This is the key for a wrapped tag'
+        label='Wrapped tag with some long text and NO width specified, AND wrap specified'
+        icon='ShareForward2Fill'
+        leftIconColor='#00fafd'
+        rightIconColor='#eb0e8c'
+        wrap
+        onRemoveClick={null}
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
+      />
+      <ReqoreTag
+        labelKey='Fixed'
+        fixed='key'
+        label='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed key'
+        icon='DriveLine'
+        wrap
+        onRemoveClick={null}
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
+      />
+      <ReqoreTag
+        labelKey='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label, Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label'
+        fixed='label'
+        label='Fixed'
+        icon='DriveLine'
+        wrap
+        onRemoveClick={null}
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
+      />
+    </ReqoreTagGroup>
+  );
+};
+
+export const Basic: Story = {
+  render: Template,
+};
+
+export const BigGapSize: Story = {
+  render: Template,
+  args: { gapSize: 'big' },
+};
+
+export const NoWrap: Story = {
+  render: Template,
+  args: { wrap: false },
+};

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

@@ -1,13 +1,20 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { IReqoreTextareaProps } from '../../components/Textarea';
 import { ReqoreControlGroup, ReqoreTextarea } from '../../index';
+import { StoryMeta } from '../utils';
 import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTextareaProps>();
 
-export default {
+const meta = {
   title: 'Form/TextArea/Stories',
+  component: ReqoreTextarea,
+  args: {
+    scaleWithContent: true,
+    fluid: undefined,
+    placeholder: 'Placeholder',
+  },
   argTypes: {
     ...MinimalArg(),
     ...DisabledArg,
@@ -31,7 +38,10 @@ export default {
       defaultValue: 'Placeholder',
     }),
   },
-} as Meta<IReqoreTextareaProps>;
+} as StoryMeta<typeof ReqoreTextarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 const str =
   '✔ Checking your system\n' +
@@ -42,7 +52,7 @@ const str =
   '✔ Compiling Preload Scripts\n' +
   '✔ Launching Application\n';
 
-const Template: Story<IReqoreTextareaProps> = (args) => {
+const Template: StoryFn<IReqoreTextareaProps> = (args) => {
   const [value, setValue] = useState(str);
 
   const handleValueChange = (e) => {
@@ -144,53 +154,85 @@ const Template: Story<IReqoreTextareaProps> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const Info = Template.bind({});
-Info.args = {
-  intent: 'info',
+export const Basic: Story = {
+  render: Template,
+};
+
+export const Info: Story = {
+  render: Template,
+
+  args: {
+    intent: 'info',
+  },
 };
-export const Success = Template.bind({});
-Success.args = {
-  intent: 'success',
+
+export const Success: Story = {
+  render: Template,
+
+  args: {
+    intent: 'success',
+  },
 };
-export const Warning = Template.bind({});
-Warning.args = {
-  intent: 'warning',
+
+export const Warning: Story = {
+  render: Template,
+
+  args: {
+    intent: 'warning',
+  },
 };
-export const Danger = Template.bind({});
-Danger.args = {
-  intent: 'danger',
+
+export const Danger: Story = {
+  render: Template,
+
+  args: {
+    intent: 'danger',
+  },
 };
-export const Pending = Template.bind({});
-Pending.args = {
-  intent: 'pending',
+
+export const Pending: Story = {
+  render: Template,
+
+  args: {
+    intent: 'pending',
+  },
 };
-export const Muted = Template.bind({});
-Muted.args = {
-  intent: 'muted',
+
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    intent: 'muted',
+  },
 };
 
-export const Custom = Template.bind({});
-Custom.args = {
-  customTheme: {
-    main: '#38fdb2',
+export const Custom: Story = {
+  render: Template,
+
+  args: {
+    customTheme: {
+      main: '#38fdb2',
+    },
   },
 };
 
-export const Effect = Template.bind({});
-Effect.args = {
-  effect: {
-    gradient: {
-      type: 'radial',
-      colors: {
-        0: '#361554',
-        50: '#160013',
+export const Effect: Story = {
+  render: Template,
+
+  args: {
+    effect: {
+      gradient: {
+        type: 'radial',
+        colors: {
+          0: '#361554',
+          50: '#160013',
+        },
       },
+      spaced: 2,
+      color: '#ffffff',
+      uppercase: true,
+      textSize: 'small',
+      weight: 'bold',
     },
-    spaced: 2,
-    color: '#ffffff',
-    uppercase: true,
-    textSize: 'small',
-    weight: 'bold',
   },
 };