elseware-ui 1.0.6

package/README.md

@@ -0,0 +1,65 @@
+# elseware UI
+
+# Setup
+
+Install the dependendecies via `npm i`.
+
+# Run Storybook 
+
+To test the components and its features start storybook using `npm run storybook`.
+
+## Build
+
+Run `npm run build` to build the UI framework.
+
+## Publishing to npm
+
+### Publishing a New Version
+
+1. **Update the version number**:
+   - Before publishing a new version, update the version in `package.json` following [semantic versioning](https://semver.org/).
+   - Example:
+     ```json
+     {
+       "name": "elseware-ui",
+       "version": "1.0.1",
+       ...
+     }
+     ```
+
+2. **Build the UI Framework**:
+   - Run the following command to ensure your changes are built and ready to be published:
+     ```bash
+     npm run build
+     ```
+
+3. **Login to npm**:
+   - If you're not already logged in to npm, log in using:
+     ```bash
+     npm login
+     ```
+
+4. **Publish the package**:
+   - To publish the package, run the following command:
+     ```bash
+     npm publish --access public
+     ```
+   - Make sure the package name in `package.json` is unique and does not conflict with other packages on npm.
+
+### Unpublishing an Older Version
+
+If you need to unpublish a specific version of the package:
+
+1. **Unpublish a specific version**:
+   - To unpublish a specific version of your package (e.g., `1.0.0`), run:
+     ```bash
+     npm unpublish elseware-ui@1.0.0
+     ```
+
+2. **Unpublish the entire package**:
+   - If you need to unpublish the entire package, you can run the following command (not recommended for public packages):
+     ```bash
+     npm unpublish elseware-ui --force
+     ```
+
+   **Note:** Be cautious when using `--force` as npm restricts package unpublishing for packages that are older than 72 hours to avoid breaking dependencies.

package/build/components/data-display/avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface AvatarProps {
+    alt?: string;
+    icon?: ReactNode;
+    children?: string;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    shape?: "circle" | "square";
+    size?: "large" | "middle" | "small";
+    src?: string;
+    styles?: string;
+    onClick?: () => void;
+}
+export declare const Avatar: ({ alt, icon, children, variant, shape, size, src, styles, onClick }: AvatarProps) => React.JSX.Element;

package/build/components/data-display/badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface BadgeProps {
+    children?: ReactNode;
+    offset?: [number, number];
+    dot?: boolean;
+    count?: number;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    shape?: "circle" | "square";
+    size?: "default" | "small";
+    showZero?: boolean;
+    styles?: string;
+}
+export declare const Badge: ({ children, offset, dot, count, variant, shape, size, showZero, styles, }: BadgeProps) => React.JSX.Element;

package/build/components/data-display/charts/BarChart.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ChartOptions, ChartData } from "chart.js";
+export interface BarChartProps {
+    data: ChartData<"bar">;
+    options: ChartOptions<"bar">;
+    styles?: string;
+}
+declare const BarChart: React.FC<BarChartProps>;
+export default BarChart;

package/build/components/data-display/charts/LineChart.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ChartData, ChartOptions } from 'chart.js';
+export interface LineChartProps {
+    data: ChartData<'line'>;
+    options?: ChartOptions<'line'>;
+}
+declare const LineChart: React.FC<LineChartProps>;
+export default LineChart;

package/build/components/data-display/charts/PieChart.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ChartData, ChartOptions } from "chart.js";
+export interface PieChartProps {
+    data: ChartData<"pie">;
+    options: ChartOptions<"pie">;
+    styles?: string;
+}
+declare const PieChart: React.FC<PieChartProps>;
+export default PieChart;

package/build/components/data-display/chip/Chip.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ChipProps {
+    label?: string;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    shape?: "circle" | "square";
+    size?: "default" | "small";
+    styles?: string;
+}
+export declare const Chip: ({ label, variant, shape, size, styles, }: ChipProps) => React.JSX.Element;

