frst-components 0.20.0 → 0.20.2

package/src/components/accordion-tabs/index.tsx

@@ -1,77 +0,0 @@
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import { IAccordionTabs } from './accordionTabs'
-import { TrashIcon, DropdownIcon } from '@shared/icons'
-
-import { WrapperHeaderTabs, TitleAccordion, DropIcon,
-    ContainerTitleTabs, ContainerCleanAction, TextClean,
-    TitleTabWrapper, TextTitleTab, TextTotalTab, WrapperContent,
-    TitleCurrentTabOpened } from './accordionTabsStyles'
-import React,{ useLayoutEffect, useState } from 'react'
-
-export default function AccordionTabs({ 
-    titleAccordion, typeAccordion, typeButtonTab, titleTabs, 
-    handleActiveTab, activeTabID, hasCleanButton, handleActionClean,
-    textCleanButton, hasCounterTab, children, style }: IAccordionTabs) {
-
-    useLayoutEffect(() => {
-        const scrollContainer = document.getElementById("scrollTabsAccordion");
-
-        scrollContainer.addEventListener("wheel", (evt) => {
-            evt.preventDefault();
-            scrollContainer.scrollLeft += evt.deltaY;
-        });
-    }, []);
-    
-    const getCurrentTabOpened = () => {
-        let nameTab = titleTabs.find((element: any) => element.id == activeTabID)
-
-        if(nameTab && nameTab.description) return nameTab.description;
-        else if(nameTab && nameTab.title) return nameTab.title;
-    }
-
-    const renderTitles = (item: any) => {
-        let isOpened = item.id == activeTabID;
-
-        let TabComponent = 
-            <TitleTabWrapper typeButton={typeButtonTab} status={isOpened}  onClick={() => handleActiveTab(item.id)} key={item.id}>
-                <TextTitleTab> { item.title } </TextTitleTab>
-                { hasCounterTab && item.totalCounter > 0 &&
-                 <TextTotalTab> ({item.totalCounter}) </TextTotalTab> }
-                <DropIcon status={isOpened}>
-                    <DropdownIcon fill={FRSTTheme['colors'].linkOnfocus}/> 
-                </DropIcon>
-            </TitleTabWrapper>
-        
-        return TabComponent;
-    }
-    
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <div style={{ width:'100%', ...style}}>
-                { titleAccordion && <TitleAccordion> { titleAccordion } </TitleAccordion> }
-                
-                { typeAccordion == 'horizontal' ? (
-                    <WrapperHeaderTabs>
-                        <ContainerTitleTabs id="scrollTabsAccordion">
-                            { titleTabs.map(renderTitles) }
-                        </ContainerTitleTabs>
-                        
-                        { hasCleanButton && 
-                            <ContainerCleanAction onClick={() => handleActionClean('limpar') } >
-                                <TrashIcon width='14px' height='17px'/>
-                                <TextClean> { textCleanButton } </TextClean>
-                            </ContainerCleanAction>  }
-                    </WrapperHeaderTabs>
-                ) : null }
-            </div> 
-            <WrapperContent status={activeTabID != '-1'}>
-                <div style={{ width:'100%', ...style}}>
-                    { getCurrentTabOpened() && <TitleCurrentTabOpened> { getCurrentTabOpened() } </TitleCurrentTabOpened>}
-                    { children }
-                </div>
-            </WrapperContent>
-        </ThemeProvider>
-    )
-}

package/src/components/audio-player/audioPlayer.stories.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import AudioPlayer from './index'
-import Royalty from './Royalty.mp3'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'base/AudioPlayer',
-    component: AudioPlayer,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <AudioPlayer {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
-    startAt: 90,
-    coverImage: 'https://i.gyazo.com/002fc9811582004a947a954e5c83d784.png',
-    title: 'T4:e02 - Human Made: Coragem, Criatividade e Resiliência',
-    description: 'FIRST THINGS FRST - Gente que transforma o futuro',
-    date: '10/05/2023',
-    volume: 0.7,
-    onProgress: (e) => console.log('onProgress: ', e),
-    onEnded: (e) => console.log('onEnded: ', 'Fim'),
-    style: {width: 814},
-}
-
-export const SemCapa = Template.bind({})
-SemCapa.args = {
-    audio: Royalty,
-    startAt: 90,
-    title: 'T4:e02 - Human Made: Coragem, Criatividade e Resiliência',
-    description: 'FIRST THINGS FRST - Gente que transforma o futuro',
-    date: '10/05/2023',
-    volume: 0.7,
-    onProgress: (e) => console.log('onProgress: ', e),
-    onEnded: (e) => console.log('onEnded: ', 'Fim'),
-    style: {width: 814},
-}

