@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/src/components/Colors/Colors.tsx

@@ -1,26 +1,26 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../theme';
-import { useStyles } from './Colors.styles';
-
-// TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
-
-export const Colors: FC = () => {
-  const classes = useStyles();
-  const { theme } = useContext(ThemeContext);
-  const { colors = {} } = theme;
-
-  return (
-    <div className={classes.root}>
-      {Object.entries(colors as Record<string, string>).map(([colorName, color]) => {
-        const name = colorName.split('_').join(' ').toLowerCase();
-        return (
-          <div key={colorName} className={classes.colorCard}>
-            <div className={classes.color} style={{ backgroundColor: color }} />
-            <div className={classes.colorName}>{`${name[0].toUpperCase()}${name.slice(1)}`}</div>
-            <div className={classes.hex}>{color}</div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { useTheme } from '../../theme';
+import { useStyles } from './Colors.styles';
+
+// TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
+
+export const Colors: FC = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const { colors = {} } = theme;
+
+  return (
+    <div className={classes.root}>
+      {Object.entries(colors as Record<string, string>).map(([colorName, color]) => {
+        const name = colorName.split('_').join(' ').toLowerCase();
+        return (
+          <div key={colorName} className={classes.colorCard}>
+            <div className={classes.color} style={{ backgroundColor: color }} />
+            <div className={classes.colorName}>{`${name[0].toUpperCase()}${name.slice(1)}`}</div>
+            <div className={classes.hex}>{color}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/Colors/index.ts

@@ -1 +1 @@
-export * from './Colors';
+export * from './Colors';

package/src/components/ControlWrapper/ControlWrapper.stories.tsx

@@ -1,45 +1,50 @@
-import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
-import { ControlWrapper } from './ControlWrapper';
-
-export default {
-  title: 'ControlWrapper',
-  component: ControlWrapper,
-};
-
-const Template: ComponentStory<typeof ControlWrapper> = (args) => (
-  <ControlWrapper {...args} onClear={doNothing} onIconClick={doNothing}>
-    <div style={{ minWidth: 200, height: 48 }} />
-  </ControlWrapper>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isInvalid: false,
-  label: 'Label',
-  isFocused: false,
-  isRequired: false,
-  isLoading: false,
-  isDisabled: false,
-  hasValue: false,
-};
-
-Default.argTypes = {
-  icon: { control: 'select', options: [undefined, ...Object.keys(iconsList)] },
-  groupPlacement: {
-    control: 'select',
-    options: [
-      'top',
-      'bottom',
-      'top-left',
-      'top-right',
-      'bottom-left',
-      'bottom-right',
-      'left',
-      'right',
-      'middle',
-    ],
-  },
-};
+import { doNothing } from '@true-engineering/true-react-platform-helpers';
+import { ComponentStory } from '@storybook/react';
+import { Icon, iconsMap } from '../Icon';
+import { ControlWrapper } from './ControlWrapper';
+
+export default {
+  title: 'Controls/ControlWrapper',
+  component: ControlWrapper,
+};
+
+const Template: ComponentStory<typeof ControlWrapper> = (args) => (
+  <ControlWrapper {...args} onClear={doNothing}>
+    <div style={{ minWidth: 200, height: 48 }} />
+  </ControlWrapper>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isInvalid: false,
+  label: 'Label',
+  isFocused: false,
+  isRequired: false,
+  isLoading: false,
+  isDisabled: false,
+  hasValue: false,
+  icon: [
+    { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
+    { iconComponent: <Icon type="plus" /> },
+    { iconComponent: 'search', onClick: () => console.log('search') },
+  ],
+};
+
+Default.argTypes = {
+  icon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
+  groupPlacement: {
+    control: 'select',
+    options: [
+      'top',
+      'bottom',
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'left',
+      'right',
+      'middle',
+    ],
+  },
+};

package/src/components/ControlWrapper/ControlWrapper.styles.ts

@@ -1,185 +1,186 @@
-import { animations, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
-
-const { CONTROL, Z_INDEX } = dimensions;
-
-export const useStyles = createThemedStyles('ControlWrapper', {
-  controlWrapper: {
-    '--control-height': `${CONTROL.HEIGHT - 2}px`, // borders
-    '--control-padding': `${CONTROL.PADDING}px`,
-    '--icon-size': `${CONTROL.ICON_SIZE}px`,
-    '--icon-inner-size': `${CONTROL.ICON_INNER_SIZE}px`,
-    '--icon-gap': `${CONTROL.ICON_GAP}px`,
-    display: 'flex',
-    width: '100%',
-    backgroundColor: 'white',
-    position: 'relative',
-    border: ['solid', 1, 'gray'],
-    borderRadius: 8,
-    boxSizing: 'border-box',
-    zIndex: 0,
-  },
-
-  invalid: {
-    zIndex: Z_INDEX.CONTROL_INVALID,
-  },
-
-  disabled: {},
-
-  focused: {
-    position: 'relative',
-    zIndex: Z_INDEX.CONTROL_FOCUS,
-  },
-
-  withValue: {},
-
-  loading: {},
-
-  minContent: {
-    width: 'min-content',
-  },
-
-  label: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    left: 'var(--control-padding)',
-    top: '50%',
-    transformOrigin: 'top left',
-    transform: 'translateY(-50%)',
-    transition: animations.defaultTransition,
-    transitionProperty: 'transform, color',
-    fontSize: 16,
-    zIndex: 1,
-  },
-
-  activeLabel: {},
-
-  requiredLabel: {
-    '&:after': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      top: 0,
-      right: -8,
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-      backgroundColor: 'orange',
-    },
-  },
-
-  disabledLabel: {},
-
-  wrapper: {
-    display: 'flex',
-    flexGrow: 1,
-    minWidth: 0, // Нужно для селекта
-    textAlign: 'left',
-  },
-
-  controls: {
-    display: 'flex',
-    marginLeft: 'auto',
-    flexShrink: 0,
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: 'var(--icon-size)',
-    width: 'var(--icon-size)',
-    height: '100%',
-    flexShrink: 0,
-    cursor: 'default',
-
-    '&:last-child': {
-      paddingRight: 6,
-    },
-  },
-
-  iconInner: {
-    width: 'var(--icon-inner-size)',
-  },
-
-  customIcon: {
-    width: 'unset',
-
-    '& $iconInner': {
-      width: 'unset',
-    },
-  },
-
-  endIcon: {},
-
-  activeIcon: {
-    cursor: 'pointer',
-    outline: 'none',
-  },
-
-  clearIcon: {
-    '& $iconInner': {
-      width: 'var(--icon-inner-size)',
-    },
-  },
-
-  loader: {
-    '& $iconInner': {
-      width: 'var(--icon-inner-size)',
-    },
-  },
-
-  /* groupPositions */
-  'placement-top': {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'placement-bottom': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-
-  'placement-top-left': {
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'placement-top-right': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'placement-bottom-left': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'placement-bottom-right': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  'placement-left': {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'placement-right': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  'placement-middle': {
-    borderRadius: 0,
-  },
-});
-
-export type IControlWrapperStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
->;
+import { animations, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IControlWrapperSizes } from './types';
+
+const { CONTROL, Z_INDEX } = dimensions;
+
+export const useStyles = createThemedStyles('ControlWrapper', {
+  controlWrapper: {
+    '--control-height': `${CONTROL.HEIGHT - 2}px`, // borders
+    '--control-padding': `${CONTROL.PADDING}px`,
+    '--icon-size': `${CONTROL.ICON_SIZE}px`,
+    '--icon-inner-size': `${CONTROL.ICON_INNER_SIZE}px`,
+    '--icon-gap': `${CONTROL.ICON_GAP}px`,
+    display: 'flex',
+    width: '100%',
+    backgroundColor: 'white',
+    position: 'relative',
+    border: ['solid', 1, 'gray'],
+    borderRadius: 8,
+    boxSizing: 'border-box',
+    zIndex: 0,
+  },
+
+  disabled: {},
+
+  focused: {
+    position: 'relative',
+    zIndex: Z_INDEX.CONTROL_FOCUS,
+  },
+
+  invalid: {
+    zIndex: Z_INDEX.CONTROL_INVALID,
+  },
+
+  withValue: {},
+
+  loading: {},
+
+  minContent: {
+    width: 'min-content',
+  },
+
+  label: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left: 'var(--control-padding)',
+    top: 'calc(var(--control-height) / 2)',
+    transformOrigin: 'top left',
+    transform: 'translateY(-50%)',
+    transition: animations.defaultTransition,
+    transitionProperty: 'transform, color',
+    fontSize: 16,
+    zIndex: 1,
+  },
+
+  activeLabel: {},
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      right: -8,
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+      backgroundColor: 'orange',
+    },
+  },
+
+  disabledLabel: {},
+
+  wrapper: {
+    display: 'flex',
+    flexGrow: 1,
+    minWidth: 0, // Нужно для селекта
+    textAlign: 'left',
+  },
+
+  controls: {
+    display: 'flex',
+    marginLeft: 'auto',
+    flexShrink: 0,
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 'var(--icon-size)',
+    width: 'var(--icon-size)',
+    height: '100%',
+    flexShrink: 0,
+    cursor: 'default',
+
+    '&:last-child': {
+      paddingRight: 6,
+    },
+  },
+
+  iconInner: {
+    width: 'var(--icon-inner-size)',
+  },
+
+  customIcon: {
+    width: 'unset',
+
+    '& $iconInner': {
+      width: 'unset',
+    },
+  },
+
+  endIcon: {},
+
+  activeIcon: {
+    cursor: 'pointer',
+    outline: 'none',
+  },
+
+  clearIcon: {
+    '& $iconInner': {
+      width: 'var(--icon-inner-size)',
+    },
+  },
+
+  loader: {
+    '& $iconInner': {
+      width: 'var(--icon-inner-size)',
+    },
+  },
+
+  /* groupPositions */
+  'placement-top': {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-bottom': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+
+  'placement-top-left': {
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-top-right': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-bottom-left': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-bottom-right': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  'placement-left': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-right': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  'placement-middle': {
+    borderRadius: 0,
+  },
+});
+
+export type IControlWrapperStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles } & IControlWrapperSizes
+>;