@clement_lores/admin-design-system 1.0.0

package/src/molecules/rich-text-editor/components/menu-bar.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/require-default-props */
+import { Editor } from '@tiptap/react'
+import React, { FC } from 'react'
+
+import { MenuBarWrapper } from '../rich-text-editor.styled.jsx'
+import useTiptapCommands from '../useTiptapCommands.js'
+import HeadingSelect from './heading-select.jsx'
+import ImageButton from './image-button.jsx'
+import MenuButton from './menu-button.jsx'
+
+interface MenuBarProps {
+  editor: Editor | null
+}
+
+const MenuBar: FC<MenuBarProps> = ({ editor }) => {
+  const commands = useTiptapCommands({ editor })
+
+  if (!editor) return null
+
+  return (
+    <MenuBarWrapper>
+      <HeadingSelect editor={editor} />
+      {commands.map(({ name, onClick, icon }) => (
+        <MenuButton editor={editor} key={name} name={name} onClick={onClick} icon={icon} />
+      ))}
+      <ImageButton editor={editor} />
+    </MenuBarWrapper>
+  )
+}
+
+export default MenuBar

package/src/molecules/rich-text-editor/components/menu-button.tsx

@@ -0,0 +1,44 @@
+import { Editor } from '@tiptap/react'
+import React, { FC, useMemo, PropsWithChildren } from 'react'
+import { styled } from '@styled-components'
+
+import { Text, TextProps } from '../../../atoms/text/index.js'
+import * as EditorIcons from '../icons/index.js'
+
+interface MenuButtonProps {
+  editor: Editor
+  name: string
+  onClick: () => void
+  icon?: string
+  attributes?: Record<string, any>
+  children?: any
+}
+
+const StyledText: any = styled(Text)<PropsWithChildren<TextProps>>`
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.grey80};
+  & svg path {
+    fill: ${({ theme }) => theme.colors.grey80};
+  }
+`
+
+const MenuButton: FC<MenuButtonProps> = (props) => {
+  const { name, editor, onClick, icon, attributes, children } = props
+
+  const isActive = useMemo(
+    () => (editor.isActive(attributes || name) ? 'active' : ''),
+    [name, attributes],
+  )
+
+  // Using icons from: https://github.com/Keyamoon/IcoMoon-Free
+  const Icon = icon ? EditorIcons[icon] : null
+
+  return (
+    <StyledText as="span" onClick={onClick} className={isActive} size="icon" mx="md">
+      {Icon ? <Icon /> : name}
+      {children}
+    </StyledText>
+  )
+}
+
+export default MenuButton

