logo resizing in preview mode

package.json

@@ -38,7 +38,6 @@
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@babel/runtime": "^7.23.4",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
@@ -49,6 +48,7 @@
     "@floating-ui/react": "^0.26.2",
     "@floating-ui/react-dom": "^2.0.4",
     "@floating-ui/react-dom-interactions": "^0.13.3",
+    "@lezer/highlight": "^1.2.0",
     "@mdx-js/react": "^2.3.0",
     "@opentelemetry/api": "^1.7.0",
     "@opentelemetry/context-zone": "^1.18.1",
@@ -73,6 +73,9 @@
     "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
+    "@uiw/codemirror-extensions-langs": "^4.21.21",
+    "@uiw/codemirror-themes": "^4.21.21",
+    "@uiw/react-codemirror": "^4.21.21",
     "axios": "^1.6.2",
     "babel-jest": "^29.7.0",
     "bootstrap": "^5.3.2",
@@ -113,7 +116,8 @@
   "devDependencies": {
     "@babel/cli": "^7.23.4",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-runtime": "^7.23.4",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/runtime": "^7.23.8",
     "@emotion/jest": "^11.11.0",
     "@storybook/addon-actions": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",

src/common/context/FormContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+import { FormContextType } from './FormContext.types'
+
+export const FormContext = createContext<FormContextType>({
+    onSubmit: (d: any) => {},
+    updateData: (s: string, d: string) => {},
+})

src/common/context/FormContext.types.ts

@@ -0,0 +1,6 @@
+export type FormContextType = {
+    onSubmit: (data: any) => void
+    updateData: (field: string, value: any) => void
+    toggleDirty?: (tab: string, dirty: boolean) => void
+    toggleError?: (tab: string, error: boolean) => void
+}

src/components/Atomic/App/App.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Global } from '@emotion/react'
+import 'react-toastify/dist/ReactToastify.css'
 
 import { Props, defaultProps } from './App.types'
-import 'react-toastify/dist/ReactToastify.css'
 import { ToastContainer } from '../Notification'
 import * as styles from './App.styles'
 

src/components/Atomic/Button/Button.styles.ts

@@ -79,6 +79,7 @@ export const icon = (position: ButtonIconPositionType) => css`
 
 export const fullWidth = css`
     flex: 1 1 auto;
+    width: 100%;
 `
 
 export const loadingWrapper = css`

