@qoretechnologies/reqore 0.20.0 → 0.20.3

package/src/stories/Button/Button.stories.tsx

@@ -0,0 +1,69 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ReqoreButton from '../../components/Button';
+import { ReqoreControlGroup } from '../../index';
+import { IconArg } from '../utils/args';
+
+export default {
+  title: 'Components/Button',
+  parameters: {
+    jest: ['button.test.tsx'],
+  },
+  argTypes: {
+    ...IconArg('icon', 'Icon'),
+    ...IconArg('rightIcon', 'Right Icon'),
+  },
+} as ComponentMeta<typeof ReqoreButton>;
+
+const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
+  return (
+    <>
+      <ReqoreControlGroup size={buttonProps.size}>
+        <ReqoreButton {...buttonProps}>Default</ReqoreButton>
+        <ReqoreButton {...buttonProps} disabled>
+          Disabled
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} active>
+          Active
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} flat>
+          Flat
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} minimal>
+          Minimal
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup fluid>
+        <ReqoreButton {...buttonProps} fluid>
+          Fluid button
+        </ReqoreButton>
+      </ReqoreControlGroup>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+export const Info = Template.bind({});
+Info.args = {
+  intent: 'info',
+};
+export const Success = Template.bind({});
+Success.args = {
+  intent: 'success',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+};
+export const Pending = Template.bind({});
+Pending.args = {
+  intent: 'pending',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  intent: 'danger',
+};
+export const Muted = Template.bind({});
+Muted.args = {
+  intent: 'muted',
+};

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Checkbox from '../../components/Checkbox';
+import { ReqoreCheckbox } from '../../index';
+
+export default {
+  title: 'Components/Checkbox',
+  parameters: ['checkbox.test.tsx'],
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => {
+  return (
+    <>
+      <ReqoreCheckbox {...args} />
+      <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
+      <ReqoreCheckbox {...args} checked />
+      <ReqoreCheckbox {...args} disabled />
+      <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
+    </>
+  );
+};
+
+export const Basic = Template.bind({});
+export const Switch = Template.bind({});
+Switch.args = {
+  asSwitch: true,
+};

package/src/stories/Columns/Columns.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, Story } from '@storybook/react';
+import { IReqoreColumnsProps } from '../../components/Columns';
+import { ReqoreColumn, ReqoreColumns } from '../../index';
+import { argManager } from '../utils/args';
+
+export interface IColumnsStoryArgs extends IReqoreColumnsProps {
+  multipleColumns?: boolean;
+}
+
+const { createArg, disableArgs } = argManager<IColumnsStoryArgs>();
+
+export default {
+  title: 'Components/Columns',
+  component: ReqoreColumns,
+  argTypes: {
+    ...createArg('multipleColumns', {
+      defaultValue: false,
+      control: 'boolean',
+      name: 'Multiple Columns',
+    }),
+    ...createArg('minColumnWidth', {
+      defaultValue: '200px',
+    }),
+    ...createArg('maxColumnWidth', {
+      defaultValue: '300px',
+    }),
+    ...createArg('alignItems', {
+      defaultValue: 'normal',
+    }),
+    ...createArg('alignItems', {
+      defaultValue: 'normal',
+    }),
+    ...createArg('columns', {
+      defaultValue: undefined,
+      type: 'number',
+    }),
+    ...createArg('columnsGap', {
+      defaultValue: undefined,
+    }),
+    ...disableArgs(['className', 'multipleColumns']),
+  },
+} as Meta<IColumnsStoryArgs>;
+
+const Template: Story<IColumnsStoryArgs> = (args) => {
+  return (
+    <ReqoreColumns {...args}>
+      <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
+        1st column
+      </ReqoreColumn>
+      <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
+        2nd column
+      </ReqoreColumn>
+      {args.multipleColumns && (
+        <>
+          <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
+            4th column
+          </ReqoreColumn>
+          <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
+            3rd column
+          </ReqoreColumn>
+        </>
+      )}
+    </ReqoreColumns>
+  );
+};
+
+export const Basic = Template.bind({});
+export const MultipleColumns = Template.bind({});
+MultipleColumns.args = {
+  multipleColumns: true,
+};

