@true-engineering/true-react-common-ui-kit 1.7.0 → 1.8.0

package/src/components/DateInput/DateInput.stories.tsx

@@ -1,63 +1,63 @@
-import { ComponentStory } from '@storybook/react';
-import { format, isValid } from 'date-fns';
-import { useEffect, useState } from 'react';
-
-import { DateInput } from './DateInput';
-
-export default {
-  title: 'Inputs/DateInput',
-  component: DateInput,
-};
-
-const Template: ComponentStory<typeof DateInput> = (args) => {
-  const [value, setValue] = useState(args.date);
-
-  useEffect(() => {
-    setValue(args.date);
-  }, [args.date]);
-
-  const startDateValue =
-    args.startDate !== undefined && isValid(args.startDate)
-      ? format(new Date(args.startDate), 'dd.MM.yyyy')
-      : undefined;
-
-  const endDateValue =
-    args.endDate !== undefined && isValid(args.endDate)
-      ? format(new Date(args.endDate), 'dd.MM.yyyy')
-      : undefined;
-
-  return (
-    <DateInput
-      {...args}
-      date={value}
-      onChange={(d) => setValue(d)}
-      startDate={startDateValue}
-      endDate={endDateValue}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  date: '23.01.2023',
-  startDate: undefined,
-  endDate: undefined,
-  isRange: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { format, isValid } from 'date-fns';
+import { useEffect, useState } from 'react';
+
+import { DateInput } from './DateInput';
+
+export default {
+  title: 'Inputs/DateInput',
+  component: DateInput,
+};
+
+const Template: ComponentStory<typeof DateInput> = (args) => {
+  const [value, setValue] = useState(args.date);
+
+  useEffect(() => {
+    setValue(args.date);
+  }, [args.date]);
+
+  const startDateValue =
+    args.startDate !== undefined && isValid(args.startDate)
+      ? format(new Date(args.startDate), 'dd.MM.yyyy')
+      : undefined;
+
+  const endDateValue =
+    args.endDate !== undefined && isValid(args.endDate)
+      ? format(new Date(args.endDate), 'dd.MM.yyyy')
+      : undefined;
+
+  return (
+    <DateInput
+      {...args}
+      date={value}
+      onChange={(d) => setValue(d)}
+      startDate={startDateValue}
+      endDate={endDateValue}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  date: '23.01.2023',
+  startDate: undefined,
+  endDate: undefined,
+  isRange: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'tabIndex',
+      'onChange',
+      'onFocus',
+      'onBlur',
+      'onPaste',
+      'onIconClick',
+      'onKeyDown',
+    ],
+  },
+};

package/src/components/DateInput/DateInput.styles.ts

@@ -1,14 +1,14 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    cursor: 'pointer',
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-  },
-
-  tweakInput: {},
-};
-
-export type DateInputStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    cursor: 'pointer',
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+  },
+
+  tweakInput: {},
+};
+
+export type DateInputStyles = ComponentStyles<typeof styles>;

package/src/components/DateInput/DateInput.tsx

