w-design-system 0.0.26 → 0.0.28

package/src/components/Select/index.tsx

@@ -0,0 +1,123 @@
+import React, {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  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'
+
+export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+  disabled?: boolean
+  label?: string
+  leftIcon?: ReactNode
+  onOptionChange?: (option: number | null) => void
+  options?: { text: string; id: number }[]
+  placeholder?: string
+  rightIcon?: ReactNode
+  selectedOption?: number | null
+  value?: 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 [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useImperativeHandle(ref, () => ({
+    setOpen,
+  }))
+  
+  useEffect(() => {
+    if (!open) return
+    const handler = (event: MouseEvent) => {
+      let element: HTMLElement | null = event.target as HTMLElement
+      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)
+    }
+  }, [open])
+
+  const onOptionClick = (option: number) => {
+    onOptionChange && onOptionChange(option)
+    setOpen(false)
+  }
+
+  const valueComputed = useMemo(() => {
+    if (value) return value
+    if (selectedOption) {
+      const option = options?.find(option => option.id === selectedOption)
+      return option?.text
+    }
+    return ''
+  }, [value, selectedOption, options])
+
+  return (
+    <SelectWrapper {...props} ref={wrapperRef}>
+      <Input
+        leftIcon={leftIcon}
+        rightIcon={
+          <>
+            {rightIcon}
+            <IconWrapper
+              className={`icon ${open ? 'icon-rotate' : ''}`}
+              src={chevronDownSVG}
+              width="16px"
+              color={theme.colors.shade30}
+            />
+          </>
+        }
+        placeholder={placeholder}
+        label={label}
+        value={valueComputed}
+        readonly
+        onClick={() => setOpen(!open)}
+      />
+      {open && (
+        <DropdownWrapper>
+          <Dropdown>
+            {(options?.length ?? 0) > 0 && (
+              <div>
+                {options?.map(option => (
+                  <OptionButton
+                    selected={option.id === selectedOption}
+                    key={option.id}
+                    onClick={() => onOptionClick(option.id)}
+                  >
+                    {option.text}
+                  </OptionButton>
+                ))}
+              </div>
+            )}
+            {children}
+          </Dropdown>
+        </DropdownWrapper>
+      )}
+    </SelectWrapper>
+  )
+}
+
+export const Select = React.forwardRef(SelectFowardRef)

