frst-components 0.20.0

package/src/components/LXP/extraContent/extraContent.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+
+import ExtraContent from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'LXP/ExtraContent',
+    component: ExtraContent,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ExtraContent {...args} />
+
+export const Student = Template.bind({})
+Student.args = {
+    typeExhibition: 2,
+    bookList: [{
+        id: 'abcd',
+        img: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
+        title: 'Gerenciamento de projetos',
+        autor: 'Guilherme Caloba'
+    },
+    {
+        id: 'abcde',
+        img: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
+        title: 'O poder do hábito',
+        autor: 'Charles Duhigg'
+    },
+    {
+        id: 'abcdef',
+        img: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
+        title: 'pense de novo: O poder de saber o que você não sabe',
+        autor: 'Adam Grant'
+    },
+    {
+        id: 'abca',
+        img: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
+        title: 'O desafio do impossível',
+        autor: 'Neuza Chaves'
+    },
+    {
+        id: 'abcc',
+        img: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
+        title: 'Entendendo o pensamento A3',
+        autor: 'Durward K. Sobek II'
+    },
+    ],
+    transcription: `Bacon ipsum dolor amet swine strip steak drumstick pork belly bresaola capicola, picanha pork kielbasa flank pig. Ball tip tri-tip ribeye ground round. Capicola pork pork chop, burgdoggen boudin t-bone landjaeger alcatra pig spare ribs shank prosciutto pancetta. Doner leberkas flank prosciutto biltong kevin tri-tip swine buffalo burgdoggen pork chop short ribs pork loin pork. Cow kevin tri-tip fatback biltong salami boudin frankfurter pork loin strip steak turducken doner alcatra ham. Spare ribs buffalo kevin sausage, tongue frankfurter tail capicola chuck biltong chislic bacon filet mignon hamburger pastrami.
+
+    Ball tip picanha drumstick hamburger cow strip steak spare ribs bresaola pig brisket porchetta landjaeger burgdoggen turducken beef ribs. Andouille chislic pork belly jowl shankle. Jerky landjaeger strip steak pork chop, meatloaf swine buffalo pork loin. Sausage turkey kevin, flank drumstick ham beef ribs turducken. Spare ribs short ribs bresaola tongue ham hock chislic, beef ribs brisket doner. Ham biltong turkey leberkas, sirloin shank filet mignon.
+    
+    Frankfurter porchetta ball tip tenderloin pork loin, turkey buffalo strip steak rump beef ribs ham hock. Andouille kielbasa pork chop picanha prosciutto chicken. Shank jerky pork loin swine venison fatback kevin. Beef fatback brisket ball tip, turkey pancetta short loin frankfurter shoulder pork loin prosciutto swine jerky. Kevin pork chop porchetta, shoulder leberkas salami pancetta doner drumstick sausage flank buffalo cow.
+    
+    Beef tail ham hock prosciutto andouille capicola jerky t-bone frankfurter. Alcatra bresaola salami pork chop, burgdoggen ribeye short ribs ball tip beef picanha kielbasa venison. T-bone capicola biltong tail fatback. Meatloaf ball tip sirloin leberkas, burgdoggen pig boudin tenderloin short loin shoulder buffalo short ribs spare ribs.
+    
+    Ground round biltong venison boudin beef ribs, swine buffalo brisket jerky drumstick rump corned beef kevin turducken spare ribs. Shankle fatback jerky buffalo, ham hock ribeye short ribs meatball filet mignon kielbasa venison shank rump landjaeger. Alcatra hamburger ham landjaeger. Brisket pork chop leberkas chicken.`,
+    commentList:[{
+        userName : 'Roberto Lima',
+        userAvatar: 'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg',
+        userPosition: 'Estudante/Universitário de TI',
+        comments: 'Olá, pessoal! Tudo bem? Estou iniciando a trilha Digital Business Mindest essa semana. Este conteúdo é muito bom. recomendo',
+        isLiked : false,
+        date : '25/09/2022',
+    },
+    {
+        userName : 'Roberto Lima',
+        userAvatar: 'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg',
+        userPosition: 'Estudante/Universitário de TI',
+        comments: 'Estou iniciando a trilha Digital Business Mindest e queria saber mais sobre as atitudes que o líder deve contruir pra criar uma relação de confiança',
+        isLiked : false,
+        date : '25/09/2022',
+    },
+    ],
+    suportMaterial:[{
+        id : 'abc',
+        img: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
+        description: 'Gerenciamento de projetos com PDCA'
+    },
+    {
+        id : 'cba',
+        img: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
+        description: 'Gerenciamento de projetos com PDCA 2'
+    },
+    ],
+
+    onClickBook: (id) => alert(id) ,
+    onClickSuportMaterial: (id) => alert(id),
+
+}
+
+export const Admin = Template.bind({})
+Admin.args = {
+    typeExhibition: 1,
+
+    onSaveTranscription: (text) => console.log(text)
+}

