@itcase/ui 1.0.100 → 1.0.101

package/dist/stories/Code.stories.js

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

package/dist/stories/DatePicker.stories.js

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

package/dist/stories/Divider.stories.js

@@ -0,0 +1,132 @@
+import { Divider } from '@itcase/ui/components/Divider'
+
+import { fillHoverProps } from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Divider',
+  component: Divider,
+  parameters: {
+    controls: {
+      exclude: [
+        'direction',
+        'directionDesktop',
+        'directionTablet',
+        'directionMobile',
+        'fillDesktop',
+        'fillTablet',
+        'fillMobile',
+        'size',
+        'sizeDesktop',
+        'sizeTablet',
+        'sizeMobile',
+        'widthDesktop',
+        'widthTablet',
+        'widthMobile',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    fill: {
+      options: [
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accentPrimary',
+        'primaryPrimary',
+        'secondaryPrimary',
+      ],
+      control: 'inline-radio',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+  },
+}
+
+export const Horizontal = {
+  args: {
+    width: 300,
+    height: 3,
+    fill: 'surfaceTertiary',
+  },
+}
+
+export const SurfacePrimary = {
+  args: {
+    ...Horizontal.args,
+    width: 300,
+    height: 3,
+    fill: 'surfacePrimary',
+  },
+}
+
+export const SurfaceSecondary = {
+  args: {
+    ...Horizontal.args,
+    width: 300,
+    height: 3,
+    fill: 'surfaceSecondary',
+  },
+}
+
+export const SurfaceTertiary = {
+  args: {
+    ...Horizontal.args,
+    width: 300,
+    height: 3,
+    fill: 'surfaceTertiary',
+  },
+}
+
+export const SurfaceQuaternary = {
+  args: {
+    ...Horizontal.args,
+    width: 300,
+    height: 3,
+    fill: 'surfaceQuaternary',
+  },
+}
+
+export const AccentPrimary = {
+  args: {
+    ...Horizontal.args,
+    width: 300,
+    height: 3,
+    fill: 'accentPrimary',
+  },
+}
+
+export const PrimaryPrimary = {
+  args: {
+    ...Horizontal.args,
+    width: 300,
+    height: 3,
+    fill: 'primaryPrimary',
+  },
+}
+
+export const SecondaryPrimary = {
+  args: {
+    ...Horizontal.args,
+    width: 300,
+    height: 3,
+    fill: 'secondaryPrimary',
+  },
+}
+
+export const Vertical = {
+  args: {
+    width: 3,
+    height: 300,
+    fill: 'surfaceTertiary',
+  },
+}

package/dist/stories/Dot.stories.js

@@ -0,0 +1,86 @@
+import { Dot } from '@itcase/ui/components/Dot'
+import {
+  borderColorProps,
+  borderTypeProps,
+  borderWidthProps,
+  borderColorHoverProps,
+  textColorProps,
+  fillProps,
+  sizeProps,
+  shapeProps,
+} from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Dot',
+  component: Dot,
+  parameters: {
+    controls: {
+      exclude: [
+        'borderDesktop',
+        'borderMobile',
+        'borderTablet',
+        'borderTypeDesktop',
+        'borderTypeMobile',
+        'borderTypeTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    border: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    borderType: {
+      options: borderTypeProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+  },
+  args: {
+    shape: 'circular',
+  },
+}
+
+export const Default = {
+  args: {
+    fill: 'accentPrimary',
+  },
+}
+
+export const Accent = {
+  args: {
+    fill: 'accentPrimary',
+  },
+}
+
+export const Primary = {
+  args: {
+    fill: 'primaryPrimary',
+  },
+}
+
+export const Secondary = {
+  args: {
+    fill: 'secondaryPrimary',
+  },
+}

package/dist/stories/Dropdown.stories.js

@@ -0,0 +1,74 @@
+import React from 'react'
+
+import { Dropdown, DropdownItem } from '@itcase/ui/components/Dropdown'
+
+export default {
+  title: 'Atoms / Dropdown / Default',
+  component: Dropdown,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+      control: 'text',
+    },
+    animationOpen: {
+      if: { arg: 'advancedProps' },
+    },
+    animationClose: {
+      if: { arg: 'advancedProps' },
+    },
+    isCloseByClickOutside: {
+      if: { arg: 'advancedProps' },
+    },
+    elevation: {
+      options: [null, 1, 2, 4, 6, 8, 12, 16, 24],
+      control: 'inline-radio',
+    },
+    isOpen: {
+      control: 'boolean',
+    },
+    shape: {
+      options: [null, 'geometric', 'rounded'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    shape: 'rounded',
+    elevation: 8,
+    isOpen: true,
+    children: (
+      <React.Fragment>
+        <DropdownItem
+          size="normal"
+          fill="surfacePrimary"
+          fillHover="surfacePrimaryHover"
+          label="Label Primary"
+          labelTextSize="m"
+          labelTextWrap="nowrap"
+          labelTextColor="surfaceTextPrimary"
+        />
+        <DropdownItem
+          size="normal"
+          fill="surfacePrimary"
+          fillHover="surfacePrimaryHover"
+          label="Label Secondary"
+          labelTextWrap="nowrap"
+          labelTextSize="m"
+          labelTextColor="surfaceTextPrimary"
+        />
+        <DropdownItem
+          size="normal"
+          fill="surfacePrimary"
+          fillHover="surfacePrimaryHover"
+          labelTextWrap="nowrap"
+          label="Label Tertiary"
+          labelTextSize="m"
+          labelTextColor="surfaceTextPrimary"
+        />
+      </React.Fragment>
+    ),
+  },
+}

package/dist/stories/DropdownItem.stories.js

@@ -0,0 +1,152 @@
+import React from 'react'
+
+import { DropdownItem } from '@itcase/ui/components/Dropdown'
+
+import {
+  textColorProps,
+  textSizeProps,
+  fillProps,
+  fillHoverProps,
+  textWrapProps,
+} from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Dropdown / Item',
+  component: DropdownItem,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillTablet',
+        'fillMobile',
+        'linkFillDesktop',
+        'linkFillTablet',
+        'linkFillMobile',
+        'sizeDesktop',
+        'sizeTablet',
+        'sizeMobile',
+        'shapeDesktop',
+        'shapeTablet',
+        'shapeMobile',
+        'typeDesktop',
+        'typeTablet',
+        'typeMobile',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    before: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+      control: 'text',
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+      control: 'text',
+    },
+    desc: {
+      if: { arg: 'advancedProps' },
+      control: 'text',
+    },
+    href: {
+      if: { arg: 'advancedProps' },
+    },
+    link: {
+      if: { arg: 'advancedProps' },
+    },
+    linkFill: {
+      if: { arg: 'advancedProps' },
+    },
+    LinkComponent: {
+      if: { arg: 'advancedProps' },
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+      control: 'text',
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
+      control: 'text',
+    },
+    rel: {
+      if: { arg: 'advancedProps' },
+    },
+    target: {
+      if: { arg: 'advancedProps' },
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+    underline: {
+      if: { arg: 'advancedProps' },
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    labelTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    labelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    labelTextWrap: {
+      options: textWrapProps,
+      control: 'select',
+    },
+    set: {
+      options: [null, 'normal', 'compact'],
+      control: 'inline-radio',
+    },
+    size: {
+      options: [null, 'normal', 'compact'],
+      control: 'inline-radio',
+    },
+    shape: {
+      options: [null, 'geometric', 'rounded'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    set: 'normal',
+    shape: 'rounded',
+    isOpen: true,
+    size: 'normal',
+    fill: 'surfacePrimary',
+    fillHover: 'surfacePrimaryHover',
+    label: 'Label',
+    labelTextSize: 'm',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+}
+
+export const Active = {
+  args: {
+    ...Default.args,
+  },
+}
+
+export const Disabled = {
+  args: {
+    ...Default.args,
+    fill: 'surfaceSecondary',
+    fillHover: null,
+    labelTextColor: 'surfaceTextSecondary',
+    labelTextWrap: 'nowrap',
+  },
+}