Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 04:00:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

misc: remove ThemeProvider usage

Browse Source
This commit is contained in:
ammarahm-ed
2023-07-26 18:43:07 +05:00
parent c5fcfd6654
commit 71cf9955cd
14 changed files with 53 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/mobile/app/app.js
View File

@@ -16,7 +16,10 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { THEME_COMPATIBILITY_VERSION, ThemeProvider } from "@notesnook/theme";
import {
THEME_COMPATIBILITY_VERSION,
useThemeEngineStore
} from "@notesnook/theme";
import React, { useEffect } from "react";
import { View } from "react-native";
import "react-native-gesture-handler";
@@ -90,7 +93,7 @@ const App = () => {
);
};
export const withThemeProvider = (Element) => {
export const withTheme = (Element) => {
return function AppWithThemeProvider() {
const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
state.colorScheme,
@@ -119,18 +122,14 @@ export const withThemeProvider = (Element) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<ThemeProvider
value={{
theme: colorScheme === "dark" ? darkTheme : lightTheme,
//theme: ThemeDracula,
setTheme: () => null
}}
>
<Element />
</ThemeProvider>
);
useEffect(() => {
useThemeEngineStore
.getState()
.setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
}, [colorScheme, darkTheme, lightTheme]);
return <Element />;
};
};
export default withThemeProvider(withErrorBoundry(App, "App"));
export default withTheme(withErrorBoundry(App, "App"));

4
apps/mobile/app/screens/editor/tiptap/use-editor.ts
View File

