frst-components 0.20.1 → 0.20.3

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']
-}

package/src/components/DS/select/styles/StylesSelect.tsx

@@ -1,100 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface PropsSelect {
-  error?: boolean
-}
-
-export const DropDownContainer = styled.div<PropsSelect>`
-  width: 100%;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  position: relative;
-  ${(props) =>
-    props.error &&
-    css`
-      background: ${({ theme }) => theme.colors.inputError};
-      border: 1px solid ${({ theme }) => theme.colors.messageError1};
-    `}
-`
-export const EventOverlay = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: transparent;
-  cursor: pointer;
-  z-index: 2;
-`
-export const DropDownHeader = styled.div<PropsSelect>`
-  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;
-  }
-  ${(props) =>
-    props.error &&
-    css`
-      background: ${({ theme }) => theme.colors.inputError};
-      p {
-        color: ${({ theme }) => theme.colors.linkError};
-      }
-    `}
-`
-export const DropDownListContainer = styled('div')``
-
-export 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;
-  }
-`
-export 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);
-    `}
-`
-export const SelectedOption = styled('p')`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #222222 !important;
-`

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Tooltip from './index';
-import { TooltipProps } from './types'
-
-export default {
-  title: 'DS/Tooltip',
-  component: Tooltip,
-} as Meta;
-
-const Template: Story<TooltipProps> = (args) => (
-  <Tooltip
-    content="Este desafio consta como verificado pois o objetivo dele está alinhado às metas da empresa a qual ele pertence"
-    direction="bottom"
-    trigger='click'
-    width='361px'
-    height='54px'
-    style={{ top: '10px' }}
-  >
-    <button>Hover me</button>
-  </Tooltip>
-);
-
-export const Default = Template.bind({});

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

@@ -1,81 +0,0 @@
-import { useState, useRef, useEffect } from "react"
-import { TooltipWrapper, TooltipGhost, TooltipTip } from './styles'
-import { TooltipProps } from './types'
-
-function Tooltip({
-  content,
-  direction,
-  children,
-  trigger = 'hover',
-  delay = 400,
-  style,
-  className,
-  width,
-  height,
-  onShow,
-  onHide
-}: TooltipProps ): JSX.Element {
-  let shpwTimeout: any
-  let hideTimeout: any
-  const [active, setActive] = useState(false)
-  const [renderHeight, setRenderHeight] = useState('51px')
-  const ref = useRef(null)
-
-  useEffect(() => {
-    if(!ref.current || !active) return
-
-    if(height) setRenderHeight(height)
-    if(renderHeight === '51px') setRenderHeight(ref.current.clientHeight + 'px')
-  }, [active])
-
-  const showTip = () => {
-    const timeoutDelay = trigger === 'click' ? 0 : delay
-
-    shpwTimeout = setTimeout(() => {
-      setActive(true)
-      if(onShow) onShow({ active: true })
-    }, timeoutDelay)
-  }
-
-  const hideTip = () => {
-    clearInterval(shpwTimeout)
-    clearInterval(hideTimeout)
-
-    hideTimeout = setTimeout(() => {
-      ref.current = null
-      setRenderHeight('51px')
-      setActive(false)
-      if(onHide) onHide({ active: false })
-    }, 1000)
-  }
-
-  return (
-    <TooltipWrapper
-      onMouseEnter={trigger === 'hover' ? showTip : undefined}
-      onMouseLeave={hideTip}
-      onClick={trigger === 'click' ? showTip : undefined}
-    >
-      {children}
-      {active && (
-        <TooltipGhost
-          direction={direction || 'top'}
-          className={className}
-          width={width || '100px'}
-          height={height ? height : renderHeight || '100px'}
-          ref={ref}
-        >
-          <TooltipTip
-            direction={direction || 'top'}
-            style={style}
-            width={width || '100px'}
-            height={height ? height : renderHeight || '100px'}
-          >
-            {content}
-          </TooltipTip>
-        </TooltipGhost>
-      )}
-    </TooltipWrapper>
-  )
-}
-
-export default Tooltip

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

