@itcase/ui 1.0.96 → 1.0.99

package/dist/stories/Avatar.stories.js

@@ -0,0 +1,179 @@
+import { Avatar } from '@itcase/ui/components/Avatar'
+import {
+  fillHoverProps,
+  fillProps,
+  iconFillSizeProps,
+  iconSizeProps,
+  shapeProps,
+  sizePXProps,
+  textColorProps,
+  textSizeProps,
+  textWeightProps,
+} from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Avatar',
+  component: Avatar,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    src: {
+      type: 'select',
+      options: ['assets/avatar/woman.png', 'assets/avatar/man.png'],
+      if: { arg: 'type', eq: 'image' },
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    shape: {
+      control: 'inline-radio',
+      options: shapeProps,
+    },
+    iconSrc: {
+      control: 'select',
+      options: [null, 'assets/40/close.svg'],
+    },
+    textSize: {
+      control: 'select',
+      options: textSizeProps,
+      if: { arg: 'type', eq: 'text' },
+    },
+    textColor: {
+      control: 'select',
+      options: textColorProps,
+      if: { arg: 'type', eq: 'text' },
+    },
+    textWeight: {
+      control: 'select',
+      options: textWeightProps,
+      if: { arg: 'type', eq: 'text' },
+    },
+
+    iconFill: {
+      control: 'select',
+      options: fillProps,
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconFillHover: {
+      options: fillHoverProps,
+      control: 'select',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconItemFill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconSize: {
+      options: iconSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    iconFillSize: {
+      options: iconFillSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'iconSrc', neq: null },
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'type', eq: 'text' },
+    },
+    size: {
+      options: sizePXProps,
+      control: 'inline-radio',
+    },
+    type: {
+      options: ['image', 'text'],
+      control: 'inline-radio',
+    },
+    firstName: {
+      if: { arg: 'type', eq: 'text' },
+    },
+    secondName: {
+      if: { arg: 'type', eq: 'text' },
+    },
+    mode: {
+      options: [null, 'skeleton'],
+      control: 'inline-radio',
+    },
+  },
+  args: {
+    advancedProps: false,
+    onClick: '',
+    className: '',
+    children: [],
+    shape: 'circular',
+    fill: 'surfaceTertiary',
+    size: 96,
+  },
+}
+
+const ImageProps = {
+  src: 'assets/avatar/woman.png',
+  type: 'image',
+}
+
+const IconProps = {
+  iconSrc: 'assets/40/close.svg',
+  iconSize: 40,
+  iconFill: 'accentPrimary',
+  iconFillHover: 'accentPrimaryHover',
+  iconFillSize: 40,
+  iconItemFill: 'accentItemPrimary',
+  iconItemFillHover: 'accentItemPrimaryHover',
+  iconShape: 'circular',
+}
+
+export const Default = {
+  args: {
+    ...ImageProps,
+    ...IconProps,
+  },
+}
+
+export const Image = {
+  args: {
+    ...ImageProps,
+  },
+}
+
+export const ImageWithIcon = {
+  args: {
+    ...ImageProps,
+    ...IconProps,
+  },
+}
+
+export const Text = {
+  args: {
+    firstName: 'John',
+    secondName: 'Doe',
+    textWeight: 600,
+    type: 'text',
+  },
+}
+
+export const TextWithIcon = {
+  args: {
+    ...Text.args,
+    ...IconProps,
+  },
+}
+
+export const SkeletonMode = {
+  args: {
+    ...Text.args,
+    mode: 'skeleton',
+  },
+}

package/dist/stories/Cell.stories.js

