frst-components 0.20.0

package/src/components/filter-accordion-checkbox/index.tsx

@@ -0,0 +1,188 @@
+import React,{ useEffect, useState, useLayoutEffect } from 'react'
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import * as Styles from './filterAccordionCheckboxStyles'
+import { IFilterAccordion } from './filterAccordionCheckbox'
+import { randID } from './filterAccordionCheckbox.utils'
+
+import AccordionTabs from '@components/accordion-tabs'
+import Checkbox from '@components/form-elements/checkbox'
+
+export default function FilterAccordionCheckbox({ generalTitle, object, onSelected }: IFilterAccordion) {
+    const [ activeTab, setActiveTab ] = useState('-1');
+    const [ contentTabActiveShow, setContentTabActiveShow ] = useState(<div></div>);
+    const [ tabs, setTabs ] = useState([]);
+
+    const [ allCheckboxes, setAllCheckboxes ] = useState([]);
+
+    useEffect(() => {
+      let tabsForAccordion = object.map((element: any) => {
+                          return {
+                            id: randID(),   
+                            description: element.description,
+                            title: element.category,
+                            totalCounter: 0,
+                            group: includeStatusCheck(element.group ? element.group : [] )
+                          }
+                      },)
+      setTabs(tabsForAccordion)
+    }, []);
+
+    useLayoutEffect(() => {
+      renderNewContent(tabs)
+    }, [activeTab, tabs]);
+
+    const handleActiveTab = (newActive) => {
+        if(newActive == activeTab) setActiveTab("-1")
+        else setActiveTab(newActive);
+    }
+
+    function handleCheck(idCheck) {
+      let copyObjectTab = tabs;
+
+      for(let indexTab in tabs) {
+        for(let indexChecks in (tabs[indexTab].group)) {
+          if(tabs[indexTab].group[indexChecks].id == idCheck) {
+            copyObjectTab[indexTab].group[indexChecks].isChecked = !(copyObjectTab[indexTab].group[indexChecks].isChecked);
+            
+            // Handle counter in tab title
+            if(copyObjectTab[indexTab].group[indexChecks].isChecked)
+              copyObjectTab[indexTab].totalCounter += 1;
+            else
+              copyObjectTab[indexTab].totalCounter -= 1;
+          }
+        }
+      }
+
+      setTabs(copyObjectTab);
+      renderNewContent(copyObjectTab);
+
+      onSelected(buildReturnSelecteds(copyObjectTab));
+    }
+
+    const handleClean = () => {      
+      let copyObjectTab = tabs;
+
+      for(let indexTab in tabs) {
+        for(let indexChecks in (tabs[indexTab].group)) {
+            copyObjectTab[indexTab].group[indexChecks].isChecked = false;
+            copyObjectTab[indexTab].totalCounter = 0;
+        }
+      }
+      
+      setTabs(copyObjectTab);
+      renderNewContent(copyObjectTab);
+
+      onSelected(buildReturnSelecteds(copyObjectTab));
+    }
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <AccordionTabs
+                hasCounterTab
+                titleAccordion={generalTitle}
+                titleTabs={tabs}
+
+                activeTabID={activeTab}
+                handleActiveTab={(e) => handleActiveTab(e)}
+                
+                hasCleanButton
+                textCleanButton="Excluir filtros"
+                handleActionClean={() => handleClean()}
+
+                typeAccordion={"horizontal"}
+                typeButtonTab={"transparent"}
+            >
+              { contentTabActiveShow }
+            </AccordionTabs>
+        </ThemeProvider>
+    )
+
+    function includeStatusCheck(group) {
+      let newGroupWithStatusCheck = []
+      for(let element of group) {
+        element.isChecked = false;
+        newGroupWithStatusCheck.push(element);
+      }
+
+      return newGroupWithStatusCheck;
+    }
+
+    function buildReturnSelecteds(copyObjectTab) {
+      let resultSelected = []
+
+      let counter = 0;
+      copyObjectTab.forEach(tab => {
+          resultSelected[counter] = {
+            description: tab.title,
+            selected: []
+          }
+          if(tab.totalCounter > 0) {
+            tab.group.map((item) =>{
+              if(item.isChecked)
+                resultSelected[counter].selected.push(item.id)
+            })
+          }          
+          counter++;
+      });
+
+      console.log(resultSelected)
+
+      return resultSelected;
+    }
+
+    function renderNewContent(copyObjectTab) {
+      let activeTabContent = copyObjectTab.filter((item) => item.id == activeTab)
+
+      { activeTabContent && 
+        activeTabContent[0] && 
+        activeTabContent[0].group && 
+        setContentTabActiveShow(buildCheckbox(activeTabContent[0].group)) }
+    }
+    
+    function buildCheckbox(groupActive) {
+      let setGroupQuantity = 3;
+      if(groupActive.length > 12) setGroupQuantity = 5;
+
+      let splitGroup = splitGroupInLots(groupActive, setGroupQuantity);
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'row'}}>
+          
+          { splitGroup.map((container) => {
+              return <div key={randID()} style={{ display: 'flex', flexDirection: 'column', marginRight: '24px' }}>
+                  {
+                    container.map((item) => {
+                      let myID = item.id;    
+                      let isCheck = item.isChecked;            
+                      return <Checkbox key={myID} label={item.description} isChecked={isCheck} handleCheck={() => handleCheck(myID)}/> 
+                    })
+                  }
+                </div>
+              }
+            )
+          } 
+        </div>
+      )
+    }
+
+    function splitGroupInLots(group, qtdPerGroup) {
+      let newGroup = []
+
+      let totalItems = group.length;
+      let totalColumns = Math.ceil(totalItems/qtdPerGroup);
+
+      let counterLinear = 0;
+      for(let i=0; i < totalColumns; i++) {
+        if(!newGroup[i]) newGroup[i] = []
+        for(let j=0; j < qtdPerGroup; j++) {
+          if(group[counterLinear]) {
+            newGroup[i][j] = group[counterLinear];
+            counterLinear++;
+          }
+        }
+      }
+      return newGroup;
+    }
+}

