frst-components 0.20.0 → 0.20.2

package/src/components/scroll-container/scrollContainerStyles.ts

@@ -1,93 +0,0 @@
-import styled from 'styled-components'
-
-interface IButtonContoll {
-  isLeftButton?: boolean
-  sizeButton?: number
-  visibility?: string
-  marginsArrowButton?: string
-  marginTopArrrowButton?: string
-}
-
-export const WrapperHorizontal = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: auto;
-`
-
-export const WrapperContent = styled.div<{ paddingIntern?: string }>`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  white-space: nowrap;
-
-  scroll-behavior: smooth;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  padding-left: ${({ paddingIntern }) => (paddingIntern ? paddingIntern : '150px')};
-  padding-right: ${({ paddingIntern }) => (paddingIntern ? paddingIntern : '150px')};
-`
-
-export const ButtonControll = styled.div<IButtonContoll>`
-  display: flex;
-  visibility: ${({ visibility }) => visibility};
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  margin-top: ${({ marginTopArrrowButton }) => (marginTopArrrowButton ? marginTopArrrowButton : '0.5rem')};
-
-  width: ${({ sizeButton }) => sizeButton + 'px'};
-  height: ${({ sizeButton }) => sizeButton + 'px'};
-
-  min-width: ${({ sizeButton }) => sizeButton + 'px'};
-  min-height: ${({ sizeButton }) => sizeButton + 'px'};
-
-  background: ${({ theme }) => theme.colors.shadeWhite};
-  border: 1px solid #e8e8e8;
-
-  border-radius: 50%;
-
-  ${({ sizeButton, isLeftButton, marginsArrowButton }) => {
-    let result = ''
-    if (sizeButton >= 80) {
-      result = isLeftButton
-        ? 'padding-right: 6px; margin-right: ' + marginsArrowButton + ';'
-        : 'padding-left: 6px; margin-left: ' + marginsArrowButton + ';'
-    } else {
-      result = isLeftButton
-        ? 'padding-right: 3px; margin-right:  ' + marginsArrowButton + ';'
-        : 'padding-left: 3px; margin-left:  ' + marginsArrowButton + ';'
-    }
-
-    return result
-  }}
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.primary1} !important;
-    border: 0px solid #e8e8e8;
-  }
-
-  box-shadow: 8px 21px 8px 0 rgb(34 34 34 / 30%) !important;
-  z-index: 9;
-  transition: all 0.2s ease-in-out;
-`
-// ${({ isLeftButton }) => isLeftButton ? 'margin-right: -28px' : 'margin-left: -28px'};
-// ${({ isLeftButton }) => isLeftButton ? 'padding-right: 6px' : 'padding-left: 6px'};
-// ${({ isLeftButton }) => isLeftButton ? 'margin-right: -138px' : 'margin-left: -138px'};
-
-export const CardTest = styled.div`
-  min-width: 350px;
-  min-height: 300px;
-  margin: 10px;
-  margin-left: 40px;
-  margin-right: 40px;
-  background-color: #0f0;
-  z-index: 1;
-  border-radius: 20px;
-`

package/src/components/search-field/index.tsx

@@ -1,48 +0,0 @@
-import React, { useState } from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import { Container, ContainerIcon, LabelField, InputSearchWrapper, InputText, ButtonAction } from './searchFieldStyles'
-import { ISearchField } from './searchField'
-import { SearchIcon } from '@shared/icons'
-
-export default function SearchField({ label, hasSearchIcon, placeholder, value, onChange, textButton, className, handleClickButton }: ISearchField) {
-    const [actionAreaInput, setActionAreaInput] = useState(false);
-    const [inputOnFocus, setInputOnFocus] = useState(false);
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Container
-                className={className}
-                onMouseOver={() => setActionAreaInput(true)}
-                onMouseOut={() => setActionAreaInput(false)}
-                onFocus={() => setInputOnFocus(true)}
-                onBlur={() => setInputOnFocus(false)}
-            >
-                {label &&
-                    <LabelField isHover={actionAreaInput} isOnFocus={inputOnFocus}> {label} </LabelField>
-                }
-                <InputSearchWrapper isHover={actionAreaInput} isOnFocus={inputOnFocus}>
-                    {hasSearchIcon &&
-                        <ContainerIcon> <SearchIcon /> </ContainerIcon>}
-                    <InputText
-                    placeholder={placeholder} 
-                    onChange={onChange} 
-                    value={value}
-                    onKeyDown={(event) => {                        
-                        if (event.key === "Enter") {
-                            handleClickButton()
-                        }
-                    }}
-                    />
-                    <ButtonAction
-                        onClick={() => handleClickButton()}
-                    >
-                        {textButton}
-
-                    </ButtonAction>            
-                </InputSearchWrapper>
-            </Container>
-        </ThemeProvider>
-    )
-}

package/src/components/search-field/searchField.d.ts

@@ -1,13 +0,0 @@
-import React from "react"
-
-export interface ISearchField{
-    label?: string,
-    hasSearchIcon?: boolean,
-    placeholder?: string,
-    value?: string,
-    onChange?: () => void,
-    textButton?: string,
-    handleClickButton: () => void,
-    className?: string,
-    handleKeyPress?: (e) => void,
-}

package/src/components/search-field/searchField.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import SearchField from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Base/Search Field',
-    component: SearchField,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SearchField {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    label: "Label",
-    hasSearchIcon: true,
-    placeholder: "Input Text",
-    textButton: "Search",
-    className: null,
-    handleClickButton: () => alert('Click'),
-}
-
-export const withoutIcon = Template.bind({})
-withoutIcon.args = {
-    label: "Label",
-    placeholder: "Input Text",
-    textButton: "Button CTA",
-    className: null,
-    handleClickButton: () => alert('Click'),    
-}
-
-
-export const withoutLabel = Template.bind({})
-withoutLabel.args = {
-    placeholder: "Input Text",
-    textButton: "Button CTA",
-    className: null,
-    handleClickButton: () => alert('Click'),
-}

package/src/components/search-field/searchFieldStyles.ts

@@ -1,100 +0,0 @@
-import styled from 'styled-components'
-
-interface ISearchField {
-    isHover?: boolean,
-    isOnFocus?: boolean,    
-}
-
-
-export const Container = styled.div`
-    display: flex;
-    flex-direction: column;
-`
-
-export const LabelField = styled.label<ISearchField>`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-
-    margin-bottom: 16px;
-
-    color: ${({ theme }) => theme.colors.shadeBlack};
-
-    color: ${({ theme, isHover }) => isHover && theme.colors.linkOnfocus};
-    
-    color: ${({ isOnFocus }) => isOnFocus &&  '#663366' }    
-`
-
-export const ContainerIcon = styled.div`
-    min-height: 20px;
-    min-width: 20px;
-    padding-left: 15px;
-    padding-right: 10px;
-    padding-top: 3px;
-`
-
-export const InputSearchWrapper = styled.div<ISearchField>`
-    height: 48px;
-    background-color: #E8E8E8;
-
-    border-radius: 8px;
-    
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    border: 1px solid ${({isHover, theme}) => isHover ? theme.colors.linkOnfocus : '#E0E0E0'};
-
-    ${({ isOnFocus }) => isOnFocus &&  'outline: 1.5px solid #AE9BAE; border: 1px solid #663366;' }    
-`
-
-export const InputText = styled.input`
-    margin-left:10px;
-    display: flex;
-    align-items: center;
-    height: 48px;
-    width: 100%;
-    border: none;
-    background: transparent;
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 18px;
-    color: ${({ theme }) => theme.colors.neutralsGrey1};
-
-    &::placeholder {
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 18px;
-        backgorund-color: #FFF;
-        color: ${({ theme }) => theme.colors.neutralsGrey3};
-    }
-`
-
-export const ButtonAction = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 48px;
-    background-color: ${({ theme }) => theme.colors.primary1};
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-    color: ${({ theme }) => theme.colors.shadeWhite};
-    border-radius: 8px;
-    
-    padding: 14px;
-    margin-right: -1px;
-    margin-left: 10px;
-    z-index: 2;
-    white-space: nowrap;
-`

