@itcase/ui 1.0.97 → 1.0.100

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.97",
+  "version": "1.0.100",
   "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",
@@ -81,7 +82,7 @@
     "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",
@@ -101,26 +102,27 @@
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-csso": "^6.0.1",
-    "postcss-dark-theme-class": "^1.2.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": "^16.0.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-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.2.5",
     "react-datepicker": "^6.1.0",
-    "rollup": "^4.10.0",
+    "rollup": "^4.12.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^23.0.2",
     "stylelint": "^16.2.1",