package/src/molecules/rich-text-editor/icons/align-center.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M0 1h16v2h-16zM3 4h10v2h-10zM3 10h10v2h-10zM0 7h16v2h-16zM0 13h16v2h-16z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/align-justify.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M0 1h16v2h-16zM0 4h16v2h-16zM0 7h16v2h-16zM0 10h16v2h-16zM0 13h16v2h-16z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/align-left.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M0 1h16v2h-16zM0 4h10v2h-10zM0 10h10v2h-10zM0 7h16v2h-16zM0 13h16v2h-16z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/align-right.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M0 1h16v2h-16zM6 4h10v2h-10zM6 10h10v2h-10zM0 7h16v2h-16zM0 13h16v2h-16z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/bold.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M11.061 7.573c0.586-0.696 0.939-1.594 0.939-2.573 0-2.206-1.794-4-4-4h-5v14h6c2.206 0 4-1.794 4-4 0-1.452-0.778-2.726-1.939-3.427zM6 3h1.586c0.874 0 1.586 0.897 1.586 2s-0.711 2-1.586 2h-1.586v-4zM8.484 13h-2.484v-4h2.484c0.913 0 1.656 0.897 1.656 2s-0.743 2-1.656 2z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/bullet-list.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M0 0h4v4h-4zM6 1h10v2h-10zM0 6h4v4h-4zM6 7h10v2h-10zM0 12h4v4h-4zM6 13h10v2h-10z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/clear.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M0 14h9v2h-9zM14 2h-4.727l-2.871 11h-2.067l2.871-11h-4.205v-2h11zM14.528 16l-2.028-2.028-2.028 2.028-0.972-0.972 2.028-2.028-2.028-2.028 0.972-0.972 2.028 2.028 2.028-2.028 0.972 0.972-2.028 2.028 2.028 2.028z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/code.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="20"
+    height="16"
+    viewBox="0 0 20 16"
+  >
+    <path fill="#000000" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z" />
+    <path fill="#000000" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z" />
+    <path fill="#000000" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z" />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/font-size.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path fill="#000000" d="M1 8h6v2h-2v6h-2v-6h-2zM15 4h-3.934v12h-2.133v-12h-3.934v-2h10z" />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/image.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M14.998 2c0.001 0.001 0.001 0.001 0.002 0.002v11.996c-0.001 0.001-0.001 0.001-0.002 0.002h-13.996c-0.001-0.001-0.001-0.001-0.002-0.002v-11.996c0.001-0.001 0.001-0.001 0.002-0.002h13.996zM15 1h-14c-0.55 0-1 0.45-1 1v12c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-12c0-0.55-0.45-1-1-1v0z"
+    />
+    <path
+      fill="#000000"
+      d="M13 4.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5 1.5 0.672 1.5 1.5z"
+    />
+    <path fill="#000000" d="M14 13h-12v-2l3.5-6 4 5h1l3.5-3z" />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/index.ts

@@ -0,0 +1,20 @@
+/* eslint-disable import/prefer-default-export */
+export { default as AlignCenter } from './align-center.jsx'
+export { default as AlignJustify } from './align-justify.jsx'
+export { default as AlignLeft } from './align-left.jsx'
+export { default as AlignRight } from './align-right.jsx'
+export { default as Bold } from './bold.jsx'
+export { default as BulletList } from './bullet-list.jsx'
+export { default as Clear } from './clear.jsx'
+export { default as Code } from './code.jsx'
+export { default as FontSize } from './font-size.jsx'
+export { default as Image } from './image.jsx'
+export { default as Italic } from './italic.jsx'
+export { default as Link } from './link.jsx'
+export { default as OrderedList } from './ordered-list.jsx'
+export { default as Pagebreak } from './pagebreak.jsx'
+export { default as Paragraph } from './paragraph.jsx'
+export { default as Quote } from './quote.jsx'
+export { default as Redo } from './redo.jsx'
+export { default as Strikethrough } from './strikethrough.jsx'
+export { default as Undo } from './undo.jsx'

