@cronocode/react-box 3.0.0 → 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/box.d.ts

@@ -1,4 +1,4 @@
-import { default as React, RefAttributes } from 'react';
+import { default as React, Ref, RefAttributes } from 'react';
 import { ClassNameType } from './core/classNames';
 import { ExtractElementFromTag } from './core/coreTypes';
 import { BoxStyleProps } from './types';
@@ -15,6 +15,7 @@ interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyle
     className?: ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
+declare function BoxComponent<TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag>, ref: Ref<ExtractElementFromTag<TTag>>): React.ReactElement<React.ComponentProps<TTag>, string | React.JSXElementConstructor<any>>;
 interface BoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
@@ -22,5 +23,5 @@ interface BoxType {
 }
 declare const Box: BoxType;
 export default Box;
-export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof Box<TTag>>;
+export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof BoxComponent<TTag>>;
 export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Required<BoxProps<TTag>>['props'];

package/components/button.d.ts

@@ -1,11 +1,11 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type ButtonProps = Omit<BoxProps<'button'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<ButtonProps>['props'];
 declare const tagProps: readonly ["type", "onClick"];
 type TagPropsType = (typeof tagProps)[number];
 type ButtonTagProps = Omit<BoxTagProps, TagPropsType>;
 type ButtonType = Required<React.ComponentProps<'button'>>['type'];
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<ButtonProps, 'props'> {
     props?: ButtonTagProps;
     type?: ButtonType;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/components/checkbox.d.ts

@@ -13,5 +13,5 @@ interface Props extends CheckboxProps {
     readOnly?: boolean;
     defaultChecked?: boolean;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/flex.d.ts

@@ -1,6 +1,5 @@
 import { RefAttributes } from 'react';
-import { default as Box } from '../box';
+import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
-type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
 declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/form.d.ts

@@ -1,8 +1,7 @@
-import { default as Box } from '../box';
-type BoxProps = React.ComponentProps<typeof Box<'form'>>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type BoxTagProps = Required<BoxProps<'form'>>['props'];
 type FormTagProps = Omit<BoxTagProps, 'onSubmit' | 'ref'>;
-interface Props<T> extends Omit<BoxProps, 'props' | 'tag'> {
+interface Props<T> extends Omit<BoxProps<'form'>, 'props' | 'tag'> {
     props?: FormTagProps;
     onSubmit: (obj: T, e: React.ChangeEvent<HTMLFormElement>) => void;
 }

package/components/grid.d.ts

@@ -1,6 +1,5 @@
 import { RefAttributes } from 'react';
-import { default as Box } from '../box';
+import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
-type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
 declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/radioButton.d.ts

@@ -1,10 +1,10 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type RadioButtonProps = Omit<BoxProps<'input'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<RadioButtonProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
 type TagPropsType = (typeof tagProps)[number];
 type RadioButtonTagProps = Omit<BoxTagProps, TagPropsType | 'type'>;
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<RadioButtonProps, 'props'> {
     name?: string;
     props?: RadioButtonTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/components/textarea.d.ts

@@ -1,10 +1,10 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'textarea'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type TextareaProps = Omit<BoxProps<'textarea'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<TextareaProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "placeholder", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly"];
 type TagPropsType = (typeof tagProps)[number];
 type TextareaTagProps = Omit<BoxTagProps, TagPropsType>;
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<TextareaProps, 'props'> {
     name?: string;
     props?: TextareaTagProps;
     onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

package/components/textbox.d.ts

@@ -1,11 +1,11 @@
-import { default as Box } from '../box';
-type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
-type BoxTagProps = Required<BoxProps>['props'];
+import { BoxProps } from '../box';
+type TextareaProps = Omit<BoxProps<'input'>, 'ref' | 'tag'>;
+type BoxTagProps = Required<TextareaProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
 type TagPropsType = (typeof tagProps)[number];
 type TextboxTagProps = Omit<BoxTagProps, TagPropsType>;
 type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-interface Props extends Omit<BoxProps, 'props'> {
+interface Props extends Omit<TextareaProps, 'props'> {
     name?: string;
     props?: TextboxTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/components/tooltip.d.ts

@@ -1,6 +1,5 @@
-import { default as Box } from '../box';
-import { default as React } from 'react';
-interface Props extends React.ComponentProps<typeof Box> {
+import { BoxProps } from '../box';
+interface Props extends BoxProps {
     onPositionChange?(position: {
         top: number;
         left: number;

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: {
@@ -60,50 +61,50 @@ export declare const cssStyles: {
     /** The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusTop: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusRight: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusBottom: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusLeft: {
         values: number;
-        styleName: string;
-        valueFormat: (value: number) => string;
+        styleName: string[];
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusTopLeft: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusTopRight: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusBottomRight: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. */
     borderRadiusBottomLeft: {
         values: number;
         styleName: string;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     }[];
     /** The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
     position: {
@@ -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;
@@ -728,6 +748,7 @@ export declare const pseudoGroupClasses: {
     hoverGroup: "hover";
     focusGroup: "focus";
     activeGroup: "active";
+    disabledGroup: "disabled";
 };
 export declare const breakpoints: {
     sm: number;

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>;
@@ -23,7 +22,8 @@ interface BoxStyleString {
     valueFormat?: (value: string) => string;
 }
 export type BoxStyle = (BoxStyleArrayString | BoxStyleArrayBoolean | BoxStyleArrayNumber | BoxStyleNumber | BoxStyleString) & {
-    styleName?: string;
+    styleName?: string | string[];
+    selector?: (className: string, pseudoClass: string) => string;
 };
 export type ExtractKeys<T extends Record<string, unknown>, TT> = {
     [K in keyof T]?: TT;

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;