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

package/src/components/Input/Input.stories.tsx

@@ -1,215 +1,215 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FieldValues, useForm } from 'react-hook-form';
-
-import Input from '@components/Input';
-import Icon from '@components/Icon';
-import { InputProps } from './types';
-
-export default {
-  title: 'Components/Inputs',
-  component: Input,
-
-  argTypes: {
-    status: {
-      options: ['basic', 'error', 'success'],
-      control: {
-        type: 'inline-radio',
-      },
-    },
-    type: {
-      description: 'input HTML valid type',
-    },
-    validationSchema: {
-      control: {
-        disable: true,
-      },
-    },
-    register: {
-      control: {
-        disable: true,
-      },
-    },
-    endElement: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-} as Meta<typeof Input>;
-
-export const Default: StoryObj<typeof Input> = ({
-  placeholder,
-  name,
-  status,
-  endElement,
-  disabled,
-  type,
-}: InputProps) => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      type={type}
-      placeholder={placeholder}
-      name={name}
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      endElement={endElement}
-      status={status}
-      disabled={disabled}
-    />
-  );
-};
-
-Default.args = {
-  placeholder: 'Field',
-  name: 'field1',
-  status: 'basic',
-};
-
-export const WithIcon: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field"
-      name="field1"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      endElement={<Icon name="visible" />}
-    />
-  );
-};
-WithIcon.args = {};
-
-export const WithBothIcons: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field"
-      name="field1"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      startElement={<Icon name="invisible" />}
-      endElement={<Icon name="visible" />}
-    />
-  );
-};
-WithBothIcons.args = {};
-
-export const WithError: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field error"
-      name="field2"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      status="error"
-    />
-  );
-};
-WithError.args = {};
-
-export const WithSuccess: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field success"
-      name="field3"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      status="success"
-    />
-  );
-};
-WithSuccess.args = {};
-
-export const Disabled: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field disabled"
-      name="field4"
-      register={register}
-      disabled={true}
-      status="basic"
-    />
-  );
-};
-Disabled.args = {};
-
-export const WithStatusDisabled: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field success disabled"
-      name="field5"
-      register={register}
-      disabled={true}
-      status="success"
-    />
-  );
-};
-WithStatusDisabled.args = {};
-
-export const WithCallAction: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      type="password"
-      placeholder="Field"
-      name="field6"
-      register={register}
-      endElement={
-        <button onClick={() => console.log('calling action...')}>Action</button>
-      }
-      status="basic"
-    />
-  );
-};
-WithCallAction.args = {};
-
-export const Focused: StoryObj<typeof Input> & {
-  args: { label?: string };
-} = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field focused"
-      name="field3"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      status="basic"
-    />
-  );
-};
-Focused.args = {
-  ...Default.args,
-  label: 'Focused Input',
-};
-
-Focused.parameters = {
-  pseudo: {
-    focus: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { FieldValues, useForm } from 'react-hook-form';
+
+import Input from '@components/Input';
+import Icon from '@components/Icon';
+import { InputProps } from './types';
+
+export default {
+  title: 'Components/Inputs',
+  component: Input,
+
+  argTypes: {
+    status: {
+      options: ['basic', 'error', 'success'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    type: {
+      description: 'input HTML valid type',
+    },
+    validationSchema: {
+      control: {
+        disable: true,
+      },
+    },
+    register: {
+      control: {
+        disable: true,
+      },
+    },
+    endElement: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof Input>;
+
+export const Default: StoryObj<typeof Input> = ({
+  placeholder,
+  name,
+  status,
+  endElement,
+  disabled,
+  type,
+}: InputProps) => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      type={type}
+      placeholder={placeholder}
+      name={name}
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      endElement={endElement}
+      status={status}
+      disabled={disabled}
+    />
+  );
+};
+
+Default.args = {
+  placeholder: 'Field',
+  name: 'field1',
+  status: 'basic',
+};
+
+export const WithIcon: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field"
+      name="field1"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      endElement={<Icon name="visible" />}
+    />
+  );
+};
+WithIcon.args = {};
+
+export const WithBothIcons: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field"
+      name="field1"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      startElement={<Icon name="invisible" />}
+      endElement={<Icon name="visible" />}
+    />
+  );
+};
+WithBothIcons.args = {};
+
+export const WithError: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field error"
+      name="field2"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      status="error"
+    />
+  );
+};
+WithError.args = {};
+
+export const WithSuccess: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field success"
+      name="field3"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      status="success"
+    />
+  );
+};
+WithSuccess.args = {};
+
+export const Disabled: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field disabled"
+      name="field4"
+      register={register}
+      disabled={true}
+      status="basic"
+    />
+  );
+};
+Disabled.args = {};
+
+export const WithStatusDisabled: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field success disabled"
+      name="field5"
+      register={register}
+      disabled={true}
+      status="success"
+    />
+  );
+};
+WithStatusDisabled.args = {};
+
+export const WithCallAction: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      type="password"
+      placeholder="Field"
+      name="field6"
+      register={register}
+      endElement={
+        <button onClick={() => console.log('calling action...')}>Action</button>
+      }
+      status="basic"
+    />
+  );
+};
+WithCallAction.args = {};
+
+export const Focused: StoryObj<typeof Input> & {
+  args: { label?: string };
+} = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field focused"
+      name="field3"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      status="basic"
+    />
+  );
+};
+Focused.args = {
+  ...Default.args,
+  label: 'Focused Input',
+};
+
+Focused.parameters = {
+  pseudo: {
+    focus: true,
+  },
+};