package/build/components/data-display/image/CloudinaryImage.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface CloudinaryImageProps {
+    publicId?: string;
+    secure?: boolean;
+    alt?: string;
+    styles?: string;
+}
+declare function CloudinaryImage({ publicId, secure, alt, styles }: CloudinaryImageProps): React.JSX.Element;
+export default CloudinaryImage;

package/build/components/data-display/image/Image.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ImageProps {
+    alt?: string;
+    src?: string;
+    height?: number;
+    width?: number;
+    styles?: string;
+}
+export declare const Image: ({ alt, src, height, width, styles, }: ImageProps) => React.JSX.Element;

package/build/components/data-display/image/index.d.ts

@@ -0,0 +1,3 @@
+import { Image } from "./Image";
+import CloudinaryImage from "./CloudinaryImage";
+export { Image, CloudinaryImage };

package/build/components/data-display/info/Info.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface InfoProps {
+    children?: ReactNode;
+    styles?: string;
+}
+declare function Info({ children, styles }: InfoProps): React.JSX.Element;
+export default Info;

package/build/components/data-display/lists/List.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface ListProps {
+    title?: string;
+    children: ReactNode;
+}
+declare function List({ title, children }: ListProps): React.JSX.Element;
+export default List;

package/build/components/data-display/lists/ListItem.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface ListItemWrapperProps {
+    TypographyComponent: ReactNode;
+    x: ReactNode;
+}
+export declare const ListItemWrapper: ({ TypographyComponent, x }: ListItemWrapperProps) => React.JSX.Element;
+export interface ListItemProps {
+    TypographyComponent?: ReactNode;
+    bulletVisible?: boolean;
+    children: ReactNode;
+}
+declare const ListItem: ({ TypographyComponent, bulletVisible, children }: ListItemProps) => React.JSX.Element;
+export default ListItem;

package/build/components/data-display/lists/index.d.ts

@@ -0,0 +1,3 @@
+import List from "./List";
+import ListItem from "./ListItem";
+export { List, ListItem };

package/build/components/data-display/price-tag/PriceTag.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface PriceTagProps {
+    discount?: number;
+    price: number;
+    code?: string;
+    styles?: string;
+}
+declare function PriceTag({ discount, price, code, styles }: PriceTagProps): React.JSX.Element;
+export { PriceTag };

package/build/components/data-display/rating/StarRating.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface StarRatingProps {
+    rating: number;
+    isNumericRatingEnabled?: boolean;
+    reviewAmount?: number;
+    isReviewAmountEnabled?: boolean;
+    styles?: string;
+}
+declare function StarRating({ rating, reviewAmount, isNumericRatingEnabled, isReviewAmountEnabled, styles }: StarRatingProps): React.JSX.Element;
+export default StarRating;

package/build/components/data-display/rating/index.d.ts

@@ -0,0 +1,2 @@
+import StarRating from "./StarRating";
+export { StarRating };

package/build/components/data-display/slider/Slider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface SliderProps {
+    isLoading?: boolean;
+    isSuccess?: boolean;
+    coverArt: string;
+    screenshots: string[];
+}
+declare function Slider({ isLoading, isSuccess, coverArt, screenshots }: SliderProps): React.JSX.Element;
+export default Slider;

package/build/components/data-display/slider/SliderItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface SliderItemProps {
+    img?: string;
+    onClick?: () => void;
+    selected?: boolean;
+    styles?: string;
+}
+declare function SliderItem({ img, onClick, selected, styles }: SliderItemProps): React.JSX.Element;
+export default SliderItem;

package/build/components/data-display/table/Table.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface TableProps {
+    title?: string;
+    headers: {
+        [key: string]: string;
+    };
+    data: any[];
+    isLoading?: boolean;
+    isSuccess?: boolean;
+    isError?: boolean;
+    error?: string;
+    enableSelect: boolean;
+    maxRowCount?: number;
+}
+declare function Table({ title, headers, data, isLoading, isSuccess, isError, error, enableSelect, maxRowCount }: TableProps): React.JSX.Element;
+export default Table;

