@koine/react 1.0.4 → 1.0.9

package/styles/theme--vanilla.d.ts

@@ -1,18 +1,18 @@
-import { FC } from "react";
-export declare const THEME_KEY = "theme";
-export declare const THEME_DEFAULT: ThemeVanillaValue;
-export declare const getInitialThemeFromRequest: (cookie?: string | undefined) => ThemeVanillaValue;
-export declare const getInitialThemeFromClient: () => ThemeVanillaValue;
-export declare type ThemeCookie = {
-    [THEME_KEY]: ThemeVanillaValue;
-};
-export declare type ThemeVanillaValue = "light" | "dark";
-export declare type ThemeVanillaContextType = {
-    theme: ThemeVanillaValue;
-    setTheme?: React.Dispatch<React.SetStateAction<ThemeVanillaValue>>;
-};
-export declare const ThemeVanillaContext: import("react").Context<ThemeVanillaContextType>;
-export declare type ThemeVanillaProviderProps = {
-    initialTheme: ThemeVanillaValue;
-};
-export declare const ThemeVanillaProvider: FC<ThemeVanillaProviderProps>;
+/// <reference types="react" />
+export declare const THEME_KEY = "theme";
+export declare const THEME_DEFAULT: ThemeVanillaValue;
+export declare const getInitialThemeFromRequest: (cookie?: string | undefined) => ThemeVanillaValue;
+export declare const getInitialThemeFromClient: () => ThemeVanillaValue;
+export declare type ThemeCookie = {
+    [THEME_KEY]: ThemeVanillaValue;
+};
+export declare type ThemeVanillaValue = "light" | "dark";
+export declare type ThemeVanillaContextType = {
+    theme: ThemeVanillaValue;
+    setTheme?: React.Dispatch<React.SetStateAction<ThemeVanillaValue>>;
+};
+export declare const ThemeVanillaContext: import("react").Context<ThemeVanillaContextType>;
+export declare type ThemeVanillaProviderProps = React.PropsWithChildren<{
+    initialTheme: ThemeVanillaValue;
+}>;
+export declare const ThemeVanillaProvider: ({ initialTheme, children, }: ThemeVanillaProviderProps) => JSX.Element;

package/styles/theme--vanilla.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState } from "react";
+import { isBrowser, setCookie, parseCookie } from "@koine/utils";
+import { useMount, useUpdateEffect } from "react-use";
+export const THEME_KEY = "theme";
+export const THEME_DEFAULT = "light";
+export const getInitialThemeFromRequest = (cookie) => {
+    if (cookie) {
+        const parsed = parseCookie(cookie);
+        return parsed?.theme;
+    }
+    return THEME_DEFAULT;
+};
+export const getInitialThemeFromClient = () => {
+    if (typeof window !== "undefined" && window.localStorage) {
+        const storedPrefs = window.localStorage.getItem(THEME_KEY);
+        if (typeof storedPrefs === "string") {
+            return storedPrefs;
+        }
+        const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
+        if (userMedia.matches) {
+            return "dark";
+        }
+    }
+    return THEME_DEFAULT;
+};
+export const ThemeVanillaContext = createContext({
+    theme: "light",
+    setTheme: undefined,
+});
+export const ThemeVanillaProvider = ({ initialTheme, children, }) => {
+    const [theme, setTheme] = useState(initialTheme);
+    const rawSetTheme = (rawTheme) => {
+        if (!rawTheme || !isBrowser) {
+            return;
+        }
+        const root = window.document.documentElement;
+        const isDark = rawTheme === "dark";
+        root.classList.remove(isDark ? "light" : "dark");
+        root.classList.add(rawTheme);
+        localStorage.setItem(THEME_KEY, rawTheme);
+        setCookie(THEME_KEY, rawTheme);
+    };
+    useMount(() => {
+        const theme = getInitialThemeFromClient();
+        setTheme(theme);
+        rawSetTheme(theme);
+    });
+    useUpdateEffect(() => {
+        rawSetTheme(theme);
+    }, [theme]);
+    return (_jsx(ThemeVanillaContext.Provider, { value: { theme, setTheme }, children: children }));
+};

