@qoretechnologies/reqore 0.44.0 → 0.46.0

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

@@ -1,405 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
-import ReqoreButton from '../../components/Button';
-import { ReqoreControlGroup } from '../../index';
-import { StoryMeta } from '../utils';
-import { IconArg, SizeArg } from '../utils/args';
-
-const meta = {
-  title: 'Form/Button/Stories',
-  component: ReqoreButton,
-  argTypes: {
-    ...IconArg('icon', 'Icon'),
-    ...IconArg('rightIcon', 'Right Icon'),
-    ...SizeArg,
-  },
-  args: {
-    icon: '24HoursFill',
-    rightIcon: '24HoursFill',
-  },
-} as StoryMeta<typeof ReqoreButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
-  return (
-    <ReqoreControlGroup vertical gapSize='big'>
-      <ReqoreControlGroup size={buttonProps.size} wrap>
-        <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
-        <ReqoreButton {...buttonProps} />
-        <ReqoreButton
-          {...buttonProps}
-          icon='BankFill'
-          rightIcon={null}
-          iconsAlign='center'
-          style={{ width: '100px' }}
-        />
-        <ReqoreButton {...buttonProps}>Default</ReqoreButton>
-        <ReqoreButton {...buttonProps} wrap maxWidth='150px'>
-          Default wrapped button with long text
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} disabled>
-          Disabled
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} active tooltip='hello'>
-          Active
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal flat>
-          Minimal
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} icon={undefined} rightIcon={undefined} compact>
-          Compact
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} rightIcon={undefined} compact />
-        <ReqoreButton {...buttonProps} compact />
-        <ReqoreButton
-          {...buttonProps}
-          compact
-          icon='AirplayLine'
-          rightIcon='Building3Fill'
-          label='Compact'
-        />
-        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
-          Read only
-        </ReqoreButton>
-      </ReqoreControlGroup>
-      <ReqoreControlGroup size={buttonProps.size} wrap>
-        <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
-          Active Not Flat
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} flat={false}>
-          Not Flat
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          minimal
-          flat={false}
-          iconColor='#38fdb2'
-          leftIconColor='#33023c:lighten:3'
-          rightIconColor='#0a487b:lighten:3'
-        >
-          Minimal not flat
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
-          Read only not flat
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} disabled flat={false}>
-          Disabled not flat
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} maxWidth='150px'>
-          Max Width Button
-        </ReqoreButton>
-      </ReqoreControlGroup>
-      <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} verticalPadding='tiny'>
-          Vertical padding tiny
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} verticalPadding='small'>
-          Vertical padding small
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          verticalPadding='normal'
-          rightIcon={undefined}
-          badge={{ align: 'right', label: 'R' }}
-        >
-          Vertical padding
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} verticalPadding='big'>
-          Vertical padding big
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          verticalPadding='huge'
-          badge={10}
-          description='This is a description'
-        >
-          Vertical padding huge
-        </ReqoreButton>
-      </ReqoreControlGroup>
-      <ReqoreControlGroup fluid wrap>
-        <ReqoreButton
-          {...buttonProps}
-          fluid
-          badge={[
-            1,
-            { label: 'in da middle', align: 'center' },
-            { label: 'right align', align: 'right' },
-            2,
-          ]}
-        >
-          Positioned badges
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          fluid
-          badge={[1, { label: 'right align', align: 'right' }, 2]}
-        >
-          Positioned badges
-        </ReqoreButton>
-      </ReqoreControlGroup>
-
-      <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid textAlign='center'>
-          Fluid button with centered text
-        </ReqoreButton>
-      </ReqoreControlGroup>
-      <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center' badge='badge'>
-          Fluid button with centered text & icons
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          rightIcon={null}
-          fluid
-          textAlign='center'
-          iconsAlign='center'
-          badge={[{ label: 'test', align: 'right' }, 2]}
-        >
-          Fluid button with centered text & icons
-        </ReqoreButton>
-        <ReqoreButton {...buttonProps} icon={null} fluid textAlign='center' iconsAlign='center'>
-          Fluid button with centered text & icons
-        </ReqoreButton>
-      </ReqoreControlGroup>
-      <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          icon={undefined}
-          rightIcon={undefined}
-          textAlign='center'
-          maxWidth='250px'
-          badge='10'
-          wrap
-          description='I am a button with a center aligned text and description'
-        >
-          Center
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          textAlign='center'
-          maxWidth='200px'
-          badge="I'm a badge, baby"
-          wrap
-          description='I am a button with a center aligned text and description'
-        >
-          Center text with a longer text
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          textAlign='right'
-          badge="I'm a badge"
-          description='I am a button with a right aligned text and description'
-        >
-          Right text
-        </ReqoreButton>
-      </ReqoreControlGroup>
-      <ReqoreControlGroup wrap>
-        <ReqoreButton
-          {...buttonProps}
-          leftIconProps={{ rotation: 180 }}
-          rightIconProps={{ rotation: 270 }}
-          description='This is a very interesting description for a button, I like it very much'
-          iconColor='#38fdb2'
-        >
-          With Default Description
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          description='This is a very interesting description for a button, I like it very much'
-          maxWidth='200px'
-          badge={{
-            color: '#00fafd',
-            labelKey: 'Cool',
-            label: 1234,
-            actions: [{ icon: 'ShuffleLine', onClick: noop }],
-          }}
-        >
-          With description and max width
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          minimal
-          description='This is a very interesting description for a button, I like it very much'
-          maxWidth='200px'
-          labelEffect={{
-            gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
-          }}
-          descriptionEffect={{
-            gradient: { colors: { 0: '#fd7600', 90: '#c997ff' }, type: 'radial' },
-          }}
-          effect={{
-            gradient: {
-              colors: { 0: '#be00fd', 130: '#e70eeb' },
-              direction: 'to left bottom',
-              animate: 'hover',
-            },
-          }}
-          badge={{
-            effect: {
-              gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
-              uppercase: true,
-            },
-            labelKey: 'Cool',
-            label: 1234,
-            actions: [{ icon: 'ShuffleLine', onClick: noop }],
-          }}
-          wrap
-        >
-          With description and max width, wrapped
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          description='This is a very interesting description for a button, I like it very much'
-          wrap
-        />
-      </ReqoreControlGroup>
-      <ReqoreControlGroup wrap>
-        <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
-          Read only with badge
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          minimal
-          badge={20}
-          onClick={alert}
-          effect={{
-            gradient: { colors: { 90: '#ffe69c', 0: '#ff7818' }, type: 'radial' },
-          }}
-          labelEffect={{
-            gradient: { colors: { 0: '#ffe69c', 90: '#ff7818' }, type: 'radial' },
-          }}
-        >
-          Minimal with badge
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          badge={[
-            20,
-            {
-              effect: {
-                gradient: {
-                  colors: { 0: 'danger', 100: 'danger:darken:1:0.1' },
-                  direction: 'to right bottom',
-                },
-              },
-              labelKey: 'Cool',
-              label: 1234,
-              actions: [{ icon: 'ShuffleLine', onClick: noop }],
-            },
-          ]}
-          onClick={alert}
-        >
-          With multiple badges
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          badge={{
-            effect: {
-              gradient: { colors: { 0: '#00fafd', 100: '#eb0e8c' }, direction: 'to right bottom' },
-            },
-            labelKey: 'Cool',
-            label: 1234,
-            actions: [{ icon: 'ShuffleLine', onClick: noop }],
-          }}
-          onClick={alert}
-        >
-          With modified Badge
-        </ReqoreButton>
-      </ReqoreControlGroup>
-    </ReqoreControlGroup>
-  );
-};
-
-export const Default: Story = {
-  render: Template,
-};
-
-export const Info: Story = {
-  render: Template,
-
-  args: {
-    intent: 'info',
-  },
-};
-
-export const Success: Story = {
-  render: Template,
-
-  args: {
-    intent: 'success',
-  },
-};
-
-export const Warning: Story = {
-  render: Template,
-
-  args: {
-    intent: 'warning',
-  },
-};
-
-export const Pending: Story = {
-  render: Template,
-
-  args: {
-    intent: 'pending',
-  },
-};
-
-export const Danger: Story = {
-  render: Template,
-
-  args: {
-    intent: 'danger',
-  },
-};
-
-export const Muted: Story = {
-  render: Template,
-
-  args: {
-    intent: 'muted',
-  },
-};
-
-export const Effect: Story = {
-  render: Template,
-
-  args: {
-    effect: {
-      gradient: {
-        direction: 'to right bottom',
-        colors: { 0: '#33023c', 100: '#0a487b' },
-        animate: 'active',
-      },
-      spaced: 2,
-      uppercase: true,
-      weight: 'thick',
-      textSize: 'small',
-    },
-  },
-};
-
-export const GlobalEffect: Story = {
-  render: Template,
-
-  args: {
-    otherThemeOptions: {
-      buttons: {
-        gradient: true,
-        animate: 'active',
-      },
-    },
-  },
-};
-
-export const Pill: Story = {
-  render: Template,
-
-  args: {
-    pill: true,
-  },
-};

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

