w-design-system 0.0.26 → 0.0.28

package/src/components/{RangeDateInput → DateRangePicker}/index.tsx

@@ -1,26 +1,22 @@
-import React, { HTMLAttributes, ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react'
+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 { theme } from '../Themes'
 import {
   CalendarDay,
+  CalendarDaySelectedBackground,
+  CalendarDayValue,
   CalendarGrid,
   CalendarHeader,
   CalendarWeekDayLabel,
-  Dropdown,
-  DropdownWrapper,
-  DefaultOptionButton,
-  InputDateWrapper,
-  CalendarDaySelectedBackground,
-  CalendarDayValue,
 } from './styles'
-import { calendarSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG } from '../../assets/icon'
-import { IconWrapper } from '../IconWrapper'
-import { Input } from '../Input'
-import { theme } from '../Themes'
 
-export interface RangeDateInputProps extends HTMLAttributes<HTMLDivElement> {
+export interface DateRangePickerProps extends HTMLAttributes<HTMLDivElement> {
   isRange?: boolean
   placeholder?: string
-  label: string
-  defaultOptions?: { text: string; id: number }[]
+  label?: string
+  options?: { text: string; id: number }[]
   selectedOption?: number | null
   readonly?: boolean
   disabled?: boolean
@@ -30,13 +26,6 @@ export interface RangeDateInputProps extends HTMLAttributes<HTMLDivElement> {
   onSelectedCustomRange: (start: Date | null, end: Date | null) => void
 }
 
-export interface Position {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
 interface EmptyDay {
   type: 'empty'
   key: string
@@ -48,6 +37,8 @@ interface Day {
   today: boolean
   selected: boolean
   date: Date
+  isFirstSelected: boolean
+  isLastSelected: boolean
 }
 
 const monthNames = [
@@ -68,9 +59,9 @@ const monthNames = [
 const weekDays = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SAB']
 
 type DayType = EmptyDay | Day
-export const RangeDateInput: React.FC<RangeDateInputProps> = ({
+export const DateRangePicker: React.FC<DateRangePickerProps> = ({
   label,
-  defaultOptions,
+  options,
   selectedOption,
   onSelectedOptionChange,
   placeholder,
@@ -83,8 +74,7 @@ export const RangeDateInput: React.FC<RangeDateInputProps> = ({
   const [currentYear, setCurrentYear] = useState(0)
   const [currentMonth, setCurrentMonth] = useState(0)
   const [currentMouseHoverDate, setCurrentMouseHoverDate] = useState<Date | null>(null)
-  const [open, setOpen] = useState(false)
-  const wrapperRef = useRef<HTMLDivElement>(null)
+  const selectRef = useRef<SelectRef>(null)
 
   useEffect(() => {
     const date = new Date()
@@ -104,7 +94,7 @@ export const RangeDateInput: React.FC<RangeDateInputProps> = ({
     if (onSelectedOptionChange) {
       onSelectedOptionChange(option)
       if (onSelectedCustomRange) onSelectedCustomRange(null, null)
-      setOpen(false)
+      selectRef.current?.setOpen(false)
     }
   }
 
@@ -113,7 +103,7 @@ export const RangeDateInput: React.FC<RangeDateInputProps> = ({
     if (!startCustomDate) {
       onSelectedCustomRange && onSelectedCustomRange(date, null)
       currentMouseHoverDate && setCurrentMouseHoverDate(date)
-      if (isRange === false) setOpen(false)
+      if (isRange === false) selectRef.current?.setOpen(false)
     } else if (!endCustomDate) {
       let firstDate = startCustomDate
       let secondDate = date
@@ -123,9 +113,9 @@ export const RangeDateInput: React.FC<RangeDateInputProps> = ({
         secondDate = temp
       }
       onSelectedCustomRange && onSelectedCustomRange(firstDate, secondDate)
-      setOpen(false)
+      selectRef.current?.setOpen(false)
     } else {
-      if (isRange === false) setOpen(false)
+      if (isRange === false) selectRef.current?.setOpen(false)
       onSelectedCustomRange && onSelectedCustomRange(date, null)
       setCurrentMouseHoverDate(date)
     }
@@ -161,12 +151,14 @@ export const RangeDateInput: React.FC<RangeDateInputProps> = ({
       today: day.toDateString() === todayString,
       selected: isSelected,
       date: new Date(day),
+      isFirstSelected: (firstDate && firstDate.toDateString() === day.toDateString()) ?? false,
+      isLastSelected: (secondDate && secondDate.toDateString() === day.toDateString()) ?? false,
     })
     day.setDate(day.getDate() + 1)
   }
 
   const value = useMemo(() => {
-    if (selectedOption !== null) return defaultOptions?.find(option => option.id === selectedOption)?.text ?? ''
+    if (selectedOption !== null) return ''
     if (!firstDate && !secondDate) return ''
     if (firstDate && !secondDate) return firstDate.toLocaleDateString()
 
@@ -178,95 +170,65 @@ export const RangeDateInput: React.FC<RangeDateInputProps> = ({
     return ''
   }, [selectedOption, firstDate, secondDate])
 
-  useEffect(() => {
-    if (!open) return
-    const handler = (event: MouseEvent) => {
-      let element: HTMLElement | null = event.target as HTMLElement
-      console.log(element)
-      while (element && element !== document.body.parentElement) {
-        if (element === wrapperRef.current) break
-        element = element.parentElement
-      }
-      if (element === document.body.parentElement) {
-        setOpen(false)
-      }
-    }
-    document.addEventListener('click', handler)
-
-    return () => {
-      document.removeEventListener('click', handler)
+  placeholder = placeholder ?? 'Selecione um período'
+  const { customOptionId, 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 }
     }
-  }, [open])
+    return { customOptionId: 0, optionComputed: [] }
+  }, [selectedOption, options])
 
-  placeholder = placeholder ?? 'Selecione um período'
   return (
-    <InputDateWrapper {...props} ref={wrapperRef}>
-      <Input
-        iconLeft={
-          <IconWrapper className="icon" src={calendarSVG} width="20px" height="20px" color={theme.colors.shade30} />
-        }
-        iconRight={
-          <IconWrapper
-            className={`icon ${open ? 'icon-rotate' : ''}`}
-            src={chevronDownSVG}
-            width="16px"
-            color={theme.colors.shade30}
-          />
-        }
-        placeholder={placeholder}
-        label={label}
-        value={value}
-        readonly
-        onClick={() => setOpen(!open)}
-      />
-      {open && (
-        <DropdownWrapper>
-          <Dropdown>
-            {(defaultOptions?.length ?? 0) > 0 && (
-              <div>
-                {defaultOptions?.map(option => (
-                  <DefaultOptionButton
-                    selected={option.id === selectedOption}
-                    key={option.id}
-                    onClick={() => onSelectedOptionChangeHandler(option.id)}
-                  >
-                    {option.text}
-                  </DefaultOptionButton>
-                ))}
-                <DefaultOptionButton selected={!!firstDate}>Período Personalizado</DefaultOptionButton>
-              </div>
-            )}
-            <CalendarHeader>
-              <IconWrapper className="icon" src={chevronLeftSVG} width="14px" onClick={() => changeMonth(-1)} />
-              {monthNames[currentMonth]} {currentYear}
-              <IconWrapper className="icon" src={chevronRightSVG} width="14px" onClick={() => changeMonth(1)} />
-            </CalendarHeader>
-
-            <CalendarGrid>
-              {weekDays.map(weekDay => (
-                <CalendarWeekDayLabel key={weekDay}>{weekDay}</CalendarWeekDayLabel>
-              ))}
-              {days.map(day => {
-                if (day.type === 'empty') {
-                  return <div key={day.key}></div>
-                }
-                return (
-                  <CalendarDay
-                    key={day.value}
-                    today={day.today}
-                    onClick={() => onDayClick(day.date)}
-                    onMouseEnter={() => onMouseEnter(day.date)}
-                    onMouseLeave={() => onMouseLeave(day.date)}
-                  >
-                    <CalendarDaySelectedBackground selected={day.selected} today={day.today} />
-                    <CalendarDayValue>{day.value}</CalendarDayValue>
-                  </CalendarDay>
-                )
-              })}
-            </CalendarGrid>
-          </Dropdown>
-        </DropdownWrapper>
-      )}
-    </InputDateWrapper>
+    <Select
+      ref={selectRef}
+      placeholder={placeholder}
+      label={label}
+      value={value}
+      leftIcon={
+        <IconWrapper className="icon" src={calendarSVG} width="20px" height="20px" color={theme.colors.shade30} />
+      }
+      options={optionComputed}
+      selectedOption={selectedOption ?? (firstDate ? customOptionId : null)}
+      onOptionChange={onSelectedOptionChangeHandler}
+      {...props}
+    >
+      <CalendarHeader>
+        <IconWrapper className="icon" src={chevronLeftSVG} width="14px" onClick={() => changeMonth(-1)} />
+        {monthNames[currentMonth]} {currentYear}
+        <IconWrapper className="icon" src={chevronRightSVG} width="14px" onClick={() => changeMonth(1)} />
+      </CalendarHeader>
+
+      <CalendarGrid>
+        {weekDays.map(weekDay => (
+          <CalendarWeekDayLabel key={weekDay}>{weekDay}</CalendarWeekDayLabel>
+        ))}
+        {days.map(day => {
+          if (day.type === 'empty') {
+            return <div key={day.key}></div>
+          }
+          return (
+            <CalendarDay
+              isFirstSelected={day.isFirstSelected}
+              isLastSelected={day.isLastSelected}
+              key={day.value}
+              today={day.today}
+              onClick={() => onDayClick(day.date)}
+              onMouseEnter={() => onMouseEnter(day.date)}
+              onMouseLeave={() => onMouseLeave(day.date)}
+            >
+              <CalendarDaySelectedBackground
+                isFirstSelected={day.isFirstSelected}
+                isLastSelected={day.isLastSelected}
+                selected={day.selected}
+                today={day.today}
+              />
+              <CalendarDayValue>{day.value}</CalendarDayValue>
+            </CalendarDay>
+          )
+        })}
+      </CalendarGrid>
+    </Select>
   )
 }

package/src/components/{RangeDateInput → DateRangePicker}/stories.tsx

@@ -1,11 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { RangeDateInput } from './index'
-import { VARIANTS_TYPES } from '../../utils/constanst'
 import React from 'react'
+import { DateRangePicker, DateRangePickerProps } from './index'
 
-const meta: Meta<typeof RangeDateInput> = {
-  title: 'Components/RangeDateInput',
-  component: RangeDateInput,
+const meta: Meta<typeof DateRangePicker> = {
+  title: 'Components/DateRangePicker',
+  component: DateRangePicker,
   tags: ['autodocs'],
   argTypes: {
     placeholder: { control: 'text' },
@@ -18,18 +17,19 @@ const meta: Meta<typeof RangeDateInput> = {
     onSelectedOptionChange: { action: 'selectedOptionChange' },
     onSelectedCustomRange: { action: 'selectedCustomRange' },
   },
-} satisfies Meta<typeof RangeDateInput>
+} satisfies Meta<typeof DateRangePicker>
 
 export default meta
-type Story = StoryObj<typeof RangeDateInput>
+type Story = StoryObj<typeof DateRangePicker>
 
-const ComponentWrapper = ({ defaultOptions, ...args }: any) => {
+const ComponentWrapper = ({ options, ...args }: Partial<DateRangePickerProps>) => {
   const [selectedOption, setSelectOption] = React.useState<number | null>(null)
   const [startDate, setStartDate] = React.useState<Date | null>(null)
   const [endDate, setEndDate] = React.useState<Date | null>(null)
 
   return (
-    <RangeDateInput
+    <DateRangePicker
+      {...args}
       selectedOption={selectedOption}
       startCustomDate={startDate}
       endCustomDate={endDate}
@@ -38,8 +38,8 @@ const ComponentWrapper = ({ defaultOptions, ...args }: any) => {
         setEndDate(end)
       }}
       onSelectedOptionChange={option => setSelectOption(option)}
-      defaultOptions={
-        defaultOptions ?? [
+      options={
+        options ?? [
           {
             text: 'Últimos 30 dias',
             id: 30,
@@ -54,7 +54,6 @@ const ComponentWrapper = ({ defaultOptions, ...args }: any) => {
           },
         ]
       }
-      {...args}
     />
   )
 }
@@ -64,5 +63,5 @@ export const SelecionarIntervaloDeDatas: Story = {
 }
 
 export const SelecionarIntervaloDeDatasSimples: Story = {
-  render: args => <ComponentWrapper defaultOptions={[]} />,
+  render: args => <ComponentWrapper options={[]} />,
 }

package/src/components/{DateInput → DateRangePicker}/styles.ts

@@ -1,31 +1,6 @@
 import styled from 'styled-components'
 import { theme } from '../Themes'
 
-export const InputDateWrapper = styled.div`
-  position: relative;
-  .icon {
-    transition: transform 0.3s;
-  }
-  .icon-rotate {
-    transform: rotate(180deg) translateY(5px);
-  }
-`
-
-export const Dropdown = styled.div`
-  position: absolute;
-  width: 252px;
-  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);
-`
-
-export const DropdownWrapper = styled.div`
-  position: relative;
-`
-
 export const CalendarGrid = styled.div`
   display: grid;
   font-family: 'Nunito Sans', sans-serif;
@@ -47,33 +22,6 @@ export const CalendarWeekDayLabel = styled.div`
   margin-bottom: 4px;
 `
 
-export interface DefaultOptionButtonProps {
-  selected: boolean
-}
-
-export const DefaultOptionButton = styled.button<DefaultOptionButtonProps>`
-  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%;
-  text-align: left;
-  height: 46px;
-  display: flex;
-  align-items: center;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${theme.colors.shade10};
-  }
-
-  &:hover {
-    color: ${theme.colors.cyan30};
-  }
-`
-
 export const CalendarHeader = styled.div`
   display: flex;
   justify-content: space-between;
@@ -102,31 +50,68 @@ export const CalendarHeader = styled.div`
 `
 export interface CalendarDayProps {
   today: boolean
+  isFirstSelected: boolean
+  isLastSelected: boolean
 }
 
 export const CalendarDay = styled.div<CalendarDayProps>`
   position: relative;
   cursor: pointer;
-  color: ${({ today }) => (today ? theme.colors.white : theme.colors.shade50)};
   width: 36px;
   height: 36px;
+  box-sizing: border-box;
+  color: ${({ isFirstSelected, isLastSelected }) =>
+    isFirstSelected || isLastSelected ? theme.colors.white : theme.colors.shade50};
+
+  &:before {
+    position: absolute;
+    content: '';
+    inset: 0;
+    border-radius: 50%;
+    pointer-events: none;
+
+    ${({ today, isFirstSelected, isLastSelected }) =>
+      today && !(isFirstSelected || isLastSelected) ? `border: 1px solid ${theme.colors.cyan40}` : ''};
+  }
 `
 
 export interface CalendarDaySelectedBackgroundProps {
   today: boolean
+  isFirstSelected: boolean
+  isLastSelected: boolean
   selected: boolean
 }
 export const CalendarDaySelectedBackground = styled.div<CalendarDaySelectedBackgroundProps>`
   position: absolute;
-  background-color: ${({ selected }) => selected && 'rgba(33, 126, 253, 0.16)'};
+  background-color: ${({ selected }) => selected && theme.colors.cyan30opacity16};
   width: 100%;
   height: 100%;
   inset: 0;
+
+  border-radius: ${({ isFirstSelected, isLastSelected }) => {
+    if (isFirstSelected && isLastSelected) return '50%'
+    if (isFirstSelected) return '50% 0 0 50%'
+    if (isLastSelected) return '0 50% 50% 0'
+    return '0'
+  }};
+
+  &:hover {
+    border-radius: ${({ isFirstSelected, isLastSelected, selected }) => {
+      if (isFirstSelected && isLastSelected) return '50%'
+      if (isFirstSelected) return '50% 0 0 50%'
+      if (isLastSelected) return '0 50% 50% 0'
+      if (selected) return '0'
+      return '50%'
+    }};
+    background-color: ${theme.colors.cyan30opacity16};
+  }
+
   &::before {
     content: '';
     border-radius: 50%;
+    background-color: ${({ isFirstSelected, isLastSelected }) =>
+      isFirstSelected || isLastSelected ? theme.colors.cyan40 : 'transparent'};
     position: absolute;
-    background-color: ${({ today }) => (today ? theme.colors.cyan40 : 'transparent')};
     inset: 0;
   }
 `
@@ -136,4 +121,5 @@ export const CalendarDayValue = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
 `

package/src/components/Input/index.tsx

@@ -3,8 +3,9 @@ import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, Style
 
 export interface InputProps extends HTMLAttributes<HTMLDivElement> {
   placeholder?: string
-  iconLeft?: ReactNode
-  label: string
+  rightIcon?: ReactNode
+  leftIcon?: ReactNode
+  label?: string
   value?: string
   readonly?: boolean
   disabled?: boolean
@@ -12,7 +13,6 @@ export interface InputProps extends HTMLAttributes<HTMLDivElement> {
   onInput?: (e: React.FormEvent<HTMLInputElement>) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
   onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
-  iconRight?: ReactNode
 }
 
 export interface Position {
@@ -31,8 +31,8 @@ export const Input: React.FC<InputProps> = ({
   onKeyDown,
   disabled,
   onKeyUp,
-  iconLeft,
-  iconRight,
+  leftIcon,
+  rightIcon,
   ...props
 }) => {
   const id = useId()
@@ -95,7 +95,7 @@ export const Input: React.FC<InputProps> = ({
         <StyledLabel htmlFor={id} ref={labelRef}>
           {label}
         </StyledLabel>
-        {iconLeft}
+        {leftIcon}
         <StyledInput
           id={id}
           disabled={disabled}
@@ -108,7 +108,7 @@ export const Input: React.FC<InputProps> = ({
           onKeyUp={onKeyUp}
           readOnly={readonly}
         />
-        {iconRight}
+        {rightIcon}
       </StyledInputContent>
     </InputWrapper>
   )

package/src/components/Paginate/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Container } from './styles'
 import { IconWrapper } from '../IconWrapper'
 import { chevronLeftSVG, chevronRightSVG } from '../../assets/icon'
-export type PropsPaginate = {
+export type PaginateProps = {
   currentPage: number
   itemCount: number
   itemsPerPage?: number
@@ -16,7 +16,7 @@ export const Paginate = ({
   onChangePage,
   itemsPerPage,
   onChangeItemsPerPage,
-}: PropsPaginate) => {
+}: PaginateProps) => {
   // Se itemsPerPage for undefined, o valor default e 20
   let itemsPerPageValue = itemsPerPage || 20
 

package/src/components/Paginate/stories.tsx

@@ -3,9 +3,9 @@ import React, { useState } from 'react'
 
 import { action } from '@storybook/addon-actions'
 import { fn } from '@storybook/test'
-import { Paginate, PropsPaginate } from '.'
+import { Paginate, PaginateProps } from '.'
 
-const meta: Meta<PropsPaginate> = {
+const meta: Meta<PaginateProps> = {
   title: 'Components/Paginate',
   component: Paginate,
   tags: ['autodocs'],
@@ -20,7 +20,7 @@ const meta: Meta<PropsPaginate> = {
 
 export default meta
 
-const NewPaginate = (args: PropsPaginate) => {
+const NewPaginate = (args: PaginateProps) => {
   const [currentPage, setCurrentPage] = useState(args.currentPage)
   const [itemCount, setItemCount] = useState(args.itemCount)
   const [itemsPerPage, setItemsPerPage] = useState(args.itemsPerPage)
@@ -46,7 +46,7 @@ const NewPaginate = (args: PropsPaginate) => {
   )
 }
 
-export const Default: StoryObj<PropsPaginate> = {
+export const Default: StoryObj<PaginateProps> = {
   render: args => {
     return <NewPaginate {...args} />
   },