package/src/components/Select/stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Select, SelectProps } from './index'
+import React from 'react'
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    disabled: { control: 'boolean' },
+    selectedOption: { control: 'number' },
+    onOptionChange: { action: 'selectedOptionChange' },
+  },
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+const ComponentWrapper = ({ options, ...args }: SelectProps) => {
+  const [selectedOption, setSelectOption] = React.useState<number | null>(null)
+
+  return (
+    <Select
+      selectedOption={selectedOption}
+      onOptionChange={option => setSelectOption(option)}
+      options={
+        options ?? [
+          {
+            text: 'Opção 1',
+            id: 1,
+          },
+          {
+            text: 'Opção 2',
+            id: 2,
+          },
+          {
+            text: 'Opção 3',
+            id: 3,
+          },
+        ]
+      }
+      {...args}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: args => <ComponentWrapper label="Label" placeholder="Placeholder" />,
+}

package/src/components/Select/styles.ts

@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+import { theme } from '../Themes'
+
+export const SelectWrapper = 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 interface OptionButtonProps {
+  selected: boolean
+}
+
+export const OptionButton = styled.button<OptionButtonProps>`
+  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};
+  }
+`

package/src/components/Themes/index.ts

@@ -42,6 +42,10 @@ const mint = {
   mint10: '#EBF8EF',
 }
 
+const special = {
+  cyan30opacity16: 'rgba(33, 126, 253, 0.16)',
+}
+
 const white = '#FFFFFF'
 const black = '#333333'
 const transparent = 'transparent'
@@ -84,6 +88,7 @@ export const theme = {
     white,
     black,
     transparent,
+    ...special,
   },
   fonts: ['Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
   title: {

package/src/components/Types/index.ts

@@ -1,7 +1,12 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
-
+import type { DatePickerProps } from '../DatePicker'
+import type { DateRangePickerProps } from '../DateRangePicker'
+import type { SelectProps } from '../Select'
+import type { SelectRef } from '../Select'
+import type { PaginateProps } from '../Paginate'
 type ColorsVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'gray' | 'warning' | 'yellow'
 type ColorsVariantBanner = 'notice' | 'success' | 'danger' | 'warning'
+
 export interface ButtonTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ColorsVariant
   icon?: string
@@ -47,3 +52,5 @@ export interface TabsTypes extends HTMLAttributes<HTMLDivElement> {
   defaultActiveTab?: string
   onTabChange?: (activeTab: string) => void
 }
+
+export { DatePickerProps, DateRangePickerProps, SelectProps, SelectRef, PaginateProps }

package/src/index.tsx

@@ -2,17 +2,18 @@ export { Banner } from './components/Banner/index'
 export { Button } from './components/Button/index'
 export { ButtonRadiusIcon } from './components/ButtonRadiusIcon/index'
 export { ButtonRound } from './components/ButtonRound/index'
-export { DateInput } from './components/DateInput/index'
+export { DatePicker as DateInput } from './components/DatePicker/index'
 export { IconWrapper } from './components/IconWrapper/index'
 export { Input } from './components/Input/index'
 export { Modal } from './components/Modal/index'
 export { Paginate } from './components/Paginate/index'
 export { Paragraph } from './components/Paragraph/index'
-export { RangeDateInput } from './components/RangeDateInput/index'
+export { DateRangePicker as RangeDateInput } from './components/DateRangePicker/index'
 export { Table } from './components/Table/index'
 export { Tabs } from './components/Tabs/index'
 export { theme } from './components/Themes/index'
 export { Title } from './components/Title/index'
+export { Select } from './components/Select/index'
 export {
   appsSVG,
   alertSVG,

package/src/components/RangeDateInput/styles.ts

@@ -1,145 +0,0 @@
-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;
-  grid-template-columns: repeat(7, 36px);
-  align-items: center;
-  justify-items: center;
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
-  height: 100%;
-  width: 100%;
-  font-size: ${theme.paragraph.small};
-  color: ${theme.colors.shade50};
-`
-
-export const CalendarWeekDayLabel = styled.div`
-  font-size: ${theme.paragraph['xx-small']};
-  color: ${theme.colors.shade30};
-  font-weight: 600;
-  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;
-  align-items: center;
-  font-size: ${theme.paragraph.small};
-  font-family: 'Nunito Sans', sans-serif;
-  font-weight: 600;
-
-  .icon,
-  .icon svg,
-  .icon svg path {
-    fill: ${theme.colors.shade50} !important;
-  }
-
-  .icon:hover,
-  .icon:hover svg,
-  .icon:hover svg path {
-    fill: ${theme.colors.cyan30} !important;
-  }
-
-  .icon-disabled,
-  .icon-disabled svg,
-  .icon-disabled svg path {
-    fill: ${theme.colors.shade20} !important;
-  }
-`
-export interface CalendarDayProps {
-  today: boolean
-}
-
-export const CalendarDay = styled.div<CalendarDayProps>`
-  position: relative;
-  cursor: pointer;
-  color: ${({ today }) => (today ? theme.colors.white : theme.colors.shade50)};
-  width: 36px;
-  height: 36px;
-`
-
-export interface CalendarDaySelectedBackgroundProps {
-  today: boolean
-  selected: boolean
-}
-export const CalendarDaySelectedBackground = styled.div<CalendarDaySelectedBackgroundProps>`
-  position: absolute;
-  background-color: ${({ selected }) => selected && 'rgba(33, 126, 253, 0.16)'};
-  width: 100%;
-  height: 100%;
-  inset: 0;
-
-  &:hover {
-    background-color: rgba(33, 126, 253, 0.16);
-  }
-
-  &::before {
-    content: '';
-    border-radius: 50%;
-    position: absolute;
-    background-color: ${({ today }) => (today ? theme.colors.cyan40 : 'transparent')};
-    inset: 0;
-  }
-`
-export const CalendarDayValue = styled.div`
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-`