@@ -1,60 +1,60 @@
-import { FC } from 'react';
-import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
-import { IDataAttributes } from '../../types';
-import { IInputProps, Input } from '../Input';
-
-import { DateInputStyles, styles } from './DateInput.styles';
-
-export interface IDateInputProps
-  extends Omit<IInputProps, 'onChange' | 'value'> {
-  tweakStyles?: DateInputStyles;
-  isRange?: boolean;
-  date?: string;
-  startDate?: string;
-  endDate?: string;
-  data?: IDataAttributes;
-  onChange: (date: string) => void;
-}
-
-export const DateInput: FC<IDateInputProps> = ({
-  isRange,
-  date,
-  startDate = '',
-  endDate = '',
-  data,
-  onChange,
-  tweakStyles,
-  ...props
-}) => {
-  const { classes, componentStyles } = useTheme(
-    'DateInput',
-    styles,
-    tweakStyles,
-  );
-
-  const mainProps: IInputProps = isRange
-    ? {
-        value: `${startDate}${endDate}`,
-        onChange: (v: string) =>
-          onChange(v !== '__.__.____ - __.__.____' ? v : ''),
-        mask: '99.99.9999 - 99.99.9999',
-      }
-    : {
-        value: date,
-        onChange: (v: string) => onChange(v !== '__.__.____' ? v : ''),
-        mask: '99.99.9999',
-      };
-
-  const tweakInputStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakInput',
-  );
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      <Input {...mainProps} {...props} tweakStyles={tweakInputStyles} />
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { IDataAttributes } from '../../types';
+import { IInputProps, Input } from '../Input';
+
+import { DateInputStyles, styles } from './DateInput.styles';
+
+export interface IDateInputProps
+  extends Omit<IInputProps, 'onChange' | 'value'> {
+  tweakStyles?: DateInputStyles;
+  isRange?: boolean;
+  date?: string;
+  startDate?: string;
+  endDate?: string;
+  data?: IDataAttributes;
+  onChange: (date: string) => void;
+}
+
+export const DateInput: FC<IDateInputProps> = ({
+  isRange,
+  date,
+  startDate = '',
+  endDate = '',
+  data,
+  onChange,
+  tweakStyles,
+  ...props
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'DateInput',
+    styles,
+    tweakStyles,
+  );
+
+  const mainProps: IInputProps = isRange
+    ? {
+        value: `${startDate}${endDate}`,
+        onChange: (v: string) =>
+          onChange(v !== '__.__.____ - __.__.____' ? v : ''),
+        mask: '99.99.9999 - 99.99.9999',
+      }
+    : {
+        value: date,
+        onChange: (v: string) => onChange(v !== '__.__.____' ? v : ''),
+        mask: '99.99.9999',
+      };
+
+  const tweakInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakInput',
+  );
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <Input {...mainProps} {...props} tweakStyles={tweakInputStyles} />
+    </div>
+  );
+};

