@cronocode/react-box 3.0.1 → 3.0.3

package/README.md

@@ -6,7 +6,7 @@ This is a react base component which will reduce considerably necessity to write
 
 1. Installation
 
-```
+```bash
 npm install @cronocode/react-box
 ```
 
@@ -18,7 +18,7 @@ Sizes is equal to `1/4rem`
 
 In the example below is creating a box with `maring: 0.5rem` and `padding: 1.75rem`
 
-```
+```JS
 import Box from "@cronocode/react-box";
 
 export default function Component(props: Props) {
@@ -36,7 +36,7 @@ export default function Component(props: Props) {
 
 - **Box** - base component with a tons of props
 
-```
+```JS
 import Box from "@cronocode/react-box";
 ```
 
@@ -46,72 +46,83 @@ import Box from "@cronocode/react-box";
 
 - **Flex** - this is a `Box` component with `display: flex` style
 
-```
+```JS
 import Flex from "@cronocode/react-box/components/flex";
 ```
 
 - **Button** - this is a `Box` component with html tag `button` and `onClick` prop
 
-```
+```JS
 import Button from "@cronocode/react-box/components/button";
 ```
 
 - **Textbox** - this is a `Box` component with html tag `input`
 
-```
+```JS
 import Textbox from "@cronocode/react-box/components/textbox";
 ```
 
 - **Tooltip** - this is useful when you need a position absolute and the parent has overflow hidden.
 
-```
+```JS
 import Tooltip from "@cronocode/react-box/components/tooltip";
 ```
 
 ## Extend props
 
-1. It is possible to extend some props like `color`, `background`, `backgroundImage` and `shadow`
+It is possible to add your own props to define your custom styles.
+You need to do a few steps.
 
-```JS
-function themePlugin() {
-  return {
-    name: 'themePlugin',
-    configResolved() {
-      const result = Theme.setupAugmentedProps({
-        colors: {
-          primary: '#445566'
-        },
-        backgroundImages: {
-          gradient: 'linear-gradient(to right, #77A1D3 0%, #79CBCA  51%, #77A1D3  100%)'
-        },
-        shadows: {
-          1: '0 4px 10px rgb(224 224 224 / 52%)',
-        }
-      });
-
-      fs.writeFileSync('./src/box-theme.generated.css', result.variables);
-      fs.writeFileSync('./src/box.generated.d.ts', result.boxDts);
-    },
-  }
-}
-
-```
-
-2. Add this plugin to your build tool
-
-Vitejs
+1. In a project root file you need to define your extends
 
 ```JS
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [..., themePlugin()],
-})
+import Box from "@cronocode/react-box";
+
+export const { extendedProps, extendedPropTypes } = Box.extend(
+  // css variables
+  {
+    dark: '#123123',
+    light: '#ededed',
+    cssVarName: 'cssVarValue',
+    myShadow: '10px 5px 5px red',
+    myGradient1: 'linear-gradient(#e66465, #9198e5)',
+    myGradient2: 'linear-gradient(black, white)',
+  },
+  // new custom props
+  {
+    background: [
+      {
+        values: ['myGradient1', 'myGradient2'] as const,
+        valueFormat: (value: string) => `var(--background${value})`,
+      },
+    ],
+  },
+  // extend values for existing props
+  {
+    color: [
+      {
+        values: ['dark', 'light'],
+        valueFormat: (value, getVariableValue) => getVariableValue(value),
+      },
+    ],
+  }
+);
 ```
 
-3. Include `box-theme.generated.css` in your root file
+2. Now you have to add typings to the Box in order to have intellisense for you new props and value.
+   You need to create a `box.d.ts`
 
 ```JS
-import './box-theme.generated.css';
+import '@cronocode/react-box';
+import { ExtractBoxStyles } from '@cronocode/react-box/types';
+import { extendedProps, extendedPropTypes } from './path-to-your-b0x-extends-declaration';
+
+declare module '@cronocode/react-box/types' {
+  namespace Augmented {
+    interface BoxProps extends ExtractBoxStyles<typeof extendedProps> {}
+    interface BoxPropTypes extends ExtractBoxStyles<typeof extendedPropTypes> {}
+  }
+}
 ```
 
 ## Theme for components

package/box.cjs

