addon-ui 0.3.0

package/src/components/types.ts

@@ -0,0 +1,65 @@
+import type {
+    AvatarProps,
+    ButtonProps,
+    CheckboxProps,
+    DialogProps,
+    DrawerProps,
+    FooterProps,
+    HeaderProps,
+    HighlightProps,
+    IconProps,
+    IconButtonProps,
+    ListProps,
+    ListItemProps,
+    ModalProps,
+    OdometerProps,
+    ScrollAreaProps,
+    SwitchProps,
+    TagProps,
+    TextAreaProps,
+    TextFieldProps,
+    ToastProps,
+    TooltipProps,
+    ViewProps,
+    ViewDrawerProps,
+    ViewModalProps,
+} from "../components";
+
+export interface ComponentsProps {
+    avatar?: Pick<AvatarProps, "size" | "radius" | "cursorPointer" | "delayMs">;
+    button?: Pick<ButtonProps, "variant" | "color" | "size" | "radius">;
+    checkbox?: Pick<CheckboxProps, "variant" | "size" | "radius" | "checkedIcon" | "indeterminateIcon">;
+    dialog?: DialogProps;
+    drawer?: DrawerProps;
+    footer?: FooterProps;
+    header?: Pick<HeaderProps, "alignCenter" | "before" | "after">;
+    highlight?: HighlightProps;
+    icon?: Omit<IconProps, "name">;
+    iconButton?: Pick<IconButtonProps, "variant" | "size" | "radius">;
+    list?: ListProps;
+    listItem?: ListItemProps;
+    modal?: ModalProps;
+    odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
+    scrollArea?: ScrollAreaProps;
+    switch?: SwitchProps;
+    tag?: Pick<TagProps, "variant" | "size" | "color" | "radius" | "clickable">;
+    textArea?: TextAreaProps;
+    textField?: TextFieldProps;
+    toast?: Pick<
+        ToastProps,
+        | "side"
+        | "duration"
+        | "swipeDirection"
+        | "swipeThreshold"
+        | "closeProps"
+        | "closeIcon"
+        | "fullWidth"
+        | "sticky"
+        | "radius"
+        | "color"
+    >;
+    tooltip?: TooltipProps;
+    view?: ViewProps;
+    viewDrawer?: ViewDrawerProps;
+    viewModal?: ViewModalProps;
+}

package/src/config/default.ts

@@ -0,0 +1,3 @@
+import {Config} from "./index";
+
+export default {} as Config;

package/src/config/index.ts

@@ -0,0 +1,8 @@
+import {ComponentsProps, Config, ExtraProps, Icons} from "../types/config";
+
+export type {ComponentsProps, Config, ExtraProps, Icons};
+
+export const defineConfig = (config: Partial<Config>): Config => {
+    const {components = {}, extra = {}, icons = {}} = config;
+    return {components, extra, icons};
+};

package/src/declaration.d.ts