package/src/components/audio-player/audioPlayerStyles.ts

@@ -1,314 +0,0 @@
-import styled from "styled-components";
-
-
-export const container = styled.div`
-    display: flex;
-    position: relative;
-    gap: 20px;
-    height: 234px;
-    padding: 20px;
-    border-radius: 16px;
-    border: 1px solid ${({theme}) => theme.colors.borderPrimary};
-    background-color: #E2E8F0;
-    z-index: 1;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-`
-
-export const containerMask = styled.div`
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.5);
-    backdrop-filter: blur(8px);
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 16px;
-    z-index: 1;
-`
-
-export const thumb = styled.div`
-    border-radius: 8px;
-    width: 194px;
-    max-width: 194px;
-    height: 194px;
-    z-index: 2;
-    /* background-color: red; */
-
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-`
-
-export const content = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    z-index: 2;
-`
-
-export const title = styled.p`
-    font-family: 'Work Sans';
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 21px;
-    color: #222222;
-
-    margin-top: 12px;
-`
-
-export const description = styled.p`
-    font-family: 'PT Sans';
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 18px;
-    color: #222222;   
-`
-
-export const date = styled.p`
-    font-family: 'PT Sans';
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #222222;
-`
-
-export const controls = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    gap: 24px;
-    width: 100%;
-    margin-top: 24px;
-`
-
-export const navigationButton = styled.button`
-    border: none;
-    background: none;
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-
-    &:hover{
-        color: ${({theme}) => theme.colors.primary1};
-    }
-
-    &:active{
-        color: ${({theme}) => theme.colors.primary3};
-    }
-`
-
-export const playButton = styled.button`
-    border: none;
-    background: none;
-    color: ${({theme}) => theme.colors.primary2};
-    &:hover{
-        color: ${({theme}) => theme.colors.primary1};
-    }
-
-    &:active{
-        color: ${({theme}) => theme.colors.primary3};
-    }
-`
-
-export const volumeControl = styled.div`
-    position: absolute;
-    right: 0;
-`
-
-export const volume = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-`
-
-export const volumeBar = styled.input<{currentInputValue: number}>`
-    appearance: none;
-    -webkit-appearance: none;
-    display: block;
-    border-radius: 1px;
-    box-sizing: border-box;
-    width: 32px;
-    height: 2px;
-    margin: 0px;
-    background: ${({theme}) => theme.colors.neutralsGrey1};
-    background-image: linear-gradient(#ee4c15, #ee4c15);
-    background-size: ${({currentInputValue}) => currentInputValue}% 100%;
-    background-repeat: no-repeat;
-
-    &::-webkit-slider-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-    }
-
-    &::-ms-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-    }
-
-    &::-moz-range-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-    }
-
-    &:hover::-webkit-slider-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-        width: 5px;
-        height: 5px;
-        border: none;
-        border-radius: 50%;
-        background: ${({theme}) => theme.colors.primary2};
-    }
-
-    &:hover::-moz-range-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-        width: 5px;
-        height: 5px;
-        border: none;
-        border-radius: 50%;
-        background: ${({theme}) => theme.colors.primary2};
-    }
-
-    &:hover::-ms-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-        width: 5px;
-        height: 5px;
-        border: none;
-        border-radius: 50%;
-        background: ${({theme}) => theme.colors.primary2};
-    }
-
-    &::-webkit-slider-runnable-track{
-        -webkit-appearance: none;
-        appearance: none;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-    }
-
-    &::-moz-range-track{
-        -webkit-appearance: none;
-        appearance: none;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-    }
-
-    &::-ms-track{
-        -webkit-appearance: none;
-        appearance: none;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-    }
-
-`
-
-export const audioTimeline = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-`
-
-export const timeText = styled.p`
-    font-family: 'PT Sans';
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 13px;
-    color: #222222;
-
-`
-
-export const timeline = styled.input<{currentInputValue: number}>`
-    appearance: none;
-    -webkit-appearance: none;
-    display: block;
-    border-radius: 2px;
-    box-sizing: border-box;
-    width: 100%;
-    height: 4px;
-    margin: 0px;
-    background: ${({theme}) => theme.colors.neutralsGrey1};
-    background-image: linear-gradient(#ee4c15, #ee4c15);
-    background-size: ${({currentInputValue}) => currentInputValue}% 100%;
-    background-repeat: no-repeat;
-
-    &::-webkit-slider-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-    }
-
-    &::-ms-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-    }
-
-    &::-moz-range-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-    }
-
-    &:hover::-webkit-slider-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-        width: 10px;
-        height: 10px;
-        border: none;
-        border-radius: 50%;
-        background: ${({theme}) => theme.colors.primary2};
-    }
-
-    &:hover::-moz-range-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-        width: 10px;
-        height: 10px;
-        border: none;
-        border-radius: 50%;
-        background: ${({theme}) => theme.colors.primary2};
-    }
-
-    &:hover::-ms-thumb{
-        -webkit-appearance: none;
-        appearance: none;
-        width: 10px;
-        height: 10px;
-        border: none;
-        border-radius: 50%;
-        background: ${({theme}) => theme.colors.primary2};
-    }
-
-    &::-webkit-slider-runnable-track{
-        -webkit-appearance: none;
-        appearance: none;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-    }
-
-    &::-moz-range-track{
-        -webkit-appearance: none;
-        appearance: none;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-    }
-
-    &::-ms-track{
-        -webkit-appearance: none;
-        appearance: none;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-    }
-
-`

