@kbgarcia8/react-dynamic-form 2.0.2 → 2.0.4

package/README.md

@@ -174,6 +174,20 @@ const addressInputsArray = [
       editIcon: <.../>, //=>editIcon in EditableInputProps
       deleteIcon: <.../>,
       editing: ...,
+      //Styling options for editable option buttons
+      editableButtonSize: 'small', //small by default. Value can be only be one of the following: "small" | "smallest" | "smaller" | "medium" | "large" | "larger"
+      editableButtonColor: 'primary', //primary by default. Value can only be one of the following: "primary" | "secondary" | "ghost" | "bnw"
+      editableButtonRadius: 'squircle', //squircle by default. Value can only be one of the following: "circle" | "square" | "roundedsquare" | "squircle" | "pill"
+      //Optional props - text, start icon and end icon of editable option buttons
+      saveText: ...,
+      saveButtonStartIcon: <.../>,
+      saveButtonEndIcon: <.../>,
+      cancelText: ...,
+      cancelButtonStartIcon: <.../>,
+      cancelButtonEndIcon: <.../>,
+      deleteText: ...,
+      deleteButtonStartIcon: <.../>,
+      deleteButtonEndIcon: <.../>,
       //These are informations editable within radio input acting as selection
       editableInformation: [
           {
@@ -229,7 +243,9 @@ function App() {
 | `inputClass`   | `string`     | — | className for `<Input/>` component inside `<LabeledInput/>` component inside `<DynamicForm/>` |
 | `handleEditableInputEntryChange`   | `(e:React.ChangeEvent<HTMLInputElement\|HTMLTextAreaElement>) => void` | — | Function to handle onChange of editable inputs |
 | `handleAddingInputEntry`   | `(e:React.MouseEvent<HTMLButtonElement>) => void` | — | Function to add input entry. If isExpandable is false this is not enabled |
-| `hasSubmit`   | `boolean`     | `false` | This is to enable submit button for `<DynamicForm/>` |
+| `formActionButtonSize`   | `string` | `small` | Text size of form action buttons. Values can only be one of the following values: "small", "smallest", "smaller", "medium", "large", "larger" |
+| `formActionButtonColor`   | `string` | `primary` | Color of form action buttons. Values can only be one of the following: "primary", "secondary", "ghost", "bnw"  |
+| `formActionButtonRadius`   | `string` | `squircle` | Border radius of form action buttons. Values can only be one of the following: "circle", "square", "roundedsquare", "squircle", "pill" |
 | `submitText`   | `string`     | `Submit` | Text inside submit button for `<DynamicForm/>` |
 | `handleSubmit`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle submit logic for `<DynamicForm/>` |
 | `hasReset`   | `boolean`     | `false` | This is to enable reset button for `<DynamicForm/>` |
@@ -252,6 +268,18 @@ function App() {
 | `isEditable`   | `boolean`     | — | To determine if an input is editable or not. This is only applicable for radio or checkbox input to mimick an editable option/selection<br>If false, all props below are automatically not needed |
 | `editing`   | `boolean`     | — | To identify if an editable input is being modified<br>Can be used in open/close dialogs |
 | `onClickEdit`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle edit logic of editable input |
+| `editableButtonSize`   | `string` | `small` | Text size of editable option buttons. Values can only be one of the following values: "small", "smallest", "smaller", "medium", "large", "larger" |
+| `editableButtonColor`   | `string` | `primary` | Color of editable option buttons. Values can only be one of the following: "primary", "secondary", "ghost", "bnw"  |
+| `editableButtonRadius`   | `string` | `squircle` | Border radius of editable option buttons. Values can only be one of the following: "circle", "square", "roundedsquare", "squircle", "pill" |
+| `saveText`   | `string`     | `Save` | Text inside save button for `<NestedEditableOption/>` |
+| `saveButtonStartIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon before the text (if any) for save button of `<NestedEditableOption/>` |
+| `saveButtonEndIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon after the text (if any) for save button of `<NestedEditableOption/>` |
+| `cancelText`   | `string`     | `Cancel` | Text inside cancel button for `<NestedEditableOption/>` |
+| `cancelButtonStartIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon before the text (if any) for cancel button of `<NestedEditableOption/>` |
+| `cancelButtonEndIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon after the text (if any) for cancel button of `<NestedEditableOption/>` |
+| `deleteText`   | `string`     | `Delete` | Text inside delete button for `<NestedEditableOption/>` |
+| `deleteButtonStartIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon before the text (if any) for delete button of `<NestedEditableOption/>` |
+| `deleteButtonEndIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon after the text (if any) for delete button of `<NestedEditableOption/>` |
 | `editIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as an icon for edit button of editable input |
 | `onClickDelete`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle delete logic of editable input |
 | `deleteIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as an icon for delete button of editable input |
@@ -312,28 +340,66 @@ You allow overriding currentTheme:
 <!-- TOC --><a name="reminder-for-custom-theme-override"></a>
 ##### Reminder for custom theme override:
 
-Below is the supported format for creating a theme object. Usually consisting of light and dark theme
+Below is the supported format for creating a theme object. Usually consisting of light and dark theme. Note that you can specify as many color key-color group you like. In the example below is 'colors', 'anchorTheme', 'footerTheme' and 'notificationPalette'
 
 asColor function is used to ensure that color to be supplied in color properties are colors (e.g. hexcode and rgb code). Note that keys of colors are changeable since it has type ``
 
 ```tsx
 import { asColor } from '@kbgarcia8/react-dynamic-form'
 
+export const palette = {
+    primary1: asColor('#202234'),
+    primary2: asColor('#3C5E83'),
+    primary3: asColor('#0F60B6'),
+    ...
+}
+
 export const lightTheme:Theme = {
     name: 'light',
     colors: {
-        text: asColor('#333446'),
-        bg: asColor('#EEEEEE'),
-        ...
+      screenColor: palette.neutral2,
+      backgroundColor1: palette.primary1,
+      ...
+    },
+    anchorTheme: {
+      visited: palette.neutral5,
+      hover: palette.primary2,
+      active: palette.secondary2
+    },
+    footerTheme: {
+      backgroundColor: palette.neutral5,
+      textColor: palette.secondary1,
+      shadowColor: palette.shadow1
+    },
+    notificationPalette: {
+      infoText: asColor('#C9E6F0'),
+      infoBackground: asColor('#202234'),
+    ...
     }
 }
 
 export const darkTheme:Theme = {
     name: 'dark',
     colors: {
-        bg: asColor('#333446'),
-        text: asColor('#EEEEEE'),
-        ...
+      screenColor: palette.neutral5,
+      backgroundColor1: palette.primary2,
+      ...
+    },
+    anchorTheme: {
+      link: palette.neutral1,
+      visited: palette.neutral1,
+      hover: palette.primary3,
+      active: palette.secondary1
+    },
+    footerTheme: {
+      backgroundColor: palette.accent,
+      textColor: palette.primary1,
+      shadowColor: palette.shadow2
+    },
+    notificationPalette: {
+      infoText: asColor('#202234'),
+      infoBackground: asColor('#C9E6F0'),
+      ...
     }
 }
 ```
@@ -389,6 +455,9 @@ Every renderable part of the form receives predictable classes or id:
 | **No Entry Message**         | *default styled component*                            | Target using parent wrapper |
 | **Children Container**       | `children-container`                                  |                             |
 
+#### Note/s
+- These classnames can also be used override styling using native CSS
+
 ```ts
 import styled from "styled-components";
 import { DynamicForm } from "@kbgarcia8/react-dynamic-form";

package/dist/components/atoms/Button/Button.d.ts

@@ -1,4 +1,4 @@
 import type { ButtonProps } from "../../../type/propTypes";
-declare const Button: ({ onClick, id, buttonType, startIcon, endIcon, alt, text, className, dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element | undefined;
+declare const Button: ({ onClick, id, buttonType, startIcon, endIcon, text, className, dataAttributes, color, radius, size }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/atoms/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,uFAUd,WAAW,wDAmCZ,CAAA;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,uGAYd,WAAW,4CAqCZ,CAAA;AAED,eAAe,MAAM,CAAC"}

package/dist/components/atoms/Button/Button.styles.d.ts

@@ -1,5 +1,33 @@
-export declare const DefaultButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const ButtonTextAndIconSpace: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ButtonIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const ButtonText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const COLORS: {
+    primary: import("styled-components").RuleSet<object>;
+    secondary: import("styled-components").RuleSet<object>;
+    ghost: import("styled-components").RuleSet<object>;
+    bnw: import("styled-components").RuleSet<object>;
+};
+export declare const SIZES: {
+    smallest: import("styled-components").RuleSet<object>;
+    smaller: import("styled-components").RuleSet<object>;
+    small: import("styled-components").RuleSet<object>;
+    medium: import("styled-components").RuleSet<object>;
+    large: import("styled-components").RuleSet<object>;
+    larger: import("styled-components").RuleSet<object>;
+};
+export declare const RADIUS: {
+    square: import("styled-components").RuleSet<object>;
+    roundedsquare: import("styled-components").RuleSet<object>;
+    squircle: import("styled-components").RuleSet<object>;
+    pill: import("styled-components").RuleSet<object>;
+    circle: import("styled-components").RuleSet<object>;
+};
+export declare const DefaultButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $color?: keyof typeof COLORS;
+    $radius?: keyof typeof RADIUS;
+}>> & string;
+export declare const ButtonTextAndIconSpace: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hasIcon: boolean;
+    $hasText: boolean;
+}>> & string;
+export declare const ButtonText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size?: keyof typeof SIZES;
+}>> & string;
 //# sourceMappingURL=Button.styles.d.ts.map

package/dist/components/atoms/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,yOA0BzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,6NAMlC,CAAC;AAEF,eAAO,MAAM,UAAU,oOAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,+NAOtB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;CAkElB,CAAC;AAEF,eAAO,MAAO,KAAK;;;;;;;CAqClB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC;AAGF,eAAO,MAAM,aAAa;aACT,MAAM,OAAO,MAAM;cAClB,MAAM,OAAO,MAAM;YAwBpC,CAAC;AAEF,eAAO,MAAM,sBAAsB;cAA0B,OAAO;cAAY,OAAO;YAetF,CAAC;AAEF,eAAO,MAAM,UAAU;YAAyB,MAAM,OAAO,KAAK;YAQjE,CAAC"}

package/dist/components/molecules/FormActionButtons/FormActionButtons.d.ts

@@ -1,4 +1,4 @@
 import type { FormActionButtonsProps } from "../../../type/propTypes";
-declare const FormActionButtons: ({ id, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormActionButtons: ({ id, formActionButtonSize, formActionButtonColor, formActionButtonRadius, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default FormActionButtons;
 //# sourceMappingURL=FormActionButtons.d.ts.map

package/dist/components/molecules/FormActionButtons/FormActionButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,+HAYzB,sBAAsB,4CAQvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,oMAezB,sBAAsB,4CAQvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/molecules/FormActionButtons/FormActionButtons.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActionButtons.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,6NAI3B,CAAC"}
+{"version":3,"file":"FormActionButtons.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,6NAQ3B,CAAC"}

package/dist/components/molecules/LabeledInput/LabeledInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LabeledInput/LabeledInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAgB,MAAM,yBAAyB,CAAC;AAGrG,QAAA,MAAM,YAAY,GAAI,OAAM,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,GAAG,eAAe,CAAC,4CA+F5F,CAAA;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LabeledInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LabeledInput/LabeledInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAgB,MAAM,yBAAyB,CAAC;AAErG,QAAA,MAAM,YAAY,GAAI,OAAM,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,GAAG,eAAe,CAAC,4CA+F5F,CAAA;AAED,eAAe,YAAY,CAAC"}

package/dist/components/molecules/NestedEditableOption/NestedEditableOption.d.ts

@@ -1,4 +1,4 @@
 import type { NestedEditableOptionProps } from "../../../type/propTypes";
-declare const NestedEditableOption: ({ legend, fieldsetIndex, idx, editableInformation, onChangeOfEditableOption, onClickSaveEdit, onClickCancelEdit, onClickDeleteEntry }: NestedEditableOptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const NestedEditableOption: ({ editableButtonSize, editableButtonColor, editableButtonRadius, legend, fieldsetIndex, idx, editableInformation, saveText, saveButtonStartIcon, saveButtonEndIcon, cancelText, cancelButtonStartIcon, cancelButtonEndIcon, deleteText, deleteButtonStartIcon, deleteButtonEndIcon, onChangeOfEditableOption, onClickSaveEdit, onClickCancelEdit, onClickDeleteEntry }: NestedEditableOptionProps) => import("react/jsx-runtime").JSX.Element;
 export default NestedEditableOption;
 //# sourceMappingURL=NestedEditableOption.d.ts.map

package/dist/components/molecules/NestedEditableOption/NestedEditableOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,uIAS5B,yBAAyB,4CA8B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,wWAqB5B,yBAAyB,4CA8B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/organisms/DynamicForm/DynamicForm.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { DynamicFormProps } from "../../../type/propTypes";
-declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, onChangeOfEditableOption, handleAddingInputEntry, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, handleSubmitForm, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, onChangeOfEditableOption, handleAddingInputEntry, formActionButtonSize, formActionButtonColor, formActionButtonRadius, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, handleSubmitForm, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
 export default DynamicForm;
 //# sourceMappingURL=DynamicForm.d.ts.map

package/dist/components/organisms/DynamicForm/DynamicForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,6TAwBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CAoJ1C,CAAA;AAGD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,kYA2BnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CA+K1C,CAAA;AAGD,eAAe,WAAW,CAAC"}