@true-engineering/true-react-common-ui-kit 3.50.0 → 3.50.1

package/src/components/Switch/Switch.tsx

@@ -1,75 +1,75 @@
-import { 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 { ISwitchState } from './types';
-import { useStyles, ISwitchStyles } from './Switch.styles';
-
-export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
-  children?: ReactNode;
-  value: V;
-  /** @default false */
-  isChecked: boolean | undefined;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isInvalid?: boolean;
-  /** @default 'right' */
-  labelPosition?: 'left' | 'right';
-  /** @default 'primary' */
-  color?: 'primary' | 'secondary';
-  onChange: (state: ISwitchState<V>) => void;
-}
-
-export const Switch = <V extends string>({
-  isDisabled = false,
-  isChecked = false,
-  isInvalid = false,
-  value,
-  children,
-  labelPosition = 'right',
-  color = 'primary',
-  data,
-  tweakStyles,
-  testId,
-  onChange,
-}: ISwitchProps<V>): JSX.Element => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
-
-  return (
-    <label
-      className={clsx(classes.root, classes[color], {
-        [classes.disabled]: isDisabled,
-        [classes.checked]: isChecked,
-        [classes.invalid]: isInvalid,
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <span className={classes.switch}>
-        <input
-          type="checkbox"
-          name={value}
-          className={classes.input}
-          onChange={isDisabled ? undefined : handleChange}
-          checked={isChecked}
-          disabled={isDisabled}
-          {...addDataTestId(testId, 'input')}
-        />
-      </span>
-      {isReactNodeNotEmpty(children) && (
-        <span
-          className={clsx(
-            classes.label,
-            classes[labelPosition === 'left' ? 'labelLeft' : 'labelRight'],
-          )}
-        >
-          {children}
-        </span>
-      )}
-    </label>
-  );
-};
+import { 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 { ISwitchState } from './types';
+import { useStyles, ISwitchStyles } from './Switch.styles';
+
+export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
+  children?: ReactNode;
+  value: V;
+  /** @default false */
+  isChecked: boolean | undefined;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isInvalid?: boolean;
+  /** @default 'right' */
+  labelPosition?: 'left' | 'right';
+  /** @default 'primary' */
+  color?: 'primary' | 'secondary';
+  onChange: (state: ISwitchState<V>) => void;
+}
+
+export const Switch = <V extends string>({
+  isDisabled = false,
+  isChecked = false,
+  isInvalid = false,
+  value,
+  children,
+  labelPosition = 'right',
+  color = 'primary',
+  data,
+  tweakStyles,
+  testId,
+  onChange,
+}: ISwitchProps<V>): JSX.Element => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
+
+  return (
+    <label
+      className={clsx(classes.root, classes[color], {
+        [classes.disabled]: isDisabled,
+        [classes.checked]: isChecked,
+        [classes.invalid]: isInvalid,
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <span className={classes.switch}>
+        <input
+          type="checkbox"
+          name={value}
+          className={classes.input}
+          onChange={isDisabled ? undefined : handleChange}
+          checked={isChecked}
+          disabled={isDisabled}
+          {...addDataTestId(testId, 'input')}
+        />
+      </span>
+      {isReactNodeNotEmpty(children) && (
+        <span
+          className={clsx(
+            classes.label,
+            classes[labelPosition === 'left' ? 'labelLeft' : 'labelRight'],
+          )}
+        >
+          {children}
+        </span>
+      )}
+    </label>
+  );
+};

package/src/components/Switch/index.ts

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

package/src/components/Switch/types.ts

@@ -1,4 +1,4 @@
-export interface ISwitchState<V = string> {
-  name: V;
-  isEnabled: boolean;
-}
+export interface ISwitchState<V = string> {
+  name: V;
+  isEnabled: boolean;
+}

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,37 +1,37 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { TextArea } from './TextArea';
-
-export default {
-  title: 'Inputs/TextArea',
-  component: TextArea,
-  argTypes: {
-    maxLength: {
-      control: { type: 'range', min: 10, max: 500, step: 10 },
-    },
-  },
-};
-
-const Template: ComponentStory<typeof TextArea> = (args) => {
-  const [value, setValue] = useState('');
-  return <TextArea {...args} value={value} onChange={(v) => setValue(v)} />;
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  rows: 5,
-  maxLength: 500,
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isAutoSizeable: true,
-  shouldAlwaysShowPlaceholder: false,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { TextArea } from './TextArea';
+
+export default {
+  title: 'Inputs/TextArea',
+  component: TextArea,
+  argTypes: {
+    maxLength: {
+      control: { type: 'range', min: 10, max: 500, step: 10 },
+    },
+  },
+};
+
+const Template: ComponentStory<typeof TextArea> = (args) => {
+  const [value, setValue] = useState('');
+  return <TextArea {...args} value={value} onChange={(v) => setValue(v)} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  infoMessage: 'Message Info',
+  rows: 5,
+  maxLength: 500,
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  isActive: false,
+  isDisabled: false,
+  isRequired: false,
+  isAutoSizeable: true,
+  shouldAlwaysShowPlaceholder: false,
+};

package/src/components/TextArea/TextArea.styles.ts

@@ -1,195 +1,195 @@
-import { ITweakStyles, animations, createThemedStyles, helpers } from '../../theme';
-
-export const useStyles = createThemedStyles('TextArea', {
-  root: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-
-  wrapper: {
-    '--textarea-padding-x': '12px',
-
-    display: 'flex',
-    position: 'relative',
-    width: '100%',
-    flexGrow: 1,
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'border-color',
-    backgroundColor: 'white',
-    border: ['solid', 1, 'lightgray'],
-  },
-
-  textarea: {
-    ...helpers.withScrollBar,
-
-    width: '100%',
-    height: '100%',
-    outline: 'none',
-    outlineStyle: 'none',
-    fontFamily: 'inherit',
-    fontSize: 16,
-    padding: [14, 'var(--textarea-padding-x)', 8],
-    scrollPadding: '14px 0 8px',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-    border: 'none',
-    resize: 'none',
-
-    '&:disabled': {
-      extend: 'disabled',
-    },
-
-    '&::placeholder': {
-      opacity: 1,
-    },
-
-    MozAppearance: 'textfield',
-    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-      WebkitAppearance: 'none',
-      margin: 0,
-    },
-  },
-
-  autosize: {
-    display: 'inline-grid',
-    gridTemplateRows: 'minmax(0, 100%)',
-
-    '& > $textarea, &::after': {
-      gridArea: '1 / 1 / 2 / 2',
-    },
-
-    '&::after': {
-      extend: 'textarea',
-      content: 'attr(data-value) " "',
-      overflowWrap: 'break-word',
-      whiteSpace: 'pre-wrap',
-      visibility: 'hidden',
-      scrollbarGutter: 'stable',
-    },
-  },
-
-  focused: {
-    position: 'relative',
-    zIndex: 1,
-  },
-
-  withFloatingLabel: {
-    '& $textarea, &::after': {
-      paddingTop: 24,
-      scrollPaddingTop: '24px',
-    },
-  },
-
-  floating: {},
-
-  activeLabel: {
-    display: 'none',
-
-    '&$floating': {
-      '--scale-factor': '0.75',
-
-      display: 'block',
-      transform: 'scale(var(--scale-factor)) translateY(-120%)',
-      maxWidth: 'calc(var(--label-max-width) / var(--scale-factor))',
-    },
-  },
-
-  required: {
-    '&:before': {
-      content: '""',
-      position: 'absolute',
-      left: -12,
-      top: 20,
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-
-      backgroundColor: 'red',
-    },
-  },
-
-  disabled: {},
-
-  label: {
-    '--label-max-width': 'calc(100% - 2 * var(--textarea-padding-x))',
-
-    position: 'absolute',
-    pointerEvents: 'none',
-    left: 'var(--textarea-padding-x)',
-    top: 24,
-    maxWidth: 'var(--label-max-width)',
-    transformOrigin: 'top left',
-    transform: 'translateY(-50%)',
-    transition: animations.defaultTransition,
-    transitionProperty: ['max-width', 'transform', 'color'],
-    fontSize: 16,
-  },
-
-  invalid: {
-    borderColor: 'red',
-  },
-
-  invalidLabel: {},
-
-  error: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-    color: 'red',
-  },
-
-  requiredLabel: {
-    '--required-label-size': '6px',
-    '--required-label-right': '8px',
-
-    maxWidth: 'calc(100% - 2 * var(--textarea-padding-x) - var(--required-label-right))',
-
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      right: 'calc(-1 * var(--required-label-right))',
-      top: 4,
-      transform: 'translate(0, -50%)',
-      width: 'var(--required-label-size)',
-      height: 'var(--required-label-size)',
-      borderRadius: '50%',
-      backgroundColor: 'red',
-    },
-  },
-
-  labelText: {
-    display: 'block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-
-  symbolsCount: {
-    display: 'block',
-    textAlign: 'right',
-    marginTop: 4,
-    fontSize: 12,
-    marginLeft: 'auto',
-    paddingLeft: 32,
-    whiteSpace: 'nowrap',
-  },
-
-  symbolsCountError: {
-    color: 'red',
-  },
-
-  footer: {
-    display: 'flex',
-  },
-
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-  },
-});
-
-export type ITextAreaStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, animations, createThemedStyles, helpers } from '../../theme';
+
+export const useStyles = createThemedStyles('TextArea', {
+  root: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  wrapper: {
+    '--textarea-padding-x': '12px',
+
+    display: 'flex',
+    position: 'relative',
+    width: '100%',
+    flexGrow: 1,
+    boxSizing: 'border-box',
+    transition: animations.defaultTransition,
+    transitionProperty: 'border-color',
+    backgroundColor: 'white',
+    border: ['solid', 1, 'lightgray'],
+  },
+
+  textarea: {
+    ...helpers.withScrollBar,
+
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    outlineStyle: 'none',
+    fontFamily: 'inherit',
+    fontSize: 16,
+    padding: [14, 'var(--textarea-padding-x)', 8],
+    scrollPadding: '14px 0 8px',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
+    border: 'none',
+    resize: 'none',
+
+    '&:disabled': {
+      extend: 'disabled',
+    },
+
+    '&::placeholder': {
+      opacity: 1,
+    },
+
+    MozAppearance: 'textfield',
+    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  },
+
+  autosize: {
+    display: 'inline-grid',
+    gridTemplateRows: 'minmax(0, 100%)',
+
+    '& > $textarea, &::after': {
+      gridArea: '1 / 1 / 2 / 2',
+    },
+
+    '&::after': {
+      extend: 'textarea',
+      content: 'attr(data-value) " "',
+      overflowWrap: 'break-word',
+      whiteSpace: 'pre-wrap',
+      visibility: 'hidden',
+      scrollbarGutter: 'stable',
+    },
+  },
+
+  focused: {
+    position: 'relative',
+    zIndex: 1,
+  },
+
+  withFloatingLabel: {
+    '& $textarea, &::after': {
+      paddingTop: 24,
+      scrollPaddingTop: '24px',
+    },
+  },
+
+  floating: {},
+
+  activeLabel: {
+    display: 'none',
+
+    '&$floating': {
+      '--scale-factor': '0.75',
+
+      display: 'block',
+      transform: 'scale(var(--scale-factor)) translateY(-120%)',
+      maxWidth: 'calc(var(--label-max-width) / var(--scale-factor))',
+    },
+  },
+
+  required: {
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: -12,
+      top: 20,
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+
+      backgroundColor: 'red',
+    },
+  },
+
+  disabled: {},
+
+  label: {
+    '--label-max-width': 'calc(100% - 2 * var(--textarea-padding-x))',
+
+    position: 'absolute',
+    pointerEvents: 'none',
+    left: 'var(--textarea-padding-x)',
+    top: 24,
+    maxWidth: 'var(--label-max-width)',
+    transformOrigin: 'top left',
+    transform: 'translateY(-50%)',
+    transition: animations.defaultTransition,
+    transitionProperty: ['max-width', 'transform', 'color'],
+    fontSize: 16,
+  },
+
+  invalid: {
+    borderColor: 'red',
+  },
+
+  invalidLabel: {},
+
+  error: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+    color: 'red',
+  },
+
+  requiredLabel: {
+    '--required-label-size': '6px',
+    '--required-label-right': '8px',
+
+    maxWidth: 'calc(100% - 2 * var(--textarea-padding-x) - var(--required-label-right))',
+
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      right: 'calc(-1 * var(--required-label-right))',
+      top: 4,
+      transform: 'translate(0, -50%)',
+      width: 'var(--required-label-size)',
+      height: 'var(--required-label-size)',
+      borderRadius: '50%',
+      backgroundColor: 'red',
+    },
+  },
+
+  labelText: {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+
+  symbolsCount: {
+    display: 'block',
+    textAlign: 'right',
+    marginTop: 4,
+    fontSize: 12,
+    marginLeft: 'auto',
+    paddingLeft: 32,
+    whiteSpace: 'nowrap',
+  },
+
+  symbolsCountError: {
+    color: 'red',
+  },
+
+  footer: {
+    display: 'flex',
+  },
+
+  info: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+  },
+});
+
+export type ITextAreaStyles = ITweakStyles<typeof useStyles>;