frst-components 0.20.1 → 0.20.3

package/src/components/checkmark/checkmarkStyles.ts

@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-
-interface ISubtitle {
-    disabled?: boolean,
-}
-
-export const ButtonCheckmark = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-    width: fit-content;
-`;
-
-export const Subtitle = styled.span<ISubtitle>`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 16px;
-    display: flex;
-    align-items: center;
-
-    margin-top: 8px;
-
-    color: ${(props:any)  => props.disabled ? '#BDBDBD' : '#222222'};
-`

package/src/components/checkmark/index.tsx

@@ -1,61 +0,0 @@
-import React,{useEffect, useState} from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './checkmarkStyles'
-import { ICheckmark } from './checkmark'
-import { CheckInCicle, CloseInCicle } from '@shared/icons'
-
-export default function Checkmark({ type, subtitle, active, handleClick, className, disabled, styles }: ICheckmark) {
-    const [ colorsIcon, setColorsIcon ] = useState({fill:'#fff', stroke:'#2CA92A', customColor_1:'#2CA92A'});
-
-    useEffect(() => {
-        (type == 'checked') ?
-        (active ?
-            setColorsIcon({fill:'#fff', stroke:'#2CA92A', customColor_1:'#2CA92A'}) :
-            setColorsIcon({fill:'#2CA92A', stroke:'#2CA92A', customColor_1:''}))
-        :
-        ( active ?
-            setColorsIcon({fill:'#FFF', stroke:'#FF0000', customColor_1:'#FF0000'}) :
-            setColorsIcon({fill:'#FF0000', stroke:'#FF0000', customColor_1:''}))
-        
-        {disabled &&
-            setColorsIcon({fill:'#BDBDBD', stroke:'#BDBDBD', customColor_1:''})
-        }
-    }, [active, type, disabled]);
-
-
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <div style={{...styles}} className={className} >
-                { type == 'checked' ?
-                    <>
-                        <Styles.ButtonCheckmark
-                                onClick={ handleClick } 
-                        >
-                                <CheckInCicle {...colorsIcon} />
-                                <Styles.Subtitle disabled={disabled}>
-                                    { subtitle }
-                                </Styles.Subtitle>
-                        </Styles.ButtonCheckmark>
-                    </> 
-                    :
-                    <>                
-                        {
-                            type == 'unchecked' &&
-                            <Styles.ButtonCheckmark
-                                    onClick={ handleClick } 
-                            >
-                                <CloseInCicle {...colorsIcon}/>
-                                <Styles.Subtitle disabled={disabled}>
-                                    { subtitle }
-                                </Styles.Subtitle>
-                            </Styles.ButtonCheckmark>
-                        }
-                </>
-                }
-            </div>
-        </ThemeProvider>
-    )
-}

package/src/components/commentary-box/commentaryBox.d.ts

@@ -1,41 +0,0 @@
-import React from "react"
-
-interface ICommentaryBox{
-    name: string
-    className: string
-    styles: any
-    position: string
-    value: string
-    date: string
-    detectLinks?: boolean
-    isMe?: boolean
-    isAuthor?: boolean
-    actionLike?: () => void
-    isLiked?: boolean
-    totalLikes?: number
-    hasAnswer?: boolean
-    actionAnswer?: () => void
-    actionDeleteComment?: () => void
-    actionEditComment?: () => void
-    actionMakePrivate?: () => void
-    actionUpdateValue?: (e:string) => void
-    onChange: any
-    idTextComment?: string
-    wasEdited?: boolean
-    hasDropdown?: boolean
-    textSaveButton ?: string
-    textSaveButtonMobile ?: string
-    textCancelButton ?: string
-    textYou?: string
-    textPrivateComment?: string
-    textEdited?: string
-    textLiked?: string
-    textUnliked?: string
-    textAnswer?: string
-    textMakePrivate?: string
-    textMakePublic?: string
-    textEditComment?: string
-    textDeleteComment?: string
-    isPrivateMe?: boolean
-    isPrivateAuthor?: boolean
-}

package/src/components/commentary-box/commentaryBox.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-
-import CommentaryBox from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/Commentary Box',
-    component: CommentaryBox,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <CommentaryBox {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    name: 'Nome Segundo Nome Sobrenome',
-    position: "Estudante/Universitário(a) de Tecnologia de Informação",
-    date: "1 dia atrás",
-    value: "What is Lorem Ipsum? \n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. https://frstfalconi.com/",
-
-    isMe: true,
-    isAuthor: true,
-    detectLinks: true,
-    wasEdited: true,   
-    hasAnswer: true, 
-    hasDropdown: true,
-    isPrivateAuthor: false,
-    isPrivateMe: false,
-    isLiked: true,
-    totalLikes: 5,
-
-    actionLike:(e : any) => { alert("Curtir") },
-    actionAnswer: (e : any) => { alert("Responder") },
-    onChange:(e : any) => { alert("onChange") },
-    actionEditComment:(e : any) => { alert("editComment") },
-    actionDeleteComment:(e : any) => { alert("deleteComment") },
-    actionMakePrivate:(e : any) => { alert("makePrivate") },
-    actionUpdateValue:(e : any) => { alert("updateValue: " + e) },
-
-    styles: { margin: '0 0 0 28px'},
-    textYou: 'Você',
-    textPrivateComment: 'Comentário Privado',
-    textEdited: 'editado',
-    textLiked: 'Curtir',
-    textUnliked: 'Descurtir',
-    textAnswer: 'Responder',
-    textMakePrivate: 'Tornar Privado',
-    textMakePublic: 'Tornar Público',
-    textEditComment: 'Editar Comentário',
-    textDeleteComment: 'Excluir Comentário',
-    textSaveButton: 'Save changes',
-    textSaveButtonMobile: 'Save',
-    textCancelButton: 'Cancel',
-
-    className: null,
-    idTextComment: '',
-}

package/src/components/commentary-box/commentaryBox.utils.ts

@@ -1,31 +0,0 @@
-import React from "react"
-
-interface IUtilsConvertStringLink {
-    value: string
-}
-
-export function buildStringWithLinkHTML({value}: IUtilsConvertStringLink) {
-    let text = value
-    var urlRegex = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig
-    return text = text.replace(urlRegex, function(url) {
-        return `<a href="${url}" target="_blank" style="color: #00f; text-decoration: underline">${url}</a>`
-    })
-}
-
-export function randID() {
-    return Math.random()
-        .toString(36)
-        .substr(2, 9);
-};
-
-export function buildShortName(name) {
-    const nome = name.replace(/\s+/gi, ' ').trim();    
-
-    var array_nome = nome.split(' ');
-
-    if(array_nome.length > 2){
-        return `${array_nome[0]} ${array_nome[array_nome.length-1]}`;
-    }else{
-        return name;
-    }
-}

package/src/components/commentary-box/commentaryBoxStyles.ts

@@ -1,271 +0,0 @@
-import { style } from '@mui/system'
-import styled from 'styled-components'
-
-interface ICommentaryBox {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-    isVisible?: boolean,
-    isLastItem?: boolean,
-    isMe?: boolean,
-}
-
-export const HeaderWrapper = styled.div`
-    display: flex;
-    margin-top: 14px;
-    margin-left: 14px;
-    margin-right: 14px;
-
-    min-height: 40px;
-    flex-direction: row;
-    max-width: 100%;
-`
-
-export const IdentificationWrapper = styled.div`
-    flex: 4;
-`
-
-export const NameWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items:center
-`
-
-export const Name = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 20px;
-    color: ${({ theme }) => theme.colors.primary1};
-`
-
-export const DividerDot = styled.div`
-    display: flex; 
-    margin-left: 8px;
-    margin-right: 8px;
-`
-
-export const EyeOffIcon = styled.div`
-display: flex; 
-min-width: 14.67px;
-`
-
-export const IsMe = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 20px;
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-
-    display: flex;
-    align-items: center;
-    letter-spacing: -0.02em;
-`
-
-export const CommentPrivate = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 20px;
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-
-    display: flex;
-    align-items: center;
-    letter-spacing: -0.02em;
-    margin-left: 8px;
-`
-
-export const Position = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 14px;
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-`
-
-export const Date = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    font-family: Work Sans;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    margin-right: 11px;
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-`
-
-export const ButtonMore = styled.div`
-    display: flex;
-    cursor: pointer;
-    height: 14px;
-    align-items: center;
-    z-index: 10;
-`
-
-export const Dropdown = styled.div`
-    width: auto;
-    height: auto;
-`
-
-export const DropdownWrapper = styled.div<ICommentaryBox>`
-    display: flex;
-    flex-direction: column;
-    visibility: ${(props:any)  => props.isVisible ? 'visible' : 'hidden'};
-    opacity:${(props:any)  => props.isVisible ? '1' : '0'};
-    position: absolute;
-    width: 210px;
-    background-color: gray;   
-    margin-top: 5px;
-    margin-left: -185px;
-    transition:visibility 0.3s ease-in-out,opacity 0.3s ease-in-out;
-
-    background: ${({ theme }) => theme.colors.shadeWhite};
-
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-
-    box-shadow: 0px 18px 40px -15px #D3D3D3;
-    border-radius: 8px 0px 8px 8px;
-    overflow: hidden;
-    z-index: 9;
-`
-
-export const ItemDrop = styled.div<ICommentaryBox>`
-    display: flex;
-    padding: 11px;
-    padding-left: 16px;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-    border-bottom: ${(props:any)  => props.isLastItem ? 'transparent' : '1px solid #EBEBEB'};
-    
-    &:hover { 
-        background-color: ${({ theme }) => theme.colors.neutralsGrey5};
-    }
-    &:active { 
-        background-color: ${({ theme }) => theme.colors.primary1 +'19'};
-    }
-    cursor: pointer;
-`
-
-export const CommentaryContent = styled.div`
-    font-family: 'Work Sans';
-    margin-top: 12px;
-    margin-left: 14px;
-    margin-right: 14px;
-    margin-top: 12px;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 20px;
-    
-    letter-spacing: -0.02em;
-    
-    white-space: pre-wrap
-`
-
-export const CommentaryEditingContent = styled.div`
-    font-family: 'Work Sans';
-    margin-top: 12px;
-    margin-left: 14px;
-    margin-right: 14px;
-    margin-top: 12px;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 20px;
-
-    letter-spacing: -0.02em;
-
-    white-space: pre-wrap
-`
-
-export const IterationsWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding-top: 14px;
-    padding-bottom: 14px;
-    padding-left: 14px;
-`
-
-export const IterationsButtonsWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    width: fit-content;
-`
-
-export const LikesStatistics = styled.div`
-    display:flex;
-    flex-direction: row;
-`
-
-export const TextTotalLikes = styled.span`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-
-    margin-left: 6px;
-`
-
-export const FooterEditingWrapper = styled.div<{width?:number}>`
-    display: flex;
-    align-self: flex-end;
-    margin: 14px;
-    width: fit-content;
-    justify-content: space-between;
-`
-
-export const LinkButton = styled.a`
-    border: none;
-    text-decoration: none;
-    ${({ theme }) => theme.fonts.textMessageComponentsBodBold};
-    font-size: 12px;
-    color: ${({ theme }) => theme.colors.linkOnfocus};
-    cursor: pointer;
-    outline: none;
-    box-sizing: border-box;
-    transition: all 0.2s ease-in-out;
-    display: flex;
-    align-items: center;
-    margin-left: 12px;
-    margin-right: 12px;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    letter-spacing: -0.02em;
-
-    &:hover { 
-        color: ${({ theme }) => theme.colors.linkHover};
-    }
-
-    &:active { 
-        color: ${({ theme }) => theme.colors.black};
-    }
-
-    &:focus { 
-        color: ${({ theme }) => theme.colors.linkOnfocus};
-    }
-`
-
-export const OptionsWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-`
-
-/*border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};*/