takeat-design-system-ui-kit 0.0.0

package/src/components/FormItens/Select/Select.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Select } from ".";
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+  title: "Design System/Select",
+  argTypes: {
+    options: {
+      description:
+        "Array de opções do select no padrão: `{ value: any, label: string }`",
+    },
+    isMulti: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isClearable: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isSearchable: {
+      control: {
+        type: "boolean",
+      },
+    },
+    register: {
+      description:
+        'Usado para integrar ao React Hook Form. Exemplo: `register("name", { required: "Campo obrigatório" })`',
+      control: {
+        disable: true,
+      },
+    },
+    name: {
+      description:
+        "Para integrar ao React Hook Form, o select requer que seja definido um 'name' igual ao que é passado para o register",
+      control: {
+        type: "text",
+      },
+    },
+    control: {
+      description:
+        "Para integrar ao React Hook Form, o select requer que seja definido um 'control' que é fornecido pelo useForm() do React Hook Form",
+      control: {
+        disable: true,
+      },
+    },
+    error: {
+      control: {
+        type: "text",
+      },
+    },
+    info: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+  args: {
+    label: "Teste select",
+    isLoading: false,
+    isDisabled: false,
+    options: [
+      { value: "chocolate", label: "Chocolate" },
+      { value: "strawberry", label: "Strawberry" },
+      { value: "vanilla", label: "Vanilla" },
+    ],
+    info: "Informação adicional",
+    error: "",
+    isMulti: false,
+    isSearchable: false,
+    isClearable: false,
+    name: "teste",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Example: Story = {
+  args: {},
+};

package/src/components/FormItens/Select/index.tsx

@@ -0,0 +1,117 @@
+import ReactSelect, { Props as ReactSelectProps } from "react-select";
+import { AdditionalInfo, SelectWrapper } from "./styles";
+import { Controller, UseFormRegisterReturn } from "react-hook-form";
+import React from "react";
+import { Icon } from "../../Icon";
+import { Spinner } from "../../Spinner";
+import { useTheme } from "styled-components";
+
+interface Option {
+  label: string;
+  value: any;
+}
+
+interface CustomSelectProps extends ReactSelectProps<Option, false> {
+  name?: string;
+  label?: string;
+  register?: UseFormRegisterReturn;
+  control?: any;
+  error?: string;
+  info?: React.ReactNode | string;
+  isLoading?: boolean;
+}
+
+const RawSelect = ({
+  label,
+  error,
+  control,
+  info,
+  isDisabled,
+  isLoading,
+  ...props
+}: CustomSelectProps) => {
+  const theme = useTheme();
+
+  return (
+    <SelectWrapper disabled={isDisabled || isLoading} hasError={!!error}>
+      {label}
+      <ReactSelect
+        components={{
+          DropdownIndicator: () => {
+            if (isLoading) {
+              return (
+                <Spinner
+                  color={theme.colors.neutral.light}
+                  size={16}
+                  style={{ marginRight: 8 }}
+                />
+              );
+            }
+            return (
+              <Icon
+                className="custom-dropdown-icon"
+                icon="chevronDown"
+                size={28}
+              />
+            );
+          },
+        }}
+        isDisabled={isDisabled || isLoading}
+        classNamePrefix="react-select"
+        noOptionsMessage={() => "Nada encontrado"}
+        {...props}
+      />
+      {(!!control || !!error || !!info) && (
+        <AdditionalInfo
+          className="additional-info"
+          disabled={isDisabled || isLoading}
+          isError={!!error}
+        >
+          {error || info}
+        </AdditionalInfo>
+      )}
+    </SelectWrapper>
+  );
+};
+
+export const Select = ({
+  name,
+  label,
+  register,
+  control,
+  error,
+  info,
+  isLoading,
+  ...props
+}: CustomSelectProps) => {
+  return control ? (
+    <Controller
+      name={name || ""}
+      control={control}
+      render={({ field }) => {
+        return (
+          <RawSelect
+            label={label}
+            error={error}
+            info={info}
+            control={control}
+            isLoading={isLoading}
+            isDisabled={props.isDisabled}
+            {...props}
+            {...field}
+          />
+        );
+      }}
+    />
+  ) : (
+    <RawSelect
+      label={label}
+      error={error}
+      info={info}
+      control={control}
+      isLoading={isLoading}
+      isDisabled={props.isDisabled}
+      {...props}
+    />
+  );
+};

package/src/components/FormItens/Select/styles.ts

@@ -0,0 +1,149 @@
+import styled from "styled-components";
+
+interface SelectWrapperProps {
+  hasError?: boolean;
+  disabled?: boolean;
+}
+
+export const SelectWrapper = styled.label<SelectWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.15px;
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.colors.neutral.light : theme.colors.neutral.dark};
+  width: fit-content;
+
+  .custom-dropdown-icon {
+    fill: ${({ theme, disabled }) =>
+      disabled ? theme.colors.neutral.light : theme.colors.neutral.dark};
+
+    padding-right: 8px;
+  }
+
+  .react-select__control {
+    border-radius: ${({ theme }) => theme.radius.m};
+    border-color: ${({ theme, hasError }) =>
+      hasError ? theme.colors.red.default : theme.colors.neutral.dark};
+    color: ${({ theme }) => theme.colors.neutral.dark};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    cursor: pointer;
+  }
+
+  [class$="-control"]:hover {
+    border-color: ${({ theme }) => theme.colors.neutral.dark};
+  }
+
+  .react-select__control--is-focused {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.blue.dark};
+    box-shadow: none;
+  }
+
+  .react-select__control--is-disabled {
+    background-color: transparent;
+    border-color: ${({ theme }) => theme.colors.neutral.light};
+    color: ${({ theme }) => theme.colors.neutral.light};
+
+    .react-select__placeholder {
+      color: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+
+  .react-select__indicator-separator {
+    display: none;
+  }
+
+  .react-select__menu {
+    border-radius: ${({ theme }) => theme.radius.m};
+    padding: ${({ theme }) => theme.spacing.xs};
+    border-color: transparent;
+    box-shadow: ${({ theme }) => theme.shadows.default};
+  }
+
+  .react-select__menu-list {
+    padding: 0;
+  }
+
+  .react-select__option {
+    padding: ${({ theme }) => theme.spacing.xs};
+    border-radius: ${({ theme }) => theme.radius.s};
+    color: ${({ theme }) => theme.colors.neutral.dark};
+    font-family: ${({ theme }) => theme.typography.family.default};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.014px;
+    transition: all 0.3s;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.neutral.lighter};
+    }
+  }
+
+  .react-select__option--is-focused {
+    background-color: transparent;
+  }
+
+  .react-select__option--is-selected {
+    background-color: ${({ theme }) => theme.colors.primary.lightest};
+    color: ${({ theme }) => theme.colors.neutral.darker};
+  }
+
+  .react-select__multi-value {
+    border-radius: ${({ theme }) => theme.radius.s};
+    background-color: ${({ theme }) => theme.colors.neutral.lighter};
+  }
+
+  .react-select__multi-value__label {
+    padding: ${({ theme }) => theme.spacing.xxs};
+  }
+
+  .react-select__multi-value__remove:hover {
+    background-color: ${({ theme }) => theme.colors.red.lightest};
+
+    svg {
+      fill: ${({ theme }) => theme.colors.red.default};
+    }
+  }
+
+  .react-select__menu-notice {
+    color: ${({ theme }) => theme.colors.neutral.default};
+    font-family: ${({ theme }) => theme.typography.family.default};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.014px;
+  }
+`;
+
+interface AdditionalInfo {
+  isError?: boolean;
+  disabled?: boolean;
+}
+
+export const AdditionalInfo = styled.div<AdditionalInfo>`
+  color: ${({ theme, isError, disabled }) =>
+    isError
+      ? theme.colors.primary.default
+      : disabled
+        ? theme.colors.neutral.light
+        : theme.colors.neutral.dark};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  height: 16px;
+  letter-spacing: 0.4px;
+`;

package/src/components/FormItens/Switch/Switch.stories.tsx

@@ -0,0 +1,127 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Switch } from ".";
+import { Subtitle } from "../../StoriesComponents/styles";
+
+const meta: Meta<typeof Switch> = {
+  title: "Design System/Switch",
+  component: Switch,
+  parameters: {
+    componentSubtitle: (
+      <Subtitle>
+        Um Switch é um componente de interface que permite ao usuário alternar
+        entre dois estados mutuamente exclusivos, como ligar ou desligar uma
+        funcionalidade.
+        <br />
+        <br /> Esses controles são mais adequados para{" "}
+        <b>ações imediatas e contextuais</b>, onde o efeito da mudança de estado
+        é percebido instantaneamente. É ideal para ajustes simples e rápidos,
+        <b> sem necessidade de confirmação adicional.</b>
+      </Subtitle>
+    ),
+  },
+  argTypes: {
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+    labelPosition: {
+      control: {
+        type: "inline-radio",
+        options: ["left", "right", "top", "bottom"],
+      },
+    },
+    customColor: {
+      description: "Cor customizada do switch ativo (hexadecimal)",
+      control: {
+        type: "color",
+      },
+    },
+    isLoading: {
+      control: {
+        type: "boolean",
+      },
+    },
+    checked: {
+      description: "Valor do switch caso precise ter estado controlado",
+      control: {
+        type: "boolean",
+      },
+    },
+    onChange: {
+      description:
+        "Função de callback para quando o switch for alterado. Retorna um ChangeEvent. Exemplo: `onChange={(e) => console.log(e.target.checked)}`",
+      action: "changed",
+    },
+    register: {
+      description:
+        'Usado para integrar ao React Hook Form. Exemplo: `register("name", { required: "Campo obrigatório" })`',
+      control: {
+        disable: true,
+      },
+    },
+  },
+
+  args: {
+    label: "Switch",
+    labelPosition: "right",
+    disabled: false,
+    isLoading: false,
+    customColor: undefined,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Example: Story = {
+  name: "Exemplo",
+};
+
+export const List: Story = {
+  name: "Lista de todos os estados",
+  render: () => {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <Switch label="Marcado" checked />
+        <Switch label="Marcado e desabilitado" disabled checked />
+        <Switch label="Desmarcado" checked={false} />
+        <Switch label="Desmarcado e desabilitado" disabled />
+      </div>
+    );
+  },
+  // Disable all controls
+  argTypes: {
+    label: {
+      table: {
+        disable: true,
+      },
+    },
+    checked: {
+      table: {
+        disable: true,
+      },
+    },
+    disabled: {
+      table: {
+        disable: true,
+      },
+    },
+    isLoading: {
+      table: {
+        disable: true,
+      },
+    },
+    labelPosition: {
+      table: {
+        disable: true,
+      },
+    },
+    customColor: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};

package/src/components/FormItens/Switch/index.tsx

@@ -0,0 +1,59 @@
+import { UseFormRegisterReturn } from "react-hook-form";
+import { generateColorVariants } from "../../../utils/functions";
+import { SwitchArea, SwitchLabel } from "./styles";
+import { forwardRef, useMemo } from "react";
+import { LABEL_POSITIONS } from "../../../utils/consts";
+import { Spinner } from "../../Spinner";
+import { useTheme } from "styled-components";
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string | React.ReactNode;
+  labelPosition?: keyof typeof LABEL_POSITIONS;
+  customColor?: string;
+  isLoading?: boolean;
+  register?: UseFormRegisterReturn;
+}
+
+export const Switch = forwardRef(function Switch(
+  {
+    label,
+    labelPosition = "right",
+    customColor,
+    isLoading,
+    register,
+    ...props
+  }: SwitchProps,
+  ref: React.Ref<HTMLInputElement>
+) {
+  const theme = useTheme();
+  const colorVariants = customColor
+    ? useMemo(() => generateColorVariants(customColor), [customColor])
+    : undefined;
+
+  return (
+    <SwitchLabel labelPosition={labelPosition}>
+      <input
+        ref={ref}
+        type="checkbox"
+        {...props}
+        disabled={isLoading || props.disabled}
+        {...register}
+      />
+      {label && <span>{label}</span>}
+      <SwitchArea colorVariants={colorVariants} isLoading={isLoading}>
+        <Spinner
+          size={10}
+          color={theme.colors.neutral.lighter}
+          style={{
+            position: "absolute",
+            left: 14,
+            top: 4,
+            transition: "all 0.3s cubic-bezier(0.65, 0, 0.35, 1)",
+            zIndex: 1,
+            opacity: isLoading ? 1 : 0,
+          }}
+        />
+      </SwitchArea>
+    </SwitchLabel>
+  );
+});

package/src/components/FormItens/Switch/styles.ts

@@ -0,0 +1,123 @@
+import styled from "styled-components";
+import { LABEL_POSITIONS, spacing } from "../../../utils/consts";
+import { ColorVariants } from "../../../utils/globalTypes";
+
+interface SwitchLabelProps {
+  labelPosition: keyof typeof LABEL_POSITIONS;
+}
+
+export const SwitchLabel = styled.label<SwitchLabelProps>`
+  display: flex;
+  gap: ${spacing.xs};
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  flex-direction: ${({ labelPosition }) => LABEL_POSITIONS[labelPosition]};
+  border-radius: ${spacing.xxs};
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  &:has(> input[type="checkbox"]:focus-visible) {
+    outline: 1px solid black;
+    outline-offset: 2px;
+  }
+
+  span {
+    color: ${({ theme }) => theme.colors.neutral.darker};
+    font-family: Poppins;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: 0.1px;
+    transition: all 0.3s;
+  }
+
+  &:has(> input[type="checkbox"]:disabled) {
+    cursor: default;
+
+    span {
+      color: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+`;
+
+interface SwitchAreaProps {
+  isLoading?: boolean;
+  colorVariants?: ColorVariants;
+}
+
+export const SwitchArea = styled.div<SwitchAreaProps>`
+  flex-shrink: 0;
+  position: relative;
+  width: 40px;
+  height: 20px;
+  border-radius: 20px;
+  transition: all 0.3s;
+  background-color: ${({ theme }) => theme.colors.neutral.default};
+  border: 1px solid transparent;
+
+  label:hover > & {
+    background-color: ${({ theme }) => theme.colors.neutral.dark};
+  }
+
+  // Switch button
+  &::after {
+    content: "";
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: white;
+    transition: all 0.3s;
+    top: 2px;
+    left: ${({ isLoading }: SwitchAreaProps) => (isLoading ? "12px" : "2px")};
+  }
+
+  // Checked
+  input[type="checkbox"]:checked ~ & {
+    background-color: ${({ colorVariants, theme }) =>
+      colorVariants?.default || theme.colors.green.default};
+
+    label:hover > & {
+      background-color: ${({ colorVariants, theme }) =>
+        colorVariants?.dark || theme.colors.green.dark};
+    }
+
+    &::after {
+      left: ${({ isLoading }: SwitchAreaProps) =>
+        isLoading ? "12px" : "22px"};
+    }
+  }
+
+  // Disabled
+  input[type="checkbox"]:disabled ~ & {
+    background-color: #fff;
+    border-color: ${({ theme }) => theme.colors.neutral.light};
+
+    &::after {
+      background-color: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+
+  //Disabled and checked
+  input[type="checkbox"]:disabled:checked ~ & {
+    background-color: ${({ theme }) => theme.colors.neutral.lighter};
+    border-color: transparent;
+
+    label:hover > & {
+      background-color: ${({ theme }) => theme.colors.neutral.lighter};
+    }
+
+    &::after {
+      background-color: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+`;