@cronocode/react-box 3.0.1 → 3.0.2

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, useVariable) => useVariable(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/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, useVariable: (name: string) => string) => string;
+    }[];
+    bgColor: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, useVariable: (name: string) => string) => string;
+        styleName: string;
+    }[];
+    borderColor: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, useVariable: (name: string) => string) => string;
+        styleName: string;
+    }[];
+    outlineColor: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, useVariable: (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, useVariable: (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 useVariable(name: string): string;
+    function generateVariables(): string;
+    function setUserVariables(variables: Record<string, string>): void;
+}
+export default Variables;