@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { EVENTS } from "@notesnook/core/common";
import { useThemeProvider } from "@notesnook/theme";
import { useThemeEngineStore } from "@notesnook/theme";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import WebView from "react-native-webview";
import { db } from "../../../common/database";
@@ -59,7 +59,7 @@ export const useEditor = (
readonly?: boolean,
onChange?: (html: string) => void
) => {
const { theme } = useThemeProvider();
const theme = useThemeEngineStore((state) => state.theme);
const [loading, setLoading] = useState(false);
const [sessionId, setSessionId] = useState<string>(makeSessionId());

4
apps/mobile/share/editor.js
View File

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { getDefaultPresets } from "@notesnook/editor/dist/toolbar/tool-definitions";
import { useThemeColors, useThemeProvider } from "@notesnook/theme";
import { useThemeColors, useThemeEngineStore } from "@notesnook/theme";
import React, {
useCallback,
useEffect,
@@ -42,7 +42,7 @@ import { eOnLoadNote } from "../app/utils/events";
const useEditor = () => {
const ref = useRef();
const [sessionId] = useState("share-editor-session" + Date.now());
const { theme } = useThemeProvider();
const theme = useThemeEngineStore((state) => state.theme);
const commands = useMemo(() => new Commands(ref), [ref]);
const currentNote = useRef();
const doubleSpacedLines = useSettingStore(

3
apps/web/package-lock.json generated
View File

@@ -410,7 +410,8 @@
"@theme-ui/color": "^0.16.0",
"@theme-ui/components": "0.14.7",
"@theme-ui/core": "0.14.7",
"tinycolor2": "^1.4.2"
"tinycolor2": "^1.4.2",
"zustand": "^4.3.8"
},
"devDependencies": {
"@trpc/server": "^10.31.0",

6
extensions/web-clipper/package-lock.json generated
View File

@@ -105,7 +105,8 @@
"@theme-ui/color": "^0.16.0",
"@theme-ui/components": "0.14.7",
"@theme-ui/core": "0.14.7",
"tinycolor2": "^1.4.2"
"tinycolor2": "^1.4.2",
"zustand": "^4.3.8"
},
"devDependencies": {
"@trpc/server": "^10.31.0",
@@ -23788,7 +23789,8 @@
"@types/tinycolor2": "^1.4.3",
"isomorphic-fetch": "^3.0.0",
"tinycolor2": "^1.4.2",
"ts-json-schema-generator": "^1.2.0"
"ts-json-schema-generator": "^1.2.0",
"zustand": "^4.3.8"
}
},
"@npmcli/fs": {

7
extensions/web-clipper/src/app.tsx
View File

@@ -17,11 +17,11 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useEffect } from "react";
import { ThemeProvider } from "./components/theme-provider";
import { useAppStore } from "./stores/app-store";
import { Login } from "./views/login";
import { Main } from "./views/main";
import { Settings } from "./views/settings";
import { EmotionThemeProvider, useThemeEngineStore } from "@notesnook/theme";
export function App() {
const isLoggedIn = useAppStore((s) => s.isLoggedIn);
@@ -40,11 +40,12 @@ export function App() {
if (user && user.theme) {
document.body.style.backgroundColor =
user.theme.scopes.base.primary.background;
useThemeEngineStore.getState().setTheme(user.theme);
}
}, [user]);
return (
<ThemeProvider theme={user?.theme} injectCssVars>
<EmotionThemeProvider scope="base" injectCssVars>
{(() => {
switch (route) {
case "/login":
@@ -56,6 +57,6 @@ export function App() {
return <Settings />;
}
})()}
</ThemeProvider>
</EmotionThemeProvider>
);
}

9
extensions/web-clipper/src/components/picker/index.tsx
View File

@@ -19,8 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { PropsWithChildren } from "react";
import Modal from "react-modal";
import { Button, Flex } from "@theme-ui/components";
import { ThemeProvider } from "../theme-provider";
import { useThemeEngineStore } from "@notesnook/theme";
import { EmotionThemeProvider, useThemeEngineStore } from "@notesnook/theme";
Modal.setAppElement("#root");
@@ -62,8 +61,8 @@ export const Picker = (props: PropsWithChildren<PickerProps>) => {
onRequestClose={onClose}
isOpen={isOpen}
>
<ThemeProvider
theme={theme}
<EmotionThemeProvider
scope="base"
injectCssVars
sx={{
display: "flex",
@@ -100,7 +99,7 @@ export const Picker = (props: PropsWithChildren<PickerProps>) => {
</Button>
</Flex>
</Flex>
</ThemeProvider>
</EmotionThemeProvider>
</Modal>
);
};

49
extensions/web-clipper/src/components/theme-provider/index.tsx
View File

@@ -1,49 +0,0 @@
/*
This file is part of the Notesnook project (https://notesnook.com/)
Copyright (C) 2023 Streetwriters (Private) Limited
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// import { useStore } from "../../stores/theme-store";
// import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import {
ThemeProvider,
ThemeLight,
EmotionThemeProvider,
ThemeDefinition
} from "@notesnook/theme";
import { BoxProps } from "@theme-ui/components";
import { ReactNode } from "react";
type ThemeProviderProps = {
children: ReactNode;
theme?: ThemeDefinition;
injectCssVars?: boolean;
} & Omit<BoxProps, "variant">;
function BaseThemeProvider(props: ThemeProviderProps) {
const { children, theme = ThemeLight, ...restProps } = props;
return (
<ThemeProvider value={{ setTheme: () => {}, theme }}>
<EmotionThemeProvider scope="base" {...restProps}>
{children}
</EmotionThemeProvider>
</ThemeProvider>
);
}
export { BaseThemeProvider as ThemeProvider };

6
packages/editor-mobile/package-lock.json generated
View File

@@ -122,7 +122,8 @@
"@theme-ui/color": "^0.16.0",
"@theme-ui/components": "0.14.7",
"@theme-ui/core": "0.14.7",
"tinycolor2": "^1.4.2"
"tinycolor2": "^1.4.2",
"zustand": "^4.3.8"
},
"devDependencies": {
"@trpc/server": "^10.31.0",
@@ -21649,7 +21650,8 @@
"@types/tinycolor2": "^1.4.3",
"isomorphic-fetch": "^3.0.0",
"tinycolor2": "^1.4.2",
"ts-json-schema-generator": "^1.2.0"
"ts-json-schema-generator": "^1.2.0",
"zustand": "^4.3.8"
}
},
"@pmmmwh/react-refresh-webpack-plugin": {

26
packages/editor-mobile/src/App.tsx
View File

@@ -17,32 +17,18 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import {
ScopedThemeProvider,
ThemeLight,
ThemeProvider
} from "@notesnook/theme";
import { useState } from "react";
import { ScopedThemeProvider } from "@notesnook/theme";
import "./App.css";
import Tiptap from "./components/editor";
import { EmotionEditorTheme } from "./theme-factory";
function App(): JSX.Element {
const [theme, setTheme] = useState(ThemeLight);
return (
<ThemeProvider
value={{
theme: theme,
setTheme: setTheme
}}
>
<ScopedThemeProvider value="base">
<EmotionEditorTheme>
<Tiptap />
</EmotionEditorTheme>
</ScopedThemeProvider>
</ThemeProvider>
<ScopedThemeProvider value="base">
<EmotionEditorTheme>
<Tiptap />
</EmotionEditorTheme>
</ScopedThemeProvider>
);
}

6
packages/editor/package-lock.json generated
View File

@@ -137,7 +137,8 @@
"@theme-ui/color": "^0.16.0",
"@theme-ui/components": "0.14.7",
"@theme-ui/core": "0.14.7",
"tinycolor2": "^1.4.2"
"tinycolor2": "^1.4.2",
"zustand": "^4.3.8"
},
"devDependencies": {
"@trpc/server": "^10.31.0",
@@ -4356,7 +4357,8 @@
"@types/tinycolor2": "^1.4.3",
"isomorphic-fetch": "^3.0.0",
"tinycolor2": "^1.4.2",
"ts-json-schema-generator": "^1.2.0"
"ts-json-schema-generator": "^1.2.0",
"zustand": "^4.3.8"
}
},
"@notesnook/ui": {

50
packages/theme/package-lock.json generated
View File

@@ -738,18 +738,6 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"peer": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/node-fetch": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
@@ -848,19 +836,6 @@
"node": ">=10"
}
},
"node_modules/react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -1273,8 +1248,7 @@
"@emotion/use-insertion-effect-with-fallbacks": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
"integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
"requires": {}
"integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw=="
},
"@emotion/utils": {
"version": "1.2.1",
@@ -1720,15 +1694,6 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"peer": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"node-fetch": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
@@ -1795,16 +1760,6 @@
"@babel/runtime": "^7.17.8"
}
},
"react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"peer": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -1952,8 +1907,7 @@
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"requires": {}
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
},
"webidl-conversions": {
"version": "3.0.1",

3
packages/ui/package-lock.json generated
View File

@@ -45,7 +45,8 @@
"@theme-ui/color": "^0.16.0",
"@theme-ui/components": "0.14.7",
"@theme-ui/core": "0.14.7",
"tinycolor2": "^1.4.2"
"tinycolor2": "^1.4.2",
"zustand": "^4.3.8"
},
"devDependencies": {
"@trpc/server": "^10.31.0",

6
servers/themes/package-lock.json generated
View File

@@ -34,7 +34,8 @@
"@theme-ui/color": "^0.16.0",
"@theme-ui/components": "0.14.7",
"@theme-ui/core": "0.14.7",
"tinycolor2": "^1.4.2"
"tinycolor2": "^1.4.2",
"zustand": "^4.3.8"
},
"devDependencies": {
"@trpc/server": "^10.31.0",
@@ -2148,7 +2149,8 @@
"@types/tinycolor2": "^1.4.3",
"isomorphic-fetch": "^3.0.0",
"tinycolor2": "^1.4.2",
"ts-json-schema-generator": "^1.2.0"
"ts-json-schema-generator": "^1.2.0",
"zustand": "^4.3.8"
}
},
"@orama/orama": {