adnbn-ui 0.0.1 → 0.0.2

package/src/components/ViewDrawer/ViewDrawer.stories.tsx

@@ -0,0 +1,75 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {Button, DrawerSide} from "../index";
+
+import ViewDrawerComponent, {ViewDrawerProps} from "./ViewDrawer";
+
+const sides: DrawerSide[] = [DrawerSide.Left, DrawerSide.Top, DrawerSide.Bottom, DrawerSide.Right];
+
+const meta: Meta<typeof ViewDrawerComponent> = {
+    title: "Components/ViewDrawer",
+    component: ViewDrawerComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        side: {
+            options: sides,
+            control: {type: "select"},
+        },
+        title: {
+            type: "string",
+        },
+        subtitle: {
+            type: "string",
+        },
+        after: {
+            type: "string",
+        },
+        before: {
+            type: "string",
+        },
+        fullscreen: {
+            type: "boolean",
+        },
+        speed: {
+            type: "number",
+        },
+        children: hideInTable,
+        className: hideInTable,
+        wrapClassName: hideInTable,
+        titleClassName: hideInTable,
+        bodyClassName: hideInTable,
+        headerClassName: hideInTable,
+        beforeClassName: hideInTable,
+        afterClassName: hideInTable,
+        subtitleClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const ViewDrawer = (props: ViewDrawerProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <div>
+            <Button onClick={() => setOpen(true)}>Open</Button>
+            <ViewDrawerComponent
+                open={open}
+                onOpenChange={setOpen}
+                title="Volume Up Plus"
+                side={DrawerSide.Right}
+                fullscreen={false}
+                subtitle="Adjust the current tab's volume with the slider. Switch to any audio tab in one click."
+                after="❤️"
+                {...props}
+            >
+                <Button style={{margin: "50px auto", maxWidth: "max-content"}} onClick={() => setOpen(false)}>
+                    Close ViewDrawer
+                </Button>
+            </ViewDrawerComponent>
+        </div>
+    );
+};

package/src/components/ViewDrawer/ViewDrawer.tsx

@@ -0,0 +1,24 @@
+import React, {FC, memo} from "react";
+
+import {splitProps} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {Drawer, DrawerProps, drawerPropsKeys} from "../Drawer";
+import {View, ViewProps, viewPropsKeys} from "../View";
+
+export type ViewDrawerProps = Omit<DrawerProps, "title"> & ViewProps;
+
+const ViewDrawer: FC<ViewDrawerProps> = props => {
+    const mergedProps = {...useComponentProps("viewDrawer"), ...props};
+
+    const drawerProps = splitProps<DrawerProps>(mergedProps, drawerPropsKeys);
+    const viewProps = splitProps<ViewProps>(mergedProps, viewPropsKeys);
+
+    return (
+        <Drawer {...drawerProps}>
+            <View {...viewProps} />
+        </Drawer>
+    );
+};
+
+export default memo(ViewDrawer);

package/src/components/ViewDrawer/index.ts

@@ -0,0 +1,2 @@
+export {default as ViewDrawer} from "./ViewDrawer";
+export type {ViewDrawerProps} from "./ViewDrawer";

package/src/components/ViewModal/ViewModal.stories.tsx

@@ -0,0 +1,68 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {Button} from "../index";
+
+import ViewModalComponent, {ViewModalProps} from "./ViewModal";
+
+const meta: Meta<typeof ViewModalComponent> = {
+    title: "Components/ViewModal",
+    component: ViewModalComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        title: {
+            type: "string",
+        },
+        subtitle: {
+            type: "string",
+        },
+        after: {
+            type: "string",
+        },
+        before: {
+            type: "string",
+        },
+        fullscreen: {
+            type: "boolean",
+        },
+        speed: {
+            type: "number",
+        },
+        children: hideInTable,
+        className: hideInTable,
+        wrapClassName: hideInTable,
+        titleClassName: hideInTable,
+        bodyClassName: hideInTable,
+        headerClassName: hideInTable,
+        beforeClassName: hideInTable,
+        afterClassName: hideInTable,
+        subtitleClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const ViewModal = (props: ViewModalProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <div>
+            <Button onClick={() => setOpen(true)}>Open</Button>
+            <ViewModalComponent
+                open={open}
+                onOpenChange={setOpen}
+                title="Volume Up Plus"
+                fullscreen={false}
+                subtitle="Adjust the current tab's volume with the slider. Switch to any audio tab in one click."
+                after="❤️"
+                {...props}
+            >
+                <Button style={{margin: "50px auto", maxWidth: "max-content"}} onClick={() => setOpen(false)}>
+                    Close ViewModal
+                </Button>
+            </ViewModalComponent>
+        </div>
+    );
+};