@@ -1 +1 @@
-"use strict";const s=require("react"),a=require("./core.cjs");function g(n,l){const{tag:d="div",children:c,props:p,className:x,style:m,disabled:t,required:r,checked:o}=n,v=a.useStyles(n,d==="svg"),i=s.useMemo(()=>{const h=a.classNames(v,x).join(" "),e={...p,className:h};return t&&(e.disabled=Array.isArray(t)?t[0]:t),r&&(e.required=Array.isArray(r)?r[0]:r),o&&(e.checked=Array.isArray(o)?o[0]:o),m&&(e.style=m),l&&(e.ref=l),e},[n]),[A,y]=s.useState(!1),f=typeof c=="function";return f&&(i.onMouseEnter=()=>y(!0),i.onMouseLeave=()=>y(!1)),s.createElement(d,i,f?c({isHover:A}):c)}const u=s.memo(s.forwardRef(g));u.extend=a.BoxExtends.extend;u.themeSetup=a.Theme.setup;module.exports=u;
+"use strict";const s=require("react"),t=require("./core.cjs");function b(c,u){const{tag:d="div",children:i,props:p,className:x,style:m,disabled:r,required:a,checked:o}=c,g=t.useStyles(c,d==="svg"),l=s.useMemo(()=>{const A=t.classNames(g,x).join(" "),e={...p,className:A};return r&&(e.disabled=Array.isArray(r)?r[0]:r),a&&(e.required=Array.isArray(a)?a[0]:a),o&&(e.checked=Array.isArray(o)?o[0]:o),m&&(e.style=m),u&&(e.ref=u),e},[c]),[v,y]=s.useState(!1),f=typeof i=="function";return f&&(l.onMouseEnter=()=>y(!0),l.onMouseLeave=()=>y(!1)),s.createElement(d,l,f?i({isHover:v}):i)}const n=s.memo(s.forwardRef(b));n.extend=t.BoxExtends.extend;n.themeSetup=t.Theme.setup;n.getVariableValue=t.Variables.getVariableValue;module.exports=n;

package/box.d.ts

@@ -4,6 +4,7 @@ import { ExtractElementFromTag } from './core/coreTypes';
 import { BoxStyleProps } from './types';
 import { default as BoxExtends } from './core/boxExtends';
 import { default as Theme } from './core/theme';
+import { default as Variables } from './core/variables';
 type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
 type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref' | 'disabled' | 'required' | 'checked'>;
 interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyleProps {
@@ -20,6 +21,7 @@ interface BoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
     themeSetup: typeof Theme.setup;
+    getVariableValue: typeof Variables.getVariableValue;
 }
 declare const Box: BoxType;
 export default Box;

package/box.mjs

