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

package/src/components/Checkbox/Checkbox.tsx

@@ -1,79 +1,79 @@
-import { useState, useId, useEffect, useRef } from 'react';
-import { useTheme } from '@emotion/react';
-import { CheckboxBase } from './CheckboxBase';
-import Icon from '@components/Icon';
-
-import { ICheckboxProps } from './types';
-
-const Checkbox = ({
-  text,
-  id,
-  onChange,
-  isDisabled,
-  externalState,
-  initialState,
-  isIndeterminate,
-  name = '',
-  isRequired = false,
-  ref,
-  register,
-  ...rest
-}: ICheckboxProps) => {
-  const [isChecked, setIsChecked] = useState(Boolean(initialState));
-  const autoGenId = useId();
-  const theme = useTheme();
-  const checkboxInputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    // istanbul ignore else
-    if (checkboxInputRef.current) {
-      // Browsers drop the "indeterminate" state after the "checked" state
-      // changes. We keep the component in the "indeterminate" state until the
-      // prop's value changes to false or is removed.
-      checkboxInputRef.current.indeterminate = Boolean(isIndeterminate);
-    }
-  }, [isIndeterminate, isChecked]);
-
-  useEffect(() => {
-    if (typeof externalState === 'boolean') {
-      setIsChecked(Boolean(externalState));
-    }
-  }, [externalState]);
-
-  const checkboxId = id || autoGenId;
-
-  return (
-    <CheckboxBase htmlFor={checkboxId} {...rest}>
-      <input
-        id={checkboxId}
-        type="checkbox"
-        checked={isChecked}
-        onChange={() => {
-          const newIsChecked = !isChecked;
-          setIsChecked(newIsChecked);
-          onChange?.(newIsChecked);
-        }}
-        disabled={isDisabled}
-        ref={(node: HTMLInputElement) => {
-          checkboxInputRef.current = node;
-          if (ref) {
-            ref.current = node;
-          }
-        }}
-        name={name}
-        required={isRequired}
-        {...register}
-      />
-      <div>
-        {isIndeterminate ? (
-          <Icon name="minus" size={12} color={theme.colors.white} />
-        ) : isChecked ? (
-          <Icon name="check" size={12} color={theme.colors.white} />
-        ) : null}
-      </div>
-      {text ? <span>{text}</span> : null}
-    </CheckboxBase>
-  );
-};
-
-export default Checkbox;
+import { useState, useId, useEffect, useRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { CheckboxBase } from './CheckboxBase';
+import Icon from '@components/Icon';
+
+import { ICheckboxProps } from './types';
+
+const Checkbox = ({
+  text,
+  id,
+  onChange,
+  isDisabled,
+  externalState,
+  initialState,
+  isIndeterminate,
+  name = '',
+  isRequired = false,
+  ref,
+  register,
+  ...rest
+}: ICheckboxProps) => {
+  const [isChecked, setIsChecked] = useState(Boolean(initialState));
+  const autoGenId = useId();
+  const theme = useTheme();
+  const checkboxInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    // istanbul ignore else
+    if (checkboxInputRef.current) {
+      // Browsers drop the "indeterminate" state after the "checked" state
+      // changes. We keep the component in the "indeterminate" state until the
+      // prop's value changes to false or is removed.
+      checkboxInputRef.current.indeterminate = Boolean(isIndeterminate);
+    }
+  }, [isIndeterminate, isChecked]);
+
+  useEffect(() => {
+    if (typeof externalState === 'boolean') {
+      setIsChecked(Boolean(externalState));
+    }
+  }, [externalState]);
+
+  const checkboxId = id || autoGenId;
+
+  return (
+    <CheckboxBase htmlFor={checkboxId} {...rest}>
+      <input
+        id={checkboxId}
+        type="checkbox"
+        checked={isChecked}
+        onChange={() => {
+          const newIsChecked = !isChecked;
+          setIsChecked(newIsChecked);
+          onChange?.(newIsChecked);
+        }}
+        disabled={isDisabled}
+        ref={(node: HTMLInputElement) => {
+          checkboxInputRef.current = node;
+          if (ref) {
+            ref.current = node;
+          }
+        }}
+        name={name}
+        required={isRequired}
+        {...register}
+      />
+      <div>
+        {isIndeterminate ? (
+          <Icon name="minus" size={12} color={theme.colors.white} />
+        ) : isChecked ? (
+          <Icon name="check" size={12} color={theme.colors.white} />
+        ) : null}
+      </div>
+      {text ? <span>{text}</span> : null}
+    </CheckboxBase>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/CheckboxBase.tsx

@@ -1,71 +1,71 @@
-import styled from '@emotion/styled';
-import Label from '@components/Label';
-import { checkboxStyles } from './styles';
-import { ICheckboxProps } from './types';
-
-export const CheckboxBase = styled(Label)<Pick<ICheckboxProps, 'color'>>`
-  position: relative;
-  display: inline-flex;
-  flex-grow: 0;
-  align-items: center;
-  vertical-align: middle;
-  cursor: pointer;
-  &:has(input:disabled) {
-    cursor: default;
-  }
-
-  div {
-    position: relative;
-    height: 20px;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-  }
-
-  input + div {
-    svg {
-      z-index: 2;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      box-sizing: border-box;
-      height: 20px;
-      width: 20px;
-      top: 0;
-      left: 0;
-      border-radius: 6px;
-      z-index: 1;
-    }
-  }
-
-  ${({ color = 'green', theme }) => {
-    switch (color) {
-      case 'blue':
-        return checkboxStyles.blueInput(theme);
-      case 'green':
-        return checkboxStyles.greenInput(theme);
-      default:
-    }
-  }}
-
-  input {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-
-  span {
-    margin-left: 10px;
-    font-size: 14px;
-    font-weight: 100;
-  }
-`;
+import styled from '@emotion/styled';
+import Label from '@components/Label';
+import { checkboxStyles } from './styles';
+import { ICheckboxProps } from './types';
+
+export const CheckboxBase = styled(Label)<Pick<ICheckboxProps, 'color'>>`
+  position: relative;
+  display: inline-flex;
+  flex-grow: 0;
+  align-items: center;
+  vertical-align: middle;
+  cursor: pointer;
+  &:has(input:disabled) {
+    cursor: default;
+  }
+
+  div {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+  }
+
+  input + div {
+    svg {
+      z-index: 2;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      box-sizing: border-box;
+      height: 20px;
+      width: 20px;
+      top: 0;
+      left: 0;
+      border-radius: 6px;
+      z-index: 1;
+    }
+  }
+
+  ${({ color = 'green', theme }) => {
+    switch (color) {
+      case 'blue':
+        return checkboxStyles.blueInput(theme);
+      case 'green':
+        return checkboxStyles.greenInput(theme);
+      default:
+    }
+  }}
+
+  input {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  span {
+    margin-left: 10px;
+    font-size: 14px;
+    font-weight: 100;
+  }
+`;

package/src/components/Checkbox/index.ts

@@ -1,3 +1,3 @@
-export { default } from './Checkbox';
-export { checkboxStyles } from './styles';
-export * from './types';
+export { default } from './Checkbox';
+export { checkboxStyles } from './styles';
+export * from './types';

package/src/components/Checkbox/styles.tsx

@@ -1,70 +1,70 @@
-import { css, Theme } from '@emotion/react';
-
-const blueInput = (theme: Theme) => css`
-  & input:focus + div {
-    box-shadow: -4px 4px 10px ${theme.colors.blueNotification40};
-  }
-  & input:disabled + div,
-  & input:indeterminate:disabled + div {
-    background: ${theme.colors.greyFocused};
-  }
-  & input:not(:checked, :indeterminate, :disabled) + div::before {
-    border: 1.5px solid ${theme.colors.greyDropdownMain};
-  }
-  & input:not(:checked, :indeterminate, :disabled) + div:hover::before {
-    border: 1.5px solid ${theme.colors.greyDropdownMain};
-  }
-  & input:not(:disabled):checked + div::before,
-  & input:not(:disabled):indeterminate + div::before {
-    background: ${theme.colors.blueNotification};
-  }
-  & input:not(:disabled):checked + div:hover::before {
-    background: ${theme.colors.blueNotification};
-  }
-  & input:not(:disabled):checked + div + span {
-    font-weight: 500;
-    color: ${theme.colors.greyDropdownText};
-  }
-`;
-
-const greenInput = (theme: Theme) => css`
-  & input:focus + div {
-    box-shadow: -4px 4px 10px ${theme.colors.green40};
-  }
-
-  & input:disabled + div,
-  & input:indeterminate:disabled + div {
-    background: ${theme.colors.greyFocused};
-  }
-
-  & input:not(:checked, :indeterminate, :disabled) + div::before {
-    border: 1.5px solid ${theme.colors.green};
-  }
-
-  & input:not(:checked, :indeterminate, :disabled) + div:hover::before {
-    border: 1.5px solid ${theme.colors.green60};
-  }
-
-  & input:not(:disabled):checked + div::before,
-  & input:not(:disabled):indeterminate + div::before {
-    background: linear-gradient(
-      117.5deg,
-      ${theme.colors.greenLighter} 17.12%,
-      ${theme.colors.green} 85.53%
-    );
-  }
-
-  & input:not(:disabled):checked + div:hover::before,
-  & input:not(:disabled):indeterminate + div:hover::before {
-    background: linear-gradient(
-      117.5deg,
-      ${theme.colors.greenLighter60} 17.12%,
-      ${theme.colors.green60} 85.53%
-    );
-  }
-`;
-
-export const checkboxStyles = {
-  blueInput,
-  greenInput,
-};
+import { css, Theme } from '@emotion/react';
+
+const blueInput = (theme: Theme) => css`
+  & input:focus + div {
+    box-shadow: -4px 4px 10px ${theme.colors.blueNotification40};
+  }
+  & input:disabled + div,
+  & input:indeterminate:disabled + div {
+    background: ${theme.colors.greyFocused};
+  }
+  & input:not(:checked, :indeterminate, :disabled) + div::before {
+    border: 1.5px solid ${theme.colors.greyDropdownMain};
+  }
+  & input:not(:checked, :indeterminate, :disabled) + div:hover::before {
+    border: 1.5px solid ${theme.colors.greyDropdownMain};
+  }
+  & input:not(:disabled):checked + div::before,
+  & input:not(:disabled):indeterminate + div::before {
+    background: ${theme.colors.blueNotification};
+  }
+  & input:not(:disabled):checked + div:hover::before {
+    background: ${theme.colors.blueNotification};
+  }
+  & input:not(:disabled):checked + div + span {
+    font-weight: 500;
+    color: ${theme.colors.greyDropdownText};
+  }
+`;
+
+const greenInput = (theme: Theme) => css`
+  & input:focus + div {
+    box-shadow: -4px 4px 10px ${theme.colors.green40};
+  }
+
+  & input:disabled + div,
+  & input:indeterminate:disabled + div {
+    background: ${theme.colors.greyFocused};
+  }
+
+  & input:not(:checked, :indeterminate, :disabled) + div::before {
+    border: 1.5px solid ${theme.colors.green};
+  }
+
+  & input:not(:checked, :indeterminate, :disabled) + div:hover::before {
+    border: 1.5px solid ${theme.colors.green60};
+  }
+
+  & input:not(:disabled):checked + div::before,
+  & input:not(:disabled):indeterminate + div::before {
+    background: linear-gradient(
+      117.5deg,
+      ${theme.colors.greenLighter} 17.12%,
+      ${theme.colors.green} 85.53%
+    );
+  }
+
+  & input:not(:disabled):checked + div:hover::before,
+  & input:not(:disabled):indeterminate + div:hover::before {
+    background: linear-gradient(
+      117.5deg,
+      ${theme.colors.greenLighter60} 17.12%,
+      ${theme.colors.green60} 85.53%
+    );
+  }
+`;
+
+export const checkboxStyles = {
+  blueInput,
+  greenInput,
+};

package/src/components/Checkbox/types.ts

@@ -1,32 +1,32 @@
-import {
-  Control,
-  FieldPath,
-  FieldValues,
-  UseFormReturn,
-} from 'react-hook-form';
-import { MutableRefObject } from 'react';
-
-export interface ICheckboxProps
-  extends Partial<Pick<UseFormReturn, 'register'>> {
-  text?: string;
-  id?: string;
-  onChange?: (newState: boolean) => void;
-  externalState?: boolean;
-  isDisabled?: boolean;
-  initialState?: boolean;
-  isIndeterminate?: boolean;
-  name?: string;
-  isRequired?: boolean;
-  ref?: MutableRefObject<HTMLInputElement>;
-  color?: 'green' | 'blue' | 'custom';
-  as?: React.ElementType;
-  className?: string;
-}
-
-export type IFormCheckboxProps<T extends FieldValues> = Omit<
-  ICheckboxProps,
-  'onChange' | 'name'
-> & {
-  name: FieldPath<T>;
-  control: Control<T>;
-};
+import {
+  Control,
+  FieldPath,
+  FieldValues,
+  UseFormReturn,
+} from 'react-hook-form';
+import { MutableRefObject } from 'react';
+
+export interface ICheckboxProps
+  extends Partial<Pick<UseFormReturn, 'register'>> {
+  text?: string;
+  id?: string;
+  onChange?: (newState: boolean) => void;
+  externalState?: boolean;
+  isDisabled?: boolean;
+  initialState?: boolean;
+  isIndeterminate?: boolean;
+  name?: string;
+  isRequired?: boolean;
+  ref?: MutableRefObject<HTMLInputElement>;
+  color?: 'green' | 'blue' | 'custom';
+  as?: React.ElementType;
+  className?: string;
+}
+
+export type IFormCheckboxProps<T extends FieldValues> = Omit<
+  ICheckboxProps,
+  'onChange' | 'name'
+> & {
+  name: FieldPath<T>;
+  control: Control<T>;
+};

package/src/components/ColorPicker/ColorPicker.spec.tsx

@@ -1,58 +1,58 @@
-import { fireEvent, screen } from '../../../customTest';
-import ColorPicker from '@components/ColorPicker';
-
-describe('ColorPicker', () => {
-  it('Return the correct color onChange', async () => {
-    const mockOnChange = jest.fn();
-
-    render(<ColorPicker onChange={mockOnChange} />);
-
-    const [
-      btnPink,
-      btnYellow,
-      btnGreen,
-      btnTurquoise,
-      btnBlueLight,
-      btnBlue,
-      btnPurple,
-    ] = await screen.queryAllByRole('button');
-
-    fireEvent.click(btnPink);
-
-    expect(mockOnChange).toBeCalledWith('pink');
-
-    fireEvent.click(btnYellow);
-
-    expect(mockOnChange).toBeCalledWith('yellow');
-
-    fireEvent.click(btnGreen);
-
-    expect(mockOnChange).toBeCalledWith('green');
-
-    fireEvent.click(btnTurquoise);
-
-    expect(mockOnChange).toBeCalledWith('turquoise');
-
-    fireEvent.click(btnBlueLight);
-
-    expect(mockOnChange).toBeCalledWith('blueLight');
-
-    fireEvent.click(btnBlue);
-
-    expect(mockOnChange).toBeCalledWith('blue');
-
-    fireEvent.click(btnPurple);
-
-    expect(mockOnChange).toBeCalledWith('purple');
-  });
-
-  it('Return the correct init color', async () => {
-    const mockOnChange = jest.fn();
-
-    render(<ColorPicker onChange={mockOnChange} initColor="green" />);
-
-    const [, , btnGreen] = await screen.queryAllByRole('button');
-
-    expect(btnGreen).toHaveStyleRule('border', '1.4px solid #fff');
-  });
-});
+import { fireEvent, screen } from '../../../customTest';
+import ColorPicker from '@components/ColorPicker';
+
+describe('ColorPicker', () => {
+  it('Return the correct color onChange', async () => {
+    const mockOnChange = jest.fn();
+
+    render(<ColorPicker onChange={mockOnChange} />);
+
+    const [
+      btnPink,
+      btnYellow,
+      btnGreen,
+      btnTurquoise,
+      btnBlueLight,
+      btnBlue,
+      btnPurple,
+    ] = await screen.queryAllByRole('button');
+
+    fireEvent.click(btnPink);
+
+    expect(mockOnChange).toBeCalledWith('pink');
+
+    fireEvent.click(btnYellow);
+
+    expect(mockOnChange).toBeCalledWith('yellow');
+
+    fireEvent.click(btnGreen);
+
+    expect(mockOnChange).toBeCalledWith('green');
+
+    fireEvent.click(btnTurquoise);
+
+    expect(mockOnChange).toBeCalledWith('turquoise');
+
+    fireEvent.click(btnBlueLight);
+
+    expect(mockOnChange).toBeCalledWith('blueLight');
+
+    fireEvent.click(btnBlue);
+
+    expect(mockOnChange).toBeCalledWith('blue');
+
+    fireEvent.click(btnPurple);
+
+    expect(mockOnChange).toBeCalledWith('purple');
+  });
+
+  it('Return the correct init color', async () => {
+    const mockOnChange = jest.fn();
+
+    render(<ColorPicker onChange={mockOnChange} initColor="green" />);
+
+    const [, , btnGreen] = await screen.queryAllByRole('button');
+
+    expect(btnGreen).toHaveStyleRule('border', '1.4px solid #fff');
+  });
+});