From 3f81f6d3b395c279175716ffab6f00a9d570c313 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 26 Apr 2023 15:06:26 +0600 Subject: [PATCH] added simple modal dialog --- .eslintrc.cjs | 1 + package.json | 1 + src/main.tsx | 9 ++++-- .../layout/components/GridLayout/index.tsx | 4 +++ .../GridLayoutItemWrapper/index.tsx | 11 +++++++ src/modules/modal/containers/Modal/index.tsx | 16 ++++++++++ .../modal/containers/Modal/styles.module.scss | 31 +++++++++++++++++++ .../containers/SettingsContainer/index.tsx | 12 +++++++ .../settings/context/SettingsContext.ts | 12 +++++++ .../providers/SettingsProvider/index.tsx | 29 +++++++++++++++++ src/styles/main.scss | 7 +++++ yarn.lock | 31 ++++++++++++++++--- 12 files changed, 157 insertions(+), 7 deletions(-) create mode 100644 src/modules/modal/containers/Modal/index.tsx create mode 100644 src/modules/modal/containers/Modal/styles.module.scss create mode 100644 src/modules/settings/containers/SettingsContainer/index.tsx create mode 100644 src/modules/settings/context/SettingsContext.ts create mode 100644 src/modules/settings/providers/SettingsProvider/index.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4020bcb..2ae270d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -10,5 +10,6 @@ module.exports = { plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': 'warn', + '@typescript-eslint/no-empty-function': 0, }, } diff --git a/package.json b/package.json index 72db44f..d416da6 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@remirror/react-editors": "^1.0.27", "classnames": "^2.3.2", "dockview": "^1.7.1", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-markdown": "^8.0.7", diff --git a/src/main.tsx b/src/main.tsx index 4be82af..e09f381 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,11 +4,14 @@ import { Editor } from "~/pages/editor"; import "./styles/main.scss"; import { ThemeProvider } from "./modules/theme/containers/ThemeProvider"; +import { SettingsProvider } from "./modules/settings/providers/SettingsProvider"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - + + + + + ); diff --git a/src/modules/layout/components/GridLayout/index.tsx b/src/modules/layout/components/GridLayout/index.tsx index 5ba9143..375041f 100644 --- a/src/modules/layout/components/GridLayout/index.tsx +++ b/src/modules/layout/components/GridLayout/index.tsx @@ -6,6 +6,7 @@ import { GridLayoutItemWrapper } from "../GridLayoutItemWrapper"; import { splitLayoutVertical } from "./utils/splitLayoutVertical"; import { splitLayoutHorizontal } from "./utils/splitLayoutHorizontal"; import styles from "./styles.module.scss"; +import { useSettings } from "~/modules/settings/context/SettingsContext"; export interface GridLayoutProps { component: FC; @@ -22,6 +23,8 @@ const DefaultLayout = ({ panelProps, persistLayout, }: DefaultLayoutProps) => { + const { show: showSettings } = useSettings(); + const splitVertical = useCallback(() => { splitLayoutVertical(panelProps.api.id, panelProps.containerApi); }, [panelProps.api.id, panelProps.containerApi]); @@ -54,6 +57,7 @@ const DefaultLayout = ({ remove={remove} locked={locked} lock={lock} + showSettings={showSettings} > {createElement(component, { id: panelProps.api.id, diff --git a/src/modules/layout/components/GridLayoutItemWrapper/index.tsx b/src/modules/layout/components/GridLayoutItemWrapper/index.tsx index 1ed1564..78b700b 100644 --- a/src/modules/layout/components/GridLayoutItemWrapper/index.tsx +++ b/src/modules/layout/components/GridLayoutItemWrapper/index.tsx @@ -14,12 +14,14 @@ type GridLayoutItemWrapperProps = PropsWithChildren & { remove: () => void; locked: boolean; lock: () => void; + showSettings: () => void; }; const GridLayoutItemWrapper: FC = ({ children, splitVertical, splitHorizontal, + showSettings, remove, locked, lock, @@ -33,6 +35,7 @@ const GridLayoutItemWrapper: FC = ({ > + = ({ + + S + + {!locked && ( diff --git a/src/modules/modal/containers/Modal/index.tsx b/src/modules/modal/containers/Modal/index.tsx new file mode 100644 index 0000000..c4aa8a0 --- /dev/null +++ b/src/modules/modal/containers/Modal/index.tsx @@ -0,0 +1,16 @@ +import { FC, PropsWithChildren } from "react"; +import styles from "./styles.module.scss"; + +type ModalProps = PropsWithChildren & { + onClose: () => void; +}; + +const Modal: FC = ({ children }) => ( +
+
+
+
{children}
+
+
+); +export { Modal }; diff --git a/src/modules/modal/containers/Modal/styles.module.scss b/src/modules/modal/containers/Modal/styles.module.scss new file mode 100644 index 0000000..a217fc4 --- /dev/null +++ b/src/modules/modal/containers/Modal/styles.module.scss @@ -0,0 +1,31 @@ +.modal { + position: fixed; + inset: 0; + z-index: 100; +} + +.content { + position: absolute; + inset: 0; + z-index: 2; + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + box-sizing: border-box; +} + +.page { + background: var(--color-background); + padding: 16px; + border-radius: 10px; + margin: auto; +} + +.overlay { + position: absolute; + inset: 0; + z-index: 1; + background: rgba(0, 0, 0, 0.1); +} diff --git a/src/modules/settings/containers/SettingsContainer/index.tsx b/src/modules/settings/containers/SettingsContainer/index.tsx new file mode 100644 index 0000000..a50ac9f --- /dev/null +++ b/src/modules/settings/containers/SettingsContainer/index.tsx @@ -0,0 +1,12 @@ +import { FC } from "react"; + +const SettingsContainer: FC = () => ( +
+ +
+); + +export { SettingsContainer }; diff --git a/src/modules/settings/context/SettingsContext.ts b/src/modules/settings/context/SettingsContext.ts new file mode 100644 index 0000000..13b5cba --- /dev/null +++ b/src/modules/settings/context/SettingsContext.ts @@ -0,0 +1,12 @@ +import { createContext, useContext } from "react"; + +export type SettingsValue = Record; +export const defaultSettings: SettingsValue = {}; +export const SettingsContext = createContext({ + settings: defaultSettings, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + setSettings: (_: SettingsValue) => {}, + show: () => {}, + hide: () => {}, +}); +export const useSettings = () => useContext(SettingsContext); diff --git a/src/modules/settings/providers/SettingsProvider/index.tsx b/src/modules/settings/providers/SettingsProvider/index.tsx new file mode 100644 index 0000000..d7d3232 --- /dev/null +++ b/src/modules/settings/providers/SettingsProvider/index.tsx @@ -0,0 +1,29 @@ +import { FC, PropsWithChildren, useCallback, useState } from "react"; +import { Modal } from "~/modules/modal/containers/Modal"; +import { SettingsContainer } from "../../containers/SettingsContainer"; +import { + SettingsContext, + defaultSettings, +} from "../../context/SettingsContext"; + +const SettingsProvider: FC = ({ children }) => { + const [settings, setSettings] = useState(defaultSettings); + const [settingsModalVisible, setSettingsModalVisible] = useState(false); + + const show = useCallback(() => setSettingsModalVisible(true), []); + const hide = useCallback(() => setSettingsModalVisible(false), []); + + return ( + + {settingsModalVisible && ( + + + + )} + + {children} + + ); +}; + +export { SettingsProvider }; diff --git a/src/styles/main.scss b/src/styles/main.scss index aecd2f1..a70ab08 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -18,9 +18,16 @@ body { a { color: var(--color-link); + text-decoration: none; + + &:hover { + text-decoration: underline; + } } ul { + padding-left: 1em; + li p { margin: 0.5em 0; } diff --git a/yarn.lock b/yarn.lock index a881c30..a687879 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3157,6 +3157,11 @@ deepmerge@4.3.1, deepmerge@^4.2.2: resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + defaults@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a" @@ -3894,6 +3899,19 @@ formdata-polyfill@^4.0.10: dependencies: fetch-blob "^3.1.2" +formik@^2.2.9: + version "2.2.9" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0" + integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA== + dependencies: + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^1.10.0" + fs-extra@11.1.0: version "11.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.0.tgz#5784b102104433bb0e090f48bfc4a30742c357ed" @@ -4230,7 +4248,7 @@ hastscript@^6.0.0: property-information "^5.0.0" space-separated-tokens "^1.0.0" -hoist-non-react-statics@^3.3.1: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -4917,7 +4935,7 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" -lodash-es@^4.17.15: +lodash-es@^4.17.15, lodash-es@^4.17.21: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== @@ -6199,6 +6217,11 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -7120,7 +7143,7 @@ through@2: resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== -tiny-warning@^1.0.3: +tiny-warning@^1.0.2, tiny-warning@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -7189,7 +7212,7 @@ ts-easing@^0.2.0: resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec" integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ== -tslib@^1.8.1: +tslib@^1.10.0, tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==