TEC-4373: Improvements and changes needed in DS for step 2 (#23)

vissimo-group · Mar 19, 2024 · e44c36a · e44c36a
1 parent cbfa371
commit e44c36a
Show file tree

Hide file tree

Showing 15 changed files with 173 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chardonnay",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "A mobile first frontend framework made with wine",
   "homepage": "https://vissimo-group.github.io/chardonnay/",
   "main": "./dist/index.js",

diff --git a/src/components/CardAddress/Select/index.tsx b/src/components/CardAddress/Select/index.tsx
@@ -1,20 +1,24 @@
 import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
+import { Edit } from 'semillon'
 import { Colors } from '../../../tokens'
 import { CommomProps, ThemeType } from '../../../types'
 
-interface CardAddressProps extends HTMLAttributes<HTMLInputElement> {
+export interface CardAddressProps extends HTMLAttributes<HTMLInputElement> {
   checked?: boolean
   theme?: ThemeType
   typeAddress?: string
   address?: string
   postcode?: string
   complement?: string
+  onEdit?: () => void
+  isEditable?: boolean
 }
 
 const RadioButtonLabel = styled.label`
   display: flex;
   align-items: center;
+  justify-content: space-between;
 `
 
 interface Crosschecked extends CommomProps {
@@ -98,13 +102,24 @@ const ComplementLine = styled.span<CommomProps>`
   text-align: left;
 `
 
+const Icon = styled.div`
+  cursor: pointer;
+`
+
+const ContainerRadioButton = styled.div`
+  display: flex;
+  align-items: flex-end;
+`
+
 const SelectAddress: React.FC<CardAddressProps> = ({
   checked,
   theme,
   typeAddress,
   address,
   postcode,
   complement,
+  onEdit,
+  isEditable,
   ...cardAddressProps
 }) => {
   return (
@@ -113,13 +128,20 @@ const SelectAddress: React.FC<CardAddressProps> = ({
       theme={theme as ThemeType}
     >
       <RadioButtonLabel>
-        <RadioButtonInput
-          theme={theme as ThemeType}
-          type="radio"
-          checked={checked as boolean}
-          {...cardAddressProps}
-        />
-        <RadioButtonText>{typeAddress}</RadioButtonText>
+        <ContainerRadioButton>
+          <RadioButtonInput
+            theme={theme as ThemeType}
+            type="radio"
+            checked={checked as boolean}
+            {...cardAddressProps}
+          />
+          <RadioButtonText>{typeAddress}</RadioButtonText>
+        </ContainerRadioButton>
+        {isEditable && (
+          <Icon>
+            <Edit size={26} onClick={onEdit} />
+          </Icon>
+        )}
       </RadioButtonLabel>
       <AddressDetails>
         <AddressLine>{address}</AddressLine>

diff --git a/src/components/CardAddress/Shipping/index.tsx b/src/components/CardAddress/Shipping/index.tsx
@@ -32,6 +32,8 @@ const ContainerShipping = styled.div<ShippingAddressProps>`
   border-radius: 8px;
 
   color: ${(props: CommomProps) => Colors[props.theme].neutral.neutral500};
+  background-color: ${(props: CommomProps) =>
+    Colors[props.theme].neutral.neutral100};
 `
 
 const Title = styled.span`

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -1,9 +1,10 @@
 import React, {
   forwardRef,
   useRef,
-  useEffect,
   useImperativeHandle,
   useState,
+  useCallback,
+  useEffect,
 } from 'react'
 
 import { maskInput, unMask } from './mask'
@@ -27,30 +28,30 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     ...restProps
   } = props
 
-  const [inputValue, setInputValue] = useState<string | undefined>(props.value)
+  const [inputValue, setInputValue] = useState<string | undefined>()
   const inputRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
     if (props.value) {
       setInputValue(props.value)
     }
+  }, [])
 
-    if (mask && inputValue) {
-      const originalValue = unMask(inputValue)
-      const makedValue = maskInput(originalValue, mask)
-      setInputValue(makedValue)
-    }
-  }, [inputValue])
+  useImperativeHandle(ref, () => inputRef.current!, [inputRef.current])
 
-  useImperativeHandle(ref, () => inputRef.current!, [])
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.target.value
+      const valueUnMask = unMask(newValue)
+      const valueMask = mask ? maskInput(valueUnMask, mask) : newValue
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value
-    setInputValue(newValue)
-    if (props.onChange) {
-      props.onChange(event)
-    }
-  }
+      setInputValue(valueMask)
+      if (props.onChange) {
+        props.onChange(event)
+      }
+    },
+    [mask, props.onChange],
+  )
 
   return (
     <InputContainer theme={theme} {...props}>

diff --git a/src/components/Input/mask.ts b/src/components/Input/mask.ts
@@ -17,9 +17,9 @@ const regexMap: RegExpMapProps = {
 }
 
 export const masker = (
-  value: string,
-  pattern: string,
-  options?: PatternOptions,
+    value: string,
+    pattern: string,
+    options?: PatternOptions,
 ) => {
   const patternCharList = pattern.split('')
   const unmaskedValue = unMask(String(value))
@@ -55,8 +55,8 @@ export const masker = (
     }
 
     if (
-      output.length < patternCharList.length &&
-      /\W/.test(output[output.length - 1])
+        output.length < patternCharList.length &&
+        /\W/.test(output[output.length - 1])
     ) {
       output.pop()
     }
@@ -68,24 +68,24 @@ export const masker = (
 }
 
 const multimasker = (
-  value: string,
-  patterns: string[],
-  options?: PatternOptions,
+    value: string,
+    patterns: string[],
+    options?: PatternOptions,
 ) =>
-  masker(
-    value,
-    patterns.reduce(
-      (memo, pattern) => (value.length <= unMask(memo).length ? memo : pattern),
-      patterns[0],
-    ),
-    options,
-  )
+    masker(
+        value,
+        patterns.reduce(
+            (memo, pattern) => (value.length <= unMask(memo).length ? memo : pattern),
+            patterns[0],
+        ),
+        options,
+    )
 
 export const maskInput = (
     value: string,
-    pattern: string | [] | undefined,
+    pattern: string | [] | string[] ,
     options?: PatternOptions,
 ): string =>
-  typeof pattern === 'string'
-    ? masker(value, pattern || '', options)
-    : multimasker(value, pattern, options)
+    typeof pattern === 'string'
+        ? masker(value, pattern || '', options)
+        : multimasker(value, pattern, options)
diff --git a/src/components/Input/style.tsx b/src/components/Input/style.tsx
@@ -22,7 +22,6 @@ const InputContainer = styled.div<InputProps>`
   position: relative;
   min-width: 1rem;
   height: 3.438rem;
-  margin-bottom: 20px;
   display: flex;
   align-items: center;
   border-radius: ${BorderRadius['3']};
@@ -54,7 +53,7 @@ const InputContainer = styled.div<InputProps>`
       }
     `}
 
-  ${({ disabled, theme }) =>
+  ${({ disabled, theme }: InputProps & CommomProps) =>
     disabled &&
     css`
       border-color: ${Colors[theme].neutral.neutral200} !important;
@@ -64,7 +63,7 @@ const InputContainer = styled.div<InputProps>`
       }
     `}
 
-  &:focus-within {
+    &:focus-within {
     border-color: ${({ theme }: CommomProps) =>
       Colors[theme].feedback.feedbackInfo100};
   }
@@ -80,6 +79,7 @@ const InputCustom = styled.input<InputProps>`
   background: none;
   outline: none;
   background-color: transparent;
+  width: 100%;
 
   &:focus ~ ${Label}, &:not(:focus):not(:placeholder-shown) ~ ${Label} {
     top: -0.02rem;
@@ -107,7 +107,7 @@ const InputCustom = styled.input<InputProps>`
     `}
 
   &:-webkit-autofill,
-  &:-webkit-autofill:focus {
+    &:-webkit-autofill:focus {
     transition: background-color 600000s 0s;
     background-color: transparent !important;
   }

diff --git a/src/components/Input/types.ts b/src/components/Input/types.ts
@@ -6,6 +6,7 @@ export interface InputProps extends HTMLAttributes<HTMLInputElement> {
   error?: null | undefined | boolean
   mask?: string | [] | undefined
   value?: string | undefined
+  disabled?: boolean
   theme?: ThemeType
   iconLeft?: React.ReactNode
   iconRight?: React.ReactNode

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -41,7 +41,6 @@ const TemplateSelect = (props: SelectProps) => {
   return (
     <Select
       label="Escolha uma opção"
-      iconRight={<ChevronDown size={26} color="black" />}
       theme="light"
       onChange={handleSelectChange}
       value={selectedValue}
@@ -61,7 +60,10 @@ export const Enabled: Story = {
   args: { disabled: false, error: false },
 
   render: (args) => (
-    <TemplateSelect {...args}>
+    <TemplateSelect
+      {...args}
+      iconRight={<ChevronDown size={26} color="black" />}
+    >
       <option value="home">Home address</option>
       <option value="business">Business address</option>
     </TemplateSelect>
@@ -73,7 +75,10 @@ export const Disabled: Story = {
   args: { disabled: true, error: false },
 
   render: (args) => (
-    <TemplateSelect {...args}>
+    <TemplateSelect
+      {...args}
+      iconRight={<ChevronDown size={26} color="black" />}
+    >
       <option value="home">Home address</option>
       <option value="business">Business address</option>
     </TemplateSelect>
@@ -85,16 +90,16 @@ export const Error: Story = {
   args: { disabled: false, error: true },
 
   render: (args) => (
-    <TemplateSelect {...args}>
+    <TemplateSelect {...args} iconLeft={<Close size={26} color="red" />}>
       <option value="home">Some error</option>
       <option value="home">Home address</option>
       <option value="business">Business address</option>
     </TemplateSelect>
   ),
 }
 
-export const icons: Story = {
-  name: 'icons',
+export const iconsLeft: Story = {
+  name: 'icon Left',
   args: {},
 
   render: (args) => (
@@ -105,3 +110,36 @@ export const icons: Story = {
     </TemplateSelect>
   ),
 }
+
+export const iconsRight: Story = {
+  name: 'icon Right',
+  args: {},
+
+  render: (args) => (
+    <TemplateSelect
+      iconRight={<ChevronDown size={26} color="black" />}
+      {...args}
+    >
+      <option value="home">Some error</option>
+      <option value="home">Home address</option>
+      <option value="business">Business address</option>
+    </TemplateSelect>
+  ),
+}
+
+export const icons: Story = {
+  name: 'icon Left and Right',
+  args: {},
+
+  render: (args) => (
+    <TemplateSelect
+      iconRight={<Close size={26} color="black" />}
+      iconLeft={<ChevronDown size={26} color="black" />}
+      {...args}
+    >
+      <option value="home">Some error</option>
+      <option value="home">Home address</option>
+      <option value="business">Business address</option>
+    </TemplateSelect>
+  ),
+}