dfh-ui-library 1.0.0

package/dist/esm/types/stories/Header.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './header.css';
+type User = {
+    name: string;
+};
+interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => React.JSX.Element;
+export {};

package/dist/esm/types/stories/Header.stories.d.ts

@@ -0,0 +1,6 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: any;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/esm/types/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/esm/types/stories/Page.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import React$1 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;
+interface ChildrenProp {
+    /**
+     * Se the child node and element;
+     */
+    children?: React.ReactNode;
+}
+interface IconTypeProp {
+    /**
+     * Set icon type
+     */
+    iconType?: IconType;
+    /**
+     * Set the Icon Color
+     */
+    iconColor?: IconColorTypes;
+}
+interface AdditionalClassesProp {
+    /**
+     * Optional | Set the additional classes
+     */
+    additionalClasses?: string | undefined;
+}
+interface OnClickEventProps {
+    onClick?: () => void;
+}
+type TyphoTypes = "h1" | "h1Bold" | "h1ExtraBold" | "h2" | "h2Bold" | "h2ExtraBold" | "h10" | "h10Bold" | "h10ExtraBold" | "h6" | "h6Bold" | "h6ExtraBold";
+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 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;
+}
+
+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;
+
+export { Button, Typhography };

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "dfh-ui-library",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "DFH dev",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@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",
+    "classnames": "^2.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-scss": "^4.0.0",
+    "tailwindcss": "^3.3.5",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.3.5",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.31",
+    "postcss-cssnext": "^3.1.1",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/cli": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.1",
+    "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",
+    "sass": "^1.69.5",
+    "storybook": "^7.5.3",
+    "sugarss": "^4.0.1",
+    "vite": "^5.0.0"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts"
+}