chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

refactor colorpicker component

Browse source
This commit is contained in:
Chris Kruining 2025-01-07 13:14:17 +01:00
parent 55ae8902a8
commit 57bb6ec2d9
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
7 changed files with 50 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app.tsx
View file

@ -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";

15
src/components/colorschemepicker.spec.tsx
View file

@ -1,15 +0,0 @@
import { describe, it, expect } from 'bun:test';
import { render } from "@solidjs/testing-library"
import { ColorSchemePicker } from "./colorschemepicker";
// describe('<ColorSchemePicker />', () => {
// it('should render', async () => {
// const { getByLabelText } = render(() => <ColorSchemePicker />);
// const kaas = getByLabelText('Color scheme picker');
// console.log(kaas);
// expect(true).toBe(true);
// });
// });

35
src/components/colorschemepicker.tsx → src/features/theme/context.tsx
View file

@ -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<ColorScheme, keyof typeof ColorScheme> = 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<ThemeContextType>();
const useStore = () => useContext(ThemeContext)!;
export const useStore = () => useContext(ThemeContext)!;
export const useTheme = () => {
const ctx = useContext(ThemeContext);
@ -84,26 +80,3 @@ export const ThemeProvider: ParentComponent = (props) => {
}}</Show>
</Suspense>;
};
export const ColorSchemePicker: Component = (props) => {
const { theme, setColorScheme, setHue } = useStore();
return <>
<label aria-label="Color scheme picker">
<Dropdown id="color-scheme-picker" class={css.picker} value={theme.colorScheme} setValue={(next) => setColorScheme(next())} values={colorSchemes}>{
(k, v) => <>
<Switch>
<Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
<Match when={k === ColorScheme.Light}><WiMoonAltNew /></Match>
<Match when={k === ColorScheme.Dark}><WiMoonAltFull /></Match>
</Switch>
{v}
</>
}</Dropdown>
</label>
<label class={css.hue} aria-label="Hue slider">
<input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
</label>
</>;
};

2
src/features/theme/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { useTheme, getState, ThemeProvider, ColorScheme } from './context';
export { ColorSchemePicker } from './picker';

0
src/components/colorschemepicker.module.css → src/features/theme/picker.module.css
View file

41
src/features/theme/picker.tsx Normal file
View file

@ -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<ColorScheme, keyof typeof ColorScheme> = 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<ColorScheme>(theme.colorScheme);
createEffect(() => {
const next = scheme();
if (!next) {
return;
}
setColorScheme(next);
});
return <>
<label aria-label="Color scheme picker">
<Select id="color-scheme-picker" class={css.picker} value={theme.colorScheme} setValue={setScheme} values={colorSchemes}>{
(k, v) => <>
<Switch>
<Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
<Match when={k === ColorScheme.Light}><WiMoonAltNew /></Match>
<Match when={k === ColorScheme.Dark}><WiMoonAltFull /></Match>
</Switch>
{v}
</>
}</Select>
</label>
<label class={css.hue} aria-label="Hue slider">
<input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
</label>
</>;
};

4
src/routes/(editor).tsx
View file

@ -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();