w-design-system 0.0.24 → 0.0.26

package/src/components/DateInput/index.tsx

@@ -0,0 +1,29 @@
+import React, { HTMLAttributes } from 'react'
+import { RangeDateInput } from '../RangeDateInput'
+
+export interface DateInputProps extends HTMLAttributes<HTMLDivElement> {
+  placeholder?: string
+  label: string
+  defaultOptions?: { text: string; id: number }[]
+  selectedOption?: number | null
+  readonly?: boolean
+  disabled?: boolean
+  onSelectedOptionChange?: (option: number | null) => void
+  customDate: Date | null
+  onSelectedCustomDate?: (date: Date | null) => void
+}
+
+export const DateInput: React.FC<DateInputProps> = ({ onSelectedCustomDate, customDate, ...props }) => {
+  const onRangeSelected = (start: Date | null) => {
+    if (onSelectedCustomDate) onSelectedCustomDate(start)
+  }
+  return (
+    <RangeDateInput
+      {...props}
+      isRange={false}
+      onSelectedCustomRange={onRangeSelected}
+      startCustomDate={customDate}
+      endCustomDate={customDate}
+    />
+  )
+}

package/src/components/DateInput/stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { DateInput } from './index'
+import React from 'react'
+
+const meta: Meta<typeof DateInput> = {
+  title: 'Components/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    readonly: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof DateInput>
+
+export default meta
+type Story = StoryObj<typeof DateInput>
+
+const ComponentWrapper = ({ defaultOptions, ...args }: any) => {
+  const [selectedOption, setSelectOption] = React.useState<number | null>(null)
+  const [customDate, setCustomDate] = React.useState<Date | null>(null)
+  return (
+    <DateInput
+      selectedOption={selectedOption}
+      customDate={customDate}
+      onSelectedOptionChange={option => setSelectOption(option)}
+      onSelectedCustomDate={date => setCustomDate(date)}
+      defaultOptions={
+        defaultOptions ?? [
+          {
+            text: 'Ontem',
+            id: -1,
+          },
+          {
+            text: 'Hoje',
+            id: 0,
+          },
+          {
+            text: 'Amanhã',
+            id: 1,
+          },
+        ]
+      }
+      {...args}
+    />
+  )
+}
+
+export const SelecionarDataDeDatas: Story = {
+  render: args => <ComponentWrapper label="Data da Disputa" placeholder="Placeholder" />,
+}
+
+export const SelecionarDatasSimples: Story = {
+  render: args => <ComponentWrapper defaultOptions={[]} />,
+}

package/src/components/DateInput/styles.ts

@@ -0,0 +1,139 @@
+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;
+  &::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;
+`

package/src/components/IconWrapper/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { keyframes, css } from 'styled-components'
 import { ReactSVG } from 'react-svg'
 
 interface IconWrapperProps {
@@ -9,35 +9,58 @@ interface IconWrapperProps {
   height?: string
   className?: string
   onClick?: () => void
+  loading?: boolean
 }
 
-interface IconWrappeProps {
+interface StyledIconWrapperProps {
   color?: string
   width?: string
   height?: string
-  onClick?: () => void
+  clickable?: boolean
+  loading?: boolean
 }
 
-const StyledIconWrapper = styled.div<IconWrappeProps>`
+const spinAnimation = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`
+
+const StyledIconWrapper = styled.div<StyledIconWrapperProps>`
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
+  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
+
   svg {
-    width: ${props => props.width || '24px'};
-    height: ${props => props.height || '24px'};
-    fill: ${props => props.color || 'black'};
+    width: ${({ width }) => width || '24px'};
+    height: ${({ height }) => height || '24px'};
+    fill: ${({ color }) => color || 'black'};
+
+    ${({ loading }) =>
+      loading &&
+      css`
+        animation: ${css`
+            ${spinAnimation}`} 2s linear infinite;
+      `}
 
     path {
-      fill: ${props => props.color || 'black'};
+      fill: ${({ color }) => color || 'black'};
     }
   }
 `
 
-export const IconWrapper: React.FC<IconWrapperProps> = ({ src, color, width, height, className, onClick }) => (
-  <StyledIconWrapper color={color} width={width} height={height} className={className} onClick={onClick}>
+export const IconWrapper: React.FC<IconWrapperProps> = ({ src, color, width, height, className, onClick, loading }) => (
+  <StyledIconWrapper
+    color={color}
+    width={width}
+    height={height}
+    className={className}
+    clickable={!!onClick}
+    loading={loading}
+    onClick={onClick}
+  >
     <ReactSVG src={src} />
   </StyledIconWrapper>
 )

package/src/components/Input/index.tsx

@@ -0,0 +1,115 @@
+import React, { HTMLAttributes, ReactNode, useEffect, useId, useRef } from 'react'
+import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, StyledLabel } from './styles'
+
+export interface InputProps extends HTMLAttributes<HTMLDivElement> {
+  placeholder?: string
+  iconLeft?: ReactNode
+  label: string
+  value?: string
+  readonly?: boolean
+  disabled?: boolean
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onInput?: (e: React.FormEvent<HTMLInputElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  iconRight?: ReactNode
+}
+
+export interface Position {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  readonly,
+  onChange,
+  onInput,
+  value,
+  onKeyDown,
+  disabled,
+  onKeyUp,
+  iconLeft,
+  iconRight,
+  ...props
+}) => {
+  const id = useId()
+  const [labelPosition, setLabelPosition] = React.useState<Position>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+  const [contentPosition, setContentPosition] = React.useState<Position>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+
+  const contentRef = useRef<HTMLDivElement>(null)
+  const labelRef = useRef<HTMLLabelElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const updatePositions = () => {
+    if (contentRef.current) {
+      setContentPosition({
+        x: 0,
+        y: 0,
+        width: contentRef.current.offsetWidth,
+        height: contentRef.current.offsetHeight,
+      })
+    }
+    if (labelRef.current) {
+      setLabelPosition({
+        x: labelRef.current.offsetLeft,
+        y: labelRef.current.offsetTop,
+        width: labelRef.current.offsetWidth,
+        height: labelRef.current.offsetHeight,
+      })
+    }
+  }
+
+  const onClickHandler = () => {
+    inputRef.current?.focus()
+  }
+
+  useEffect(() => {
+    const handler = () => updatePositions()
+
+    window.addEventListener('resize', handler)
+
+    return () => window.removeEventListener('resize', handler)
+  }, [])
+
+  useEffect(() => {
+    updatePositions()
+  }, [label])
+
+  return (
+    <InputWrapper {...props}>
+      <StyledInputContent disabled={disabled} ref={contentRef} onClick={onClickHandler}>
+        <StyledInputBorder content={contentPosition} label={labelPosition} />
+        <StyledLabel htmlFor={id} ref={labelRef}>
+          {label}
+        </StyledLabel>
+        {iconLeft}
+        <StyledInput
+          id={id}
+          disabled={disabled}
+          value={value}
+          placeholder={props.placeholder}
+          ref={inputRef}
+          onChange={onChange}
+          onInput={onInput}
+          onKeyDown={onKeyDown}
+          onKeyUp={onKeyUp}
+          readOnly={readonly}
+        />
+        {iconRight}
+      </StyledInputContent>
+    </InputWrapper>
+  )
+}

package/src/components/Input/stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Input } from './index'
+import { VARIANTS_TYPES } from '../../utils/constanst'
+import { useState } from 'react'
+import React from 'react'
+import { IconWrapper } from '../IconWrapper'
+import { editSVG } from '../../assets/icon'
+import { theme } from '../Themes'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    value: { control: 'text' },
+    readonly: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    onChange: { action: 'change' },
+    onInput: { action: 'input' },
+    onKeyDown: { action: 'keydown' },
+    onKeyUp: { action: 'keyup' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Playground: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'placeholder',
+  },
+}
+const ComponentWrapper = ({ ...args }: any) => {
+  const [value, setValue] = useState<string>('')
+  return <Input {...args} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+export const Default: StoryObj<typeof Input> = {
+  render: args => <ComponentWrapper {...args} />,
+}
+
+export const Disabled: StoryObj<typeof Input> = {
+  render: args => <ComponentWrapper {...args} placeholder="Disabled" label="Disabled" disabled />,
+}
+
+export const DisabledWithIcon: StoryObj<typeof Input> = {
+  render: args => (
+    <ComponentWrapper
+      {...args}
+      iconLeft={<IconWrapper src={editSVG} width="20px" color={theme.colors.shade30} />}
+      placeholder="Disabled"
+      label="Disabled"
+      disabled
+    />
+  ),
+}

package/src/components/Input/styles.ts

@@ -0,0 +1,84 @@
+import styled from 'styled-components'
+import { theme } from '../Themes'
+import type { Position } from '.'
+
+export const InputWrapper = styled.div`
+  border-radius: 4px;
+`
+
+export const StyledInput = styled.input`
+  width: 100%;
+  font-family: ${theme.fonts.join(', ')};
+  outline: none;
+  font-size: ${theme.paragraph.medium};
+  border: none;
+  color: ${theme.colors.shade50};
+  z-index: 1;
+  background-color: transparent;
+  &:active,
+  &:focus {
+    outline: none;
+    border: none;
+  }
+  &::placeholder {
+    color: ${theme.colors.shade30};
+    font-size: ${theme.paragraph.medium};
+    opacity: 1;
+  }
+  &:disabled {
+    background-color: transparent;;
+    cursor: not-allowed;
+  }
+`
+
+export const StyledLabel = styled.label`
+  position: absolute;
+  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;
+  text-wrap: nowrap;
+`
+
+export interface StyledInputContentProps {
+  disabled?: boolean
+}
+
+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;
+  border-radius: 4px;
+  cursor: ${({ disabled }: StyledInputContentProps) => (disabled ? 'not-allowed' : 'pointer')};
+  background-color: ${({ disabled }: StyledInputContentProps) =>
+    disabled ? theme.colors.shade10 : theme.colors.white};
+`
+
+export interface StyledInputBorderProps {
+  label: Position
+  content: Position
+}
+
+/**
+ * O clip-path faz com que o elemento fique transparente na região do label
+ * @see https://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export const StyledInputBorder = styled.div<StyledInputBorderProps>`
+  position: absolute;
+  inset: 0px;
+  border-radius: 4px;
+  border: 1px solid ${theme.colors.shade20};
+  clip-rule: evenodd;
+  clip-path: path(
+    '${({ label, content }) =>
+      `M ${content.x} ${content.y} l ${content.width} 0 l 0 ${content.height} l -${content.width} 0z M ${label.x} ${label.y} l 0 ${label.height} l ${label.width} 0 l 0 -${label.height}z`}'
+  );
+`