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

package/src/components/Description/Description.tsx

@@ -1,61 +1,61 @@
-import { FC, useState } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { LINK_REGEXP } from './constants';
-import { useStyles, IDescriptionStyles } from './Description.styles';
-
-export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
-  text: string;
-  moreTitle?: string;
-  lessTitle?: string;
-  /** @default 150 */
-  truncateIndex?: number;
-  /** @default true */
-  isAlwaysOpen?: boolean;
-}
-
-export const Description: FC<IDescriptionProps> = ({
-  text,
-  moreTitle,
-  lessTitle,
-  truncateIndex = 150,
-  isAlwaysOpen = true,
-  testId,
-  data,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const isTooShort = text.length < truncateIndex;
-  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
-  const link = text.match(LINK_REGEXP);
-  const linkText = link && link[0];
-  const textWithNoLink = text.replace(LINK_REGEXP, '');
-
-  const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isAlwaysOpen || isOpen || isTooShort ? (
-        <div>
-          <span>{textWithNoLink} </span>
-          {!!linkText && (
-            <a className={classes.link} href={linkText} target="_blank" rel="noopener noreferrer">
-              {linkText}
-            </a>
-          )}
-        </div>
-      ) : (
-        <div>
-          <span>{shortText}</span>
-        </div>
-      )}
-      {isAlwaysOpen || isTooShort ? undefined : (
-        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
-          {isOpen ? lessTitle : moreTitle}
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, useState } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { LINK_REGEXP } from './constants';
+import { useStyles, IDescriptionStyles } from './Description.styles';
+
+export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
+  text: string;
+  moreTitle?: string;
+  lessTitle?: string;
+  /** @default 150 */
+  truncateIndex?: number;
+  /** @default true */
+  isAlwaysOpen?: boolean;
+}
+
+export const Description: FC<IDescriptionProps> = ({
+  text,
+  moreTitle,
+  lessTitle,
+  truncateIndex = 150,
+  isAlwaysOpen = true,
+  testId,
+  data,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isTooShort = text.length < truncateIndex;
+  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
+  const link = text.match(LINK_REGEXP);
+  const linkText = link && link[0];
+  const textWithNoLink = text.replace(LINK_REGEXP, '');
+
+  const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {isAlwaysOpen || isOpen || isTooShort ? (
+        <div>
+          <span>{textWithNoLink} </span>
+          {!!linkText && (
+            <a className={classes.link} href={linkText} target="_blank" rel="noopener noreferrer">
+              {linkText}
+            </a>
+          )}
+        </div>
+      ) : (
+        <div>
+          <span>{shortText}</span>
+        </div>
+      )}
+      {isAlwaysOpen || isTooShort ? undefined : (
+        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? lessTitle : moreTitle}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Description/constants.ts

@@ -1 +1 @@
-export const LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
+export const LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;

package/src/components/Description/index.ts

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

package/src/components/FileInput/FileInput.stories.tsx

@@ -1,75 +1,75 @@
-import { format } from 'date-fns';
-import { ru } from 'date-fns/locale';
-import { ComponentStory } from '@storybook/react';
-import { mimeTypes } from '../../constants';
-import { FileItem } from '../FileItem';
-import { Icon } from '../Icon';
-import { FileInput } from './FileInput';
-
-export default {
-  title: 'Inputs/FileInput',
-  component: FileInput,
-};
-
-const description = 'Форматы файла: xlsx, xlsm. Размер — до 1 МБ';
-const text = (
-  <div style={{ display: 'flex', alignItems: 'center' }}>
-    <span style={{ display: 'inline-block', width: 20, height: 20, marginRight: 8 }}>
-      <Icon type="upload" />
-    </span>
-    Перетащите или выберите файл
-  </div>
-);
-
-const handleAdd = (newFiles: File[]) =>
-  console.log(
-    'added:',
-    newFiles.map(({ name }) => name),
-  );
-
-const Template: ComponentStory<typeof FileInput> = (args) => (
-  <div style={{ width: 652 }}>
-    <FileInput {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Скан документа',
-  isDragAndDropDisabled: false,
-  isRequired: true,
-  isReadOnly: false,
-  isMultipleDisabled: false,
-  isDisabled: false,
-  isActive: false,
-  onAdd: handleAdd,
-  tweakStyles: {
-    fileList: {
-      '& > div': {
-        width: '270px',
-      },
-    },
-  },
-  description,
-  text,
-  fileList: (
-    <>
-      <FileItem
-        fileInfo={{ name: 'file1', type: mimeTypes.jpeg, size: 10000 }}
-        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
-      />
-      <FileItem
-        fileInfo={{ name: 'file 2', type: mimeTypes.xls }}
-        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
-        isDisabled
-      />
-    </>
-  ),
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['onAdd', 'tweakStyles'],
-  },
-};
+import { format } from 'date-fns';
+import { ru } from 'date-fns/locale';
+import { ComponentStory } from '@storybook/react';
+import { mimeTypes } from '../../constants';
+import { FileItem } from '../FileItem';
+import { Icon } from '../Icon';
+import { FileInput } from './FileInput';
+
+export default {
+  title: 'Inputs/FileInput',
+  component: FileInput,
+};
+
+const description = 'Форматы файла: xlsx, xlsm. Размер — до 1 МБ';
+const text = (
+  <div style={{ display: 'flex', alignItems: 'center' }}>
+    <span style={{ display: 'inline-block', width: 20, height: 20, marginRight: 8 }}>
+      <Icon type="upload" />
+    </span>
+    Перетащите или выберите файл
+  </div>
+);
+
+const handleAdd = (newFiles: File[]) =>
+  console.log(
+    'added:',
+    newFiles.map(({ name }) => name),
+  );
+
+const Template: ComponentStory<typeof FileInput> = (args) => (
+  <div style={{ width: 652 }}>
+    <FileInput {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Скан документа',
+  isDragAndDropDisabled: false,
+  isRequired: true,
+  isReadOnly: false,
+  isMultipleDisabled: false,
+  isDisabled: false,
+  isActive: false,
+  onAdd: handleAdd,
+  tweakStyles: {
+    fileList: {
+      '& > div': {
+        width: '270px',
+      },
+    },
+  },
+  description,
+  text,
+  fileList: (
+    <>
+      <FileItem
+        fileInfo={{ name: 'file1', type: mimeTypes.jpeg, size: 10000 }}
+        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+      />
+      <FileItem
+        fileInfo={{ name: 'file 2', type: mimeTypes.xls }}
+        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+        isDisabled
+      />
+    </>
+  ),
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['onAdd', 'tweakStyles'],
+  },
+};

package/src/components/FileInput/FileInput.styles.ts

@@ -1,80 +1,80 @@
-import { ITweakStyles, animations, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('FileInput', {
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
-
-  label: {
-    position: 'relative',
-    width: 'fit-content',
-    fontSize: 16,
-    marginBottom: 12,
-  },
-
-  requiredLabel: {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      right: -8,
-      top: 4,
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  description: {
-    marginBottom: 8,
-    fontSize: 12,
-  },
-
-  text: {
-    padding: [16, 0],
-  },
-
-  inputWrapper: {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    marginBottom: 8,
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color',
-  },
-
-  inputLabel: {
-    position: 'absolute',
-    inset: 0,
-    cursor: 'pointer',
-
-    '& input': {
-      opacity: 0,
-      width: 1,
-      height: 1,
-      zIndex: -1,
-    },
-  },
-
-  dragged: {},
-
-  active: {},
-
-  disabled: {
-    cursor: 'not-allowed',
-    pointerEvents: 'none',
-  },
-
-  fileList: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    columnGap: 6,
-    rowGap: 12,
-  },
-});
-
-export type IFileInputStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('FileInput', {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+
+  label: {
+    position: 'relative',
+    width: 'fit-content',
+    fontSize: 16,
+    marginBottom: 12,
+  },
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      right: -8,
+      top: 4,
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  description: {
+    marginBottom: 8,
+    fontSize: 12,
+  },
+
+  text: {
+    padding: [16, 0],
+  },
+
+  inputWrapper: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    marginBottom: 8,
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, color',
+  },
+
+  inputLabel: {
+    position: 'absolute',
+    inset: 0,
+    cursor: 'pointer',
+
+    '& input': {
+      opacity: 0,
+      width: 1,
+      height: 1,
+      zIndex: -1,
+    },
+  },
+
+  dragged: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
+
+  fileList: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    columnGap: 6,
+    rowGap: 12,
+  },
+});
+
+export type IFileInputStyles = ITweakStyles<typeof useStyles>;