frst-components 0.20.1 → 0.20.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frst-components",
   "homepage": "http://FRST-Falconi.github.io/storybook.frstfalconi.com",
-  "version": "0.20.1",
+  "version": "0.20.2",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,9 +15,6 @@
   "files": [
     "dist",
     "public",
-    "src",
-    "storybook-static",
-    "tsconfig.json",
     "package.json"
   ],
   "dependencies": {

package/src/components/DS/loading/index.tsx

@@ -1,70 +0,0 @@
-import { FRSTTheme } from "../../../theme";
-import { ThemeProvider } from "styled-components";
-import * as Styles from './loadingStyle'
-import { useEffect, useState } from "react";
-import { Load } from "@shared/icons";
-
-type loadSizes = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' 
-type loadPosition = 'right' | 'bottom' | 'left' | 'top'
-interface ILoading {
-    /** 
-     * @prop {loadSizes} sizeLoading: extra-small: 16px | small: 20px | medium: 24px | large: 32px | extra-large: 40px
-     */
-    sizeLoading?: loadSizes
-    loadColor?: string
-    loadText?: string
-    loadTextColor?: string
-    /** 
-     * @prop {loadPosition} positionLoadingText: position of the load text: right, bottom, left or top
-     */
-    positionLoadingText?: loadPosition
-    style?: React.CSSProperties
-}
-
-export default function Loading ( props : ILoading) {
-    const [Size, setSize] = useState('24');
-    const [Color, setColor] = useState(props.loadColor ? props.loadColor : '');
-    const [PositionTextLoad, setPositionTextLoad] = useState(props.positionLoadingText ? props.positionLoadingText : 'bottom');
-    const [LoadText, setLoadText] = useState(props.loadText ? props.loadText : '');
-
-    useEffect(() => {
-        setLoadText(props.loadText)
-    }, [props.loadText]);
-
-    useEffect(() => {
-        setColor(props.loadColor)
-    }, [props.loadColor]);
-
-    useEffect(() => {
-        setPositionTextLoad(props.positionLoadingText)
-    }, [props.positionLoadingText]);
-
-    useEffect(() => {
-        if(props.sizeLoading === 'extra-small'){
-            setSize('16')
-        }else if(props.sizeLoading === 'small'){
-            setSize('20')
-        }else if(props.sizeLoading === 'medium'){
-            setSize('24')
-        }else if(props.sizeLoading === 'large'){
-            setSize('32')
-        }else if(props.sizeLoading === 'extra-large'){
-            setSize('40')
-        }else{
-            setSize('24')
-        }
-    }, [props.sizeLoading]);
-    
-    return(
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.container textPosition={PositionTextLoad} style={{...props.style}} >
-                <Styles.loader >
-                    <Load width={Size} height={Size} fill={Color !== '' && Color} />
-                </Styles.loader>
-                <Styles.loadText style={{color: props.loadTextColor ? props.loadTextColor : 'white'}}>
-                    {LoadText}
-                </Styles.loadText>
-            </Styles.container>
-        </ThemeProvider>
-    )
-}

package/src/components/DS/loading/loading.stories.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import Loading from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'DS/Loading',
-  component: Loading,
-  argTypes: {
-    sizeLoading: {
-      control: 'select',
-      options: ['extra-small', 'small', 'medium', 'large', 'extra-large']
-    },
-    positionLoadingText: {
-      control: 'select',
-      options: ['right', 'bottom', 'left', 'top']
-    }
-  }
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Loading {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  sizeLoading: 'medium',
-  loadColor: '',
-  loadText: 'Loading...',
-  loadTextColor: '',
-  positionLoadingText: 'right'
-}

package/src/components/DS/loading/loadingStyle.ts

@@ -1,40 +0,0 @@
-import styled, {css} from "styled-components"
-
-export const container = styled.div<{textPosition: string}>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: ${({textPosition}) => textPosition === 'left' ? 'row-reverse' 
-        : textPosition === 'right' ? 'row'
-        : textPosition === 'top' ? 'column-reverse'
-        : textPosition === 'bottom' ? 'column'
-        : null
-    };
-    position: relative;
-    width: auto;
-    gap: 8px;
-    padding: 16px;
-`
-
-export const loader = styled.div`
-    
-    svg {
-        animation: load 1.5s infinite linear;
-        
-        @keyframes load {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-    }
-`
-
-export const loadText = styled.p`
-    font-family: 'Inter';
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-`

package/src/components/DS/modal/index.stories.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import Modal from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'DS/Modal',
-  component: Modal
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args: any) => <Modal {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  open: true,
-  onClose: () => console.log('closed'),
-  onOpen: () => console.log('opened'),
-  children: <div>Modal Content</div>,
-  animation: 'BlowUp',
-  handleCloseOnIcon: () => {
-    console.log('custom close with handleCloseOnIcon')
-  },
-  showCloseButton: true
-}

package/src/components/DS/modal/index.tsx

@@ -1,100 +0,0 @@
-import React, { useEffect, useState, useRef, CSSProperties, ReactNode, MouseEvent } from 'react'
-
-import { ModalWrapper, ModalContent, ModalHeader, ModalCloseButton } from './styles'
-
-import { CloseIcon } from '@shared/icons'
-
-interface ModalProps {
-  children?: ReactNode
-  width?: string
-  headerContent?: any
-  open?: boolean
-  style?: CSSProperties
-  mobileFullPage?: boolean
-  showCloseButton?: boolean
-  showHeader?: boolean
-  onClose?: (event?: MouseEvent | any) => void
-  onOpen?: (event?: MouseEvent | any) => void
-  closeOnClickOutside?: boolean
-  animation?: 'BlowUp' | 'Fade' | 'SlideUp' | 'SlideDown'
-  handleCloseOnIcon?: () => void
-}
-
-export default function Modal({
-  children,
-  width,
-  headerContent,
-  open = false,
-  mobileFullPage = false,
-  showCloseButton = false,
-  showHeader = false,
-  style,
-  onClose,
-  onOpen,
-  closeOnClickOutside = true,
-  animation,
-  handleCloseOnIcon
-}: ModalProps): JSX.Element {
-  const ModalWrapperRef = useRef(null)
-  const ModalContentRef = useRef(null)
-  const AnimationType = animation.toLowerCase()
-  const [active, setActive] = useState<boolean>(false)
-
-  useEffect(() => {
-    function handleClickOutside(event: any) {
-      const ModalWreapperEl = ModalWrapperRef?.current
-      if (ModalWreapperEl === event.target && active) {
-        if (onClose) onClose(event)
-        if (closeOnClickOutside === true) setActive(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [ModalWrapperRef, active, closeOnClickOutside, onClose])
-
-  useEffect(() => {
-    if (open === true) {
-      document.body.style.overflow = 'hidden'
-      if (onOpen) onOpen()
-    } else {
-      document.body.style.overflow = 'auto'
-    }
-    setActive(open)
-  }, [onOpen, open])
-
-  const handleClose = (e: MouseEvent) => {
-    e.stopPropagation()
-    setActive(false)
-
-    if (onClose) onClose(e)
-  }
-
-  return (
-    <ModalWrapper open={active} ref={ModalWrapperRef}>
-      <ModalContent
-        style={style}
-        width={width}
-        mobileFullPage={mobileFullPage}
-        ref={ModalContentRef}
-        animation={AnimationType}
-      >
-        {showHeader === true ||
-          (showCloseButton === true && (
-            <ModalHeader>
-              {showCloseButton === true && (
-                <ModalCloseButton onClick={(e: MouseEvent) => handleClose(e)}>
-                  {headerContent && headerContent}
-                  <span onClick={(e: MouseEvent) => (handleCloseOnIcon ? handleCloseOnIcon() : handleClose(e))}>
-                    <CloseIcon />
-                  </span>
-                </ModalCloseButton>
-              )}
-            </ModalHeader>
-          ))}
-        {children && children}
-      </ModalContent>
-    </ModalWrapper>
-  )
-}

package/src/components/DS/modal/styles.ts

@@ -1,101 +0,0 @@
-import React from 'react'
-import styled, { keyframes } from 'styled-components'
-
-interface ModalProps {
-  open: boolean
-}
-
-export const ModalWrapper = styled.div<ModalProps>`
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.3);
-  overflow-y: auto;
-  display: none;
-
-  ${({ open }) => open && `
-    display: block;
-  `}
-`
-
-interface ModalContentProps {
-  width?: string
-  style?: React.CSSProperties
-  mobileFullPage?: boolean
-  animation: string
-}
-
-export const ModalContent = styled.div<ModalContentProps>`
-  width: 80%;
-  max-width: 528px;
-  padding: 24px;
-  margin: 1rem auto;
-  box-sizing: border-box;
-  margin-bottom: 100px;
-  background: #FFFFFF;
-  border: 1px solid #BDBDBD;
-  border-radius: 16px;
-  margin-top: 10%;
-  animation: ${({ animation }) => {
-    switch (animation) {
-      case 'blowup':
-        return BlowUpAnimation
-      case 'fade':
-        return FadeAnimation
-      case 'slideup':
-        return SlideUpAnimation
-      case 'slidedown':
-        return SlideDownAnimation
-      default:
-        return 'none'
-    }
-  }} 0.3s ease-in-out;
-
-  ${({ width }) => width && `
-    max-width: ${width};
-  `}
-
-  ${({ mobileFullPage }) => mobileFullPage === true && `
-    @media (max-width: 768px) {
-      margin: 0 !important;
-      width: 100%;
-      border-radius: 0 !important;
-      min-height: 100vh !important;
-    }
-  `}
-`
-
-const BlowUpAnimation = keyframes`
-  0% { transform: scale(0) }
-  100% { transform: scale(1) }
-`
-
-const FadeAnimation = keyframes`
-  0% { opacity: 0 }
-  100% { opacity: 1 }
-`
-
-const SlideUpAnimation = keyframes`
-  0% { transform: translateY(100%) }
-  100% { transform: translateY(0) }
-`
-
-const SlideDownAnimation = keyframes`
-  0% { transform: translateY(-100%) }
-  100% { transform: translateY(0) }
-`
-
-export const ModalHeader = styled.div`
-  position: relative;
-  height: 20px;
-`
-
-export const ModalCloseButton = styled.span`
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-`

package/src/components/DS/select/Select.tsx

@@ -1,101 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { SelectContext } from './SelectContext'
-import { FRSTTheme } from '../../../theme'
-import * as StylesSelect from './styles/StylesSelect'
-
-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
-  isError?: boolean
-  style?: React.CSSProperties
-}
-
-export default function Select({
-  placeholder,
-  defaultValue,
-  children,
-  onChange,
-  loading,
-  isError,
-  style
-}: 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 style={style}>
-      <StylesSelect.DropDownContainer ref={wrapperRef} error={isError} theme={FRSTTheme}>
-        <StylesSelect.EventOverlay onClick={toggle}></StylesSelect.EventOverlay>
-        <StylesSelect.DropDownHeader error={isError} theme={FRSTTheme}>
-          {loading ? (
-            <p>Carregando dados...</p>
-          ) : selectedOption ? (
-            <StylesSelect.SelectedOption>{selectedOption}</StylesSelect.SelectedOption>
-          ) : (
-            <p>{placeholder}</p>
-          )}
-          <StylesSelect.DropDownHeaderIcon open={isOpen}>
-            <ArrowIcon />
-          </StylesSelect.DropDownHeaderIcon>
-        </StylesSelect.DropDownHeader>
-        {isOpen && (
-          <StylesSelect.DropDownListContainer>
-            <StylesSelect.DropDownList>
-              <div onClick={handleChange}>
-                <SelectContext.Provider value={{ selected: selectedOptionValue }}>{children}</SelectContext.Provider>
-              </div>
-            </StylesSelect.DropDownList>
-          </StylesSelect.DropDownListContainer>
-        )}
-      </StylesSelect.DropDownContainer>
-    </div>
-  )
-}

package/src/components/DS/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/DS/select/SelectItem.tsx

@@ -1,69 +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;
-    margin-top: 4px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    white-space: normal;
-
-    ${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/DS/select/index.tsx

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

package/src/components/DS/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: 'DS/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']
-}