@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha51

package/src/components/TextArea/TextArea.tsx

@@ -1,8 +1,17 @@
-import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEvent,
+  FormEvent,
+  forwardRef,
+  TextareaHTMLAttributes,
+  useState,
+} from 'react';
+import { Styles } from 'react-jss';
 import clsx from 'clsx';
 import {
   addDataAttributes,
   getTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -11,18 +20,20 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
-import { ITextAreaHTMLBaseProps } from './types';
-import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
+import { ITextAreaCounterPosition } from './types';
+import { ITextAreaStyles, useStyles } from './TextArea.styles';
 
 export interface ITextAreaProps
   extends ICommonProps<ITextAreaStyles>,
-    Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
-    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>,
-    Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
+    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>,
+    Pick<
+      IControlWrapperProps,
+      'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'
+    >,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
   value?: string;
   placeholder?: string;
-  /** @default false */
-  isDisabled?: boolean;
+  counterPosition?: ITextAreaCounterPosition;
   /** @default false */
   isActive?: boolean;
   /**
@@ -41,23 +52,18 @@ export interface ITextAreaProps
   onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
 }
 
-const DEFAULT_VALUE = '';
-
 export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   (
     {
-      value = DEFAULT_VALUE,
-      label,
+      value = '',
       placeholder,
-      infoMessage,
-      errorMessage,
       name,
+      counterPosition = 'default',
       shouldFocusOnMount,
       hasCounter = true,
       shouldTrimAfterMaxLength,
       isAutoSized = true,
       shouldAlwaysShowPlaceholder,
-      isDisabled,
       isActive,
       maxLength,
       rows,
@@ -68,12 +74,25 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
       onPaste,
       onFocus,
       onBlur,
-      ...controlProps
+      // Пропсы WithMessages
+      infoMessage,
+      errorMessage,
+      // Пропсы ControlWrapper
+      label,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      size,
+      groupPlacement,
+      ...textAreaProps
     },
     ref,
   ) => {
     const classes = useStyles({ theme: tweakStyles });
 
+    const shouldShowCounter = hasCounter && isNotEmpty(maxLength);
+    const counterString = `${value.length} / ${maxLength}`;
+
     const tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
       className: 'tweakWithMessages',
@@ -81,7 +100,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     });
 
     const tweakControlWrapperStyles = useTweakStyles({
-      innerStyles: controlWrapperStyles,
       tweakStyles,
       className: 'tweakControlWrapper',
       currentComponentName: 'TextArea',
@@ -90,8 +108,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     const [isFocused, setFocused] = useState(false);
 
     const hasFocus = isFocused || isActive;
-    // в hasValue нельзя использовать isStringNotEmpty из-за того что isStringNotEmpty делает trim
-    const hasValue = value !== undefined && value !== '';
+    const hasValue = isArrayLikeNotEmpty(value);
     const hasLabel = isReactNodeNotEmpty(label);
     const hasPlaceholder =
       (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
@@ -111,52 +128,68 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     };
 
     return (
-      <WithMessages
-        errorMessage={errorMessage}
-        infoMessage={infoMessage}
-        tweakStyles={tweakWithMessagesStyles}
-        testId={getTestId(testId, 'wrapper')}
+      <div
+        className={clsx(classes.root, isNotEmpty(size) && classes[size])}
+        style={{ '--counter-length': counterString.length } as Styles}
       >
-        <ControlWrapper
-          label={label}
-          tweakStyles={tweakControlWrapperStyles}
-          isFocused={hasFocus}
-          isDisabled={isDisabled}
-          hasValue={hasValue}
-          isFullWidth
-          {...controlProps}
+        <WithMessages
+          errorMessage={errorMessage}
+          infoMessage={infoMessage}
+          tweakStyles={tweakWithMessagesStyles}
+          testId={getTestId(testId, 'wrapper')}
         >
-          <div
-            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
-            {...(isAutoSized && { 'data-value': value })}
-          >
-            <textarea
-              ref={ref}
-              className={classes.textarea}
-              value={value}
-              disabled={isDisabled}
-              placeholder={hasPlaceholder ? placeholder : undefined}
-              maxLength={shouldTrimAfterMaxLength ? maxLength : undefined}
-              name={name}
-              rows={rows}
-              onPaste={onPaste}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              onChange={handleChange}
-              {...addDataAttributes(data, testId)}
-            />
-          </div>
-        </ControlWrapper>
-        {hasCounter && isNotEmpty(maxLength) && (
-          <span
-            className={clsx(classes.symbolsCount, {
-              [classes.symbolsCountError]: value.length > maxLength,
-            })}
+          <ControlWrapper
+            label={label}
+            tweakStyles={tweakControlWrapperStyles}
+            isFocused={hasFocus}
+            isDisabled={isDisabled}
+            hasValue={hasValue}
+            isInvalid={isInvalid}
+            isRequired={isRequired}
+            groupPlacement={groupPlacement}
+            size={size}
+            isFullWidth
           >
-            {value.length} / {maxLength}
-          </span>
-        )}
-      </WithMessages>
+            <div
+              className={clsx(classes.wrapper, {
+                [classes.autoSized]: isAutoSized,
+                [classes.withLabel]: hasLabel,
+              })}
+              // Не менять на addDataAttributes
+              {...(isAutoSized && { 'data-value': value })}
+            >
+              <textarea
+                ref={ref}
+                className={classes.textarea}
+                value={value}
+                disabled={isDisabled}
+                placeholder={hasPlaceholder ? placeholder : undefined}
+                maxLength={shouldTrimAfterMaxLength ? maxLength : undefined}
+                name={name}
+                rows={rows}
+                onPaste={onPaste}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                autoFocus={shouldFocusOnMount}
+                {...addDataAttributes(data, testId)}
+                {...textAreaProps}
+              />
+              {shouldShowCounter && (
+                <span
+                  className={clsx(classes.symbolsCount, classes[`counter-${counterPosition}`], {
+                    [classes.symbolsCountError]: value.length > maxLength,
+                    [classes.symbolsCountActive]: hasFocus || hasValue,
+                  })}
+                  {...addDataAttributes({ counterPosition })}
+                >
+                  {counterString}
+                </span>
+              )}
+            </div>
+          </ControlWrapper>
+        </WithMessages>
+      </div>
     );
   },
 );

package/src/components/TextArea/index.ts

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

package/src/components/TextArea/types.ts

@@ -1,6 +1,6 @@
-import { TextareaHTMLAttributes } from 'react';
+import { IExtendableProps } from '../../types';
 
-export type ITextAreaHTMLBaseProps = Pick<
-  TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'placeholder' | 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'
->;
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {}
+
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

package/src/components/TextButton/TextButton.stories.tsx

@@ -1,17 +1,14 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { type Meta } from '@storybook/react';
+import { iconsMap } from '../Icon';
 import { TextButton } from './TextButton';
 import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
+const meta: Meta<typeof TextButton> = {
   title: 'Buttons/TextButton',
   component: TextButton,
   args: {
     children: 'Text Button',
-    icon: 'chevron-right-small',
+    icon: 'calendar',
     size: 'l',
     view: 'primary',
     isBold: false,
@@ -22,22 +19,14 @@ export default {
     iconPosition: 'left',
     preloaderType: 'dots',
   },
-
   argTypes: {
-    icon: { control: 'select', options: icons },
+    icon: { control: 'select', options: [undefined, Object.keys(iconsMap)] },
     size: { options: TEXT_BUTTON_SIZES, control: 'inline-radio' },
     view: { options: TEXT_BUTTON_VIEWS, control: 'inline-radio' },
     iconPosition: { control: 'inline-radio' },
     preloaderType: { control: 'inline-radio' },
   },
+};
 
-  parameters: {
-    controls: {
-      exclude: ['testId', 'tweakStyles', 'data', 'onClick'],
-    },
-  },
-} as ComponentMeta<typeof TextButton>;
-
-export const Default: ComponentStory<typeof TextButton> = (args) => (
-  <TextButton {...args} key={args.size} />
-);
+export default meta;
+export const Default = {};

package/src/components/TextButton/TextButton.styles.ts

@@ -7,6 +7,7 @@ export const useStyles = createThemedStyles('TextButton', {
     alignItems: 'center',
     height: 24,
     padding: 0,
+    position: 'relative',
     background: 'transparent',
     border: 'none',
     borderRadius: 0,

package/src/components/TextWithInfo/TextWithInfo.stories.tsx

@@ -1,17 +1,13 @@
 import { FC, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
 
-interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
+interface ITextWithInfoCustomProps extends ITextWithInfoProps {
   infoTooltip: string;
   link: string;
 }
 
-const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
-  infoTooltip,
-  link,
-  ...args
-}) => {
+const Story: FC<ITextWithInfoCustomProps> = ({ infoTooltip, link, ...args }) => {
   const [isSelected, setIsSelected] = useState(false);
 
   return (
@@ -34,20 +30,16 @@ const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
   );
 };
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Data Display/TextWithInfo',
-  component: TextWithInfoWithCustomProps,
+  component: Story,
+  args: {
+    text: 'Обычная перевозка',
+    textTooltip: 'Tултип для самой обычной перевозки',
+    infoTooltip: 'Читать подробную информацию',
+    link: 'https://ya.ru/',
+  },
 };
 
-const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
-  <TextWithInfoWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Обычная перевозка',
-  textTooltip: 'Tултип для самой обычной перевозки',
-  infoTooltip: 'Читать подробную информацию',
-  link: 'https://ya.ru/',
-};
+export default meta;
+export const Default = {};

package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx

@@ -1,5 +1,6 @@
-import { ComponentStory } from '@storybook/react';
-import { TextWithTooltip } from './TextWithTooltip';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { ITextWithTooltipProps, TextWithTooltip } from './TextWithTooltip';
 
 const positions = [
   'top',
@@ -19,18 +20,7 @@ const positions = [
   'auto-end',
 ];
 
-export default {
-  title: 'Data Display/TextWithTooltip',
-  component: TextWithTooltip,
-  argTypes: {
-    tooltipPosition: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
-const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
+const Story: FC<ITextWithTooltipProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -44,15 +34,26 @@ const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Наведи на меня - появится тултип',
-  tooltipText: 'Текст тултипа',
-  tooltipPosition: 'top',
-  tooltipView: 'tooltip',
-  tooltipType: 'info',
-  isDisabled: false,
-  mouseEventType: 'hover',
-  shouldRenderInBody: true,
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/TextWithTooltip',
+  component: Story,
+  args: {
+    children: 'Наведи на меня - появится тултип',
+    tooltipText: 'Текст тултипа',
+    tooltipPosition: 'top',
+    tooltipView: 'tooltip',
+    tooltipType: 'info',
+    isDisabled: false,
+    mouseEventType: 'hover',
+    shouldRenderInBody: true,
+  },
+  argTypes: {
+    tooltipPosition: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -7,7 +7,7 @@ import { addDataAttributes } from '../../helpers';
 import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
-import { useStyles, ITextWithTooltipStyles } from './TextWithTooltip.styles';
+import { ITextWithTooltipStyles, useStyles } from './TextWithTooltip.styles';
 
 export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
   children: ReactNode;
@@ -18,7 +18,6 @@ export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyl
   tooltipType?: ITooltipProps['type'];
   /** @default 'top' */
   tooltipPosition?: Placement;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   /** @default [] */
   tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
   tooltipOffsetOptions?: Record<string, unknown>;

package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx

@@ -1,41 +1,30 @@
 import { FC } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { colors } from '../../theme';
 import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
 
-interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
+interface IThemedPreloaderCustomProps extends IThemedPreloaderProps {
   currentColor: string;
 }
 
-const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
-  currentColor,
-  ...args
-}) => (
+const Story: FC<IThemedPreloaderCustomProps> = ({ currentColor, ...args }) => (
   <div style={{ color: currentColor }}>
     <ThemedPreloader {...args} />
   </div>
 );
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Feedback/ThemedPreloader',
-  component: ThemedPreloaderWithCustomProps,
+  component: Story,
+  args: {
+    type: 'dots',
+    useCurrentColor: false,
+    currentColor: colors.GREEN_FOCUS,
+  },
   argTypes: {
     type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
   },
 };
 
