@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha1

package/src/components/SearchInput/SearchInput.tsx

@@ -1,70 +1,49 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import {
-  addClickHandler,
-  addDataAttributes,
-  getTestId,
-  isNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IInputProps, Input } from '../Input';
-import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
-
-export interface ISearchInputProps
-  extends ICommonProps<ISearchInputStyles>,
-    Omit<
-      IInputProps,
-      | 'type'
-      | 'isInvalid'
-      | 'errorMessage'
-      | 'label'
-      | 'isActive'
-      | 'errorPosition'
-      | 'hasFloatingLabel'
-      | 'border'
-      | 'tweakStyles'
-    > {
-  // TODO: Можно будет удалить в 4й версии
-  onSearchIconClick?: () => void;
-}
-
-export const SearchInput: FC<ISearchInputProps> = ({
-  isClearable = true,
-  tweakStyles,
-  testId,
-  data,
-  onSearchIconClick,
-  ...props
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'SearchInput',
-  });
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data, testId)}>
-      <div
-        className={clsx(classes.icon, { [classes.iconClickable]: isNotEmpty(onSearchIconClick) })}
-        {...addClickHandler(onSearchIconClick)}
-      >
-        <Icon type="search" />
-      </div>
-      <Input
-        inputMode="search"
-        isClearable={isClearable}
-        isActive={props.value !== '' && props.value !== undefined}
-        testId={getTestId(testId, 'input')}
-        tweakStyles={tweakInputStyles}
-        hasFloatingLabel={false}
-        label={props.placeholder}
-        {...props}
-      />
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IInputProps, Input } from '../Input';
+import { inputStyles, ISearchInputStyles, useStyles } from './SearchInput.styles';
+
+export type ISearchInputProps = Omit<
+  IInputProps,
+  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles'
+> &
+  ICommonProps<ISearchInputStyles>;
+
+export const SearchInput: FC<ISearchInputProps> = ({
+  isClearable = true,
+  tweakStyles,
+  placeholder,
+  value,
+  testId,
+  data,
+  ...props
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'SearchInput',
+  });
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <div className={classes.icon}>
+        <Icon type="search" />
+      </div>
+      <Input
+        value={value}
+        placeholder={placeholder}
+        isClearable={isClearable}
+        testId={getTestId(testId, 'input')}
+        tweakStyles={tweakInputStyles}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/SearchInput/index.ts

@@ -1,2 +1,2 @@
-export * from './SearchInput';
-export type { ISearchInputStyles } from './SearchInput.styles';
+export * from './SearchInput';
+export type { ISearchInputStyles } from './SearchInput.styles';

package/src/components/Select/CustomSelect.stories.tsx

