Feat/collapse: add collapsible/toggleable headers and outline layout in the preview panel (#139)

* feat(preview): collapsible headings

* feat(preview): collapsible headings

* feat(collapse): change icons for headings

* feat(collapse):

* feat(collapse): use new uniorg and better looks

* feat(collapse): fix typescript errors

* fix(ci): better filter

* feat(collapse): more small adjustments

* feat(collapse): collapse all button

* fix(collapse): fix global css

* fix(cd): remove yarn and add export

* fix(collapse): type-errors

* fix(cd): fix format-all fucking up yml

1 files changed, 106 insertions, 0 deletions

diff --git a/components/Sidebar/Section.tsx b/components/Sidebar/Section.tsx
new file mode 100644
index 0000000..adaf00e
--- /dev/null
+++ b/components/Sidebar/Section.tsx
@@ -0,0 +1,106 @@
+import { Box, Collapse, Flex, IconButton } from '@chakra-ui/react'
+import React, {
+  JSXElementConstructor,
+  ReactChild,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { BiCaretDownCircle, BiChevronDownCircle, BiCircle } from 'react-icons/bi'
+import { ComponentLike, ComponentPropsWithoutNode } from 'rehype-react'
+import { VscCircleFilled, VscCircleOutline } from 'react-icons/vsc'
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@chakra-ui/icons'
+import { NoteContext } from '../../util/NoteContext'
+
+export interface SectionProps {
+  children: any
+  className: string
+}
+
+export const Section = (props: SectionProps) => {
+  const {
+    children,
+    className, // outline
+  } = props
+  const [open, setOpen] = useState(true)
+  const { collapse } = useContext(NoteContext)
+  useEffect(() => {
+    setOpen(!collapse)
+  }, [collapse])
+
+  if (className === 'h0Wrapper headingWrapper') {
+    return <Box className="preHeadingContent"> {children}</Box>
+  }
+  const kids = children as ReactChild[]
+  return (
+    <Box className={'sec'}>
+      <Box display="block">
+        <Flex className="headingFlex" alignItems="baseline">
+          {open && kids.length > 0 ? (
+            <>
+              <IconButton
+                className="viewerHeadingButton"
+                _focus={{}}
+                _active={{}}
+                aria-label="Expand heading"
+                //mr={1}
+                size="xs"
+                variant="subtle"
+                icon={<ChevronUpIcon />}
+                onClick={() => setOpen(!open)}
+                height={2}
+                width={2}
+              />
+              <IconButton
+                className="outlineHeadingButton"
+                _focus={{}}
+                _active={{}}
+                aria-label="Expand heading"
+                //mr={1}
+                size="xs"
+                variant="subtle"
+                icon={<VscCircleOutline />}
+                onClick={() => setOpen(!open)}
+                height={2}
+                width={2}
+              />
+            </>
+          ) : (
+            <>
+              <IconButton
+                className="viewerHeadingButton"
+                _active={{}}
+                _focus={{}}
+                aria-label="Collapse heading"
+                //mr={1}
+                height={2}
+                width={2}
+                size="xs"
+                variant="subtle"
+                icon={<ChevronDownIcon />}
+                onClick={() => setOpen(!open)}
+              />
+              <IconButton
+                className="outlineHeadingButton"
+                _active={{}}
+                _focus={{}}
+                aria-label="Collapse heading"
+                //mr={1}
+                height={2}
+                width={2}
+                size="xs"
+                variant="subtle"
+                icon={<VscCircleFilled />}
+                onClick={() => setOpen(!open)}
+              />
+            </>
+          )}
+          {kids[0]}
+        </Flex>
+      </Box>
+      {open && <Box className="sectionContent">{kids.slice(1)}</Box>}
+    </Box>
+  )
+}