Skip to content

Commit 7f53fad

Browse files
PatrikMatiaskoPatrikMatiasko
committed
logo resizing in preview mode
1 parent 4714932 commit 7f53fad

File tree

108 files changed

+1057
-180
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+1057
-180
lines changed

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
"@babel/preset-env": "^7.23.3",
3939
"@babel/preset-react": "^7.23.3",
4040
"@babel/preset-typescript": "^7.23.3",
41-
"@babel/runtime": "^7.23.4",
4241
"@emotion/babel-plugin": "^11.11.0",
4342
"@emotion/babel-preset-css-prop": "^11.11.0",
4443
"@emotion/cache": "^11.11.0",
@@ -49,6 +48,7 @@
4948
"@floating-ui/react": "^0.26.2",
5049
"@floating-ui/react-dom": "^2.0.4",
5150
"@floating-ui/react-dom-interactions": "^0.13.3",
51+
"@lezer/highlight": "^1.2.0",
5252
"@mdx-js/react": "^2.3.0",
5353
"@opentelemetry/api": "^1.7.0",
5454
"@opentelemetry/context-zone": "^1.18.1",
@@ -73,6 +73,9 @@
7373
"@types/uuid": "^9.0.7",
7474
"@typescript-eslint/eslint-plugin": "^6.12.0",
7575
"@typescript-eslint/parser": "^6.12.0",
76+
"@uiw/codemirror-extensions-langs": "^4.21.21",
77+
"@uiw/codemirror-themes": "^4.21.21",
78+
"@uiw/react-codemirror": "^4.21.21",
7679
"axios": "^1.6.2",
7780
"babel-jest": "^29.7.0",
7881
"bootstrap": "^5.3.2",
@@ -113,7 +116,8 @@
113116
"devDependencies": {
114117
"@babel/cli": "^7.23.4",
115118
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
116-
"@babel/plugin-transform-runtime": "^7.23.4",
119+
"@babel/plugin-transform-runtime": "^7.23.7",
120+
"@babel/runtime": "^7.23.8",
117121
"@emotion/jest": "^11.11.0",
118122
"@storybook/addon-actions": "^7.5.3",
119123
"@storybook/addon-essentials": "^7.5.3",

‎src/common/context/FormContext.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createContext } from 'react'
2+
import { FormContextType } from './FormContext.types'
3+
4+
export const FormContext = createContext<FormContextType>({
5+
onSubmit: (d: any) => {},
6+
updateData: (s: string, d: string) => {},
7+
})

‎src/common/context/FormContext.types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export type FormContextType = {
2+
onSubmit: (data: any) => void
3+
updateData: (field: string, value: any) => void
4+
toggleDirty?: (tab: string, dirty: boolean) => void
5+
toggleError?: (tab: string, error: boolean) => void
6+
}

‎src/components/Atomic/App/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import { Global } from '@emotion/react'
3+
import 'react-toastify/dist/ReactToastify.css'
34

45
import { Props, defaultProps } from './App.types'
5-
import 'react-toastify/dist/ReactToastify.css'
66
import { ToastContainer } from '../Notification'
77
import * as styles from './App.styles'
88

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export const icon = (position: ButtonIconPositionType) => css`
7979

8080
export const fullWidth = css`
8181
flex: 1 1 auto;
82+
width: 100%;
8283
`
8384

8485
export const loadingWrapper = css`