@@ -0,0 +1,8 @@
+declare module "*.module.css" {
+    const classes: CSSModuleClasses;
+    export default classes;
+}
+declare module "*.module.scss" {
+    const classes: CSSModuleClasses;
+    export default classes;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./providers";
+export {Theme, type ThemeStorageContract} from "./types/theme";

package/src/plugin/builder/ConfigBuilder.ts

@@ -0,0 +1,32 @@
+import fs from "fs";
+import path from "path";
+import Finder from "../finder/Finder";
+
+import type {BuilderContract} from "../types";
+
+export default class ConfigBuilder implements BuilderContract {
+    protected template: string;
+
+    public constructor(protected finder: Finder) {
+        this.template = fs.readFileSync(path.resolve(__dirname, "virtual.config.ts"), "utf8");
+    }
+
+    public build(): string {
+        const files = this.finder.getFiles();
+
+        const imports = files.map(file => {
+            return file.name ? `import ${file.name} from "${file.import}"` : `import "${file.import}"`;
+        });
+
+        // Elements must be reversed for correct merging of configs by priority
+        const names = files
+            .map(file => file.name)
+            .filter(Boolean)
+            .reverse();
+
+        // prettier-ignore
+        return this.template
+            .replace("//configs imports", imports.join("\n"))
+            .replace("{}", names.join(", "));
+    }
+}

package/src/plugin/builder/StyleBuilder.ts

@@ -0,0 +1,35 @@
+import fs from "fs";
+import path from "path";
+import Finder from "../finder/Finder";
+
+import type {BuilderContract} from "../types";
+
+export default class StyleBuilder implements BuilderContract {
+    public constructor(protected finder: Finder) {}
+
+    public build(): string {
+        const files = this.finder.getFiles();
+
+        const usesLines = new Set<string>();
+        const stylesLines: string[] = [];
+
+        const lines = files
+            .map(file => file.import)
+            .reverse()
+            .reduce((lines, filePath) => {
+                return lines + "\n" + fs.readFileSync(path.resolve(filePath), "utf8");
+            }, "")
+            .split("\n");
+
+        for (const line of lines) {
+            const trimmed = line.trim();
+            if (trimmed.startsWith("@use")) {
+                usesLines.add(trimmed);
+            } else {
+                stylesLines.push(line);
+            }
+        }
+
+        return [...usesLines].join("\n") + "\n" + stylesLines.join("\n");
+    }
+}

package/src/plugin/builder/virtual.config.ts

@@ -0,0 +1,5 @@
+import {merge} from "ts-deepmerge";
+
+//configs imports;
+
+export default merge({});

package/src/plugin/finder/ConfigFinder.ts

@@ -0,0 +1,26 @@
+import path from "path";
+import Finder from "./Finder";
+
+import type {ReadonlyConfig} from "adnbn";
+import type {FileImportInfo} from "../types";
+
+export default class ConfigFinder extends Finder {
+    protected getAllowedExtensions(): string[] {
+        return ["tsx", "ts"];
+    }
+
+    constructor(fileName: string, config: ReadonlyConfig) {
+        super(fileName, config);
+    }
+
+    protected getFile(dirPath: string): FileImportInfo | undefined {
+        const filePath = this.resolveFileWithExtensions(dirPath, this.fileName);
+
+        if (!filePath) return;
+
+        return {
+            name: dirPath.replaceAll(path.sep, "").replaceAll("-", ""),
+            import: this.toImportPath(filePath),
+        };
+    }
+}

package/src/plugin/finder/Finder.ts

@@ -0,0 +1,76 @@
+import fs from "fs";
+import path from "path";
+
+import type {ReadonlyConfig} from "adnbn";
+
+import type {FileImportInfo} from "../types";
+
+export interface FinderOptions {
+    searchDirs: string[];
+    fileName: string;
+    canMerge: boolean;
+}
+
+export default abstract class Finder {
+    protected abstract getAllowedExtensions(): string[];
+
+    protected abstract getFile(dirPath: string): FileImportInfo | undefined;
+
+    protected searchDirs: string[] = [];
+    protected canMerge: boolean = true;
+
+    protected constructor(
+        protected readonly fileName: string,
+        protected readonly config: ReadonlyConfig
+    ) {}
+
+    public setCanMerge(canMerge: boolean): this {
+        this.canMerge = canMerge;
+        return this;
+    }
+
+    public setSearchDirs(searchDirs: string[]): this {
+        this.searchDirs = searchDirs;
+        return this;
+    }
+
+    public getFiles(): FileImportInfo[] {
+        const files: FileImportInfo[] = [];
+
+        let isFound = false;
+
+        this.searchDirs.forEach(dirPath => {
+            const file = this.getFile(dirPath);
+
+            if (file && (this.canMerge || !isFound)) {
+                files.push(file);
+                isFound = true;
+            }
+        });
+
+        return files;
+    }
+
+    protected resolveFileWithExtensions(basePath: string, fileName: string): string | undefined {
+        const extname = path.extname(fileName);
+
+        const baseName = this.getAllowedExtensions().includes(extname.slice(1))
+            ? path.basename(fileName, extname)
+            : fileName;
+
+        for (const ext of this.getAllowedExtensions()) {
+            const fullPath = path.resolve(basePath, `${baseName}.${ext}`);
+            if (fs.existsSync(fullPath)) {
+                return fullPath;
+            }
+        }
+
+        return undefined;
+    }
+
+    protected toImportPath(fullPath: string, withExt: boolean = false): string {
+        const importPath = path.relative(this.config.rootDir, fullPath).split(path.sep).join("/");
+
+        return withExt ? importPath : importPath.replace(path.extname(importPath), "");
+    }
+}

package/src/plugin/finder/StyleFinder.ts

@@ -0,0 +1,23 @@
+import type {ReadonlyConfig} from "adnbn";
+
+import Finder from "./Finder";
+
+import type {FileImportInfo} from "../types";
+
+export default class StyleFinder extends Finder {
+    protected getAllowedExtensions(): string[] {
+        return ["scss", "css"];
+    }
+
+    constructor(fileName: string, config: ReadonlyConfig) {
+        super(fileName, config);
+    }
+
+    protected getFile(dirPath: string): FileImportInfo | undefined {
+        const filePath = this.resolveFileWithExtensions(dirPath, this.fileName);
+
+        if (!filePath) return;
+
+        return {name: "", import: this.toImportPath(filePath, true)};
+    }
+}

package/src/plugin/index.ts

@@ -0,0 +1,73 @@
+import path from "path";
+import {definePlugin} from "adnbn";
+import {Configuration as Rspack} from "@rspack/core";
+import {RspackVirtualModulePlugin} from "rspack-plugin-virtual-module";
+
+import StyleBuilder from "./builder/StyleBuilder";
+import ConfigBuilder from "./builder/ConfigBuilder";
+
+import Finder from "./finder/Finder";
+import StyleFinder from "./finder/StyleFinder";
+import ConfigFinder from "./finder/ConfigFinder";
+
+import type {BuilderContract} from "./types";
+
+export interface PluginOptions {
+    themeDir?: string;
+    configFileName?: string;
+    styleFileName?: string;
+    mergeConfig?: boolean;
+    mergeStyles?: boolean;
+}
+
+export default definePlugin((options: PluginOptions = {}) => {
+    const {
+        themeDir = ".",
+        configFileName = "ui.config",
+        styleFileName = "ui.style",
+        mergeConfig = true,
+        mergeStyles = true,
+    } = options;
+
+    let configFinder: Finder;
+    let styleFinder: Finder;
+
+    let configBuilder: BuilderContract;
+    let styleBuilder: BuilderContract;
+
+    return {
+        name: "adnbn-ui",
+        startup: ({config}) => {
+            const {srcDir, appsDir, sharedDir, app, appSrcDir} = config;
+            const normalizeThemeDir = path.normalize(themeDir).split(path.sep);
+
+            // Elements should be arranged in descending order of priority
+            const searchDirs = [
+                path.join(srcDir, appsDir, app, appSrcDir, ...normalizeThemeDir),
+                path.join(srcDir, sharedDir, ...normalizeThemeDir),
+            ];
+
+            configFinder = new ConfigFinder(configFileName, config).setCanMerge(mergeConfig).setSearchDirs(searchDirs);
+            styleFinder = new StyleFinder(styleFileName, config).setCanMerge(mergeStyles).setSearchDirs(searchDirs);
+
+            configBuilder = new ConfigBuilder(configFinder);
+            styleBuilder = new StyleBuilder(styleFinder);
+        },
+        bundler: () => {
+            return {
+                plugins: [
+                    new RspackVirtualModulePlugin(
+                        {
+                            "addon-ui-config": configBuilder.build(),
+                            "addon-ui-style.scss": styleBuilder.build(),
+                        },
+                        "addon-ui-virtual"
+                    ),
+                ],
+            } satisfies Rspack;
+        },
+        manifest: ({manifest}) => {
+            manifest.addPermission("storage");
+        },
+    };
+});

package/src/plugin/types.ts

@@ -0,0 +1,8 @@
+export interface FileImportInfo {
+    name: string;
+    import: string;
+}
+
+export interface BuilderContract {
+    build(): string;
+}

package/src/providers/extra/ExtraProvider.tsx

@@ -0,0 +1,13 @@
+import React, {FC, PropsWithChildren} from "react";
+
+import {ExtraContext} from "./context";
+
+import {Config} from "../../types/config";
+
+const ExtraProvider: FC<PropsWithChildren<Pick<Config, "extra">>> = ({children, extra}) => {
+    return <ExtraContext.Provider value={{extra}}>{children}</ExtraContext.Provider>;
+};
+
+ExtraProvider.displayName = "ExtraProvider";
+
+export default ExtraProvider;

package/src/providers/extra/context.ts

@@ -0,0 +1,14 @@
+import {createContext, useContext} from "react";
+import {ExtraProps} from "../../types/config";
+
+export interface ExtraContract {
+    extra: ExtraProps;
+}
+
+export const ExtraContext = createContext<ExtraContract>({
+    extra: {},
+});
+
+ExtraContext.displayName = "ExtraContext";
+
+export const useExtra = () => useContext(ExtraContext).extra;

package/src/providers/extra/index.ts

@@ -0,0 +1,2 @@
+export {default as ExtraProvider} from "./ExtraProvider";
+export {useExtra} from "./context";

package/src/providers/icons/IconsProvider.tsx

@@ -0,0 +1,35 @@
+import React, {FC, PropsWithChildren, useCallback, useMemo, useState} from "react";
+
+import {IconsContext} from "./context";
+import {SvgSprite} from "../../components";
+
+import {Config, Icons} from "../../types/config";
+
+const IconsProvider: FC<PropsWithChildren<Pick<Config, "icons">>> = ({children, icons}) => {
+    const [registeredIconNames, setRegisteredIconNames] = useState<string[]>([]);
+
+    const registerIcon = useCallback((name: string) => {
+        setRegisteredIconNames(prev => (prev.includes(name) ? prev : [...prev, name]));
+    }, []);
+
+    const registeredIcons = useMemo(() => {
+        return registeredIconNames.reduce((acc, key) => {
+            if (key in icons) {
+                acc[key] = icons[key];
+            }
+
+            return acc;
+        }, {} as Icons);
+    }, [icons, registeredIconNames]);
+
+    return (
+        <IconsContext.Provider value={{icons, registeredIconNames, registerIcon}}>
+            {children}
+            <SvgSprite icons={registeredIcons} />
+        </IconsContext.Provider>
+    );
+};
+
+IconsProvider.displayName = "IconsProvider";
+
+export default IconsProvider;

package/src/providers/icons/context.ts

@@ -0,0 +1,20 @@
+import {createContext, useContext} from "react";
+import {Icons} from "../../types/config";
+
+export interface IconsContract {
+    icons: Icons;
+    registeredIconNames: string[];
+    registerIcon: (name: string) => void;
+}
+
+export const IconsContext = createContext<IconsContract>({
+    icons: {},
+
+    registeredIconNames: [],
+
+    registerIcon: () => {},
+});
+
+IconsContext.displayName = "IconsContext";
+
+export const useIcons = () => useContext(IconsContext);

package/src/providers/icons/index.ts

@@ -0,0 +1,2 @@
+export {default as IconsProvider} from "./IconsProvider";
+export {useIcons} from "./context";

package/src/providers/index.ts

@@ -0,0 +1,4 @@
+export * from "./ui";
+export * from "./theme";
+export * from "./icons";
+export * from "./extra";

package/src/providers/theme/ThemeProvider.tsx

@@ -0,0 +1,60 @@
+import React, {FC, PropsWithChildren, useCallback, useEffect, useState} from "react";
+
+import {ThemeContext} from "./context";
+
+import {Theme, ThemeStorageContract} from "../../types/theme";
+import {Config} from "../../types/config";
+
+const isDarkMedia = () => window?.matchMedia("(prefers-color-scheme: dark)")?.matches;
+
+const isValid = (theme: Theme | undefined): theme is Theme => {
+    return !!theme && [Theme.Light, Theme.Dark].includes(theme);
+};
+
+export interface ThemeProviderProps extends Pick<Config, "components"> {
+    storage?: ThemeStorageContract;
+}
+
+const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({children, components, storage}) => {
+    const [theme, setTheme] = useState<Theme>(() => (isDarkMedia() ? Theme.Dark : Theme.Light));
+
+    const changeTheme = useCallback(
+        (theme: Theme) => {
+            if (storage) {
+                storage.change(theme).catch(e => console.error("ThemeProvider: set theme to storage error", e));
+            } else {
+                setTheme(theme);
+            }
+        },
+        [storage]
+    );
+
+    const toggleTheme = useCallback(() => {
+        changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark);
+    }, [theme, changeTheme]);
+
+    useEffect(() => {
+        if (!storage) return;
+
+        storage
+            .get()
+            .then(newTheme => isValid(newTheme) && setTheme(newTheme))
+            .catch(e => console.error("ThemeProvider: get theme from storage error", e));
+
+        const unsubscribe = storage.watch(newTheme => isValid(newTheme) && setTheme(newTheme));
+
+        return () => unsubscribe();
+    }, [storage]);
+
+    useEffect(() => {
+        document.querySelector("html")?.setAttribute("theme", theme);
+    }, [theme]);
+
+    return (
+        <ThemeContext.Provider value={{theme, changeTheme, toggleTheme, components}}>{children}</ThemeContext.Provider>
+    );
+};
+
+ThemeProvider.displayName = "ThemeProvider";
+
+export default ThemeProvider;