package/src/components/form-elements/checkbox/checkbox.d.ts

@@ -0,0 +1,9 @@
+import React from "react"
+
+export interface ICheckbox {
+    label?: string,
+    isChecked?: boolean,
+    alt?: string,
+    handleCheck: () => void,
+    className?: string,
+}

package/src/components/form-elements/checkbox/checkbox.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import Checkbox from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Form Elements/Checkbox',
+    component: Checkbox,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Checkbox {...args} />
+
+export const Normal = Template.bind({})
+Normal.args = {
+    label: 'Checkbox label',
+    isChecked: false,
+    disabled: false,
+    handleCheck: (e: boolean) => alert(e)
+}

package/src/components/form-elements/checkbox/checkboxStyle.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+interface TextFieldProps {
+  type?: string
+  as?: string
+}
+
+export const CheckBoxWrapper = styled.div`
+  min-height: 16px;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  width: fit-content;
+  align-items: center;
+`
+
+export const CheckButton = styled.button`
+  min-height: 16px;
+  min-width: 16px;
+  padding: 0.3rem;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border-width: 0px;
+  :focus {
+    background-color: ${({ theme }) => theme.colors.selectItens};
+  }
+`
+
+export const Label = styled.div<{ isChecked: boolean }>`
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: ${({ isChecked }) => (isChecked ? 700 : 400)};
+  font-size: 16px;
+  line-height: 21px;
+
+  padding-left: 8px;
+`

package/src/components/form-elements/checkbox/index.tsx

@@ -0,0 +1,33 @@
+import '../../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import { CheckboxChecked, CheckboxEmpty } from '@shared/icons'
+
+import { CheckBoxWrapper, CheckButton, Label } from './checkboxStyle'
+import { useState } from 'react'
+
+export default function Checkbox({label, isChecked, handleCheck}) {
+    const [ actionAreaCheckIcon, setActionAreaCheckIcon ] = useState(false);
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <CheckBoxWrapper
+                onClick={handleCheck}
+                onMouseOver={() => setActionAreaCheckIcon(true)}
+                onMouseOut={() => setActionAreaCheckIcon(false)}
+                >   
+                    <CheckButton>
+                        {
+                            isChecked ? (          
+                                <CheckboxChecked/>
+                            ) : (
+                                actionAreaCheckIcon ? 
+                                <CheckboxEmpty stroke={FRSTTheme['colors'].primary1}/> : 
+                                <CheckboxEmpty stroke={FRSTTheme['colors'].neutralsGrey4}/> )
+                        }
+                    </CheckButton>
+                    <Label isChecked={isChecked}> { label } </Label>
+            </CheckBoxWrapper> 
+        </ThemeProvider>
+    );
+}

package/src/components/form-elements/textarea/index.tsx

@@ -0,0 +1,6 @@
+import TextField from '../textfield'
+import { TextFieldProps } from '../textfield'
+
+export default function Textarea(props: TextFieldProps) {
+    return <TextField {...props} multiline />
+}

package/src/components/form-elements/textarea/textArea.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import TextArea from '../textarea/index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Form Elements/TextArea',
+    component: TextArea,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <TextArea {...args} />
+
+export const MultipleLines = Template.bind({})
+MultipleLines.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    required: false,
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    width: '100%',
+    height: '100px',
+    onChange: (e : any) => { console.log(e.target.value) },
+}