@@ -0,0 +1,317 @@
+import { Cell } from '@itcase/ui/components/Cell'
+import {
+  fillHoverProps,
+  fillProps,
+  iconFillSizeProps,
+  shapeProps,
+  sizeProps,
+  strokeColorProps,
+  textColorProps,
+  textSizeProps,
+  textWeightProps,
+  textWrapProps,
+  widthProps,
+} from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Cell',
+  component: Cell,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    before: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    isActive: {
+      if: { arg: 'advancedProps' },
+    },
+    isDisabled: {
+      if: { arg: 'advancedProps' },
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
+    },
+    zeroPadding: { control: 'boolean' },
+    zeroGap: { control: 'boolean' },
+    reverse: { control: 'boolean' },
+    size: {
+      options: [null, 's', 'm', 'l', 'xl'],
+      control: 'inline-radio',
+    },
+    width: {
+      options: widthProps,
+      control: 'inline-radio',
+      if: { arg: 'advancedProps' },
+    },
+    direction: {
+      options: ['vertical', 'horizontal'],
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+
+    // titleText
+
+    titleTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    titleTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    titleTextWeight: {
+      options: textWeightProps,
+      control: 'select',
+      if: { arg: 'advancedProps' },
+    },
+    titleTextWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+      if: { arg: 'advancedProps' },
+    },
+
+    // titleLabel
+
+    showTitleLabel: { control: 'boolean' },
+    titleLabelAppearance: {
+      options: [
+        null,
+        'accent',
+        'primary',
+        'secondary',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+      ],
+      control: 'inline-radio',
+      if: { arg: 'showTitleLabel' },
+    },
+    titleLabelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'showTitleLabel' },
+    },
+    titleLabelShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+      if: { arg: 'showTitleLabel' },
+    },
+    titleLabelSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+      if: { arg: 'showTitleLabel' },
+    },
+
+    // titleIcon
+
+    titleIconSrc: {
+      options: [null, 'assets/24/ChevronTop.svg'],
+      control: 'inline-radio',
+    },
+    titleIconFill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'titleIconSrc' },
+    },
+    titleIconFillSize: {
+      options: iconFillSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'titleIconSrc' },
+    },
+    titleIconItemFill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'titleIconSrc' },
+    },
+    titleIconStroke: {
+      options: strokeColorProps,
+      control: 'select',
+      if: { arg: 'titleIconSrc' },
+    },
+    titleIconShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+      if: { arg: 'titleIconSrc' },
+    },
+
+    // valueText
+
+    valueTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    valueTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    valueTextWeight: {
+      options: textWeightProps,
+      control: 'select',
+      if: { arg: 'advancedProps' },
+    },
+    valueTextWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+      if: { arg: 'advancedProps' },
+    },
+
+    // valueLabel
+
+    showValueLabel: { control: 'boolean' },
+    valueLabelAppearance: {
+      options: [
+        null,
+        'accent',
+        'primary',
+        'secondary',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+      ],
+      control: 'inline-radio',
+      if: { arg: 'showValueLabel' },
+    },
+    valueLabelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'showValueLabel' },
+    },
+    valueLabelShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+      if: { arg: 'showValueLabel' },
+    },
+    valueLabelSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+      if: { arg: 'showValueLabel' },
+    },
+
+    // valueIcon
+
+    valueIconSrc: {
+      options: [null, 'assets/24/ChevronDown.svg'],
+      control: 'inline-radio',
+    },
+    valueIconFill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'valueIconSrc' },
+    },
+    valueIconFillSize: {
+      options: iconFillSizeProps,
+      control: 'inline-radio',
+      if: { arg: 'valueIconSrc' },
+    },
+    valueIconItemFill: {
+      options: fillProps,
+      control: 'select',
+      if: { arg: 'valueIconSrc' },
+    },
+    valueIconStroke: {
+      options: strokeColorProps,
+      control: 'select',
+      if: { arg: 'valueIconSrc' },
+    },
+    valueIconShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+      if: { arg: 'valueIconSrc' },
+    },
+    mode: {
+      options: [null, 'skeleton'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    title: 'Title',
+    titleTextColor: 'surfaceTextPrimary',
+    titleTextSize: 'm',
+    value: 'Value',
+    valueTextColor: 'surfaceTextPrimary',
+    valueTextSize: 'm',
+    valueTextWeight: 600,
+    direction: 'horizontal',
+    zeroPadding: false,
+    zeroGap: false,
+    reverse: false,
+    showTitleLabel: false,
+    showValueLabel: false,
+  },
+}
+
+export const Horizontal = {
+  args: {
+    ...Default.args,
+    direction: 'horizontal',
+  },
+}
+
+export const Vertical = {
+  args: {
+    ...Default.args,
+    direction: 'vertical',
+  },
+}
+
+export const WithLabels = {
+  args: {
+    ...Default.args,
+    showTitleLabel: true,
+    showValueLabel: true,
+    titleLabel: 'titleLabel',
+    valueLabel: 'valueLabel',
+    titleLabelAppearance: 'accent',
+    titleLabelTextSize: 's',
+    titleLabelShape: 'rounded',
+    titleLabelSize: 's',
+    valueLabelAppearance: 'accent',
+    valueLabelTextSize: 's',
+    valueLabelShape: 'rounded',
+    valueLabelSize: 's',
+  },
+}
+
+export const WithIcons = {
+  args: {
+    ...Default.args,
+    titleIconSrc: 'assets/24/ChevronDown.svg',
+    titleIconFill: 'accentPrimary',
+    titleIconFillSize: 32,
+    titleIconItemFill: 'surfacePrimary',
+    titleIconShape: 'circular',
+    valueIconSrc: 'assets/24/ChevronDown.svg',
+    valueIconFill: 'accentPrimary',
+    valueIconFillSize: 32,
+    valueIconItemFill: 'surfacePrimary',
+    valueIconShape: 'circular',
+  },
+}
+
+export const SkeletonMode = {
+  args: {
+    ...Default.args,
+    mode: 'skeleton',
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.96",
+  "version": "1.0.99",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -15,7 +15,8 @@
     "./constants": "./dist/constants.js",
     "./constants/*": "./dist/constants/*.js",
     "./context/*": "./dist/context/*.js",
-    "./hooks/*": "./dist/hooks/*.js"
+    "./hooks/*": "./dist/hooks/*.js",
+    "./stories/*": "./dist/stories/*.js"
   },
   "scripts": {
     "build": "npm run build-js && npm run build-css",
@@ -23,7 +24,7 @@
     "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/{mediaqueries,mixin_global,mixin_elevation,mixin_fill-gradient}.css' --base src --dir dist/css/ --env production",
     "dev-js": "rollup -c -w",
     "dev-css": "postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/{mediaqueries,mixin_global,mixin_elevation,mixin_fill-gradient}.css' --base src --dir dist/css/ --env production -w --verbose",
-    "prepare": "npx husky install",
+    "prepare": "husky",
     "prepack": "npm run build",
     "semantic-release": "semantic-release"
   },
@@ -40,8 +41,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.11",
-    "clsx": "^2.0.0",
+    "@itcase/common": "^1.1.12",
+    "clsx": "^2.1.0",
     "html5-boilerplate": "^9.0.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
@@ -52,23 +53,23 @@
     "react-dadata": "^2.23.1",
     "react-date-range": "^1.4.0",
     "react-dom": "^18.2.0",
-    "react-inlinesvg": "^4.1.0",
+    "react-inlinesvg": "^4.1.1",
     "react-modern-drawer": "^1.2.2",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
-    "swiper": "^11.0.5",
+    "swiper": "^11.0.6",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/preset-env": "^7.23.6",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.10",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
@@ -81,51 +82,52 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.5.0",
+    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
-    "npm": "^10.2.5",
-    "postcss": "^8.4.32",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "npm": "^10.4.0",
+    "postcss": "^8.4.35",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-csso": "^6.0.1",
-    "postcss-dark-theme-class": "^1.1.0",
-    "postcss-discard-duplicates": "^6.0.1",
+    "postcss-dark-theme-class": "^1.2.1",
+    "postcss-discard-duplicates": "^6.0.2",
     "postcss-each": "^1.1.0",
     "postcss-easings": "^4.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-hexrgba": "^2.1.0",
-    "postcss-import": "^15.1.0",
+    "postcss-import": "^16.0.1",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.3.0",
-    "postcss-pxtorem": "^6.0.0",
+    "postcss-preset-env": "^9.4.0",
+    "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.1.1",
-    "react-datepicker": "^4.25.0",
-    "rollup": "^4.9.1",
+    "prettier": "^3.2.5",
+    "react-datepicker": "^6.1.0",
+    "rollup": "^4.12.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^22.0.12",
-    "stylelint": "^16.1.0",
+    "semantic-release": "^23.0.2",
+    "stylelint": "^16.2.1",
     "stylelint-config-standard": "^36.0.0",
-    "stylelint-no-unsupported-browser-features": "^7.0.0",
+    "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.4"
   }
 }