package/src/molecules/rich-text-editor/icons/italic.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path fill="#000000" d="M14 1v1h-2l-5 12h2v1h-7v-1h2l5-12h-2v-1z" />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/link.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M6.879 9.934c-0.208 0-0.416-0.079-0.575-0.238-1.486-1.486-1.486-3.905 0-5.392l3-3c0.72-0.72 1.678-1.117 2.696-1.117s1.976 0.397 2.696 1.117c1.486 1.487 1.486 3.905 0 5.392l-1.371 1.371c-0.317 0.317-0.832 0.317-1.149 0s-0.317-0.832 0-1.149l1.371-1.371c0.853-0.853 0.853-2.241 0-3.094-0.413-0.413-0.963-0.641-1.547-0.641s-1.134 0.228-1.547 0.641l-3 3c-0.853 0.853-0.853 2.241 0 3.094 0.317 0.317 0.317 0.832 0 1.149-0.159 0.159-0.367 0.238-0.575 0.238z"
+    />
+    <path
+      fill="#000000"
+      d="M4 15.813c-1.018 0-1.976-0.397-2.696-1.117-1.486-1.486-1.486-3.905 0-5.392l1.371-1.371c0.317-0.317 0.832-0.317 1.149 0s0.317 0.832 0 1.149l-1.371 1.371c-0.853 0.853-0.853 2.241 0 3.094 0.413 0.413 0.962 0.641 1.547 0.641s1.134-0.228 1.547-0.641l3-3c0.853-0.853 0.853-2.241 0-3.094-0.317-0.317-0.317-0.832 0-1.149s0.832-0.317 1.149 0c1.486 1.486 1.486 3.905 0 5.392l-3 3c-0.72 0.72-1.678 1.117-2.696 1.117z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/ordered-list.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M6 13h10v2h-10zM6 7h10v2h-10zM6 1h10v2h-10zM3 0v4h-1v-3h-1v-1zM2 8.219v0.781h2v1h-3v-2.281l2-0.938v-0.781h-2v-1h3v2.281zM4 11v5h-3v-1h2v-1h-2v-1h2v-1h-2v-1z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/pagebreak.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M4 6v-6h12v6h-1v-5h-10v5zM16 9v7h-12v-7h1v6h10v-6zM8 7h2v1h-2zM5 7h2v1h-2zM11 7h2v1h-2zM14 7h2v1h-2zM0 4.5l3 3-3 3z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/paragraph.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path fill="#000000" d="M6 0h8v2h-2v14h-2v-14h-2v14h-2v-8c-2.209 0-4-1.791-4-4s1.791-4 4-4z" />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/quote.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M3.516 7c1.933 0 3.5 1.567 3.5 3.5s-1.567 3.5-3.5 3.5-3.5-1.567-3.5-3.5l-0.016-0.5c0-3.866 3.134-7 7-7v2c-1.336 0-2.591 0.52-3.536 1.464-0.182 0.182-0.348 0.375-0.497 0.578 0.179-0.028 0.362-0.043 0.548-0.043zM12.516 7c1.933 0 3.5 1.567 3.5 3.5s-1.567 3.5-3.5 3.5-3.5-1.567-3.5-3.5l-0.016-0.5c0-3.866 3.134-7 7-7v2c-1.336 0-2.591 0.52-3.536 1.464-0.182 0.182-0.348 0.375-0.497 0.578 0.179-0.028 0.362-0.043 0.549-0.043z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/redo.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M9 3.881v-3.881l6 6-6 6v-3.966c-6.98-0.164-6.681 4.747-4.904 7.966-4.386-4.741-3.455-12.337 4.904-12.119z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/strikethrough.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M16 8v1h-3.664c0.43 0.602 0.664 1.292 0.664 2 0 1.107-0.573 2.172-1.572 2.921-0.927 0.696-2.145 1.079-3.428 1.079s-2.501-0.383-3.428-1.079c-0.999-0.749-1.572-1.814-1.572-2.921h2c0 1.084 1.374 2 3 2s3-0.916 3-2c0-1.084-1.374-2-3-2h-8v-1h4.68c-0.037-0.026-0.073-0.052-0.108-0.079-0.999-0.749-1.572-1.814-1.572-2.921s0.573-2.172 1.572-2.921c0.927-0.696 2.145-1.079 3.428-1.079s2.501 0.383 3.428 1.079c0.999 0.749 1.572 1.814 1.572 2.921h-2c0-1.084-1.374-2-3-2s-3 0.916-3 2c0 1.084 1.374 2 3 2 1.234 0 2.407 0.354 3.32 1h4.68z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/icons/undo.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default (): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#000000"
+      d="M11.904 16c1.777-3.219 2.076-8.13-4.904-7.966v3.966l-6-6 6-6v3.881c8.359-0.218 9.29 7.378 4.904 12.119z"
+    />
+  </svg>
+)

package/src/molecules/rich-text-editor/index.ts

@@ -0,0 +1,2 @@
+export * from './rich-text-editor.jsx'
+export * from './rich-text-editor-props.js'

package/src/molecules/rich-text-editor/rich-text-editor-props.ts

