67606561d3
* partly add some radix-ui/themes based components * add @radix-ui/themes integration to top-level app * WiP: compile _app_wrap based on which component library is used TODO: working color mode * WiP get color mode working with agnostic provider still not perfect, as the RadixColorModeProvider seems to trip hydration errors when using color_mode_cond component, but for now, this provides a nice balance between the two libraries and allows them to interoperate. * WiP template _app.js instead of making a separate wrap file * WiP: use next-themes for consistent darkmode switching * strict pin chakra deps * Move ChakraColorModeProvider to separate js file * move nasty radix themes js code into js files * remove chakra from default imports * chakra fixup import to use .js extension * Add radix theme typography and layout components * do NOT special case the radix theme... avoid templating json and applying it, avoid non-customizable logic just add the radix Theme component as an app wrap if the user specifies it to rx.App, and any other app-wrap theme-like component could _also_ be used without having to change the code. this also allows different themes for different sections of the app by simply placing elements inside a different rdxt.theme wrapper. * Theme uses "radius" not "borderRadius" * move next-themes to main packages.json this is always used, regardless of the component library * test_app: test cases for app_wrap interface * Finish wrapping Button, Switch, and TextField components * docstring, comments, static fixups * debounce: use alias or tag when passing child Element Fix REF-830 * test_app: ruin my beautiful indentation * py38 compatibility * Add event triggers for switch and TextField * Add type hints for radix theme components * radix themes fixups from writing the tests * Add integration test for radix themes components * test_app: mock out package installation we only need the compile result, we're not actually trying to install packages * avoid incompatible version of @emotion/react * test_radix_themes: include theme_panel component * next-themes default scheme: "light" until all of our components look good in dark mode, need to keep the default as light mode regardless of the system setting.
27 lines
948 B
Django/Jinja
27 lines
948 B
Django/Jinja
import { createContext, useState } from "react"
|
|
import { Event, hydrateClientStorage, useEventLoop } from "/utils/state.js"
|
|
|
|
export const initialState = {{ initial_state|json_dumps }}
|
|
export const ColorModeContext = createContext(null);
|
|
export const StateContext = createContext(null);
|
|
export const EventLoopContext = createContext(null);
|
|
export const clientStorage = {{ client_storage|json_dumps }}
|
|
export const initialEvents = [
|
|
Event('{{state_name}}.{{const.hydrate}}', hydrateClientStorage(clientStorage)),
|
|
]
|
|
export const isDevMode = {{ is_dev_mode|json_dumps }}
|
|
|
|
export function EventLoopProvider({ children }) {
|
|
const [state, addEvents, connectError] = useEventLoop(
|
|
initialState,
|
|
initialEvents,
|
|
clientStorage,
|
|
)
|
|
return (
|
|
<EventLoopContext.Provider value={[addEvents, connectError]}>
|
|
<StateContext.Provider value={state}>
|
|
{children}
|
|
</StateContext.Provider>
|
|
</EventLoopContext.Provider>
|
|
)
|
|
} |