Začetni commit projekta rezervacije

This commit is contained in:
Mark Poljanšek committed 2025-04-23 20:19:33 +02:00
commit 328731b32f
56062 files changed
+2485242

No files matched your search

+141
View File
@@ -0,0 +1,141 @@
import * as React from 'react';
import InitColorSchemeScript from "../InitColorSchemeScript/index.js";
import { Result } from "./useCurrentColorScheme.js";
import type { StorageManager } from "./localStorageManager.js";
export interface ColorSchemeContextValue<SupportedColorScheme extends string> extends Result<SupportedColorScheme> {
allColorSchemes: SupportedColorScheme[];
}
export interface CssVarsProviderConfig<ColorScheme extends string> {
/**
* DOM attribute for applying color scheme
* @default 'data-color-scheme'
*/
attribute?: string;
/**
* localStorage key used to store application `mode`
* @default 'mode'
*/
modeStorageKey?: string;
/**
* localStorage key used to store `colorScheme`
* @default 'color-scheme'
*/
colorSchemeStorageKey?: string;
/**
* Design system default color scheme.
* - provides string if the design system has one default color scheme (either light or dark)
* - provides object if the design system has default light & dark color schemes
*/
defaultColorScheme: ColorScheme | {
light: ColorScheme;
dark: ColorScheme;
};
/**
* Disable CSS transitions when switching between modes or color schemes
* @default false
*/
disableTransitionOnChange?: boolean;
/**
* If `true`, theme values are recalculated when the mode changes.
* The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
* @default false
*/
forceThemeRerender?: boolean;
}
type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {
CssVarsProvider: (props: React.PropsWithChildren<Partial<CssVarsProviderConfig<ColorScheme>> & {
theme?: Identify<Identifier, {
cssVariables?: false;
cssVarPrefix?: string;
colorSchemes: Partial<Record<ColorScheme, any>>;
colorSchemeSelector?: 'media' | 'class' | 'data' | string;
}>;
/**
* The default mode when the storage is empty,
* require the theme to have `colorSchemes` with light and dark.
* @default 'system'
*/
defaultMode?: 'light' | 'dark' | 'system';
/**
* The document used to perform `disableTransitionOnChange` feature
* @default document
*/
documentNode?: Document | null;
/**
* The node used to attach the color-scheme attribute
* @default document
*/
colorSchemeNode?: Element | null;
/**
* The storage manager to be used for storing the mode and color scheme.
* @default using `window.localStorage`
*/
storageManager?: StorageManager | null;
/**
* The window that attaches the 'storage' event listener
* @default window
*/
storageWindow?: Window | null;
/**
* If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
*/
disableNestedContext?: boolean;
/**
* If `true`, the style sheet won't be generated.
*
* This is useful for controlling nested CssVarsProvider behavior.
* @default false
*/
disableStyleSheetGeneration?: boolean;
}>) => React.JSX.Element;
useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
getInitColorSchemeScript: typeof InitColorSchemeScript;
}
export default function createCssVarsProvider<ColorScheme extends string, Identifier extends string | undefined = undefined>(options: CssVarsProviderConfig<ColorScheme> & {
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId?: Identifier;
/**
* Design system default theme
*
* - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
* those object of the color scheme will be used when the color scheme is active.
*
* {
* colorSchemes: {
* light: { ...lightColorSchemeValues },
* dark: { ...darkColorSchemeValues }
* }
* }
*
* - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
* likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
*
* - If the theme contains the same keys as the color scheme, their values will be merged.
* Ex. {
* colorSchemes: {
* light: { palette: { primary: { ... } } },
* dark: { palette: { primary: { ...} } }
* },
* palette: { shared: { ... } }
* }
*
* becomes: {
* colorSchemes: { ... },
* palette: { shared: { ... }, primary: { ... } }
* }
*/
theme: any;
/**
* A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
*
* The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate
* variants from those tokens.
*/
resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
}): CreateCssVarsProviderResult<ColorScheme, Identifier>;
// disable automatic export
export {};
+15
View File
@@ -0,0 +1,15 @@
import { DefaultCssVarsTheme } from "./prepareCssVars.js";
interface Theme extends DefaultCssVarsTheme {
cssVarPrefix?: string;
colorSchemeSelector?: 'media' | string;
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
}
declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({
colorSchemeSelector,
...theme
}: T): T & {
vars: ThemeVars;
generateThemeVars: () => ThemeVars;
generateStyleSheets: () => Record<string, any>[];
};
export default createCssVarsTheme;
+5
View File
@@ -0,0 +1,5 @@
/**
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
* and they does not need to remember the prefix (defined once).
*/
export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;
+64
View File
@@ -0,0 +1,64 @@
type NestedRecord<V = any> = {
[k: string | number]: NestedRecord<V> | V;
};
/**
* This function create an object from keys, value and then assign to target
*
* @param {Object} obj : the target object to be assigned
* @param {string[]} keys
* @param {string | number} value
*
* @example
* const source = {}
* assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
* console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
*
* @example
* const source = { palette: { primary: 'var(--palette-primary)' } }
* assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
* console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
*/
export declare const assignNestedKeys: <T extends Record<string, any> | null | undefined | string = NestedRecord, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
/**
*
* @param {Object} obj : source object
* @param {Function} callback : a function that will be called when
* - the deepest key in source object is reached
* - the value of the deepest key is NOT `undefined` | `null`
*
* @example
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
* // ['palette', 'primary', 'main'] '#000000'
*/
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: (keys: Array<string>) => boolean) => void;
/**
* a function that parse theme and return { css, vars }
*
* @param {Object} theme
* @param {{
* prefix?: string,
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
* }} options.
* `prefix`: The prefix of the generated CSS variables. This function does not change the value.
*
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
*
* @example
* const { css, vars } = parser({
* fontSize: 12,
* lineHeight: 1.2,
* palette: { primary: { 500: 'var(--color)' } }
* }, { prefix: 'foo' })
*
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
*/
export default function cssVarsParser<T extends Record<string, any>>(theme: Record<string, any>, options?: {
prefix?: string;
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
}): {
css: Record<string, string | number>;
vars: T;
varsWithDefaults: {};
};
export {};
+1
View File
@@ -0,0 +1 @@
export declare function createGetColorSchemeSelector<T extends string>(selector: 'media' | 'class' | 'data' | string): (colorScheme: T) => string;
+8
View File
@@ -0,0 +1,8 @@
export { default } from "./createCssVarsProvider.js";
export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue } from "./createCssVarsProvider.js";
export { default as prepareCssVars } from "./prepareCssVars.js";
export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
export type { ExtractTypographyTokens } from "./prepareTypographyVars.js";
export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
export type { StorageManager } from "./localStorageManager.js";
+34
View File
@@ -0,0 +1,34 @@
export interface StorageManager {
(options: {
key: string;
storageWindow?: Window | null;
}): {
/**
* Function to get the value from the storage
* @param defaultValue The default value to be returned if the key is not found
* @returns The value from the storage or the default value
*/
get(defaultValue: any): any;
/**
* Function to set the value in the storage
* @param value The value to be set
* @returns void
*/
set(value: any): void;
/**
* Function to subscribe to the value of the specified key triggered by external events
* @param handler The function to be called when the value changes
* @returns A function to unsubscribe the handler
* @example
* React.useEffect(() => {
* const unsubscribe = storageManager.subscribe((value) => {
* console.log(value);
* });
* return unsubscribe;
* }, []);
*/
subscribe(handler: (value: any) => void): () => void;
};
}
declare const localStorageManager: StorageManager;
export default localStorageManager;
+16
View File
@@ -0,0 +1,16 @@
export interface DefaultCssVarsTheme {
colorSchemes?: Record<string, any>;
defaultColorScheme?: string;
}
declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
prefix?: string;
colorSchemeSelector?: 'media' | 'class' | 'data' | string;
disableCssColorScheme?: boolean;
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;
}): {
vars: ThemeVars;
generateThemeVars: () => ThemeVars;
generateStyleSheets: () => Record<string, any>[];
};
export default prepareCssVars;
+4
View File
@@ -0,0 +1,4 @@
type RecordPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : T[K] extends Record<string, any> ? K : never }[keyof T];
export type ExtractTypographyTokens<T> = { [K in RecordPropertyNames<T>]: string };
export default function prepareTypographyVars<T extends Record<string, any>>(typography: T): ExtractTypographyTokens<T>;
export {};
+56
View File
@@ -0,0 +1,56 @@
import type { StorageManager } from "./localStorageManager.js";
export type Mode = 'light' | 'dark' | 'system';
export type SystemMode = Exclude<Mode, 'system'>;
export interface State<SupportedColorScheme extends string> {
/**
* User selected mode.
* Note: on the server, mode is always undefined
*/
mode: 'light' | 'dark' | 'system' | undefined;
/**
* Only valid if `mode: 'system'`, either 'light' | 'dark'.
*/
systemMode: 'light' | 'dark' | undefined;
/**
* The color scheme for the light mode.
*/
lightColorScheme: SupportedColorScheme;
/**
* The color scheme for the dark mode.
*/
darkColorScheme: SupportedColorScheme;
}
export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
/**
* The current application color scheme. It is always `undefined` on the server.
*/
colorScheme: SupportedColorScheme | undefined;
/**
* `mode` is saved to internal state and localStorage
* If `mode` is null, it will be reset to the defaultMode
*/
setMode: (mode: Mode | null) => void;
/**
* `colorScheme` is saved to internal state and localStorage
* If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
*/
setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
light: SupportedColorScheme | null;
dark: SupportedColorScheme | null;
}> | null) => void;
};
export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
defaultLightColorScheme: SupportedColorScheme;
defaultDarkColorScheme: SupportedColorScheme;
supportedColorSchemes: Array<SupportedColorScheme>;
defaultMode?: Mode;
modeStorageKey?: string;
colorSchemeStorageKey?: string;
storageWindow?: Window | null;
storageManager?: StorageManager | null;
noSsr?: boolean;
}
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
export {};