@hexure/ui 1.0.3 → 1.1.0

package/dist/index.d.ts

@@ -0,0 +1,323 @@
+import React, { FC, ReactNode } from 'react';
+
+interface AccessibleProps {
+    /** Set the css id for the main wrapping html element */
+    id?: string;
+    /** Set the css class for the main wrapping html element */
+    class?: string;
+    /** Set the name attrbute on the main wrapping html element */
+    name?: string;
+    /** Set the role of the main wrapping html element. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques */
+    role?: string;
+    /** Set the order in which this element is focused. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex */
+    tabIndex?: number;
+    /** Set a label for an interactive element. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
+    ariaLabel?: string;
+}
+
+interface AccordionProps extends AccessibleProps {
+    title?: string;
+    /** Define the content to be displayed */
+    children: ReactNode;
+    /** Show or hide the accordion content */
+    open: boolean;
+    /** Method to call when the header is clicked */
+    onClick: (e?: any) => void;
+}
+declare const Accordion: FC<AccordionProps>;
+
+interface ButtonProps$3 {
+    children: string;
+    icon?: string;
+    onClick: (e?: any) => void;
+    tabIndex?: number;
+}
+interface ActionDialogProps extends AccessibleProps {
+    /** It is used to give title. */
+    title?: string;
+    /** It is used to give description. */
+    description?: string;
+    primaryButton?: ButtonProps$3;
+    secondaryButton?: ButtonProps$3;
+    onClose: (e?: any) => void;
+}
+declare const ActionDialog: FC<ActionDialogProps>;
+
+interface AlertProps extends AccessibleProps {
+    type?: 'info' | 'error' | 'warning' | 'success';
+    /** It is used to add title to alert. */
+    title: string;
+    /** It is used to add description to alert. */
+    description: string;
+}
+declare const Alert: FC<AlertProps>;
+
+interface ButtonProps$2 {
+    children: string;
+    onClick: (e?: any) => void;
+    type?: 'primary' | 'secondary';
+    icon?: string;
+}
+interface BulkActionBarProps extends AccessibleProps {
+    actions?: ButtonProps$2[];
+    errorMsg?: string;
+    onClear: (e?: any) => void;
+    selectedCount?: number;
+}
+declare const BulkActionBar: FC<BulkActionBarProps>;
+
+interface ButtonProps$1 extends AccessibleProps {
+    /** Define the button label. */
+    children?: string;
+    /** If enabled, the button will be disabled */
+    disabled?: boolean;
+    /** The SVG path of the icon to show */
+    icon?: string;
+    margin?: string;
+    /** Prop to pass a that fires when the user does a click. */
+    onClick?: (e?: any) => void;
+    /** If enabled, the small button format will be used. */
+    small?: boolean;
+    /** Define which button type to display. By default the Primary button will be used.  */
+    type?: 'primary' | 'secondary';
+}
+declare const Button: FC<ButtonProps$1>;
+
+interface CheckboxProps extends AccessibleProps {
+    /** It is used to give label to checkbox. */
+    children?: string;
+    /** It is used to disable checkbox. */
+    disabled?: boolean;
+    /** If it's value id true then checkbox is default checked. */
+    checked?: boolean;
+    /** It is used to change value of checkbox. */
+    onChange: (e?: any) => void;
+}
+declare const Checkbox: FC<CheckboxProps>;
+
+interface OptionProps$3 {
+    label?: string;
+    value: string | number;
+}
+interface ChecklistProps extends AccessibleProps {
+    disabled?: boolean;
+    onChange: (e: any) => void;
+    options: OptionProps$3[];
+    selected: (string | number)[];
+    showSelectAll?: boolean;
+}
+declare const Checklist: FC<ChecklistProps>;
+
+interface CopyProps extends AccessibleProps {
+    /** Set the text to be displayed */
+    children: string;
+    align?: string;
+    /** Set the margin on the element */
+    margin?: string;
+    /** Set the padding on the element */
+    padding?: string;
+    /** Set the type of copy to display */
+    type?: 'default' | 'bold' | 'italic' | 'underline' | 'line-through' | 'small';
+}
+declare const Copy: FC<CopyProps>;
+
+interface ActionProps {
+    label: string;
+    onClick: (e?: any) => void;
+}
+interface FieldProps extends AccessibleProps {
+    action?: ActionProps;
+    margin?: string;
+    required?: boolean;
+    /** Tie the field label to the nested input. This should match the name defined on the input */
+    htmlFor?: string;
+    /** It is used to pass child nodes, string values and number as child components. */
+    children: ReactNode;
+    /** It is used to show error message when an error is occurred. */
+    validationText?: string;
+    /** It is used to give label to input. */
+    label: string;
+    /** It is used to give description to input. */
+    description?: string;
+}
+declare const Field: FC<FieldProps>;
+
+interface HeadingProps extends AccessibleProps {
+    /** Toggle between bold and normal font weights */
+    bold?: boolean;
+    /** Set the text to be displayed */
+    children: string;
+    /** Set the margin on the element */
+    margin?: string;
+    /** Set the padding on the element */
+    padding?: string;
+    /** Set the type of heading to display: primary, secondary, tertiary  */
+    type?: 'primary' | 'secondary' | 'tertiary';
+}
+declare const Heading: FC<HeadingProps>;
+
+interface InputProps extends AccessibleProps {
+    format?: 'phone' | 'currency' | 'currency_decimal' | 'ssn';
+    height?: string;
+    invalid?: boolean;
+    max?: number;
+    maxLength?: number;
+    min?: number;
+    onBlur?: (e?: any) => void;
+    onChange?: (e?: any) => void;
+    onKeyDown?: (e?: any) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    step?: number;
+    type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea';
+    value?: string;
+}
+declare const Input: FC<InputProps>;
+
+interface ButtonProps {
+    disabled: boolean;
+    children: string;
+    icon?: string;
+    onClick: (e?: any) => void;
+    tabIndex?: number;
+}
+interface ModalProps extends AccessibleProps {
+    primaryButton: ButtonProps;
+    secondaryButton: ButtonProps;
+    tertiaryButton: ButtonProps;
+    maxWidth?: string | number;
+    /** It is used to pass child nodes, string values and number as child components. */
+    children: ReactNode;
+    /** It is used to give title. */
+    title: string;
+    /**  It is used to close modal. */
+    onClose: (e?: any) => void;
+}
+declare const Modal: FC<ModalProps>;
+
+interface OptionProps$2 {
+    label?: string;
+    value: string | number;
+}
+interface MultiSelectProps extends AccessibleProps {
+    readOnly?: boolean;
+    displayCount?: number;
+    invalid?: boolean;
+    onChange: (e?: any) => void;
+    options?: OptionProps$2[];
+    selected: (string | number)[];
+    showSelectAll?: boolean;
+}
+declare const MultiSelect: FC<MultiSelectProps>;
+
+interface PaginationProps extends AccessibleProps {
+    currentPage: number;
+    onClick: (e?: any) => void;
+    pageCount: number;
+}
+declare const Pagination: FC<PaginationProps>;
+
+interface RadioProps extends AccessibleProps {
+    /** It is used to give label to radio. */
+    children: string | number;
+    /** It is used to disable radio. */
+    disabled?: boolean;
+    /** If it's value id true then radio is default checked. */
+    checked?: boolean;
+    /** It is used to change value of radio. */
+    onChange: (e?: any) => void;
+    value: string | number;
+}
+declare const Radio: FC<RadioProps>;
+
+interface OptionProps$1 {
+    label?: string;
+    value: string | number;
+}
+interface RadioListProps extends AccessibleProps {
+    disabled?: boolean;
+    onChange: (e: any) => void;
+    options: OptionProps$1[];
+    value: string;
+}
+declare const RadioList: FC<RadioListProps>;
+
+interface OptionProps {
+    /** It is used to give label to option. */
+    label: string;
+    /** It is used to give value to option. */
+    value: string | number;
+}
+interface OptionGroupProps {
+    options: OptionProps[];
+    label: string;
+}
+interface SelectProps extends AccessibleProps {
+    /** It is used to give options from which value is selected. */
+    options?: OptionProps[];
+    optionGroups?: OptionGroupProps[];
+    placeholder?: string;
+    /** If it's value is true then select is disabled. */
+    readOnly?: boolean;
+    /** It is used to show error messages when it's value is false. */
+    invalid?: boolean;
+    /** It is used to read value for selected option. */
+    value: string;
+    /** It is used to change value when an option is clicked. */
+    onChange: (e: any) => void;
+}
+declare const Select: FC<SelectProps>;
+
+interface RowObject {
+    [key: string]: any;
+}
+interface ColumnProps {
+    id: string;
+    isSortable?: boolean;
+    label: React.ReactNode;
+    render?: (row: RowObject) => void;
+    sortBy?: (row: RowObject) => void;
+    width?: string | number;
+}
+interface TableProps extends AccessibleProps {
+    columns: ColumnProps[];
+    data: object[];
+    sortBy?: string;
+    sortDirection?: string;
+    hideHeaders?: boolean;
+    onRowClick?: (e?: any) => void;
+    onSortChange?: (e?: any) => void;
+    tableLayout?: string;
+}
+declare const Table: FC<TableProps>;
+
+interface TabProps extends AccessibleProps {
+    label: string;
+    onClick: (e?: any) => void;
+    isActive?: boolean;
+}
+interface TabsProps extends AccessibleProps {
+    tabs: TabProps[];
+}
+declare const Tabs: FC<TabsProps>;
+
+interface TagProps extends AccessibleProps {
+    /** It is used to select tag-type either default or removable. */
+    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK';
+    /** It is used to give label to tag. */
+    children: string | number;
+    onClick?: (e?: any) => void;
+    /** It is callback function called when user wants to close the tag. */
+    removable?: boolean;
+}
+declare const Tag: FC<TagProps>;
+
+interface ToggleProps extends AccessibleProps {
+    /** It is used to check whether Toggle is checked or not */
+    on: boolean;
+    /** Pass a callback then fires when user change value */
+    onClick: (e?: any) => void;
+}
+declare const Toggle: FC<ToggleProps>;
+
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, Field, Heading, Input, Modal, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hexure/ui",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A library of shared UI components used within Hexure products.",
   "scripts": {
-    "rollup": "rollup -c",
+    "rollup": "rollup -c rollup.config.mjs",
     "test": "jest",
     "prettier": "prettier --write src/",
     "eslint": "eslint src/",
@@ -23,10 +23,10 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-eslint": "^9.0.4",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-controls": "^6.5.16",
     "@storybook/addon-viewport": "^6.5.16",
@@ -55,8 +55,8 @@
     "prettier": "^2.8.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "rollup": "^3.12.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup": "^3.23.0",
+    "rollup-plugin-dts": "^5.3.0",
     "typescript": "^4.8.2"
   },
   "main": "dist/cjs/index.js",
@@ -69,15 +69,18 @@
     "@mdi/font": "^7.0.96",
     "@mdi/js": "^7.1.96",
     "@mdi/react": "^1.6.1",
-    "@storybook/client-api": "^6.5.14",
-    "lodash": "github:lodash/lodash",
     "moment": "^2.29.4",
     "numeral": "^2.0.6",
     "styled-components": "^5.3.6"
   },
   "peerDependencies": {
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "@mdi/font": "^7.0.96",
+    "@mdi/js": "^7.1.96",
+    "@mdi/react": "^1.6.1",
+    "moment": "^2.29.4",
+    "numeral": "^2.0.6"
   },
   "repository": {
     "type": "git",