package/styles/theme.d.ts

@@ -1,89 +1,82 @@
-import { spacing, spacingTop, spacingBottom, spacingVertical } from "./spacing";
-import { colStretch } from "./styled";
-export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare type Breakpoints = Record<Breakpoint, number>;
-/**
- * You can override the default breakpoints through the .env variable
- *
- * FIXME: find a better way to configure it, the problem is that we use the media
- * queries within this pre-compiled library and thrught it was better to avoid
- * using theming props for a more ergonomic usage.
- *
- * ```.env
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
- * ```
- */
-export declare const breakpoints: Breakpoints;
-export declare const createTheme: (options: ThemeOptions) => Theme;
-export declare const useTheme: () => Theme;
-export declare type Theme = {
-    maxWidth: number;
-    gutter: {
-        quarter: number;
-        third: number;
-        half: number;
-        /** @default 60 */
-        normal: number;
-        double: number;
-        triple: number;
-    };
-    breakpoints: Breakpoints;
-    devices: {
-        /** @default "sm" */
-        mobile: keyof Breakpoints;
-        /** @default "md" */
-        tablet: keyof Breakpoints;
-        /** @default "lg" */
-        desktop: keyof Breakpoints;
-    };
-    spaces: {
-        mobile: {
-            /** @default 10 */
-            sm: number;
-            /** @default 20 */
-            md: number;
-            /** @default 40 */
-            lg: number;
-        };
-        tablet: {
-            /** @default 15 */
-            sm: number;
-            /** @default 30 */
-            md: number;
-            /** @default 60 */
-            lg: number;
-        };
-        desktop: {
-            /** @default 20 */
-            sm: number;
-            /** @default 40 */
-            md: number;
-            /** @default 80 */
-            lg: number;
-        };
-    };
-    header: {
-        /** @default "lg" */
-        breakpoint: keyof Breakpoints;
-        /** @default [82, 134] */
-        height: [number, number];
-        /** @default [60, 90] */
-        heightSticky: [number, number];
-        /** @default [76, 76] */
-        logoWidth: [number, number];
-        /** @default [70, 70] */
-        logoWidthSticky: [number, number];
-    };
-    spacing: typeof spacing;
-    spacingTop: typeof spacingTop;
-    spacingBottom: typeof spacingBottom;
-    spacingVertical: typeof spacingVertical;
-    colStretch: typeof colStretch;
-};
-export declare type ThemeOptions = {
-    maxWidth?: number;
-    gutter: NonNullable<Theme["gutter"]>;
-    devices?: Theme["devices"];
-    spaces: NonNullable<Theme["spaces"]>;
-    header: NonNullable<Theme["header"]>;
-};
+export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export declare type Breakpoints = Record<Breakpoint, number>;
+/**
+ * You can override the default breakpoints through the .env variable
+ *
+ * FIXME: find a better way to configure it, the problem is that we use the media
+ * queries within this pre-compiled library and thrught it was better to avoid
+ * using theming props for a more ergonomic usage.
+ *
+ * ```.env
+ * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
+ * ```
+ */
+export declare const breakpoints: Breakpoints;
+export declare const createTheme: (options: ThemeOptions) => Theme;
+export declare const useTheme: () => Theme;
+export declare type Theme = {
+    maxWidth: number;
+    gutter: {
+        quarter: number;
+        third: number;
+        half: number;
+        /** @default 60 */
+        normal: number;
+        double: number;
+        triple: number;
+    };
+    breakpoints: Breakpoints;
+    devices: {
+        /** @default "sm" */
+        mobile: keyof Breakpoints;
+        /** @default "md" */
+        tablet: keyof Breakpoints;
+        /** @default "lg" */
+        desktop: keyof Breakpoints;
+    };
+    spaces: {
+        mobile: {
+            /** @default 10 */
+            sm: number;
+            /** @default 20 */
+            md: number;
+            /** @default 40 */
+            lg: number;
+        };
+        tablet: {
+            /** @default 15 */
+            sm: number;
+            /** @default 30 */
+            md: number;
+            /** @default 60 */
+            lg: number;
+        };
+        desktop: {
+            /** @default 20 */
+            sm: number;
+            /** @default 40 */
+            md: number;
+            /** @default 80 */
+            lg: number;
+        };
+    };
+    header: {
+        /** @default "lg" */
+        breakpoint: keyof Breakpoints;
+        /** @default [82, 134] */
+        height: [number, number];
+        /** @default [60, 90] */
+        heightSticky: [number, number];
+        /** @default [76, 76] */
+        logoWidth: [number, number];
+        /** @default [70, 70] */
+        logoWidthSticky: [number, number];
+    };
+};
+export declare type ThemeOptions = {
+    maxWidth?: number;
+    gutter: NonNullable<Theme["gutter"]>;
+    devices?: Theme["devices"];
+    spaces: NonNullable<Theme["spaces"]>;
+    header: NonNullable<Theme["header"]>;
+};

