@koine/react 2.0.0-beta.1 → 2.0.0-beta.100

package/styles/theme--vanilla.mjs

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

package/styles/theme.d.ts

@@ -1,82 +0,0 @@
-export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export 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 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 type ThemeOptions = {
-    maxWidth?: number;
-    gutter: NonNullable<Theme["gutter"]>;
-    devices?: Theme["devices"];
-    spaces: NonNullable<Theme["spaces"]>;
-    header: NonNullable<Theme["header"]>;
-};

package/styles/theme.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.createTheme = exports.breakpoints = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = require("styled-components");
-var 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
- * ```
- */
-exports.breakpoints = process.env["BREAKPOINTS"]
-    ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
-        var _a = pair.split(":"), key = _a[0], value = _a[1];
-        map[key] = parseFloat(value);
-        return map;
-    }, {})
-    : DEFAULT_BREAKPOINTS;
-var themeDefault = {
-    maxWidth: exports.breakpoints.xxl,
-    breakpoints: exports.breakpoints,
-    devices: {
-        mobile: "sm",
-        tablet: "md",
-        desktop: "lg",
-    },
-};
-var createTheme = function (options) {
-    return (tslib_1.__assign(tslib_1.__assign({}, themeDefault), options));
-};
-exports.createTheme = createTheme;
-exports.useTheme = styled_components_1.useTheme;

package/styles/theme.mjs

@@ -1,41 +0,0 @@
-import { __assign } from "tslib";
-import { useTheme as _useTheme } from "styled-components";
-var 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 var breakpoints = process.env["BREAKPOINTS"]
-    ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
-        var _a = pair.split(":"), key = _a[0], value = _a[1];
-        map[key] = parseFloat(value);
-        return map;
-    }, {})
-    : DEFAULT_BREAKPOINTS;
-var themeDefault = {
-    maxWidth: breakpoints.xxl,
-    breakpoints: breakpoints,
-    devices: {
-        mobile: "sm",
-        tablet: "md",
-        desktop: "lg",
-    },
-};
-export var createTheme = function (options) {
-    return (__assign(__assign({}, themeDefault), options));
-};
-export var useTheme = _useTheme;

package/tw/index.d.ts

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

package/tw/index.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-// 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";
-var bare_1 = require("../Dialog/tw/bare");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
-// export * from "../Form";
-// 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/index.mjs

@@ -1,31 +0,0 @@
-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 "../Form";
-// 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

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

package/twm/index.d.ts

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

package/twm/index.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-// 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";
-var framer_1 = require("../Dialog/tw/framer");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return framer_1.KoineDialog; } });
-// export * from "../Form";
-// 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/index.mjs

@@ -1,31 +0,0 @@
-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 "../Form";
-// 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

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

package/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/types.mjs

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

package/typings.d.ts

@@ -1,98 +0,0 @@
-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 {}
-
-/**
- * React Polymorphic components type utilities
- *
- * @resources
- * - [Polymorphic types from Radix UI in Wanda System](https://github.com/wonderflow-bv/wanda/blob/main/packages/react-components/src/types/polymorphic/index.ts)
- * - [TypeScript + React: Typing Generic forwardRefs](https://fettblog.eu/typescript-react-generic-forward-refs/)
- * - [React with Typescript -- Generics while using React.forwardRef](https://stackoverflow.com/a/58473012/1938970)
- * - [How to write a generic that extracts the prop types of the component that passed in](https://stackoverflow.com/a/57846897/1938970)
- * - [React TS Generic component to pass generic props to children](https://stackoverflow.com/a/68442669/1938970)
- * - [About custom ref prop](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)
- * - [forwardRef performance](https://github.com/facebook/react/issues/13456)
- * - [React docs: Exposing DOM Refs to Parent Components](https://github.com/facebook/react/issues/13456)
- */
-declare namespace Polymorphic {
-  type AsProp<TComponent extends React.ElementType> = {
-    as?: TComponent;
-  };
-
-  type ComponentTypes =
-    | React.ComponentClass<any>
-    | React.FunctionComponent<any>
-    | keyof JSX.IntrinsicElements;
-
-  type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
-
-  type ForwardRefExoticComponent<TComponent, TOwnProps> =
-    React.ForwardRefExoticComponent<
-      Merge<
-        TComponent extends React.ElementType
-          ? React.ComponentPropsWithRef<TComponent>
-          : never,
-        TOwnProps & { as?: TComponent }
-      >
-    >;
-
-  type InferProps<TComponent extends ComponentTypes> =
-    TComponent extends React.ComponentClass<infer Props>
-      ? Props
-      : TComponent extends React.FunctionComponent<infer Props>
-      ? Props
-      : TComponent extends React.ForwardRefExoticComponent<infer Props>
-      ? Props
-      : TComponent extends keyof JSX.IntrinsicElements
-      ? React.ComponentPropsWithoutRef<TComponent>
-      : never;
-
-  type Ref<TComponent extends React.ElementType> =
-    React.ComponentPropsWithRef<TComponent>["ref"];
-
-  type Props<
-    TComponent extends React.ElementType,
-    TProps = {}
-  > = /* Omit< */ InferProps<TComponent> /* , keyof Props> */ &
-    AsProp<TComponent> &
-    TProps;
-
-  type PropsWithRef<TComponent extends React.ElementType, TProps = {}> = Props<
-    TComponent,
-    TProps
-  > & {
-    ref?: Ref<TComponent>;
-  };
-
-  interface ComponentForwarded<TComponent, TProps = {}>
-    extends ForwardRefExoticComponent<TComponent, TProps> {
-    <As = TComponent>(
-      props: As extends ""
-        ? { as: keyof JSX.IntrinsicElements }
-        : As extends React.ComponentType<infer P>
-        ? Merge<P, TProps & { as: As }>
-        : As extends keyof JSX.IntrinsicElements
-        ? Merge<JSX.IntrinsicElements[As], TProps & { as: As }>
-        : never
-    ): React.ReactElement | null;
-  }
-}