package/src/components/DateInput/index.ts

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

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,96 +1,96 @@
-import { ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { DatePicker } from './DatePicker';
-
-import ru from 'date-fns/locale/ru';
-
-const months = [
-  'Январь',
-  'Февраль',
-  'Март',
-  'Апрель',
-  'Май',
-  'Июнь',
-  'Июль',
-  'Август',
-  'Сентябрь',
-  'Октябрь',
-  'Ноябрь',
-  'Декабрь',
-];
-
-export default {
-  title: 'Inputs/DatePicker',
-  component: DatePicker,
-};
-
-const Template: ComponentStory<typeof DatePicker> = (args) => {
-  const [date, setDate] = useState<Date | null>(null);
-
-  const [startDate, setStartDate] = useState<Date | null>(
-    args.startDate ? new Date(args.startDate) : null,
-  );
-  const [endDate, setEndDate] = useState<Date | null>(
-    args.endDate ? new Date(args.endDate) : null,
-  );
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: 600,
-        overflow: 'auto',
-        border: '1px dotted rgba(0,0,0,.2)',
-        width: 800,
-      }}
-    >
-      <div style={{ display: 'flex', height: 48 }}>
-        <DatePicker
-          {...args}
-          selectedDate={date}
-          onChangeDate={!args.isRange ? (d) => setDate(d) : undefined}
-          startDate={startDate}
-          endDate={endDate}
-          onChangeRange={
-            args.isRange
-              ? (dates) => {
-                  if (dates !== null) {
-                    setStartDate(dates[0]);
-                    setEndDate(dates[1]);
-                  }
-                }
-              : undefined
-          }
-          locale={ru}
-          months={months}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Дата',
-  isRange: false,
-  isClearable: true,
-  shouldRenderPopperInBody: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { DatePicker } from './DatePicker';
+
+import ru from 'date-fns/locale/ru';
+
+const months = [
+  'Январь',
+  'Февраль',
+  'Март',
+  'Апрель',
+  'Май',
+  'Июнь',
+  'Июль',
+  'Август',
+  'Сентябрь',
+  'Октябрь',
+  'Ноябрь',
+  'Декабрь',
+];
+
+export default {
+  title: 'Inputs/DatePicker',
+  component: DatePicker,
+};
+
+const Template: ComponentStory<typeof DatePicker> = (args) => {
+  const [date, setDate] = useState<Date | null>(null);
+
+  const [startDate, setStartDate] = useState<Date | null>(
+    args.startDate ? new Date(args.startDate) : null,
+  );
+  const [endDate, setEndDate] = useState<Date | null>(
+    args.endDate ? new Date(args.endDate) : null,
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 600,
+        overflow: 'auto',
+        border: '1px dotted rgba(0,0,0,.2)',
+        width: 800,
+      }}
+    >
+      <div style={{ display: 'flex', height: 48 }}>
+        <DatePicker
+          {...args}
+          selectedDate={date}
+          onChangeDate={!args.isRange ? (d) => setDate(d) : undefined}
+          startDate={startDate}
+          endDate={endDate}
+          onChangeRange={
+            args.isRange
+              ? (dates) => {
+                  if (dates !== null) {
+                    setStartDate(dates[0]);
+                    setEndDate(dates[1]);
+                  }
+                }
+              : undefined
+          }
+          locale={ru}
+          months={months}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Дата',
+  isRange: false,
+  isClearable: true,
+  shouldRenderPopperInBody: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'tabIndex',
+      'onFocus',
+      'onBlur',
+      'onPaste',
+      'onIconClick',
+      'onKeyDown',
+    ],
+  },
+};

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,54 +1,54 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    width: '100%',
-    height: '100%',
-  },
-
-  day: {
-    width: 36,
-    height: 36,
-    lineHeight: 'normal',
-    boxSizing: 'border-box',
-    paddingTop: 10,
-    fontSize: 16,
-  },
-
-  datepicker: {
-    display: 'flex',
-    padding: [4, 8, 20, 8],
-    width: 320,
-    boxSizing: 'border-box',
-  },
-
-  btnText: {
-    marginLeft: 'auto',
-  },
-
-  popper: {
-    zIndex: 10,
-    marginLeft: ({ leftPosition }: { leftPosition: number }): number =>
-      leftPosition,
-    marginTop: ({ topPosition }: { topPosition: number }): number =>
-      topPosition,
-
-    '&[data-placement^="bottom"]': {
-      paddingTop: 6,
-    },
-
-    '&[data-placement^="top"]': {
-      paddingBottom: 6,
-    },
-
-    '&[data-placement^="left"]': {
-      paddingRight: 6,
-    },
-
-    '&[data-placement^="right"]': {
-      paddingLeft: 6,
-    },
-  },
-};
-
-export type DatePickerStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    width: '100%',
+    height: '100%',
+  },
+
+  day: {
+    width: 36,
+    height: 36,
+    lineHeight: 'normal',
+    boxSizing: 'border-box',
+    paddingTop: 10,
+    fontSize: 16,
+  },
+
+  datepicker: {
+    display: 'flex',
+    padding: [4, 8, 20, 8],
+    width: 320,
+    boxSizing: 'border-box',
+  },
+
+  btnText: {
+    marginLeft: 'auto',
+  },
+
+  popper: {
+    zIndex: 10,
+    marginLeft: ({ leftPosition }: { leftPosition: number }): number =>
+      leftPosition,
+    marginTop: ({ topPosition }: { topPosition: number }): number =>
+      topPosition,
+
+    '&[data-placement^="bottom"]': {
+      paddingTop: 6,
+    },
+
+    '&[data-placement^="top"]': {
+      paddingBottom: 6,
+    },
+
+    '&[data-placement^="left"]': {
+      paddingRight: 6,
+    },
+
+    '&[data-placement^="right"]': {
+      paddingLeft: 6,
+    },
+  },
+};
+
+export type DatePickerStyles = ComponentStyles<typeof styles>;