@ssa-ui-kit/core 0.0.16-alpha → 0.0.17-alpha

package/src/components/Textarea/Textarea.spec.tsx

@@ -1,56 +1,56 @@
-import { screen, fireEvent, mockUseForm } from '../../../customTest';
-
-import Textarea from '@components/Textarea';
-
-const { register } = mockUseForm();
-
-describe('Textarea', () => {
-  it('Render textarea', () => {
-    const countChar = jest.fn();
-
-    render(
-      <Textarea
-        placeholder="Field"
-        name="field"
-        register={register}
-        maxLength={100}
-        setCountChar={countChar}
-      />,
-    );
-
-    const textarea = screen.getByRole('textbox') as HTMLInputElement;
-
-    fireEvent.change(textarea, { target: { value: 'rock n roll' } });
-
-    expect(textarea.value).toBe('rock n roll');
-    expect(textarea).toHaveProperty('rows', 10);
-    expect(textarea).toHaveProperty('maxLength', 100);
-    expect(textarea).toHaveProperty('id', 'formElement-field');
-    expect(countChar).toHaveBeenCalled();
-  });
-
-  it('Render textarea', () => {
-    render(
-      <Textarea
-        placeholder="Field"
-        name="field"
-        register={register}
-        disabled={true}
-      />,
-    );
-
-    const textarea = screen.getByRole('textbox') as HTMLInputElement;
-
-    expect(textarea).toHaveProperty('disabled', true);
-  });
-
-  it('Trow error when without register', () => {
-    jest.spyOn(console, 'error').mockImplementation();
-
-    expect(() =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      render(<Textarea placeholder="Field" name="field" disabled={true} />),
-    ).toThrow('Input component must be used within a Form component');
-  });
-});
+import { screen, fireEvent, mockUseForm } from '../../../customTest';
+
+import Textarea from '@components/Textarea';
+
+const { register } = mockUseForm();
+
+describe('Textarea', () => {
+  it('Render textarea', () => {
+    const countChar = jest.fn();
+
+    render(
+      <Textarea
+        placeholder="Field"
+        name="field"
+        register={register}
+        maxLength={100}
+        setCountChar={countChar}
+      />,
+    );
+
+    const textarea = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(textarea, { target: { value: 'rock n roll' } });
+
+    expect(textarea.value).toBe('rock n roll');
+    expect(textarea).toHaveProperty('rows', 10);
+    expect(textarea).toHaveProperty('maxLength', 100);
+    expect(textarea).toHaveProperty('id', 'formElement-field');
+    expect(countChar).toHaveBeenCalled();
+  });
+
+  it('Render textarea', () => {
+    render(
+      <Textarea
+        placeholder="Field"
+        name="field"
+        register={register}
+        disabled={true}
+      />,
+    );
+
+    const textarea = screen.getByRole('textbox') as HTMLInputElement;
+
+    expect(textarea).toHaveProperty('disabled', true);
+  });
+
+  it('Trow error when without register', () => {
+    jest.spyOn(console, 'error').mockImplementation();
+
+    expect(() =>
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      render(<Textarea placeholder="Field" name="field" disabled={true} />),
+    ).toThrow('Input component must be used within a Form component');
+  });
+});

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,59 +1,59 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FieldValues, useForm } from 'react-hook-form';
-
-import Textarea from '@components/Textarea';
-
-type Args = Parameters<typeof Textarea>[0];
-
-export default {
-  title: 'Components/Textarea',
-  component: Textarea,
-  argTypes: {
-    validationSchema: {
-      control: {
-        disable: true,
-      },
-    },
-    register: {
-      control: {
-        disable: true,
-      },
-    },
-    setCountChar: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-} as Meta<typeof Textarea>;
-
-export const Basic: StoryObj<typeof Textarea> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <Textarea {...args} register={register} />;
-};
-
-Basic.args = {
-  placeholder: 'Textarea',
-  title: 'Textarea title',
-  name: 'textarea',
-  validationSchema: {
-    required: 'Required',
-  },
-};
-Basic.storyName = 'Textarea';
-
-export const Focused: StoryObj<typeof Textarea> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <Textarea {...args} register={register} />;
-};
-Focused.args = {
-  ...Basic.args,
-};
-
-Focused.parameters = {
-  pseudo: {
-    focus: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { FieldValues, useForm } from 'react-hook-form';
+
+import Textarea from '@components/Textarea';
+
+type Args = Parameters<typeof Textarea>[0];
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+  argTypes: {
+    validationSchema: {
+      control: {
+        disable: true,
+      },
+    },
+    register: {
+      control: {
+        disable: true,
+      },
+    },
+    setCountChar: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof Textarea>;
+
+export const Basic: StoryObj<typeof Textarea> = (args: Args) => {
+  const { register } = useForm<FieldValues>();
+
+  return <Textarea {...args} register={register} />;
+};
+
+Basic.args = {
+  placeholder: 'Textarea',
+  title: 'Textarea title',
+  name: 'textarea',
+  validationSchema: {
+    required: 'Required',
+  },
+};
+Basic.storyName = 'Textarea';
+
+export const Focused: StoryObj<typeof Textarea> = (args: Args) => {
+  const { register } = useForm<FieldValues>();
+
+  return <Textarea {...args} register={register} />;
+};
+Focused.args = {
+  ...Basic.args,
+};
+
+Focused.parameters = {
+  pseudo: {
+    focus: true,
+  },
+};

package/src/components/Textarea/Textarea.tsx

@@ -1,46 +1,46 @@
-import React from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { callAll } from '@ssa-ui-kit/utils';
-import { TextareaProps } from './types';
-import { TextareaBase } from './TextareaBase';
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  function TextareaInner(
-    {
-      name,
-      placeholder,
-      validationSchema,
-      disabled = false,
-      rows = 10,
-      maxLength,
-      title,
-      onPaste,
-      register,
-      setCountChar,
-    }: TextareaProps,
-    ref?: React.ForwardedRef<HTMLTextAreaElement | null>,
-  ) {
-    if (!register) {
-      throw new Error('Input component must be used within a Form component');
-    }
-
-    const { onChange, ...options } = register(name, validationSchema);
-
-    return (
-      <TextareaBase
-        id={`formElement-${name}`}
-        placeholder={placeholder}
-        disabled={disabled}
-        rows={rows}
-        maxLength={maxLength}
-        onChange={callAll(setCountChar, onChange)}
-        onPaste={onPaste}
-        title={title}
-        {...options}
-        ref={useMergeRefs([options.ref, ref])}
-      />
-    );
-  },
-);
-
-export default Textarea;
+import React from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { callAll } from '@ssa-ui-kit/utils';
+import { TextareaProps } from './types';
+import { TextareaBase } from './TextareaBase';
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function TextareaInner(
+    {
+      name,
+      placeholder,
+      validationSchema,
+      disabled = false,
+      rows = 10,
+      maxLength,
+      title,
+      onPaste,
+      register,
+      setCountChar,
+    }: TextareaProps,
+    ref?: React.ForwardedRef<HTMLTextAreaElement | null>,
+  ) {
+    if (!register) {
+      throw new Error('Input component must be used within a Form component');
+    }
+
+    const { onChange, ...options } = register(name, validationSchema);
+
+    return (
+      <TextareaBase
+        id={`formElement-${name}`}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={rows}
+        maxLength={maxLength}
+        onChange={callAll(setCountChar, onChange)}
+        onPaste={onPaste}
+        title={title}
+        {...options}
+        ref={useMergeRefs([options.ref, ref])}
+      />
+    );
+  },
+);
+
+export default Textarea;

package/src/components/Textarea/TextareaBase.tsx

@@ -1,46 +1,46 @@
-import styled from '@emotion/styled';
-
-export const TextareaBase = styled.textarea`
-  flex: 1 100%;
-
-  background: ${({ theme }) => theme.colors.white};
-  border-radius: 12px;
-  background-origin: border-box;
-  background-clip: padding-box, border-box;
-
-  border: none;
-  box-shadow: ${({ theme }) => `inset 0 0 1.5px 0 ${theme.colors.grey}`};
-
-  color: ${({ theme }) => theme.colors.greyDarker};
-
-  width: 100%;
-  min-height: 114px;
-  padding: 14px;
-
-  font-weight: 400;
-  font-size: 0.875rem;
-  line-height: 1rem;
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.greyDarker60};
-  }
-
-  &:hover {
-    box-shadow: ${({ theme }) =>
-      `inset 0 0 1.5px 0 ${theme.colors.greyDarker60}`};
-  }
-
-  &:focus {
-    box-shadow: ${({ theme }) => `inset 0 0 1.5px 0 ${theme.colors.grey40}`};
-  }
-
-  &:disabled {
-    color: ${({ theme }) => `${theme.colors.grey}`};
-    box-shadow: ${({ theme }) => `inset 0 0 1.5px 0 ${theme.colors.grey}`};
-    background: ${({ theme }) => theme.colors.greyLighter};
-
-    &::placeholder {
-      color: ${({ theme }) => theme.colors.grey};
-    }
-  }
-`;
+import styled from '@emotion/styled';
+
+export const TextareaBase = styled.textarea`
+  flex: 1 100%;
+
+  background: ${({ theme }) => theme.colors.white};
+  border-radius: 12px;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+
+  border: none;
+  box-shadow: ${({ theme }) => `inset 0 0 1.5px 0 ${theme.colors.grey}`};
+
+  color: ${({ theme }) => theme.colors.greyDarker};
+
+  width: 100%;
+  min-height: 114px;
+  padding: 14px;
+
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.greyDarker60};
+  }
+
+  &:hover {
+    box-shadow: ${({ theme }) =>
+      `inset 0 0 1.5px 0 ${theme.colors.greyDarker60}`};
+  }
+
+  &:focus {
+    box-shadow: ${({ theme }) => `inset 0 0 1.5px 0 ${theme.colors.grey40}`};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => `${theme.colors.grey}`};
+    box-shadow: ${({ theme }) => `inset 0 0 1.5px 0 ${theme.colors.grey}`};
+    background: ${({ theme }) => theme.colors.greyLighter};
+
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.grey};
+    }
+  }
+`;

package/src/components/Textarea/index.ts

@@ -1 +1 @@
-export { default } from './Textarea';
+export { default } from './Textarea';

package/src/components/Textarea/types.ts

@@ -1,17 +1,17 @@
-import { ReactEventHandler } from 'react';
-import type { UseFormReturn } from 'react-hook-form';
-
-export interface TextareaProps
-  extends Partial<Pick<UseFormReturn, 'register'>> {
-  name: string;
-  placeholder?: string;
-  validationSchema?: Record<string, unknown>;
-  disabled?: boolean;
-  rows?: number;
-  maxLength?: number;
-  as?: React.ElementType;
-  className?: string;
-  title?: string;
-  onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
-  setCountChar?: ReactEventHandler;
-}
+import { ReactEventHandler } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+
+export interface TextareaProps
+  extends Partial<Pick<UseFormReturn, 'register'>> {
+  name: string;
+  placeholder?: string;
+  validationSchema?: Record<string, unknown>;
+  disabled?: boolean;
+  rows?: number;
+  maxLength?: number;
+  as?: React.ElementType;
+  className?: string;
+  title?: string;
+  onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
+  setCountChar?: ReactEventHandler;
+}

package/src/components/Tooltip/ProgressChartTooltip.tsx

@@ -1,48 +1,48 @@
-import ProgressBar from '@components/ProgressBar';
-import Icon from '@components/Icon';
-import Typography from '@components/Typography';
-
-import { TooltipContentBase } from './TooltipContentBase';
-import { IProgressChartTooltipProps } from './types';
-import { mapSizes } from './utils';
-
-export const ProgressChartTooltip = ({
-  caption,
-  value,
-  valueFormatted,
-  iconName,
-  barProps = {},
-}: IProgressChartTooltipProps) => {
-  const { color } = barProps;
-
-  return (
-    <TooltipContentBase
-      css={[mapSizes.small, { padding: '12px', width: '112px' }]}>
-      <div
-        css={{
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          lineHeight: '1rem',
-          marginBottom: '6px',
-        }}>
-        <Typography variant="body2" weight="medium">
-          {caption}
-        </Typography>
-        <Typography
-          variant="body3"
-          weight="lighter"
-          css={{
-            display: 'flex',
-            alignItems: 'center',
-          }}>
-          {valueFormatted}
-          {iconName && <Icon name={iconName} size={8} />}
-        </Typography>
-      </div>
-
-      <ProgressBar percentage={value} color={color} bgColor={'#fff'} size={6} />
-    </TooltipContentBase>
-  );
-};
+import ProgressBar from '@components/ProgressBar';
+import Icon from '@components/Icon';
+import Typography from '@components/Typography';
+
+import { TooltipContentBase } from './TooltipContentBase';
+import { IProgressChartTooltipProps } from './types';
+import { mapSizes } from './utils';
+
+export const ProgressChartTooltip = ({
+  caption,
+  value,
+  valueFormatted,
+  iconName,
+  barProps = {},
+}: IProgressChartTooltipProps) => {
+  const { color } = barProps;
+
+  return (
+    <TooltipContentBase
+      css={[mapSizes.small, { padding: '12px', width: '112px' }]}>
+      <div
+        css={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          lineHeight: '1rem',
+          marginBottom: '6px',
+        }}>
+        <Typography variant="body2" weight="medium">
+          {caption}
+        </Typography>
+        <Typography
+          variant="body3"
+          weight="lighter"
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+          }}>
+          {valueFormatted}
+          {iconName && <Icon name={iconName} size={8} />}
+        </Typography>
+      </div>
+
+      <ProgressBar percentage={value} color={color} bgColor={'#fff'} size={6} />
+    </TooltipContentBase>
+  );
+};