@@ -1,155 +0,0 @@
-import styled from 'styled-components'
-
-export const TooltipWrapper = styled.div`
-  display: inline-flex;
-  position: relative;
-`;
-
-export const TooltipTip = styled.div<{
-  direction: string,
-  width: string,
-  height: string
-}>`
-  background: #FFF;
-  border-radius: 4px;
-  border: 1px solid #BDBDBD;
-  font-family: 'PT Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 18px;
-  color: #757575;
-  box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.2);
-  padding: 6px;
-  position: relative;
-
-  ${({ width }) => width && `width: ${width};`}
-  ${({ height }) => height && `height: ${height};`}
-
-  &::after {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: 5px;
-    margin-left: calc(5px * -1);
-  }
-
-  &::before {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: 6px;
-    margin-left: calc(6px * -1);
-  }
-
-  ${({ direction }) => {
-    switch (direction) {
-      case 'top':
-        return `
-          &::before,
-          &::after {
-            top: 100%;
-            border-top-color: #BDBDBD
-          }
-
-          &::after {
-            border-top-color: #FFFFFF;
-          }
-        `
-      case 'right':
-        return `
-          &::before,
-          &::after {
-            left: calc(6px * -1);
-            top: 50%;
-            transform: translateX(0) translateY(-50%);
-            border-right-color: #BDBDBD;
-          }
-
-          &::after {
-            border-right-color: #FFFFFF;
-          }
-        `
-      case 'bottom':
-        return `
-          &::before,
-          &::after {
-            bottom: 100%;
-            border-bottom-color: #BDBDBD;
-          }
-
-          &::after {
-            border-bottom-color: #FFFFFF;
-          }
-        `
-
-      case 'left':
-        return `
-          &::before,
-          &::after {
-            left: auto;
-            right: calc(6px * -2);
-            top: 50%;
-            transform: translateX(0) translateY(-50%);
-            border-left-color: #BDBDBD;
-          }
-
-          &::after {
-            border-left-color: #FFFFFF;
-          }
-        `
-      default:
-        return ''
-    }
-  }}
-
-`
-
-export const TooltipGhost = styled.div<{
-  direction: string,
-  width: string,
-  height: string
-}>`
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
-
-
-  ${({ direction, height }) => {
-    switch (direction) {
-      case 'top':
-        return `
-          top: calc(${height} * -1);
-        `
-      case 'right':
-        return `
-          left: calc(100% + 5px);
-          top: 50%;
-          transform: translateX(0) translateY(-50%);
-        `
-      case 'bottom':
-        return `
-          bottom: calc(${height} * -1);
-        `
-
-      case 'left':
-        return `
-          left: auto;
-          right: calc(100% + 5px);
-          top: 50%;
-          transform: translateX(0) translateY(-50%);
-        `
-      default:
-        return ''
-    }
-  }}
-`;

package/src/components/DS/tooltip/types.d.ts

@@ -1,21 +0,0 @@
-export type TooltipProps = {
-  trigger?: 'hover' | 'click'
-  children?: React.ReactNode
-  content?: string | React.ReactNode | JSX.Element
-  delay?: number
-  style?: React.CSSProperties
-  className?: string
-  width?: string
-  height?: string
-  onShow?: (event: any) => void
-  onHide?: (event: any) => void
-  direction?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "top-right"
-    | "top-left"
-    | "bottom-right"
-    | "bottom-left"
-}

package/src/components/EBR/buttons-group/index.d.ts

@@ -1,4 +0,0 @@
-export interface IButtonGroup {
-  children: any
-  active?: boolean
-}

package/src/components/EBR/buttons-group/index.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Button from '../../buttons'
-import ButtonGroup from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/ButtonGroup',
-    component: ButtonGroup,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ButtonGroup {...args} />
-
-export const vertical = Template.bind({})
-vertical.args = {
-    active: '1',
-    children: [
-        <Button value="1" label="Setembro/22" disabled={false} handleClick={() => { alert('Click') }} />,
-        <Button value="2" label="Junho/22" disabled={false} handleClick={() => { alert('Click') }} />,
-        <Button value="3" label="Março/22" disabled={false} handleClick={() => { alert('Click') }} />
-    ]
-}

package/src/components/EBR/buttons-group/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import {
-  IButtonGroup
-} from './index.d'
-
-import {
-  ButtonGroupWrapper
-} from './styles'
-
-export default function ButtonGroup({
-  children,
-  active
-}: IButtonGroup) {
-
-  const ButtonGroupProps = {
-    type: 'group',
-    variant: 'primary'
-  }
-
-  return (
-    <ButtonGroupWrapper className="buttons-group">
-      {React.Children.map(children, (child) =>
-        React.cloneElement(child, {
-          ...ButtonGroupProps,
-          active: child.props.value === active,
-          length: children.length
-        })
-      )}
-    </ButtonGroupWrapper>
-  )
-}

package/src/components/EBR/buttons-group/styles.ts

@@ -1,7 +0,0 @@
-import styled from 'styled-components'
-
-export const ButtonGroupWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`

package/src/components/EBR/group-statistics/groupStatistics.d.ts

@@ -1,6 +0,0 @@
-export interface IGroupStatistics {
-    objectStatistics: any,
-    styles?: any,
-    loading?: boolean,
-    hasShadow?: boolean,
-}

package/src/components/EBR/group-statistics/groupStatistics.stories.tsx

@@ -1,89 +0,0 @@
-import React from 'react'
-
-import GroupStatistics from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/GroupStatistics',
-    component: GroupStatistics,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <GroupStatistics {...args} />
-
-
-export const eightItems = Template.bind({})
-eightItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-
-export const sevenItems = Template.bind({})
-sevenItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-export const sixItems = Template.bind({})
-sixItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-export const fiveItems = Template.bind({})
-fiveItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '328', description: 'Participantes' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-export const fourItems = Template.bind({})
-fourItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}