frst-components 0.20.0 → 0.20.2

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

@@ -1,188 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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) },
-}