package/src/components/Tooltip/SimpleChartTooltip.tsx

@@ -1,20 +1,20 @@
-import { TooltipContentBase } from './TooltipContentBase';
-import { SimpleChartTooltipProps } from './types';
-import { mapSizes } from './utils';
-
-export const SimpleChartTooltip = ({
-  point,
-  size = 'small',
-  renderValue,
-}: SimpleChartTooltipProps) => {
-  const { data } = point;
-  const { xFormatted, yFormatted } = data;
-
-  return (
-    <TooltipContentBase css={mapSizes[size]}>
-      {typeof renderValue === 'function'
-        ? renderValue(data)
-        : `${xFormatted} - ${yFormatted}`}
-    </TooltipContentBase>
-  );
-};
+import { TooltipContentBase } from './TooltipContentBase';
+import { SimpleChartTooltipProps } from './types';
+import { mapSizes } from './utils';
+
+export const SimpleChartTooltip = ({
+  point,
+  size = 'small',
+  renderValue,
+}: SimpleChartTooltipProps) => {
+  const { data } = point;
+  const { xFormatted, yFormatted } = data;
+
+  return (
+    <TooltipContentBase css={mapSizes[size]}>
+      {typeof renderValue === 'function'
+        ? renderValue(data)
+        : `${xFormatted} - ${yFormatted}`}
+    </TooltipContentBase>
+  );
+};