package/src/stories/Comment/Comment.stories.tsx

@@ -0,0 +1,127 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IReqoreCommentFeedProps } from '../../components/CommentFeed';
+import { ReqoreComment, ReqoreCommentFeed } from '../../index';
+import { argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqoreCommentFeedProps>();
+
+export default {
+  title: 'Components/Comments',
+  argTypes: {
+    ...createArg('gapSize', {
+      defaultValue: '0',
+      type: 'string',
+    }),
+  },
+} as ComponentMeta<typeof ReqoreCommentFeed>;
+
+const Template: ComponentStory<typeof ReqoreCommentFeed> = (args) => {
+  return (
+    <ReqoreCommentFeed {...args}>
+      <ReqoreComment title='Test comment' detail='2 hours ago' icon='UserFill'>
+        This is a test
+      </ReqoreComment>
+      <ReqoreComment
+        title='Test comment'
+        detail='2 hours ago'
+        icon='UserFill'
+        rounded
+        flat
+        intent='info'
+      >
+        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
+        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
+        flags are deprecated, see:
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
+        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
+        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
+        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
+        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
+        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
+        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
+        'postcss-flexbugs-fixes' and 'autoprefixer'. See
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
+        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
+      </ReqoreComment>
+      <ReqoreComment
+        title='Test comment'
+        detail='2 hours ago'
+        intent='danger'
+        image='https://lh3.googleusercontent.com/ogw/ADea4I59tV_-XSMTDNNfJuHsP5-6I22aIE7Q8itFr2peUQ=s32-c-mo'
+      >
+        This is a test of some kind
+      </ReqoreComment>
+      <ReqoreComment icon='UserFill' rounded flat intent='info' detail='2 hours ago'>
+        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
+        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
+        flags are deprecated, see:
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
+        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
+        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
+        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
+        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
+        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
+        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
+        'postcss-flexbugs-fixes' and 'autoprefixer'. See
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
+        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
+      </ReqoreComment>
+      <ReqoreComment
+        rounded
+        flat
+        intent='info'
+        title='Awesome comment'
+        actions={[
+          {
+            label: 'Edit',
+            icon: 'Edit2Line',
+          },
+        ]}
+      >
+        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
+        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
+        flags are deprecated, see:
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
+        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
+        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
+        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
+        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
+        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
+        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
+        'postcss-flexbugs-fixes' and 'autoprefixer'. See
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
+        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
+      </ReqoreComment>
+      <ReqoreComment
+        rounded
+        flat
+        intent='warning'
+        actions={[
+          {
+            label: 'Edit',
+            icon: 'Edit2Line',
+          },
+          {
+            icon: 'DeleteBin2Fill',
+          },
+        ]}
+      >
+        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
+        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
+        flags are deprecated, see:
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
+        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
+        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
+        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
+        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
+        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
+        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
+        'postcss-flexbugs-fixes' and 'autoprefixer'. See
+        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
+        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
+      </ReqoreComment>
+    </ReqoreCommentFeed>
+  );
+};
+
+export const Basic = Template.bind({});

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqoreControlGroupProps } from '../../components/ControlGroup';
+import ReqoreInput from '../../components/Input';
+import { ReqoreButton, ReqoreControlGroup } from '../../index';
+import { argManager, MinimalArg, SizeArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreControlGroupProps>();
+
+export default {
+  title: 'Components/Control Group',
+  argTypes: {
+    ...SizeArg,
+    ...MinimalArg(),
+    ...createArg('stack', {
+      name: 'Stack',
+      defaultValue: false,
+      description: 'Whether the control group should stack',
+      control: 'boolean',
+    }),
+  },
+} as Meta<IReqoreControlGroupProps>;
+
+const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
+  return (
+    <ReqoreControlGroup {...args}>
+      <ReqoreButton>Button</ReqoreButton>
+      <ReqoreInput icon='4KFill' value='Hello' />
+      <ReqoreButton disabled>Disabled</ReqoreButton>
+      <ReqoreButton minimal>Minimal</ReqoreButton>
+    </ReqoreControlGroup>
+  );
+};
+
+export const Basic = Template.bind({});
+export const Minimal = Template.bind({});
+Minimal.args = {
+  minimal: true,
+};
+
+export const Stacked = Template.bind({});
+Stacked.args = {
+  stack: true,
+};

