@hybr1d-tech/charizard 0.3.36

package/README.md

@@ -0,0 +1,44 @@
+# Charizard (Hybr1d UI)
+
+[![npm version](https://badge.fury.io/js/hybr1d-ui.svg)](https://badge.fury.io/js/hybr1d-ui)
+
+A collection of reusable React components for building beautiful user interfaces. This library is
+built using Vite for fast development and Storybook for component documentation and showcase.
+
+## Installation on external repos
+
+To install the library, use pnpm i
+
+```bash
+pnpm i @hybr1d/charizard
+```
+
+To update the library
+
+```bash
+pnpm up @hybr1d/charizard -L
+```
+
+## Publishing to npm
+
+Use the following commands, _follow semver for version upgrade_
+
+```bash
+pnpm version patch
+```
+
+before the PR, the github action will automatically publish it to npm
+
+## Storybook
+
+To start the local storybook playground
+
+```bash
+pnpm storybook
+```
+
+## How to add a new component
+
+- use named export for the component
+- export the prop types
+- add named export in the index.ts file

package/dist/button/Button.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { PositioningOptions } from '@zag-js/popper';
+export declare enum BUTTON_VARIANT {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    GHOST = "ghost",
+    DANGER = "danger",
+    LINK = "link",
+    MINIMAL = "minimal"
+}
+export type ButtonProps = {
+    children: React.ReactNode;
+    variant?: BUTTON_VARIANT;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    type?: 'button' | 'submit' | 'reset';
+    size?: 'xs' | 'sm' | 'md' | 'adapt';
+    customStyles?: React.CSSProperties;
+};
+export declare function Button({ children, variant, disabled, onClick, type, size, customStyles, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Button {
+    var MenuButton: ({ children, variant, disabled, menuItems, onClick, isCustomTrigger, isSingleBtnTrigger, customData, size, actionsDropdownOptions, positionerProps, }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+    var ActionsDropdown: typeof MenuActionsDropdown;
+}
+export type MenuItem = {
+    label: string;
+    iconSrc?: string;
+    onClick: any;
+    filterFn?: any;
+};
+export interface MenuButtonProps {
+    children: React.ReactNode;
+    variant?: BUTTON_VARIANT;
+    disabled?: boolean;
+    menuItems: MenuItem[];
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    isCustomTrigger?: boolean;
+    isSingleBtnTrigger?: boolean;
+    customData?: any;
+    size?: 'sm' | 'md';
+    actionsDropdownOptions?: {
+        setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+    positionerProps?: PositioningOptions;
+}
+export type MenuActionsDropdownProps = {
+    menuItems: MenuItem[];
+    data?: any;
+    variant?: 'regular' | 'small';
+};
+declare function MenuActionsDropdown({ menuItems, data, variant }: MenuActionsDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/button/actions-dropdown.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button.ActionsDropdown>;
+export default meta;
+type Story = StoryObj<typeof Button.ActionsDropdown>;
+export declare const ActionsDropdown: Story;

package/dist/button/button.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;
+export declare const Link: Story;
+export declare const Minimal: Story;

package/dist/button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/button/menu-button.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button.MenuButton>;
+export default meta;
+type Story = StoryObj<typeof Button.MenuButton>;
+export declare const MenuButton: Story;

package/dist/checkbox/Checkbox.d.ts

@@ -0,0 +1,44 @@
+type CheckboxProps = {
+    /**
+     * Checkbox id
+     */
+    id: string;
+    /**
+     * Checkbox name
+     */
+    name: string;
+    /**
+     * children
+     */
+    children: React.ReactNode;
+    /**
+     * handle checkbox clicked
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * custom classes
+     */
+    customClasses?: string;
+    /**
+     * custom styles
+     */
+    customStyles?: React.CSSProperties;
+    /**
+     * error message
+     */
+    errorMsg?: string;
+    /**
+     * Checkbox checked
+     */
+    checked?: boolean;
+    /**
+     * Checkbox indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Checkbox disabled
+     */
+    disabled?: boolean;
+};
+export declare function Checkbox({ id, name, children, onChange, customClasses, customStyles, errorMsg, checked, indeterminate, disabled, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/dist/combo-box/ComboBox.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export type option = {
+    disabled?: boolean;
+    label: string;
+    value: string;
+    listComponent?: React.ReactNode;
+};
+export type ComboboxProps = {
+    value: string;
+    label?: string;
+    isLoading?: boolean;
+    placeholder?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    required?: boolean;
+    disabled?: boolean;
+    defaultOptions?: option[] | [];
+    isAPIFilter?: boolean;
+    onChange?: (text: string) => void;
+    onSelect: (selected?: option) => void;
+    optionsMaxHeight?: string;
+};
+export declare function Combobox({ label, isLoading, required, labelClassName, inputClassName, disabled, defaultOptions, isAPIFilter, onChange, onSelect, placeholder, optionsMaxHeight, value, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/combo-box/combo-box.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Combobox } from './ComboBox';
+declare const meta: Meta<typeof Combobox>;
+export default meta;
+type Story = StoryObj<typeof Combobox>;
+export declare const clientSideSearch: Story;
+export declare const serverSideSearch: Story;
+export declare const disabledCombobox: Story;
+export declare const clientSideSearchWithNoResult: Story;
+export declare const serverSideSearchWithNoResult: Story;

package/dist/combo-box/index.d.ts

@@ -0,0 +1 @@
+export * from './ComboBox';

package/dist/drawer/Drawer.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { FooterButtons } from '../modal/ModalFooter';
+type DrawerProps = {
+    /**
+     * Drawer footer className
+     */
+    footerClassName?: string;
+    /**
+     * Drawer header className
+     */
+    headerClassName?: string;
+    /**
+     * Drawer content className
+     */
+    contentClassName?: string;
+    /**
+     * Drawer is open or not
+     */
+    isOpen: boolean;
+    /**
+     * Callback function when drawer is closed
+     */
+    onClose: () => void;
+    /**
+     * Drawer content
+     */
+    children: React.ReactNode;
+    /**
+     * Drawer title
+     */
+    title?: string;
+    /**
+     * Custom drawer header
+     */
+    customHeader?: React.ReactNode;
+    /**
+     * Custom drawer footer
+     */
+    customFooter?: React.ReactNode;
+    /**
+     * Drawer size
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
+    /**
+     * Show backdrop or not
+     */
+    showBackdrop?: boolean;
+    /**
+     * Show header or not
+     */
+    showHeader?: boolean;
+    /**
+     * Show footer or not
+     */
+    showFooter?: boolean;
+    /**
+     * footer buttons to show
+     */
+    buttons?: FooterButtons;
+    footerAddon?: React.ReactNode;
+    /**
+     * show header border or not
+     */
+    showHeaderBorder?: boolean;
+    /**
+     * Drawer position
+     */
+    drawerPosition?: 'left' | 'right';
+};
+export declare function Drawer({ isOpen, onClose, children, title, customHeader, customFooter, size, showBackdrop, showHeader, showFooter, buttons, footerAddon, headerClassName, contentClassName, footerClassName, showHeaderBorder, drawerPosition, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './Drawer';

package/dist/empty-state/EmptyState.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type EmptyStateProps = {
+    icon: string;
+    title: string;
+    desc?: string;
+    flexDir?: 'row' | 'column';
+    btnText?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+/**
+ * adapts to parent's width and height
+ */
+export declare function EmptyState({ icon, title, desc, flexDir, btnText, onClick, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/empty-state/empty-state.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EmptyState } from './EmptyState';
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+export declare const Default: Story;

package/dist/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './EmptyState';