@itcase/ui 1.3.11 → 1.3.13

package/dist/stories/Chips.stories.js

@@ -1,106 +0,0 @@
-import { Icon } from '../../Icon'
-import { Chips, chipsConfig } from '../Chips'
-import { chipsAppearance } from '../Chips.appearance'
-import { argTypes } from './args'
-
-chipsConfig.setAppearance(chipsAppearance)
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  component: Chips,
-  parameters: {
-    controls: {
-      exclude: [
-        'borderDesktop',
-        'borderMobile',
-        'borderTablet',
-        'borderTypeDesktop',
-        'borderTypeMobile',
-        'borderTypeTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'fillHover',
-        'labelSizeDesktop',
-        'labelSizeMobile',
-        'labelSizeTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Chips ',
-}
-
-export const Default = {
-  args: {
-    appearance: 'accent',
-    label: 'Chips',
-    labelTextSize: 'xxl',
-    shape: 'rounded',
-    size: 'xxl',
-  },
-  argTypes: {
-    appearance: {
-      control: 'inline-radio',
-      options: [
-        null,
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-      ],
-    },
-  },
-}
-
-export const Accent = {
-  args: {
-    ...Default.args,
-    children: <Icon iconFill="accentItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
-    appearance: 'accent',
-  },
-}
-export const Primary = {
-  args: {
-    ...Default.args,
-    children: <Icon iconFill="primaryItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
-    appearance: 'primary',
-  },
-}
-export const Secondary = {
-  args: {
-    ...Default.args,
-    children: <Icon iconFill="secondaryItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
-    appearance: 'secondary',
-  },
-}
-export const SurfacePrimary = {
-  args: {
-    ...Default.args,
-    children: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
-    appearance: 'surfacePrimary',
-  },
-}
-export const SurfaceSecondary = {
-  args: {
-    ...Default.args,
-    children: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
-    appearance: 'surfaceSecondary',
-  },
-}
-export const SurfaceTertiary = {
-  args: {
-    ...Default.args,
-    children: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
-    appearance: 'surfaceTertiary',
-  },
-}

package/dist/stories/Choice.stories.js

@@ -1,115 +0,0 @@
-import {
-  borderColorProps,
-  borderWidthProps,
-  fillHoverProps,
-  fillProps,
-  shapeProps,
-  textColorActiveProps,
-  textColorProps,
-  textSizeProps,
-} from '../../../constants'
-import { Choice } from '../Choice'
-
-export default {
-  argTypes: {
-    borderWidth: {
-      control: 'inline-radio',
-      options: borderWidthProps,
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    fillActive: {
-      control: 'select',
-      options: fillProps,
-    },
-    fillActiveHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-    fillHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-    labelTextActiveColor: {
-      control: 'select',
-      options: textColorActiveProps,
-    },
-    labelTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    labelTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    name: {
-      if: { arg: 'advancedProps' },
-    },
-    setActiveSegment: {
-      if: { arg: 'advancedProps' },
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['tiny', 'compact', 'normal'],
-    },
-    type: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Choice,
-  parameters: {
-    controls: {
-      exclude: [
-        'fill',
-        'icon',
-        'iconSize',
-        'iconItemFillHover',
-        'firstName',
-        'secondName',
-        'textColor',
-        'textSize',
-        'textWeight',
-      ],
-    },
-  },
-  title: 'Atoms / Choice',
-}
-
-export const Default = {
-  args: {
-    borderColor: 'surfaceBorderTertiary',
-    active: {
-      value: 1,
-    },
-    fill: 'surfacePrimary',
-    fillActive: 'surfacePrimaryActive',
-    fillActiveHover: 'surfacePrimaryActiveHover',
-    fillHover: 'surfacePrimaryHover',
-    labelTextActiveColor: 'surfaceTextPrimary',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 'm',
-    options: [
-      { label: 'Label 1', value: 1 },
-      { label: 'Label 2', value: 2 },
-      { label: 'Label 3', value: 3 },
-      { label: 'Label 4', value: 4 },
-      { label: 'Label 5', value: 5 },
-    ],
-    shape: 'rounded',
-    size: 'normal',
-  },
-}

package/dist/stories/Code.stories.js

@@ -1,96 +0,0 @@
-import {
-  borderColorHoverProps,
-  borderColorProps,
-  borderWidthProps,
-  fillProps,
-  textColorProps,
-  textSizeProps,
-} from '../../../constants'
-import { Code } from '../Code'
-
-export default {
-  args: {
-    inputCount: 3,
-  },
-  argTypes: {
-    gap: {
-      control: { max: 100, min: 1, step: 1, type: 'number' },
-    },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    inputBorderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    inputBorderColorHover: {
-      control: 'inline-radio',
-      options: borderColorHoverProps,
-    },
-    inputBorderFocusColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    inputBorderWidth: {
-      control: 'inline-radio',
-      options: borderWidthProps,
-    },
-    inputCaretColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    inputCount: {
-      control: { max: 12, min: 4, step: 1, type: 'number' },
-    },
-    inputFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    inputFillHover: {
-      control: 'select',
-      options: fillProps,
-    },
-    inputPlaceholder: {
-      control: { max: 9, min: 0, step: 1, type: 'number' },
-    },
-    inputShape: {
-      control: 'inline-radio',
-      options: ['rounded', 'underline'],
-    },
-    inputSize: {
-      control: 'inline-radio',
-      options: ['normal', 'compact'],
-    },
-    inputTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    inputTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-  },
-  component: Code,
-  parameters: {
-    controls: {
-      exclude: [
-        'inputBorderColorHover',
-        'inputBorderFocusColor',
-        'inputCaretColor',
-        'inputPlaceholder',
-        'inputType',
-        'value',
-      ],
-    },
-  },
-  title: 'Atoms / Code',
-}
-
-export const Default = {}

package/dist/stories/Columns.stories.js

@@ -1,80 +0,0 @@
-import React from 'react'
-
-import { Group } from '../../Group'
-import { Text } from '../../Text'
-import { argTypes } from './args'
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  component: Group,
-  render: ({ ...args }) => (
-    <Group
-      width={args.width}
-      height={args.height}
-      fill={args.fill}
-      padding={args.padding}
-      borderColor={args.borderColor}
-      columns={args.columns}
-      direction={args.direction}
-      gap={args.gap}
-    >
-      <Group height="60" fill="accentPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </Group>
-      <Group height="60" fill="primaryPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </Group>
-      <Group height="60" fill="secondaryPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </Group>
-      <Group height="60" fill="infoPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </Group>
-      <Group height="60" fill="surfaceQuaternary" padding="20" textAlign="center">
-        <Text size="xl" textColor="accentTextPrimary">
-          5
-        </Text>
-      </Group>
-    </Group>
-  ),
-  title: 'Layout / Group / Variants / Columns',
-}
-
-const Default = {
-  width: '500',
-  padding: '20',
-  gap: 10,
-  borderColor: 'surfaceBorderPrimary',
-  fill: 'surfacePrimary',
-}
-
-export const TwoColumns = {
-  args: {
-    ...Default.args,
-    columns: 2,
-  },
-}
-
-export const ThreeColumns = {
-  args: {
-    ...Default.args,
-    columns: 3,
-  },
-}
-
-export const FiveColumns = {
-  args: {
-    ...Default.args,
-    columns: 5,
-  },
-}

package/dist/stories/DatePicker.stories.js

@@ -1,171 +0,0 @@
-import { useState } from 'react'
-
-import { defaultDatepickerProps, defaultInputProps } from '../../../config/forms'
-import {
-  fillProps,
-  iconSizeProps,
-  textColorHoverProps,
-  textColorProps,
-  textSizeProps,
-} from '../../../constants'
-// import { icon16 } from '../../../___icons'
-import { Button } from '../../Button'
-import { DatePickerInput } from '../DatePicker'
-
-export default {
-  args: {
-    clearLabel: '',
-    clearLabelTextColor: 'surfaceTextPrimary',
-    clearLabelTextColorHover: 'surfaceTextPrimaryHover',
-    clearLabelTextSize: 'm',
-    datePickerProps: {
-      ...defaultDatepickerProps,
-      isClearable: true,
-      isStartDefaultNull: true,
-      readOnly: false,
-      onKeyDown: (e) => {
-        e.preventDefault()
-      },
-    },
-    inputProps: defaultInputProps,
-  },
-  argTypes: {
-    clearIconItemFill: {
-      control: 'select',
-      if: { arg: 'clearIconSrc', neq: null },
-      options: fillProps,
-    },
-    clearIconSize: {
-      control: 'inline-radio',
-      if: { arg: 'clearIconSrc', neq: null },
-      options: iconSizeProps,
-    },
-    clearIconSrc: {
-      control: 'inline-radio',
-      options: [null, 'assets/16/Clear.svg'],
-    },
-    clearLabelTextColor: {
-      control: 'select',
-      if: { arg: 'clearLabel', neq: '' },
-      options: textColorProps,
-    },
-    clearLabelTextColorHover: {
-      control: 'select',
-      if: { arg: 'clearLabel', neq: '' },
-      options: textColorHoverProps,
-    },
-    clearLabelTextSize: {
-      control: 'select',
-      if: { arg: 'clearLabel', neq: '' },
-      options: textSizeProps,
-    },
-  },
-  component: (props) => {
-    const [value, setValue] = useState(undefined)
-    return <DatePickerInput {...props} value={value} onChange={setValue} />
-  },
-  parameters: {
-    docs: {
-      story: {
-        iframeHeight: 900,
-        inline: false,
-      },
-    },
-  },
-  title: 'Molecules / DatePicker',
-}
-
-export const Default = {
-  args: {},
-}
-
-export const Date = {
-  args: {
-    datePickerProps: defaultDatepickerProps,
-  },
-}
-
-export const ClearIcon = {
-  args: {
-    clearIcon: icon16.Clear,
-    clearIconItemFill: 'surfaceItemTertiary',
-    clearIconItemFillHover: 'surfaceItemPrimary',
-    clearIconSize: 16,
-    datePickerProps: {
-      ...defaultDatepickerProps,
-      isClearable: true,
-      isStartDefaultNull: true,
-      readOnly: false,
-      onKeyDown: (e) => {
-        e.preventDefault()
-      },
-    },
-  },
-}
-
-export const ClearLabel = {
-  args: {
-    clearLabel: 'Clear',
-    clearLabelTextColor: 'surfaceTextPrimary',
-    clearLabelTextColorHover: 'surfaceTextAccent',
-    clearLabelTextSize: 'm',
-    datePickerProps: {
-      ...defaultDatepickerProps,
-      isClearable: true,
-      isStartDefaultNull: true,
-      readOnly: false,
-      onKeyDown: (e) => {
-        e.preventDefault()
-      },
-    },
-  },
-}
-
-export const DateTime = {
-  args: {
-    datePickerProps: {
-      ...defaultDatepickerProps,
-      dateFormat: 'dd-MM-yyyy hh:mm',
-      showTimeSelect: true,
-      timeCaption: 'Время',
-      timeFormat: 'p',
-      timeIntervals: 15,
-    },
-  },
-}
-
-export const DateMultiple = {
-  args: {
-    datePickerProps: {
-      ...defaultDatepickerProps,
-      monthsShown: 2,
-      placeholderText: 'Start – End (m/d/yyyy)',
-      selectsRange: true,
-    },
-  },
-}
-
-export const DateButton = {
-  args: {
-    datePickerProps: {
-      ...defaultDatepickerProps,
-      customTimeInput: (
-        <Button
-          width="fill"
-          labelTextSize="l"
-          appearance="accent"
-          label="OK"
-          shape="rounded"
-          size="xl"
-        />
-      ),
-      dateFormat: 'dd-MM-yyyy hh:mm',
-      showTimeInput: true,
-      showTimeSelect: true,
-      timeCaption: 'Время',
-      timeFormat: 'p',
-      timeInputLabel: null,
-      timeIntervals: 15,
-    },
-  },
-}

package/dist/stories/Direction.stories.js

@@ -1,93 +0,0 @@
-import { Group } from '../../Group'
-import { Text } from '../../Text'
-import { argTypes } from './args'
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  component: Group,
-  render: ({ ...args }) => (
-    <Group
-      width={args.width}
-      height={args.height}
-      fill={args.fill}
-      padding={args.padding}
-      borderColor={args.borderColor}
-      direction={args.direction}
-    >
-      <Group width="60" height="60" fill="accentPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </Group>
-      <Group width="60" height="60" fill="primaryPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="primaryTextPrimary">
-          2
-        </Text>
-      </Group>
-      <Group width="60" height="60" fill="secondaryPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="secondaryTextPrimary">
-          3
-        </Text>
-      </Group>
-      <Group width="60" height="60" fill="infoPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="infoTextPrimary">
-          4
-        </Text>
-      </Group>
-    </Group>
-  ),
-  title: 'Layout / Group / Variants / Direction',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    padding: '20',
-    borderColor: 'surfaceBorderPrimary',
-    fill: 'surfacePrimary',
-  },
-}
-
-export const Row = {
-  args: {
-    ...Default.args,
-    direction: 'row',
-  },
-}
-
-export const RowReverse = {
-  args: {
-    ...Default.args,
-    direction: 'row-reverse',
-  },
-}
-
-export const Column = {
-  args: {
-    ...Default.args,
-    direction: 'column',
-  },
-}
-
-export const ColumnReverse = {
-  args: {
-    ...Default.args,
-    direction: 'column-reverse',
-  },
-}
-
-export const Horizontal = {
-  args: {
-    ...Default.args,
-    direction: 'horizontal',
-  },
-}
-
-export const Vertical = {
-  args: {
-    ...Default.args,
-    direction: 'vertical',
-  },
-}