package/src/providers/theme/ThemeStorage.tsx

@@ -0,0 +1,36 @@
+import {Storage} from "adnbn/storage";
+
+import {Theme, ThemeStorageContract} from "../../types/theme";
+
+export default class implements ThemeStorageContract {
+    private readonly storage = new Storage<Record<string, Theme>>({
+        area: "local",
+        namespace: "adnbn-ui",
+    });
+
+    private readonly key = "theme";
+
+    public async get(): Promise<Theme | undefined> {
+        return await this.storage.get(this.key);
+    }
+
+    public async change(theme: Theme): Promise<void> {
+        return this.storage.set(this.key, theme);
+    }
+
+    public async toggle(): Promise<void> {
+        let theme = await this.get();
+
+        if (!theme) {
+            theme = Theme.Dark;
+        }
+
+        await this.change(theme === Theme.Dark ? Theme.Light : Theme.Dark);
+    }
+
+    public watch(callback: (theme: Theme) => void): () => void {
+        return this.storage.watch({
+            [this.key]: newValue => newValue && callback(newValue),
+        });
+    }
+}

package/src/providers/theme/context.ts

@@ -0,0 +1,30 @@
+import {createContext, useContext} from "react";
+import {Theme} from "../../types/theme";
+import {ComponentsProps} from "../../types/config";
+
+export interface ThemeContract {
+    theme: Theme;
+
+    components: ComponentsProps;
+
+    changeTheme(theme: Theme): void;
+
+    toggleTheme(): void;
+}
+
+export const ThemeContext = createContext<ThemeContract>({
+    theme: Theme.Light,
+    components: {},
+    changeTheme: () => {},
+    toggleTheme: () => {},
+});
+
+ThemeContext.displayName = "ThemeContext";
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const useComponentProps = <K extends keyof ComponentsProps>(key: K): ComponentsProps[K] => {
+    const {components} = useTheme();
+
+    return components[key];
+};