@@ -1,253 +1,250 @@
-import { useState } from 'react';
-import { createUseStyles } from 'react-jss';
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { type ComponentMeta, type ComponentStory } from '@storybook/react';
-import { Button, type IButtonStyles } from '../Button';
-import { Input, type IInputStyles } from '../Input';
-import { TextButton } from '../TextButton';
-import { Select, type ISelectProps } from './Select';
-
-interface ISelectWithCustomProps<Option> extends ISelectProps<Option> {
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  shouldHideOnScroll?: boolean;
-  canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
-}
-
-const useSelectStyles = createUseStyles({
-  option: {
-    width: '100%',
-    gap: 10,
-    display: 'grid',
-    gridTemplateColumns: 'minmax(0, 1fr) max-content',
-    alignItems: 'center',
-  },
-});
-
-const useCustomListHeaderStyles = createUseStyles({
-  customListHeader: {
-    padding: [10, 20],
-    boxSizing: 'border-box',
-  },
-
-  defaultView: {
-    display: 'grid',
-    placeItems: 'center',
-  },
-
-  inputView: {
-    gap: 10,
-    display: 'grid',
-    gridTemplateColumns: '1fr max-content',
-  },
-});
-
-const useCustomListFooterStyles = createUseStyles({
-  customListFooter: {
-    gap: 10,
-    padding: [6, 20],
-    boxSizing: 'border-box',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-});
-
-const inputTweakStyles: IInputStyles = {
-  inputWrapper: {
-    height: 24,
-  },
-
-  input: {
-    padding: [0, 4],
-  },
-};
-
-const buttonTweakStyles: IButtonStyles = {
-  s: {
-    height: 24,
-
-    '&$onlyIcon': {
-      width: 24,
-    },
-  },
-};
-
-interface ICustomListHeaderProps {
-  onAdd?: (option?: string) => void;
-}
-
-function CustomListHeader({ onAdd }: ICustomListHeaderProps) {
-  const classes = useCustomListHeaderStyles();
-
-  const [isAdding, setIsAdding] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-
-  const onAddClick = () => {
-    onAdd?.(inputValue);
-    setIsAdding(false);
-    setInputValue('');
-  };
-
-  return (
-    <div className={classes.customListHeader} onClick={(event) => event.stopPropagation()}>
-      {!isAdding && (
-        <div className={classes.defaultView}>
-          <TextButton icon="plus" hasCircleUnderIcon isBold onClick={() => setIsAdding(true)}>
-            Add Option
-          </TextButton>
-        </div>
-      )}
-      {isAdding && (
-        <div className={classes.inputView}>
-          <Input
-            value={inputValue}
-            border="bottom"
-            placeholder="Option Value"
-            tweakStyles={inputTweakStyles}
-            shouldFocusOnMount
-            onChange={setInputValue}
-          />
-          <Button size="s" icon="plus" tweakStyles={buttonTweakStyles} onClick={onAddClick} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface ICustomListFooterProps {
-  onReset?: () => void;
-  onClear?: () => void;
-}
-
-function CustomListFooter({ onReset, onClear }: ICustomListFooterProps) {
-  const classes = useCustomListFooterStyles();
-
-  return (
-    <div className={classes.customListFooter}>
-      <Button view="secondary" size="s" onClick={onReset}>
-        Reset
-      </Button>
-      <Button view="secondary" size="s" onClick={onClear}>
-        Clear
-      </Button>
-    </div>
-  );
-}
-
-function SelectWithCustomProps({
-  noMatchesLabel,
-  shouldUsePopper,
-  shouldRenderInBody,
-  shouldHideOnScroll,
-  canBeFlipped,
-  scrollParent,
-  ...restProps
-}: ISelectWithCustomProps<string>) {
-  const classes = useSelectStyles();
-  const [inputValue, setInputValue] = useState<string>();
-  const [options, setOptions] = useState<string[]>([]);
-
-  const handleAdd = (option?: string) => {
-    if (isStringNotEmpty(option)) {
-      setOptions((prevOptions) => [...prevOptions, option]);
-    }
-  };
-
-  const handleReset = () => {
-    setInputValue(undefined);
-  };
-
-  const handleClear = () => {
-    setInputValue(undefined);
-    setOptions([]);
-  };
-
-  const handleRemove = (option: string) => {
-    setOptions((prevOptions) => prevOptions.filter((entry) => entry !== option));
-  };
-
-  const renderOption = (value: string) => (
-    <div className={classes.option}>
-      <span>{value}</span>
-      <Button
-        size="s"
-        icon="trash-can"
-        tweakStyles={buttonTweakStyles}
-        onClick={(event) => {
-          event.stopPropagation();
-
-          handleRemove(value);
-        }}
-      />
-    </div>
-  );
-
-  const props = {
-    ...restProps,
-    onChange: setInputValue,
-    value: inputValue,
-    options,
-    convertValueToReactNode: renderOption,
-  };
-
-  return (
-    <Select
-      {...props}
-      header={<CustomListHeader onAdd={handleAdd} />}
-      footer={<CustomListFooter onReset={handleReset} onClear={handleClear} />}
-      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
-      tweakStyles={{
-        tweakSelectList: {
-          defaultCell: {
-            padding: 0,
-          },
-        },
-      }}
-      dropdownOptions={{
-        shouldUsePopper,
-        shouldRenderInBody,
-        shouldHideOnScroll,
-        canBeFlipped,
-        scrollParent,
-      }}
-    />
-  );
-}
-
-export default {
-  title: 'Controls/Select',
-  component: SelectWithCustomProps,
-  argTypes: {
-    scrollParent: {
-      options: ['document', 'auto'],
-      control: { type: 'select' },
-    },
-  },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const CustomSelect = Template.bind({});
-
-CustomSelect.args = {
-  label: 'Dropdown',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: '',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: false,
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-};
+import { useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { type ComponentMeta, type ComponentStory } from '@storybook/react';
+import { Button, type IButtonStyles } from '../Button';
+import { type IInputStyles, Input } from '../Input';
+import { TextButton } from '../TextButton';
+import { type ISelectProps, Select } from './Select';
+
+interface ISelectWithCustomProps<Option> extends ISelectProps<Option> {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+const useSelectStyles = createUseStyles({
+  option: {
+    width: '100%',
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) max-content',
+    alignItems: 'center',
+  },
+});
+
+const useCustomListHeaderStyles = createUseStyles({
+  customListHeader: {
+    padding: [10, 20],
+    boxSizing: 'border-box',
+  },
+
+  defaultView: {
+    display: 'grid',
+    placeItems: 'center',
+  },
+
+  inputView: {
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: '1fr max-content',
+  },
+});
+
+const useCustomListFooterStyles = createUseStyles({
+  customListFooter: {
+    gap: 10,
+    padding: [6, 20],
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+});
+
+const inputTweakStyles: IInputStyles = {
+  tweakControlWrapper: {
+    controlWrapper: {
+      '--control-height': '24px',
+    },
+  },
+
+  input: {
+    padding: [0, 4],
+  },
+};
+
+const buttonTweakStyles: IButtonStyles = {
+  s: {
+    height: 24,
+
+    '&$onlyIcon': {
+      width: 24,
+    },
+  },
+};
+
+interface ICustomListHeaderProps {
+  onAdd?: (option?: string) => void;
+}
+
+function CustomListHeader({ onAdd }: ICustomListHeaderProps) {
+  const classes = useCustomListHeaderStyles();
+
+  const [isAdding, setIsAdding] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const onAddClick = () => {
+    onAdd?.(inputValue);
+    setIsAdding(false);
+    setInputValue('');
+  };
+
+  return (
+    <div className={classes.customListHeader} onClick={(event) => event.stopPropagation()}>
+      {!isAdding && (
+        <div className={classes.defaultView}>
+          <TextButton icon="plus" hasCircleUnderIcon isBold onClick={() => setIsAdding(true)}>
+            Add Option
+          </TextButton>
+        </div>
+      )}
+      {isAdding && (
+        <div className={classes.inputView}>
+          <Input
+            value={inputValue}
+            placeholder="Option Value"
+            tweakStyles={inputTweakStyles}
+            shouldFocusOnMount
+            onChange={setInputValue}
+          />
+          <Button size="s" icon="plus" tweakStyles={buttonTweakStyles} onClick={onAddClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ICustomListFooterProps {
+  onReset?: () => void;
+  onClear?: () => void;
+}
+
+function CustomListFooter({ onReset, onClear }: ICustomListFooterProps) {
+  const classes = useCustomListFooterStyles();
+
+  return (
+    <div className={classes.customListFooter}>
+      <Button view="secondary" size="s" onClick={onReset}>
+        Reset
+      </Button>
+      <Button view="secondary" size="s" onClick={onClear}>
+        Clear
+      </Button>
+    </div>
+  );
+}
+
+function SelectWithCustomProps({
+  noMatchesLabel,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  canBeFlipped,
+  scrollParent,
+  ...restProps
+}: ISelectWithCustomProps<string>) {
+  const classes = useSelectStyles();
+  const [inputValue, setInputValue] = useState<string>();
+  const [options, setOptions] = useState<string[]>([]);
+
+  const handleAdd = (option?: string) => {
+    if (isStringNotEmpty(option)) {
+      setOptions((prevOptions) => [...prevOptions, option]);
+    }
+  };
+
+  const handleReset = () => {
+    setInputValue(undefined);
+  };
+
+  const handleClear = () => {
+    setInputValue(undefined);
+    setOptions([]);
+  };
+
+  const handleRemove = (option: string) => {
+    setOptions((prevOptions) => prevOptions.filter((entry) => entry !== option));
+  };
+
+  const renderOption = (value: string) => (
+    <div className={classes.option}>
+      <span>{value}</span>
+      <Button
+        size="s"
+        icon="trash-can"
+        tweakStyles={buttonTweakStyles}
+        onClick={(event) => {
+          event.stopPropagation();
+
+          handleRemove(value);
+        }}
+      />
+    </div>
+  );
+
+  const props = {
+    ...restProps,
+    onChange: setInputValue,
+    value: inputValue,
+    options,
+    convertValueToReactNode: renderOption,
+  };
+
+  return (
+    <Select
+      {...props}
+      header={<CustomListHeader onAdd={handleAdd} />}
+      footer={<CustomListFooter onReset={handleReset} onClear={handleClear} />}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      tweakStyles={{
+        tweakSelectList: {
+          defaultCell: {
+            padding: 0,
+          },
+        },
+      }}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Controls/Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    scrollParent: {
+      options: ['document', 'auto'],
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof SelectWithCustomProps>;
+
+const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
+  <SelectWithCustomProps {...args} />
+);
+
+export const CustomSelect = Template.bind({});
+
+CustomSelect.args = {
+  label: 'Dropdown',
+  noMatchesLabel: 'No matches',
+  isInvalid: false,
+  errorMessage: '',
+  isDisabled: false,
+  isRequired: false,
+  isClearable: false,
+  shouldUsePopper: false,
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+  shouldScrollToList: true,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};