@qoretechnologies/reqore 0.44.0 → 0.46.0

package/src/stories/Icon/Icon.stories.tsx

@@ -1,162 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { ReqoreIcon, ReqorePanel } from '../../index';
-import { StoryMeta } from '../utils';
-
-const meta = {
-  title: 'Other/Icon/Stories',
-  component: ReqoreIcon,
-} as StoryMeta<typeof ReqoreIcon>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  render: () => {
-    return (
-      <>
-        <ReqorePanel label='Basic' flat minimal>
-          <ReqoreIcon icon='AccountCircleLine' size='12px' margin='both' />
-          <ReqoreIcon icon='4KFill' size='14px' margin='both' />
-          <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' margin='both' />
-          <ReqoreIcon icon='HotelFill' size='18px' margin='both' />
-          <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' margin='both' />
-          <ReqoreIcon
-            icon='SignalTowerFill'
-            size='20px'
-            color='#291133'
-            effect={{ sepia: true }}
-            margin='both'
-            tooltip={{ content: 'I have a tooltip', openOnMount: true }}
-          />
-          <ReqoreIcon
-            icon='SignalTowerFill'
-            size='20px'
-            color='#0c7052'
-            effect={{ blur: 1 }}
-            margin='both'
-          />
-          <ReqoreIcon
-            icon='SignalTowerFill'
-            size='20px'
-            color='#700c57'
-            effect={{ contrast: 150 }}
-            margin='both'
-          />
-          <ReqoreIcon
-            icon='SignalTowerFill'
-            size='20px'
-            color='#d5be0f'
-            effect={{ grayscale: true }}
-            margin='both'
-          />
-          <ReqoreIcon
-            icon='SignalTowerFill'
-            size='20px'
-            color='#0f5bd5'
-            effect={{ invert: true }}
-            margin='both'
-          />
-          <ReqoreIcon
-            icon='SignalTowerFill'
-            size='20px'
-            color='#ffffff'
-            effect={{ opacity: 0.5 }}
-            margin='both'
-          />
-          <ReqoreIcon
-            icon='SignalTowerFill'
-            size='20px'
-            color='#8d2a5c'
-            rotation={90}
-            margin='both'
-          />
-        </ReqorePanel>
-        <br />
-        <ReqorePanel label='Image' flat minimal>
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='20px'
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='40px'
-            rounded
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='30px'
-            effect={{ sepia: true }}
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='40px'
-            effect={{ grayscale: true }}
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='70px'
-            effect={{ blur: 1 }}
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='40px'
-            effect={{ contrast: 150 }}
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='40px'
-            effect={{ invert: true }}
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='40px'
-            effect={{ opacity: 0.5 }}
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='40px'
-            effect={{ saturate: 150 }}
-            margin='both'
-          />
-          <ReqoreIcon
-            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-            size='40px'
-            rotation={180}
-            margin='both'
-          />
-        </ReqorePanel>
-        <br />
-        <ReqorePanel label='Margined' flat minimal>
-          <ReqoreIcon icon='AccountCircleLine' />
-          No Margin
-          <div>
-            <ReqoreIcon icon='4KFill' margin='right' />
-            Right Margin
-          </div>
-          <div>
-            Left Margin
-            <ReqoreIcon
-              image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-              size='20px'
-              rounded
-              margin='left'
-            />
-          </div>
-          <div>
-            Both
-            <ReqoreIcon icon='HotelFill' margin='both' />
-            Sides
-          </div>
-        </ReqorePanel>
-      </>
-    );
-  },
-};

package/src/stories/Input/Input.stories.tsx