@@ -1,18 +1,19 @@
-import A, { memo as h, forwardRef as g, useMemo as B, useState as N } from "react";
-import { B as S, T as C, u as E, c as H } from "./core.mjs";
-function M(a, c) {
-  const { tag: i = "div", children: o, props: f, className: y, style: l, disabled: s, required: t, checked: r } = a, p = E(a, i === "svg"), n = B(() => {
-    const v = H(p, y).join(" "), e = {
+import v, { memo as A, forwardRef as V, useMemo as b, useState as h } from "react";
+import { B, T as N, V as S, u as C, c as E } from "./core.mjs";
+function H(r, c) {
+  const { tag: i = "div", children: o, props: f, className: y, style: u, disabled: s, required: a, checked: t } = r, p = C(r, i === "svg"), n = b(() => {
+    const g = E(p, y).join(" "), e = {
       ...f,
-      className: v
+      className: g
     };
-    return s && (e.disabled = Array.isArray(s) ? s[0] : s), t && (e.required = Array.isArray(t) ? t[0] : t), r && (e.checked = Array.isArray(r) ? r[0] : r), l && (e.style = l), c && (e.ref = c), e;
-  }, [a]), [x, u] = N(!1), d = typeof o == "function";
-  return d && (n.onMouseEnter = () => u(!0), n.onMouseLeave = () => u(!1)), A.createElement(i, n, d ? o({ isHover: x }) : o);
+    return s && (e.disabled = Array.isArray(s) ? s[0] : s), a && (e.required = Array.isArray(a) ? a[0] : a), t && (e.checked = Array.isArray(t) ? t[0] : t), u && (e.style = u), c && (e.ref = c), e;
+  }, [r]), [x, d] = h(!1), m = typeof o == "function";
+  return m && (n.onMouseEnter = () => d(!0), n.onMouseLeave = () => d(!1)), v.createElement(i, n, m ? o({ isHover: x }) : o);
 }
-const m = h(g(M));
-m.extend = S.extend;
-m.themeSetup = C.setup;
+const l = A(V(H));
+l.extend = B.extend;
+l.themeSetup = N.setup;
+l.getVariableValue = S.getVariableValue;
 export {
-  m as default
+  l as default
 };

package/core/boxExtends.d.ts

@@ -1,6 +1,8 @@
 import { BoxStyle } from './coreTypes';
 declare namespace BoxExtends {
-    function extend<TProps extends Record<string, BoxStyle[]>>(variables: Record<string, string>, props: TProps): TProps;
-    function getVariables(): string;
+    function extend<TProps extends Record<string, BoxStyle[]>, TPropTypes extends Record<string, BoxStyle[]>>(variables: Record<string, string>, extendedProps: TProps, extendedPropTypes: TPropTypes): {
+        extendedProps: TProps;
+        extendedPropTypes: TPropTypes;
+    };
 }
 export default BoxExtends;

package/core/boxStyles.d.ts

@@ -1,4 +1,5 @@
 import { BoxStylesFormatters } from './boxStylesFormatters';
+import { default as Variables } from './variables';
 export declare const cssStyles: {
     /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
     appearance: {
@@ -642,7 +643,7 @@ export declare const cssStyles: {
         valueFormat?: undefined;
     })[];
     /** The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. */
-    gridColumn: ({
+    colSpan: ({
         styleName: string;
         values: number;
         valueFormat: (value: number) => string;
@@ -681,6 +682,25 @@ export declare const cssStyles: {
         styleName: string;
         values: number;
     }[];
+    color: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+    }[];
+    bgColor: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+        styleName: string;
+    }[];
+    borderColor: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+        styleName: string;
+    }[];
+    outlineColor: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+        styleName: string;
+    }[];
 };
 export declare const pseudo1: {
     hover: string;

package/core/coreTypes.d.ts

@@ -1,10 +1,9 @@
-export type ArrayType<T> = T extends (infer U)[] ? U : T;
 export type BoxStylesType<T> = T extends ReadonlyArray<infer U> ? T[number] : T;
 export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
 export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
 interface BoxStyleArrayString {
     values: ReadonlyArray<string>;
-    valueFormat?: (value: string) => string;
+    valueFormat?: (value: string, getVariableValue: (name: string) => string) => string;
 }
 interface BoxStyleArrayBoolean {
     values: ReadonlyArray<boolean>;

package/core/theme.d.ts

@@ -4,6 +4,9 @@ export interface ThemeComponentStyles {
     themes?: {
         [name: string]: BoxThemeStyles;
     };
+    children?: {
+        [name: string]: ThemeComponentStyles;
+    };
 }
 export interface ThemeSetup {
     components?: {
@@ -15,6 +18,7 @@ export interface ThemeSetup {
     checkbox?: ThemeComponentStyles;
     radioButton?: ThemeComponentStyles;
     label?: ThemeComponentStyles;
+    dropdown?: ThemeComponentStyles;
 }
 declare namespace Theme {
     function setup(styles: ThemeSetup): void;

package/core/variables.d.ts

@@ -0,0 +1,256 @@
+declare namespace Variables {
+    const colors: {
+        inherit: string;
+        current: string;
+        transparent: string;
+        black: string;
+        white: string;
+        'slate-50': string;
+        'slate-100': string;
+        'slate-200': string;
+        'slate-300': string;
+        'slate-400': string;
+        'slate-500': string;
+        'slate-600': string;
+        'slate-700': string;
+        'slate-800': string;
+        'slate-900': string;
+        'slate-950': string;
+        'gray-50': string;
+        'gray-100': string;
+        'gray-200': string;
+        'gray-300': string;
+        'gray-400': string;
+        'gray-500': string;
+        'gray-600': string;
+        'gray-700': string;
+        'gray-800': string;
+        'gray-900': string;
+        'gray-950': string;
+        'zinc-50': string;
+        'zinc-100': string;
+        'zinc-200': string;
+        'zinc-300': string;
+        'zinc-400': string;
+        'zinc-500': string;
+        'zinc-600': string;
+        'zinc-700': string;
+        'zinc-800': string;
+        'zinc-900': string;
+        'zinc-950': string;
+        'neutral-50': string;
+        'neutral-100': string;
+        'neutral-200': string;
+        'neutral-300': string;
+        'neutral-400': string;
+        'neutral-500': string;
+        'neutral-600': string;
+        'neutral-700': string;
+        'neutral-800': string;
+        'neutral-900': string;
+        'neutral-950': string;
+        'stone-50': string;
+        'stone-100': string;
+        'stone-200': string;
+        'stone-300': string;
+        'stone-400': string;
+        'stone-500': string;
+        'stone-600': string;
+        'stone-700': string;
+        'stone-800': string;
+        'stone-900': string;
+        'stone-950': string;
+        'red-50': string;
+        'red-100': string;
+        'red-200': string;
+        'red-300': string;
+        'red-400': string;
+        'red-500': string;
+        'red-600': string;
+        'red-700': string;
+        'red-800': string;
+        'red-900': string;
+        'red-950': string;
+        'orange-50': string;
+        'orange-100': string;
+        'orange-200': string;
+        'orange-300': string;
+        'orange-400': string;
+        'orange-500': string;
+        'orange-600': string;
+        'orange-700': string;
+        'orange-800': string;
+        'orange-900': string;
+        'orange-950': string;
+        'amber-50': string;
+        'amber-100': string;
+        'amber-200': string;
+        'amber-300': string;
+        'amber-400': string;
+        'amber-500': string;
+        'amber-600': string;
+        'amber-700': string;
+        'amber-800': string;
+        'amber-900': string;
+        'amber-950': string;
+        'yellow-50': string;
+        'yellow-100': string;
+        'yellow-200': string;
+        'yellow-300': string;
+        'yellow-400': string;
+        'yellow-500': string;
+        'yellow-600': string;
+        'yellow-700': string;
+        'yellow-800': string;
+        'yellow-900': string;
+        'yellow-950': string;
+        'lime-50': string;
+        'lime-100': string;
+        'lime-200': string;
+        'lime-300': string;
+        'lime-400': string;
+        'lime-500': string;
+        'lime-600': string;
+        'lime-700': string;
+        'lime-800': string;
+        'lime-900': string;
+        'lime-950': string;
+        'green-50': string;
+        'green-100': string;
+        'green-200': string;
+        'green-300': string;
+        'green-400': string;
+        'green-500': string;
+        'green-600': string;
+        'green-700': string;
+        'green-800': string;
+        'green-900': string;
+        'green-950': string;
+        'emerald-50': string;
+        'emerald-100': string;
+        'emerald-200': string;
+        'emerald-300': string;
+        'emerald-400': string;
+        'emerald-500': string;
+        'emerald-600': string;
+        'emerald-700': string;
+        'emerald-800': string;
+        'emerald-900': string;
+        'emerald-950': string;
+        'teal-50': string;
+        'teal-100': string;
+        'teal-200': string;
+        'teal-300': string;
+        'teal-400': string;
+        'teal-500': string;
+        'teal-600': string;
+        'teal-700': string;
+        'teal-800': string;
+        'teal-900': string;
+        'teal-950': string;
+        'cyan-50': string;
+        'cyan-100': string;
+        'cyan-200': string;
+        'cyan-300': string;
+        'cyan-400': string;
+        'cyan-500': string;
+        'cyan-600': string;
+        'cyan-700': string;
+        'cyan-800': string;
+        'cyan-900': string;
+        'cyan-950': string;
+        'sky-50': string;
+        'sky-100': string;
+        'sky-200': string;
+        'sky-300': string;
+        'sky-400': string;
+        'sky-500': string;
+        'sky-600': string;
+        'sky-700': string;
+        'sky-800': string;
+        'sky-900': string;
+        'sky-950': string;
+        'blue-50': string;
+        'blue-100': string;
+        'blue-200': string;
+        'blue-300': string;
+        'blue-400': string;
+        'blue-500': string;
+        'blue-600': string;
+        'blue-700': string;
+        'blue-800': string;
+        'blue-900': string;
+        'blue-950': string;
+        'indigo-50': string;
+        'indigo-100': string;
+        'indigo-200': string;
+        'indigo-300': string;
+        'indigo-400': string;
+        'indigo-500': string;
+        'indigo-600': string;
+        'indigo-700': string;
+        'indigo-800': string;
+        'indigo-900': string;
+        'indigo-950': string;
+        'violet-50': string;
+        'violet-100': string;
+        'violet-200': string;
+        'violet-300': string;
+        'violet-400': string;
+        'violet-500': string;
+        'violet-600': string;
+        'violet-700': string;
+        'violet-800': string;
+        'violet-900': string;
+        'violet-950': string;
+        'purple-50': string;
+        'purple-100': string;
+        'purple-200': string;
+        'purple-300': string;
+        'purple-400': string;
+        'purple-500': string;
+        'purple-600': string;
+        'purple-700': string;
+        'purple-800': string;
+        'purple-900': string;
+        'purple-950': string;
+        'fuchsia-50': string;
+        'fuchsia-100': string;
+        'fuchsia-200': string;
+        'fuchsia-300': string;
+        'fuchsia-400': string;
+        'fuchsia-500': string;
+        'fuchsia-600': string;
+        'fuchsia-700': string;
+        'fuchsia-800': string;
+        'fuchsia-900': string;
+        'fuchsia-950': string;
+        'pink-50': string;
+        'pink-100': string;
+        'pink-200': string;
+        'pink-300': string;
+        'pink-400': string;
+        'pink-500': string;
+        'pink-600': string;
+        'pink-700': string;
+        'pink-800': string;
+        'pink-900': string;
+        'pink-950': string;
+        'rose-50': string;
+        'rose-100': string;
+        'rose-200': string;
+        'rose-300': string;
+        'rose-400': string;
+        'rose-500': string;
+        'rose-600': string;
+        'rose-700': string;
+        'rose-800': string;
+        'rose-900': string;
+        'rose-950': string;
+    };
+    type ColorType = keyof typeof colors;
+    function getVariableValue(name: string): string;
+    function generateVariables(): string;
+    function setUserVariables(variables: Record<string, string>): void;
+}
+export default Variables;