‎src/components/Atomic/CodeEditor/CodeEditor.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { FC, useCallback, useMemo } from 'react'
2+
import CodeMirror from '@uiw/react-codemirror'
3+
import { loadLanguage } from '@uiw/codemirror-extensions-langs'
4+
import isFunction from 'lodash/isFunction'
5+
import { tags as t } from '@lezer/highlight'
6+
import { createTheme } from '@uiw/codemirror-themes'
7+
import { useTheme } from '@emotion/react'
8+
9+
import { Props, defaultProps } from './CodeEditor.types'
10+
import * as styles from './CodeMirror.styles'
11+
import { getSizeInPx } from '../_utils/commonStyles'
12+
import { ThemeType } from '../_theme'
13+
14+
const CodeEditor: FC<Props> = (props) => {
15+
const { height, onChange, value } = { ...defaultProps, ...props }
16+
const globalTheme: ThemeType = useTheme()
17+
18+
const handleChange = useCallback(
19+
(v: string) => {
20+
isFunction(onChange) && onChange(v)
21+
},
22+
[onChange]
23+
)
24+
25+
const extensions = useMemo(() => {
26+
const ext = []
27+
28+
if (isFunction(loadLanguage)) {
29+
ext.push(loadLanguage('markdown') as any)
30+
}
31+
32+
return ext
33+
}, [])
34+
35+
const theme = useMemo(
36+
() =>
37+
createTheme({
38+
theme: 'light',
39+
settings: {
40+
background: globalTheme?.colors?.CodeEditor.background,
41+
lineHighlight: globalTheme?.colors?.CodeEditor.lineHighlight,
42+
selection: globalTheme?.colors?.CodeEditor.selection,
43+
},
44+
styles: [
45+
{ tag: t.comment, color: '#787b8099' },
46+
{ tag: t.variableName, color: '#0080ff' },
47+
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
48+
{ tag: t.number, color: '#5c6166' },
49+
{ tag: t.bool, color: '#5c6166' },
50+
{ tag: t.null, color: '#5c6166' },
51+
{ tag: t.keyword, color: '#5c6166' },
52+
{ tag: t.operator, color: '#5c6166' },
53+
{ tag: t.className, color: '#5c6166' },
54+
{ tag: t.definition(t.typeName), color: '#5c6166' },
55+
{ tag: t.typeName, color: '#5c6166' },
56+
{ tag: t.angleBracket, color: '#5c6166' },
57+
{ tag: t.tagName, color: '#5c6166' },
58+
{ tag: t.attributeName, color: '#5c6166' },
59+
],
60+
}),
61+
[]
62+
)
63+
64+
return (
65+
<CodeMirror
66+
basicSetup={{
67+
foldGutter: false,
68+
drawSelection: true,
69+
}}
70+
css={styles.editor}
71+
extensions={extensions}
72+
height={getSizeInPx(height!)}
73+
onChange={(v) => handleChange(v)}
74+
theme={theme}
75+
value={value}
76+
/>
77+
)
78+
}
79+
80+
CodeEditor.displayName = 'CodeEditor'
81+
CodeEditor.defaultProps = defaultProps
82+
83+
export default CodeEditor

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export type Props = {
2+
height?: string | number
3+
onChange?: (value: string) => void
4+
value: string
5+
}
6+
7+
export const defaultProps: Partial<Props> = {
8+
height: '500px',
9+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { css } from '@emotion/react'
2+
import { ThemeType, get } from '../_theme'
3+
4+
export const editor = (theme: ThemeType) => css`
5+
border: 1px solid ${get(theme, `Editor.borderColor`)};
6+
border-radius: 8px;
7+
overflow: hidden;
8+
9+
.cm-gutters {
10+
background: #e6e9ed;
11+
border: 0;
12+
}
13+
14+
.cm-lineNumbers .cm-gutterElement {
15+
color: #757676;
16+
text-align: center;
17+
padding: 0 16px 0 16px;
18+
}
19+
20+
.cm-content {
21+
padding: 16px 0;
22+
}
23+
24+
.cm-line {
25+
padding: 0 16px;
26+
line-height: 1.6;
27+
}
28+
`

‎src/components/Atomic/CodeEditor/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './CodeEditor'
2+
export * from './CodeEditor'

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

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { css } from '@emotion/react'
2+
import { ThemeType, get } from '../_theme'
3+
4+
export const contentMenu = (theme: ThemeType) => css`
5+
padding: 16px 12px 12px 12px;
6+
border-radius: 16px;
7+
border: 1px solid ${get(theme, `ContentMenu.borderColor`)};
8+
background: ${get(theme, `ContentMenu.background`)};
9+
box-shadow: 0 1px 2px 0 rgba(228, 229, 231, 0.24);
10+
`
11+
12+
export const title = (theme: ThemeType) => css`
13+
color: ${get(theme, `ContentMenu.title.color`)};
14+
margin-bottom: 12px;
15+
padding: 0 12px;
16+
`
17+
18+
export const menuList = css`
19+
list-style: none;
20+
padding: 0;
21+
margin: 0;
22+
23+
.item-enter {
24+
}
25+
26+
.item-enter-done {
27+
max-height: 200px;
28+
}
29+
30+
.item-enter-active {
31+
max-height: 200px;
32+
}
33+
34+
.item-exit {
35+
max-height: 0;
36+
}
37+
38+
.item-exit-active {
39+
max-height: 0;
40+
}
41+
`
42+
43+
export const itemTitleIcon = css`
44+
flex: 0 0 16px;
45+
`
46+
47+
export const itemTitleText = css`
48+
margin-left: 12px;
49+
font-weight: bold;
50+
`
51+
52+
export const item = (theme: ThemeType) => css`
53+
display: flex;
54+
padding: 10px 12px;
55+
text-decoration: none;
56+
min-height: 40px;
57+
box-sizing: border-box;
58+
border-radius: 8px;
59+
color: ${get(theme, `ContentMenu.item.color`)};
60+
transition: all 0.25s;
61+
position: relative;
62+
overflow: hidden;
63+
64+
&:hover {
65+
text-decoration: none !important;
66+
color: ${get(theme, `ContentMenu.item.hover.color`)};
67+
68+
.icon {
69+
color: ${get(theme, `ContentMenu.item.hover.icon.color`)};
70+
}
71+
}
72+
`
73+
74+
export const activeItem = (theme: ThemeType) => css`
75+
color: ${get(theme, `ContentMenu.item.active.color`)};
76+
background: ${get(theme, `ContentMenu.item.active.background`)};
77+
78+
.icon {
79+
color: ${get(theme, `ContentMenu.item.active.icon.color`)}!important;
80+
}
81+
82+
&:hover {
83+
text-decoration: none !important;
84+
color: ${get(theme, `ContentMenu.item.active.hover.color`)};
85+
}
86+
`
87+
88+
export const arrow = css`
89+
position: absolute;
90+
right: 8px;
91+
top: 50%;
92+
transform: translateY(-50%);
93+
width: 10px;
94+
height: 10px;
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
transition: all 0.25s;
99+
`
100+
101+
export const activeArrow = css`
102+
transform: translateY(-50%) rotate(180deg);
103+
`
104+
105+
export const subItems = css`
106+
max-height: 0;
107+
overflow: hidden;
108+
transition: all 0.45s;
109+
`
110+
111+
export const subItemsList = css`
112+
margin: 0;
113+
padding: 10px 0 0 20px;
114+
list-style: none;
115+
`
116+
117+
export const subItemLink = (theme: ThemeType) => css`
118+
display: block;
119+
position: relative;
120+
padding: 8px 8px 8px 20px;
121+
white-space: nowrap;
122+
margin: 4px 0 4px 0;
123+
color: ${get(theme, `ContentMenu.subItem.color`)};
124+
125+
&:hover {
126+
color: ${get(theme, `ContentMenu.subItem.hover.color`)};
127+
}
128+
`
129+
130+
export const subItemLinkActive = (theme: ThemeType) => css`
131+
color: ${get(theme, `ContentMenu.subItem.active.color`)};
132+
`
133+
134+
export const line = css`
135+
width: 14px;
136+
height: 55px;
137+
position: absolute;
138+
left: 0;
139+
bottom: 50%;
140+
`

0 commit comments

Comments
 (0)