package/src/components/select/Select.tsx

@@ -1,170 +0,0 @@
-import React, { useState, useEffect, useRef } from "react"
-import styled, { css } from "styled-components"
-import { SelectContext } from "./SelectContext"
-
-const DropDownContainer = styled("div")`
-    width: 100%;
-    height: 48px;
-    background: #FFFFFF;
-    border: 1px solid #E8E8E8;
-    border-radius: 4px;
-    position: relative;
-`
-const EventOverlay = styled.div`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background: transparent;
-    cursor: pointer;
-    z-index: 2;
-`
-const DropDownHeader = styled("div")`
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #3faffa;
-  background: #ffffff;
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-  border-radius: 4px;
-
-  p {
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-    color: #A6A6A6;
-  }
-`
-const DropDownListContainer = styled("div")``
-
-const DropDownList = styled("ul")`
-  padding: 0;
-  margin: 0;
-  background: #ffffff;
-  border: 2px solid #e5e5e5;
-  box-sizing: border-box;
-  color: #3faffa;
-  font-size: 1.3rem;
-  font-weight: 500;
-  position: absolute;
-  width: 100%;
-  z-index: 5;
-
-  &:first-child {
-    padding-top: 0.8em;
-  }
-
-`
-const DropDownHeaderIcon = styled('div')<{ open: boolean }>`
-  position: absolute;
-  right: 16.48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.1s ease-in-out;
-
-  ${({ open }) => open === true && css`
-    transform: rotate(180deg);
-  `}
-`
-const SelectedOption = styled('p')`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #222222 !important;
-`
-
-export function ArrowIcon() {
-  return (
-    <svg width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.1736 6.64904L13.521 0.992188H0.826172L7.1736 6.64904Z" fill="#222222"/>
-    </svg>
-  )
-}
-
-interface SelectProps {
-    placeholder?: string
-    children?: any
-    onChange?: any
-    defaultValue?: any
-    loading?: boolean
-}
-
-export default function Select({ placeholder, defaultValue, children, onChange, loading }: SelectProps) {
-  const wrapperRef = useRef(null)
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-  const [selectedOption, setSelectedOption]= useState(null)
-  const [selectedOptionValue, setSelectedOptionValue] = useState<boolean>()
-
-  useEffect(() => {
-    function handleClickOutside(event: any) {
-      // @ts-ignore
-      if(wrapperRef.current && !wrapperRef.current.contains(event.target) && isOpen)
-        setIsOpen(false)
-    }
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    };
-  }, [wrapperRef, isOpen])
-
-
-  useEffect(() => {
-    let param = false;
-    children && children.length && children.forEach((child: any) => {
-      if (child.props.value == defaultValue) {
-        param = true;
-        setSelectedOption(child.props.label)
-        setSelectedOptionValue(child.props.value)
-      }
-    })
-    if(!param) {
-      setSelectedOption(null)
-      setSelectedOptionValue(false)
-    }
-  }, [children, defaultValue])
-
-  const toggle = () => setIsOpen(!isOpen)
-
-  const handleChange = (e: any) => {
-    onChange(e)
-    toggle()
-  }
-
-  return (
-    <div>
-      <DropDownContainer ref={wrapperRef}>
-        <EventOverlay onClick={toggle}></EventOverlay>
-        <DropDownHeader>
-          {loading ?
-            <p>Carregando dados...</p>
-            :
-            selectedOption ? <SelectedOption>{selectedOption}</SelectedOption> : <p>{placeholder}</p>
-          }
-          <DropDownHeaderIcon open={isOpen}>
-            <ArrowIcon />
-          </DropDownHeaderIcon>
-        </DropDownHeader>
-        {isOpen && (
-          <DropDownListContainer>
-            <DropDownList>
-              <div onClick={handleChange}>
-                <SelectContext.Provider value={{ selected: selectedOptionValue }}>
-                  {children}
-                </SelectContext.Provider>
-              </div>
-            </DropDownList>
-          </DropDownListContainer>
-        )}
-      </DropDownContainer>
-    </div>
-  );
-}