package/src/providers/theme/index.ts

@@ -0,0 +1,3 @@
+export {default as ThemeProvider} from "./ThemeProvider";
+export {default as ThemeStorage} from "./ThemeStorage";
+export {useTheme, useComponentProps} from "./context";

package/src/providers/ui/UIProvider.tsx

@@ -0,0 +1,41 @@
+import React, {FC, PropsWithChildren, useMemo, useRef} from "react";
+import {merge} from "ts-deepmerge";
+
+import {ExtraProvider, IconsProvider, ThemeProvider, ThemeStorage} from "../index";
+
+import {ThemeStorageContract} from "../../types/theme";
+import {ComponentsProps, Config, ExtraProps, Icons} from "../../types/config";
+
+import "./styles/default.scss";
+import "./styles/reset.scss";
+import "addon-ui-style.scss";
+
+import config from "addon-ui-config";
+
+export type UIProviderProps = Partial<Config>;
+
+const UIProvider: FC<PropsWithChildren<UIProviderProps>> = ({children, components = {}, extra = {}, icons = {}}) => {
+    const storageRef = useRef<ThemeStorageContract | null>(null);
+
+    if (!storageRef.current) {
+        storageRef.current = new ThemeStorage();
+    }
+
+    const componentsProps = useMemo<ComponentsProps>(() => merge(config.components || {}, components), [components]);
+
+    const extraProps = useMemo<ExtraProps>(() => merge(config.extra || {}, extra), [extra]);
+
+    const svgIcons = useMemo<Icons>(() => merge(config.icons || {}, icons), [icons]);
+
+    return (
+        <ThemeProvider components={componentsProps} storage={storageRef.current}>
+            <ExtraProvider extra={extraProps}>
+                <IconsProvider icons={svgIcons}>{children}</IconsProvider>
+            </ExtraProvider>
+        </ThemeProvider>
+    );
+};
+
+UIProvider.displayName = "UIProvider";
+
+export default UIProvider;

package/src/providers/ui/index.ts

@@ -0,0 +1 @@
+export {default as UIProvider, type UIProviderProps} from "./UIProvider";