@qoretechnologies/reqore 0.42.0 → 0.44.0

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

@@ -0,0 +1,348 @@
+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/Dropdown/Dropdown.stories.tsx

@@ -176,11 +176,10 @@ const Template: StoryFn<typeof ReqoreDropdown<IReqoreButtonProps>> = (args) => {
         <ReqoreDropdown
           rightIcon='SunCloudyLine'
           caretPosition='right'
+          label='Custom icon with caret on right'
           {...args}
           iconColor='success:lighten:2'
-        >
-          Custom icon with caret on right
-        </ReqoreDropdown>
+        />
         <ReqoreDropdown
           items={[
             {
@@ -235,6 +234,7 @@ export const CustomComponent: Story = {
   args: {
     component: ReqoreInput,
     placeholder: 'Custom component',
+    label: undefined,
   },
 };
 

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

@@ -0,0 +1,173 @@
+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',
+        },
+      },
+    },
+  },
+};