package/src/components/select/SelectContext.tsx

@@ -1,9 +0,0 @@
-// Create react context to share data between components
-
-import React from 'react'
-
-interface ContextProps {
-    selected?: boolean
-}
-
-export const SelectContext = React.createContext<ContextProps | null>(null)

package/src/components/select/SelectItem.tsx

@@ -1,63 +0,0 @@
-import React, { useState } from "react"
-import styled, { css } from "styled-components"
-import { SelectContext } from "./SelectContext"
-
-interface props {
-    selected: boolean
-    value: any
-    disabled?: boolean
-}
-
-const ListItem = styled("li")<props>`
-    list-style: none;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-    color: #000;
-    height: 38px;
-    margin: 0;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    ${props => props.disabled === true && css`
-        cursor: not-allowed;
-        background-color: #e5e5e5;
-        opacity: 0.3;
-    `}
-
-    ${props => props.selected === true && css`
-        background-color: #e5e5e5;
-        cursor: pointer;
-        opacity: 1;
-    `}
-
-    &:hover {
-        background-color: #e5e5e5;
-    }
-`;
-
-type valueEnum = string | number | boolean | null;
-
-interface SelectProps {
-    value?: valueEnum
-    label?: string
-    selected?: boolean
-    handleSelect?: (value: any) => void
-    disabled?: boolean
-}
-
-export default function SelectItem({ value, label, selected, handleSelect, disabled }: SelectProps) {
-    return (
-        <SelectContext.Consumer>
-            {({ selected }) => (
-                <ListItem disabled={disabled} selected={selected === value} value={value} onClick={handleSelect}>
-                    {label}
-                </ListItem>
-            )}
-        </SelectContext.Consumer>
-    );
-}

