w-design-system 0.0.28 → 0.0.30

package/src/components/DateRangePicker/index.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, useEffect, useMemo, useRef, useState } from 'react'
 import { calendarSVG, chevronLeftSVG, chevronRightSVG } from '../../assets/icon'
 import { IconWrapper } from '../IconWrapper'
-import { Select, SelectRef } from '../Select'
+import { Select, SelectProps, SelectRef } from '../Select'
 import { theme } from '../Themes'
 import {
   CalendarDay,
@@ -12,15 +12,19 @@ import {
   CalendarWeekDayLabel,
 } from './styles'
 
-export interface DateRangePickerProps extends HTMLAttributes<HTMLDivElement> {
+type GetElementType<T> = T extends (infer U)[] ? U : never
+
+export interface DateRangePickerProps<
+  T extends GetElementType<SelectProps['options']> = GetElementType<SelectProps['options']>,
+> extends HTMLAttributes<HTMLDivElement> {
   isRange?: boolean
   placeholder?: string
   label?: string
-  options?: { text: string; id: number }[]
-  selectedOption?: number | null
+  options?: T[]
+  selectedOption?: T | null
   readonly?: boolean
   disabled?: boolean
-  onSelectedOptionChange?: (option: number | null) => void
+  onSelectedOptionChange?: (option: T | null) => void
   startCustomDate: Date | null
   endCustomDate: Date | null
   onSelectedCustomRange: (start: Date | null, end: Date | null) => void
@@ -59,7 +63,7 @@ const monthNames = [
 const weekDays = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SAB']
 
 type DayType = EmptyDay | Day
-export const DateRangePicker: React.FC<DateRangePickerProps> = ({
+export const DateRangePicker = <T extends GetElementType<SelectProps['options']>>({
   label,
   options,
   selectedOption,
@@ -70,7 +74,7 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({
   endCustomDate,
   isRange,
   ...props
-}) => {
+}: DateRangePickerProps<T>) => {
   const [currentYear, setCurrentYear] = useState(0)
   const [currentMonth, setCurrentMonth] = useState(0)
   const [currentMouseHoverDate, setCurrentMouseHoverDate] = useState<Date | null>(null)
@@ -90,7 +94,7 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({
     setCurrentMonth(newDate.getMonth())
   }
 
-  const onSelectedOptionChangeHandler = (option: number | null) => {
+  const onSelectedOptionChangeHandler = (option: T | null) => {
     if (onSelectedOptionChange) {
       onSelectedOptionChange(option)
       if (onSelectedCustomRange) onSelectedCustomRange(null, null)
@@ -171,17 +175,22 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({
   }, [selectedOption, firstDate, secondDate])
 
   placeholder = placeholder ?? 'Selecione um período'
-  const { customOptionId, optionComputed } = useMemo(() => {
+  const { customOption, optionComputed } = useMemo(() => {
     if (options && options.length > 0) {
       const customOptionId = Math.max(...options.map(option => option.id ?? 0)) + 1
-      const optionComputed = [...options, { text: 'Período Personalizado', id: customOptionId }]
-      return { customOptionId, optionComputed }
+      const customOption = {
+        text: 'Período Personalizado',
+        id: customOptionId,
+      } as T
+      const optionComputed = [...options, customOption]
+      return { customOption, optionComputed }
     }
-    return { customOptionId: 0, optionComputed: [] }
-  }, [selectedOption, options])
+    return { customOption: null, optionComputed: [] }
+  }, [options])
 
   return (
-    <Select
+    <Select<T>
+      dropDownWidth="284px"
       ref={selectRef}
       placeholder={placeholder}
       label={label}
@@ -190,7 +199,7 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({
         <IconWrapper className="icon" src={calendarSVG} width="20px" height="20px" color={theme.colors.shade30} />
       }
       options={optionComputed}
-      selectedOption={selectedOption ?? (firstDate ? customOptionId : null)}
+      selectedOption={selectedOption ?? (firstDate ? customOption : null)}
       onOptionChange={onSelectedOptionChangeHandler}
       {...props}
     >

package/src/components/DateRangePicker/stories.tsx

@@ -23,7 +23,7 @@ export default meta
 type Story = StoryObj<typeof DateRangePicker>
 
 const ComponentWrapper = ({ options, ...args }: Partial<DateRangePickerProps>) => {
-  const [selectedOption, setSelectOption] = React.useState<number | null>(null)
+  const [selectedOption, setSelectOption] = React.useState<DateRangePickerProps['selectedOption']>(null)
   const [startDate, setStartDate] = React.useState<Date | null>(null)
   const [endDate, setEndDate] = React.useState<Date | null>(null)
 

package/src/components/DateRangePicker/styles.ts

@@ -59,7 +59,6 @@ export const CalendarDay = styled.div<CalendarDayProps>`
   cursor: pointer;
   width: 36px;
   height: 36px;
-  box-sizing: border-box;
   color: ${({ isFirstSelected, isLastSelected }) =>
     isFirstSelected || isLastSelected ? theme.colors.white : theme.colors.shade50};
 

package/src/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode, useEffect, useId, useRef } from 'react'
+import React, { HTMLAttributes, ReactNode, useCallback, useEffect, useId, useRef } from 'react'
 import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, StyledLabel } from './styles'
 
 export interface InputProps extends HTMLAttributes<HTMLDivElement> {
@@ -53,7 +53,7 @@ export const Input: React.FC<InputProps> = ({
   const labelRef = useRef<HTMLLabelElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const updatePositions = () => {
+  const updatePositions = useCallback(() => {
     if (contentRef.current) {
       setContentPosition({
         x: 0,
@@ -70,7 +70,7 @@ export const Input: React.FC<InputProps> = ({
         height: labelRef.current.offsetHeight,
       })
     }
-  }
+  }, [])
 
   const onClickHandler = () => {
     inputRef.current?.focus()
@@ -79,9 +79,26 @@ export const Input: React.FC<InputProps> = ({
   useEffect(() => {
     const handler = () => updatePositions()
 
-    window.addEventListener('resize', handler)
+    let resizeObserver: ResizeObserver | null = null
+    if (ResizeObserver) {
+      resizeObserver = new ResizeObserver(handler)
+      if (contentRef.current) {
+        resizeObserver.observe(contentRef.current)
+      }
+      if (labelRef.current) {
+        resizeObserver.observe(labelRef.current)
+      }
+    } else {
+      window.addEventListener('resize', handler)
+    }
 
-    return () => window.removeEventListener('resize', handler)
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      } else {
+        window.removeEventListener('resize', handler)
+      }
+    }
   }, [])
 
   useEffect(() => {

package/src/components/Input/styles.ts

@@ -8,38 +8,46 @@ export const InputWrapper = styled.div`
 
 export const StyledInput = styled.input`
   width: 100%;
-  font-family: ${theme.fonts.join(', ')};
-  outline: none;
-  font-size: ${theme.paragraph.medium};
+
+  background-color: transparent;
   border: none;
+  outline: none;
+
   color: ${theme.colors.shade50};
-  z-index: 1;
-  background-color: transparent;
+
+  font-family: ${theme.fonts.join(', ')};
+  font-size: ${theme.paragraph.medium};
+
   &:active,
   &:focus {
     outline: none;
     border: none;
   }
+
   &::placeholder {
     color: ${theme.colors.shade30};
     font-size: ${theme.paragraph.medium};
     opacity: 1;
   }
+
   &:disabled {
-    background-color: transparent;;
+    background-color: transparent;
     cursor: not-allowed;
   }
 `
 
 export const StyledLabel = styled.label`
   position: absolute;
+  color: ${theme.colors.shade50};
+
+  box-sizing: content-box;
   left: 15px;
   top: -8px;
   padding: 0 1px;
-  font-weight: 600;
-  font-size: ${theme.paragraph.small};
-  color: ${theme.colors.shade50};
+
   font-family: 'Nunito Sans', sans-serif;
+  font-size: ${theme.paragraph.small};
+  font-weight: 600;
   text-wrap: nowrap;
 `
 
@@ -49,16 +57,21 @@ export interface StyledInputContentProps {
 
 export const StyledInputContent = styled.div<StyledInputContentProps>`
   position: relative;
-  padding: 18px 16px 14px 16px;
+
   display: flex;
-  gap: 8px;
-  height: 22px;
   align-items: center;
   justify-content: space-between;
+
+  box-sizing: content-box;
+  padding: 18px 16px 14px 16px;
+  height: 22px;
+  gap: 8px;
   border-radius: 4px;
-  cursor: ${({ disabled }: StyledInputContentProps) => (disabled ? 'not-allowed' : 'pointer')};
+
   background-color: ${({ disabled }: StyledInputContentProps) =>
     disabled ? theme.colors.shade10 : theme.colors.white};
+
+  cursor: ${({ disabled }: StyledInputContentProps) => (disabled ? 'not-allowed' : 'pointer')};
 `
 
 export interface StyledInputBorderProps {
@@ -73,9 +86,12 @@ export interface StyledInputBorderProps {
  */
 export const StyledInputBorder = styled.div<StyledInputBorderProps>`
   position: absolute;
+
+  box-sizing: content-box;
   inset: 0px;
   border-radius: 4px;
   border: 1px solid ${theme.colors.shade20};
+
   clip-rule: evenodd;
   clip-path: path(
     '${({ label, content }) =>

package/src/components/Select/index.tsx

@@ -1,5 +1,4 @@
 import React, {
-  FC,
   HTMLAttributes,
   PropsWithChildren,
   ReactNode,
@@ -7,33 +6,49 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from 'react'
 import { chevronDownSVG } from '../../assets/icon'
 import { IconWrapper } from '../IconWrapper'
 import { Input } from '../Input'
 import { theme } from '../Themes'
-import { OptionButton, Dropdown, DropdownWrapper, SelectWrapper } from './styles'
+import { Dropdown, DropdownWrapper, OptionButton, OptionText, SelectWrapper } from './styles'
 
-export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+export interface SelectProps<
+  T extends { text: string; id: number; icon?: ReactNode } = { text: string; id: number; icon?: ReactNode },
+> extends HTMLAttributes<HTMLDivElement> {
   disabled?: boolean
   label?: string
   leftIcon?: ReactNode
-  onOptionChange?: (option: number | null) => void
-  options?: { text: string; id: number }[]
+  onOptionChange?: (option: T | null) => void
+  options?: T[]
   placeholder?: string
   rightIcon?: ReactNode
-  selectedOption?: number | null
+  selectedOption?: T | null
   value?: string
+  dropDownTop?: boolean
+  dropDownWidth?: string
 }
 
 export interface SelectRef {
   setOpen(open: boolean): void
 }
 
-const SelectFowardRef: React.ForwardRefRenderFunction<SelectRef, SelectProps> = (
-  { children, label, leftIcon, onOptionChange, options, placeholder, rightIcon, selectedOption, value, ...props },
-  ref,
+const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode }>(
+  {
+    children,
+    label,
+    leftIcon,
+    onOptionChange,
+    options,
+    placeholder,
+    rightIcon,
+    selectedOption,
+    value,
+    dropDownWidth,
+    ...props
+  }: PropsWithChildren<SelectProps<T>>,
+  ref: React.ForwardedRef<SelectRef>,
 ) => {
   const [open, setOpen] = useState(false)
   const wrapperRef = useRef<HTMLDivElement>(null)
@@ -41,7 +56,7 @@ const SelectFowardRef: React.ForwardRefRenderFunction<SelectRef, SelectProps> =
   useImperativeHandle(ref, () => ({
     setOpen,
   }))
-  
+
   useEffect(() => {
     if (!open) return
     const handler = (event: MouseEvent) => {
@@ -61,7 +76,7 @@ const SelectFowardRef: React.ForwardRefRenderFunction<SelectRef, SelectProps> =
     }
   }, [open])
 
-  const onOptionClick = (option: number) => {
+  const onOptionClick = (option: T) => {
     onOptionChange && onOptionChange(option)
     setOpen(false)
   }
@@ -69,8 +84,7 @@ const SelectFowardRef: React.ForwardRefRenderFunction<SelectRef, SelectProps> =
   const valueComputed = useMemo(() => {
     if (value) return value
     if (selectedOption) {
-      const option = options?.find(option => option.id === selectedOption)
-      return option?.text
+      return selectedOption.text
     }
     return ''
   }, [value, selectedOption, options])
@@ -98,16 +112,17 @@ const SelectFowardRef: React.ForwardRefRenderFunction<SelectRef, SelectProps> =
       />
       {open && (
         <DropdownWrapper>
-          <Dropdown>
+          <Dropdown dropDownTop={props.dropDownTop} dropDownWidth={dropDownWidth}>
             {(options?.length ?? 0) > 0 && (
               <div>
                 {options?.map(option => (
                   <OptionButton
-                    selected={option.id === selectedOption}
+                    selected={selectedOption?.id === option.id}
                     key={option.id}
-                    onClick={() => onOptionClick(option.id)}
+                    onClick={() => onOptionClick(option)}
                   >
-                    {option.text}
+                    {option.icon}
+                    <OptionText>{option.text}</OptionText>
                   </OptionButton>
                 ))}
               </div>
@@ -120,4 +135,6 @@ const SelectFowardRef: React.ForwardRefRenderFunction<SelectRef, SelectProps> =
   )
 }
 
-export const Select = React.forwardRef(SelectFowardRef)
+export const Select = React.forwardRef(SelectFowardRef) as <T extends { text: string; id: number; icon?: ReactNode }>(
+  props: PropsWithChildren<SelectProps<T>> & { ref?: React.ForwardedRef<SelectRef> },
+) => React.ReactElement

package/src/components/Select/stories.tsx

@@ -12,6 +12,7 @@ const meta: Meta<typeof Select> = {
     disabled: { control: 'boolean' },
     selectedOption: { control: 'number' },
     onOptionChange: { action: 'selectedOptionChange' },
+    
   },
 } satisfies Meta<typeof Select>
 
@@ -19,7 +20,7 @@ export default meta
 type Story = StoryObj<typeof Select>
 
 const ComponentWrapper = ({ options, ...args }: SelectProps) => {
-  const [selectedOption, setSelectOption] = React.useState<number | null>(null)
+  const [selectedOption, setSelectOption] = React.useState<SelectProps['selectedOption']>(null)
 
   return (
     <Select
@@ -47,5 +48,5 @@ const ComponentWrapper = ({ options, ...args }: SelectProps) => {
 }
 
 export const Default: Story = {
-  render: args => <ComponentWrapper label="Label" placeholder="Placeholder" />,
+  render: () => <ComponentWrapper label="Label" placeholder="Placeholder" />,
 }

package/src/components/Select/styles.ts

@@ -2,6 +2,8 @@ import styled from 'styled-components'
 import { theme } from '../Themes'
 
 export const SelectWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   position: relative;
   .icon {
     transition: transform 0.3s;
@@ -10,40 +12,54 @@ export const SelectWrapper = styled.div`
     transform: rotate(180deg) translateY(5px);
   }
 `
+export interface DropdownProps {
+  dropDownTop?: boolean
+  dropDownWidth?: string
+}
 
-export const Dropdown = styled.div`
+export const Dropdown = styled.div<DropdownProps>`
   position: absolute;
-  width: 252px;
+
+  z-index: ${theme.zIndex.z9};
+
+  background-color: ${theme.colors.white};
+  width: ${({ dropDownWidth }) => (dropDownWidth ? dropDownWidth : '100%')};
+  ${({ dropDownTop }) => (dropDownTop ? 'margin-botton: 4px;' : 'margin-top: 4px;')};
   padding: 16px;
-  z-index: 1;
+
   border-radius: 4px;
   border: 1px solid ${theme.colors.shade20};
-  margin-top: 7px;
-  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
 `
 
 export const DropdownWrapper = styled.div`
   position: relative;
+  z-index: ${theme.zIndex.z9};
 `
 
-
 export interface OptionButtonProps {
   selected: boolean
 }
 
 export const OptionButton = styled.button<OptionButtonProps>`
+  display: flex;
+
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  color: ${({ selected }) => (selected ? theme.colors.cyan30 : theme.colors.shade40)};
   background-color: transparent;
   border: none;
-  font-size: ${theme.paragraph.medium};
-  font-family: 'Nunito Sans', sans-serif;
-  color: ${({ selected }) => (selected ? theme.colors.cyan30 : theme.colors.shade40)};
+
   cursor: pointer;
-  padding: 0;
-  width: 100%;
+
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: ${theme.paragraph.medium};
   text-align: left;
+
   height: 46px;
-  display: flex;
-  align-items: center;
+  width: 100%;
+  padding: 0;
 
   &:not(:last-child) {
     border-bottom: 1px solid ${theme.colors.shade10};
@@ -53,3 +69,7 @@ export const OptionButton = styled.button<OptionButtonProps>`
     color: ${theme.colors.cyan30};
   }
 `
+
+export const OptionText = styled.div`
+  flex-grow: 1;
+`

package/src/components/Sidebar/SidebarGroup/index.tsx

@@ -0,0 +1,90 @@
+import { MouseEvent, PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import { SidebarGroupContainer, SidebarGroupHeaderContainer } from './styles'
+import React from 'react'
+import { IconWrapper } from '../../IconWrapper'
+import { Paragraph } from '../../Paragraph'
+import { theme } from '../../Themes'
+import { chevronDownSVG, lockSVG } from '../../../assets/icon'
+
+export interface SidebarGroupProps {
+  title: string
+  icon: string
+  sidebarOpen: boolean
+  disabled?: boolean
+  isCurrentGroup?: boolean
+  onClick: () => void
+}
+
+const SidebarGroup = ({
+  title,
+  icon,
+  children,
+  sidebarOpen,
+  disabled,
+  onClick,
+  isCurrentGroup,
+}: PropsWithChildren<SidebarGroupProps>) => {
+  const [groupOpen, setGroupOpen] = useState(false)
+
+  useEffect(() => {
+    if (groupOpen && disabled) setGroupOpen(false)
+  }, [groupOpen, disabled])
+
+  const onClickHandler = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      if (disabled) return
+
+      if (!sidebarOpen) {
+        onClick()
+      } else {
+        event.stopPropagation()
+        setGroupOpen(!groupOpen)
+      }
+    },
+    [disabled, sidebarOpen, groupOpen, onClick],
+  )
+
+  let color = '#fff'
+
+  if (disabled) {
+    color = 'rgba(255,255,255,0.3)'
+  }
+
+  if (isCurrentGroup) {
+    color = '#217efd'
+  }
+
+  return (
+    <SidebarGroupContainer open={sidebarOpen} groupOpen={groupOpen}>
+      <SidebarGroupHeaderContainer
+        disabled={disabled}
+        sidebarOpen={sidebarOpen}
+        groupOpen={groupOpen}
+        onClick={onClickHandler}
+      >
+        <IconWrapper src={icon} color={color} />
+        {sidebarOpen && (
+          <span className="title">
+            <Paragraph size="medium" heavyBod={isCurrentGroup} color={disabled ? theme.colors.shade40 : 'white'}>
+              {title}
+            </Paragraph>
+          </span>
+        )}
+        {sidebarOpen &&
+          (!disabled ? (
+            <IconWrapper
+              className={`icon ${groupOpen ? 'icon-rotate' : ''}`}
+              src={chevronDownSVG}
+              width="16px"
+              color={theme.colors.shade30}
+            />
+          ) : (
+            <IconWrapper src={lockSVG} width="14px" color="white" />
+          ))}
+      </SidebarGroupHeaderContainer>
+      {children}
+    </SidebarGroupContainer>
+  )
+}
+
+export default SidebarGroup

package/src/components/Sidebar/SidebarGroup/styles.ts

@@ -0,0 +1,83 @@
+import styled from 'styled-components'
+import { theme } from '../../Themes'
+
+interface SidebarGroupContainerProps {
+  open: boolean
+  groupOpen: boolean
+}
+
+export const SidebarGroupContainer = styled.div<SidebarGroupContainerProps>`
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+
+  height: ${({ groupOpen, open }) => (groupOpen && open ? 'auto' : '40px')};
+  background-color: ${({ groupOpen, open }) => (groupOpen && open ? 'rgba(255, 255, 255, 0.1)' : 'inherit')};
+  overflow: hidden;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: #192d53;
+  }
+
+  .wrapperTitle {
+    cursor: pointer;
+    min-height: ${({ groupOpen, open }) => (groupOpen && open ? '40px' : '54px')};
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 30px;
+    justify-content: left;
+    svg {
+      width: 20px;
+    }
+  }
+
+  &.locked {
+    pointer-events: none;
+  }
+`
+
+interface SidebarGroupContainerHeaderProps {
+  sidebarOpen: boolean
+  groupOpen: boolean
+  disabled?: boolean
+}
+
+export const SidebarGroupHeaderContainer = styled.div<SidebarGroupContainerHeaderProps>`
+  display: flex;
+  align-items: center;
+  min-height: ${({ groupOpen, sidebarOpen }) => (groupOpen && sidebarOpen ? '40px' : '40px')};
+  ${({ groupOpen, sidebarOpen }) => groupOpen && sidebarOpen && 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)'};
+  justify-content: ${sidebarOpen => (sidebarOpen ? 'space-between' : 'center')};
+  text-wrap: nowrap;
+
+  padding: 8px 12px;
+  cursor: pointer;
+  height: 100%;
+  gap: 24px;
+
+  color: ${({ disabled }) => (disabled ? 'rgba(255, 255, 255, 0.3)' : '#fff')};
+
+  .title {
+    width: 100%;
+  }
+
+  svg {
+    width: 20px;
+  }
+`
+
+export const LockedModal = styled.div`
+  width: 400px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  .item-locked {
+    color: ${theme.colors.honey40};
+  }
+`