@@ -1,220 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
-import { ReqoreControlGroup } from '../../index';
-import { StoryMeta } from '../utils';
-import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
-
-const meta = {
-  title: 'Form/Input/Stories',
-  component: ReqoreInput,
-  argTypes: {
-    ...MinimalArg,
-    ...FlatArg,
-    ...SizeArg,
-    ...IconArg('icon', 'Icon'),
-  },
-  args: {
-    icon: 'SearchLine',
-  },
-} as StoryMeta<typeof ReqoreInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<typeof ReqoreInput> = (args: IReqoreInputProps) => {
-  const [value, setValue] = useState('Input value');
-
-  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  const handleValueClear = () => {
-    setValue('');
-  };
-
-  return (
-    <>
-      <ReqoreControlGroup wrap>
-        <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
-        <ReqoreInput
-          {...args}
-          placeholder='Minimal Input'
-          minimal
-          onChange={handleValueChange}
-          rightIcon='ClipboardLine'
-        />
-        <ReqoreInput
-          {...args}
-          placeholder='Flat Input'
-          flat
-          tooltip="I'm a tooltip"
-          onChange={handleValueChange}
-        />
-        <ReqoreInput
-          {...args}
-          iconColor='pending:lighten:2'
-          placeholder='Clearable Input'
-          onClearClick={handleValueClear}
-          onChange={handleValueChange}
-          leftIconProps={{ size: 'tiny' }}
-        />
-        <ReqoreInput
-          {...args}
-          iconColor='pending:lighten:2'
-          placeholder='Clearable Input w/ icon'
-          onClearClick={handleValueClear}
-          onChange={handleValueChange}
-          rightIcon='EraserFill'
-          rightIconColor='#8727b7'
-          focusRules={{ type: 'keypress', shortcut: '.', doNotInsertShortcut: true }}
-        />
-        <ReqoreInput {...args} placeholder='Disabled Input' disabled onChange={handleValueChange} />
-        <ReqoreInput
-          {...args}
-          placeholder='Read Only Input'
-          readOnly
-          rightIcon='Bus2Fill'
-          rightIconColor='info'
-          onChange={handleValueChange}
-        />
-      </ReqoreControlGroup>
-      <br />
-      <ReqoreControlGroup wrap>
-        <ReqoreInput
-          {...args}
-          placeholder='Reqore Input'
-          onChange={handleValueChange}
-          value={value}
-        />
-        <ReqoreInput
-          {...args}
-          placeholder='Minimal Input'
-          minimal
-          onChange={handleValueChange}
-          value={value}
-        />
-        <ReqoreInput
-          {...args}
-          placeholder='Flat Input'
-          flat
-          tooltip="I'm a tooltip"
-          onChange={handleValueChange}
-          rightIcon='DragMoveLine'
-          rightIconColor='#eb0e8c'
-          value={value}
-        />
-        <ReqoreInput
-          {...args}
-          placeholder='Clearable Input'
-          onClearClick={handleValueClear}
-          value={value}
-          focusRules={{ type: 'auto' }}
-          onChange={handleValueChange}
-        />
-        <ReqoreInput
-          {...args}
-          placeholder='Clearable Input w/ icon'
-          onClearClick={handleValueClear}
-          value={value}
-          rightIcon='FilePptFill'
-          rightIconColor='#508a90'
-          onChange={handleValueChange}
-        />
-        <ReqoreInput
-          {...args}
-          placeholder='Disabled Input'
-          disabled
-          onChange={handleValueChange}
-          value={value}
-        />
-        <ReqoreInput {...args} placeholder='Read Only Input' readOnly value={value} />
-      </ReqoreControlGroup>
-      <br />
-      <ReqoreControlGroup fluid>
-        <ReqoreInput
-          {...args}
-          placeholder='Fluid Input'
-          onChange={handleValueChange}
-          value={value}
-          focusRules={{ type: 'keypress', shortcut: 'k' }}
-        />
-      </ReqoreControlGroup>
-    </>
-  );
-};
-
-export const Basic: 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 Danger: Story = {
-  render: Template,
-
-  args: {
-    intent: 'danger',
-  },
-};
-
-export const Pending: Story = {
-  render: Template,
-
-  args: {
-    intent: 'pending',
-  },
-};
-
-export const Muted: Story = {
-  render: Template,
-
-  args: {
-    intent: 'muted',
-  },
-};
-
-export const Effect: Story = {
-  render: Template,
-
-  args: {
-    effect: {
-      gradient: {
-        colors: {
-          0: '#56345e',
-          100: 'transparent',
-        },
-      },
-    },
-  },
-};
-
-export const Pill: Story = {
-  render: Template,
-
-  args: {
-    pill: true,
-  },
-};