package/build/components/data-display/table/TableContent.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface TableContentProps {
+    title?: string;
+    headers: {
+        [key: string]: string;
+    };
+    data: any[];
+    enableSelect: boolean;
+    maxRowCount?: number;
+}
+declare function TableContent({ title, headers, data, enableSelect, maxRowCount }: TableContentProps): React.JSX.Element;
+export default TableContent;

package/build/components/data-display/table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TableRowProps {
+    rowData: any;
+    headers: {
+        [key: string]: string;
+    };
+}
+declare function TableRow({ rowData, headers }: TableRowProps): React.JSX.Element;
+export default TableRow;

package/build/components/data-display/typography/chapter/Chapter.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ChapterProps {
+    level: 1 | 2 | 3;
+    children?: string;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    styles?: string;
+    decoration?: "underline" | "overline" | "line-through" | "no-underline";
+    bold?: boolean;
+    italic?: boolean;
+    onClick?: () => void;
+}
+export declare const Chapter: ({ level, children, variant, decoration, bold, italic, styles, onClick }: ChapterProps) => React.JSX.Element;

package/build/components/data-display/typography/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Chapter } from "./chapter/Chapter";
+import { Section } from "./section/Section";
+import { Paragraph } from "./paragraph/Paragraph";
+import { Link } from "./link/Link";
+declare const Typography: {
+    Chapter: ({ level, children, variant, decoration, bold, italic, styles, onClick }: import("./chapter/Chapter").ChapterProps) => import("react").JSX.Element;
+    Section: ({ level, children, variant, decoration, bold, italic, styles, onClick }: import("./section/Section").SectionProps) => import("react").JSX.Element;
+    Paragraph: ({ level, children, variant, decoration, bold, italic, styles, onClick }: import("./paragraph/Paragraph").ParagraphProps) => import("react").JSX.Element;
+    Link: ({ children, href, target, variant, decoration, bold, italic, styles, onClick, }: import("./link/Link").LinkProps) => import("react").JSX.Element;
+};
+export { Typography, Chapter, Section, Paragraph, Link };

package/build/components/data-display/typography/link/Link.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface LinkProps {
+    children?: string;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    styles?: string;
+    decoration?: "underline" | "overline" | "line-through" | "no-underline";
+    bold?: boolean;
+    italic?: boolean;
+    onClick?: () => void;
+}
+export declare const Link: ({ children, href, target, variant, decoration, bold, italic, styles, onClick, }: LinkProps) => React.JSX.Element;

package/build/components/data-display/typography/paragraph/Paragraph.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ParagraphProps {
+    level: 1 | 2 | 3;
+    children?: string;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    styles?: string;
+    decoration?: "underline" | "overline" | "line-through" | "no-underline";
+    bold?: boolean;
+    italic?: boolean;
+    onClick?: () => void;
+}
+export declare const Paragraph: ({ level, children, variant, decoration, bold, italic, styles, onClick }: ParagraphProps) => React.JSX.Element;

package/build/components/data-display/typography/section/Section.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface SectionProps {
+    level: 1 | 2 | 3;
+    children?: string;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    styles?: string;
+    decoration?: "underline" | "overline" | "line-through" | "no-underline";
+    bold?: boolean;
+    italic?: boolean;
+    onClick?: () => void;
+}
+export declare const Section: ({ level, children, variant, decoration, bold, italic, styles, onClick }: SectionProps) => React.JSX.Element;

package/build/components/data-entry/button/Button.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface ButtonProps {
+    type: "button" | "submit";
+    icon?: ReactNode;
+    text?: string;
+    children?: ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+    ghost?: boolean;
+    block?: boolean;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    shape?: "default" | "circle" | "round";
+    size?: "large" | "middle" | "small";
+    styles?: string;
+    onClick?: () => void;
+}
+export declare const Button: ({ type, icon, text, children, loading, disabled, ghost, block, variant, shape, size, styles, onClick, }: ButtonProps) => React.JSX.Element;

package/build/components/data-entry/checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+export interface CheckboxProps {
+    placeholder: string;
+    options: any[];
+}
+declare function Checkbox({ placeholder, options, ...props }: FieldHookConfig<string> & CheckboxProps): React.JSX.Element;
+export default Checkbox;