package/src/components/form-elements/textfield/index.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react'
+import '../../../shared/global.css'
+import * as Styles from './textFieldStyle'
+import {  ThemeProvider } from 'styled-components'
+import { useTranslation } from 'react-i18next'
+import { FRSTTheme } from '../../../theme'
+
+type enumType = 'text' | 'password' | 'email' | 'number' 
+
+export interface TextFieldProps {
+    label?: string,
+    placeholder?: string,
+    helperText?: string,
+    endIcon?: any,
+    endIconChanged?: any,
+    startIcon?: any,
+    type?: enumType,
+    width?: string,
+    height?: string,
+    value?: any,
+    error?: boolean,
+    disabled?: boolean,
+    style?: React.CSSProperties,
+    id?: string,
+    name?: string,
+    required?: boolean,
+    className?: string,
+    multiline?: boolean,
+    defaultValue?: string,
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
+    maxLength?: number,
+    handleClickEndIcon?: () => void
+}
+
+export default function TextField(props: TextFieldProps) {
+    const [ focus, setFocus ] = useState(false)
+    const [ hover, setHover ] = useState(false)
+    const [ click, setClick ] = useState(false)
+    const [ inputType, setInputType ] = useState(props.type)
+    const [ endIconState, setEndIcon ] = useState(props?.endIcon)
+    const { t } = useTranslation()
+
+    useEffect(() => {
+        setInputType(props.type)
+    }, [props.type]);
+
+    useEffect(() => {
+        setEndIcon(props?.endIcon)
+    }, [props?.endIcon])
+    
+
+    const showBorderAfterClick = () => {
+        setClick(true)
+        setTimeout(() => {
+            setClick(false)
+        }, 1000)
+    }
+
+    return (
+        <ThemeProvider theme={{ ...FRSTTheme, focused: focus, disabled: props.disabled, hovered: hover, error: props.error, multiline: props.multiline, width: props.width, height: props.height }}>
+
+            <div style={props.style} className={props.className}>
+                <Styles.Label htmlFor={props.id} isClicked={click} >{props.label}</Styles.Label>
+
+                <Styles.TextFieldContainer
+                    onMouseEnter={() => setHover(true)}
+                    onMouseLeave={() => setHover(false)}
+                    onClick={() => showBorderAfterClick()}
+                    isClicked={click}
+                >
+                    {
+                        props.startIcon && !props.multiline && (
+                            <Styles.StartIcon>{props.startIcon}</Styles.StartIcon>
+                        )
+                    }
+                    <Styles.TextField
+                        onFocus={() => setFocus(true)}
+                        onBlur={() => setFocus(false)}  
+                        
+                        id={props.id}
+                        placeholder={props.placeholder || `${ t('globals.typeHere') }...`}
+                        as={props.multiline ? 'textarea' : 'input'}
+                        type={inputType}
+                        value={props.value}
+                        disabled={props.disabled}
+                        onChange={props.onChange}
+                        name={props.name}
+                        required={props.required}
+                        defaultValue={props.defaultValue}
+                        maxLength={props.maxLength}
+                    />
+                    {
+                        props.endIcon && !props.multiline && (
+                            !!props.endIcon && <Styles.InputIconButton onClick={props.handleClickEndIcon}>{endIconState}</Styles.InputIconButton>
+                        )
+                    }
+                </Styles.TextFieldContainer>
+                {
+                    props.helperText && <Styles.HelperText>{props.helperText}</Styles.HelperText>
+                }
+            </div>
+        </ThemeProvider>
+    );
+}

package/src/components/form-elements/textfield/textField.stories.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+
+import TextField from './index'
+import * as Icons from '../../../shared/icons'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Form Elements/TextField',
+    component: TextField,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <TextField {...args} />
+
+export const NormalWithHelpertext = Template.bind({})
+NormalWithHelpertext.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    helperText: 'Helper text',
+    required: false,
+    type: 'text',
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    onChange: (e : any) => { console.log(e.target.value) },
+    defaultValue: null,
+    maxLength: 255
+}
+
+export const NormalWithoutHelpertext = Template.bind({})
+NormalWithoutHelpertext.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    required: false,
+    type: 'text',
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    onChange: (e : any) => { console.log(e.target.value) },
+}
+
+export const WithIconAndHelpertext = Template.bind({})
+WithIconAndHelpertext.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    helperText: 'Helper text',
+    required: false,
+    endIcon: <Icons.EditIcon />,
+    type: 'text',
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    onChange: (e : any) => { console.log(e.target.value) },
+    handleClickEndIcon: () => alert('CickEndIcon')
+}
+
+export const WithoutIconAndHelpertext = Template.bind({})
+WithoutIconAndHelpertext.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    required: false,
+    endIcon: <Icons.EditIcon />,
+    type: 'text',
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    onChange: (e : any) => { console.log(e.target.value) },
+    handleClickEndIcon: () => alert('CickEndIcon')
+}
+
+export const PasswordWithIconAndHelperText = Template.bind({})
+PasswordWithIconAndHelperText.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    required: false,
+    endIcon: <Icons.EditIcon />,
+    type: 'password',
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    onChange: (e : any) => { console.log(e.target.value) },
+    handleClickEndIcon: () => alert('CickEndIcon')
+}
+
+export const WithStartIcon = Template.bind({})
+WithStartIcon.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    required: false,
+    startIcon: <Icons.EditIcon />,
+    type: 'text',
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    onChange: (e : any) => { console.log(e.target.value) },
+}
+
+export const WithStartIconAndHelpertext = Template.bind({})
+WithStartIconAndHelpertext.args = {
+    label: 'Label',
+    placeholder: 'Enter text here...',
+    helperText: 'Helper text',
+    required: false,
+    startIcon: <Icons.EditIcon />,
+    type: 'text',
+    error: false,
+    disabled: false,
+    id: 'MyTextField',
+    name: '',
+    className: '',
+    onChange: (e : any) => { console.log(e.target.value) },
+}