@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -1,212 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import ReqoreRadioGroup, { IReqoreRadioGroupProps } from '../../components/RadioGroup';
-import { StoryMeta } from '../utils';
-import { DisabledArg, SizeArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreRadioGroupProps>();
-
-const meta = {
-  title: 'Form/Radio Group/Stories',
-  component: ReqoreRadioGroup,
-  argTypes: {
-    ...createArg('asSwitch', {
-      type: 'boolean',
-      defaultValue: false,
-      name: 'As Switch',
-      description: 'If the radio group should be rendered as a switch',
-    }),
-    ...SizeArg,
-    ...DisabledArg,
-  },
-} as StoryMeta<typeof ReqoreRadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) => {
-  const [selected, setSelected] = useState(null);
-
-  return (
-    <ReqoreRadioGroup
-      {...args}
-      items={[
-        {
-          label: 'Option 1',
-          value: 'opt1',
-        },
-        {
-          label: 'Option 2',
-          value: 'opt2',
-          onText: 1,
-          offText: 0,
-        },
-        {
-          divider: true,
-          label: 'Intents',
-        },
-        {
-          label: 'Danger option',
-          value: 'danger',
-          intent: 'danger',
-        },
-        {
-          label: 'Success option with left margin',
-          value: 'sucess',
-          intent: 'success',
-          margin: 'left',
-        },
-        {
-          label: 'Pending option',
-          value: 'pending',
-          intent: 'pending',
-        },
-        {
-          label: 'Info option',
-          value: 'info',
-          intent: 'info',
-        },
-        {
-          label: 'Warning option',
-          value: 'warning',
-          intent: 'warning',
-        },
-
-        {
-          label: 'Effect option',
-          labelPosition: 'left',
-          value: 'effect',
-          effect: {
-            gradient: {
-              colors: {
-                0: 'info',
-                100: 'success',
-              },
-            },
-          },
-        },
-        {
-          label: 'Effect option with main color gradient and hover animation',
-          value: 'effect2',
-          effect: {
-            gradient: {
-              colors: 'main',
-              animate: 'hover',
-            },
-          },
-        },
-        {
-          label: 'Text effect & custom theme option',
-          value: 'textEffect',
-          customTheme: {
-            main: '#110134',
-          },
-          onText: 'On',
-          offText: 'Off',
-          switchTextEffect: {
-            gradient: {
-              colors: {
-                0: 'warning',
-                100: 'pending',
-              },
-            },
-          },
-        },
-        {
-          divider: true,
-          label: 'Divider',
-        },
-        {
-          label: 'Beautiful option 3 with gradient effect',
-          value: 'opt3',
-          labelEffect: {
-            gradient: {
-              colors: {
-                0: 'info',
-                100: 'info:lighten:3',
-              },
-            },
-            weight: 'thick',
-          },
-        },
-        {
-          label: 'Custom Icons Option',
-          value: 'customIconsOpt',
-          checkedIcon: 'EmotionHappyLine',
-          uncheckedIcon: 'EmotionSadLine',
-        },
-        {
-          label: 'Custom Image Option',
-          value: 'customOpt',
-          labelEffect: {
-            glow: {
-              color: 'danger',
-              blur: 2,
-            },
-          },
-          image:
-            'https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4',
-        },
-        {
-          divider: true,
-        },
-        {
-          label: 'Read Only Option',
-          value: 'opt4',
-          readOnly: true,
-        },
-        {
-          label: 'Disabled Option',
-          value: 'opt5',
-          disabled: true,
-          labelEffect: {
-            glow: {
-              color: '#ffffff',
-              blur: 0,
-            },
-          },
-        },
-      ]}
-      onSelectClick={(value) => setSelected(value)}
-      selected={selected}
-    />
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const Horizontal: Story = {
-  render: Template,
-
-  args: {
-    vertical: false,
-  },
-};
-
-export const Switch: Story = {
-  render: Template,
-
-  args: {
-    asSwitch: true,
-  },
-};
-
-export const WithoutMargin: Story = {
-  render: Template,
-
-  args: {
-    margin: 'none',
-  },
-};
-
-export const WithTexts: Story = {
-  render: Template,
-
-  args: {
-    asSwitch: true,
-    onText: 'True',
-    offText: 'False and wrong',
-  },
-};

package/src/stories/Slider/Slider.stories.tsx

@@ -1,173 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import ReqoreControlGroup from '../../components/ControlGroup';
-import ReqoreSlider from '../../components/Slider';
-import { StoryMeta } from '../utils';
-import { DisabledArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
-
-const meta = {
-  title: 'Form/Slider/Stories',
-  component: ReqoreSlider,
-  argTypes: {
-    ...MinimalArg,
-    ...SizeArg,
-    ...DisabledArg,
-    ...IconArg('icon', 'Icon'),
-    ...IconArg('rightIcon', 'Right Icon'),
-    fluid: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-    labelsPosition: {
-      control: 'select',
-      defaultValue: 'top',
-      options: ['top', 'bottom'],
-    },
-  },
-  args: {
-    value: [2, 9.6],
-    min: 0,
-    max: 10,
-    fluid: true,
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <>
-        <ReqoreControlGroup style={{ width: '100%' }} vertical gapSize='huge'>
-          <ReqoreSlider {...args} value={value[0]} onChange={(min) => setValue([min, value[1]])} />
-
-          <ReqoreSlider {...args} value={value} onChange={setValue} />
-          <ReqoreControlGroup gapSize='huge'>
-            <ReqoreSlider
-              {...args}
-              orientation='vertical'
-              value={value[0]}
-              onChange={(min) => setValue([min, value[1]])}
-            />
-            <ReqoreSlider {...args} orientation='vertical' value={value} onChange={setValue} />
-          </ReqoreControlGroup>
-        </ReqoreControlGroup>
-      </>
-    );
-  },
-} as StoryMeta<typeof ReqoreSlider>;
-type Story = StoryObj<typeof meta>;
-
-export default meta;
-export const Default: Story = {};
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const WithIcons: Story = {
-  args: {
-    icon: 'VolumeDownLine',
-    rightIcon: 'VolumeUpLine',
-  },
-};
-export const WithIntent: Story = {
-  args: {
-    intent: 'success',
-  },
-  render(args, ctx) {
-    return (
-      <ReqoreControlGroup vertical gapSize='huge'>
-        {meta.render({ ...args, intent: 'info' }, ctx)}
-        {meta.render({ ...args, intent: 'success', showLabels: true }, ctx)}
-        {meta.render(
-          {
-            ...args,
-            intent: 'warning',
-            showLabels: true,
-            minLabelProps: { intent: 'info' },
-            icon: 'WeiboFill',
-          },
-          ctx
-        )}
-        {meta.render({ ...args, intent: 'danger' }, ctx)}
-      </ReqoreControlGroup>
-    );
-  },
-};
-export const WithLabels: Story = {
-  args: {
-    showLabels: true,
-  },
-};
-export const WithLabelsBelow: Story = {
-  args: {
-    showLabels: true,
-    labelsPosition: 'bottom',
-  },
-};
-export const WithLabelsAndIcons: Story = {
-  args: {
-    ...WithLabels.args,
-    ...WithIcons.args,
-  },
-};
-
-export const WithCurrentValueOverThumb: Story = {
-  args: {
-    ...WithLabels.args,
-    ...WithIcons.args,
-    displayCurrentValueOverThumb: true,
-  },
-};
-
-export const WithSize: Story = {
-  args: {
-    ...WithLabels.args,
-    ...WithIcons.args,
-    size: 'small',
-  },
-};
-
-export const WithEffect: Story = {
-  args: {
-    showLabels: true,
-    effect: {
-      gradient: {
-        direction: 'to right bottom',
-        colors: { 0: '#ca74da', 100: '#521b6e' },
-        animate: 'active',
-      },
-      spaced: 2,
-      uppercase: true,
-      weight: 'thick',
-      textSize: 'small',
-    },
-
-    rangeProps: {
-      effect: {
-        gradient: {
-          direction: 'to right bottom',
-          colors: { 0: '#f9f9f9', 100: '#ca55a9' },
-          animate: 'always',
-        },
-      },
-    },
-    thumbProps: {
-      effect: {
-        gradient: {
-          direction: 'to right bottom',
-          colors: { 0: '#f9f9f9', 100: '#ca55a9' },
-          animate: 'active',
-        },
-      },
-    },
-
-    currentMaxLabelProps: {
-      effect: {
-        gradient: {
-          type: 'radial',
-          colors: { 0: '#41baea', 100: '#80ffd9' },
-          animate: 'hover',
-        },
-      },
-    },
-  },
-};

package/src/stories/Spacer/Spacer.stories.tsx

@@ -1,100 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import {
-  IReqoreSpacerProps,
-  ReqoreHorizontalSpacer,
-  ReqoreSpacer,
-  ReqoreVerticalSpacer,
-} from '../../components/Spacer';
-import { ReqorePanel } from '../../index';
-import { StoryMeta } from '../utils';
-
-const meta = {
-  title: 'Utilities/Spacer/Stories',
-  component: ReqoreSpacer,
-} as StoryMeta<typeof ReqoreSpacer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<IReqoreSpacerProps> = () => {
-  return (
-    <>
-      <ReqorePanel label='Horizontal'>
-        This is a horizontal spacer with <ReqoreHorizontalSpacer width={50} /> width of 50px
-        <br />
-        <br />
-        This is a horizontal spacer with <ReqoreHorizontalSpacer
-          width={10}
-          lineSize='normal'
-        />{' '}
-        width of 10px and lineSize of normal
-        <br />
-        <br />
-        This is a horizontal spacer with <ReqoreHorizontalSpacer width={50} height={100} /> width of
-        50px and height of 100px
-        <br />
-        <br />
-        This is a horizontal spacer with{' '}
-        <ReqoreHorizontalSpacer width={50} height={50} lineSize='tiny' intent='info' /> width of
-        50px and height of 50px and lineSize of tiny and intent info
-        <br />
-        <br />
-        This is a horizontal spacer with{' '}
-        <ReqoreHorizontalSpacer
-          width={50}
-          lineSize='huge'
-          intent='info'
-          effect={{
-            gradient: {
-              colors: { 0: 'danger:lighten:2', 100: 'danger:darken:2' },
-              animate: 'always',
-              direction: 'to bottom',
-            },
-          }}
-        />{' '}
-        width of 30px and height of auto and lineSize of huge and an effect & animation
-      </ReqorePanel>
-      <ReqoreVerticalSpacer height={10} />
-      <ReqorePanel label='Vertical'>
-        This is a vertical spacer with <ReqoreVerticalSpacer height={50} /> height of 50px
-        <br />
-        <br />
-        This is a vertical spacer with <ReqoreVerticalSpacer height={10} lineSize='normal' /> height
-        of 10px and lineSize of normal
-        <br />
-        <br />
-        This is a vertical spacer with <ReqoreVerticalSpacer height={50} width={100} /> height of
-        50px and width of 100px
-        <br />
-        <br />
-        This is a vertical spacer with{' '}
-        <ReqoreVerticalSpacer width={50} height={50} lineSize='tiny' intent='info' /> width of 50px
-        and height of 50px and lineSize of tiny and intent info
-        <br />
-        <br />
-        This is a vertical spacer with{' '}
-        <ReqoreVerticalSpacer
-          height={50}
-          lineSize='tiny'
-          effect={{
-            gradient: {
-              colors: { 0: 'success:lighten:2', 100: 'success:darken' },
-              animate: 'always',
-              animationSpeed: 5,
-              type: 'radial',
-            },
-            glow: {
-              color: 'success',
-              blur: 20,
-            },
-          }}
-        />{' '}
-        height of 50px and width of auto and lineSize of tiny and an effect & animation
-      </ReqorePanel>
-    </>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};

package/src/stories/Spinner/Spinner.stories.tsx

@@ -1,82 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { IReqoreSpinnerProps, ReqoreSpinner } from '../../components/Spinner';
-import { ReqoreControlGroup } from '../../index';
-import { StoryMeta } from '../utils';
-
-const meta = {
-  title: 'Utilities/Spinner/Stories',
-  component: ReqoreSpinner,
-} as StoryMeta<typeof ReqoreSpinner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<IReqoreSpinnerProps> = (args) => {
-  return (
-    <ReqoreControlGroup vertical gapSize='huge'>
-      <ReqoreSpinner {...args}>{args.children}</ReqoreSpinner>
-      <ReqoreSpinner type={2} {...args}>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner type={3} {...args}>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner type={4} {...args}>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner type={5} {...args}>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner intent='info' {...args}>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner type={2} size='small' {...args}>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner {...args} type={3} iconColor='success:lighten:2' size='50px'>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner
-        {...args}
-        type={4}
-        iconColor='#f21616'
-        labelEffect={{
-          gradient: { colors: 'warning' },
-          uppercase: true,
-          spaced: 2,
-          textSize: 'small',
-        }}
-        size='huge'
-      >
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner {...args} type={5} iconColor='#987df4'>
-        {args.children}
-      </ReqoreSpinner>
-      <ReqoreSpinner {...args} type={5} effect={{ blur: 2 }} iconColor='pending'>
-        {args.children}
-      </ReqoreSpinner>
-    </ReqoreControlGroup>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const WithLabel: Story = {
-  render: Template,
-
-  args: {
-    children: 'Loading...',
-  },
-};
-
-export const Centered: Story = {
-  render: Template,
-
-  args: {
-    children: 'Loading...',
-    centered: true,
-  },
-};