@@ -0,0 +1 @@
+export type Option = string | number | boolean

package/src/molecules/rich-text-editor/rich-text-editor.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React, { useEffect, useRef, useState } from 'react'
+
+import { Box, Text } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { RichTextEditor } from './rich-text-editor.jsx'
+
+const html = `
+<h1>Hello World</h1>
+<h2>Some header 2</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
+eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
+vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel
+interdum mattis neque.
+</p>
+<ol>
+<li>interdum mattis neque.</li>
+</ol>
+<h2>Second level</h2>
+<p>
+Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
+Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium
+urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus
+facilisis. Donec at dignissim dui. Ut et neque nisl.
+</p>
+<ul>
+<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+<li>Ut non enim metus.</li>
+</ul>
+<a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>
+<blockquote>
+And here it comes - the quote
+</blockquote>
+<h5>Header H5</h5>
+<p><code>var a = 'asd';</code></p>
+<pre>
+const a = 1;
+const b = 0;
+
+function sum(x, y) {
+    return x + y;
+}
+
+const c = sum(a, b);</pre>
+<p>And below there is a Table</p>
+<table>
+<thead>
+<tr><th>Name</th><th>Surname</th></tr>
+</thead>
+<tbody>
+<tr><td>Wojtek</td><td>Krysiak</td></tr>
+<tr><td>Joseph</td><td>Grad</td></tr>
+</tbody>
+</table>
+<p>text goes on...</p>
+`
+
+export const Default: StoryFn = () => {
+  const [value, setValue] = useState(html)
+  const contentRef = useRef<any>()
+
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.innerHTML = value
+    }
+  }, [value])
+
+  return (
+    <Box flex style={{ gap: 48 }}>
+      <StoryWrapper label="Rich text editor">
+        <RichTextEditor onChange={(content) => setValue(content)} value={value} />
+      </StoryWrapper>
+      <StoryWrapper label="Text preview">
+        <Text ref={contentRef} />
+      </StoryWrapper>
+    </Box>
+  )
+}
+
+const meta: Meta<typeof RichTextEditor> = {
+  title: 'DesignSystem/Molecules/RichTextEditor',
+  component: RichTextEditor,
+}
+
+export default meta

package/src/molecules/rich-text-editor/rich-text-editor.styled.tsx

@@ -0,0 +1,52 @@
+import { styled } from '@styled-components'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { InputCSS, InputProps } from '../../atoms/input/index.js'
+import { Text, TextProps } from '../../atoms/text/index.js'
+import { cssClass, themeGet } from '../../utils/index.js'
+
+export type EditorWrapperProps = TextProps & InputProps & BoxProps
+
+export const EditorWrapper = styled(Text)<EditorWrapperProps>`
+  position: relative;
+  ${InputCSS}
+
+  .ProseMirror-focused {
+    outline: none;
+  }
+
+  .characterCount {
+    position: absolute;
+    bottom: ${themeGet('space', 'md')};
+    right: ${themeGet('space', 'lg')};
+    color: ${themeGet('colors', 'grey40')};
+  }
+`
+EditorWrapper.defaultProps = {
+  px: 'xl',
+  py: 'xl',
+  className: cssClass('EditorWrapper'),
+}
+
+export const MenuBarWrapper: any = styled(Box)`
+  border: 1px solid ${themeGet('colors', 'inputBorder')};
+  border-bottom: none;
+
+  & .${cssClass('Icon')}:hover {
+    cursor: pointer;
+  }
+
+  & .${cssClass('Icon')} {
+    stroke: ${themeGet('colors', 'grey100')};
+  }
+
+  & .active .${cssClass('Icon')} {
+    stroke: ${themeGet('colors', 'primary100')};
+  }
+`
+
+MenuBarWrapper.defaultProps = {
+  px: 'md',
+  py: 'md',
+  className: cssClass('MenuBarWrapper'),
+}