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

package/src/components/Status/Status.stories.tsx

@@ -1,69 +1,121 @@
-import { Status } from '.';
-import { ComponentStory } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-import { IStatusStyles } from './Status.styles';
-
-export default {
-  title: 'Data Display/Status',
-  component: Status,
-};
-
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-const customTweakStyles: IStatusStyles = {
-  custom: {
-    '--status-color': '#793472',
-    '--status-background': '#F2B9ED',
-  },
-};
-
-const Template: ComponentStory<typeof Status> = (args) => (
-  <div
-    style={{
-      display: 'grid',
-      gridTemplateRows: `repeat(${STATUS_SIZES.length + 1}, 1fr)`,
-      gridTemplateColumns: `repeat(${STATUS_COLORS.length + 1}, 1fr)`,
-      gap: 20,
-    }}
-  >
-    <div key={0} style={{ display: 'contents' }}>
-      <div />
-      {STATUS_COLORS.map((color, j) => (
-        <div key={j + 1}>{color}</div>
-      ))}
-    </div>
-
-    {STATUS_SIZES.map((size, i) => (
-      <div key={i + 1} style={{ display: 'contents' }}>
-        <div>{size}</div>
-        {STATUS_COLORS.map((color, j) => (
-          <div key={j + 1}>
-            <Status {...args} size={size} color={color} tweakStyles={customTweakStyles} />
-          </div>
-        ))}
-      </div>
-    ))}
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Status',
-  badge: '+ Badge',
-  icon: 'balloon',
-  iconPosition: 'left',
-};
-
-Default.argTypes = {
-  icon: { options: icons, control: 'select' },
-  iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['size', 'color', 'tweakStyles', 'testId', 'data'],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { rgba } from '../../helpers';
+import { IExtendableProps } from '../../types';
+import { iconsMap } from '../Icon';
+import { Status } from './Status';
+import { STATUS_SIZES } from './constants';
+import { IStatusStyles } from './Status.styles';
+
+export const STATUS_COLORS = [
+  'green',
+  'teal',
+  'blue',
+  'grey',
+  'orange',
+  'red',
+  'violet',
+  'custom',
+] as const;
+
+export default {
+  title: 'Data Display/Status',
+  component: Status,
+};
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface IStatusColors extends IExtendableProps<typeof STATUS_COLORS> {}
+}
+
+const icons = [undefined, ...Object.keys(iconsMap)];
+
+const customTweakStyles: IStatusStyles = {
+  green: {
+    '--status-background': rgba('#D4E3AC', 0.5),
+    '--status-color': '#6F990F',
+  },
+
+  blue: {
+    '--status-background': rgba('#AABFFC', 0.4),
+    '--status-color': '#4C6EBF',
+  },
+
+  grey: {
+    '--status-background': rgba('#95A0B3', 0.25),
+    '--status-color': '#7A869A',
+  },
+
+  orange: {
+    '--status-background': rgba('#FCD3A9', 0.5),
+    '--status-color': '#E5741C',
+  },
+
+  red: {
+    '--status-background': rgba('#F7949A', 0.25),
+    '--status-color': '#F14D56',
+  },
+
+  teal: {
+    '--status-background': rgba('#8CE3EA', 0.4),
+    '--status-color': '#0092A6',
+  },
+
+  violet: {
+    '--status-background': rgba('#BEABE0', 0.4),
+    '--status-color': '#7450B2',
+  },
+
+  custom: {
+    '--status-color': '#793472',
+    '--status-background': '#F2B9ED',
+  },
+};
+
+const Template: ComponentStory<typeof Status> = (args) => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateRows: `repeat(${STATUS_SIZES.length + 1}, 1fr)`,
+      gridTemplateColumns: `repeat(${STATUS_COLORS.length + 1}, 1fr)`,
+      gap: 20,
+    }}
+  >
+    <div key={0} style={{ display: 'contents' }}>
+      <div />
+      {STATUS_COLORS.map((color, j) => (
+        <div key={j + 1}>{color}</div>
+      ))}
+    </div>
+
+    {STATUS_SIZES.map((size, i) => (
+      <div key={i + 1} style={{ display: 'contents' }}>
+        <div>{size}</div>
+        {STATUS_COLORS.map((color, j) => (
+          <div key={j + 1}>
+            <Status {...args} size={size} color={color} tweakStyles={customTweakStyles} />
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Status',
+  badge: '+ Badge',
+  icon: 'balloon',
+  iconPosition: 'left',
+};
+
+Default.argTypes = {
+  icon: { options: icons, control: 'select' },
+  iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['size', 'color', 'tweakStyles', 'testId', 'data'],
+  },
+};

package/src/components/Status/Status.styles.ts

@@ -1,143 +1,108 @@
-import { rgba } from '../../helpers';
-import { colors, createThemedStyles, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Status', {
-  root: {
-    display: 'inline-flex',
-    verticalAlign: 'middle',
-    color: 'var(--status-color)',
-    backgroundColor: 'var(--status-background)',
-    width: 'max-content',
-    alignItems: 'center',
-
-    '& > *': {
-      flexShrink: 0,
-    },
-  },
-
-  icon: {
-    '& > div': {
-      display: 'inline-block',
-    },
-  },
-
-  iconLeft: {
-    order: -1,
-  },
-
-  text: {},
-
-  badge: {
-    color: colors.CLASSIC_WHITE,
-    backgroundColor: 'var(--status-color)',
-  },
-
-  xs: {
-    padding: [2, 4],
-    gap: 4,
-    borderRadius: 2,
-
-    fontSize: 12,
-    lineHeight: '16px',
-    letterSpacing: 0.24,
-    fontWeight: 'bold',
-
-    '& $icon': {
-      width: 16,
-      height: 16,
-    },
-
-    '& $badge': {
-      padding: [0, 2],
-      marginRight: -1,
-      borderRadius: 4,
-    },
-  },
-
-  s: {
-    padding: [3, 8, 5, 8],
-    gap: 4,
-    borderRadius: 6,
-
-    fontSize: 13,
-    lineHeight: '16px',
-    letterSpacing: 0.2,
-    fontWeight: 'bold',
-
-    '& $text': {},
-
-    '& $icon': {
-      width: 16,
-      height: 16,
-    },
-
-    '& $badge': {
-      padding: [0, 4, 2, 4],
-      margin: [0, -4, -2, 0],
-      borderRadius: 4,
-    },
-  },
-
-  m: {
-    padding: [7, 12],
-    gap: 4,
-    borderRadius: 6,
-
-    fontSize: 15,
-    lineHeight: '18px',
-    letterSpacing: 0.15,
-    fontWeight: 'bold',
-
-    '& $text': {},
-
-    '& $icon': {
-      width: 18,
-      height: 18,
-    },
-
-    '& $badge': {
-      padding: [2, 4],
-      margin: [-2, -7, -2, 0],
-      borderRadius: 4,
-    },
-  },
-
-  green: {
-    '--status-background': rgba('#D4E3AC', 0.5),
-    '--status-color': '#6F990F',
-  },
-
-  blue: {
-    '--status-background': rgba('#AABFFC', 0.4),
-    '--status-color': '#4C6EBF',
-  },
-
-  grey: {
-    '--status-background': rgba('#95A0B3', 0.25),
-    '--status-color': '#7A869A',
-  },
-
-  orange: {
-    '--status-background': rgba('#FCD3A9', 0.5),
-    '--status-color': '#E5741C',
-  },
-
-  red: {
-    '--status-background': rgba('#F7949A', 0.25),
-    '--status-color': '#F14D56',
-  },
-
-  teal: {
-    '--status-background': rgba('#8CE3EA', 0.4),
-    '--status-color': '#0092A6',
-  },
-
-  violet: {
-    '--status-background': rgba('#BEABE0', 0.4),
-    '--status-color': '#7450B2',
-  },
-
-  custom: {},
-});
-
-export type IStatusStyles = ITweakStyles<typeof useStyles>;
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { IStatusColors } from './types';
+
+export const useStyles = createThemedStyles('Status', {
+  root: {
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+    color: 'var(--status-color)',
+    backgroundColor: 'var(--status-background)',
+    width: 'max-content',
+    alignItems: 'center',
+
+    '& > *': {
+      flexShrink: 0,
+    },
+  },
+
+  icon: {
+    '& > div': {
+      display: 'inline-block',
+    },
+  },
+
+  iconLeft: {
+    order: -1,
+  },
+
+  text: {},
+
+  badge: {
+    color: colors.CLASSIC_WHITE,
+    backgroundColor: 'var(--status-color)',
+  },
+
+  xs: {
+    padding: [2, 4],
+    gap: 4,
+    borderRadius: 2,
+
+    fontSize: 12,
+    lineHeight: '16px',
+    letterSpacing: 0.24,
+    fontWeight: 'bold',
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $badge': {
+      padding: [0, 2],
+      marginRight: -1,
+      borderRadius: 4,
+    },
+  },
+
+  s: {
+    padding: [3, 8, 5, 8],
+    gap: 4,
+    borderRadius: 6,
+
+    fontSize: 13,
+    lineHeight: '16px',
+    letterSpacing: 0.2,
+    fontWeight: 'bold',
+
+    '& $text': {},
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $badge': {
+      padding: [0, 4, 2, 4],
+      margin: [0, -4, -2, 0],
+      borderRadius: 4,
+    },
+  },
+
+  m: {
+    padding: [7, 12],
+    gap: 4,
+    borderRadius: 6,
+
+    fontSize: 15,
+    lineHeight: '18px',
+    letterSpacing: 0.15,
+    fontWeight: 'bold',
+
+    '& $text': {},
+
+    '& $icon': {
+      width: 18,
+      height: 18,
+    },
+
+    '& $badge': {
+      padding: [2, 4],
+      margin: [-2, -7, -2, 0],
+      borderRadius: 4,
+    },
+  },
+
+  custom: {},
+});
+
+export type IStatusStyles = ITweakStyles<typeof useStyles, IStatusColors>;

package/src/components/Status/Status.tsx

@@ -1,49 +1,49 @@
-import { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { IIcon, renderIcon } from '../Icon';
-import { IStatusColor, IStatusSize } from './types';
-import { useStyles, IStatusStyles } from './Status.styles';
-
-export interface IStatusProps extends ICommonProps<IStatusStyles> {
-  children: ReactNode;
-  color: IStatusColor;
-  icon?: IIcon;
-  /** @default 's' */
-  size?: IStatusSize;
-  /** @default 'right' */
-  iconPosition?: 'left' | 'right';
-  badge?: ReactNode;
-}
-
-export const Status: FC<IStatusProps> = ({
-  children,
-  color,
-  size = 's',
-  icon,
-  iconPosition = 'right',
-  badge,
-  tweakStyles,
-  testId,
-  data,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <span
-      className={clsx(classes.root, classes[size], classes[color])}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {isReactNodeNotEmpty(children) && <span className={classes.text}>{children}</span>}
-      {isReactNodeNotEmpty(icon) && (
-        <span className={clsx(classes.icon, iconPosition === 'left' && classes.iconLeft)}>
-          {renderIcon(icon)}
-        </span>
-      )}
-      {isReactNodeNotEmpty(badge) && <span className={classes.badge}>{badge}</span>}
-    </span>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { IIcon, renderIcon } from '../Icon';
+import { IStatusColor, IStatusSize } from './types';
+import { useStyles, IStatusStyles } from './Status.styles';
+
+export interface IStatusProps extends ICommonProps<IStatusStyles> {
+  children: ReactNode;
+  color: IStatusColor;
+  icon?: IIcon;
+  /** @default 's' */
+  size?: IStatusSize;
+  /** @default 'right' */
+  iconPosition?: 'left' | 'right';
+  badge?: ReactNode;
+}
+
+export const Status: FC<IStatusProps> = ({
+  children,
+  color,
+  size = 's',
+  icon,
+  iconPosition = 'right',
+  badge,
+  tweakStyles,
+  testId,
+  data,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <span
+      className={clsx(classes.root, classes[size], classes[color])}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {isReactNodeNotEmpty(children) && <span className={classes.text}>{children}</span>}
+      {isReactNodeNotEmpty(icon) && (
+        <span className={clsx(classes.icon, iconPosition === 'left' && classes.iconLeft)}>
+          {renderIcon(icon)}
+        </span>
+      )}
+      {isReactNodeNotEmpty(badge) && <span className={classes.badge}>{badge}</span>}
+    </span>
+  );
+};

package/src/components/Status/constants.ts

@@ -1,11 +1 @@
-export const STATUS_COLORS = [
-  'green',
-  'teal',
-  'blue',
-  'grey',
-  'orange',
-  'red',
-  'violet',
-  'custom',
-] as const;
-export const STATUS_SIZES = ['xs', 's', 'm'] as const;
+export const STATUS_SIZES = ['xs', 's', 'm'] as const;

package/src/components/Status/index.ts

@@ -1,3 +1,3 @@
-export * from './Status';
-
-export type { IStatusStyles } from './Status.styles';
+export * from './Status';
+export * from './types';
+export type { IStatusStyles } from './Status.styles';

package/src/components/Status/types.ts

@@ -1,5 +1,9 @@
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-
-export type IStatusColor = (typeof STATUS_COLORS)[number];
-
-export type IStatusSize = (typeof STATUS_SIZES)[number];
+import { IDefaultExtendableProps } from '../../types';
+import type { STATUS_SIZES } from './constants';
+
+export type IStatusSize = (typeof STATUS_SIZES)[number];
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IStatusColors extends IDefaultExtendableProps {}
+
+export type IStatusColor = keyof IStatusColors;

package/src/components/Switch/Switch.stories.tsx

@@ -1,40 +1,40 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { Switch } from './Switch';
-
-export default {
-  title: 'Controls/Switch',
-  component: Switch,
-  argTypes: {
-    labelPosition: { control: 'inline-radio', options: ['left', 'right'] },
-    color: { control: 'inline-radio', options: ['primary', 'secondary'] },
-  },
-};
-
-const Template: ComponentStory<typeof Switch> = (args) => {
-  const [isChecked, setIsChecked] = useState(true);
-
-  return (
-    <Switch
-      {...args}
-      isChecked={isChecked}
-      onChange={(value) => setIsChecked(value.isEnabled)}
-      value="check"
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Label',
-  labelPosition: 'right',
-  isDisabled: false,
-  color: 'primary',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'testId', 'onChange'],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { Switch } from './Switch';
+
+export default {
+  title: 'Controls/Switch',
+  component: Switch,
+  argTypes: {
+    labelPosition: { control: 'inline-radio', options: ['left', 'right'] },
+    color: { control: 'inline-radio', options: ['primary', 'secondary'] },
+  },
+};
+
+const Template: ComponentStory<typeof Switch> = (args) => {
+  const [isChecked, setIsChecked] = useState(true);
+
+  return (
+    <Switch
+      {...args}
+      isChecked={isChecked}
+      onChange={(value) => setIsChecked(value.isEnabled)}
+      value="check"
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Label',
+  labelPosition: 'right',
+  isDisabled: false,
+  color: 'primary',
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'testId', 'onChange'],
+  },
+};