addon-ui 0.3.1 → 0.4.0

package/src/providers/ui/UIProvider.tsx

@@ -1,9 +1,12 @@
-import React, {FC, PropsWithChildren, useMemo, useRef} from "react";
+import React, {FC, PropsWithChildren, useEffect, useMemo} from "react";
+import {getBrowser} from "adnbn";
+
 import {merge} from "ts-deepmerge";
 
-import {ExtraProvider, IconsProvider, ThemeProvider, ThemeStorage} from "../index";
+import {ExtraProvider} from "../extra";
+import {IconsProvider} from "../icons";
+import {ThemeProvider, ThemeProviderProps} from "../theme";
 
-import {ThemeStorageContract} from "../../types/theme";
 import {ComponentsProps, Config, ExtraProps, Icons} from "../../types/config";
 
 import "./styles/default.scss";
@@ -12,23 +15,36 @@ 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();
-    }
-
+export interface UIProviderProps extends Partial<Config>, Pick<ThemeProviderProps, "storage"> {
+    view?: string;
+}
+
+const UIProvider: FC<PropsWithChildren<UIProviderProps>> = ({
+    children,
+    components = {},
+    extra = {},
+    icons = {},
+    storage,
+    view,
+}) => {
     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]);
 
+    useEffect(() => {
+        const html = document.querySelector("html");
+        if (html) {
+            if (view) {
+                html.setAttribute("view", view);
+            }
+            html.setAttribute("browser", getBrowser());
+        }
+    }, [view]);
+
     return (
-        <ThemeProvider components={componentsProps} storage={storageRef.current}>
+        <ThemeProvider components={componentsProps} storage={storage}>
             <ExtraProvider extra={extraProps}>
                 <IconsProvider icons={svgIcons}>{children}</IconsProvider>
             </ExtraProvider>

package/src/providers/ui/styles/default.scss

@@ -1,11 +1,14 @@
 @use "../../../styles/mixins" as theme;
 
 @include theme.light {
-  --min-height: 440px;
-  --max-height: 540px;
+  --viewport-height: var(--viewport-min-height);
+  --viewport-width: var(--viewport-min-width);
 
-  --min-width: 380px;
-  --max-width: var(--min-width);
+  --viewport-min-height: 440px;
+  --viewport-max-height: 600px;
+
+  --viewport-min-width: 380px;
+  --viewport-max-width: var(--viewport-min-width);
 
   --font-family: "Arial", sans-serif;
   --font-size: 14px;

package/src/styles/mixins.scss

@@ -21,3 +21,33 @@
     @content;
   }
 }
+
+@mixin browser($browser) {
+  html[browser="#{$browser}"] & {
+    @content;
+  }
+}
+
+@mixin chromeOnly() {
+  @include browser(chrome) {
+    @content;
+  }
+}
+
+@mixin edgeOnly() {
+  @include browser(edge) {
+    @content;
+  }
+}
+
+@mixin operaOnly() {
+  @include browser(opera) {
+    @content;
+  }
+}
+
+@mixin firefoxOnly() {
+  @include browser(firefox) {
+    @content;
+  }
+}

package/src/components/Layout/Provider.tsx

@@ -1,60 +0,0 @@
-import React, {
-    ComponentProps,
-    forwardRef,
-    ForwardRefRenderFunction,
-    PropsWithChildren,
-    useCallback,
-    useState,
-} from "react";
-
-import {expandType, LayoutContext} from "./context";
-
-import classnames from "classnames";
-
-import styles from "./layout.module.scss";
-
-export type LayoutProps = ComponentProps<"div">;
-
-const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<LayoutProps>> = (
-    {children, className, style, ...props},
-    ref
-) => {
-    const [isExpanded, setExpanded] = useState(false);
-    const [height, setHeight] = useState<number | string | undefined>(undefined);
-    const [width, setWidth] = useState<number | string | undefined>(undefined);
-
-    const expand = useCallback((value?: expandType) => {
-        setHeight(value?.height);
-        setWidth(value?.width);
-        setExpanded(true);
-    }, []);
-
-    const collapse = useCallback(() => {
-        setHeight(undefined);
-        setWidth(undefined);
-        setExpanded(false);
-    }, []);
-
-    return (
-        <LayoutContext.Provider value={{isExpanded, expand, collapse}}>
-            <div
-                ref={ref}
-                style={{minHeight: height, minWidth: width, ...style}}
-                className={classnames(
-                    styles["layout"],
-                    {
-                        [styles["layout--expanded"]]: isExpanded,
-                    },
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        </LayoutContext.Provider>
-    );
-};
-
-Provider.displayName = "ViewportProvider";
-
-export default forwardRef(Provider);

package/src/components/Layout/context.ts

@@ -1,24 +0,0 @@
-import {createContext, useContext} from "react";
-
-export type expandType = {
-    height?: number | string;
-    width?: number | string;
-};
-
-export interface LayoutContract {
-    isExpanded?: boolean;
-
-    expand(value?: expandType): void;
-
-    collapse(): void;
-}
-
-export const LayoutContext = createContext<LayoutContract>({
-    isExpanded: false,
-    expand() {},
-    collapse() {},
-});
-
-LayoutContext.displayName = "LayoutContext";
-
-export const useLayout = () => useContext(LayoutContext);

package/src/components/Layout/index.ts

@@ -1,2 +0,0 @@
-export {default as LayoutProvider, type LayoutProps} from "./Provider";
-export {useLayout} from "./context";

package/src/components/Layout/layout.module.scss

@@ -1,17 +0,0 @@
-.layout {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: var(--min-width);
-  max-width: var(--max-width);
-  min-height: var(--min-height);
-  max-height: var(--max-height);
-  transition:
-    min-height var(--transition-speed-md) ease-in-out,
-    min-width var(--transition-speed-md) ease-in-out;
-
-  &--expanded {
-    min-height: var(--max-height);
-    min-width: var(--max-width);
-  }
-}