package/src/components/LXP/extraContent/index.tsx

@@ -0,0 +1,27 @@
+import { useRef, useState } from 'react'
+import { Tab, Tabs, Box, Typography, Grid } from '@mui/material';
+import style from './extraContent.module.css'
+import { IExtraContent } from './extraContent'
+import Avatar from '@components/avatar';
+import InputComment from '@components/input-comment';
+import CommentaryBox from '@components/commentary-box';
+import AdminExtraContent from './adminExtraContent'
+import StudentExtraContent from './studentExtraContent'
+// import RichTextEditor from './richTextEditor'
+
+
+
+
+
+
+export default function ExtraContent( props : IExtraContent) {
+    return(
+        <div>
+            {props.typeExhibition === 1 ?
+                AdminExtraContent(props)
+                :
+                StudentExtraContent(props)
+            }
+        </div>
+    )
+}

package/src/components/LXP/extraContent/richTextEditor/components.tsx

@@ -0,0 +1,194 @@
+import React, { Ref, PropsWithChildren } from 'react'
+import ReactDOM from 'react-dom'
+import { cx, css } from '@emotion/css'
+
+interface BaseProps {
+  className: string
+  [key: string]: unknown
+}
+type OrNull<T> = T | null
+
+export const Button = React.forwardRef(
+  (
+    {
+      className,
+      active,
+      reversed,
+      ...props
+    }: PropsWithChildren<
+      {
+        active: boolean
+        reversed: boolean
+      } & BaseProps
+    >,
+    ref: Ref<OrNull<HTMLSpanElement>>
+  ) => (
+    <span
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          cursor: pointer;
+          color: ${reversed
+            ? active
+              ? 'white'
+              : '#aaa'
+            : active
+            ? 'black'
+            : '#ccc'};
+        `
+      )}
+    />
+  )
+)
+
+export const EditorValue = React.forwardRef(
+  (
+    {
+      className,
+      value,
+      ...props
+    }: PropsWithChildren<
+      {
+        value: any
+      } & BaseProps
+    >,
+    ref: Ref<OrNull<null>>
+  ) => {
+    const textLines = value.document.nodes
+      .map(node => node.text)
+      .toArray()
+      .join('\n')
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={cx(
+          className,
+          css`
+            margin: 30px -20px 0;
+          `
+        )}
+      >
+        <div
+          className={css`
+            font-size: 14px;
+            padding: 5px 20px;
+            color: #404040;
+            border-top: 2px solid #eeeeee;
+            background: #f8f8f8;
+          `}
+        >
+          Slate's value as text
+        </div>
+        <div
+          className={css`
+            color: #404040;
+            font: 12px monospace;
+            white-space: pre-wrap;
+            padding: 10px 20px;
+            div {
+              margin: 0 0 0.5em;
+            }
+          `}
+        >
+          {textLines}
+        </div>
+      </div>
+    )
+  }
+)
+
+export const Icon = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLSpanElement>>
+  ) => (
+    <span
+      {...props}
+      ref={ref}
+      className={cx(
+        'material-icons',
+        className,
+        css`
+          font-size: 18px;
+          vertical-align: text-bottom;
+        `
+      )}
+    />
+  )
+)
+
+export const Instruction = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLDivElement>>
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          white-space: pre-wrap;
+          margin: 0 -20px 10px;
+          padding: 10px 20px;
+          font-size: 14px;
+          background: #f8f8e8;
+        `
+      )}
+    />
+  )
+)
+
+export const Menu = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLDivElement>>
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          & > * {
+            display: inline-block;
+          }
+
+          & > * + * {
+            margin-left: 15px;
+          }
+        `
+      )}
+    />
+  )
+)
+
+export const Portal = ({ children }) => {
+  return typeof document === 'object'
+    ? ReactDOM.createPortal(children, document.body)
+    : null
+}
+
+export const Toolbar = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLDivElement>>
+  ) => (
+    <Menu
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          position: relative;
+          padding: 16px 16px 16px;
+          border-bottom: 2px solid #eee;
+          background-color: #FFF
+        `
+      )}
+    />
+  )
+)