package/src/stories/Drawer/Drawer.stories.tsx

@@ -0,0 +1,181 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { noop } from 'lodash';
+import { useContext } from 'react';
+import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
+import {
+  ReqoreButton,
+  ReqoreContext,
+  ReqorePanel,
+  ReqoreTabs,
+  ReqoreTabsContent,
+} from '../../index';
+import { argManager, FlatArg, IntentArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreDrawerProps>();
+
+export default {
+  title: 'Components/Drawer',
+  argTypes: {
+    ...FlatArg,
+    ...createArg('floating', {
+      type: 'boolean',
+      name: 'Floating',
+      defaultValue: false,
+    }),
+    ...createArg('isOpen', {
+      type: 'boolean',
+      name: 'Open',
+      defaultValue: true,
+    }),
+    ...createArg('resizable', {
+      type: 'boolean',
+      name: 'Resizable',
+      defaultValue: true,
+    }),
+    ...createArg('hidable', {
+      type: 'boolean',
+      name: 'Hidable',
+      defaultValue: true,
+    }),
+    ...createArg('position', {
+      defaultValue: 'right',
+      name: 'Position',
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'top', 'bottom'],
+    }),
+    ...createArg('size', {
+      defaultValue: '450px',
+      name: 'Size',
+      type: 'string',
+    }),
+    ...createArg('minSize', {
+      defaultValue: '150px',
+      name: 'Minimal Size',
+      type: 'string',
+    }),
+    ...createArg('maxSize', {
+      defaultValue: '90vw',
+      name: 'Max Size',
+      type: 'string',
+    }),
+    ...createArg('blur', {
+      defaultValue: 3,
+      name: 'Backdrop blur',
+      type: 'number',
+    }),
+    ...createArg('opacity', {
+      defaultValue: 1,
+      name: 'Drawer Opacity',
+      type: 'number',
+    }),
+    ...createArg('hasBackdrop', {
+      defaultValue: true,
+      name: 'Has Backdrop',
+      type: 'boolean',
+    }),
+    ...IntentArg,
+  },
+} as Meta;
+
+const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
+  const { confirmAction } = useContext(ReqoreContext);
+  return (
+    <>
+      <ReqorePanel label='Just some background text' padded>
+        By impossible of in difficulty discovered celebrated ye. Justice joy manners boy met resolve
+        produce. Bed head loud next plan rent had easy add him. As earnestly shameless elsewhere
+        defective estimable fulfilled of. Esteem my advice it an excuse enable. Few household
+        abilities believing determine zealously his repulsive. To open draw dear be by side like.
+        Allow miles wound place the leave had. To sitting subject no improve studied limited. Ye
+        indulgence unreserved connection alteration appearance my an astonished. Up as seen sent
+        make he they of. Her raising and himself pasture believe females. Fancy she stuff after
+        aware merit small his. Charmed esteems luckily age out. At ourselves direction believing do
+        he departure. Celebrated her had sentiments understood are projection set. Possession ye no
+        mr unaffected remarkably at. Wrote house in never fruit up. Pasture imagine my garrets an
+        he. However distant she request behaved see nothing. Talking settled at pleased an of me
+        brother weather. Breakfast procuring nay end happiness allowance assurance frankness. Met
+        simplicity nor difficulty unreserved who. Entreaties mr conviction dissimilar me astonished
+        estimating cultivated. On no applauded exquisite my additions. Pronounce add boy estimable
+        nay suspected. You sudden nay elinor thirty esteem temper. Quiet leave shy you gay off asked
+        large style. Rooms oh fully taken by worse do. Points afraid but may end law lasted. Was out
+        laughter raptures returned outweigh. Luckily cheered colonel me do we attacks on highest
+        enabled. Tried law yet style child. Bore of true of no be deal. Frequently sufficient in be
+        unaffected. The furnished she concluded depending procuring concealed. In to am attended
+        desirous raptures declared diverted confined at. Collected instantly remaining up certainly
+        to necessary as. Over walk dull into son boy door went new. At or happiness commanded
+        daughters as. Is handsome an declared at received in extended vicinity subjects. Into miss
+        on he over been late pain an. Only week bore boy what fat case left use. Match round scale
+        now sex style far times. Your me past an much. Able an hope of body. Any nay shyness article
+        matters own removal nothing his forming. Gay own additions education satisfied the
+        perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy
+        could cease green oh. Her old collecting she considered discovered. So at parties he warrant
+        oh staying. Square new horses and put better end. Sincerity collected happiness do is
+        contented. Sigh ever way now many. Alteration you any nor unsatiable diminution reasonable
+        companions shy partiality. Leaf by left deal mile oh if easy. Added woman first get led joy
+        not early jokes. As am hastily invited settled at limited civilly fortune me. Really spring
+        in extent an by. Judge but built gay party world. Of so am he remember although required.
+        Bachelor unpacked be advanced at. Confined in declared marianne is vicinity. It sportsman
+        earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or
+        raillery if improved landlord to speaking hastened differed he. Furniture discourse
+        elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you
+        him thoroughly. Noise is round to in it quick timed doors. Written address greatly get
+        attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had
+        judgment out opinions property the supplied.
+      </ReqorePanel>
+      <ReqoreDrawer {...args} label='This is a test' icon='EmphasisCn' onClose={noop}>
+        <ReqoreTabs
+          flat
+          intent={args.intent}
+          tabs={[
+            { label: 'Tab 1 with some long label', id: 'tab1' },
+            { label: 'Tab 2 another long label', id: 'tab2' },
+          ]}
+        >
+          <ReqoreTabsContent tabId='tab1'>
+            <ReqorePanel
+              fill
+              title='Tab 1 contents'
+              collapsible
+              flat
+              rounded
+              padded
+              label='I AM A PANEL'
+            >
+              I am a message a very long message - Shadowlands has mechanisms put in place for
+              allowing players to catch up on Renown, the system of gaining favor and unlocking
+              rewards, Campaign chapters, and soulbinds within your Covenant.
+            </ReqorePanel>
+            <br />
+            <ReqoreButton
+              onClick={() =>
+                confirmAction({
+                  description:
+                    'This is a simple test to establish the proper balance of your loud speakers',
+                })
+              }
+            >
+              Hello I am a super long button that opens a modal on click
+            </ReqoreButton>
+          </ReqoreTabsContent>
+          <ReqoreTabsContent tabId='tab2'>Tab 2 here</ReqoreTabsContent>
+        </ReqoreTabs>
+      </ReqoreDrawer>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});
+export const Flat = Template.bind({});
+Flat.args = {
+  flat: true,
+};
+export const Floating = Template.bind({});
+Floating.args = {
+  floating: true,
+};
+export const Transparent = Template.bind({});
+Transparent.args = {
+  opacity: 0.5,
+};

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,160 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import ReqoreButton from '../../components/Button';
+import { IReqoreDropdownProps } from '../../components/Dropdown';
+import { IReqoreInputProps } from '../../components/Input';
+import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
+import { argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqoreDropdownProps<IReqoreInputProps>>();
+
+export default {
+  title: 'Components/Dropdown',
+  argTypes: {
+    ...createArg('component', {
+      defaultValue: ReqoreButton,
+      table: {
+        disable: true,
+      },
+    }),
+    ...createArg('componentProps', {
+      table: {
+        disable: true,
+      },
+    }),
+    ...createArg('filterable', {
+      defaultValue: true,
+      name: 'Filterable',
+      type: 'boolean',
+    }),
+    ...createArg('items', {
+      table: {
+        disable: true,
+      },
+
+      defaultValue: [
+        {
+          selected: true,
+          label: 'Hello',
+          icon: 'SunCloudyLine',
+        },
+        {
+          label: 'How are ya',
+          icon: 'BatteryChargeFill',
+        },
+        {
+          disabled: true,
+          label: 'i aM diSAblEd',
+          icon: 'StopCircleLine',
+        },
+        {
+          selected: true,
+          label: 'Hello',
+          icon: 'SunCloudyLine',
+        },
+        {
+          label: 'How are ya',
+          icon: 'BatteryChargeFill',
+        },
+        {
+          disabled: true,
+          label: 'i aM diSAblEd',
+          icon: 'StopCircleLine',
+        },
+        {
+          selected: true,
+          label: 'Hello',
+          icon: 'SunCloudyLine',
+        },
+        {
+          label: 'How are ya',
+          icon: 'BatteryChargeFill',
+        },
+        {
+          disabled: true,
+          label: 'i aM diSAblEd',
+          icon: 'StopCircleLine',
+        },
+        {
+          selected: true,
+          label: 'Hello',
+          icon: 'SunCloudyLine',
+        },
+        {
+          label: 'How are ya',
+          icon: 'BatteryChargeFill',
+        },
+        {
+          disabled: true,
+          label: 'i aM diSAblEd',
+          icon: 'StopCircleLine',
+        },
+        {
+          selected: true,
+          label: 'Hello',
+          icon: 'SunCloudyLine',
+        },
+        {
+          label: 'How are ya',
+          icon: 'BatteryChargeFill',
+        },
+        {
+          disabled: true,
+          label: 'i aM diSAblEd',
+          icon: 'StopCircleLine',
+        },
+        {
+          selected: true,
+          label: 'Hello',
+          icon: 'SunCloudyLine',
+        },
+        {
+          label: 'How are ya',
+          icon: 'BatteryChargeFill',
+        },
+        {
+          disabled: true,
+          label: 'i aM diSAblEd',
+          icon: 'StopCircleLine',
+        },
+      ],
+    }),
+  },
+} as Meta<IReqoreDropdownProps<IReqoreInputProps>>;
+
+const Template: Story<IReqoreDropdownProps<IReqoreInputProps>> = (
+  args: IReqoreDropdownProps<IReqoreInputProps>
+) => {
+  return (
+    <>
+      <ReqoreControlGroup>
+        <ReqoreDropdown label='Default Dropdown' {...args} />
+        <ReqoreDropdown label='Disabled if empty' {...args} items={[]} />
+        <ReqoreDropdown icon='SunCloudyLine' label='Custom icon' {...args} />
+        <ReqoreDropdown rightIcon='SunCloudyLine' caretPosition='right' {...args}>
+          Custom icon with caret on right
+        </ReqoreDropdown>
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup fluid>
+        <ReqoreDropdown
+          rightIcon='SunCloudyLine'
+          caretPosition='right'
+          label='Open By Default'
+          {...args}
+          componentProps={{ placeholder: 'Fluid component' }}
+          isDefaultOpen
+          useTargetWidth
+        />
+      </ReqoreControlGroup>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});
+export const CustomComponent = Template.bind({});
+CustomComponent.args = {
+  component: ReqoreInput,
+  componentProps: {
+    placeholder: 'Custom component',
+  },
+};