(key: T, value: unknown) {
if (this.isDisabled || !(key in LocalStorage)) {
return
}
- if (isString(value)){
+ if (isString(value)) {
return localStorage.setItem(key, value)
}
localStorage.setItem(key, JSON.stringify(value))
}
+
public clear(key?: LocalStorageKeys): void {
if (key) {
return localStorage.removeItem(key)
@@ -41,7 +43,7 @@ export class LocalStorageClient {
const isJson = (value: string) => {
try {
JSON.parse(value)
- } catch (e) {
+ } catch (error) {
return false
}
return true
diff --git a/libs/client-shared/src/providers/ErrorBoundary/ui/ErrorTemplate.tsx b/libs/client-shared/src/providers/ErrorBoundary/ui/ErrorTemplate.tsx
deleted file mode 100644
index a6421730..00000000
--- a/libs/client-shared/src/providers/ErrorBoundary/ui/ErrorTemplate.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-
-interface ErrorTemplateProps {
- errorInfo: string
-}
-
-const ErrorTemplate = ({ errorInfo }: ErrorTemplateProps) => {
- return
- Custom Error Boundary.
-
-}
-
-
-export default ErrorTemplate
diff --git a/libs/client-shared/src/providers/ErrorBoundary/ErrorBoundary.tsx b/libs/client-shared/src/providers/error-boundary/error-boundary.tsx
similarity index 80%
rename from libs/client-shared/src/providers/ErrorBoundary/ErrorBoundary.tsx
rename to libs/client-shared/src/providers/error-boundary/error-boundary.tsx
index f9ab9036..3e913420 100644
--- a/libs/client-shared/src/providers/ErrorBoundary/ErrorBoundary.tsx
+++ b/libs/client-shared/src/providers/error-boundary/error-boundary.tsx
@@ -2,7 +2,7 @@ import { useErrorBoundary } from 'preact/hooks'
import { WithPreactChildren } from '../../types'
-import ErrorTemplate from './ui/ErrorTemplate'
+import ErrorTemplate from './ui/error-template'
const ErrorBoundary = ({ children }: WithPreactChildren) => {
const [error] = useErrorBoundary()
@@ -13,9 +13,7 @@ const ErrorBoundary = ({ children }: WithPreactChildren) => {
return
}
- return <>
- {children}
-
+ return <>{children}
}
export default ErrorBoundary
diff --git a/libs/client-shared/src/providers/error-boundary/ui/error-template.tsx b/libs/client-shared/src/providers/error-boundary/ui/error-template.tsx
new file mode 100644
index 00000000..887cce19
--- /dev/null
+++ b/libs/client-shared/src/providers/error-boundary/ui/error-template.tsx
@@ -0,0 +1,9 @@
+const ErrorTemplate = () => {
+ return (
+
+ Custom Error Boundary.
+
+ )
+}
+
+export default ErrorTemplate
diff --git a/libs/client-shared/src/providers/index.ts b/libs/client-shared/src/providers/index.ts
index 2c5ef5b7..f6eac2cc 100644
--- a/libs/client-shared/src/providers/index.ts
+++ b/libs/client-shared/src/providers/index.ts
@@ -1,3 +1,6 @@
-export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary'
-export { NotificationsContext, default as NotificationsProvider } from './Notifications/ui/NotificationsProvider'
-export { default as AnimationProvider } from './WithAnimations/AnimationProvider'
+export { default as ErrorBoundary } from './error-boundary/error-boundary'
+export {
+ NotificationsContext,
+ default as NotificationsProvider
+} from './notifications/ui/notifications-provider'
+export { default as AnimationProvider } from './with-animations/animation-provider'
diff --git a/libs/client-shared/src/providers/Notifications/ui/NotificationsProvider.tsx b/libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx
similarity index 76%
rename from libs/client-shared/src/providers/Notifications/ui/NotificationsProvider.tsx
rename to libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx
index cd5fe2b4..de5667d6 100644
--- a/libs/client-shared/src/providers/Notifications/ui/NotificationsProvider.tsx
+++ b/libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx
@@ -3,7 +3,6 @@ import { message } from 'antd'
import { WithChildren } from '../../../types'
-
interface UserMessage {
type?: 'success' | 'info' | 'error'
message: string
@@ -13,7 +12,9 @@ interface NotificationsPayload {
open: (args: UserMessage) => void
}
-export const NotificationsContext = createContext({} as NotificationsPayload)
+export const NotificationsContext = createContext(
+ {} as NotificationsPayload
+)
const NotificationsProvider = ({ children }: WithChildren) => {
const [messageApi, contextHolder] = message.useMessage()
@@ -26,14 +27,14 @@ const NotificationsProvider = ({ children }: WithChildren) => {
})
}
- return <>
- {contextHolder}
-
- {children}
-
-
+ return (
+ <>
+ {contextHolder}
+
+ {children}
+
+
+ )
}
-
-
export default NotificationsProvider
diff --git a/libs/client-shared/src/providers/WithAnimations/AnimationProvider.tsx b/libs/client-shared/src/providers/with-animations/animation-provider.tsx
similarity index 75%
rename from libs/client-shared/src/providers/WithAnimations/AnimationProvider.tsx
rename to libs/client-shared/src/providers/with-animations/animation-provider.tsx
index 5ca090d3..a4dfab6b 100644
--- a/libs/client-shared/src/providers/WithAnimations/AnimationProvider.tsx
+++ b/libs/client-shared/src/providers/with-animations/animation-provider.tsx
@@ -4,7 +4,6 @@ import { useBooleanState } from '../../hooks'
import { Display } from '../../lib/components'
import { GestureType, SpringType, WithChildren } from '../../types'
-
type AnimationContextPayload = Partial<{
Gesture: GestureType
Spring: SpringType
@@ -36,17 +35,20 @@ const AnimationProvider = ({ children }: WithChildren) => {
loadLibraries()
}, [])
- const animationPayload: AnimationContextPayload = useMemo(() => ({
- Spring: SpringRef.current,
- Gesture: GestureRef.current,
- isLoaded: loader.val
- }), [loader.val])
-
- return
-
- {children}
-
-
+ const animationPayload: AnimationContextPayload = useMemo(
+ () => ({
+ Spring: SpringRef.current,
+ Gesture: GestureRef.current,
+ isLoaded: loader.val
+ }),
+ [loader.val]
+ )
+
+ return (
+
+ {children}
+
+ )
}
export const useAnimations = () => {
diff --git a/libs/client-shared/src/styles/mixins.ts b/libs/client-shared/src/styles/mixins.ts
index ab3b0667..9912a56a 100644
--- a/libs/client-shared/src/styles/mixins.ts
+++ b/libs/client-shared/src/styles/mixins.ts
@@ -1,4 +1,4 @@
-import { css, DefaultTheme } from 'styled-components'
+import { css } from 'styled-components'
export const wh = (w = '100%', h = w) => css`
width: ${w};
@@ -23,17 +23,20 @@ export const flex = (jc = 'flex-start', ai = 'stretch', dir = 'row') => css`
export const hover = (color: string) => css`
transition: color 200ms;
&:hover {
- color: ${color}
+ color: ${color};
}
`
type Font = 'Poppins' | 'Consolas'
-export const font = (font : Font) => css`
+export const font = (font: Font) => css`
font-family: '${font}', sans-serif;
`
-export const antdColor = (color: string) => ({ theme } : any) => `${theme[color]} !important;`
+export const antdColor =
+ (color: string) =>
+ ({ theme }: any) =>
+ `${theme[color]} !important;`
export const customScrollbar = (elem = '&') => css`
${elem}::-webkit-scrollbar {
@@ -62,7 +65,9 @@ type AbsoluteProps = Partial<{
export const absolute = (props: AbsoluteProps) => css`
position: absolute;
- ${Object.entries(props).map(([key, value]) => `${key}: ${value};`).join('\n')}
+ ${Object.entries(props)
+ .map(([key, value]) => `${key}: ${value};`)
+ .join('\n')}
`
export const margin = (left: number, top: number) => css`
diff --git a/libs/client-shared/src/styles/variables.ts b/libs/client-shared/src/styles/variables.ts
index ca0c7661..77cf1704 100644
--- a/libs/client-shared/src/styles/variables.ts
+++ b/libs/client-shared/src/styles/variables.ts
@@ -1,2 +1 @@
export const br = '1px solid'
-
diff --git a/libs/client-shared/src/types/common/common.ts b/libs/client-shared/src/types/common/common.ts
index 511f8634..cfd7af32 100644
--- a/libs/client-shared/src/types/common/common.ts
+++ b/libs/client-shared/src/types/common/common.ts
@@ -15,14 +15,14 @@ export type WithChildren = T & {
children: ReactElement | ReactNode
}
-export type TargetKey = MouseEvent | KeyboardEvent | string;
+export type TargetKey = MouseEvent | KeyboardEvent | string
export type Nullable = T | null
export type Undefinable = T | undefined
-export type ValueOf = T[keyof T];
+export type ValueOf = T[keyof T]
export type Keys = T[number]
-export type Hex = `#${string}`;
+export type Hex = `#${string}`
diff --git a/libs/client-shared/src/types/common/typeGuards.ts b/libs/client-shared/src/types/common/type-guards.ts
similarity index 100%
rename from libs/client-shared/src/types/common/typeGuards.ts
rename to libs/client-shared/src/types/common/type-guards.ts
diff --git a/libs/client-shared/src/types/index.ts b/libs/client-shared/src/types/index.ts
index c6d489bd..6ff1b0c3 100644
--- a/libs/client-shared/src/types/index.ts
+++ b/libs/client-shared/src/types/index.ts
@@ -1,4 +1,4 @@
export * from './common/common'
-export * from './common/typeGuards'
+export * from './common/type-guards'
export * from './lib/animations'
export * from './lib/context'
diff --git a/libs/client-shared/src/ui/Modal/index.ts b/libs/client-shared/src/ui/Modal/index.ts
deleted file mode 100644
index 8a5d3bdd..00000000
--- a/libs/client-shared/src/ui/Modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Modal } from './ui/Modal'
diff --git a/libs/client-shared/src/ui/ColorButton/ColorButton.tsx b/libs/client-shared/src/ui/color-button/color-button.tsx
similarity index 72%
rename from libs/client-shared/src/ui/ColorButton/ColorButton.tsx
rename to libs/client-shared/src/ui/color-button/color-button.tsx
index fede8f2f..62de0398 100644
--- a/libs/client-shared/src/ui/ColorButton/ColorButton.tsx
+++ b/libs/client-shared/src/ui/color-button/color-button.tsx
@@ -3,20 +3,20 @@ import { ButtonProps } from 'antd/es/button'
import { WithChildren } from '../../types'
-type ColorButtonProps = ButtonProps & WithChildren<{
- override: string
-}>
-
+type ColorButtonProps = ButtonProps &
+ WithChildren<{
+ override: string
+ }>
const ColorButton = ({ children, override, ...props }: ColorButtonProps) => {
const modifiedTheme = {
- token: { colorPrimary: override }
+ token: { colorPrimary: override }
}
return (
-
+
)
}
diff --git a/libs/client-shared/src/ui/index.ts b/libs/client-shared/src/ui/index.ts
index 34cce506..4aaf03a7 100644
--- a/libs/client-shared/src/ui/index.ts
+++ b/libs/client-shared/src/ui/index.ts
@@ -1,2 +1,3 @@
-export { default as ColorButton } from './ColorButton/ColorButton'
-export { Modal } from './Modal'
+export { default as ColorButton } from './color-button/color-button'
+export { Modal } from './modal'
+export { Popover } from './popover'
diff --git a/libs/client-shared/src/ui/Modal/hooks/useModalTransitions.ts b/libs/client-shared/src/ui/modal/hooks/use-modal-transitions.ts
similarity index 68%
rename from libs/client-shared/src/ui/Modal/hooks/useModalTransitions.ts
rename to libs/client-shared/src/ui/modal/hooks/use-modal-transitions.ts
index 92595a4c..2faa5e1a 100644
--- a/libs/client-shared/src/ui/Modal/hooks/useModalTransitions.ts
+++ b/libs/client-shared/src/ui/modal/hooks/use-modal-transitions.ts
@@ -1,7 +1,7 @@
export const useModalTransitions = () => {
return {
opacity: {
- from: () => ({ opacity: 0 }),
+ from: () => ({ opacity: 0 }),
to: () => ({ opacity: 1 })
},
transform: {
@@ -10,7 +10,9 @@ export const useModalTransitions = () => {
x: -150
}),
to: (isOpen: boolean) => ({
- transform: isOpen ? 'scale(1.0) rotate(0deg)' : 'scale(0.9) rotate(8deg)',
+ transform: isOpen
+ ? 'scale(1.0) rotate(0deg)'
+ : 'scale(0.9) rotate(8deg)',
x: isOpen ? 0 : -150
})
}
diff --git a/libs/client-shared/src/ui/modal/index.ts b/libs/client-shared/src/ui/modal/index.ts
new file mode 100644
index 00000000..cc487f54
--- /dev/null
+++ b/libs/client-shared/src/ui/modal/index.ts
@@ -0,0 +1 @@
+export { default as Modal } from './ui/modal'
diff --git a/libs/client-shared/src/ui/Modal/ui/Modal.styles.ts b/libs/client-shared/src/ui/modal/ui/modal.styles.ts
similarity index 82%
rename from libs/client-shared/src/ui/Modal/ui/Modal.styles.ts
rename to libs/client-shared/src/ui/modal/ui/modal.styles.ts
index 541674bd..be6c0c67 100644
--- a/libs/client-shared/src/ui/Modal/ui/Modal.styles.ts
+++ b/libs/client-shared/src/ui/modal/ui/modal.styles.ts
@@ -1,6 +1,13 @@
import styled from 'styled-components'
-import { absolute, br, color, customScrollbar, flex, shadow, wh } from '../../../styles'
+import {
+ absolute,
+ color,
+ customScrollbar,
+ flex,
+ shadow,
+ wh
+} from '../../../styles'
export const ModalBackground = styled.div`
${flex('center', 'center')};
@@ -8,7 +15,7 @@ export const ModalBackground = styled.div`
left: '0',
top: '0'
})}
- ${wh('100vw','100vh')};
+ ${wh('100vw', '100vh')};
background: rgba(0, 0, 0, 0.44);
z-index: 100;
`
@@ -16,7 +23,7 @@ export const ModalBackground = styled.div`
export const ModalStyles = styled.div`
display: grid;
position: relative;
- ${wh('50vw','60vh')};
+ ${wh('50vw', '60vh')};
background: ${color('grey')};
border: 2px solid ${color('lightGrey')};
min-height: 300px;
@@ -32,10 +39,9 @@ export const ModalStyles = styled.div`
export const ModalContainer = styled.div`
margin: 0 auto;
margin-top: 18px;
- ${wh('60%','100%')}
+ ${wh('60%', '100%')}
& > * {
cursor: initial;
color: ${color('light')};
}
`
-
diff --git a/libs/client-shared/src/ui/Modal/ui/Modal.tsx b/libs/client-shared/src/ui/modal/ui/modal.tsx
similarity index 52%
rename from libs/client-shared/src/ui/Modal/ui/Modal.tsx
rename to libs/client-shared/src/ui/modal/ui/modal.tsx
index a0d516a4..6b9e2f12 100644
--- a/libs/client-shared/src/ui/Modal/ui/Modal.tsx
+++ b/libs/client-shared/src/ui/modal/ui/modal.tsx
@@ -3,11 +3,15 @@ import Scrollbar from 'react-smooth-scrollbar'
import { Portal } from '@reach/portal'
-import { AnimationProvider, Display, useAnimations } from '../../../lib/components'
+import {
+ AnimationProvider,
+ Display,
+ useAnimations
+} from '../../../lib/components'
import { WithChildren } from '../../../types'
-import { useModalTransitions } from '../hooks/useModalTransitions'
+import { useModalTransitions } from '../hooks/use-modal-transitions'
-import { ModalBackground, ModalContainer, ModalStyles } from './Modal.styles'
+import { ModalBackground, ModalContainer, ModalStyles } from './modal.styles'
type ModalProps = WithChildren<{
isOpen: boolean
@@ -41,7 +45,12 @@ export const Modal = ({ onClose, isOpen, children }: ModalProps) => {
const bind = Gesture.useDrag(
({ offset: [ox, oy], down }) => {
- api.start({ y: down ? oy : 0, immediate: false, x: down ? ox : 0, scale: down ? 1.07 : 1 })
+ api.start({
+ y: down ? oy : 0,
+ immediate: false,
+ x: down ? ox : 0,
+ scale: down ? 1.07 : 1
+ })
},
{ from: () => [0, 0], filterTaps: true, rubberband: true, delay: 200 }
)
@@ -50,35 +59,38 @@ export const Modal = ({ onClose, isOpen, children }: ModalProps) => {
e.stopPropagation()
}
- return <>
- {containerTransition(
- (spring, item) =>
-
-
-
-
-
-
- {children}
-
-
-
-
-
- )
- }
+ return (
+ <>
+ {containerTransition((spring, item) => (
+
+
+
+
+
+ {children}
+
+
+
+
+
+ ))}
+ )
}
const ModalWrapper = (props: ModalProps) => {
- return
-
-
+ return (
+
+
+
+ )
}
export default ModalWrapper
diff --git a/libs/client-shared/src/ui/popover/hooks/index.ts b/libs/client-shared/src/ui/popover/hooks/index.ts
new file mode 100644
index 00000000..b8be8b84
--- /dev/null
+++ b/libs/client-shared/src/ui/popover/hooks/index.ts
@@ -0,0 +1 @@
+export { usePopoverAnimation } from './use-popover-animation'
diff --git a/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts b/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts
new file mode 100644
index 00000000..dfda4e81
--- /dev/null
+++ b/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts
@@ -0,0 +1,58 @@
+import { useAnimations } from '../../../providers/with-animations/animation-provider'
+import { VoidFunction } from '../../../types'
+
+export const usePopoverAnimation = (
+ closeCallback: VoidFunction,
+ height: number
+) => {
+ const { Spring, Gesture } = useAnimations()
+ const [{ y }, api] = Spring.useSpring(() => ({ y: height }))
+
+ const open = () => {
+ api.start({ y: 0, immediate: false, config: Spring.config.gentle })
+ }
+
+ const close = (velocity = 0) => {
+ closeCallback()
+ api.start({
+ y: height,
+ immediate: false,
+ config: { ...Spring.config.stiff, velocity }
+ })
+ }
+
+ const bind = Gesture.useDrag(
+ ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], cancel }) => {
+ if (oy < -70) cancel()
+ if (last) {
+ oy > height * 0.5 || (vy > 0.5 && dy === 1) ? close(vy) : open()
+ } else api.start({ y: oy, immediate: dy === -1 })
+ },
+ {
+ from: () => [0, y.get()],
+ filterTaps: true,
+ bounds: { top: 0 },
+ rubberband: true
+ }
+ )
+
+ const display = y.to((py) => (py < height ? 'block' : 'none'))
+
+ const toggle = (isOpened: boolean) => {
+ if (isOpened) {
+ open()
+ } else {
+ close()
+ }
+ }
+
+ return {
+ toggle,
+ bind,
+ div: Spring.a.div,
+ springs: {
+ display,
+ y
+ }
+ }
+}
diff --git a/libs/client-shared/src/ui/popover/index.ts b/libs/client-shared/src/ui/popover/index.ts
new file mode 100644
index 00000000..91436cb5
--- /dev/null
+++ b/libs/client-shared/src/ui/popover/index.ts
@@ -0,0 +1 @@
+export { default as Popover } from './ui/popover'
diff --git a/libs/client-shared/src/ui/popover/ui/popover.styles.tsx b/libs/client-shared/src/ui/popover/ui/popover.styles.tsx
new file mode 100644
index 00000000..e932ceb1
--- /dev/null
+++ b/libs/client-shared/src/ui/popover/ui/popover.styles.tsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+
+import { color, customScrollbar } from '../../../styles'
+
+interface PopoverStylesProps {
+ readonly $bottom: number
+}
+
+export const PopoverStyles = styled.div`
+ padding-left: 15px;
+ z-index: 15;
+ position: fixed;
+ right: 0;
+ height: calc(100vh + 100px);
+ width: calc(100% - 54px);
+ border-radius: 6px 6px 0;
+ background: ${color('darkBlue')};
+ border-top: 2px solid ${color('lightGrey')};
+ touch-action: none;
+ bottom: ${({ $bottom }) => `calc(-100vh + ${$bottom - 100}px)`};
+ overflow-y: auto;
+ box-sizing: border-box;
+ scroll-behavior: smooth;
+ ${customScrollbar()};
+`
diff --git a/libs/client-shared/src/ui/popover/ui/popover.tsx b/libs/client-shared/src/ui/popover/ui/popover.tsx
new file mode 100644
index 00000000..077a13d0
--- /dev/null
+++ b/libs/client-shared/src/ui/popover/ui/popover.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+
+import { AnimationProvider } from '../../../providers'
+import { VoidFunction, WithChildren } from '../../../types'
+import { usePopoverAnimation } from '../hooks'
+
+import { PopoverStyles } from './popover.styles'
+
+type PopoverProps = WithChildren<{
+ onClose: VoidFunction
+ isOpen: boolean
+ height: number
+}>
+
+const Popover = ({ children, onClose, isOpen, height }: PopoverProps) => {
+ const motion = usePopoverAnimation(onClose, height)
+
+ useEffect(() => {
+ motion.toggle(isOpen)
+ }, [isOpen])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export default (props: PopoverProps) => {
+ return (
+
+
+
+ )
+}
diff --git a/libs/client-shared/vite.config.ts b/libs/client-shared/vite.config.ts
index 0ce4545f..fd5b3523 100644
--- a/libs/client-shared/vite.config.ts
+++ b/libs/client-shared/vite.config.ts
@@ -44,8 +44,12 @@ export default defineConfig({
},
rollupOptions: {
// External packages that should not be bundled into your library.
- external: ['react', 'react-dom',
- 'react/jsx-runtime', 'react-smooth-scrollbar']
+ external: [
+ 'react',
+ 'react-dom',
+ 'react/jsx-runtime',
+ 'react-smooth-scrollbar'
+ ]
}
},
diff --git a/libs/config/.eslintrc.json b/libs/config/.eslintrc.json
index 052a5874..5485fc4e 100644
--- a/libs/config/.eslintrc.json
+++ b/libs/config/.eslintrc.json
@@ -1,4 +1,4 @@
{
- "extends": ["../../.eslintrc.json"],
+ "extends": ["../../.eslintrc.js"],
"ignorePatterns": ["!**/*"]
}
diff --git a/libs/config/src/env/client.ts b/libs/config/src/env/client.ts
index 084b87d4..e5f69d35 100644
--- a/libs/config/src/env/client.ts
+++ b/libs/config/src/env/client.ts
@@ -1 +1 @@
-export const clientUrl = process.env['CLIENT_URL'] ?? 'http://localhost:3000'
+export const clientUrl = process.env.CLIENT_URL ?? 'http://localhost:3000'
diff --git a/libs/config/src/env/server.ts b/libs/config/src/env/server.ts
index 140ed1c2..6a4d170e 100644
--- a/libs/config/src/env/server.ts
+++ b/libs/config/src/env/server.ts
@@ -1,11 +1,11 @@
-export const serverPrefix = process.env['SERVER_PREFIX'] ?? ''
+export const serverPrefix = process.env.SERVER_PREFIX ?? ''
-export const serverPort = process.env['SERVER_PORT'] ?? 6868
+export const serverPort = process.env.SERVER_PORT ?? 6868
-export const compilerApiUrl = process.env['CODE_COMPILER_API_URL'] ?? 'https://api.codex.jaagrav.in'
-
-export const serverUrl = process.env['SERVER_URL'] ?? 'http://localhost:6868'
+export const compilerApiUrl =
+ process.env.CODE_COMPILER_API_URL ?? 'https://api.codex.jaagrav.in'
+export const serverUrl = process.env.SERVER_URL ?? 'http://localhost:6868'
export const EndPoints = {
CODE_EXECUTOR_API: 'execute'
diff --git a/libs/editor/.eslintrc.json b/libs/editor/.eslintrc.json
index 8fc394d4..bd46ea64 100644
--- a/libs/editor/.eslintrc.json
+++ b/libs/editor/.eslintrc.json
@@ -1,5 +1,5 @@
{
- "extends": ["../../.eslintrc.json"],
+ "extends": ["../../.eslintrc.js"],
"ignorePatterns": ["!**/*"],
"parser": "@typescript-eslint/parser",
"globals": {
diff --git a/libs/editor/src/app/Editor.tsx b/libs/editor/src/app/Editor.tsx
deleted file mode 100644
index 0b38280a..00000000
--- a/libs/editor/src/app/Editor.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Settings } from '@/components/Settings'
-import { Terminal } from '@/components/Terminal'
-import { Aside } from '@/modules/Aside'
-import { EditorContent } from '@/modules/EditorContent'
-import { Header } from '@/modules/Header'
-
-import { EditorStoreProvider } from './providers/EditorStore'
-import { ModalsContextProvider } from './providers/ModalsProvider'
-import { ThemeLoader } from './providers/ThemeLoader'
-import { EditorStyles, EditorWrapper } from './styles/Editor.styles'
-
-import { NotificationsProvider, Page, useOverflow } from '$/client-shared'
-
-
-export const Editor = () => {
- useOverflow()
-
- return
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-}
-
-export default Editor
diff --git a/libs/editor/src/app/editor.tsx b/libs/editor/src/app/editor.tsx
new file mode 100644
index 00000000..6c19adb4
--- /dev/null
+++ b/libs/editor/src/app/editor.tsx
@@ -0,0 +1,42 @@
+import { HtmlPreview } from '@/components/html-preview'
+import { Settings } from '@/components/settings'
+import { Terminal } from '@/components/terminal'
+import { Aside } from '@/modules/aside'
+import { EditorContent } from '@/modules/editor-content'
+import { Header } from '@/modules/header'
+
+import { EditorStoreProvider } from './providers/editor-store'
+import { ModalsContextProvider } from './providers/modals-provider'
+import { ThemeLoader } from './providers/theme-loader'
+import { EditorStyles, EditorWrapper } from './styles/editor.styles'
+
+import { NotificationsProvider, Page, useOverflow } from '$/client-shared'
+
+export const Editor = () => {
+ useOverflow()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Editor
diff --git a/libs/editor/src/app/index.ts b/libs/editor/src/app/index.ts
index 166ade51..e539cdb3 100644
--- a/libs/editor/src/app/index.ts
+++ b/libs/editor/src/app/index.ts
@@ -1,5 +1,10 @@
-export { default as Editor } from './Editor'
-export { EditorActions,EditorGetters,EditorStore, EditorStoreContext } from './providers/EditorStore'
-export type { ModalsPayload,ModalsState } from './providers/ModalsProvider'
-export { ModalsContext } from './providers/ModalsProvider'
-export { useCustomTheme } from './providers/ThemeLoader'
+export { default as Editor } from './editor'
+export {
+ EditorActions,
+ EditorGetters,
+ EditorStore,
+ EditorStoreContext
+} from './providers/editor-store'
+export type { ModalsPayload, ModalsState } from './providers/modals-provider'
+export { ModalsContext } from './providers/modals-provider'
+export { useCustomTheme } from './providers/theme-loader'
diff --git a/libs/editor/src/app/providers/ModalsProvider/index.ts b/libs/editor/src/app/providers/ModalsProvider/index.ts
deleted file mode 100644
index 895f4ef4..00000000
--- a/libs/editor/src/app/providers/ModalsProvider/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { ModalsPayload,ModalsState } from './types'
-export { ModalsContext, default as ModalsContextProvider } from './ui/ModalsContextProvider'
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/index.ts b/libs/editor/src/app/providers/ThemeLoader/hooks/index.ts
deleted file mode 100644
index a25975a7..00000000
--- a/libs/editor/src/app/providers/ThemeLoader/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { useCustomTheme } from './useCustomTheme/useCustomTheme'
-export { useThemeLoader } from './useThemeLoader/useThemeLoader'
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/assertThemeObject.ts b/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/assertThemeObject.ts
deleted file mode 100644
index df6bea02..00000000
--- a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/assertThemeObject.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { editor } from 'monaco-editor'
-
-import EditorErrors from '@/shared/errors'
-
-import { isObject } from '$/client-shared'
-
-export function assertThemeObject(value: unknown):
- asserts value is editor.IStandaloneThemeData {
-
- if (isObject(value) && 'base' in value
- && typeof value.base === 'string'
- && 'colors' in value && isObject(value.colors)
- ) {
- return
- }
-
- throw new Error(EditorErrors.WrongJsonObject('ThemeObject'))
-}
diff --git a/libs/editor/src/app/providers/ThemeLoader/index.ts b/libs/editor/src/app/providers/ThemeLoader/index.ts
deleted file mode 100644
index de8d7db7..00000000
--- a/libs/editor/src/app/providers/ThemeLoader/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hooks'
-export { default as ThemeLoader } from './ui/ThemeLoader'
diff --git a/libs/editor/src/app/providers/EditorStore/config/editor.actions.ts b/libs/editor/src/app/providers/editor-store/config/editor.actions.ts
similarity index 89%
rename from libs/editor/src/app/providers/EditorStore/config/editor.actions.ts
rename to libs/editor/src/app/providers/editor-store/config/editor.actions.ts
index 351ba192..f67213bf 100644
--- a/libs/editor/src/app/providers/EditorStore/config/editor.actions.ts
+++ b/libs/editor/src/app/providers/editor-store/config/editor.actions.ts
@@ -1,16 +1,15 @@
import { makeAutoObservable } from 'mobx'
import { EditorGetters } from '@/app'
-import { TabsActions } from '@/components/Tabs'
-import { TerminalActions } from '@/components/Terminal'
-import { EditorContentActions } from '@/modules/EditorContent'
+import { TabsActions } from '@/components/tabs'
+import { TerminalActions } from '@/components/terminal'
+import { EditorContentActions } from '@/modules/editor-content'
import { FontSizes, TabSizes, Themes } from '@/shared/consts'
import EditorStore from './editor.store'
import { Hex, LocalStorageClient } from '$/client-shared'
-
class EditorActions {
private state: EditorStore
private readonly getters: EditorGetters
@@ -57,5 +56,4 @@ class EditorActions {
}
}
-
export default EditorActions
diff --git a/libs/editor/src/app/providers/EditorStore/config/editor.getters.ts b/libs/editor/src/app/providers/editor-store/config/editor.getters.ts
similarity index 93%
rename from libs/editor/src/app/providers/EditorStore/config/editor.getters.ts
rename to libs/editor/src/app/providers/editor-store/config/editor.getters.ts
index ea4ae312..78d8d575 100644
--- a/libs/editor/src/app/providers/EditorStore/config/editor.getters.ts
+++ b/libs/editor/src/app/providers/editor-store/config/editor.getters.ts
@@ -1,11 +1,10 @@
import { makeAutoObservable } from 'mobx'
import { EditorStore } from '@/app'
-import { ContentTab } from '@/components/Tabs'
+import { ContentTab } from '@/components/tabs'
import { executorAllowedLanguages, LanguagesValues } from '@/shared/consts'
-
-class EditorGetters{
+class EditorGetters {
private state: EditorStore
constructor(editorState: EditorStore) {
@@ -40,5 +39,4 @@ class EditorGetters{
}
}
-
export default EditorGetters
diff --git a/libs/editor/src/app/providers/EditorStore/config/editor.services.ts b/libs/editor/src/app/providers/editor-store/config/editor.services.ts
similarity index 91%
rename from libs/editor/src/app/providers/EditorStore/config/editor.services.ts
rename to libs/editor/src/app/providers/editor-store/config/editor.services.ts
index c7b58c8d..029e099c 100644
--- a/libs/editor/src/app/providers/EditorStore/config/editor.services.ts
+++ b/libs/editor/src/app/providers/editor-store/config/editor.services.ts
@@ -1,12 +1,11 @@
import { makeAutoObservable } from 'mobx'
-import { ExecuteServices } from '@/modules/Header'
+import { ExecuteServices } from '@/modules/header'
import EditorActions from './editor.actions'
import EditorGetters from './editor.getters'
import EditorStore from './editor.store'
-
class EditorServices {
private state: EditorStore
private readonly getters: EditorGetters
@@ -23,5 +22,4 @@ class EditorServices {
}
}
-
export default EditorServices
diff --git a/libs/editor/src/app/providers/EditorStore/config/editor.store.ts b/libs/editor/src/app/providers/editor-store/config/editor.store.ts
similarity index 64%
rename from libs/editor/src/app/providers/EditorStore/config/editor.store.ts
rename to libs/editor/src/app/providers/editor-store/config/editor.store.ts
index 7a8747da..04800e76 100644
--- a/libs/editor/src/app/providers/EditorStore/config/editor.store.ts
+++ b/libs/editor/src/app/providers/editor-store/config/editor.store.ts
@@ -1,8 +1,8 @@
import { makeAutoObservable } from 'mobx'
-import { ContentTab } from '@/components/Tabs'
-import { ContentTabInstance } from '@/components/Tabs/types'
-import { ExecuteMessage } from '@/components/Terminal'
+import { ContentTab } from '@/components/tabs'
+import { ContentTabInstance } from '@/components/tabs/types'
+import { ExecuteMessage } from '@/components/terminal'
import { FontSizes, TabSizes, Themes } from '@/shared/consts'
import EditorActions from './editor.actions'
@@ -11,7 +11,7 @@ import EditorServices from './editor.services'
import { Hex, LocalStorageClient } from '$/client-shared'
-class EditorStore{
+class EditorStore {
activeKey = ''
content: ContentTab[] = []
theme: Themes = 'vs-dark'
@@ -19,14 +19,13 @@ class EditorStore{
tabSize: TabSizes = 4
customBackground: Hex = '#3d3d3d'
customColor: Hex = '#3d3d3d'
- isStorageDisabled: boolean = false
+ isStorageDisabled = false
executeMessages: ExecuteMessage[] = []
readonly getters: EditorGetters
readonly actions: EditorActions
readonly services: EditorServices
storage: LocalStorageClient
-
constructor() {
makeAutoObservable(this)
const storage = new LocalStorageClient(this.isStorageDisabled)
@@ -37,15 +36,28 @@ class EditorStore{
this.services = new EditorServices(this)
this.theme = storage.get('EDITOR_THEME', 'vs-dark')
- this.fontSize = Number(storage.get('EDITOR_FONT_SIZE', 20)) as FontSizes
- this.tabSize = Number(storage.get('EDITOR_TAB_SIZE', 4)) as TabSizes
- this.customBackground = storage.get('EDITOR_CUSTOM_BACKGROUND', '#3d3d3d')
+ this.fontSize = Number(
+ storage.get('EDITOR_FONT_SIZE', 20)
+ ) as FontSizes
+ this.tabSize = Number(
+ storage.get('EDITOR_TAB_SIZE', 4)
+ ) as TabSizes
+ this.customBackground = storage.get(
+ 'EDITOR_CUSTOM_BACKGROUND',
+ '#3d3d3d'
+ )
this.customColor = storage.get('EDITOR_CUSTOM_COLOR', '#3d3d3d')
- const savedContent = storage.get('EDITOR_CONTENT_DATA', [])
- this.executeMessages = storage.get('EDITOR_EXECUTE_MESSAGES', [])
+ const savedContent = storage.get(
+ 'EDITOR_CONTENT_DATA',
+ []
+ )
+ this.executeMessages = storage.get(
+ 'EDITOR_EXECUTE_MESSAGES',
+ []
+ )
- if (!savedContent.length) {
+ if (savedContent.length === 0) {
this.actions.tabs.createTab()
}
@@ -58,5 +70,4 @@ class EditorStore{
}
}
-
export default EditorStore
diff --git a/libs/editor/src/app/providers/EditorStore/index.ts b/libs/editor/src/app/providers/editor-store/index.ts
similarity index 66%
rename from libs/editor/src/app/providers/EditorStore/index.ts
rename to libs/editor/src/app/providers/editor-store/index.ts
index eadb1c7c..b058b153 100644
--- a/libs/editor/src/app/providers/EditorStore/index.ts
+++ b/libs/editor/src/app/providers/editor-store/index.ts
@@ -1,4 +1,7 @@
+export { default as EditorActions } from './config/editor.actions'
export { default as EditorGetters } from './config/editor.getters'
export { default as EditorStore } from './config/editor.store'
-export { EditorStoreContext,default as EditorStoreProvider } from './ui/EditorStoreProvider'
-export { default as EditorActions } from './config/editor.actions'
+export {
+ EditorStoreContext,
+ default as EditorStoreProvider
+} from './ui/editor-store-provider'
diff --git a/libs/editor/src/app/providers/EditorStore/ui/EditorStoreProvider.tsx b/libs/editor/src/app/providers/editor-store/ui/editor-store-provider.tsx
similarity index 56%
rename from libs/editor/src/app/providers/EditorStore/ui/EditorStoreProvider.tsx
rename to libs/editor/src/app/providers/editor-store/ui/editor-store-provider.tsx
index bfcc838c..50cf784c 100644
--- a/libs/editor/src/app/providers/EditorStore/ui/EditorStoreProvider.tsx
+++ b/libs/editor/src/app/providers/editor-store/ui/editor-store-provider.tsx
@@ -4,12 +4,14 @@ import EditorStore from '../config/editor.store'
export const EditorStoreContext = createContext({} as EditorStore)
-export const EditorStoreProvider = ({ children }: {children: ReactNode}) => {
+export const EditorStoreProvider = ({ children }: { children: ReactNode }) => {
const root = new EditorStore()
- return
- {children}
-
+ return (
+
+ {children}
+
+ )
}
export default EditorStoreProvider
diff --git a/libs/editor/src/app/providers/modals-provider/index.ts b/libs/editor/src/app/providers/modals-provider/index.ts
new file mode 100644
index 00000000..040cac09
--- /dev/null
+++ b/libs/editor/src/app/providers/modals-provider/index.ts
@@ -0,0 +1,5 @@
+export type { ModalsPayload, ModalsState } from './types'
+export {
+ ModalsContext,
+ default as ModalsContextProvider
+} from './ui/modals-context-provider'
diff --git a/libs/editor/src/app/providers/ModalsProvider/types.ts b/libs/editor/src/app/providers/modals-provider/types.ts
similarity index 77%
rename from libs/editor/src/app/providers/ModalsProvider/types.ts
rename to libs/editor/src/app/providers/modals-provider/types.ts
index 2f49b82e..fb0672a9 100644
--- a/libs/editor/src/app/providers/ModalsProvider/types.ts
+++ b/libs/editor/src/app/providers/modals-provider/types.ts
@@ -1,10 +1,11 @@
-import { TerminalTabKeys } from '@/components/Terminal'
+import { TerminalTabKeys } from '@/components/terminal'
import { ReducerPayload } from '$/client-shared'
export interface ModalsState {
isTerminalOpened: boolean
isSettingsOpened: boolean
+ isHtmlPreviewOpened: boolean
selectedTerminalTab: TerminalTabKeys
}
diff --git a/libs/editor/src/app/providers/ModalsProvider/ui/ModalsContextProvider.tsx b/libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx
similarity index 58%
rename from libs/editor/src/app/providers/ModalsProvider/ui/ModalsContextProvider.tsx
rename to libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx
index e9f622e8..802501f3 100644
--- a/libs/editor/src/app/providers/ModalsProvider/ui/ModalsContextProvider.tsx
+++ b/libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx
@@ -4,15 +4,18 @@ import { ModalsPayload, ModalsState } from '../types'
import { WithChildren } from '$/client-shared'
-
export const ModalsContext = createContext({})
const ModalsContextProvider = ({ children }: WithChildren) => {
- const initialState : ModalsState = useMemo(() => ({
- isSettingsOpened: false,
- isTerminalOpened: true,
- selectedTerminalTab: 'terminal'
- }), [])
+ const initialState: ModalsState = useMemo(
+ () => ({
+ isSettingsOpened: false,
+ isHtmlPreviewOpened: true,
+ isTerminalOpened: true,
+ selectedTerminalTab: 'terminal'
+ }),
+ []
+ )
const modalsReducer = (prev: ModalsState, next: Partial) => {
return { ...prev, ...next }
@@ -21,21 +24,25 @@ const ModalsContextProvider = ({ children }: WithChildren) => {
const [state, update] = useReducer(modalsReducer, initialState)
const toggle = (prop: keyof ModalsState) => {
- if (state[prop]){
+ if (state[prop]) {
update({ [prop]: false })
} else {
update({ [prop]: true })
}
}
- const payload : ModalsPayload = useMemo(() => ({
- state, update, toggle
- }), [state])
-
- return
- {children}
-
+ const payload: ModalsPayload = useMemo(
+ () => ({
+ state,
+ update,
+ toggle
+ }),
+ [state]
+ )
+
+ return (
+ {children}
+ )
}
-
export default ModalsContextProvider
diff --git a/libs/editor/src/app/providers/theme-loader/hooks/index.ts b/libs/editor/src/app/providers/theme-loader/hooks/index.ts
new file mode 100644
index 00000000..fa3b0314
--- /dev/null
+++ b/libs/editor/src/app/providers/theme-loader/hooks/index.ts
@@ -0,0 +1,2 @@
+export { useCustomTheme } from './use-custom-theme/use-custom-theme'
+export { useThemeLoader } from './use-theme-loader/use-theme-loader'
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useCustomTheme/useCustomTheme.ts b/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts
similarity index 91%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useCustomTheme/useCustomTheme.ts
rename to libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts
index 59191d65..8ccad70b 100644
--- a/libs/editor/src/app/providers/ThemeLoader/hooks/useCustomTheme/useCustomTheme.ts
+++ b/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts
@@ -12,7 +12,7 @@ export const useCustomTheme = () => {
const monaco = useMonaco()
return ({ background, color }: CustomTheme) => {
- monaco?.editor.defineTheme(CUSTOM_THEME, {
+ monaco.editor.defineTheme(CUSTOM_THEME, {
base: 'vs',
inherit: true,
rules: [],
diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/assert-theme-object.ts b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/assert-theme-object.ts
new file mode 100644
index 00000000..205e01f0
--- /dev/null
+++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/assert-theme-object.ts
@@ -0,0 +1,21 @@
+import { editor } from 'monaco-editor'
+
+import EditorErrors from '@/shared/errors'
+
+import { isObject } from '$/client-shared'
+
+export function assertThemeObject(
+ value: unknown
+): asserts value is editor.IStandaloneThemeData {
+ if (
+ isObject(value) &&
+ 'base' in value &&
+ typeof value.base === 'string' &&
+ 'colors' in value &&
+ isObject(value.colors)
+ ) {
+ return
+ }
+
+ throw new Error(EditorErrors.WrongJsonObject('ThemeObject'))
+}
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Dracula.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dracula.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Dracula.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dracula.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Dreamweaver.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dreamweaver.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Dreamweaver.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dreamweaver.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Eiffel.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Eiffel.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Eiffel.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Eiffel.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/GitHub.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/GitHub.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/GitHub.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/GitHub.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/IDLE.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/IDLE.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/IDLE.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/IDLE.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Monokai.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Monokai.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Monokai.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Monokai.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Nord.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Nord.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Nord.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Nord.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Tomorrow.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Tomorrow.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Tomorrow.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Tomorrow.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Twilight.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Twilight.json
similarity index 100%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/themes/Twilight.json
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Twilight.json
diff --git a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/useThemeLoader.ts b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts
similarity index 75%
rename from libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/useThemeLoader.ts
rename to libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts
index 7efc0211..30d9f23c 100644
--- a/libs/editor/src/app/providers/ThemeLoader/hooks/useThemeLoader/useThemeLoader.ts
+++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts
@@ -5,9 +5,9 @@ import EditorErrors from '@/shared/errors'
import { useStore } from '@/shared/hooks'
import { useMonaco } from '@monaco-editor/react'
-import { useCustomTheme } from '../useCustomTheme/useCustomTheme'
+import { useCustomTheme } from '../use-custom-theme/use-custom-theme'
-import { assertThemeObject } from './assertThemeObject'
+import { assertThemeObject } from './assert-theme-object'
import { useBooleanState } from '$/client-shared'
@@ -21,22 +21,21 @@ export const useThemeLoader = () => {
useEffect(() => {
let processed = 0
themes.forEach(async (theme) => {
- try{
+ try {
const json: unknown = await import(`./themes/${theme}.json`)
assertThemeObject(json)
- monaco?.editor.defineTheme(theme, json)
- }
- catch (e){
+ monaco.editor.defineTheme(theme, json)
+ } catch (error) {
console.log(EditorErrors.ThemeUpload(theme))
}
processed += 1
- if (processed === themes.length){
+ if (processed === themes.length) {
defineCustomTheme({ background: customBackground, color: customColor })
- monaco?.editor.setTheme(selectedTheme)
+ monaco.editor.setTheme(selectedTheme)
loader.on()
}
diff --git a/libs/editor/src/app/providers/theme-loader/index.ts b/libs/editor/src/app/providers/theme-loader/index.ts
new file mode 100644
index 00000000..de83d817
--- /dev/null
+++ b/libs/editor/src/app/providers/theme-loader/index.ts
@@ -0,0 +1,2 @@
+export * from './hooks'
+export { default as ThemeLoader } from './ui/theme-loader'
diff --git a/libs/editor/src/app/providers/ThemeLoader/ui/ThemeLoader.tsx b/libs/editor/src/app/providers/theme-loader/ui/theme-loader.tsx
similarity index 61%
rename from libs/editor/src/app/providers/ThemeLoader/ui/ThemeLoader.tsx
rename to libs/editor/src/app/providers/theme-loader/ui/theme-loader.tsx
index 965fd9af..f547e587 100644
--- a/libs/editor/src/app/providers/ThemeLoader/ui/ThemeLoader.tsx
+++ b/libs/editor/src/app/providers/theme-loader/ui/theme-loader.tsx
@@ -1,13 +1,10 @@
-import { useThemeLoader } from './../hooks'
+import { useThemeLoader } from '../hooks'
import { Display, WithChildren } from '$/client-shared'
const ThemeLoader = ({ children }: WithChildren) => {
const isLoaded = useThemeLoader()
- return
- {children}
-
+ return {children}
}
-
export default ThemeLoader
diff --git a/libs/editor/src/app/styles/Editor.styles.ts b/libs/editor/src/app/styles/editor.styles.ts
similarity index 99%
rename from libs/editor/src/app/styles/Editor.styles.ts
rename to libs/editor/src/app/styles/editor.styles.ts
index a407de00..192b4017 100644
--- a/libs/editor/src/app/styles/Editor.styles.ts
+++ b/libs/editor/src/app/styles/editor.styles.ts
@@ -6,7 +6,6 @@ export const EditorStyles = styled.div`
${wh('100vw', '100vh')}
`
-
export const EditorWrapper = styled.div`
${wh('100%', 'calc(100% - 45px)')};
display: flex;
diff --git a/libs/editor/src/components/FontSizeSwitcher/index.ts b/libs/editor/src/components/FontSizeSwitcher/index.ts
deleted file mode 100644
index 5d5323fb..00000000
--- a/libs/editor/src/components/FontSizeSwitcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FontSizeSwitcher } from './ui/FontSizeSwitcher'
diff --git a/libs/editor/src/components/LanguageSwitcher/hooks/index.ts b/libs/editor/src/components/LanguageSwitcher/hooks/index.ts
deleted file mode 100644
index 46a4fdce..00000000
--- a/libs/editor/src/components/LanguageSwitcher/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useMappedLanguages } from './useMappedLanguages'
diff --git a/libs/editor/src/components/LanguageSwitcher/index.ts b/libs/editor/src/components/LanguageSwitcher/index.ts
deleted file mode 100644
index 737822ca..00000000
--- a/libs/editor/src/components/LanguageSwitcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as LanguageSwitcher } from './ui/LanguageSwitcher'
diff --git a/libs/editor/src/components/Settings/hooks/index.ts b/libs/editor/src/components/Settings/hooks/index.ts
deleted file mode 100644
index 9b9f3fd6..00000000
--- a/libs/editor/src/components/Settings/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useColorCallback } from './useColorCallback'
diff --git a/libs/editor/src/components/Settings/index.ts b/libs/editor/src/components/Settings/index.ts
deleted file mode 100644
index bf01bdab..00000000
--- a/libs/editor/src/components/Settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Settings } from './ui/Settings/Settings'
diff --git a/libs/editor/src/components/Settings/ui/KeyBuildings/KeyBuildings.tsx b/libs/editor/src/components/Settings/ui/KeyBuildings/KeyBuildings.tsx
deleted file mode 100644
index fff42f3e..00000000
--- a/libs/editor/src/components/Settings/ui/KeyBuildings/KeyBuildings.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Typography } from 'antd'
-
-import { KeyBuildings as Keys } from '@/shared/consts'
-
-import { KeyBuildingStyles, SettingsText } from '../Settings/Settings.styles'
-
-import { WithChildren } from '$/client-shared'
-
-type KeyBuildingProps = WithChildren<{
- keyCode: string
- experimental: boolean
-}>
-
-const KeyBuilding = ({ keyCode, children, experimental }: KeyBuildingProps) => {
- return
- {experimental && '🧪'} Alt + {keyCode}
-
- {children}
-
-
-}
-
-const KeyBuildings = () => {
- return <>
-
- Open a file on your OS
-
-
- Save a file on your OS
-
-
- Open new tab
-
-
- Close current tab
-
-
- Open/close terminal
-
-
- Open/close test cases
-
-
- Open/close settings
-
-
-}
-
-
-export default KeyBuildings
diff --git a/libs/editor/src/components/Settings/ui/Settings/Settings.tsx b/libs/editor/src/components/Settings/ui/Settings/Settings.tsx
deleted file mode 100644
index 6989e672..00000000
--- a/libs/editor/src/components/Settings/ui/Settings/Settings.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { ColorPicker, Switch } from 'antd'
-import { observer } from 'mobx-react-lite'
-
-import { FontSizeSwitcher } from '@/components/FontSizeSwitcher'
-import { LanguageSwitcher } from '@/components/LanguageSwitcher'
-import { useColorCallback } from '@/components/Settings/hooks'
-import { TabSizeSwitcher } from '@/components/TabSizeSwitcher'
-import { ThemeSwitcher } from '@/components/ThemeSwitcher'
-import { useActions, useModalsContext, useStore } from '@/shared/hooks'
-
-import KeyBuildings from '../KeyBuildings/KeyBuildings'
-
-import { Separator, SettingsItem, SettingsText, Title } from './Settings.styles'
-
-import { Modal } from '$/client-shared'
-
-const Settings = observer(() => {
- const modalsContext = useModalsContext()
- const isOpen = modalsContext.state.isSettingsOpened
- const actions = useActions()
- const { customBackground, customColor } = useStore()
-
- const closeSettings = () => {
- modalsContext.update({
- isSettingsOpened: false
- })
- }
-
- const onBackgroundChange = useColorCallback((hex) => {
- actions.changeCustomBackground(hex)
- })
-
- const onColorChange = useColorCallback((hex) => {
- actions.changeCustomColor(hex)
- })
-
- const onSwitchChange = (isChecked: boolean) => {
- actions.setIsLocalStorageDisabled(!isChecked)
- }
-
- return
- Editor settings
-
-
- Editor Theme
- Choose the code editor theme
-
-
-
-
-
- Font Size
- Choose your preferred font size
-
-
-
-
-
- Current Tab Language
- Choose the code editor language (js, py, css)
-
-
-
-
-
- Tab size
- Choose the width of a tab character
-
-
-
-
-
-
- Custom Editor Background
- Change custom background for code editor
-
-
-
-
-
- Custom Editor Color
- Change custom color for code editor
-
-
-
-
-
-
- Save editor settings to Local Storage
- All your next changes will be stored in localStorage
-
-
-
- Key buildings
-
-
-
-})
-
-
-
-export default Settings
diff --git a/libs/editor/src/components/TabSizeSwitcher/index.ts b/libs/editor/src/components/TabSizeSwitcher/index.ts
deleted file mode 100644
index 9ba29bdb..00000000
--- a/libs/editor/src/components/TabSizeSwitcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TabSizeSwitcher } from './ui/TabSizeSwitcher'
diff --git a/libs/editor/src/components/Tabs/hooks/index.ts b/libs/editor/src/components/Tabs/hooks/index.ts
deleted file mode 100644
index 6f77d31e..00000000
--- a/libs/editor/src/components/Tabs/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { useConfirm } from './useConfirm'
-export { useMappedTabs } from './useMappedTabs'
diff --git a/libs/editor/src/components/Tabs/index.ts b/libs/editor/src/components/Tabs/index.ts
deleted file mode 100644
index a881ab18..00000000
--- a/libs/editor/src/components/Tabs/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { ContentTab } from './store/contentTab'
-export { default as TabsActions } from './store/tabs.actions'
-export { default as Tabs } from './ui/Tabs'
diff --git a/libs/editor/src/components/Tabs/lib/helpers/isMaxTabsLength.ts b/libs/editor/src/components/Tabs/lib/helpers/isMaxTabsLength.ts
deleted file mode 100644
index 5bf5051a..00000000
--- a/libs/editor/src/components/Tabs/lib/helpers/isMaxTabsLength.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ContentTab } from '@/components/Tabs'
-import { maxTabsLength } from '@/shared/consts'
-
-export const isMaxTabsLength = (content: ContentTab[] ) => {
- return content.length >= maxTabsLength
-}
diff --git a/libs/editor/src/components/Tabs/lib/index.ts b/libs/editor/src/components/Tabs/lib/index.ts
deleted file mode 100644
index 2c14f211..00000000
--- a/libs/editor/src/components/Tabs/lib/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ContentTab } from '../store/contentTab'
-export { isMaxTabsLength } from './helpers/isMaxTabsLength'
diff --git a/libs/editor/src/components/Tabs/ui/Tabs.tsx b/libs/editor/src/components/Tabs/ui/Tabs.tsx
deleted file mode 100644
index 8716106e..00000000
--- a/libs/editor/src/components/Tabs/ui/Tabs.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Popconfirm } from 'antd'
-import { toJS } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { useConfirm } from '@/components/Tabs/hooks/useConfirm'
-import { useMappedTabs } from '@/components/Tabs/hooks/useMappedTabs'
-import { TabsStyles } from '@/components/Tabs/ui/Tabs.styles'
-import { maxTabsLength } from '@/shared/consts'
-import { useActions, useStore } from '@/shared/hooks'
-
-import { TargetKey } from '$/client-shared'
-
-
-const Tabs = observer(() => {
- const { activeKey, content } = useStore()
- const actions = useActions()
- const mappedTabs = useMappedTabs(content)
- const confirm = useConfirm()
-
- const onEdit = confirm.protect((
- targetKey: TargetKey,
- action: 'add' | 'remove'
- ) => {
- if (action === 'add') {
- actions.tabs.createTab()
- }
- else {
- confirm.on(targetKey as string)
- }
- })
-
- const onChange = confirm.protect((activeKey: string) => {
- actions.tabs.changeActiveTab(activeKey)
- })
-
- const deleteTask = () => {
- actions.tabs.removeTab(confirm.val as string)
- confirm.off()
- }
-
- return <>
-
- = maxTabsLength}
- />
-
-
-})
-
-export default Tabs
diff --git a/libs/editor/src/components/Terminal/hooks/index.ts b/libs/editor/src/components/Terminal/hooks/index.ts
deleted file mode 100644
index 1ce0ab67..00000000
--- a/libs/editor/src/components/Terminal/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { useTerminalAnimation } from './useTerminalAnimation'
-export { useTerminalTabs } from './useTerminalTabs'
diff --git a/libs/editor/src/components/Terminal/hooks/useTerminalAnimation.ts b/libs/editor/src/components/Terminal/hooks/useTerminalAnimation.ts
deleted file mode 100644
index da7d75d9..00000000
--- a/libs/editor/src/components/Terminal/hooks/useTerminalAnimation.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useAnimations, VoidFunction } from '$/client-shared'
-
-export const useTerminalAnimation = (closeCallback: VoidFunction) => {
- const terminalHeight = 300
- const { Spring, Gesture } = useAnimations()
- const [{ y }, api] = Spring.useSpring(() => ({ y: terminalHeight }))
-
- const open = () => {
- api.start({ y: 0, immediate: false, config: Spring.config.gentle })
- }
-
- const close = (velocity = 0) => {
- closeCallback()
- api.start({ y: terminalHeight, immediate: false, config: { ...Spring.config.stiff, velocity } })
- }
-
- const bind = Gesture.useDrag(
- ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], cancel }) => {
- if (oy < -70) cancel()
- if (last) {
- oy > terminalHeight * 0.5 || (vy > 0.5 && dy === 1) ? close(vy) : open()
- }
- else api.start({ y: oy, immediate: dy === -1 })
- },
- { from: () => [0, y.get()], filterTaps: true, bounds: { top: 0 }, rubberband: true }
- )
-
- const display = y.to((py) => (py < terminalHeight ? 'block' : 'none'))
-
- const toggle = (isOpened : boolean) => {
- if (isOpened) {
- open()
- } else{
- close()
- }
- }
-
- return {
- toggle,
- open,
- close,
- bind,
- div: Spring.a.div,
- springs: {
- display,
- y
- },
- terminalHeight
- }
-}
diff --git a/libs/editor/src/components/Terminal/index.ts b/libs/editor/src/components/Terminal/index.ts
deleted file mode 100644
index 57b59149..00000000
--- a/libs/editor/src/components/Terminal/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type { TerminalTabKeys } from './hooks/useTerminalTabs'
-export { default as TerminalActions } from './store/terminal.actions'
-export type { ExecuteMessage } from './types'
-export { default as Terminal } from './ui/ui/Terminal'
diff --git a/libs/editor/src/components/Terminal/ui/ui/Terminal.tsx b/libs/editor/src/components/Terminal/ui/ui/Terminal.tsx
deleted file mode 100644
index 7a52190d..00000000
--- a/libs/editor/src/components/Terminal/ui/ui/Terminal.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { useTerminalAnimation, useTerminalTabs } from '@/components/Terminal/hooks'
-import { TerminalOutput, TerminalOutputHandle } from '@/components/TerminalOutput'
-import { useActions, useModalsContext } from '@/shared/hooks'
-
-import { TerminalTabKeys } from '@/components/Terminal'
-
-import { Navigation, TerminalButtons, TerminalStyles } from './Terminal.styles'
-
-import { AnimationProvider, Display } from '$/client-shared'
-import { AiOutlineClose, GrClear } from '$/icons'
-
-const Terminal = observer(() => {
- const modalsContext = useModalsContext()
- const { isTerminalOpened } = modalsContext.state
- const terminalTabs = useTerminalTabs()
- const actions = useActions()
- const terminalOutputRef = useRef()
-
- const onTabChange = (newActiveKey: string) => {
- terminalTabs.set(newActiveKey as TerminalTabKeys)
- }
-
- const closeTerminal = useCallback(() => {
- modalsContext.update({ isTerminalOpened: false })
- }, [])
-
- const clearTerminal = async () => {
- await terminalOutputRef.current?.close()
- actions.terminal.clearExecuteMessages()
- }
-
- const motion = useTerminalAnimation(closeTerminal)
-
- useEffect(() => {
- motion.toggle(isTerminalOpened)
- }, [isTerminalOpened])
-
- return
-
-
-
-
-
-
- test cases
-
-
-
-
-
-
-
-
-})
-
-const TerminalWrapper = () => {
- return
-
-
-}
-
-export default TerminalWrapper
diff --git a/libs/editor/src/components/TerminalOutput/hooks/index.ts b/libs/editor/src/components/TerminalOutput/hooks/index.ts
deleted file mode 100644
index 5cc1f376..00000000
--- a/libs/editor/src/components/TerminalOutput/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useTerminalOutputAnimations } from './useTerminalOutputAnimations'
diff --git a/libs/editor/src/components/TerminalOutput/hooks/useTerminalOutputAnimations.ts b/libs/editor/src/components/TerminalOutput/hooks/useTerminalOutputAnimations.ts
deleted file mode 100644
index 4beeb4fa..00000000
--- a/libs/editor/src/components/TerminalOutput/hooks/useTerminalOutputAnimations.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ForwardedRef, useImperativeHandle } from 'react'
-
-import { useAnimations } from '$/client-shared'
-
-export const useTerminalOutputAnimations =
- (ref: ForwardedRef) => {
- const { Spring } = useAnimations()
-
- const [spring, api] = Spring.useSpring(() => ({
- opacity: 1,
- x: 0
- }))
-
- useImperativeHandle(ref, () => ({
- close: async () => {
- api.start(
- { opacity: 0, x: -20, immediate: false, config: Spring.config.wobbly }
- )
- return new Promise(resolve => setTimeout(() => {
- api.start({ opacity: 1, x: 0, immediate: false, config: Spring.config.wobbly })
- resolve(true)
- }, 300))
- }
- }))
-
- return {
- ref, spring, SpringDiv: Spring.a.div
- }
- }
diff --git a/libs/editor/src/components/TerminalOutput/index.ts b/libs/editor/src/components/TerminalOutput/index.ts
deleted file mode 100644
index 268ad1c9..00000000
--- a/libs/editor/src/components/TerminalOutput/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { TerminalOutputHandle } from './ui/TerminalOutput/TerminalOutput'
-export { default as TerminalOutput } from './ui/TerminalOutput/TerminalOutput'
diff --git a/libs/editor/src/components/TerminalOutput/ui/BottomScroll/BottomScroll.tsx b/libs/editor/src/components/TerminalOutput/ui/BottomScroll/BottomScroll.tsx
deleted file mode 100644
index 328e6917..00000000
--- a/libs/editor/src/components/TerminalOutput/ui/BottomScroll/BottomScroll.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react'
-
-import { Output } from '../TerminalOutput.styles'
-
-import { VoidFunction, WithChildren } from '$/client-shared'
-
-export interface BottomScrollHandle {
- scrollToBottom: VoidFunction
-}
-
-export const BottomScroll = forwardRef(({ children }, ref) => {
- const outputRef = useRef(null)
-
- const scrollToBottom = () => {
- outputRef.current?.scrollTo(0, outputRef.current.scrollHeight)
- }
-
- useImperativeHandle(ref, () => ({
- scrollToBottom: () => {
- scrollToBottom()
- setTimeout(scrollToBottom, 50)
- }
- }))
-
- return
-})
diff --git a/libs/editor/src/components/TerminalOutput/ui/TerminalOutput/TerminalOutput.tsx b/libs/editor/src/components/TerminalOutput/ui/TerminalOutput/TerminalOutput.tsx
deleted file mode 100644
index 1111a5a9..00000000
--- a/libs/editor/src/components/TerminalOutput/ui/TerminalOutput/TerminalOutput.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { forwardRef, useEffect, useRef } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { useModalContextState, useStore } from '@/shared/hooks'
-
-import { useTerminalOutputAnimations } from '../../hooks'
-import { BottomScroll, BottomScrollHandle } from '../BottomScroll/BottomScroll'
-import { OutputLine } from '../TerminalOutput.styles'
-
-export interface TerminalOutputHandle {
- close: () => Promise
-}
-
-const TerminalOutput = observer(forwardRef((_, preparedRef) => {
- const outputRef = useRef(null)
- const scrollEndRef = useRef(null)
- const { isTerminalOpened } = useModalContextState()
- const { executeMessages } = useStore()
- const { spring, SpringDiv } = useTerminalOutputAnimations(preparedRef)
-
-
- const scrollToBottom = () => {
- scrollEndRef.current?.scrollIntoView({ behavior: 'smooth' })
- }
-
- useEffect(() => {
- outputRef.current?.scrollToBottom()
- }, [executeMessages.length, isTerminalOpened])
-
- return
- CodeGear output console.
-
- {executeMessages.map((msg, idx) => {
- return
- User [{msg.fileName}] [{msg.date}] > {msg.message}
-
- })}
-
-
-
-
-}))
-
-
-export default TerminalOutput
diff --git a/libs/editor/src/components/ThemeSwitcher/index.ts b/libs/editor/src/components/ThemeSwitcher/index.ts
deleted file mode 100644
index 45803a88..00000000
--- a/libs/editor/src/components/ThemeSwitcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ui/ThemeSwitcher'
diff --git a/libs/editor/src/components/font-size-switcher/index.ts b/libs/editor/src/components/font-size-switcher/index.ts
new file mode 100644
index 00000000..f2f97c54
--- /dev/null
+++ b/libs/editor/src/components/font-size-switcher/index.ts
@@ -0,0 +1 @@
+export { default as FontSizeSwitcher } from './ui/font-size-switcher'
diff --git a/libs/editor/src/components/FontSizeSwitcher/ui/FontSizeSwitcher.tsx b/libs/editor/src/components/font-size-switcher/ui/font-size-switcher.tsx
similarity index 64%
rename from libs/editor/src/components/FontSizeSwitcher/ui/FontSizeSwitcher.tsx
rename to libs/editor/src/components/font-size-switcher/ui/font-size-switcher.tsx
index 005bba90..d0d7138a 100644
--- a/libs/editor/src/components/FontSizeSwitcher/ui/FontSizeSwitcher.tsx
+++ b/libs/editor/src/components/font-size-switcher/ui/font-size-switcher.tsx
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react-lite'
import { FontSizes, fontSizes } from '@/shared/consts'
import { useActions, useStore } from '@/shared/hooks'
-
const FontSizeSwitcher = observer(() => {
const actions = useActions()
const { fontSize } = useStore()
@@ -13,17 +12,18 @@ const FontSizeSwitcher = observer(() => {
actions.changeFontSize(fontSize)
}
- return