package/styles/theme.js

@@ -0,0 +1,41 @@
+import { useTheme as _useTheme } from "styled-components";
+const DEFAULT_BREAKPOINTS = {
+    xs: 0,
+    sm: 440,
+    md: 768,
+    lg: 1024,
+    xl: 1368,
+    xxl: 1690,
+};
+/**
+ * You can override the default breakpoints through the .env variable
+ *
+ * FIXME: find a better way to configure it, the problem is that we use the media
+ * queries within this pre-compiled library and thrught it was better to avoid
+ * using theming props for a more ergonomic usage.
+ *
+ * ```.env
+ * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
+ * ```
+ */
+export const breakpoints = process.env["BREAKPOINTS"]
+    ? process.env["BREAKPOINTS"].split(",").reduce((map, pair) => {
+        const [key, value] = pair.split(":");
+        map[key] = parseFloat(value);
+        return map;
+    }, {})
+    : DEFAULT_BREAKPOINTS;
+const themeDefault = {
+    maxWidth: breakpoints.xxl,
+    breakpoints,
+    devices: {
+        mobile: "sm",
+        tablet: "md",
+        desktop: "lg",
+    },
+};
+export const createTheme = (options) => ({
+    ...themeDefault,
+    ...options,
+});
+export const useTheme = _useTheme;

package/tw/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare";

package/tw/index.js

@@ -0,0 +1,30 @@
+export * from "../shared";
+// export * from "../Alert";
+// export * from "../Animations";
+// export * from "../Autocomplete";
+// export * from "../Bg";
+// export * from "../Breadcrumbs";
+// export * from "../Buttons";
+// export * from "../Carousel";
+// export * from "../Collapsable";
+// export * from "../Debug";
+export { KoineDialog } from "../Dialog/tw/bare";
+// export * from "../Forms";
+// export * from "../Grid";
+// export * from "../Hamburger";
+// export * from "../Header";
+// export * from "../Hidden";
+// export * from "../Img";
+// export * from "../Link";
+// export * from "../MenuItem";
+// export * from "../Pagination";
+// export * from "../Pill";
+// export * from "../Progress";
+// export * from "../Rating";
+// // export * from "../Select";
+// export * from "../Sidebar";
+// export * from "../Spacing";
+// export * from "../Sticky";
+// export * from "../styles";
+// export * from "../Tabs";
+// export * from "../Typography";

package/tw/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/tw/index.js",
+  "types": "./index.d.ts"
+}

package/twm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer";

package/twm/index.js

