dfh-ui-library 1.1.2 → 1.1.4

package/dist/esm/types/components/Button/Button.handler.d.ts

@@ -1 +1 @@
-export declare const handleButtonClasses: (variants?: string | undefined) => "text-16s h-[52px] text-white border-solid border-primary-500 bg-primary-500" | "text-16s h-[52px] text-primary-500 border border-solid border-primary-500 bg-white" | "text-14s h-9 text-white border-solid border-primary-500 bg-primary-500" | "text-14s h-9 text-primary-500 border border-solid border-primary-500 bg-white" | "text-14s h-7 text-white border-solid border-primary-500 bg-primary-500" | "text-14s h-7 text-primary-500 border border-solid border-primary-500 bg-white" | "text-16s h-11 text-primary-500 border border-solid border-primary-500 bg-white" | "text-16s h-11 text-white border-solid border-primary-500 bg-primary-500" | undefined;
+export declare const handleButtonClasses: (variants?: string | undefined) => "text-16s h-[52px] text-white border-solid border-primary-500 bg-[#333333]" | "text-16s h-[52px] text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-14s h-9 text-white border-solid border-primary-500 bg-[#333333]" | "text-14s h-9 text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-14s h-7 text-white border-solid border-primary-500 bg-[#333333]" | "text-14s h-7 text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-16s h-11 text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-16s h-11 text-white border-solid border-primary-500 bg-[#333333]" | undefined;

package/dist/esm/types/components/Button/Button.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/esm/types/components/FormElements/Input/Input.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { HookFormsInputProps } from "../../../shared/models/components/base.model";
+/**
+ * Primary UI component for user interaction
+ */
+declare const Input: FC<HookFormsInputProps>;
+export default Input;

package/dist/esm/types/components/FormElements/Input/Input.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/esm/types/components/FormElements/Input/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Input";

package/dist/esm/types/components/Media/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IconProps } from "../../../shared/models/components/base.model";
+/**
+ * Primary UI component for user interaction
+ *
+ * Used SVG for Icons, All icons are exported in the following file path
+ *
+ * File Path : "src/components/core/Media/Icons/Icons.tsx"
+ */
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/esm/types/components/Media/Icon/Icon.handler.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const handleIconColor: (_iconColor: string) => string;
+export declare const handleIconHoverColor: (_iconHoverColor: string | undefined) => string;
+export declare const handleIconTYpes: (_iconType: string | undefined) => React.JSX.Element | undefined;

package/dist/esm/types/components/Media/Icons/Icons.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const HomeIcon: () => React.JSX.Element;
+export declare const EmailIcon: () => React.JSX.Element;
+export declare const RightArrowIcon: () => React.JSX.Element;

package/dist/esm/types/components/Typhography/Typhography.handler.d.ts

@@ -1 +1 @@
-export declare const handleFontTypes: (_type: string | undefined) => "text-12s font-medium" | "text-12s font-semibold" | "text-12s font-extrabold" | "text-14s font-medium" | "text-14s font-semibold" | "text-14s font-extrabold" | "text-28s font-medium" | "text-28s font-semibold" | "text-28s font-extrabold" | "text-10s font-medium" | "text-10s font-semibold" | "text-10s font-extrabold" | undefined;
+export declare const handleFontTypes: (_type: string | undefined) => "text-12s font-medium" | "text-12s font-semibold" | "text-12s font-extrabold" | "text-14s font-medium" | "text-2xl font-semibold leading-6 text-[#333333]" | "text-xl font-semibold leading-6 text-[#333333]" | "text-14s font-semibold" | "text-14s font-extrabold" | "text-28s font-medium" | "text-28s font-semibold" | "text-28s font-extrabold" | "text-10s font-medium" | "text-10s font-semibold" | "text-10s font-extrabold" | "text-base font-normal leading-[1.875rem] text-[#333333] opacity-50" | "text-base text-xl leading-[1.875rem] text-[#333333]" | undefined;

package/dist/esm/types/components/index.d.ts

@@ -1,3 +1,4 @@
 import "../index.css";
 export { default as Button } from "./Button";
 export { default as Typhography } from "./Typhography";