-const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
-  <ThemedPreloaderWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  type: 'dots',
-  useCurrentColor: false,
-  currentColor: colors.GREEN_FOCUS,
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
-  },
-};
+export default meta;
+export const Default = {};

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx

@@ -1,9 +1,9 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../../../theme';
+import { FC } from 'react';
+import { useTheme } from '../../../../theme';
 import { ICommonProps } from '../../../../types';
 import { IPreloaderSvgType } from '../../types';
 import { DefaultPreloader } from '../DefaultPreloader';
-import { useStyles, ISvgPreloaderStyles } from './SvgPreloader.styles';
+import { ISvgPreloaderStyles, useStyles } from './SvgPreloader.styles';
 
 export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
   type: IPreloaderSvgType;
@@ -12,7 +12,7 @@ export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyle
 export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
   const isInlineSvg = typeof PreloaderIcon === 'string';
 

package/src/components/Toaster/Toaster.stories.tsx

@@ -1,12 +1,20 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
 import { Button } from '../Button';
-import { Toaster } from './Toaster';
+import { IToasterProps, Toaster } from './Toaster';
+import { IToasterType } from './types';
 
-const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
+const types: IToasterType[] = ['error', 'info', 'warning', 'ok', 'not-ok'];
 
-export default {
+const Story: FC<IToasterProps> = (args) => (
+  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
+    <Button size="m">Нажмите</Button>
+  </Toaster>
+);
+
+const meta: Meta<typeof Story> = {
   title: 'Feedback/Toaster',
-  component: Toaster,
+  component: Story,
   args: {
     title: 'Произошла очень страшная ошибка',
     text: 'Мы даже не знаем, чем вам помочь!',
@@ -18,13 +26,7 @@ export default {
   argTypes: {
     type: { control: 'inline-radio', options: types },
   },
-  parameters: {
-    controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
-  },
-} as ComponentMeta<typeof Toaster>;
+};
 
-export const Default: ComponentStory<typeof Toaster> = (args) => (
-  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
-    <Button size="m">Нажмите</Button>
-  </Toaster>
-);
+export default meta;
+export const Default = {};

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { Tooltip } from './Tooltip';
 
-export default {
+const meta: Meta<typeof Tooltip> = {
   title: 'Data Display/Tooltip',
   component: Tooltip,
   args: {
@@ -14,6 +14,7 @@ export default {
     view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
     type: { control: 'inline-radio', options: ['info', 'error'] },
   },
-} as ComponentMeta<typeof Tooltip>;
+};
 
-export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
+export default meta;
+export const Default = {};

package/src/components/Tooltip/Tooltip.styles.ts

@@ -32,6 +32,8 @@ export const useStyles = createThemedStyles('Tooltip', {
     letterSpacing: 0.2,
   },
 
+  custom: {},
+
   info: {},
 
   error: {

package/src/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import { useStyles, ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
   text: ReactNode;
   /** @default 'tooltip' */
-  view?: 'tooltip' | 'hint';
+  view?: 'tooltip' | 'hint' | 'custom';
   /** @default 'info' */
   type?: 'info' | 'error';
 }

package/src/components/WithMessages/WithMessages.stories.tsx

@@ -1,21 +1,19 @@
+import { FC } from 'react';
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { IInputProps, Input } from '../Input';
-import { WithMessages } from './WithMessages';
+import { IWithMessagesProps, WithMessages } from './WithMessages';
 
-export default {
-  title: 'WithMessages',
-  component: WithMessages,
-};
-
-const Template: ComponentStory<typeof WithMessages> = ({ controlsDirection, ...args }) => {
+const Story: FC<IWithMessagesProps> = ({ controlsDirection, ...args }) => {
   let groupPlacement: Array<IInputProps['groupPlacement']> = [];
+
   if (controlsDirection === 'horizontal') {
     groupPlacement = ['left', 'right'];
   }
   if (controlsDirection === 'vertical') {
     groupPlacement = ['top', 'bottom'];
   }
+
   return (
     <WithMessages {...args} controlsDirection={controlsDirection}>
       <Input value="value" groupPlacement={groupPlacement[0]} onChange={doNothing} />
@@ -24,17 +22,15 @@ const Template: ComponentStory<typeof WithMessages> = ({ controlsDirection, ...a
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  infoMessage: 'Message Info',
-  errorMessage: 'Error Text',
-  controlsDirection: undefined,
-};
-
-Default.argTypes = {
-  controlsDirection: {
-    options: [undefined, 'horizontal', 'vertical'],
-    control: 'radio',
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/WithMessages',
+  component: Story,
+  args: {
+    infoMessage: 'Message Info',
+    errorMessage: 'Error Text',
+    controlsDirection: undefined,
   },
 };
+
+export default meta;
+export const Default = {};