package/build/components/data-entry/date-selector/DateSelector.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+interface DateSelectorProps {
+    placeholder: string;
+    styles?: string;
+}
+export declare const DateSelector: ({ placeholder, styles, ...props }: FieldHookConfig<string> & DateSelectorProps) => React.JSX.Element;
+export default DateSelector;

package/build/components/data-entry/form/Form.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface FormProps {
+    initialValues?: object;
+    validationSchema?: object;
+    enableReinitialize?: boolean;
+    children?: React.ReactNode;
+    styles?: string;
+    onSubmit: any;
+}
+export declare const Form: ({ initialValues, validationSchema, enableReinitialize, children, styles, onSubmit }: FormProps) => React.JSX.Element;

package/build/components/data-entry/form/FormResponse.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface FormResponseProps {
+    text: string | undefined;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    shape?: "default" | "circle" | "round";
+    size?: "large" | "middle" | "small";
+    styles?: string;
+}
+declare function FormResponse({ text, variant, shape, size, styles }: FormResponseProps): React.JSX.Element;
+export default FormResponse;

package/build/components/data-entry/form/index.d.ts

@@ -0,0 +1,3 @@
+import { Form } from "./Form";
+import FormResponse from "./FormResponse";
+export { Form, FormResponse };

package/build/components/data-entry/image-input/ImageInput.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ImageInputProps {
+    title?: string;
+    uploadDir?: string;
+    onValueChanged?: (imageUrl: string) => void;
+    disableSetValue?: boolean;
+}
+export interface ImageInputRef {
+    handleResetClick: () => void;
+}
+declare const ImageInput: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & import("formik").FieldConfig<string> & ImageInputProps, "ref"> | Omit<React.ClassAttributes<HTMLSelectElement> & React.SelectHTMLAttributes<HTMLSelectElement> & import("formik").FieldConfig<string> & ImageInputProps, "ref"> | Omit<React.ClassAttributes<HTMLTextAreaElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement> & import("formik").FieldConfig<string> & ImageInputProps, "ref">) & React.RefAttributes<ImageInputRef>>;
+export default ImageInput;

package/build/components/data-entry/image-input/ImageView.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ImageViewProps {
+    imageUrl?: string;
+    secure?: boolean;
+    alt?: string;
+}
+declare function ImageView({ imageUrl, secure, alt }: ImageViewProps): React.JSX.Element;
+export default ImageView;

package/build/components/data-entry/input/Input.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+export interface InputProps {
+    type: "text" | "password" | "number";
+    placeholder: string;
+    styles?: string;
+    step?: string;
+}
+export interface PasswordVisibilityTogglerProps {
+    onClick: (visibility: boolean) => void;
+}
+export declare const Input: ({ type, placeholder, styles, step, ...props }: FieldHookConfig<string> & InputProps) => React.JSX.Element;

package/build/components/data-entry/input/InputResponse.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface InputResponseProps {
+    name: string;
+    visibility?: boolean;
+    variant?: "default" | "success" | "danger" | "warning" | "info";
+    styles?: string;
+}
+declare function InputResponse({ name, visibility, variant, styles }: InputResponseProps): React.JSX.Element;
+export default InputResponse;

package/build/components/data-entry/input/index.d.ts

@@ -0,0 +1,3 @@
+import { Input } from "./Input";
+import InputResponse from "./InputResponse";
+export { Input, InputResponse };

package/build/components/data-entry/multi-image-input/MultiImageInput.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+export interface MultiImageInputProps {
+    title?: string;
+    uploadDir?: string;
+    name: string;
+}
+declare function MultiImageInput({ title, uploadDir, ...props }: FieldHookConfig<string[]> & MultiImageInputProps): React.JSX.Element;
+export default MultiImageInput;

package/build/components/data-entry/radio/Radio.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+export interface RadioProps {
+    placeholder: string;
+    options: any[];
+}
+declare function Radio({ placeholder, options, ...props }: FieldHookConfig<string> & RadioProps): React.JSX.Element;
+export default Radio;