package/src/components/audio-player/index.tsx

@@ -1,209 +0,0 @@
-import { useEffect, useState } from 'react';
-import { FRSTTheme } from '../../theme';
-import { ThemeProvider } from 'styled-components';
-import * as Styles from './audioPlayerStyles'
-import useSound from 'use-sound'
-import { Back15, Foward15, PlayIcon, PauseIcon, VolumeIcon, MuteIcon } from '@shared/icons';
-
-interface IAudioPlayer {
-    audio: any
-    /**
-     * @prop {number} startAt: o tempo em que o audio deve começar (em segundos)
-    */
-    startAt ?: number
-    coverImage ?: string
-    title ?: string
-    description ?: string
-    date ?: string
-    /**
-     * @prop {number} volume: valor do volume (minimo 0 - máximo 1)
-    */
-    volume ?: number
-    onProgress ?: (data) => void
-    onEnded ?: () => void
-    style ?: React.CSSProperties
-}
-
-export default function AudioPlayer ( props : IAudioPlayer ) {
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [CurrentTimeAudio, setCurrentTimeAudio] = useState();
-    const [time, setTime] = useState({
-        min: 0,
-        sec: 0
-    });
-    const [currTime, setCurrTime] = useState({
-        min: 0,
-        sec: 0
-    });
-    const [seconds, setSeconds] = useState(0);
-    const [audioVolume, setAudioVolume] = useState(props.volume ? props.volume : 0.5);
-    const [play, { pause, duration, sound }] = useSound(props.audio, {volume : audioVolume, 
-        onend : () => {
-            console.log("Passou aqui 3")
-            setIsPlaying(false)
-            props.onEnded()
-        }})
-    
-    //porcentagem percorrida da musica
-    const [percentagePlaytime, setPercentagePlaytime] = useState(0);
-    const defaultThumb = 'https://i.gyazo.com/f201e5ef302347108c31a2129104adc1.png'
-
-    useEffect(() => {
-        setAudioVolume(props.volume)
-    }, [props.volume]);
-
-    useEffect(() => {
-        console.log('isPlaying', isPlaying)
-    }, [isPlaying]);
-
-    useEffect(() => {
-        if (props.onProgress) {
-            console.log(isPlaying)
-            if (isPlaying) {
-                props.onProgress({
-                    loadedSeconds: duration / 1000,
-                    playedSeconds: sound.seek([])
-                })
-            }
-        }
-    }, [seconds]);
-    
-    useEffect(() => {
-        if (duration) {
-            const sec = duration / 1000;
-            const min = Math.floor(sec / 60);
-            const secRemain = Math.floor(sec % 60);
-            setTime({
-                min: min,
-                sec: secRemain
-            });
-        }
-        
-        const interval = setInterval(() => {
-            if (sound) {
-                if(!isPlaying && props.startAt && sound.seek([]) === 0){
-                    setSeconds(props.startAt)
-                    sound.seek([props.startAt])
-                }
-                setSeconds(sound.seek([]));
-                const min = Math.floor(sound.seek([]) / 60);
-                const sec = Math.floor(sound.seek([]) % 60);
-
-                setCurrTime({
-                    min,
-                    sec
-                });
-
-
-                setPercentagePlaytime(calcCurrentInputPercentage(0, duration/1000, sound.seek([])))
-            }
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [sound]);
-
-    const playingButton = () => {
-        if (isPlaying) {
-            console.log("Passou aqui")
-            setIsPlaying(false);
-            pause();
-        } else {
-            console.log("Passou aqui 2")
-            setIsPlaying(true);
-            play();
-        }
-    };
-
-    // função para calcular a porcentagem que foi percorrida a musica, para fazer o acompanhamento da barra
-    const calcCurrentInputPercentage = (valorMin, valorMax, valorAtual) => {
-        
-        const min = valorMin
-        const max = valorMax
-        const val = valorAtual
-        let result = (val - min) * 100 / (max - min)
-        return result
-    }
-
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.container style={{...props.style, backgroundImage: props.coverImage ? `url(${props.coverImage})` : ''}} >
-                <Styles.containerMask></Styles.containerMask>
-                <Styles.thumb style={{...props.style, backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})`}}/>
-                <Styles.content style={{width: '100%'}}>
-                    <Styles.title> {props.title} </Styles.title>
-                    <Styles.description> {props.description} </Styles.description>
-                    <Styles.date> {props.date} </Styles.date>
-                    <Styles.controls>
-                        <Styles.navigationButton onClick={ () => {
-                            sound.seek([seconds ? seconds - 15 : 0])
-                        }} >
-                            <Back15 fill='currentColor' />
-                        </Styles.navigationButton>
-                        {!isPlaying ?
-                            <Styles.playButton onClick={playingButton}>
-                                <PlayIcon customColor_1='currentColor' />
-                            </Styles.playButton>
-                            :
-                            <Styles.playButton onClick={playingButton}>
-                                <PauseIcon customColor_1='currentColor' />
-                            </Styles.playButton>
-                        }
-                        <Styles.navigationButton onClick={ () => {
-                            sound.seek([seconds ? seconds + 15 : 15])
-                        }}>
-                            <Foward15 fill='currentColor' />
-                        </Styles.navigationButton>
-                        <Styles.volumeControl>
-                            {audioVolume === 0 ?
-                                <Styles.volume onClick={() => {
-                                    setAudioVolume(0.1)
-                                }}>
-                                    <MuteIcon />
-                                </Styles.volume>
-                                :
-                                <Styles.volume>
-                                    <div onClick={() => {
-                                        setAudioVolume(0)
-                                    }}>
-                                        <VolumeIcon />
-                                    </div>
-                                    <Styles.volumeBar
-                                        type='range'
-                                        min='0'
-                                        max='1'
-                                        value = {audioVolume}
-                                        className='volumeBar'
-                                        step='0.1'
-                                        onChange={(e) => {
-                                            setAudioVolume(Number(e.target.value))
-                                        }} 
-                                        currentInputValue={calcCurrentInputPercentage(0, 1, audioVolume)}
-                                    />
-                                </Styles.volume>
-                            }
-                        </Styles.volumeControl>
-                    </Styles.controls>
-                    <Styles.audioTimeline>
-                            <Styles.timeText>
-                                {currTime.min.toString().padStart(2, '0')}:{currTime.sec.toString().padStart(2, '0')}
-                            </Styles.timeText>
-                            <Styles.timeline
-                                type="range"
-                                min="0"
-                                max={duration / 1000}
-                                value={seconds}
-                                className="timeline"
-                                onChange={(e) => {
-                                    sound.seek([e.target.value]);
-                                }}
-                                currentInputValue={percentagePlaytime}
-                            />
-                            <Styles.timeText>
-                                {time.min.toString().padStart(2, '0')}:{time.sec.toString().padStart(2, '0')}
-                            </Styles.timeText>
-                    </Styles.audioTimeline>                    
-                </Styles.content>
-            </Styles.container>
-        </ThemeProvider>
-    )
-}

package/src/components/avatar/avatar.d.ts

@@ -1,8 +0,0 @@
-import React from "react"
-export interface IAvatar {
-    size?: string,
-    src?: any,
-    alt?: string,
-    className?: string,
-    disabled?: boolean,  
-}

package/src/components/avatar/avatar.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import Avatar from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Base/Avatar',
-    component: Avatar,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Avatar {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    size: '120px',
-    src: 'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg',
-    alt: 'Alt example',
-    disabled: false,
-    handleAvatar: (e) => console.log(e)
-}

package/src/components/avatar/avatarStyles.ts

@@ -1,23 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-export const AvatarImg = styled.img<AvatarI>`
-    width: ${props => props.size || '120px'};
-    height: ${props => props.size || '120px'};
-    border-radius: 50%;
-    object-fit: cover;
-
-    ${({ disabled }) => disabled === true && `
-        filter: grayscale(100%);
-    `}
-`
-
-export const AvatarWrapper = styled.div<AvatarI>`
-    width: ${props => props.size || '120px'};
-    height: ${props => props.size || '120px'};
-`