@ssa-ui-kit/core 0.0.11-alpha → 0.0.13-alpha

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'};
+  }
+`;

package/src/components/Input/InputStatusError.tsx

@@ -1,20 +1,20 @@
-import styled from '@emotion/styled';
-
-import Icon from '@components/Icon';
-
-import { inputStatus } from './styles';
-
-export const InputError = styled.div`
-  background: ${({ theme }) =>
-    `linear-gradient(117.5deg, ${theme.colors.red}, ${theme.colors.redLighter});`};
-
-  svg {
-    transform: rotateX(180deg);
-  }
-`;
-
-export const InputStatusError = () => (
-  <InputError css={inputStatus}>
-    <Icon name="union" size={10} color="#fff" />
-  </InputError>
-);
+import styled from '@emotion/styled';
+
+import Icon from '@components/Icon';
+
+import { inputStatus } from './styles';
+
+export const InputError = styled.div`
+  background: ${({ theme }) =>
+    `linear-gradient(117.5deg, ${theme.colors.red}, ${theme.colors.redLighter});`};
+
+  svg {
+    transform: rotateX(180deg);
+  }
+`;
+
+export const InputStatusError = () => (
+  <InputError css={inputStatus}>
+    <Icon name="union" size={10} color="#fff" />
+  </InputError>
+);

package/src/components/Input/InputStatusSuccess.tsx

@@ -1,16 +1,16 @@
-import styled from '@emotion/styled';
-
-import Icon from '@components/Icon';
-
-import { inputStatus } from './styles';
-
-export const InputSuccess = styled.div`
-  background: ${({ theme }) =>
-    `linear-gradient(68.38deg, ${theme.colors.greenLighter}, ${theme.colors.green});`};
-`;
-
-export const InputStatusSuccess = () => (
-  <InputSuccess css={inputStatus}>
-    <Icon name="check" size={10} color="#fff" />
-  </InputSuccess>
-);
+import styled from '@emotion/styled';
+
+import Icon from '@components/Icon';
+
+import { inputStatus } from './styles';
+
+export const InputSuccess = styled.div`
+  background: ${({ theme }) =>
+    `linear-gradient(68.38deg, ${theme.colors.greenLighter}, ${theme.colors.green});`};
+`;
+
+export const InputStatusSuccess = () => (
+  <InputSuccess css={inputStatus}>
+    <Icon name="check" size={10} color="#fff" />
+  </InputSuccess>
+);

package/src/components/Input/index.ts

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

package/src/components/Input/styles.ts

@@ -1,111 +1,111 @@
-import { css, Theme } from '@emotion/react';
-
-import { InputBase } from './InputBase';
-
-export const basic = (theme: Theme) =>
-  css({
-    [`& ${InputBase}`]: {
-      border: `1px solid ${theme.colors.grey}`,
-      '&:hover': {
-        border: `1.4px solid ${theme.colors.greyDarker60}`,
-      },
-      '&:focus': {
-        border: `2px solid ${theme.colors.grey40}`,
-      },
-    },
-  });
-
-export const error = (theme: Theme) =>
-  css({
-    [`& ${InputBase}`]: {
-      border: 'double 1px transparent',
-      backgroundImage: `linear-gradient(white, white),
-      linear-gradient(to right, ${theme.colors.red}, ${theme.colors.redLighter})`,
-      '&:hover': {
-        border: 'double 1.4px transparent',
-      },
-      '&:focus': {
-        border: 'double 2px transparent',
-        backgroundImage: `linear-gradient(white, white),
-        linear-gradient(
-          to right,
-          ${theme.colors.red40},
-          ${theme.colors.redLighter40}
-        )`,
-      },
-    },
-  });
-
-export const success = (theme: Theme) =>
-  css({
-    [`& ${InputBase}`]: {
-      border: 'double 1px transparent',
-      backgroundImage: `linear-gradient(white, white),
-        linear-gradient(
-          to right,
-          ${theme.colors.greenLighter},
-          ${theme.colors.green}
-        )`,
-      '&:hover': {
-        border: 'double 1.4px transparent',
-      },
-      '&:focus': {
-        border: 'double 2px transparent',
-        backgroundImage: `linear-gradient(white, white),
-          linear-gradient(
-            to right,
-            ${theme.colors.greenLighter40},
-            ${theme.colors.green40}
-          )`,
-      },
-    },
-    svg: {
-      stroke: `${theme.colors.green}`,
-    },
-  });
-
-export const custom = () => css({});
-
-export const inputStatus = css`
-  position: absolute;
-  top: 34%;
-  right: 14px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 10px;
-  width: 14px;
-  height: 14px;
-`;
-
-export const startElement = css`
-  position: absolute;
-  top: 0;
-  left: 14px;
-
-  height: 100%;
-  width: auto;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 10px;
-`;
-
-export const endElement = css`
-  position: absolute;
-  top: 0;
-  right: 14px;
-
-  height: 100%;
-  width: auto;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 10px;
-`;
+import { css, Theme } from '@emotion/react';
+
+import { InputBase } from './InputBase';
+
+export const basic = (theme: Theme) =>
+  css({
+    [`& ${InputBase}`]: {
+      border: `1px solid ${theme.colors.grey}`,
+      '&:hover': {
+        border: `1.4px solid ${theme.colors.greyDarker60}`,
+      },
+      '&:focus': {
+        border: `2px solid ${theme.colors.grey40}`,
+      },
+    },
+  });
+
+export const error = (theme: Theme) =>
+  css({
+    [`& ${InputBase}`]: {
+      border: 'double 1px transparent',
+      backgroundImage: `linear-gradient(white, white),
+      linear-gradient(to right, ${theme.colors.red}, ${theme.colors.redLighter})`,
+      '&:hover': {
+        border: 'double 1.4px transparent',
+      },
+      '&:focus': {
+        border: 'double 2px transparent',
+        backgroundImage: `linear-gradient(white, white),
+        linear-gradient(
+          to right,
+          ${theme.colors.red40},
+          ${theme.colors.redLighter40}
+        )`,
+      },
+    },
+  });
+
+export const success = (theme: Theme) =>
+  css({
+    [`& ${InputBase}`]: {
+      border: 'double 1px transparent',
+      backgroundImage: `linear-gradient(white, white),
+        linear-gradient(
+          to right,
+          ${theme.colors.greenLighter},
+          ${theme.colors.green}
+        )`,
+      '&:hover': {
+        border: 'double 1.4px transparent',
+      },
+      '&:focus': {
+        border: 'double 2px transparent',
+        backgroundImage: `linear-gradient(white, white),
+          linear-gradient(
+            to right,
+            ${theme.colors.greenLighter40},
+            ${theme.colors.green40}
+          )`,
+      },
+    },
+    svg: {
+      stroke: `${theme.colors.green}`,
+    },
+  });
+
+export const custom = () => css({});
+
+export const inputStatus = css`
+  position: absolute;
+  top: 34%;
+  right: 14px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 10px;
+  width: 14px;
+  height: 14px;
+`;
+
+export const startElement = css`
+  position: absolute;
+  top: 0;
+  left: 14px;
+
+  height: 100%;
+  width: auto;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 10px;
+`;
+
+export const endElement = css`
+  position: absolute;
+  top: 0;
+  right: 14px;
+
+  height: 100%;
+  width: auto;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 10px;
+`;

package/src/components/Input/types.ts

@@ -1,36 +1,36 @@
-import { BaseSyntheticEvent, KeyboardEventHandler } from 'react';
-import type { UseFormReturn } from 'react-hook-form';
-import type { Interpolation, Theme } from '@emotion/react';
-
-interface ExtendedInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  'data-testid'?: string;
-}
-
-export interface InputProps
-  extends Partial<Pick<UseFormReturn, 'register' | 'control' | 'setValue'>> {
-  name: string;
-  status?: keyof InputStatusColors;
-  type?: string;
-  placeholder?: string;
-  validationSchema?: Record<string, unknown>;
-  disabled?: boolean;
-  className?: string;
-  as?: React.ElementType;
-  startElement?: React.ReactElement;
-  endElement?: React.ReactElement;
-  css?: Interpolation<Theme>;
-  inputProps?: ExtendedInputProps;
-  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
-  onStartElementClick?: (event: BaseSyntheticEvent) => void;
-  onEndElementClick?: (event: BaseSyntheticEvent) => void;
-}
-
-export interface InputStatusColors {
-  basic: Interpolation<Theme>;
-  error: Interpolation<Theme>;
-  success: Interpolation<Theme>;
-  custom: Interpolation<Theme>;
-}
-
-export type InputColors = keyof Theme['colors'];
+import { BaseSyntheticEvent, KeyboardEventHandler } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+import type { Interpolation, Theme } from '@emotion/react';
+
+interface ExtendedInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  'data-testid'?: string;
+}
+
+export interface InputProps
+  extends Partial<Pick<UseFormReturn, 'register' | 'control' | 'setValue'>> {
+  name: string;
+  status?: keyof InputStatusColors;
+  type?: string;
+  placeholder?: string;
+  validationSchema?: Record<string, unknown>;
+  disabled?: boolean;
+  className?: string;
+  as?: React.ElementType;
+  startElement?: React.ReactElement;
+  endElement?: React.ReactElement;
+  css?: Interpolation<Theme>;
+  inputProps?: ExtendedInputProps;
+  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+  onStartElementClick?: (event: BaseSyntheticEvent) => void;
+  onEndElementClick?: (event: BaseSyntheticEvent) => void;
+}
+
+export interface InputStatusColors {
+  basic: Interpolation<Theme>;
+  error: Interpolation<Theme>;
+  success: Interpolation<Theme>;
+  custom: Interpolation<Theme>;
+}
+
+export type InputColors = keyof Theme['colors'];