@qoretechnologies/reqore 0.43.0 → 0.45.0

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

@@ -1,399 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { IReqoreControlGroupProps } from '../../components/ControlGroup';
-import {
-  ReqoreButton,
-  ReqoreCheckbox,
-  ReqoreControlGroup,
-  ReqoreDropdown,
-  ReqoreInput,
-  ReqoreTag,
-  ReqoreVerticalSpacer,
-} from '../../index';
-import { StoryMeta } from '../utils';
-import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreControlGroupProps>();
-
-const meta = {
-  title: 'Form/Control Group/Stories',
-  component: ReqoreControlGroup,
-  argTypes: {
-    ...SizeArg,
-    ...GapSizeArg,
-    ...MinimalArg(),
-    ...createArg('stack', {
-      name: 'Stack',
-      defaultValue: false,
-      description: 'Whether the control group should stack',
-      control: 'boolean',
-    }),
-    ...createArg('vertical', {
-      name: 'Vertical',
-      defaultValue: false,
-      description: 'Whether the control group should be vertical',
-      control: 'boolean',
-    }),
-    ...createArg('fluid', {
-      name: 'Fluid',
-      defaultValue: false,
-      description: 'Whether the control group should be fluid',
-      control: 'boolean',
-    }),
-    ...createArg('wrap', {
-      name: 'wrap',
-      defaultValue: true,
-      description: 'Whether the control group should wrap',
-      control: 'boolean',
-    }),
-  },
-  args: {
-    wrap: true,
-    vertical: false,
-    stack: false,
-    fluid: false,
-    minimal: false,
-  },
-} as StoryMeta<typeof ReqoreControlGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<typeof ReqoreControlGroup> = (args) => {
-  if (args.fill) {
-    return (
-      <>
-        <ReqoreControlGroup {...args} stack>
-          <ReqoreButton icon='PictureInPictureLine' description='I will be a bit larger'>
-            Button
-          </ReqoreButton>
-          <ReqoreControlGroup stack>
-            <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup stack>
-            <ReqoreControlGroup>
-              <ReqoreInput customTheme={{ main: '#00e3e8' }} placeholder='Level 2 deep' />
-              <ReqoreControlGroup fixed>
-                <ReqoreButton disabled fixed id='test'>
-                  Level 3 deep and fixed
-                </ReqoreButton>
-              </ReqoreControlGroup>
-            </ReqoreControlGroup>
-            <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
-            <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
-          </ReqoreControlGroup>
-        </ReqoreControlGroup>
-        <ReqoreVerticalSpacer height={10} />
-        <ReqoreControlGroup {...args} stack>
-          <ReqoreButton
-            icon='PictureInPictureLine'
-            description='Here is a really weird and long description that needs to stretch the button a little bit so we can get some idea on how the other buttons are going to react.'
-            maxWidth='400px'
-          >
-            Please select
-          </ReqoreButton>
-          <ReqoreButton icon='AddLine' intent='info' />
-          <ReqoreButton>Edit</ReqoreButton>
-          <ReqoreButton icon='DeleteBinLine' intent='danger'>
-            Remove
-          </ReqoreButton>
-        </ReqoreControlGroup>
-        <ReqoreVerticalSpacer height={10} />
-        <ReqoreControlGroup {...args} stack fluid>
-          <ReqoreButton
-            icon='PictureInPictureLine'
-            description='Here is a really weird and long description that needs to stretch the button a little bit so we can get some idea on how the other buttons are going to react.'
-          >
-            Please select
-          </ReqoreButton>
-          <ReqoreButton icon='AddLine' intent='info' fixed />
-          <ReqoreButton fixed>Edit</ReqoreButton>
-          <ReqoreButton icon='DeleteBinLine' intent='danger' fixed>
-            Remove
-          </ReqoreButton>
-        </ReqoreControlGroup>
-      </>
-    );
-  }
-
-  if (args.responsive) {
-    return (
-      <div style={{ width: 600 }}>
-        <ReqoreControlGroup {...args} wrap={false}>
-          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-          <ReqoreControlGroup stack>
-            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup stack>
-            <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup stack>
-            <ReqoreControlGroup>
-              <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
-              <ReqoreControlGroup fixed>
-                <ReqoreButton disabled fixed id='test'>
-                  Level 3 deep and fixed
-                </ReqoreButton>
-              </ReqoreControlGroup>
-            </ReqoreControlGroup>
-            <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
-            <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
-          </ReqoreControlGroup>
-          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-        </ReqoreControlGroup>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <ReqoreControlGroup {...args}>
-        <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-        <ReqoreButton icon='PictureInPictureLine' fluid shrink={0}>
-          Fluid Button
-        </ReqoreButton>
-        <ReqoreButton
-          icon='PictureInPictureLine'
-          flat={false}
-          effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
-          description="With a description, it's a bit longer than the button itself"
-          fixed
-        >
-          Non flat fixed Button
-        </ReqoreButton>
-        <ReqoreControlGroup stack>
-          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-          <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-        </ReqoreControlGroup>
-        <ReqoreCheckbox
-          asSwitch
-          label='Switchy switch'
-          margin='both'
-          intent='warning'
-          checkedIcon='CheckFill'
-          checked
-          uncheckedIcon='CheckboxBlankLine'
-        />
-        <ReqoreInput icon='4KFill' value='Hello I am fluid' fluid />
-        <ReqoreControlGroup stack>
-          <ReqoreControlGroup>
-            <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
-            <ReqoreControlGroup fixed>
-              <ReqoreButton disabled fixed id='test'>
-                Level 3 deep and fixed
-              </ReqoreButton>
-            </ReqoreControlGroup>
-          </ReqoreControlGroup>
-          <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
-          <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
-        </ReqoreControlGroup>
-
-        <ReqoreButton minimal>Minimal</ReqoreButton>
-        <ReqoreTag label='smol tag' size='small' />
-      </ReqoreControlGroup>
-      <ReqoreVerticalSpacer height={15} />
-      <ReqoreControlGroup {...args} className='root-group' id='root-group'>
-        <ReqoreControlGroup intent='info' className='group-1' id='group-1-wrapper'>
-          <ReqoreControlGroup intent='info' className='group-1' id='group-1'>
-            <>
-              <ReqoreButton icon='PictureInPictureLine' id='group-1-button'>
-                Group 1
-              </ReqoreButton>
-              <ReqoreTag icon='PictureInPictureLine' label='Group 1' id='group-1-tag' />
-            </>
-          </ReqoreControlGroup>
-          <ReqoreControlGroup intent='pending' className='group-1-1' id='group-1-1'>
-            <ReqoreButton icon='PictureInPictureLine' id='group-1-1-button'>
-              Group 1-1
-            </ReqoreButton>
-            <ReqoreTag icon='PictureInPictureLine' label='Group 1-1' id='group-1-1-tag' />
-            <ReqoreDropdown
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-                {
-                  label: 'With right button',
-                  value: 'kek',
-                  icon: 'CheckDoubleLine',
-                },
-              ]}
-            >
-              Dropdown
-            </ReqoreDropdown>
-          </ReqoreControlGroup>
-        </ReqoreControlGroup>
-        <ReqoreButton icon='PictureInPictureLine' id='group-root-button'>
-          Root group
-        </ReqoreButton>
-        <ReqoreControlGroup intent='success' className='group-2' id='group-2'>
-          <>
-            <ReqoreButton icon='PictureInPictureLine' id='group-2-button' fixed>
-              Group 2
-            </ReqoreButton>
-            <ReqoreControlGroup intent='danger' className='group-3' id='group-3'>
-              <ReqoreButton icon='PictureInPictureLine' id='group-3-button-1'>
-                Group 3
-              </ReqoreButton>
-              <ReqoreButton icon='PictureInPictureLine' id='group-3-button-2'>
-                Group 3
-              </ReqoreButton>
-            </ReqoreControlGroup>
-          </>
-          <ReqoreCheckbox label='Group 2' margin='both' id='group-2-checkbox' />
-        </ReqoreControlGroup>
-        <ReqoreButton icon='PictureInPictureLine' id='group-root-button-2'>
-          Root group
-        </ReqoreButton>
-        <ReqoreControlGroup intent='warning' className='group-4' id='group-4'>
-          <ReqoreControlGroup id='group-4-1' fluid={false}>
-            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-1-tag' />
-            <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-1-input' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup id='group-4-3'>
-            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-3-tag' />
-            <>
-              <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-3-input' />
-              <ReqoreControlGroup id='group-5' intent='muted' fluid={false}>
-                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-1-tag' />
-                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-2-tag' />
-                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-3-tag' />
-                <ReqoreControlGroup id='group 6' intent='success'>
-                  <ReqoreButton fixed>Group 6</ReqoreButton>
-                </ReqoreControlGroup>
-              </ReqoreControlGroup>
-            </>
-          </ReqoreControlGroup>
-        </ReqoreControlGroup>
-      </ReqoreControlGroup>
-    </>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const Minimal: Story = {
-  render: Template,
-
-  args: {
-    minimal: true,
-  },
-};
-
-export const Fluid: Story = {
-  render: Template,
-
-  args: {
-    fluid: true,
-  },
-};
-
-export const Fill: Story = {
-  render: Template,
-
-  args: {
-    fill: true,
-  },
-};
-
-export const NotFlat: Story = {
-  render: Template,
-
-  args: {
-    flat: false,
-  },
-};
-
-export const Vertical: Story = {
-  render: Template,
-
-  args: {
-    vertical: true,
-  },
-};
-
-export const VerticalFluid: Story = {
-  render: Template,
-
-  args: {
-    vertical: true,
-    fluid: true,
-  },
-};
-
-export const VerticalStackedFluid: Story = {
-  render: Template,
-
-  args: {
-    vertical: true,
-    stack: true,
-    fluid: true,
-  },
-};
-
-export const Stacked: Story = {
-  render: Template,
-
-  args: {
-    stack: true,
-  },
-};
-
-export const BigGapSize: Story = {
-  render: Template,
-
-  args: {
-    gapSize: 'big',
-  },
-};
-
-export const NoWrap: Story = {
-  render: Template,
-
-  args: {
-    wrap: false,
-  },
-};
-
-export const HorizontalAlign: Story = {
-  render: Template,
-
-  args: {
-    vertical: true,
-    horizontalAlign: 'center',
-  },
-};
-
-export const VerticalAlign: Story = {
-  render: Template,
-
-  args: {
-    verticalAlign: 'flex-end',
-  },
-};
-
-export const Responsive: Story = {
-  render: Template,
-
-  args: {
-    responsive: true,
-  },
-};

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

@@ -1,294 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
-import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
-import { IReqoreInputProps } from '../../components/Input';
-import {
-  ReqoreButton,
-  ReqoreCollection,
-  ReqoreInput,
-  ReqorePanel,
-  ReqoreTabs,
-  ReqoreTabsContent,
-  useReqoreProperty,
-} from '../../index';
-import { StoryMeta } from '../utils';
-import { FlatArg, IntentArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreDrawerProps>();
-
-const meta = {
-  title: 'Dialogs/Drawer/Stories',
-  component: ReqoreDrawer,
-  parameters: {
-    chromatic: {
-      viewports: [450, 600, 1440],
-    },
-  },
-  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: 'auto',
-      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,
-  },
-  args: {
-    isOpen: true,
-    position: 'right',
-    resizable: true,
-    hidable: true,
-    size: 'auto',
-    minSize: '150px',
-    maxSize: '90vw',
-    blur: 3,
-    opacity: 1,
-    hasBackdrop: true,
-  },
-} as StoryMeta<typeof ReqoreDrawer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<typeof ReqoreDrawer> = (args) => {
-  const confirmAction = useReqoreProperty('confirmAction');
-
-  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}
-        onHideToggle={(isHidden) => console.log(isHidden)}
-        actions={[
-          {
-            responsive: false,
-            group: [
-              {
-                label: 'Non responsive',
-                icon: '24HoursFill',
-                customTheme: { main: '#eb0e8c' },
-              },
-              {
-                icon: 'FullscreenExitLine',
-                customTheme: { main: '#a40a62' },
-              },
-            ],
-          },
-          {
-            fixed: true,
-            group: [
-              { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
-              { icon: 'CopperCoinFill', intent: 'danger' },
-            ],
-          },
-          {
-            as: ReqoreInput,
-            props: {
-              placeholder: 'Custom action!',
-              icon: 'Search2Line',
-              minimal: false,
-            } as IReqoreInputProps,
-          },
-          {
-            label: 'More actions',
-            actions: [
-              { label: 'Sub Test', icon: 'FileDownloadLine' },
-              { label: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
-            ],
-            intent: 'info',
-          },
-        ]}
-        bottomActions={[
-          {
-            position: 'left',
-            intent: 'success',
-            group: [
-              { label: 'Test 1', icon: '24HoursFill' },
-              { label: 'Test 2', icon: '24HoursFill' },
-            ],
-          },
-          {
-            label: 'More actions',
-            position: 'right',
-            actions: [
-              { label: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
-              { label: 'Sub Test 2', icon: 'FileDownloadLine' },
-            ],
-          },
-        ]}
-      >
-        <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
-            <ReqoreCollection items={[{ label: 'Item 1' }, { label: 'Item 2' }]} />
-          </ReqoreTabsContent>
-        </ReqoreTabs>
-      </ReqoreDrawer>
-    </>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const Flat: Story = {
-  render: Template,
-
-  args: {
-    flat: true,
-  },
-};
-
-export const Floating: Story = {
-  render: Template,
-
-  args: {
-    floating: true,
-  },
-};
-
-export const Transparent: Story = {
-  render: Template,
-
-  args: {
-    opacity: 0.5,
-  },
-};
-
-export const WithSize: Story = {
-  render: Template,
-
-  args: {
-    size: '500px',
-  },
-};