package/build/components/data-entry/rating/StarRatingInput.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+export interface StarRatingInputProps {
+    starAmount: number;
+    styles?: string;
+}
+declare function StarRatingInput({ starAmount, styles, ...props }: FieldHookConfig<string> & StarRatingInputProps): React.JSX.Element;
+export default StarRatingInput;

package/build/components/data-entry/rating/index.d.ts

@@ -0,0 +1,2 @@
+import StarRatingInput from "./StarRatingInput";
+export { StarRatingInput };

package/build/components/data-entry/select/Select.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+export interface SelectProps {
+    placeholder: string;
+    options: any[];
+}
+declare function Select({ placeholder, options, ...props }: FieldHookConfig<string> & SelectProps): React.JSX.Element;
+export default Select;

package/build/components/data-entry/switch/Switch.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function Switch(): React.JSX.Element;
+export default Switch;

package/build/components/data-entry/text-area/TextArea.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldHookConfig } from "formik";
+export interface TextAreaProps {
+    placeholder: string;
+    limit: number;
+    styles?: string;
+}
+declare function TextArea({ placeholder, limit, styles, ...props }: FieldHookConfig<string> & TextAreaProps): React.JSX.Element;
+export default TextArea;

package/build/components/feedback/backdrop/Backdrop.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface BackdropProps {
+    children?: React.ReactNode;
+    styles?: string;
+}
+export declare const Backdrop: ({ children, styles }: BackdropProps) => React.JSX.Element;
+export default Backdrop;

package/build/components/feedback/skeleton/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface SkeletonProps {
+    children?: React.ReactNode;
+    styles?: string;
+}
+export declare const Skeleton: ({ children, styles }: SkeletonProps) => React.JSX.Element;

package/build/components/feedback/toast/Toast.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "react-toastify/dist/ReactToastify.css";
+declare function sendToast(data?: {
+    status: string;
+    message: string;
+}): void;
+declare function Toast(): React.JSX.Element;
+export { Toast, sendToast };

package/build/components/feedback/transition/TransitionDropdown.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface TransitionDropdownProps {
+    visibility: any;
+    children?: ReactNode;
+}
+declare function TransitionDropdown({ visibility, children }: TransitionDropdownProps): React.JSX.Element;
+export default TransitionDropdown;

package/build/components/feedback/transition/TransitionFadeIn.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface TransitionDropdownProps {
+    visibility: any;
+    children?: ReactNode;
+}
+declare function TransitionFadeIn({ visibility, children }: TransitionDropdownProps): React.JSX.Element;
+export default TransitionFadeIn;

package/build/components/feedback/transition/index.d.ts

@@ -0,0 +1,7 @@
+import TransitionDropdown from "./TransitionDropdown";
+import TransitionFadeIn from "./TransitionFadeIn";
+declare const Transition: {
+    TransitionDropdown: typeof TransitionDropdown;
+    TransitionFadeIn: typeof TransitionFadeIn;
+};
+export default Transition;

package/build/components/general/content-area/ContentArea.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface ContentAreaProps {
+    children?: ReactNode;
+    styles?: string;
+}
+declare function ContentArea({ children, styles }: ContentAreaProps): React.JSX.Element;
+export default ContentArea;

package/build/components/general/footer-navbar/FooterNavbar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function FooterNavbar(): React.JSX.Element;
+export default FooterNavbar;

package/build/components/general/header-navbar/HeaderNavbar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ReactNode } from "react";
+export interface HeaderNavbarProps {
+    left?: ReactNode;
+    middle?: ReactNode;
+    right?: ReactNode;
+}
+declare function HeaderNavbar({ left, middle, right }: HeaderNavbarProps): React.JSX.Element;
+export default HeaderNavbar;

package/build/components/general/sidebar/Sidebar.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./sidebar.css";
+export interface SidebarProps {
+    data?: any;
+}
+declare function Sidebar({ data }: SidebarProps): React.JSX.Element;
+export default Sidebar;