@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/stories/DatePicker/DatePicker.stories.tsx

@@ -1,348 +0,0 @@
-import { expect } from '@storybook/jest';
-import { StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-import { size } from 'lodash';
-import { useState } from 'react';
-import ReqoreControlGroup from '../../components/ControlGroup';
-import { DatePicker } from '../../components/DatePicker';
-import { DEFAULT_INTENTS, TReqoreIntent } from '../../constants/theme';
-import { StoryMeta } from '../utils';
-import { FlatArg, IntentArg, MinimalArg, SizeArg } from '../utils/args';
-
-const meta = {
-  title: 'Form/DatePicker/Stories',
-  component: DatePicker,
-  argTypes: {
-    ...MinimalArg,
-    ...FlatArg,
-    ...SizeArg,
-    ...IntentArg,
-  },
-  parameters: {
-    chromatic: {
-      viewports: [1440],
-    },
-    mockdate: new Date('2024-04-10T08:00:00.000Z'),
-  },
-  args: {
-    fluid: false,
-    value: new Date(2024, 3, 10, 8, 0, 0),
-    popoverProps: {
-      openOnMount: process.env.NODE_ENV === 'production',
-    },
-    'aria-label': 'Datepicker',
-  },
-  render(args) {
-    const [value, setValue] = useState<Date | string>(args.value);
-    return (
-      <DatePicker
-        {...args}
-        value={value}
-        onChange={(v) => {
-          setValue(v);
-          args.onChange?.(v);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof DatePicker>;
-type Story = StoryObj<typeof meta>;
-
-const getDateElements = async (canvasElement: HTMLElement) => {
-  const canvas = within(canvasElement);
-  const month = await canvas.findByLabelText('month, Datepicker');
-  const day = await canvas.findByLabelText('day, Datepicker');
-  const year = await canvas.findByLabelText('year, Datepicker');
-  const hour = await canvas.findByLabelText('hour, Datepicker');
-  const minute = await canvas.findByLabelText('minute, Datepicker');
-  const popover = await canvasElement.querySelector('reqore-popover-content');
-  const input = await canvasElement.querySelector('input');
-
-  return {
-    month,
-    day,
-    year,
-    hour,
-    minute,
-    popover,
-    input,
-    canvas,
-  };
-};
-const getPopoverElements = async (canvasElement: HTMLElement) => {
-  const popover = canvasElement.querySelector('.reqore-popover-content');
-  const popoverCanvas = within(popover as HTMLElement);
-  const previousMonth = canvasElement.querySelector('button[aria-label="Previous"]');
-  const nextMonth = canvasElement.querySelector('button[aria-label="Next"]');
-  const hourTimeField = popoverCanvas.getByLabelText('hour, Time');
-  const minuteTimeField = popoverCanvas.getByLabelText('minute, Time');
-  const headingCanvas = within(canvasElement.querySelector('.reqore-panel .reqore-panel-title'));
-
-  return {
-    popoverCanvas,
-    headingCanvas,
-    popover,
-    previousMonth,
-    nextMonth,
-    hourTimeField,
-    minuteTimeField,
-  };
-};
-export default meta;
-export const Default: Story = {
-  args: {
-    value: new Date(2024, 4, 10, 8, 0, 0),
-  },
-  async play({ canvasElement }) {
-    const { month, year, day, hour, minute, input } = await getDateElements(canvasElement);
-
-    await expect(month).toBeInTheDocument();
-    await expect(day).toBeInTheDocument();
-    await expect(year).toBeInTheDocument();
-    await expect(hour).toBeInTheDocument();
-    await expect(minute).toBeInTheDocument();
-    await expect(input).toBeInTheDocument();
-
-    await expect(month).toHaveTextContent('05');
-    await expect(day).toHaveTextContent('10');
-    await expect(year).toHaveTextContent('2024');
-    await expect(hour).toHaveTextContent('08');
-    await expect(minute).toHaveTextContent('00');
-  },
-};
-
-export const WithAM_PM: Story = {
-  args: {
-    hourCycle: 12,
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const AM_PM = await canvas.findByLabelText('AM/PM, Datepicker');
-
-    await expect(AM_PM).toBeInTheDocument();
-  },
-};
-export const WithoutDefaultValue: Story = {
-  args: {
-    value: null,
-    popoverProps: {},
-  },
-  async play({ canvasElement }) {
-    const { month, year, day, hour, minute, input } = await getDateElements(canvasElement);
-    await expect(month).toHaveTextContent('mm');
-    await expect(day).toHaveTextContent('d');
-    await expect(year).toHaveTextContent('yyyy');
-    await expect(hour).toHaveTextContent('––');
-    await expect(minute).toHaveTextContent('––');
-
-    await userEvent.click(input);
-    const { headingCanvas, hourTimeField, minuteTimeField } =
-      await getPopoverElements(canvasElement);
-    const heading = headingCanvas.queryByText('April 2024');
-    await expect(heading).toBeInTheDocument();
-    await expect(hourTimeField).toHaveTextContent('––');
-    await expect(minuteTimeField).toHaveTextContent('––');
-  },
-};
-
-export const WithoutTimePicker: Story = {
-  args: {
-    granularity: 'day',
-    popoverProps: { openOnMount: true },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const hour = await canvas.queryByLabelText('hour, Datepicker');
-    const minute = await canvas.queryByLabelText('minute, Datepicker');
-    const timefield = canvasElement.querySelector('.reqore-popover-content .reqore-input');
-
-    await expect(hour).toBeNull();
-    await expect(minute).toBeNull();
-    await expect(timefield).toBeNull();
-  },
-};
-export const WithIntent: Story = {
-  args: {
-    popoverProps: {
-      openOnMount: false,
-    },
-  },
-  render(args, ctx) {
-    return (
-      <ReqoreControlGroup gapSize='big' vertical>
-        {Object.keys(DEFAULT_INTENTS)
-          .reverse()
-          .map((intent, index) =>
-            meta.render(
-              {
-                ...args,
-                intent: intent as TReqoreIntent,
-                pickerActiveDayProps: {
-                  intent: intent as TReqoreIntent,
-                },
-                popoverProps: {
-                  openOnMount: index === size(DEFAULT_INTENTS) - 1,
-                },
-              },
-              ctx
-            )
-          )}
-      </ReqoreControlGroup>
-    );
-  },
-};
-
-export const WithEffect: Story = {
-  args: {
-    pickerProps: {
-      contentEffect: {
-        gradient: {
-          colors: 'info',
-        },
-      },
-    },
-  },
-};
-export const Minimal: Story = {
-  args: { minimal: true },
-};
-export const Pill: Story = {
-  args: { pill: true },
-};
-export const WithTooltip: Story = {
-  args: {
-    tooltip: `Tooltip content`,
-  },
-};
-
-export const ValueCanBeTyped: Story = {
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-  args: {},
-  async play({ canvasElement }) {
-    const { month, year, day, hour, minute } = await getDateElements(canvasElement);
-
-    await userEvent.type(month, '05');
-    await userEvent.type(day, '15');
-    await userEvent.type(year, '2024');
-    await userEvent.type(hour, '08');
-    await userEvent.type(minute, '30');
-
-    await expect(month).toHaveTextContent('05');
-    await expect(day).toHaveTextContent('15');
-    await expect(year).toHaveTextContent('2024');
-    await expect(hour).toHaveTextContent('08');
-    await expect(minute).toHaveTextContent('30');
-  },
-};
-export const ValueCanBeCleared: Story = {
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-
-  async play({ canvasElement }) {
-    const { month, year, day, hour, minute } = await getDateElements(canvasElement);
-    const clearBtn = await canvasElement.querySelector('.reqore-clear-input-button');
-    await expect(clearBtn).toBeInTheDocument();
-    await userEvent.click(clearBtn);
-    await expect(month).toHaveTextContent('mm');
-    await expect(day).toHaveTextContent('dd');
-    await expect(year).toHaveTextContent('yyyy');
-    await expect(hour).toHaveTextContent('––');
-    await expect(minute).toHaveTextContent('––');
-  },
-};
-export const ValueCanBeChosenFromPopover: Story = {
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-  args: {
-    popoverProps: {},
-  },
-  async play({ canvasElement }) {
-    const { month, year, day, hour, minute, input } = await getDateElements(canvasElement);
-    await userEvent.click(input);
-    const { popover, popoverCanvas, nextMonth } = await getPopoverElements(canvasElement);
-    await expect(popover).toBeInTheDocument();
-    await userEvent.click(nextMonth);
-    const cell = popoverCanvas.getByText('25');
-    await userEvent.click(cell);
-    await expect(month).toHaveTextContent('05');
-    await expect(day).toHaveTextContent('25');
-    await expect(year).toHaveTextContent('2024');
-    await expect(hour).toHaveTextContent('08');
-    await expect(minute).toHaveTextContent('00');
-  },
-};
-
-export const CurrentCalendarMonthCanBeChanged: Story = {
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-  args: {
-    popoverProps: {},
-  },
-  async play({ canvasElement }) {
-    const { input } = await getDateElements(canvasElement);
-    await userEvent.click(input);
-    const { popover, headingCanvas, nextMonth, previousMonth } =
-      await getPopoverElements(canvasElement);
-    await expect(popover).toBeInTheDocument();
-    await userEvent.click(nextMonth);
-    let heading = headingCanvas.queryByText('May 2024');
-    await expect(heading).toBeInTheDocument();
-
-    await userEvent.click(previousMonth);
-    heading = headingCanvas.queryByText('April 2024');
-    await expect(heading).toBeInTheDocument();
-  },
-};
-export const TimeCanBeChangedFromPopover: Story = {
-  args: {
-    popoverProps: {},
-  },
-  async play({ canvasElement }) {
-    const { input, hour, minute } = await getDateElements(canvasElement);
-    await userEvent.click(input);
-    const { hourTimeField, minuteTimeField } = await getPopoverElements(canvasElement);
-
-    await userEvent.type(hourTimeField, '10');
-    await userEvent.type(minuteTimeField, '15');
-
-    await expect(hour).toHaveTextContent('10');
-    await expect(minute).toHaveTextContent('15');
-  },
-};
-export const ShouldSaveTimeWhenDateValueIsNull: Story = {
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-  args: {
-    value: null,
-    popoverProps: {},
-  },
-  async play({ canvasElement }) {
-    const { input } = await getDateElements(canvasElement);
-
-    await userEvent.click(input);
-    const { month, day, year, hour, minute } = await getDateElements(canvasElement);
-    const { hourTimeField, minuteTimeField } = await getPopoverElements(canvasElement);
-    await userEvent.type(hourTimeField, '08');
-    await userEvent.type(minuteTimeField, '15');
-    await userEvent.click(canvasElement);
-    await userEvent.click(input);
-    await expect(hourTimeField).toHaveTextContent('08');
-    await expect(minuteTimeField).toHaveTextContent('15');
-
-    const { popoverCanvas } = await getPopoverElements(canvasElement);
-
-    const cell = popoverCanvas.getByText('25');
-    await userEvent.click(cell);
-    await expect(month).toHaveTextContent('04');
-    await expect(day).toHaveTextContent('25');
-    await expect(year).toHaveTextContent('2024');
-    await expect(hour).toHaveTextContent('08');
-    await expect(minute).toHaveTextContent('15');
-  },
-};

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',
-  },
-};