@granto-umbrella/umbrella-components 2.3.23 → 3.0.1

package/src/components/atoms/MultiSelect/MultiSelect.styles.tsx

@@ -0,0 +1,92 @@
+import styled, { css } from "styled-components"
+import { typographyTokens, semanticSizes, semanticColors } from "../../../styles/tokens"
+
+type IContainer = {
+  $sizeDisplay?: '100' | '75' | '66' | '50' | '33' | '25';
+  height?: string;
+}
+
+export const Container = styled.div<IContainer>`
+  display: flex;
+  flex-direction: column;
+  height: ${(props) => props.height || "auto"};
+  
+  /* Aplicando os tamanhos de display corretamente */
+  ${({ $sizeDisplay }) =>
+    $sizeDisplay === '100'
+      ? css`
+          width: 100%;
+        `
+      : $sizeDisplay === '75'
+        ? css`
+            width: calc(75% - 8px);
+          `
+        : $sizeDisplay === '66'
+          ? css`
+              width: calc(66% - 8px);
+            `
+          : $sizeDisplay === '50'
+            ? css`
+                width: calc(50% - 8px);
+              `
+            : $sizeDisplay === '33'
+              ? css`
+                  width: calc(33% - 8px);
+                `
+              : $sizeDisplay === '25'
+                ? css`
+                    width: calc(25% - 11px);
+                  `
+                : css`
+                    width: 100%;
+                  `
+  }
+
+  /* Container interno para posicionamento relativo */
+  > div {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+`
+
+export const Label = styled.label<{ fontSize?: string; fontWeight?: string }>`
+  font-size: ${(props) => props.fontSize || typographyTokens.fontSizes.captionM};
+  font-weight: ${(props) => props.fontWeight || typographyTokens.fontWeights.medium};
+  color: ${semanticColors.neutral[700]};
+  margin-bottom: ${semanticSizes.global.gap.sm};
+  font-family: ${typographyTokens.fontFamily.base};
+  display: block;
+  line-height: 1.4;
+`
+
+export const SelectWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`
+
+export const Icon = styled.div<{ $error?: boolean }>`
+  position: absolute;
+  right: ${semanticSizes.global.padding.sm};
+  top: 50%;
+  transform: translateY(-50%);
+  color: ${(props) => (props.$error ? semanticColors.danger.text.enabled : semanticColors.neutral[400])};
+  pointer-events: none;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const Error = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.xs};
+  color: ${semanticColors.danger.text.enabled};
+  font-size: ${typographyTokens.fontSizes.captionM};
+  margin-top: ${semanticSizes.global.padding.xs};
+  font-family: ${typographyTokens.fontFamily.base};
+  line-height: 1.4;
+`

package/src/components/atoms/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from 'react';
+import Select, {
+  type StylesConfig,
+  components,
+  type GroupBase,
+  type MultiValue as ReactSelectMultiValue,
+  type SingleValue,
+  type ActionMeta,
+} from 'react-select';
+import { WarningCircle } from '@phosphor-icons/react';
+import {
+  Container,
+  Label,
+  Icon,
+  Error,
+  SelectWrapper,
+} from './MultiSelect.styles';
+import {
+  semanticColors,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+import type {
+  IStyledBaseProps,
+  SelectProps,
+  SelectOption,
+} from './MultiSelect.types';
+
+const StyledBase: React.FC<IStyledBaseProps> = ({
+  children,
+  label,
+  error,
+  errorMessage,
+  labelSize,
+  labelWeight,
+  icon,
+  sizeDisplay,
+  height,
+}) => {
+  return (
+    <Container $sizeDisplay={sizeDisplay} height={height}>
+      <div>
+        {label && (
+          <Label fontSize={labelSize} fontWeight={labelWeight}>
+            {label}
+          </Label>
+        )}
+        <SelectWrapper>
+          {children}
+          {icon && <Icon $error={error}>{icon}</Icon>}
+        </SelectWrapper>
+        {error && errorMessage && (
+          <Error>
+            <WarningCircle size={14} /> {errorMessage}
+          </Error>
+        )}
+      </div>
+    </Container>
+  );
+};
+
+const NoOptionsMessage = (props: any) => (
+  <components.NoOptionsMessage {...props}>
+    <span>Sem dados</span>
+  </components.NoOptionsMessage>
+);
+
+const CustomMultiValue = (props: any) => (
+  <components.MultiValue {...props}>
+    <Custom {...props} />
+  </components.MultiValue>
+);
+
+const Option = (props: any) => (
+  <components.Option {...props}>
+    <Custom {...props} />
+  </components.Option>
+);
+
+const Custom = (props: any) => (
+  <div style={{ display: 'flex', alignItems: 'center' }}>
+    {'picture' in props.data &&
+      (props.data.picture ? (
+        <img
+          src={props.data.picture || '/placeholder.svg'}
+          alt={props.data.name || props.data.label}
+          style={{
+            width: '16px',
+            height: '16px',
+            borderRadius: '50%',
+            marginRight: '8px',
+            objectFit: 'cover',
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '16px',
+            height: '16px',
+            borderRadius: '50%',
+            backgroundColor: semanticColors.base.text,
+            color: semanticColors.base.background,
+            fontSize: '10px',
+            display: 'flex',
+            marginRight: '8px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          {(props.data.label as string).charAt(0).toUpperCase()}
+        </div>
+      ))}
+    <span
+      style={{
+        fontSize: typographyTokens.fontSizes.bodyS,
+        lineHeight: '1.4',
+        color: 'inherit',
+      }}
+    >
+      {props.data.label}
+    </span>
+  </div>
+);
+
+const MultiSelect: React.FC<SelectProps> = ({
+  options,
+  placeholder,
+  height = '40px',
+  enabledClear = true,
+  multiple,
+  value,
+  disabled,
+  menuPlacement = 'auto',
+  defaultValue,
+  setValue,
+  ...props
+}) => {
+  const styles: StylesConfig<SelectOption, boolean, GroupBase<SelectOption>> = {
+    indicatorSeparator: (base: any) => ({ ...base, display: 'none' }),
+    container: (base: any) => ({
+      ...base,
+      width: '100%',
+      border: 'none',
+      position: 'relative',
+    }),
+    control: (base: any, state: any) => ({
+      ...base,
+      minHeight: `${height}`,
+      backgroundColor: semanticColors.base.background,
+      padding: '2px 8px',
+      borderRadius: semanticRadius.global.radius.md,
+      borderColor: state.isFocused
+        ? semanticColors.branding.border.enabled
+        : semanticColors.global.border.default,
+      ':hover': {
+        borderColor: semanticColors.branding.border.hover,
+      },
+      boxShadow: state.isFocused
+        ? `0 0 0 1px ${semanticColors.branding.border.enabled}`
+        : 'none',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.6 : 1,
+    }),
+    dropdownIndicator: (baseStyles: any) => ({
+      ...baseStyles,
+      color: semanticColors.branding.surface.enabled,
+      padding: '8px',
+      ':hover': {
+        color: semanticColors.branding.surface.hover,
+      },
+    }),
+    clearIndicator: (baseStyles: any) => ({
+      ...baseStyles,
+      color: semanticColors.neutral[400],
+      padding: '8px',
+      ':hover': {
+        color: semanticColors.danger.text.enabled,
+      },
+    }),
+    indicatorsContainer: (base: any) => ({
+      ...base,
+      alignItems: 'center',
+    }),
+    option: (baseStyle: any, state: any) => ({
+      ...baseStyle,
+      color: state.isSelected
+        ? semanticColors.branding.text.onSurfaceAccent.enabled
+        : semanticColors.base.text,
+      backgroundColor: state.isSelected
+        ? semanticColors.branding.surface.enabled
+        : state.isFocused
+        ? semanticColors.neutral[100]
+        : 'transparent',
+      cursor: 'pointer',
+      padding: '12px 16px',
+      ':active': {
+        backgroundColor: state.isSelected
+          ? semanticColors.branding.surface.pressed
+          : semanticColors.neutral[200],
+      },
+    }),
+    placeholder: (base: any) => ({
+      ...base,
+      fontSize: typographyTokens.fontSizes.bodyS,
+      fontWeight: typographyTokens.fontWeights.regular,
+      color: semanticColors.neutral[400],
+      margin: 0,
+    }),
+    singleValue: (base: any) => ({
+      ...base,
+      fontSize: typographyTokens.fontSizes.bodyS,
+      color: semanticColors.base.text,
+      margin: 0,
+    }),
+    multiValue: (base: any, state: any) => ({
+      ...base,
+      borderRadius: semanticRadius.global.radius.full,
+      border: `1px solid ${semanticColors.global.border.default}`,
+      backgroundColor: state.data.isFixed
+        ? semanticColors.global.surface.disabled
+        : semanticColors.base.background,
+      margin: '2px',
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '0 4px',
+    }),
+    multiValueLabel: (base: any) => ({
+      ...base,
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0 6px',
+      fontWeight: typographyTokens.fontWeights.regular,
+      fontSize: typographyTokens.fontSizes.captionM,
+      color: semanticColors.base.text,
+    }),
+    multiValueRemove: (base: any, state: any) => {
+      return state.data.isFixed
+        ? { ...base, display: 'none' }
+        : {
+            ...base,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: '2px',
+            padding: '0',
+            color: semanticColors.neutral[400],
+            cursor: 'pointer',
+            ':hover': {
+              backgroundColor: semanticColors.danger.surface.enabled,
+              color: semanticColors.danger.text.onSurface,
+            },
+          };
+    },
+
+    valueContainer: (base: any) => ({
+      ...base,
+      padding: '2px 8px',
+      gap: '4px',
+      flexWrap: 'wrap',
+    }),
+    input: (base: any) => ({
+      ...base,
+      margin: 0,
+      padding: 0,
+      fontSize: typographyTokens.fontSizes.bodyS,
+    }),
+    menuList: (base: any) => ({
+      ...base,
+      padding: 0,
+      '::-webkit-scrollbar': {
+        width: '6px',
+      },
+      '::-webkit-scrollbar-track': {
+        background: semanticColors.neutral[200],
+      },
+      '::-webkit-scrollbar-thumb': {
+        background: semanticColors.branding.surface.enabled,
+        borderRadius: '20px',
+      },
+      '::-webkit-scrollbar-thumb:hover': {
+        background: semanticColors.branding.surface.hover,
+      },
+    }),
+    menu: (base: any) => ({
+      ...base,
+      borderRadius: semanticRadius.global.radius.md,
+      boxShadow:
+        '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      border: `1px solid ${semanticColors.global.border.default}`,
+      overflow: 'hidden',
+    }),
+  };
+
+  const handleChange = (
+    newValue: ReactSelectMultiValue<SelectOption> | SingleValue<SelectOption>,
+    actionMeta: ActionMeta<SelectOption>
+  ) => {
+    if (setValue) {
+      setValue(newValue, actionMeta);
+    }
+  };
+
+  return (
+    <StyledBase height={'fit-content'} {...props}>
+      <Select<SelectOption, boolean, GroupBase<SelectOption>>
+        theme={(selectTheme) => ({
+          ...selectTheme,
+          colors: {
+            ...selectTheme.colors,
+            primary: semanticColors.branding.surface.enabled,
+            primary75: semanticColors.branding.surface.hover,
+            primary50: semanticColors.branding.surface.disabled,
+            primary25: semanticColors.neutral[100],
+          },
+          spacing: {
+            baseUnit: 4,
+            menuGutter: 8,
+            controlHeight: parseInt(height.replace('px', '')) || 40,
+          },
+        })}
+        isClearable={enabledClear}
+        isMulti={multiple}
+        defaultValue={defaultValue}
+        options={options}
+        placeholder={placeholder}
+        isDisabled={disabled}
+        value={value}
+        isSearchable
+        onChange={handleChange}
+        styles={styles}
+        menuPlacement={menuPlacement}
+        components={{
+          NoOptionsMessage,
+          MultiValue: CustomMultiValue,
+          Option,
+        }}
+      />
+    </StyledBase>
+  );
+};
+
+export default MultiSelect;

package/src/components/atoms/MultiSelect/MultiSelect.types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react"
+import type { MultiValue, SingleValue, ActionMeta } from "react-select"
+
+export interface SelectOption {
+  label: string
+  value: string | number
+  picture?: string
+  name?: string
+  isFixed?: boolean
+}
+
+export interface IStyledBaseProps {
+  children: ReactNode
+  label?: string
+  error?: boolean
+  errorMessage?: string
+  labelSize?: string
+  labelWeight?: string
+  icon?: ReactNode
+  sizeDisplay?: '100' | '75' | '66' | '50' | '33' | '25'
+  height?: string
+}
+
+export interface SelectProps extends Omit<IStyledBaseProps, "children"> {
+  options: SelectOption[]
+  placeholder?: string
+  height?: string
+  enabledClear?: boolean
+  multiple?: boolean
+  value?: MultiValue<SelectOption> | SingleValue<SelectOption>
+  disabled?: boolean
+  menuPlacement?: "auto" | "bottom" | "top"
+  defaultValue?: MultiValue<SelectOption> | SingleValue<SelectOption>
+  setValue?: (
+    newValue: MultiValue<SelectOption> | SingleValue<SelectOption>,
+    actionMeta: ActionMeta<SelectOption>,
+  ) => void
+}

package/src/components/atoms/MultiSelect/index.tsx

@@ -0,0 +1 @@
+export { default as MultiSelect } from './MultiSelect';

package/src/components/atoms/ResendLink/ResendLink.styles.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import {
+  semanticColors,
+  typographyTokens,
+} from "../../../styles/tokens";
+
+export const StyledText = styled.p<{
+  $size: string;
+  $weight: string;
+  $color: string;
+}>`
+  font-size: ${({ $size }) =>
+    $size === "lg"
+      ? typographyTokens.fontSizes.bodyL
+      : $size === "md"
+      ? typographyTokens.fontSizes.bodyM
+      : typographyTokens.fontSizes.bodyL};
+  font-weight: ${({ $weight }) => ($weight === "bold" ? "bold" : "normal")};
+  color: ${({ $color }) => $color || semanticColors.base.text};
+`;

package/src/components/atoms/ResendLink/ResendLink.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyledText } from "./ResendLink.styles";
+import { ResendLinkProps } from "./ResendLink.types";
+
+export const ResendLink: React.FC<ResendLinkProps> = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "black",
+}) => {
+  return (
+    <StyledText $size={size} $weight={weight} $color={color}>
+      {children}
+    </StyledText>
+  );
+};

package/src/components/atoms/ResendLink/ResendLink.types.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface ResendLinkProps{
+    children: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+    weight?: "normal" | "bold";
+    color?: string;
+}
+

package/src/components/atoms/ResendLink/index.tsx

@@ -0,0 +1 @@
+export { ResendLink } from "./ResendLink";

package/src/components/atoms/Subtitle/Subtitle.styles.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import {
+  semanticSizes,
+  typographyTokens,
+  semanticColors,
+} from "../../../styles/tokens";
+
+export const Container = styled.div`
+  width: 325px;
+  color: ${semanticColors.neutral[700]};
+  text-align: center;
+  font-family: "Mulish", sans-serif;
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  font-weight: 400;
+  line-height: 125%;
+
+  margin-bottom: ${semanticSizes.global.padding.lg};
+  @media (max-width: 768px) {
+    font-size: ${typographyTokens.fontSizes.bodyS};
+  }
+`;

package/src/components/atoms/Subtitle/Subtitle.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { Container } from "./Subtitle.styles";
+import { SubtitleProps } from "./Subtitle.types";
+
+export const Subtitle: React.FC<SubtitleProps> = ({ children }) => {
+  return <Container>{children}</Container>;
+};

package/src/components/atoms/Subtitle/Subtitle.types.ts

@@ -0,0 +1,5 @@
+import React from "react";
+
+export interface SubtitleProps {
+  children: React.ReactNode;
+}

package/src/components/atoms/Subtitle/index.tsx

@@ -0,0 +1 @@
+export { Subtitle } from "./Subtitle";

package/src/components/atoms/Tapbar/Tapbar.styles.tsx

@@ -0,0 +1,57 @@
+import styled, { css } from "styled-components"
+import { semanticColors, semanticSizes, semanticBorders, typographyTokens } from "../../../styles/tokens"
+
+export const Wrapper = styled.nav`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-bottom: ${semanticBorders.global.lg} solid ${semanticColors.global.border.medium};
+`
+
+export const Tab = styled.button<{ $active: boolean }>`
+  display: flex;
+  height: ${semanticSizes.global.spacings.lg};
+  padding: ${semanticSizes.global.padding.lg} ${semanticSizes.global.padding["3xl"]};
+  justify-content: center;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: ${typographyTokens.fontFamily.base};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  font-weight: ${typographyTokens.fontWeights.regular};
+  line-height: ${typographyTokens.lineHeights.bodyM};
+  color: ${semanticColors.global.text.onSurface.subtitle};
+  margin-bottom: calc(-1 * ${semanticBorders.global.lg});
+  border-bottom: ${semanticBorders.global.lg} solid transparent;
+  
+  & + & {
+    margin-left: ${semanticSizes.global.padding.lg};
+  }
+  
+  ${(p) =>
+    p.$active &&
+    css`
+      border-bottom-color: ${semanticColors.branding.border.enabled};
+      color: ${semanticColors.branding.text.accent.enabled};
+    `}
+    
+  &:hover:not(:disabled) {
+    color: ${semanticColors.branding.text.accent.hover};
+    ${(p) =>
+      p.$active &&
+      css`
+        border-bottom-color: ${semanticColors.branding.border.hover};
+      `}
+  }
+  
+  &:focus {
+    outline: none;
+  }
+`
+
+export const Count = styled.span`
+  font-weight: ${typographyTokens.fontWeights.medium};
+  color: inherit;
+`

package/src/components/atoms/Tapbar/Tapbar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Count, Tab, Wrapper } from "./Tapbar.styles";
+import { TapbarProps } from "./Tapbar.types";
+
+export const Tapbar: React.FC<TapbarProps> = ({
+  items,
+  activeIndex,
+  onChange,
+}) => (
+  <Wrapper>
+    {items.map((item, idx) => (
+      <Tab
+        key={idx}
+        $active={Boolean(idx === activeIndex)}
+        onClick={() => onChange(idx)}
+        data-testid={item.testId}
+        id={item.testId}
+      >
+        <span>{item.title}</span>
+        {typeof item.quantity === "number" && <Count>({item.quantity})</Count>}
+      </Tab>
+    ))}
+  </Wrapper>
+);

package/src/components/atoms/Tapbar/Tapbar.types.ts

@@ -0,0 +1,11 @@
+export interface TabItem {
+  title: string;
+  quantity?: number;
+  testId?: string;
+}
+
+export interface TapbarProps {
+  items: TabItem[];
+  activeIndex: number;
+  onChange: (newIndex: number) => void;
+}

package/src/components/atoms/Tapbar/index.tsx

@@ -0,0 +1,2 @@
+export { Tapbar } from "./Tapbar";
+export type { TapbarProps, TabItem } from "./Tapbar.types";