package/src/components/ViewModal/ViewModal.tsx

@@ -0,0 +1,24 @@
+import React, {FC, memo} from "react";
+
+import {splitProps} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {Modal, ModalProps, modalPropsKeys} from "../Modal";
+import {View, ViewProps, viewPropsKeys} from "../View";
+
+export type ViewModalProps = Omit<ModalProps, "title"> & ViewProps;
+
+const ViewModal: FC<ViewModalProps> = props => {
+    const mergedProps = {...useComponentProps("viewModal"), ...props};
+
+    const modalProps = splitProps<ModalProps>(mergedProps, modalPropsKeys);
+    const viewProps = splitProps<ViewProps>(mergedProps, viewPropsKeys);
+
+    return (
+        <Modal {...modalProps}>
+            <View {...viewProps} />
+        </Modal>
+    );
+};
+
+export default memo(ViewModal);

package/src/components/ViewModal/index.ts

@@ -0,0 +1,2 @@
+export {default as ViewModal} from "./ViewModal";
+export type {ViewModalProps} from "./ViewModal";

package/src/components/index.ts

@@ -0,0 +1,29 @@
+export * from "./Avatar";
+export * from "./BaseButton";
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./Drawer";
+export * from "./Footer";
+export * from "./Header";
+export * from "./Highlight";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./Layout";
+export * from "./List";
+export * from "./ListItem";
+export * from "./Modal";
+export * from "./Odometer";
+export * from "./ScrollArea";
+export * from "./SvgSprite";
+export * from "./Switch";
+export * from "./Tag";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./Toast";
+export * from "./Tooltip";
+export * from "./View";
+export * from "./ViewDrawer";
+export * from "./ViewModal";
+
+export type {ComponentsProps} from "./types";

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?: Pick<TooltipProps, "side" | "align" | "delayDuration" | "arrowHeight" | "arrowWidth">;
+    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,26 @@
+import type {ComponentsProps} from "../components";
+import type {Icons} from "../providers";
+
+export {AvatarSize, AvatarRadius} from "../components/Avatar";
+export {ButtonColor, ButtonSize, ButtonRadius, ButtonVariant} from "../components/Button";
+export {CheckboxVariant, CheckboxRadius, CheckboxSize} from "../components/Checkbox";
+export {DrawerSide} from "../components/Drawer";
+export {HighlightColor} from "../components/Highlight";
+export {IconButtonSize, IconButtonVariant, IconButtonRadius} from "../components/IconButton";
+export {ModalRadius} from "../components/Modal";
+export {TagVariant, TagColor, TagRadius, TagSize} from "../components/Tag";
+export {TextAreaSize, TextAreaVariant} from "../components/TextArea";
+export {TextFieldAccent, TextFieldSize, TextFieldVariant} from "../components/TextField";
+export {ToastColor, ToastRadius, ToastSide} from "../components/Toast";
+
+export type {ComponentsProps} from "../components";
+
+export interface Config {
+    props: ComponentsProps;
+    icons: Icons;
+}
+
+export const defineConfig = (config: Partial<Config>): Config => {
+    const {props = {}, icons = {}} = config;
+    return {props, 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} 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,34 @@
+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)
+            .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,7 @@
+import {merge} from "ts-deepmerge";
+
+//configs imports;
+
+import "adnbn-ui-style.scss";
+
+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.inputDir, 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,70 @@
+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(
+                        {
+                            "adnbn-ui-config": configBuilder.build(),
+                            "adnbn-ui-style.scss": styleBuilder.build(),
+                        },
+                        "adnbn-ui-virtual"
+                    ),
+                ],
+            } satisfies Rspack;
+        },
+    };
+});

package/src/plugin/types.ts

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

package/src/providers/UIProvider.tsx

@@ -0,0 +1,26 @@
+import React, {PropsWithChildren, useMemo} from "react";
+import {merge} from "ts-deepmerge";
+
+import ThemeProvider from "./theme/ThemeProvider";
+import {IconsProvider, Icons} from "./icons";
+import {ComponentsProps} from "../components";
+
+import config from "adnbn-ui-config";
+
+import type {Config} from "../config";
+
+const UIProvider = ({children, props = {}, icons = {}}: PropsWithChildren<Partial<Config>>) => {
+    const componentsProps: ComponentsProps = useMemo(() => merge(config.props || {}, props), [props]);
+
+    const svgIcons: Icons = useMemo(() => merge(config.icons || {}, icons), [icons]);
+
+    return (
+        <ThemeProvider {...componentsProps}>
+            <IconsProvider icons={svgIcons}>{children}</IconsProvider>
+        </ThemeProvider>
+    );
+};
+
+UIProvider.displayName = "UIProvider";
+
+export default UIProvider;