From 5db04c76ae39297417270320b828b95fcf8a45d8 Mon Sep 17 00:00:00 2001 From: Gearonix Date: Thu, 27 Jul 2023 11:21:52 +0300 Subject: [PATCH 1/5] fix: small fixes --- .../src/lib/components/common.ts | 4 ++-- .../editor-store/config/editor.store.ts | 5 ++++- .../editor-store/lib/default-code-template.ts | 13 ++++++++++++ .../ui/modals-context-provider.tsx | 2 +- .../use-custom-theme/use-custom-theme.ts | 2 +- .../use-theme-loader/use-theme-loader.ts | 4 ++-- .../src/components/tabs/store/content-tab.ts | 21 ------------------- .../src/components/tabs/store/tabs.actions.ts | 7 +++++-- libs/editor/src/components/tabs/ui/tabs.tsx | 3 +++ .../terminal/ui/ui/terminal.styles.ts | 6 ++++++ .../components/terminal/ui/ui/terminal.tsx | 6 ++++-- .../ui/editor-content/editor-content.tsx | 2 +- libs/editor/src/shared/consts.ts | 10 ++++++--- libs/editor/src/shared/hooks/use-editor.ts | 2 +- 14 files changed, 50 insertions(+), 37 deletions(-) create mode 100644 libs/editor/src/app/providers/editor-store/lib/default-code-template.ts diff --git a/libs/client-shared/src/lib/components/common.ts b/libs/client-shared/src/lib/components/common.ts index e697208a..28bff4ee 100644 --- a/libs/client-shared/src/lib/components/common.ts +++ b/libs/client-shared/src/lib/components/common.ts @@ -1,6 +1,6 @@ -import { WithReactChildren } from '@code-gear/client-shared' +import { WithChildren } from '../../types' -type DisplayProps = WithReactChildren<{ when: T }> +type DisplayProps = WithChildren<{ when: T }> export const Display = ({ when, children }: DisplayProps) => { return when ? children : null diff --git a/libs/editor/src/app/providers/editor-store/config/editor.store.ts b/libs/editor/src/app/providers/editor-store/config/editor.store.ts index 04800e76..27572b3e 100644 --- a/libs/editor/src/app/providers/editor-store/config/editor.store.ts +++ b/libs/editor/src/app/providers/editor-store/config/editor.store.ts @@ -10,6 +10,7 @@ import EditorGetters from './editor.getters' import EditorServices from './editor.services' import { Hex, LocalStorageClient } from '$/client-shared' +import { defaultCodeLang, defaultCodeTemplate } from '../lib/default-code-template'; class EditorStore { activeKey = '' @@ -58,7 +59,9 @@ class EditorStore { ) if (savedContent.length === 0) { - this.actions.tabs.createTab() + const newTab = this.actions.tabs.createTab() + newTab!.lang = defaultCodeLang + newTab?.setTabContent(defaultCodeTemplate) } for (const instance of savedContent) { diff --git a/libs/editor/src/app/providers/editor-store/lib/default-code-template.ts b/libs/editor/src/app/providers/editor-store/lib/default-code-template.ts new file mode 100644 index 00000000..d203e6d4 --- /dev/null +++ b/libs/editor/src/app/providers/editor-store/lib/default-code-template.ts @@ -0,0 +1,13 @@ +import { LanguagesValues } from '@/shared/consts' + +export const defaultCodeTemplate = `// Hello World! Here you can edit the code in 10 different languages. 😎 + +const camel = 'I like apples' + +// Run the code and look in the terminal. +console.log(camel) + +// You can edit and run the code in real time +// and your friends will see it! Sign in if you want to see more features. +` +export const defaultCodeLang: LanguagesValues = 'javascript' diff --git a/libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx b/libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx index 802501f3..257db7b7 100644 --- a/libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx +++ b/libs/editor/src/app/providers/modals-provider/ui/modals-context-provider.tsx @@ -10,7 +10,7 @@ const ModalsContextProvider = ({ children }: WithChildren) => { const initialState: ModalsState = useMemo( () => ({ isSettingsOpened: false, - isHtmlPreviewOpened: true, + isHtmlPreviewOpened: false, isTerminalOpened: true, selectedTerminalTab: 'terminal' }), diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts b/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts index 8ccad70b..59191d65 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.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/use-theme-loader.ts b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts index 30d9f23c..fe8d17fb 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts @@ -26,7 +26,7 @@ export const useThemeLoader = () => { assertThemeObject(json) - monaco.editor.defineTheme(theme, json) + monaco?.editor.defineTheme(theme, json) } catch (error) { console.log(EditorErrors.ThemeUpload(theme)) } @@ -35,7 +35,7 @@ export const useThemeLoader = () => { 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/components/tabs/store/content-tab.ts b/libs/editor/src/components/tabs/store/content-tab.ts index 328f50b8..10c82a5b 100644 --- a/libs/editor/src/components/tabs/store/content-tab.ts +++ b/libs/editor/src/components/tabs/store/content-tab.ts @@ -55,29 +55,8 @@ export class ContentTab { return this._label } - private updateLabel() { - // TODO: refactor - - if (this._fileHandle) { - if (!this.wasChanged) { - this.setLabel(`${this.getLabel()} •`) - } - this.wasChanged = true - - return - } - const firstLine = this._content.split('\n')[0].slice(0, 10) - const cropped = firstLine.replace(' ', '').replace('\n', '') - const newLabel = `${cropped.length > 1 ? firstLine : 'Untitled'} •` - this.wasChanged = true - - this.setLabel(newLabel) - } - public setTabContent(content: string) { this._content = content - - this.updateLabel() } public getContent() { diff --git a/libs/editor/src/components/tabs/store/tabs.actions.ts b/libs/editor/src/components/tabs/store/tabs.actions.ts index 6ce6c38a..780128f8 100644 --- a/libs/editor/src/components/tabs/store/tabs.actions.ts +++ b/libs/editor/src/components/tabs/store/tabs.actions.ts @@ -3,6 +3,7 @@ import { makeAutoObservable } from 'mobx' import { EditorStore } from '@/app' import { ContentTab, isMaxTabsLength } from '@/components/tabs/lib' import { FileHandlerData } from '@/modules/editor-content/types' +import { Nullable } from '$/client-shared'; class TabsActions { private state: EditorStore @@ -12,11 +13,11 @@ class TabsActions { this.state = root } - createTab(fileData?: FileHandlerData): void { + createTab(fileData?: FileHandlerData): Nullable { const content = this.state.content if (isMaxTabsLength(content)) { - return + return null } const lastNumber = content.at(-1)?.idx @@ -24,6 +25,8 @@ class TabsActions { this.state.activeKey = newTab.getKeyId() this.state.content.push(newTab) + + return newTab } removeTab(targetKey?: string): void { diff --git a/libs/editor/src/components/tabs/ui/tabs.tsx b/libs/editor/src/components/tabs/ui/tabs.tsx index 42216906..b53a0fe3 100644 --- a/libs/editor/src/components/tabs/ui/tabs.tsx +++ b/libs/editor/src/components/tabs/ui/tabs.tsx @@ -21,6 +21,9 @@ const Tabs = observer(() => { if (action === 'add') { actions.tabs.createTab() } else { + if (content.length === 1) { + return + } confirm.on(targetKey as string) } } diff --git a/libs/editor/src/components/terminal/ui/ui/terminal.styles.ts b/libs/editor/src/components/terminal/ui/ui/terminal.styles.ts index e942d02a..7c8b56c2 100644 --- a/libs/editor/src/components/terminal/ui/ui/terminal.styles.ts +++ b/libs/editor/src/components/terminal/ui/ui/terminal.styles.ts @@ -45,3 +45,9 @@ export const Navigation = styled(Tabs)` font-size: ${({ theme }) => theme.fz6}; ` + +export const TerminalTitle = styled.h3` + color: ${color('light')}; + font-size: ${({ theme }) => theme.fz7}; + +` diff --git a/libs/editor/src/components/terminal/ui/ui/terminal.tsx b/libs/editor/src/components/terminal/ui/ui/terminal.tsx index 8dd32fb3..c63ef5c7 100644 --- a/libs/editor/src/components/terminal/ui/ui/terminal.tsx +++ b/libs/editor/src/components/terminal/ui/ui/terminal.tsx @@ -9,7 +9,7 @@ import { } from '@/components/terminal-output' import { useActions, useModalsContext } from '@/shared/hooks' -import { Navigation, TerminalButtons } from './terminal.styles' +import { Navigation, TerminalButtons, TerminalTitle } from './terminal.styles' import { Display, Popover } from '$/client-shared' import { AiOutlineClose, GrClear } from '$/icons' @@ -46,7 +46,9 @@ const Terminal = observer(() => { - test cases + + Test cases are not supported yet. + diff --git a/libs/editor/src/modules/editor-content/ui/editor-content/editor-content.tsx b/libs/editor/src/modules/editor-content/ui/editor-content/editor-content.tsx index 2473d90c..d590ef8e 100644 --- a/libs/editor/src/modules/editor-content/ui/editor-content/editor-content.tsx +++ b/libs/editor/src/modules/editor-content/ui/editor-content/editor-content.tsx @@ -40,7 +40,7 @@ export const EditorContent = observer(() => { } useEffect(() => { - monaco.editor.setTheme(theme) + monaco?.editor.setTheme(theme) }, [theme]) useEffect(() => { diff --git a/libs/editor/src/shared/consts.ts b/libs/editor/src/shared/consts.ts index f6060af5..3da1e535 100644 --- a/libs/editor/src/shared/consts.ts +++ b/libs/editor/src/shared/consts.ts @@ -27,7 +27,12 @@ export const languages = { html: 'html', htm: 'html', txt: 'text', - css: 'css' + css: 'css', + py: 'python', + cpp: 'cpp', + go: 'go', + c: 'c', + java: 'java' } as const export type LanguagesValues = ValueOf @@ -36,13 +41,12 @@ export type LanguagesKeys = keyof typeof languages export const maxTabsLength = 9 as const -export const executorAllowedLanguages = [ +export const executorAllowedLanguages: LanguagesValues[] = [ 'java', 'python', 'cpp', 'c', 'go', - 'cs', 'javascript' ] diff --git a/libs/editor/src/shared/hooks/use-editor.ts b/libs/editor/src/shared/hooks/use-editor.ts index 2f14e043..160b4e24 100644 --- a/libs/editor/src/shared/hooks/use-editor.ts +++ b/libs/editor/src/shared/hooks/use-editor.ts @@ -5,5 +5,5 @@ import { useMonaco } from '@monaco-editor/react' export const useEditor = () => { const monaco = useMonaco() - return monaco.editor.getEditors()[0] as editor.ICodeEditor + return monaco?.editor.getEditors()[0] as editor.ICodeEditor } From c3793ad08ddc072000bd4b43cc79a8eb42b97e07 Mon Sep 17 00:00:00 2001 From: Gearonix Date: Thu, 27 Jul 2023 13:33:16 +0300 Subject: [PATCH 2/5] refactor: big folder structure and mobx store refactoring --- apps/client/index.html | 4 +- apps/client/tsconfig.app.json | 2 +- apps/server/tsconfig.app.json | 2 +- .../src/hooks/use-alt-key-down.ts | 4 +- .../src/hooks/use-notifications.ts | 2 +- libs/client-shared/src/index.ts | 1 + .../lib/components/{common.ts => Display.ts} | 2 +- .../components/{page/page.tsx => Page.tsx} | 4 +- .../client-shared/src/lib/components/index.ts | 6 +- .../src/lib/{components => }/icons.ts | 0 .../animation-provider.tsx | 6 +- .../error-boundary/error-boundary.tsx | 2 +- libs/client-shared/src/providers/index.ts | 4 +- .../ui => }/notifications-provider.tsx | 2 +- libs/client-shared/src/ui/index.ts | 1 + .../src/ui/modal/ui/modal.styles.ts | 9 +- libs/client-shared/src/ui/modal/ui/modal.tsx | 8 +- .../ui/popover/hooks/use-popover-animation.ts | 4 +- .../src/ui/popover/ui/popover.styles.tsx | 2 +- .../src/ui/popover/ui/popover.tsx | 5 +- libs/client-shared/src/ui/select/select.tsx | 29 +++++++ libs/client-shared/tsconfig.lib.json | 3 +- libs/editor/src/app/editor.tsx | 12 +-- .../editor-store/config/editor.actions.ts | 9 +- .../editor-store/config/editor.getters.ts | 13 +-- .../editor-store/config/editor.services.ts | 2 +- .../editor-store/config/editor.store.ts | 34 ++++---- .../editor-store/lib/default-code-template.ts | 2 +- .../app/providers/modals-provider/types.ts | 2 +- .../use-custom-theme/use-custom-theme.ts | 2 +- .../use-theme-loader/assert-theme-object.ts | 2 +- .../use-theme-loader/themes/Dracula.json | 2 +- .../use-theme-loader/themes/Dreamweaver.json | 2 +- .../hooks/use-theme-loader/themes/Eiffel.json | 2 +- .../hooks/use-theme-loader/themes/GitHub.json | 2 +- .../hooks/use-theme-loader/themes/IDLE.json | 2 +- .../use-theme-loader/themes/Monokai.json | 2 +- .../hooks/use-theme-loader/themes/Nord.json | 2 +- .../use-theme-loader/themes/Tomorrow.json | 2 +- .../use-theme-loader/themes/Twilight.json | 2 +- .../use-theme-loader/use-theme-loader.ts | 4 +- .../src/components/html-preview/index.ts | 1 - libs/editor/src/components/settings/index.ts | 1 - .../src/components/tabs/store/content-tab.ts | 86 ------------------- libs/editor/src/components/tabs/types.ts | 15 ---- .../editor-core/editor-core.tsx | 0 libs/editor/src/entities/editor-core/index.ts | 1 + .../src/entities/header-options/index.ts | 1 + .../ui}/header-options.styles.ts | 0 .../header-options/ui}/header-options.tsx | 23 ++--- .../entities/header-right-section/index.ts | 1 + .../ui}/header-right-section.styles.ts | 2 +- .../ui/header-right-section.tsx | 32 +++++++ .../src/entities/key-buildings/index.ts | 1 + .../key-buildings/key-buildings.tsx | 5 +- .../src/entities/preview-editor/index.ts | 1 + .../ui}/preview-editor.styles.ts | 0 .../preview-editor/ui}/preview-editor.tsx | 4 +- .../src/entities/preview-i-frame/index.ts | 1 + .../lib/create-html-template.ts | 0 .../preview-i-frame/ui}/i-frame.tsx | 9 +- .../terminal-output/hooks/index.ts | 0 .../hooks/use-terminal-output-animations.ts | 0 .../terminal-output/index.ts | 0 .../ui/bottom-scroll/bottom-scroll.tsx | 0 .../ui/terminal-output.styles.ts | 0 .../ui/terminal-output/terminal-output.tsx | 0 .../language-switcher/hooks/index.ts | 0 .../hooks/use-mapped-languages.ts | 2 +- .../language-switcher/index.ts | 0 .../ui/language-switcher.tsx | 9 +- .../switch-font-size}/index.ts | 0 .../ui/font-size-switcher.tsx | 9 +- .../switch-tab-size}/index.ts | 0 .../switch-tab-size}/ui/tab-size-switcher.tsx | 9 +- .../switch-theme}/index.ts | 0 .../switch-theme}/ui/theme-switcher.tsx | 9 +- .../src/modules/editor-content/index.ts | 2 - libs/editor/src/modules/header/index.ts | 5 -- .../header-right-section.tsx | 29 ------- .../src/modules/header/ui/header/header.tsx | 33 ------- libs/editor/src/shared/consts.ts | 69 --------------- libs/editor/src/shared/consts/font-sizes.ts | 11 +++ .../editor/src/shared/consts/key-buildings.ts | 9 ++ libs/editor/src/shared/consts/languages.ts | 30 +++++++ libs/editor/src/shared/consts/themes.ts | 19 ++++ libs/editor/src/shared/editor-config.ts | 2 +- .../src/shared/{errors.ts => exceptions.ts} | 2 +- .../src/shared/hooks/use-modals-context.ts | 2 +- .../aside/hooks/use-aside-animation.ts | 0 .../aside/hooks/use-editor-actions.ts | 0 .../src/{modules => widgets}/aside/index.ts | 0 .../aside/ui/aside.styles.ts | 0 .../{modules => widgets}/aside/ui/aside.tsx | 2 +- .../editor-content/hooks/index.ts | 0 .../use-alt-navigation/use-alt-navigation.ts | 2 +- .../hooks/use-file-service/lib/consts.ts | 0 .../lib/get-language-from-name.ts | 6 +- .../use-file-service/use-file-handler.ts | 2 +- .../hooks/use-file-service/use-file-saver.ts | 2 +- .../use-file-service/use-file-service.ts | 9 +- .../use-keyboard-manager.ts | 4 +- .../src/widgets/editor-content/index.ts | 2 + .../editor-content/store/content.actions.ts | 2 +- .../types/guards/is-file-data.ts | 0 .../editor-content/types/index.ts | 0 .../editor-content/types/types.ts | 2 +- .../ui}/editor-content.styles.ts | 0 .../editor-content/ui}/editor-content.tsx | 10 +-- .../src/{modules => widgets}/header/errors.ts | 2 +- .../header/hooks/index.ts | 0 .../header/hooks/use-code-runner.ts | 0 .../header/hooks/use-header-animation.ts | 0 libs/editor/src/widgets/header/index.ts | 5 ++ .../header/store/execute.services.ts | 9 +- .../src/{modules => widgets}/header/types.ts | 0 .../header/ui}/header.styles.ts | 0 libs/editor/src/widgets/header/ui/header.tsx | 48 +++++++++++ .../context/html-preview-provider.tsx | 0 .../html-preview/context/index.ts | 0 libs/editor/src/widgets/html-preview/index.ts | 3 + .../html-preview/types.ts | 2 +- .../html-preview/ui}/html-preview.styles.ts | 0 .../html-preview/ui}/html-preview.tsx | 6 +- .../settings/hooks/index.ts | 0 .../settings/hooks/use-color-callback.ts | 2 +- libs/editor/src/widgets/settings/index.ts | 2 + .../settings/ui}/settings.styles.ts | 0 .../settings/ui}/settings.tsx | 12 +-- .../tabs/hooks/index.ts | 0 .../tabs/hooks/use-confirm.ts | 0 .../tabs/hooks/use-mapped-tabs.ts | 6 +- .../src/{components => widgets}/tabs/index.ts | 2 +- .../tabs/lib/helpers/generate-new-tab.ts | 22 +++++ .../tabs/lib/helpers/is-max-tabs-length.ts | 5 +- .../{components => widgets}/tabs/lib/index.ts | 1 - .../tabs/store/tabs.actions.ts | 16 ++-- libs/editor/src/widgets/tabs/types.ts | 13 +++ .../tabs/ui/tabs.styles.ts | 0 .../{components => widgets}/tabs/ui/tabs.tsx | 10 ++- .../terminal/hooks/index.ts | 0 .../terminal/hooks/use-terminal-tabs.ts | 0 .../{components => widgets}/terminal/index.ts | 2 +- .../terminal/store/terminal.actions.ts | 4 +- .../{components => widgets}/terminal/types.ts | 0 .../terminal}/ui/terminal.styles.ts | 1 - .../ui => widgets/terminal}/ui/terminal.tsx | 7 +- libs/editor/tsconfig.lib.json | 12 +-- 148 files changed, 427 insertions(+), 445 deletions(-) rename libs/client-shared/src/lib/components/{common.ts => Display.ts} (78%) rename libs/client-shared/src/lib/components/{page/page.tsx => Page.tsx} (55%) rename libs/client-shared/src/lib/{components => }/icons.ts (100%) rename libs/client-shared/src/providers/{with-animations => }/animation-provider.tsx (89%) rename libs/client-shared/src/providers/{notifications/ui => }/notifications-provider.tsx (94%) create mode 100644 libs/client-shared/src/ui/select/select.tsx delete mode 100644 libs/editor/src/components/html-preview/index.ts delete mode 100644 libs/editor/src/components/settings/index.ts delete mode 100644 libs/editor/src/components/tabs/store/content-tab.ts delete mode 100644 libs/editor/src/components/tabs/types.ts rename libs/editor/src/{modules/editor-content/ui => entities}/editor-core/editor-core.tsx (100%) create mode 100644 libs/editor/src/entities/editor-core/index.ts create mode 100644 libs/editor/src/entities/header-options/index.ts rename libs/editor/src/{modules/header/ui/header-options => entities/header-options/ui}/header-options.styles.ts (100%) rename libs/editor/src/{modules/header/ui/header-options => entities/header-options/ui}/header-options.tsx (67%) create mode 100644 libs/editor/src/entities/header-right-section/index.ts rename libs/editor/src/{modules/header/ui/header-right-section => entities/header-right-section/ui}/header-right-section.styles.ts (87%) create mode 100644 libs/editor/src/entities/header-right-section/ui/header-right-section.tsx create mode 100644 libs/editor/src/entities/key-buildings/index.ts rename libs/editor/src/{components/settings/ui => entities}/key-buildings/key-buildings.tsx (89%) create mode 100644 libs/editor/src/entities/preview-editor/index.ts rename libs/editor/src/{components/html-preview/ui/editor => entities/preview-editor/ui}/preview-editor.styles.ts (100%) rename libs/editor/src/{components/html-preview/ui/editor => entities/preview-editor/ui}/preview-editor.tsx (91%) create mode 100644 libs/editor/src/entities/preview-i-frame/index.ts rename libs/editor/src/{components/html-preview => entities/preview-i-frame}/lib/create-html-template.ts (100%) rename libs/editor/src/{components/html-preview/ui/i-frame => entities/preview-i-frame/ui}/i-frame.tsx (70%) rename libs/editor/src/{components => entities}/terminal-output/hooks/index.ts (100%) rename libs/editor/src/{components => entities}/terminal-output/hooks/use-terminal-output-animations.ts (100%) rename libs/editor/src/{components => entities}/terminal-output/index.ts (100%) rename libs/editor/src/{components => entities}/terminal-output/ui/bottom-scroll/bottom-scroll.tsx (100%) rename libs/editor/src/{components => entities}/terminal-output/ui/terminal-output.styles.ts (100%) rename libs/editor/src/{components => entities}/terminal-output/ui/terminal-output/terminal-output.tsx (100%) rename libs/editor/src/{components => features}/language-switcher/hooks/index.ts (100%) rename libs/editor/src/{components => features}/language-switcher/hooks/use-mapped-languages.ts (76%) rename libs/editor/src/{components => features}/language-switcher/index.ts (100%) rename libs/editor/src/{components => features}/language-switcher/ui/language-switcher.tsx (80%) rename libs/editor/src/{components/font-size-switcher => features/switch-font-size}/index.ts (100%) rename libs/editor/src/{components/font-size-switcher => features/switch-font-size}/ui/font-size-switcher.tsx (77%) rename libs/editor/src/{components/tab-size-switcher => features/switch-tab-size}/index.ts (100%) rename libs/editor/src/{components/tab-size-switcher => features/switch-tab-size}/ui/tab-size-switcher.tsx (77%) rename libs/editor/src/{components/theme-switcher => features/switch-theme}/index.ts (100%) rename libs/editor/src/{components/theme-switcher => features/switch-theme}/ui/theme-switcher.tsx (78%) delete mode 100644 libs/editor/src/modules/editor-content/index.ts delete mode 100644 libs/editor/src/modules/header/index.ts delete mode 100644 libs/editor/src/modules/header/ui/header-right-section/header-right-section.tsx delete mode 100644 libs/editor/src/modules/header/ui/header/header.tsx delete mode 100644 libs/editor/src/shared/consts.ts create mode 100644 libs/editor/src/shared/consts/font-sizes.ts create mode 100644 libs/editor/src/shared/consts/key-buildings.ts create mode 100644 libs/editor/src/shared/consts/languages.ts create mode 100644 libs/editor/src/shared/consts/themes.ts rename libs/editor/src/shared/{errors.ts => exceptions.ts} (91%) rename libs/editor/src/{modules => widgets}/aside/hooks/use-aside-animation.ts (100%) rename libs/editor/src/{modules => widgets}/aside/hooks/use-editor-actions.ts (100%) rename libs/editor/src/{modules => widgets}/aside/index.ts (100%) rename libs/editor/src/{modules => widgets}/aside/ui/aside.styles.ts (100%) rename libs/editor/src/{modules => widgets}/aside/ui/aside.tsx (95%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/index.ts (100%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/use-alt-navigation/use-alt-navigation.ts (94%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/use-file-service/lib/consts.ts (100%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/use-file-service/lib/get-language-from-name.ts (79%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/use-file-service/use-file-handler.ts (94%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/use-file-service/use-file-saver.ts (92%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/use-file-service/use-file-service.ts (82%) rename libs/editor/src/{modules => widgets}/editor-content/hooks/use-keyboard-manager/use-keyboard-manager.ts (89%) create mode 100644 libs/editor/src/widgets/editor-content/index.ts rename libs/editor/src/{modules => widgets}/editor-content/store/content.actions.ts (92%) rename libs/editor/src/{modules => widgets}/editor-content/types/guards/is-file-data.ts (100%) rename libs/editor/src/{modules => widgets}/editor-content/types/index.ts (100%) rename libs/editor/src/{modules => widgets}/editor-content/types/types.ts (71%) rename libs/editor/src/{modules/editor-content/ui/editor-content => widgets/editor-content/ui}/editor-content.styles.ts (100%) rename libs/editor/src/{modules/editor-content/ui/editor-content => widgets/editor-content/ui}/editor-content.tsx (84%) rename libs/editor/src/{modules => widgets}/header/errors.ts (87%) rename libs/editor/src/{modules => widgets}/header/hooks/index.ts (100%) rename libs/editor/src/{modules => widgets}/header/hooks/use-code-runner.ts (100%) rename libs/editor/src/{modules => widgets}/header/hooks/use-header-animation.ts (100%) create mode 100644 libs/editor/src/widgets/header/index.ts rename libs/editor/src/{modules => widgets}/header/store/execute.services.ts (84%) rename libs/editor/src/{modules => widgets}/header/types.ts (100%) rename libs/editor/src/{modules/header/ui/header => widgets/header/ui}/header.styles.ts (100%) create mode 100644 libs/editor/src/widgets/header/ui/header.tsx rename libs/editor/src/{components => widgets}/html-preview/context/html-preview-provider.tsx (100%) rename libs/editor/src/{components => widgets}/html-preview/context/index.ts (100%) create mode 100644 libs/editor/src/widgets/html-preview/index.ts rename libs/editor/src/{components => widgets}/html-preview/types.ts (74%) rename libs/editor/src/{components/html-preview/ui/html-preview => widgets/html-preview/ui}/html-preview.styles.ts (100%) rename libs/editor/src/{components/html-preview/ui/html-preview => widgets/html-preview/ui}/html-preview.tsx (86%) rename libs/editor/src/{components => widgets}/settings/hooks/index.ts (100%) rename libs/editor/src/{components => widgets}/settings/hooks/use-color-callback.ts (87%) create mode 100644 libs/editor/src/widgets/settings/index.ts rename libs/editor/src/{components/settings/ui/settings => widgets/settings/ui}/settings.styles.ts (100%) rename libs/editor/src/{components/settings/ui/settings => widgets/settings/ui}/settings.tsx (88%) rename libs/editor/src/{components => widgets}/tabs/hooks/index.ts (100%) rename libs/editor/src/{components => widgets}/tabs/hooks/use-confirm.ts (100%) rename libs/editor/src/{components => widgets}/tabs/hooks/use-mapped-tabs.ts (50%) rename libs/editor/src/{components => widgets}/tabs/index.ts (68%) create mode 100644 libs/editor/src/widgets/tabs/lib/helpers/generate-new-tab.ts rename libs/editor/src/{components => widgets}/tabs/lib/helpers/is-max-tabs-length.ts (50%) rename libs/editor/src/{components => widgets}/tabs/lib/index.ts (55%) rename libs/editor/src/{components => widgets}/tabs/store/tabs.actions.ts (68%) create mode 100644 libs/editor/src/widgets/tabs/types.ts rename libs/editor/src/{components => widgets}/tabs/ui/tabs.styles.ts (100%) rename libs/editor/src/{components => widgets}/tabs/ui/tabs.tsx (85%) rename libs/editor/src/{components => widgets}/terminal/hooks/index.ts (100%) rename libs/editor/src/{components => widgets}/terminal/hooks/use-terminal-tabs.ts (100%) rename libs/editor/src/{components => widgets}/terminal/index.ts (76%) rename libs/editor/src/{components => widgets}/terminal/store/terminal.actions.ts (92%) rename libs/editor/src/{components => widgets}/terminal/types.ts (100%) rename libs/editor/src/{components/terminal/ui => widgets/terminal}/ui/terminal.styles.ts (99%) rename libs/editor/src/{components/terminal/ui => widgets/terminal}/ui/terminal.tsx (91%) diff --git a/apps/client/index.html b/apps/client/index.html index 01d080ec..5ba4dcea 100644 --- a/apps/client/index.html +++ b/apps/client/index.html @@ -1,11 +1,11 @@ - + - + CodeGear diff --git a/apps/client/tsconfig.app.json b/apps/client/tsconfig.app.json index 0a481f92..a973aff1 100644 --- a/apps/client/tsconfig.app.json +++ b/apps/client/tsconfig.app.json @@ -12,7 +12,7 @@ "$/styles": ["../../libs/client-shared/src/styles/index.ts"], "$/editor": ["../../libs/editor/src/app/index.ts"], "react": ["../../node_modules/preact/compat"], - "react-dom": ["../../node_modules/preact/compat"], + "react-dom": ["../../node_modules/preact/compat"] } }, "exclude": [ diff --git a/apps/server/tsconfig.app.json b/apps/server/tsconfig.app.json index 511e81db..952f51fc 100644 --- a/apps/server/tsconfig.app.json +++ b/apps/server/tsconfig.app.json @@ -10,7 +10,7 @@ "paths": { "$/config": ["../../libs/config/src/index.ts"], "$/services": ["../../libs/services/src/index.ts"], - "@/*": ["src/*"], + "@/*": ["src/*"] } }, "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"], diff --git a/libs/client-shared/src/hooks/use-alt-key-down.ts b/libs/client-shared/src/hooks/use-alt-key-down.ts index e9a98853..7cdb3530 100644 --- a/libs/client-shared/src/hooks/use-alt-key-down.ts +++ b/libs/client-shared/src/hooks/use-alt-key-down.ts @@ -1,6 +1,6 @@ import { EventHandler, KeyboardEvent, useState } from 'react' -import { Nullable } from '../types' +import { Nullable } from '@/types' type Handlers = Record void>> @@ -12,7 +12,7 @@ export const useAltKeyDown = () => { const subscriber = (e: KeyboardEvent) => { if (e.altKey && e.key === key.toLowerCase()) { e.preventDefault() - handler() + handler?.() return false } } diff --git a/libs/client-shared/src/hooks/use-notifications.ts b/libs/client-shared/src/hooks/use-notifications.ts index cec8b2a4..025008f3 100644 --- a/libs/client-shared/src/hooks/use-notifications.ts +++ b/libs/client-shared/src/hooks/use-notifications.ts @@ -1,6 +1,6 @@ import { useContext } from 'react' -import { NotificationsContext } from '../providers' +import { NotificationsContext } from '@/providers' export const useNotifications = () => { return useContext(NotificationsContext) diff --git a/libs/client-shared/src/index.ts b/libs/client-shared/src/index.ts index d8b1798d..f0df7be2 100644 --- a/libs/client-shared/src/index.ts +++ b/libs/client-shared/src/index.ts @@ -2,6 +2,7 @@ export * from './config' export * from './hooks' export * from './lib/components' export * from './lib/helpers' +export * from './lib/icons' export * from './providers' export * from './types' export * from './ui' diff --git a/libs/client-shared/src/lib/components/common.ts b/libs/client-shared/src/lib/components/Display.ts similarity index 78% rename from libs/client-shared/src/lib/components/common.ts rename to libs/client-shared/src/lib/components/Display.ts index 28bff4ee..6b8cade0 100644 --- a/libs/client-shared/src/lib/components/common.ts +++ b/libs/client-shared/src/lib/components/Display.ts @@ -1,4 +1,4 @@ -import { WithChildren } from '../../types' +import { WithChildren } from '@/types' type DisplayProps = WithChildren<{ when: T }> diff --git a/libs/client-shared/src/lib/components/page/page.tsx b/libs/client-shared/src/lib/components/Page.tsx similarity index 55% rename from libs/client-shared/src/lib/components/page/page.tsx rename to libs/client-shared/src/lib/components/Page.tsx index 7a5b8ba6..5eaeffd2 100644 --- a/libs/client-shared/src/lib/components/page/page.tsx +++ b/libs/client-shared/src/lib/components/Page.tsx @@ -1,5 +1,5 @@ -import { ErrorBoundary } from '../../../providers' -import { WithChildren } from '../../../types' +import { ErrorBoundary } from '@/providers' +import { WithChildren } from '@/types' const Page = ({ children }: WithChildren) => { return {children} diff --git a/libs/client-shared/src/lib/components/index.ts b/libs/client-shared/src/lib/components/index.ts index b024ade6..b6485fd6 100644 --- a/libs/client-shared/src/lib/components/index.ts +++ b/libs/client-shared/src/lib/components/index.ts @@ -1,6 +1,6 @@ export { default as AnimationProvider, useAnimations -} from '../../providers/with-animations/animation-provider' -export { Display } from './common' -export { default as Page } from './page/page' +} from '../../providers/animation-provider' +export { Display } from './Display' +export { default as Page } from './Page' diff --git a/libs/client-shared/src/lib/components/icons.ts b/libs/client-shared/src/lib/icons.ts similarity index 100% rename from libs/client-shared/src/lib/components/icons.ts rename to libs/client-shared/src/lib/icons.ts diff --git a/libs/client-shared/src/providers/with-animations/animation-provider.tsx b/libs/client-shared/src/providers/animation-provider.tsx similarity index 89% rename from libs/client-shared/src/providers/with-animations/animation-provider.tsx rename to libs/client-shared/src/providers/animation-provider.tsx index a4dfab6b..942b7360 100644 --- a/libs/client-shared/src/providers/with-animations/animation-provider.tsx +++ b/libs/client-shared/src/providers/animation-provider.tsx @@ -1,8 +1,8 @@ import { createContext, useContext, useEffect, useMemo, useRef } from 'react' -import { useBooleanState } from '../../hooks' -import { Display } from '../../lib/components' -import { GestureType, SpringType, WithChildren } from '../../types' +import { useBooleanState } from '@/hooks' +import { Display } from '@/lib/components' +import { GestureType, SpringType, WithChildren } from '@/types' type AnimationContextPayload = Partial<{ Gesture: GestureType diff --git a/libs/client-shared/src/providers/error-boundary/error-boundary.tsx b/libs/client-shared/src/providers/error-boundary/error-boundary.tsx index 3e913420..68bf9aed 100644 --- a/libs/client-shared/src/providers/error-boundary/error-boundary.tsx +++ b/libs/client-shared/src/providers/error-boundary/error-boundary.tsx @@ -1,6 +1,6 @@ import { useErrorBoundary } from 'preact/hooks' -import { WithPreactChildren } from '../../types' +import { WithPreactChildren } from '@/types' import ErrorTemplate from './ui/error-template' diff --git a/libs/client-shared/src/providers/index.ts b/libs/client-shared/src/providers/index.ts index f6eac2cc..4c787bff 100644 --- a/libs/client-shared/src/providers/index.ts +++ b/libs/client-shared/src/providers/index.ts @@ -1,6 +1,6 @@ +export { default as AnimationProvider } from './animation-provider' 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' +} from './notifications-provider' diff --git a/libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx b/libs/client-shared/src/providers/notifications-provider.tsx similarity index 94% rename from libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx rename to libs/client-shared/src/providers/notifications-provider.tsx index de5667d6..00a8fe33 100644 --- a/libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx +++ b/libs/client-shared/src/providers/notifications-provider.tsx @@ -1,7 +1,7 @@ import { createContext } from 'react' import { message } from 'antd' -import { WithChildren } from '../../../types' +import { WithChildren } from '@/types' interface UserMessage { type?: 'success' | 'info' | 'error' diff --git a/libs/client-shared/src/ui/index.ts b/libs/client-shared/src/ui/index.ts index 4aaf03a7..acda4ee3 100644 --- a/libs/client-shared/src/ui/index.ts +++ b/libs/client-shared/src/ui/index.ts @@ -1,3 +1,4 @@ export { default as ColorButton } from './color-button/color-button' export { Modal } from './modal' export { Popover } from './popover' +export { Select } from './select/select' diff --git a/libs/client-shared/src/ui/modal/ui/modal.styles.ts b/libs/client-shared/src/ui/modal/ui/modal.styles.ts index be6c0c67..50fd6a75 100644 --- a/libs/client-shared/src/ui/modal/ui/modal.styles.ts +++ b/libs/client-shared/src/ui/modal/ui/modal.styles.ts @@ -1,13 +1,6 @@ import styled from 'styled-components' -import { - absolute, - color, - customScrollbar, - flex, - shadow, - wh -} from '../../../styles' +import { absolute, color, customScrollbar, flex, shadow, wh } from '@/styles' export const ModalBackground = styled.div` ${flex('center', 'center')}; diff --git a/libs/client-shared/src/ui/modal/ui/modal.tsx b/libs/client-shared/src/ui/modal/ui/modal.tsx index 6b9e2f12..3cb84955 100644 --- a/libs/client-shared/src/ui/modal/ui/modal.tsx +++ b/libs/client-shared/src/ui/modal/ui/modal.tsx @@ -1,14 +1,10 @@ import { MouseEvent } from 'react' import Scrollbar from 'react-smooth-scrollbar' +import { AnimationProvider, Display, useAnimations } from '@/lib/components' +import { WithChildren } from '@/types' import { Portal } from '@reach/portal' -import { - AnimationProvider, - Display, - useAnimations -} from '../../../lib/components' -import { WithChildren } from '../../../types' import { useModalTransitions } from '../hooks/use-modal-transitions' import { ModalBackground, ModalContainer, ModalStyles } from './modal.styles' 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 index dfda4e81..f032cac8 100644 --- a/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts +++ b/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts @@ -1,5 +1,5 @@ -import { useAnimations } from '../../../providers/with-animations/animation-provider' -import { VoidFunction } from '../../../types' +import { useAnimations } from '@/providers/animation-provider' +import { VoidFunction } from '@/types' export const usePopoverAnimation = ( closeCallback: VoidFunction, diff --git a/libs/client-shared/src/ui/popover/ui/popover.styles.tsx b/libs/client-shared/src/ui/popover/ui/popover.styles.tsx index e932ceb1..0e934398 100644 --- a/libs/client-shared/src/ui/popover/ui/popover.styles.tsx +++ b/libs/client-shared/src/ui/popover/ui/popover.styles.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { color, customScrollbar } from '../../../styles' +import { color, customScrollbar } from '@/styles' interface PopoverStylesProps { readonly $bottom: number diff --git a/libs/client-shared/src/ui/popover/ui/popover.tsx b/libs/client-shared/src/ui/popover/ui/popover.tsx index 077a13d0..4f0fa4c6 100644 --- a/libs/client-shared/src/ui/popover/ui/popover.tsx +++ b/libs/client-shared/src/ui/popover/ui/popover.tsx @@ -1,7 +1,8 @@ import { useEffect } from 'react' -import { AnimationProvider } from '../../../providers' -import { VoidFunction, WithChildren } from '../../../types' +import { AnimationProvider } from '@/providers' +import { VoidFunction, WithChildren } from '@/types' + import { usePopoverAnimation } from '../hooks' import { PopoverStyles } from './popover.styles' diff --git a/libs/client-shared/src/ui/select/select.tsx b/libs/client-shared/src/ui/select/select.tsx new file mode 100644 index 00000000..421c968b --- /dev/null +++ b/libs/client-shared/src/ui/select/select.tsx @@ -0,0 +1,29 @@ +import { Select as AntdSelect } from 'antd' + +interface SelectProps { + onChange: (val: T) => void + value: T + options: { + value: T + label: string | number + }[] + defaultValue?: T +} + +export const Select = ({ + onChange, + value, + options, + defaultValue +}: SelectProps) => { + return ( + + ) +} diff --git a/libs/client-shared/tsconfig.lib.json b/libs/client-shared/tsconfig.lib.json index d7969c61..b2cee36a 100644 --- a/libs/client-shared/tsconfig.lib.json +++ b/libs/client-shared/tsconfig.lib.json @@ -5,7 +5,8 @@ "types": ["node", "vite/client"], "baseUrl": ".", "paths": { - "$/config": ["../config/src/index.ts"] + "$/config": ["../config/src/index.ts"], + "@/*": ["src/*"] } }, "files": [ diff --git a/libs/editor/src/app/editor.tsx b/libs/editor/src/app/editor.tsx index 6c19adb4..8b902671 100644 --- a/libs/editor/src/app/editor.tsx +++ b/libs/editor/src/app/editor.tsx @@ -1,9 +1,9 @@ -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 { HtmlPreview } from '@/components/../widgets/html-preview' +import { Settings } from '@/components/../widgets/settings' +import { Terminal } from '@/components/../widgets/terminal' +import { Aside } from '@/modules/../widgets/aside' +import { EditorContent } from '@/modules/../widgets/editor-content' +import { Header } from '@/modules/../widgets/header' import { EditorStoreProvider } from './providers/editor-store' import { ModalsContextProvider } from './providers/modals-provider' diff --git a/libs/editor/src/app/providers/editor-store/config/editor.actions.ts b/libs/editor/src/app/providers/editor-store/config/editor.actions.ts index f67213bf..ad7451ff 100644 --- a/libs/editor/src/app/providers/editor-store/config/editor.actions.ts +++ b/libs/editor/src/app/providers/editor-store/config/editor.actions.ts @@ -1,10 +1,11 @@ import { makeAutoObservable } from 'mobx' import { EditorGetters } from '@/app' -import { TabsActions } from '@/components/tabs' -import { TerminalActions } from '@/components/terminal' -import { EditorContentActions } from '@/modules/editor-content' -import { FontSizes, TabSizes, Themes } from '@/shared/consts' +import { FontSizes, TabSizes } from '@/shared/consts/font-sizes' +import { Themes } from '@/shared/consts/themes' +import { EditorContentActions } from '@/widgets/editor-content' +import { TabsActions } from '@/widgets/tabs' +import { TerminalActions } from '@/widgets/terminal' import EditorStore from './editor.store' diff --git a/libs/editor/src/app/providers/editor-store/config/editor.getters.ts b/libs/editor/src/app/providers/editor-store/config/editor.getters.ts index 78d8d575..fa7cee03 100644 --- a/libs/editor/src/app/providers/editor-store/config/editor.getters.ts +++ b/libs/editor/src/app/providers/editor-store/config/editor.getters.ts @@ -1,8 +1,11 @@ import { makeAutoObservable } from 'mobx' import { EditorStore } from '@/app' -import { ContentTab } from '@/components/tabs' -import { executorAllowedLanguages, LanguagesValues } from '@/shared/consts' +import { + executorAllowedLanguages, + LanguagesValues +} from '@/shared/consts/languages' +import { ContentTab } from '@/widgets/tabs' class EditorGetters { private state: EditorStore @@ -14,18 +17,18 @@ class EditorGetters { getActiveTab(key = this.state.activeKey): ContentTab { return this.state.content.find((tab) => { - return tab.getKeyId() === key + return tab.key === key }) as ContentTab } getActiveTabText(): string { const activeTab = this.getActiveTab() - return activeTab?.getContent() + return activeTab.content } getTabIndex(key = this.state.activeKey): number { return this.state.content.findIndex((tab) => { - return tab.getKeyId() === key + return tab.key === key }) } diff --git a/libs/editor/src/app/providers/editor-store/config/editor.services.ts b/libs/editor/src/app/providers/editor-store/config/editor.services.ts index 029e099c..c36b7d71 100644 --- a/libs/editor/src/app/providers/editor-store/config/editor.services.ts +++ b/libs/editor/src/app/providers/editor-store/config/editor.services.ts @@ -1,6 +1,6 @@ import { makeAutoObservable } from 'mobx' -import { ExecuteServices } from '@/modules/header' +import { ExecuteServices } from '@/widgets/header' import EditorActions from './editor.actions' import EditorGetters from './editor.getters' diff --git a/libs/editor/src/app/providers/editor-store/config/editor.store.ts b/libs/editor/src/app/providers/editor-store/config/editor.store.ts index 27572b3e..1c45b2f1 100644 --- a/libs/editor/src/app/providers/editor-store/config/editor.store.ts +++ b/libs/editor/src/app/providers/editor-store/config/editor.store.ts @@ -1,16 +1,20 @@ import { makeAutoObservable } from 'mobx' -import { ContentTab } from '@/components/tabs' -import { ContentTabInstance } from '@/components/tabs/types' -import { ExecuteMessage } from '@/components/terminal' -import { FontSizes, TabSizes, Themes } from '@/shared/consts' +import { FontSizes, TabSizes } from '@/shared/consts/font-sizes' +import { Themes } from '@/shared/consts/themes' +import { ContentTab } from '@/widgets/tabs' +import { ExecuteMessage } from '@/widgets/terminal' + +import { + defaultCodeLang, + defaultCodeTemplate +} from '../lib/default-code-template' import EditorActions from './editor.actions' import EditorGetters from './editor.getters' import EditorServices from './editor.services' import { Hex, LocalStorageClient } from '$/client-shared' -import { defaultCodeLang, defaultCodeTemplate } from '../lib/default-code-template'; class EditorStore { activeKey = '' @@ -49,27 +53,21 @@ class EditorStore { ) this.customColor = storage.get('EDITOR_CUSTOM_COLOR', '#3d3d3d') - const savedContent = storage.get( - 'EDITOR_CONTENT_DATA', - [] - ) + const savedContent = storage.get('EDITOR_CONTENT_DATA', []) this.executeMessages = storage.get( 'EDITOR_EXECUTE_MESSAGES', [] ) if (savedContent.length === 0) { - const newTab = this.actions.tabs.createTab() - newTab!.lang = defaultCodeLang - newTab?.setTabContent(defaultCodeTemplate) - } - - for (const instance of savedContent) { - this.content.push(new ContentTab({ instance })) + this.actions.tabs.createTab() + const newTab = this.content[0] + newTab.lang = defaultCodeLang + newTab.content = defaultCodeTemplate } - const firstTab = this.content[0] - this.activeKey = firstTab.getKeyId() + this.content = [...this.content, ...savedContent] + this.activeKey = this.content[0].key } } diff --git a/libs/editor/src/app/providers/editor-store/lib/default-code-template.ts b/libs/editor/src/app/providers/editor-store/lib/default-code-template.ts index d203e6d4..1686c3be 100644 --- a/libs/editor/src/app/providers/editor-store/lib/default-code-template.ts +++ b/libs/editor/src/app/providers/editor-store/lib/default-code-template.ts @@ -1,4 +1,4 @@ -import { LanguagesValues } from '@/shared/consts' +import { LanguagesValues } from '@/shared/consts/languages' export const defaultCodeTemplate = `// Hello World! Here you can edit the code in 10 different languages. 😎 diff --git a/libs/editor/src/app/providers/modals-provider/types.ts b/libs/editor/src/app/providers/modals-provider/types.ts index fb0672a9..fb7c9b59 100644 --- a/libs/editor/src/app/providers/modals-provider/types.ts +++ b/libs/editor/src/app/providers/modals-provider/types.ts @@ -1,4 +1,4 @@ -import { TerminalTabKeys } from '@/components/terminal' +import { TerminalTabKeys } from '@/components/../../../widgets/terminal' import { ReducerPayload } from '$/client-shared' diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts b/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts index 59191d65..25c44a4f 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-custom-theme/use-custom-theme.ts @@ -1,4 +1,4 @@ -import { CUSTOM_THEME } from '@/shared/consts' +import { CUSTOM_THEME } from '@/shared/consts/themes' import { useMonaco } from '@monaco-editor/react' import { Hex } from '$/client-shared' 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 index 205e01f0..b2b7ab48 100644 --- 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 @@ -1,6 +1,6 @@ import { editor } from 'monaco-editor' -import EditorErrors from '@/shared/errors' +import EditorErrors from '@/shared/exceptions' import { isObject } from '$/client-shared' diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dracula.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dracula.json index 7a0fa558..ca06ad61 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dracula.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dracula.json @@ -205,4 +205,4 @@ "editorIndentGuide.activeBackground": "#9D550FB0", "editor.selectionHighlightBorder": "#222218" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dreamweaver.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dreamweaver.json index bf2fd418..a3221a4e 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dreamweaver.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Dreamweaver.json @@ -305,4 +305,4 @@ "editorCursor.foreground": "#000000", "editorWhitespace.foreground": "#BFBFBF" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Eiffel.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Eiffel.json index 4f6dcf8f..b5e4cc83 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Eiffel.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Eiffel.json @@ -199,4 +199,4 @@ "editorCursor.foreground": "#000000", "editorWhitespace.foreground": "#BFBFBF" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/GitHub.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/GitHub.json index 0e6010ff..bf49a21d 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/GitHub.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/GitHub.json @@ -244,4 +244,4 @@ "editorCursor.foreground": "#666666", "editorWhitespace.foreground": "#BBBBBB" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/IDLE.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/IDLE.json index 645cb07e..0c9684e5 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/IDLE.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/IDLE.json @@ -72,4 +72,4 @@ "editorCursor.foreground": "#000000", "editorWhitespace.foreground": "#BFBFBF" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Monokai.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Monokai.json index 3cdd3797..d042ab87 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Monokai.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Monokai.json @@ -141,4 +141,4 @@ "editorIndentGuide.activeBackground": "#9D550FB0", "editor.selectionHighlightBorder": "#222218" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Nord.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Nord.json index ea03bbb8..d56583bb 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Nord.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Nord.json @@ -90,4 +90,4 @@ "editorCursor.foreground": "#D8DEE9", "editorWhitespace.foreground": "#434C5ECC" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Tomorrow.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Tomorrow.json index fbeac222..02d9f667 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Tomorrow.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Tomorrow.json @@ -237,4 +237,4 @@ "editorCursor.foreground": "#AEAFAD", "editorWhitespace.foreground": "#D1D1D1" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Twilight.json b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Twilight.json index d3218d1e..94493733 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Twilight.json +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/themes/Twilight.json @@ -264,4 +264,4 @@ "editorCursor.foreground": "#A7A7A7", "editorWhitespace.foreground": "#FFFFFF40" } -} \ No newline at end of file +} diff --git a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts index fe8d17fb..fbf1e413 100644 --- a/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts +++ b/libs/editor/src/app/providers/theme-loader/hooks/use-theme-loader/use-theme-loader.ts @@ -1,7 +1,7 @@ import { useEffect } from 'preact/compat' -import { themes } from '@/shared/consts' -import EditorErrors from '@/shared/errors' +import { themes } from '@/shared/consts/themes' +import EditorErrors from '@/shared/exceptions' import { useStore } from '@/shared/hooks' import { useMonaco } from '@monaco-editor/react' diff --git a/libs/editor/src/components/html-preview/index.ts b/libs/editor/src/components/html-preview/index.ts deleted file mode 100644 index e8f2b22b..00000000 --- a/libs/editor/src/components/html-preview/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as HtmlPreview } from './ui/html-preview/html-preview' diff --git a/libs/editor/src/components/settings/index.ts b/libs/editor/src/components/settings/index.ts deleted file mode 100644 index 88b49eb4..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/tabs/store/content-tab.ts b/libs/editor/src/components/tabs/store/content-tab.ts deleted file mode 100644 index 10c82a5b..00000000 --- a/libs/editor/src/components/tabs/store/content-tab.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { makeAutoObservable } from 'mobx' -import { v4 as generateId } from 'uuid' - -import { FileHandlerData } from '@/modules/editor-content/types' -import { LanguagesValues } from '@/shared/consts' - -import { ContentTabInstance } from '../types' - -import { Nullable } from '$/client-shared' - -type ContentTabArgs = Partial<{ - lastNumber: number - fileData: FileHandlerData - instance: ContentTabInstance -}> - -export class ContentTab { - private _key = generateId() - private _fileHandle: Nullable = null - private _label = 'Untitled' - private _content = '' - public idx = 0 - public lang: LanguagesValues = 'text' - public wasChanged = false - - constructor({ lastNumber, fileData, instance }: ContentTabArgs) { - makeAutoObservable(this) - - if (instance) { - this.initUsingInstance(instance) - } else if (fileData) { - this.initUsingFileData(fileData) - } - - if (lastNumber) { - this.idx = lastNumber + 1 - } - } - - public setFileHandle(fileHandle: FileSystemFileHandle) { - this._fileHandle = fileHandle - this.wasChanged = false - this.setLabel(fileHandle.name) - } - - public getFileHandle() { - return this._fileHandle - } - - public setLabel(newLabel: string) { - this._label = newLabel - } - - public getLabel() { - return this._label - } - - public setTabContent(content: string) { - this._content = content - } - - public getContent() { - return this._content - } - - public getKeyId() { - return this._key - } - - private initUsingFileData(fileData: FileHandlerData) { - this._fileHandle = fileData.fileHandle - this.lang = fileData.language - this._content = fileData.content - this._label = fileData.name - } - - private initUsingInstance(instance: ContentTabInstance) { - this._key = instance._key - this._label = instance._label - this.idx = instance.idx - this._content = instance._content - this._fileHandle = instance._fileHandle - this.wasChanged = instance.wasChanged - this.lang = instance.lang - } -} diff --git a/libs/editor/src/components/tabs/types.ts b/libs/editor/src/components/tabs/types.ts deleted file mode 100644 index 5045e14f..00000000 --- a/libs/editor/src/components/tabs/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { LanguagesValues } from '@/shared/consts' - -import { Nullable } from '$/client-shared' - -export interface ContentTabInstance { - _key: string - _fileHandle: Nullable - _label: string - _content: string - idx: number - lang: LanguagesValues - wasChanged: boolean - executeMessage: string - isExecuteError: boolean -} diff --git a/libs/editor/src/modules/editor-content/ui/editor-core/editor-core.tsx b/libs/editor/src/entities/editor-core/editor-core.tsx similarity index 100% rename from libs/editor/src/modules/editor-content/ui/editor-core/editor-core.tsx rename to libs/editor/src/entities/editor-core/editor-core.tsx diff --git a/libs/editor/src/entities/editor-core/index.ts b/libs/editor/src/entities/editor-core/index.ts new file mode 100644 index 00000000..ffc616cd --- /dev/null +++ b/libs/editor/src/entities/editor-core/index.ts @@ -0,0 +1 @@ +export { default as EditorCore } from './editor-core' diff --git a/libs/editor/src/entities/header-options/index.ts b/libs/editor/src/entities/header-options/index.ts new file mode 100644 index 00000000..e6328e40 --- /dev/null +++ b/libs/editor/src/entities/header-options/index.ts @@ -0,0 +1 @@ +export { default as HeaderOptions } from './ui/header-options' diff --git a/libs/editor/src/modules/header/ui/header-options/header-options.styles.ts b/libs/editor/src/entities/header-options/ui/header-options.styles.ts similarity index 100% rename from libs/editor/src/modules/header/ui/header-options/header-options.styles.ts rename to libs/editor/src/entities/header-options/ui/header-options.styles.ts diff --git a/libs/editor/src/modules/header/ui/header-options/header-options.tsx b/libs/editor/src/entities/header-options/ui/header-options.tsx similarity index 67% rename from libs/editor/src/modules/header/ui/header-options/header-options.tsx rename to libs/editor/src/entities/header-options/ui/header-options.tsx index f1b1b02f..ff481125 100644 --- a/libs/editor/src/modules/header/ui/header-options/header-options.tsx +++ b/libs/editor/src/entities/header-options/ui/header-options.tsx @@ -1,24 +1,25 @@ import { Button } from 'antd' import { Link } from 'react-router-dom' -import { useFileService } from '@/modules/editor-content/hooks' -import { useCodeRunner } from '@/modules/header/hooks' import logo from '@/public/logo.svg' -import { useActions } from '@/shared/hooks' import { HeaderOptionsStyles } from './header-options.styles' import { RoutePaths } from '$/client-shared' -const HeaderOptions = () => { - const actions = useActions() - const { openFile, saveFile } = useFileService() - const runCode = useCodeRunner() - - const createTab = () => { - actions.tabs.createTab() - } +interface HeaderOptionsProps { + openFile: () => void + saveFile: () => void + createTab: () => void + runCode: () => void +} +const HeaderOptions = ({ + openFile, + saveFile, + createTab, + runCode +}: HeaderOptionsProps) => { return ( diff --git a/libs/editor/src/entities/header-right-section/index.ts b/libs/editor/src/entities/header-right-section/index.ts new file mode 100644 index 00000000..cc8dd794 --- /dev/null +++ b/libs/editor/src/entities/header-right-section/index.ts @@ -0,0 +1 @@ +export { default as HeaderRightSection } from './ui/header-right-section' diff --git a/libs/editor/src/modules/header/ui/header-right-section/header-right-section.styles.ts b/libs/editor/src/entities/header-right-section/ui/header-right-section.styles.ts similarity index 87% rename from libs/editor/src/modules/header/ui/header-right-section/header-right-section.styles.ts rename to libs/editor/src/entities/header-right-section/ui/header-right-section.styles.ts index 3894a312..e9ac57d9 100644 --- a/libs/editor/src/modules/header/ui/header-right-section/header-right-section.styles.ts +++ b/libs/editor/src/entities/header-right-section/ui/header-right-section.styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { Icon } from '@/modules/aside/ui/aside.styles' +import { Icon } from '../../../widgets/aside/ui/aside.styles' import { flex, wh } from '$/styles' diff --git a/libs/editor/src/entities/header-right-section/ui/header-right-section.tsx b/libs/editor/src/entities/header-right-section/ui/header-right-section.tsx new file mode 100644 index 00000000..11e94883 --- /dev/null +++ b/libs/editor/src/entities/header-right-section/ui/header-right-section.tsx @@ -0,0 +1,32 @@ +import { observer } from 'mobx-react-lite' + +import { useGetters } from '@/shared/hooks' + +import { useCodeRunner } from '../../../widgets/header/hooks' + +import { RightSection } from './header-right-section.styles' + +import { ColorButton } from '$/client-shared' + +interface HeaderRightSectionProps { + runCode: () => void + isDisabled: boolean +} + +const HeaderRightSection = observer( + ({ isDisabled, runCode }: HeaderRightSectionProps) => { + return ( + + + Run Code + + + ) + } +) + +export default HeaderRightSection diff --git a/libs/editor/src/entities/key-buildings/index.ts b/libs/editor/src/entities/key-buildings/index.ts new file mode 100644 index 00000000..cfb8de49 --- /dev/null +++ b/libs/editor/src/entities/key-buildings/index.ts @@ -0,0 +1 @@ +export { default as KeyBuildings } from './key-buildings' diff --git a/libs/editor/src/components/settings/ui/key-buildings/key-buildings.tsx b/libs/editor/src/entities/key-buildings/key-buildings.tsx similarity index 89% rename from libs/editor/src/components/settings/ui/key-buildings/key-buildings.tsx rename to libs/editor/src/entities/key-buildings/key-buildings.tsx index 0c476e84..b8d826b5 100644 --- a/libs/editor/src/components/settings/ui/key-buildings/key-buildings.tsx +++ b/libs/editor/src/entities/key-buildings/key-buildings.tsx @@ -1,8 +1,7 @@ import { Typography } from 'antd' -import { KeyBuildings as Keys } from '@/shared/consts' - -import { KeyBuildingStyles, SettingsText } from '../settings/settings.styles' +import { KeyBuildings as Keys } from '@/shared/consts/key-buildings' +import { KeyBuildingStyles, SettingsText } from '@/widgets/settings' import { WithChildren } from '$/client-shared' diff --git a/libs/editor/src/entities/preview-editor/index.ts b/libs/editor/src/entities/preview-editor/index.ts new file mode 100644 index 00000000..c9d3f781 --- /dev/null +++ b/libs/editor/src/entities/preview-editor/index.ts @@ -0,0 +1 @@ +export { default as PreviewEditor } from './ui/preview-editor' diff --git a/libs/editor/src/components/html-preview/ui/editor/preview-editor.styles.ts b/libs/editor/src/entities/preview-editor/ui/preview-editor.styles.ts similarity index 100% rename from libs/editor/src/components/html-preview/ui/editor/preview-editor.styles.ts rename to libs/editor/src/entities/preview-editor/ui/preview-editor.styles.ts diff --git a/libs/editor/src/components/html-preview/ui/editor/preview-editor.tsx b/libs/editor/src/entities/preview-editor/ui/preview-editor.tsx similarity index 91% rename from libs/editor/src/components/html-preview/ui/editor/preview-editor.tsx rename to libs/editor/src/entities/preview-editor/ui/preview-editor.tsx index 5a983184..a70d9533 100644 --- a/libs/editor/src/components/html-preview/ui/editor/preview-editor.tsx +++ b/libs/editor/src/entities/preview-editor/ui/preview-editor.tsx @@ -2,11 +2,9 @@ import { observer } from 'mobx-react-lite' import { editorConfig } from '@/shared/editor-config' import { useStore } from '@/shared/hooks' +import { PreviewLanguages, usePreview } from '@/widgets/html-preview' import MonacoEditor from '@monaco-editor/react' -import { usePreview } from '../../context' -import { PreviewLanguages } from '../../types' - import { EditorContainer, EditorTitle } from './preview-editor.styles' import { isString } from '$/client-shared' diff --git a/libs/editor/src/entities/preview-i-frame/index.ts b/libs/editor/src/entities/preview-i-frame/index.ts new file mode 100644 index 00000000..5385e26c --- /dev/null +++ b/libs/editor/src/entities/preview-i-frame/index.ts @@ -0,0 +1 @@ +export { default as IFrame } from './ui/i-frame' diff --git a/libs/editor/src/components/html-preview/lib/create-html-template.ts b/libs/editor/src/entities/preview-i-frame/lib/create-html-template.ts similarity index 100% rename from libs/editor/src/components/html-preview/lib/create-html-template.ts rename to libs/editor/src/entities/preview-i-frame/lib/create-html-template.ts diff --git a/libs/editor/src/components/html-preview/ui/i-frame/i-frame.tsx b/libs/editor/src/entities/preview-i-frame/ui/i-frame.tsx similarity index 70% rename from libs/editor/src/components/html-preview/ui/i-frame/i-frame.tsx rename to libs/editor/src/entities/preview-i-frame/ui/i-frame.tsx index 35088003..37b9c7c3 100644 --- a/libs/editor/src/components/html-preview/ui/i-frame/i-frame.tsx +++ b/libs/editor/src/entities/preview-i-frame/ui/i-frame.tsx @@ -1,13 +1,11 @@ import { useEffect, useState } from 'react' -import { EditorTitle } from '@/components/html-preview/ui/editor/preview-editor.styles' import { useStorage } from '@/shared/hooks' +import { usePreview } from '@/widgets/html-preview' -import { usePreview } from '../../context' -import { createHtmlTemplate } from '../../lib/create-html-template' +import { createHtmlTemplate } from './../lib/create-html-template' import { useDebounce } from '$/client-shared' -import { AiOutlineSwap } from '$/icons' const IFrame = () => { const { state } = usePreview() @@ -25,9 +23,6 @@ const IFrame = () => { return ( <> - - Result -