package/src/components/LXP/extraContent/richTextEditor/index.tsx

@@ -0,0 +1,262 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import isHotkey from 'is-hotkey'
+import { Editable, withReact, useSlate, Slate } from 'slate-react'
+import {
+  Editor,
+  Transforms,
+  createEditor,
+  Descendant,
+  Element as SlateElement,
+} from 'slate'
+import { withHistory } from 'slate-history'
+
+import { Button, Icon, Toolbar } from './components'
+import { 
+    FormatBold,
+    FormatItalic,
+    FormatUnderlined,
+    Code,
+    LooksOne,
+    LooksTwo,
+    FormatQuote,
+    FormatListNumbered,
+    FormatListBulleted,
+    FormatAlignLeft,
+    FormatAlignCenter,
+    FormatAlignRight,
+    FormatAlignJustify
+} from '@mui/icons-material'
+
+const HOTKEYS = {
+  'mod+b': 'bold',
+  'mod+i': 'italic',
+  'mod+u': 'underline',
+  'mod+`': 'code',
+}
+
+const LIST_TYPES = ['numbered-list', 'bulleted-list']
+const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify']
+
+const RichTextExample = () => {
+  const renderElement = useCallback(props => <Element {...props} />, [])
+  const renderLeaf = useCallback(props => <Leaf {...props} />, [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  return (
+    <Slate editor={editor} value={initialValue} >
+      <Toolbar>
+        <MarkButton format="bold" icon={<FormatBold/>} />
+        <MarkButton format="italic" icon={<FormatItalic/>} />
+        <MarkButton format="underline" icon={<FormatUnderlined/>} />
+        <MarkButton format="code" icon={<Code/>} />
+        <BlockButton format="heading-one" icon={<LooksOne/>} />
+        <BlockButton format="heading-two" icon={<LooksTwo/>} />
+        <BlockButton format="block-quote" icon={<FormatQuote/>} />
+        <BlockButton format="numbered-list" icon={<FormatListNumbered/>} />
+        <BlockButton format="bulleted-list" icon={<FormatListBulleted/>} />
+        <BlockButton format="left" icon={<FormatAlignLeft/>} />
+        <BlockButton format="center" icon={<FormatAlignCenter/>} />
+        <BlockButton format="right" icon={<FormatAlignRight/>} />
+        <BlockButton format="justify" icon={<FormatAlignJustify/>} />
+      </Toolbar>
+      <Editable
+        renderElement={renderElement}
+        renderLeaf={renderLeaf}
+        placeholder="Digite seu texto aqui"
+        spellCheck
+        autoFocus
+        style={{height:275, width:'100%', backgroundColor:'#EBEBEB', border: '1px solid #E0E0E0', overflow:'auto'}}
+        onKeyDown={event => {
+          for (const hotkey in HOTKEYS) {
+            if (isHotkey(hotkey, event as any)) {
+              event.preventDefault()
+              const mark = HOTKEYS[hotkey]
+              toggleMark(editor, mark)
+            }
+          }
+        }}
+      />
+    </Slate>
+  )
+}
+
+const toggleBlock = (editor, format) => {
+  const isActive = isBlockActive(
+    editor,
+    format,
+    TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type'
+  )
+  const isList = LIST_TYPES.includes(format)
+
+  Transforms.unwrapNodes(editor, {
+    match: n =>
+      !Editor.isEditor(n) &&
+      SlateElement.isElement(n) &&
+      // @ts-ignore
+      LIST_TYPES.includes(n.type) &&
+      !TEXT_ALIGN_TYPES.includes(format),
+    split: true, 
+  })
+  let newProperties: Partial<SlateElement>
+  if (TEXT_ALIGN_TYPES.includes(format)) {
+    newProperties = {
+      // @ts-ignore
+      align: isActive ? undefined : format,
+    }
+  } else {
+    newProperties = {
+      // @ts-ignore
+      type: isActive ? 'paragraph' : isList ? 'list-item' : format,
+    }
+  }
+  Transforms.setNodes<SlateElement>(editor, newProperties)
+
+  if (!isActive && isList) {
+    const block = { type: format, children: [] }
+    Transforms.wrapNodes(editor, block)
+  }
+}
+
+const toggleMark = (editor, format) => {
+  const isActive = isMarkActive(editor, format)
+
+  if (isActive) {
+    Editor.removeMark(editor, format)
+  } else {
+    Editor.addMark(editor, format, true)
+  }
+}
+
+const isBlockActive = (editor, format, blockType = 'type') => {
+  const { selection } = editor
+  if (!selection) return false
+
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: n =>
+        !Editor.isEditor(n) &&
+        SlateElement.isElement(n) &&
+        n[blockType] === format,
+    })
+  )
+
+  return !!match
+}
+
+const isMarkActive = (editor, format) => {
+  const marks = Editor.marks(editor)
+  return marks ? marks[format] === true : false
+}
+
+const Element = ({ attributes, children, element }) => {
+  const style = { textAlign: element.align }
+  switch (element.type) {
+    case 'block-quote':
+      return (
+        <blockquote style={style} {...attributes}>
+          {children}
+        </blockquote>
+      )
+    case 'bulleted-list':
+      return (
+        <ul style={style} {...attributes}>
+          {children}
+        </ul>
+      )
+    case 'heading-one':
+      return (
+        <h1 style={style} {...attributes}>
+          {children}
+        </h1>
+      )
+    case 'heading-two':
+      return (
+        <h2 style={style} {...attributes}>
+          {children}
+        </h2>
+      )
+    case 'list-item':
+      return (
+        <li style={style} {...attributes}>
+          {children}
+        </li>
+      )
+    case 'numbered-list':
+      return (
+        <ol style={style} {...attributes}>
+          {children}
+        </ol>
+      )
+    default:
+      return (
+        <p style={style} {...attributes}>
+          {children}
+        </p>
+      )
+  }
+}
+
+const Leaf = ({ attributes, children, leaf }) => {
+  if (leaf.bold) {
+    children = <strong>{children}</strong>
+  }
+
+  if (leaf.code) {
+    children = <code>{children}</code>
+  }
+
+  if (leaf.italic) {
+    children = <em>{children}</em>
+  }
+
+  if (leaf.underline) {
+    children = <u>{children}</u>
+  }
+
+  return <span {...attributes}>{children}</span>
+}
+
+const BlockButton = ({ format, icon }) => {
+  const editor = useSlate()
+  return (
+    <Button
+      active={isBlockActive(
+        editor,
+        format,
+        TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type'
+      )}
+      onMouseDown={event => {
+        event.preventDefault()
+        toggleBlock(editor, format)
+      }}
+    >
+    {icon}
+    </Button>
+  )
+}
+
+const MarkButton = ({ format, icon }) => {
+  const editor = useSlate()
+  return (
+    <Button
+      active={isMarkActive(editor, format)}
+      onMouseDown={event => {
+        event.preventDefault()
+        toggleMark(editor, format)
+      }}
+    >
+      {icon}
+    </Button>
+  )
+}
+
+const initialValue = [
+  {
+    type: 'paragraph',
+    children: [
+      { text: '' }
+    ],
+  },
+]
+
+export default RichTextExample