+export { default as Input } from "./FormElements/Input";

package/dist/esm/types/shared/configs/componentsClasses.d.ts

@@ -0,0 +1,83 @@
+export declare const Classes: {
+    wrapper: {
+        default: string;
+    };
+    typho: {
+        white: string;
+        black: string;
+        blue: string;
+        gray: string;
+        gray720: string;
+        black650: string;
+        inherit: string;
+    };
+    heading: {
+        white: string;
+        gray: string;
+        dark: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+    message: {
+        common: string;
+        error: string;
+        success: string;
+        warning: string;
+        neutral: string;
+        highlight: string;
+    };
+    card: {
+        common: string;
+        lightGray: string;
+        lightGrayHalf: string;
+        gray: string;
+        white: string;
+        black: string;
+        whiteBorder: string;
+    };
+    button: {
+        default: string;
+        common: string;
+        disabled: string;
+        blackLarge: string;
+        blackMedium: string;
+        blackMediumH36: string;
+        blackSmall: string;
+        blackExtraSmall: string;
+        sentButton: string;
+        smallButtonGray: string;
+    };
+    label: {
+        default: string;
+        black: string;
+        blackSmall: string;
+        smallSelect: string;
+    };
+    input: {
+        default: string;
+        readonly: string;
+        wrapper: string;
+        error: string;
+        large: string;
+    };
+    inputValidation: {
+        error: string;
+    };
+    select: {
+        default: string;
+        small: string;
+        wrapper: string;
+        error: string;
+    };
+    image: {
+        default: string;
+    };
+    icon: {
+        white: string;
+        black: string;
+    };
+};

package/dist/esm/types/shared/models/components/base.model.d.ts

@@ -1,4 +1,5 @@
-import { AdditionalClassesProp, ChildrenProp, IconTypeProp, AlignmentType, OnClickEventProps, TyphoTypes, TyphoComponents } from "./common.model";
+import { InputHTMLAttributes } from "react";
+import { AdditionalClassesProp, ChildrenProp, IconTypeProp, AlignmentType, OnClickEventProps, TyphoTypes, TyphoComponents, IconHoverColorTypes } from "./common.model";
 export interface ButtonProps extends ChildrenProp, AdditionalClassesProp, IconTypeProp, OnClickEventProps {
     /**
      * Set the button type
@@ -44,3 +45,90 @@ export interface TyphographyProps extends ChildrenProp, AdditionalClassesProp {
     color?: string;
     onClick?: () => void;
 }
+export interface IconProps extends AdditionalClassesProp, IconTypeProp {
+    /**
+     * Optional | Set Icon Text
+     */
+    iconText?: string;
+    /**
+     * Optional | Set Icon hover color
+     */
+    iconHoverColor?: IconHoverColorTypes;
+    /**
+     * Optional | Set Icon container classes
+     */
+    iconContainerClasses?: string | undefined;
+    /**
+     * Optional | Set Icon Text classes
+     */
+    iconTextClasses?: string | undefined;
+    onClick?: any;
+}
+type InputType = "text" | "email" | "password" | "name" | "date";
+export 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;
+}
+export {};

package/dist/esm/types/shared/models/components/common.model.d.ts

@@ -2,7 +2,7 @@
 export type AlignmentType = "center" | "left" | "right";
 export type IconColorTypes = "white" | "black-900" | "gray-220" | "gray-720" | "inherit" | "gray-300" | string;
 export type IconHoverColorTypes = "white" | "black-900" | "gray-220" | "inherit";