@@ -0,0 +1,30 @@
+export * from "../shared";
+// export * from "../Alert";
+// export * from "../Animations";
+// export * from "../Autocomplete";
+// export * from "../Bg";
+// export * from "../Breadcrumbs";
+// export * from "../Buttons";
+// export * from "../Carousel";
+// export * from "../Collapsable";
+// export * from "../Debug";
+export { KoineDialog } from "../Dialog/tw/framer";
+// export * from "../Forms";
+// export * from "../Grid";
+// export * from "../Hamburger";
+// export * from "../Header";
+// export * from "../Hidden";
+// export * from "../Img";
+// export * from "../Link";
+// export * from "../MenuItem";
+// export * from "../Pagination";
+// export * from "../Pill";
+// export * from "../Progress";
+// export * from "../Rating";
+// // export * from "../Select";
+// export * from "../Sidebar";
+// export * from "../Spacing";
+// export * from "../Sticky";
+// export * from "../styles";
+// export * from "../Tabs";
+// export * from "../Typography";

package/twm/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/twm/index.js",
+  "types": "./index.d.ts"
+}

package/types.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-export declare type Translate = (i18nKey: any, query?: any, options?: any) => string;
-export declare type Option = {
-    value: string;
-    Label?: NonNullable<import("react").ReactNode>;
-    label: NonNullable<import("react").ReactChild | import("react").ReactFragment>;
-};
-export declare type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & {
-    Koine: ExtendableProps;
-};
-export declare type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+/// <reference types="react" />
+export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types";
+export declare type Translate = (i18nKey: any, query?: any, options?: any) => string;
+export declare type Option = {
+    value: string;
+    Label?: NonNullable<import("react").ReactNode>;
+    label: NonNullable<import("react").ReactChild | import("react").ReactFragment>;
+};
+export declare type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
+export declare type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);

package/types.js

@@ -0,0 +1 @@
+export {};

package/typings.d.ts

@@ -0,0 +1,21 @@
+import "styled-components";
+// import type {} from "styled-components/cssprop"; // for `css` prop
+
+/**
+ * Styled components utility types
+ */
+type Theme = import("./styles/theme").Theme;
+
+declare module "styled-components" {
+  // extends the global DefaultTheme with our ThemeType.
+  export interface DefaultTheme extends Theme {
+    maxWidth: number;
+  }
+}
+
+/**
+ * Types specifically related to `@koine/react` exposed on the global unique
+ * namespace `Koine`. Most of the types here should be prefixed by `React`, e.g.
+ * `ReactSomeFeature` accessible anywhere from `Koine.ReactSomeFeature`
+ */
+declare namespace Koine {}

package/Dialog/Dialog.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { MotionProps } from "framer-motion";
-import { DialogProps as BaseDialogProps } from "@reach/dialog";
-import { SetRequired } from "@koine/utils";
-export declare const koineDialogBg: import("styled-components").FlattenSimpleInterpolation;
-export declare const koineDialogBackdropMotion: MotionProps;
-export declare const koineDialogInnerMotion: MotionProps;
-export declare const KoineDialogOverlay: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/dialog/dist/declarations/src").DialogOverlayProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogBackdrop: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogInner: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, Pick<KoineDialogProps, "$centered">, never>;
-export declare const KoineDialogContent: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/dialog/dist/declarations/src").DialogContentProps>, import("styled-components").DefaultTheme, Pick<KoineDialogProps, "$centered">, never>;
-export declare const KoineDialogCloseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../Buttons").KoineButtonUiProps & {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const KoineDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogBodyChildren: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare type KoineDialogProps = SetRequired<BaseDialogProps, "onDismiss"> & {
-    title?: string;
-    /** @default true */
-    $centered?: boolean;
-};
-export declare const KoineDialog: ({ children, title, onDismiss, isOpen, $centered, ...props }: KoineDialogProps) => JSX.Element;

package/Img/Img.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare type KoineImgProps = {};
-export declare const KoineImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
-export declare type KoineImgSmartWrapProps = {
-    $loaded?: boolean;
-    $error?: boolean;
-    $bg?: React.CSSProperties["backgroundColor"];
-};
-export declare type KoineImgSmartProps = KoineImgProps & {
-    Wrap: React.FC<KoineImgSmartWrapProps>;
-};