frst-components 0.20.0

package/publish.sh

@@ -0,0 +1,19 @@
+#! /bin/sh
+
+# setup for npm credentials
+echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
+
+
+if [ "$TAG_NEXT" == "true" ]; then
+  # if we want to publish a testing version
+  cd /opt/frst/app \
+    && npm install --unsafe-perm --no-optional \
+    && npm run build \
+    && npm publish --tag next
+else
+  # production publish, uses version in package.json
+  cd /opt/frst/app \
+    && npm install --unsafe-perm --no-optional \
+    && npm run build \
+    && npm publish
+fi

package/rollup.config.js

@@ -0,0 +1,15 @@
+import typescript from 'rollup-plugin-typescript2'
+import postcss from 'rollup-plugin-postcss'
+import image from 'rollup-plugin-img'
+import pkg from './package.json'
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  input: './index.tsx',
+  output: {
+    file: pkg.main,
+    format: 'cjs'
+  },
+  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+  plugins: [typescript(), postcss({ plugins: [] }), image({ limit: 1000000 })]
+}

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

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

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

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

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

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

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

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

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

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

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

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