src/components/Atomic/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,83 @@
+import { FC, useCallback, useMemo } from 'react'
+import CodeMirror from '@uiw/react-codemirror'
+import { loadLanguage } from '@uiw/codemirror-extensions-langs'
+import isFunction from 'lodash/isFunction'
+import { tags as t } from '@lezer/highlight'
+import { createTheme } from '@uiw/codemirror-themes'
+import { useTheme } from '@emotion/react'
+
+import { Props, defaultProps } from './CodeEditor.types'
+import * as styles from './CodeMirror.styles'
+import { getSizeInPx } from '../_utils/commonStyles'
+import { ThemeType } from '../_theme'
+
+const CodeEditor: FC<Props> = (props) => {
+    const { height, onChange, value } = { ...defaultProps, ...props }
+    const globalTheme: ThemeType = useTheme()
+
+    const handleChange = useCallback(
+        (v: string) => {
+            isFunction(onChange) && onChange(v)
+        },
+        [onChange]
+    )
+
+    const extensions = useMemo(() => {
+        const ext = []
+
+        if (isFunction(loadLanguage)) {
+            ext.push(loadLanguage('markdown') as any)
+        }
+
+        return ext
+    }, [])
+
+    const theme = useMemo(
+        () =>
+            createTheme({
+                theme: 'light',
+                settings: {
+                    background: globalTheme?.colors?.CodeEditor.background,
+                    lineHighlight: globalTheme?.colors?.CodeEditor.lineHighlight,
+                    selection: globalTheme?.colors?.CodeEditor.selection,
+                },
+                styles: [
+                    { tag: t.comment, color: '#787b8099' },
+                    { tag: t.variableName, color: '#0080ff' },
+                    { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
+                    { tag: t.number, color: '#5c6166' },
+                    { tag: t.bool, color: '#5c6166' },
+                    { tag: t.null, color: '#5c6166' },
+                    { tag: t.keyword, color: '#5c6166' },
+                    { tag: t.operator, color: '#5c6166' },
+                    { tag: t.className, color: '#5c6166' },
+                    { tag: t.definition(t.typeName), color: '#5c6166' },
+                    { tag: t.typeName, color: '#5c6166' },
+                    { tag: t.angleBracket, color: '#5c6166' },
+                    { tag: t.tagName, color: '#5c6166' },
+                    { tag: t.attributeName, color: '#5c6166' },
+                ],
+            }),
+        []
+    )
+
+    return (
+        <CodeMirror
+            basicSetup={{
+                foldGutter: false,
+                drawSelection: true,
+            }}
+            css={styles.editor}
+            extensions={extensions}
+            height={getSizeInPx(height!)}
+            onChange={(v) => handleChange(v)}
+            theme={theme}
+            value={value}
+        />
+    )
+}
+
+CodeEditor.displayName = 'CodeEditor'
+CodeEditor.defaultProps = defaultProps
+
+export default CodeEditor

src/components/Atomic/CodeEditor/CodeEditor.types.ts

@@ -0,0 +1,9 @@
+export type Props = {
+    height?: string | number
+    onChange?: (value: string) => void
+    value: string
+}
+
+export const defaultProps: Partial<Props> = {
+    height: '500px',
+}

src/components/Atomic/CodeEditor/CodeMirror.styles.ts

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react'
+import { ThemeType, get } from '../_theme'
+
+export const editor = (theme: ThemeType) => css`
+    border: 1px solid ${get(theme, `Editor.borderColor`)};
+    border-radius: 8px;
+    overflow: hidden;
+
+    .cm-gutters {
+        background: #e6e9ed;
+        border: 0;
+    }
+
+    .cm-lineNumbers .cm-gutterElement {
+        color: #757676;
+        text-align: center;
+        padding: 0 16px 0 16px;
+    }
+
+    .cm-content {
+        padding: 16px 0;
+    }
+
+    .cm-line {
+        padding: 0 16px;
+        line-height: 1.6;
+    }
+`

src/components/Atomic/CodeEditor/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CodeEditor'
+export * from './CodeEditor'

src/components/Atomic/ContentMenu/ContentMenu.styles.ts

@@ -0,0 +1,140 @@
+import { css } from '@emotion/react'
+import { ThemeType, get } from '../_theme'
+
+export const contentMenu = (theme: ThemeType) => css`
+    padding: 16px 12px 12px 12px;
+    border-radius: 16px;
+    border: 1px solid ${get(theme, `ContentMenu.borderColor`)};
+    background: ${get(theme, `ContentMenu.background`)};
+    box-shadow: 0 1px 2px 0 rgba(228, 229, 231, 0.24);
+`
+
+export const title = (theme: ThemeType) => css`
+    color: ${get(theme, `ContentMenu.title.color`)};
+    margin-bottom: 12px;
+    padding: 0 12px;
+`
+
+export const menuList = css`
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    .item-enter {
+    }
+
+    .item-enter-done {
+        max-height: 200px;
+    }
+
+    .item-enter-active {
+        max-height: 200px;
+    }
+
+    .item-exit {
+        max-height: 0;
+    }
+
+    .item-exit-active {
+        max-height: 0;
+    }
+`
+
+export const itemTitleIcon = css`
+    flex: 0 0 16px;
+`
+
+export const itemTitleText = css`
+    margin-left: 12px;
+    font-weight: bold;
+`
+
+export const item = (theme: ThemeType) => css`
+    display: flex;
+    padding: 10px 12px;
+    text-decoration: none;
+    min-height: 40px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    color: ${get(theme, `ContentMenu.item.color`)};
+    transition: all 0.25s;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+        text-decoration: none !important;
+        color: ${get(theme, `ContentMenu.item.hover.color`)};
+
+        .icon {
+            color: ${get(theme, `ContentMenu.item.hover.icon.color`)};
+        }
+    }
+`
+
+export const activeItem = (theme: ThemeType) => css`
+    color: ${get(theme, `ContentMenu.item.active.color`)};
+    background: ${get(theme, `ContentMenu.item.active.background`)};
+
+    .icon {
+        color: ${get(theme, `ContentMenu.item.active.icon.color`)}!important;
+    }
+
+    &:hover {
+        text-decoration: none !important;
+        color: ${get(theme, `ContentMenu.item.active.hover.color`)};
+    }
+`
+
+export const arrow = css`
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.25s;
+`
+
+export const activeArrow = css`
+    transform: translateY(-50%) rotate(180deg);
+`
+
+export const subItems = css`
+    max-height: 0;
+    overflow: hidden;
+    transition: all 0.45s;
+`
+
+export const subItemsList = css`
+    margin: 0;
+    padding: 10px 0 0 20px;
+    list-style: none;
+`
+
+export const subItemLink = (theme: ThemeType) => css`
+    display: block;
+    position: relative;
+    padding: 8px 8px 8px 20px;
+    white-space: nowrap;
+    margin: 4px 0 4px 0;
+    color: ${get(theme, `ContentMenu.subItem.color`)};
+
+    &:hover {
+        color: ${get(theme, `ContentMenu.subItem.hover.color`)};
+    }
+`
+
+export const subItemLinkActive = (theme: ThemeType) => css`
+    color: ${get(theme, `ContentMenu.subItem.active.color`)};
+`
+
+export const line = css`
+    width: 14px;
+    height: 55px;
+    position: absolute;
+    left: 0;
+    bottom: 50%;
+`