package/src/components/select/index.tsx

@@ -1,16 +0,0 @@
-import Select from "./Select"
-import SelectItem from  './SelectItem'
-
-export default function SelectFRST({placeholder, valueSelect, handleValueSelect, listItems}) {
-    return (
-        <Select placeholder={placeholder} defaultValue={valueSelect} onChange={(e) => handleValueSelect(e.target?.attributes?.value?.value)}>
-            {listItems.map((item, index) => (
-                <SelectItem
-                  label={item}
-                  value={item}
-                  key={index}
-                />
-              ))}
-        </Select>
-    )
-  }

package/src/components/select/select.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import SelectFRST from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Base/Select',
-    component: SelectFRST,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SelectFRST {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    placeholder: 'placeholder', 
-    valueSelect: 'primeiro', 
-    handleValueSelect: (e) => alert(e), 
-    listItems: ['primeiro', 'segundo', 'terceiro', 'quarto']
-}

package/src/components/speech-bubble/index.tsx

@@ -1,29 +0,0 @@
-import React, { useState } from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './speechBubbleStyles'
-import { ISpeehBubble } from './speechBubble';
-
-export default function SpeechBubble(props: ISpeehBubble) {
-    return (
-         <ThemeProvider theme={FRSTTheme}>
-            <Styles.SpeechBubbleWrapper
-                className={props.className}
-                height={props.height}
-                width={props.width}
-            >
-                <Styles.Flap 
-                    highlight={props.highlight} 
-                    flap={props.flap} 
-                /> 
-                <Styles.SpeechBubble 
-                    highlight={props.highlight}
-                    flap={props.flap} 
-                >
-                    { props.children }
-                </Styles.SpeechBubble>
-            </Styles.SpeechBubbleWrapper>
-         </ThemeProvider>  
-    )
-}

package/src/components/speech-bubble/speechBubble.d.ts

@@ -1,10 +0,0 @@
-import React from "react"
-
-interface ISpeehBubble{
-    children: any
-    height?: string
-    width?: string
-    flap?: string
-    className?: string,
-    highlight?: boolean
-}

package/src/components/speech-bubble/speechBubble.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import SpeechBubble from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/Speech Bubble',
-    component: SpeechBubble,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SpeechBubble {...args} />
-
-export const square = Template.bind({})
-square.args = {
-    height: '100px',
-    width: 'auto',
-    flap: 'left-top',
-    highlight: false,
-}