From 57bb6ec2d97cba1a3040f75d63e7b8094875d788 Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Tue, 7 Jan 2025 13:14:17 +0100 Subject: [PATCH] refactor colorpicker component --- src/app.tsx | 2 +- src/components/colorschemepicker.spec.tsx | 15 ------- .../theme/context.tsx} | 35 ++-------------- src/features/theme/index.ts | 2 + .../theme/picker.module.css} | 0 src/features/theme/picker.tsx | 41 +++++++++++++++++++ src/routes/(editor).tsx | 4 +- 7 files changed, 50 insertions(+), 49 deletions(-) delete mode 100644 src/components/colorschemepicker.spec.tsx rename src/{components/colorschemepicker.tsx => features/theme/context.tsx} (58%) create mode 100644 src/features/theme/index.ts rename src/{components/colorschemepicker.module.css => features/theme/picker.module.css} (100%) create mode 100644 src/features/theme/picker.tsx diff --git a/src/app.tsx b/src/app.tsx index f47cf2b..6ddea78 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -2,7 +2,7 @@ import { MetaProvider } from "@solidjs/meta"; import { Router } from "@solidjs/router"; import { FileRoutes } from "@solidjs/start/router"; import { Suspense } from "solid-js"; -import { ThemeProvider } from "./components/colorschemepicker"; +import { ThemeProvider } from "./features/theme"; import { I18nProvider } from "./features/i18n"; import "./app.css"; diff --git a/src/components/colorschemepicker.spec.tsx b/src/components/colorschemepicker.spec.tsx deleted file mode 100644 index 1704e8d..0000000 --- a/src/components/colorschemepicker.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { describe, it, expect } from 'bun:test'; -import { render } from "@solidjs/testing-library" -import { ColorSchemePicker } from "./colorschemepicker"; - -// describe('', () => { -// it('should render', async () => { -// const { getByLabelText } = render(() => ); - -// const kaas = getByLabelText('Color scheme picker'); - -// console.log(kaas); - -// expect(true).toBe(true); -// }); -// }); \ No newline at end of file diff --git a/src/components/colorschemepicker.tsx b/src/features/theme/context.tsx similarity index 58% rename from src/components/colorschemepicker.tsx rename to src/features/theme/context.tsx index 7f41c14..5f75c50 100644 --- a/src/components/colorschemepicker.tsx +++ b/src/features/theme/context.tsx @@ -1,10 +1,8 @@ -import { Component, createContext, createEffect, createResource, Match, ParentComponent, Show, Suspense, Switch, useContext } from "solid-js"; import { action, query, useAction } from "@solidjs/router"; -import { useSession } from "vinxi/http"; +import { createContext, createEffect, createResource, ParentComponent, Show, Suspense, useContext } from "solid-js"; import { createStore } from "solid-js/store"; -import { Dropdown } from "./dropdown"; -import { WiMoonAltFull, WiMoonAltNew, WiMoonAltFirstQuarter } from "solid-icons/wi"; -import css from './colorschemepicker.module.css'; +import { useSession } from "vinxi/http"; + export enum ColorScheme { Auto = 'light dark', @@ -12,8 +10,6 @@ export enum ColorScheme { Dark = 'dark', } -const colorSchemes: Record = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k] as const)) as any; - export interface State { colorScheme: ColorScheme; hue: number; @@ -50,7 +46,7 @@ interface ThemeContextType { const ThemeContext = createContext(); -const useStore = () => useContext(ThemeContext)!; +export const useStore = () => useContext(ThemeContext)!; export const useTheme = () => { const ctx = useContext(ThemeContext); @@ -83,27 +79,4 @@ export const ThemeProvider: ParentComponent = (props) => { ; }} ; -}; - -export const ColorSchemePicker: Component = (props) => { - const { theme, setColorScheme, setHue } = useStore(); - - return <> - - - - ; }; \ No newline at end of file diff --git a/src/features/theme/index.ts b/src/features/theme/index.ts new file mode 100644 index 0000000..6438a6e --- /dev/null +++ b/src/features/theme/index.ts @@ -0,0 +1,2 @@ +export { useTheme, getState, ThemeProvider, ColorScheme } from './context'; +export { ColorSchemePicker } from './picker'; \ No newline at end of file diff --git a/src/components/colorschemepicker.module.css b/src/features/theme/picker.module.css similarity index 100% rename from src/components/colorschemepicker.module.css rename to src/features/theme/picker.module.css diff --git a/src/features/theme/picker.tsx b/src/features/theme/picker.tsx new file mode 100644 index 0000000..6d23a1b --- /dev/null +++ b/src/features/theme/picker.tsx @@ -0,0 +1,41 @@ +import { WiMoonAltFirstQuarter, WiMoonAltFull, WiMoonAltNew } from "solid-icons/wi"; +import { Component, createEffect, createSignal, Match, Switch } from "solid-js"; +import { Select } from "~/components/select"; +import { ColorScheme, useStore } from "./context"; +import css from './picker.module.css'; + +const colorSchemes: Record = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k] as const)) as any; + +export const ColorSchemePicker: Component = (props) => { + const { theme, setColorScheme, setHue } = useStore(); + const [scheme, setScheme] = createSignal(theme.colorScheme); + + createEffect(() => { + const next = scheme(); + + if (!next) { + return; + } + + setColorScheme(next); + }); + + return <> + + + + ; +}; \ No newline at end of file diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx index ce883c1..5fd3902 100644 --- a/src/routes/(editor).tsx +++ b/src/routes/(editor).tsx @@ -4,12 +4,12 @@ import { FilesProvider } from "~/features/file"; import { Menu, MenuProvider } from "~/features/menu"; import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router"; import { CommandPalette, CommandPaletteApi, createCommand, Modifier } from "~/features/command"; -import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker"; import { getRequestEvent } from "solid-js/web"; import { HttpHeader } from "@solidjs/start"; import { FaSolidPalette } from "solid-icons/fa"; -import css from "./editor.module.css"; import { LocalePicker } from "~/features/i18n"; +import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/features/theme"; +import css from "./editor.module.css"; const event = getRequestEvent();