@@ -1,75 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
-import { StoryMeta } from '../utils';
-
-const meta = {
-  title: 'Form/Checkbox/Stories',
-  component: ReqoreCheckbox,
-} as StoryMeta<typeof ReqoreCheckbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<typeof Checkbox> = (args) => {
-  return (
-    <ReqoreControlGroup vertical>
-      <ReqoreControlGroup wrap>
-        <ReqoreCheckbox {...args} />
-        <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
-        <ReqoreCheckbox {...args} checked tooltip='I am checked' />
-        <ReqoreCheckbox {...args} disabled />
-        <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
-        <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
-      </ReqoreControlGroup>
-      <ReqoreVerticalSpacer height={10} />
-      <ReqoreControlGroup wrap>
-        <ReqoreCheckbox {...args} intent='info' checked />
-        <ReqoreCheckbox
-          {...args}
-          label='Label'
-          labelDetail='Detail'
-          labelDetailPosition='left'
-          labelEffect={{ gradient: { colors: { 0: 'danger:lighten:1', 100: '#ff6700' } } }}
-        />
-        <ReqoreCheckbox
-          {...args}
-          checked
-          tooltip='I am checked'
-          effect={{ gradient: { colors: { 0: '#00fafd', 100: '#ff00d0' } } }}
-        />
-        <ReqoreCheckbox {...args} disabled onText='yes' offText='no' />
-        <ReqoreCheckbox {...args} onText='yes' offText='no' />
-        <ReqoreCheckbox {...args} onText='yes' offText='no' checked />
-        <ReqoreCheckbox
-          {...args}
-          label='Label'
-          labelDetail='Detail'
-          labelPosition='left'
-          checkedIcon='EmotionHappyFill'
-          uncheckedIcon='EmotionSadFill'
-        />
-        <ReqoreCheckbox
-          {...args}
-          label='Read Only'
-          labelPosition='left'
-          readOnly
-          checked
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-        />
-      </ReqoreControlGroup>
-    </ReqoreControlGroup>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const Switch: Story = {
-  render: Template,
-
-  args: {
-    asSwitch: true,
-  },
-};