package/src/components/Input/Input.tsx

@@ -1,70 +1,70 @@
-import { forwardRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { InputBase } from './InputBase';
-import { InputGroup } from './InputGroup';
-import { InputProps, InputStatusColors } from './types';
-import { InputStatusError } from './InputStatusError';
-import { InputStatusSuccess } from './InputStatusSuccess';
-import * as S from './styles';
-
-const mapColors: InputStatusColors = {
-  basic: S.basic,
-  error: S.error,
-  success: S.success,
-  custom: S.custom,
-};
-
-const InputInner = (
-  {
-    name,
-    type = 'text',
-    placeholder,
-    validationSchema,
-    status = 'basic',
-    disabled = false,
-    startElement,
-    endElement,
-    className,
-    inputProps = {},
-    register,
-    onKeyUp,
-  }: InputProps,
-  inputRef?: React.ForwardedRef<HTMLInputElement | null>,
-) => {
-  if (!register) {
-    throw new Error('Input component must be used within a Form component');
-  }
-
-  const showStatusIcon = () => !disabled && !endElement;
-
-  const registerResult = register(name, validationSchema);
-  return (
-    <InputGroup css={[mapColors[status]]} disabled={disabled}>
-      {startElement ? <div css={S.startElement}>{startElement}</div> : null}
-      <InputBase
-        type={type}
-        id={`formElement-${name}`}
-        placeholder={placeholder}
-        disabled={disabled}
-        css={{
-          paddingLeft: startElement && 40,
-          paddingRight: endElement && 40,
-        }}
-        className={className}
-        onKeyUp={onKeyUp}
-        {...inputProps}
-        {...register(name, validationSchema)}
-        ref={useMergeRefs([registerResult.ref, inputRef])}
-      />
-
-      {status === 'error' && showStatusIcon() ? <InputStatusError /> : null}
-      {status === 'success' && showStatusIcon() ? <InputStatusSuccess /> : null}
-
-      {endElement ? <div css={S.endElement}>{endElement}</div> : null}
-    </InputGroup>
-  );
-};
-
-const Input = forwardRef<HTMLInputElement, InputProps>(InputInner);
-
-export default Input;
+import { forwardRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { InputBase } from './InputBase';
+import { InputGroup } from './InputGroup';
+import { InputProps, InputStatusColors } from './types';
+import { InputStatusError } from './InputStatusError';
+import { InputStatusSuccess } from './InputStatusSuccess';
+import * as S from './styles';
+
+const mapColors: InputStatusColors = {
+  basic: S.basic,
+  error: S.error,
+  success: S.success,
+  custom: S.custom,
+};
+
+const InputInner = (
+  {
+    name,
+    type = 'text',
+    placeholder,
+    validationSchema,
+    status = 'basic',
+    disabled = false,
+    startElement,
+    endElement,
+    className,
+    inputProps = {},
+    register,
+    onKeyUp,
+  }: InputProps,
+  inputRef?: React.ForwardedRef<HTMLInputElement | null>,
+) => {
+  if (!register) {
+    throw new Error('Input component must be used within a Form component');
+  }
+
+  const showStatusIcon = () => !disabled && !endElement;
+
+  const registerResult = register(name, validationSchema);
+  return (
+    <InputGroup css={[mapColors[status]]} disabled={disabled}>
+      {startElement ? <div css={S.startElement}>{startElement}</div> : null}
+      <InputBase
+        type={type}
+        id={`formElement-${name}`}
+        placeholder={placeholder}
+        disabled={disabled}
+        css={{
+          paddingLeft: startElement && 40,
+          paddingRight: endElement && 40,
+        }}
+        className={className}
+        onKeyUp={onKeyUp}
+        {...inputProps}
+        {...register(name, validationSchema)}
+        ref={useMergeRefs([registerResult.ref, inputRef])}
+      />
+
+      {status === 'error' && showStatusIcon() ? <InputStatusError /> : null}
+      {status === 'success' && showStatusIcon() ? <InputStatusSuccess /> : null}
+
+      {endElement ? <div css={S.endElement}>{endElement}</div> : null}
+    </InputGroup>
+  );
+};
+
+const Input = forwardRef<HTMLInputElement, InputProps>(InputInner);
+
+export default Input;

package/src/components/Input/InputBase.tsx

@@ -1,42 +1,42 @@
-import styled from '@emotion/styled';
-
-export const InputBase = styled.input`
-  flex: 1;
-
-  background: ${({ theme }) => theme.colors.white};
-  border-radius: 12px;
-  background-origin: border-box;
-  background-clip: padding-box, border-box;
-
-  border: ${({ theme }) => `1px solid ${theme.colors.grey}`};
-
-  color: ${({ theme }) => theme.colors.greyDarker};
-
-  width: 100%;
-  height: 44px;
-  padding: 14px;
-
-  font-weight: 400;
-  font-size: 0.875rem;
-  line-height: 1rem;
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.greyDarker60};
-  }
-
-  &:disabled {
-    color: ${({ theme }) => `${theme.colors.grey}`};
-
-    background: ${({ theme }) => theme.colors.greyLighter};
-
-    &::placeholder {
-      color: ${({ theme }) => theme.colors.grey};
-    }
-
-    &:disabled,
-    &:disabled:hover {
-      border: ${({ theme }) => `1px solid  ${theme.colors.grey}`};
-      background-image: none;
-    }
-  }
-`;
+import styled from '@emotion/styled';
+
+export const InputBase = styled.input`
+  flex: 1;
+
+  background: ${({ theme }) => theme.colors.white};
+  border-radius: 12px;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+
+  border: ${({ theme }) => `1px solid ${theme.colors.grey}`};
+
+  color: ${({ theme }) => theme.colors.greyDarker};
+
+  width: 100%;
+  height: 44px;
+  padding: 14px;
+
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.greyDarker60};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => `${theme.colors.grey}`};
+
+    background: ${({ theme }) => theme.colors.greyLighter};
+
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.grey};
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      border: ${({ theme }) => `1px solid  ${theme.colors.grey}`};
+      background-image: none;
+    }
+  }
+`;

package/src/components/Input/InputGroup.tsx

@@ -1,12 +1,12 @@
-import styled from '@emotion/styled';
-
-export const InputGroup = styled.div<{ disabled?: boolean }>`
-  position: relative;
-
-  width: 100%;
-
-  * {
-    color: ${({ theme, disabled }) =>
-      disabled ? `${theme.colors.grey} !important` : 'inherit'};
-  }
-`;
+import styled from '@emotion/styled';
+
+export const InputGroup = styled.div<{ disabled?: boolean }>`
+  position: relative;
+
+  width: 100%;
+
+  * {
+    color: ${({ theme, disabled }) =>
+      disabled ? `${theme.colors.grey} !important` : 'inherit'};
+  }
+`;