-export type IconType = "Home" | "Info" | "RightArrow" | "DropDown" | "DropDownArrow" | "WhiteArrow" | "TrashIcon" | "AddNewitemIcon" | "OkIcon" | "EditIcon" | "Delete" | "AddIcon" | "RemoveTrashIcon" | "RoundTickIcon" | "ValidationWarningIcon" | "WarningIcon" | "NeturalIcon" | "SuccessIcon" | string;
+export type IconType = "Home" | "Info" | "Email" | "RightArrow" | "DropDown" | "DropDownArrow" | "WhiteArrow" | "TrashIcon" | "AddNewitemIcon" | "OkIcon" | "EditIcon" | "Delete" | "AddIcon" | "RemoveTrashIcon" | "RoundTickIcon" | "ValidationWarningIcon" | "WarningIcon" | "NeturalIcon" | "SuccessIcon" | string;
 export interface ChildrenProp {
     /**
      * Se the child node and element;
@@ -34,5 +34,6 @@ export interface DataTestIdProp {
 export interface OnClickEventProps {
     onClick?: () => void;
 }
-export type TyphoTypes = "h1" | "h1Bold" | "h1ExtraBold" | "h2" | "h2Bold" | "h2ExtraBold" | "h10" | "h10Bold" | "h10ExtraBold" | "h6" | "h6Bold" | "h6ExtraBold";
+export type TyphoTypes = "h1" | "h1Bold" | "h1ExtraBold" | "h2" | "h2Bold" | "h2ExtraBold" | "h10" | "h10Bold" | "h10ExtraBold" | "h6" | "h6Bold" | "h6ExtraBold" | "header1" | "header2" | "label1" | "label2";
 export type TyphoComponents = "p" | "span" | "em" | "div" | undefined;
+export type MessageTypes = "warning" | "success" | "error" | "disabled" | "highlight" | "nutral";

package/dist/esm/types/shared/utilities/images.d.ts

@@ -0,0 +1,3 @@
+export declare const Images: {};
+export declare const Flags: {};
+export declare const LargeIcons: {};

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import React$1 from 'react';
+import React$1, { InputHTMLAttributes, FC } from 'react';
 
 type AlignmentType = "center" | "left" | "right";
 type IconColorTypes = "white" | "black-900" | "gray-220" | "gray-720" | "inherit" | "gray-300" | string;
-type IconType = "Home" | "Info" | "RightArrow" | "DropDown" | "DropDownArrow" | "WhiteArrow" | "TrashIcon" | "AddNewitemIcon" | "OkIcon" | "EditIcon" | "Delete" | "AddIcon" | "RemoveTrashIcon" | "RoundTickIcon" | "ValidationWarningIcon" | "WarningIcon" | "NeturalIcon" | "SuccessIcon" | 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;
@@ -29,7 +29,7 @@ interface AdditionalClassesProp {
 interface OnClickEventProps {
     onClick?: () => void;
 }
-type TyphoTypes = "h1" | "h1Bold" | "h1ExtraBold" | "h2" | "h2Bold" | "h2ExtraBold" | "h10" | "h10Bold" | "h10ExtraBold" | "h6" | "h6Bold" | "h6ExtraBold";
+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 {
@@ -77,6 +77,73 @@ interface TyphographyProps extends ChildrenProp, AdditionalClassesProp {
     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;
+}
 
 declare const Button: ({ type, isDisabled, buttonLabel, iconType, iconColor, iconAlignment, isIconEnabled, variants, additionalClasses, iconClass, onClick, }: ButtonProps) => React$1.JSX.Element;
 
@@ -85,4 +152,9 @@ declare const Button: ({ type, isDisabled, buttonLabel, iconType, iconColor, ico
  */
 declare const Typhography: ({ type, component, color, additionalClasses, children, onClick, ...rest }: TyphographyProps) => React$1.JSX.Element;
 
-export { Button, Typhography };
+/**
+ * Primary UI component for user interaction
+ */
+declare const Input: FC<HookFormsInputProps>;
+
+export { Button, Input, Typhography };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "dfh-ui-library",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "",
   "scripts": {
     "rollup": "rollup -c --bundleConfigAsCjs",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "jest"
   },
   "author": "DFH dev",
   "license": "ISC",
@@ -44,19 +45,29 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-webpack5": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.9",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.0.1",
+    "eslint": "^8.54.0",
+    "eslint-plugin-react": "^7.33.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.31",
+    "postcss-cssnext": "^3.1.1",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3",
     "rollup": "^4.5.0",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.5.3",
     "sugarss": "^4.0.1",
-    "vite": "^5.0.0",
-    "postcss": "^8.4.31",
-    "postcss-cssnext": "^3.1.1",
-    "postcss-import": "^15.1.0",
-    "postcss-loader": "^7.3.3"
+    "vite": "^5.0.0"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",