dfh-ui-library 1.1.4 → 1.1.6

package/dist/index.d.ts

@@ -1,160 +1,401 @@
 /// <reference types="react" />
-import React$1, { InputHTMLAttributes, FC } from 'react';
+import React$1, {
+  InputHTMLAttributes,
+  SelectHTMLAttributes,
+  FC,
+  TextareaHTMLAttributes,
+} from "react";
 
 type AlignmentType = "center" | "left" | "right";
-type IconColorTypes = "white" | "black-900" | "gray-220" | "gray-720" | "inherit" | "gray-300" | string;
-type IconType = "Home" | "Info" | "Email" | "RightArrow" | "DropDown" | "DropDownArrow" | "WhiteArrow" | "TrashIcon" | "AddNewitemIcon" | "OkIcon" | "EditIcon" | "Delete" | "AddIcon" | "RemoveTrashIcon" | "RoundTickIcon" | "ValidationWarningIcon" | "WarningIcon" | "NeturalIcon" | "SuccessIcon" | string;
-interface ChildrenProp {
-    /**
-     * Se the child node and element;
-     */
-    children?: React.ReactNode;
+type IconColorTypes =
+  | "white"
+  | "black-900"
+  | "gray-220"
+  | "gray-720"
+  | "inherit"
+  | "gray-300"
+  | string;
+type IconType =
+  | "Home"
+  | "Info"
+  | "Email"
+  | "RightArrow"
+  | "DropDown"
+  | "DropDownArrow"
+  | "WhiteArrow"
+  | "TrashIcon"
+  | "AddNewitemIcon"
+  | "OkIcon"
+  | "EditIcon"
+  | "Delete"
+  | "AddIcon"
+  | "RemoveTrashIcon"
+  | "RoundTickIcon"
+  | "ValidationWarningIcon"
+  | "WarningIcon"
+  | "NeturalIcon"
+  | "SuccessIcon"
+  | string;
+interface IChildrenProp {
+  /**
+   * Se the child node and element;
+   */
+  children?: React.ReactNode;
 }
-interface IconTypeProp {
-    /**
-     * Set icon type
-     */
-    iconType?: IconType;
-    /**
-     * Set the Icon Color
-     */
-    iconColor?: IconColorTypes;
+interface IIconTypeProp {
+  /**
+   * Set icon type
+   */
+  iconType?: IconType;
+  /**
+   * Set the Icon Color
+   */
+  iconColor?: IconColorTypes;
 }
-interface AdditionalClassesProp {
-    /**
-     * Optional | Set the additional classes
-     */
-    additionalClasses?: string | undefined;
+interface IAdditionalClassesProp {
+  /**
+   * Optional | Set the additional classes
+   */
+  additionalClasses?: string | undefined;
 }
-interface OnClickEventProps {
-    onClick?: () => void;
+interface IOnClickEventProps {
+  onClick?: () => void;
 }
-type TyphoTypes = "h1" | "h1Bold" | "h1ExtraBold" | "h2" | "h2Bold" | "h2ExtraBold" | "h10" | "h10Bold" | "h10ExtraBold" | "h6" | "h6Bold" | "h6ExtraBold" | "header1" | "header2" | "label1" | "label2";
+type TyphoTypes =
+  | "h1"
+  | "h1Bold"
+  | "h1ExtraBold"
+  | "h2"
+  | "h2Bold"
+  | "h2ExtraBold"
+  | "h10"
+  | "h10Bold"
+  | "h10ExtraBold"
+  | "h6"
+  | "h6Bold"
+  | "h6ExtraBold"
+  | "header1"
+  | "header2"
+  | "label1"
+  | "label2";
 type TyphoComponents = "p" | "span" | "em" | "div" | undefined;
 
-interface ButtonProps extends ChildrenProp, AdditionalClassesProp, IconTypeProp, OnClickEventProps {
-    /**
-     * Set the button type
-     */
-    type?: "submit" | "button";
-    /**
-     * Button Variants
-     */
-    variants?: "large" | "small" | "extraSmall" | "largeOutlined" | "smallOutlined" | "extraSmallOutlined" | "default" | "defaultOutlined";
-    /**
-     * Set the button disable state
-     */
-    isDisabled?: boolean;
-    /**
-     * Set the button Label
-     */
-    buttonLabel?: string | number;
-    /**
-     * Set the icon visibility
-     */
-    isIconEnabled?: boolean;
-    /**
-     * Set the icon Alignment
-     */
-    iconAlignment?: AlignmentType;
-    /**
-     * Set icon classes
-     */
-    iconClass?: string;
+interface ButtonProps
+  extends ChildrenProp,
+    AdditionalClassesProp,
+    IconTypeProp,
+    OnClickEventProps {
+  /**
+   * Set the button type
+   */
+  type?: "submit" | "button";
+  /**
+   * Button Variants
+   */
+  variants?:
+    | "large"
+    | "small"
+    | "extraSmall"
+    | "largeOutlined"
+    | "smallOutlined"
+    | "extraSmallOutlined"
+    | "default"
+    | "defaultOutlined";
+  /**
+   * Set the button disable state
+   */
+  isDisabled?: boolean;
+  /**
+   * Set the button Label
+   */
+  buttonLabel?: string | number;
+  /**
+   * Set the icon visibility
+   */
+  isIconEnabled?: boolean;
+  /**
+   * Set the icon Alignment
+   */
+  iconAlignment?: AlignmentType;
+  /**
+   * Set icon classes
+   */
+  iconClass?: string;
 }
-interface TyphographyProps extends ChildrenProp, AdditionalClassesProp {
-    /**
-     * Set element type
-     */
-    type?: TyphoTypes;
-    /**
-     * Set element node of the content wrapper
-     */
-    component?: TyphoComponents;
-    /**
-     * Set font-color of the content
-     */
-    color?: string;
-    onClick?: () => void;
+interface ITyphographyProps extends ChildrenProp, AdditionalClassesProp {
+  /**
+   * Set element type
+   */
+  type?: TyphoTypes;
+  /**
+   * Set element node of the content wrapper
+   */
+  component?: TyphoComponents;
+  /**
+   * Set font-color of the content
+   */
+  color?: string;
+  onClick?: () => void;
 }
-type InputType = "text" | "email" | "password" | "name" | "date";
-interface HookFormsInputProps extends InputHTMLAttributes<HTMLInputElement> {
-    /**
-     * Set Input type
-     */
-    type?: InputType;
-    /**
-     * Set new variant of the input
-     */
-    inputVariant?: "default" | "large";
-    /**
-     * Set Input name
-     */
-    id?: string;
-    /**
-     * Set Input name
-     */
-    labelName?: string;
-    /**
-     * Set the Label Type
-     */
-    labelType?: "default" | "black" | "smallSelect" | "blackSmall";
-    /**
-     * Set Input label name
-     */
-    label?: string | undefined;
-    /**
-     * Ser Error message
-     */
-    error?: string;
-    /**
-     * Ser Error message
-     */
-    isBorderedError?: boolean;
-    /**
-     * Set Wrapper classes, new classes will overide the existing default classes
-     */
-    wrapperClass?: string | undefined;
-    /**
-     * Optional for additional classes
-     */
-    additionalClasses?: string | undefined;
-    /**
-     * Enable read only
-     */
-    readonly?: boolean;
-    /**
-     * LabelClasses
-     */
-    labelClasses?: string | undefined;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    placeholder?: string;
-    /**
-     * Set label only
-     */
-    onlyLabel?: boolean | undefined;
-    /**
-     * inner span Classes
-     */
-    labelSpanClasses?: string;
-    /**
-     * add additional InputValidation Classes
-     */
-    additionalErrorClasses?: string;
-    isAdditionalErrorInput?: boolean;
-    fullError?: boolean;
+type InputType$1 = "text" | "email" | "password" | "name" | "date";
+interface IHookFormsInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Set Input type
+   */
+  type?: InputType$1;
+  /**
+   * Set new variant of the input
+   */
+  inputVariant?: "default" | "large";
+  /**
+   * Set Input name
+   */
+  id?: string;
+  /**
+   * Set Input name
+   */
+  labelName?: string;
+  /**
+   * Set the Label Type
+   */
+  labelType?: "default" | "black" | "smallSelect" | "blackSmall";
+  /**
+   * Set Input label name
+   */
+  label?: string | undefined;
+  /**
+   * Ser Error message
+   */
+  error?: string;
+  /**
+   * Ser Error message
+   */
+  isBorderedError?: boolean;
+  /**
+   * Set Wrapper classes, new classes will overide the existing default classes
+   */
+  wrapperClass?: string | undefined;
+  /**
+   * Optional for additional classes
+   */
+  additionalClasses?: string | undefined;
+  /**
+   * Enable read only
+   */
+  readonly?: boolean;
+  /**
+   * LabelClasses
+   */
+  labelClasses?: string | undefined;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  /**
+   * Set label only
+   */
+  onlyLabel?: boolean | undefined;
+  /**
+   * inner span Classes
+   */
+  labelSpanClasses?: string;
+  /**
+   * add additional InputValidation Classes
+   */
+  additionalErrorClasses?: string;
+  isAdditionalErrorInput?: boolean;
+  fullError?: boolean;
+}
+interface CheckboxProps {
+  onChange?: (checked: boolean) => void;
+  checked?: boolean;
+  id?: any;
+  label?: string;
+}
+type LABELTYPE = "default" | "black" | "smallSelect" | "blackSmall" | undefined;
+interface ILabelProps {
+  /**
+   * Set the Label Type
+   */
+  labelType?: LABELTYPE;
+  /**
+   * Label name
+   */
+  name: string | undefined;
+  /**
+   * Label contents
+   */
+  label?: string | undefined;
+  /**
+   * Add children
+   */
+  children?: React.ReactNode;
+  /**
+   * Optional for additional classes
+   */
+  additionalClasses?: string | undefined;
+  /**
+   * inner span Classes
+   */
+  labelSpanClasses?: string;
+}
+interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * Type
+   */
+  selectType?: "small" | "medium";
+  /**
+   * Set Input type
+   */
+  options?: (string | number)[];
+  /**
+   * Set Input name
+   */
+  name: string;
+  /**
+   * Set Label type
+   */
+  labelType?: "default" | "black" | "smallSelect" | "blackSmall";
+  /**
+   * Set Input label name
+   */
+  label?: string | undefined;
+  /**
+   * LabelClasses
+   */
+  labelClasses?: string;
+  /**
+   * Default text for placeholder
+   */
+  defaultText?: string | undefined;
+  /**
+   * Ser Error message
+   */
+  error?: string;
+  /**
+   * Set Wrapper classes, new classes will overide the existing default classes
+   */
+  wrapperClass?: string | undefined;
+  /**
+   * Optional for additional classes
+   */
+  additionalClasses?: string | undefined;
+  updateInputValue?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  defaultValue?: string;
 }
 
-declare const Button: ({ type, isDisabled, buttonLabel, iconType, iconColor, iconAlignment, isIconEnabled, variants, additionalClasses, iconClass, onClick, }: ButtonProps) => React$1.JSX.Element;
+declare const Button: ({
+  type,
+  isDisabled,
+  buttonLabel,
+  iconType,
+  iconColor,
+  iconAlignment,
+  isIconEnabled,
+  variants,
+  additionalClasses,
+  iconClass,
+  onClick,
+}: ButtonProps) => React$1.JSX.Element;
 
 /**
  * Primary UI component
  */
-declare const Typhography: ({ type, component, color, additionalClasses, children, onClick, ...rest }: TyphographyProps) => React$1.JSX.Element;
+declare const Typhography: ({
+  type,
+  component,
+  color,
+  additionalClasses,
+  children,
+  onClick,
+  ...rest
+}: TyphographyProps) => React$1.JSX.Element;
+
+declare const Checkbox: React$1.FC<CheckboxProps>;
+
+interface IInputValidationProps {
+  /**
+   * Set validation message
+   */
+  message?: string | undefined;
+  /**
+   * Optional for additional classes
+   */
+  additionalClasses?: string | undefined;
+}
+/**
+ * Primary UI component for user interaction
+ */
+declare const InputValidation: React$1.FC<InputValidationProps>;
 
 /**
  * Primary UI component for user interaction
  */
 declare const Input: FC<HookFormsInputProps>;
 
-export { Button, Input, Typhography };
+/**
+ * Primary UI component for user interaction
+ */
+declare const Label: React$1.FC<LabelProps>;
+
+/**
+ * Primary UI component for user interaction
+ */
+declare const Select: React$1.FC<SelectProps>;
+
+type InputType = "text" | "email" | "password" | "name";
+interface IInputProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * Set Input type
+   */
+  type?: InputType;
+  /**
+   * Set Input name
+   */
+  name: string;
+  /**
+   * Set the Label Type
+   */
+  labelType?: "default" | "black" | "smallSelect";
+  /**
+   * Set Input label name
+   */
+  label?: string | undefined;
+  /**
+   * Ser Error message
+   */
+  error?: string;
+  /**
+   * Set Wrapper classes, new classes will overide the existing default classes
+   */
+  wrapperClass?: string | undefined;
+  /**
+   * Optional for additional classes
+   */
+  additionalClasses?: string | undefined;
+  /**
+   * Enable read only
+   */
+  readonly?: boolean;
+  /**
+   * LabelClasses
+   */
+  labelClasses?: string;
+  /**
+   * Set label only
+   */
+  onlyLabel?: boolean;
+}
+/**
+ * Primary UI component for user interaction
+ */
+declare const Textarea: React$1.FC<InputProps>;
+
+export {
+  Button,
+  Checkbox as CheckBox,
+  Input,
+  InputValidation,
+  Label,
+  Select,
+  Textarea,
+  Typhography,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dfh-ui-library",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "",
   "scripts": {
     "rollup": "rollup -c --bundleConfigAsCjs",
@@ -16,14 +16,16 @@
     "@babel/preset-typescript": "^7.23.3",
     "@rollup/plugin-sucrase": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-docs": "^7.5.3",
-    "@storybook/theming": "^7.5.3",
     "@tailwindcss/forms": "^0.5.7",
     "@types/react": "^18.2.37",
     "autoprefixer": "^10.4.16",
     "classnames": "^2.3.2",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-datepicker": "^4.23.0",
     "react-dom": "^18.2.0",
+    "react-tooltip": "^5.24.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^4.0.0",
     "tailwindcss": "^3.3.5",
@@ -48,7 +50,10 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/theming": "^7.5.3",
     "@types/jest": "^29.5.9",
+    "@types/react-datepicker": "^4.19.3",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "autoprefixer": "^10.4.16",