@leapdevuk/component-toolbox 0.0.3

package/README.md

@@ -0,0 +1,81 @@
+# LEAP Dev UK - Component Toolbox
+
+### The LEAP Dev UK Component Toolbox.
+
+## Node vesion
+
+We are using Node version 20.10.0 (Latest LTS). See https://nodejs.org/en/about/previous-releases
+
+    node -v
+
+### To install, upgrade, build, format, lint and run the unit tests, you will need to execute the following within a terminal window.
+
+## Install packages
+
+Install the dependencies/packages.
+
+    npm install
+
+## Upgrade packages
+
+Upgrade the dependencies/packages.
+
+    npm upgrade
+
+## Formatting
+
+To format the code and follow/enforce a consistent coding style.
+
+    npm run format
+
+## Linting
+
+To lint the code and perform automated checking for programmatic and stylistic errors.
+
+    npm run lint
+
+## Unit Tests
+
+To run the unit tests and check/validate the component is performing as expected.
+
+    npm run test
+
+To run a single test, for example the DatePicker.
+
+    npm run test -- DatePicker
+
+## Build
+
+To build the component toolbox as a package.
+
+    npm run build
+
+## Publish to NPM
+
+To publish the component toolbox package to the NPM account (currently public).
+
+    npm publish --access public
+
+## Installing locally
+
+To use / test locally in an application.
+
+    npm pack
+
+This will create a 'leapdevuk-component-toolbox-{version}.tgz' file which can be added as a dependency in the applications _package.json_ file.
+
+    "dependencies": {
+        ...
+        "@leapdevuk/component-toolbox": "file:../../leap-component-toolbox/leapdevuk-component-toolbox-0.0.1.tgz",
+    	...
+    }
+
+## Installing into an application
+
+To use in an application, add package to dependencies.
+
+    "dependencies": {
+        ...
+        "@leapdevuk/component-toolbox": "VERSION_NUMBER",
+    	...
+    }

package/dist/components/appbar/AppBar.d.ts

@@ -0,0 +1,9 @@
+import { FC, MouseEventHandler, ReactNode } from 'react';
+interface IAppBarProps {
+    centerComponents?: ReactNode;
+    leftComponents?: ReactNode;
+    onClickHelp?: MouseEventHandler<HTMLButtonElement>;
+    rightComponents?: ReactNode;
+}
+declare const LCTAppBar: FC<IAppBarProps>;
+export default LCTAppBar;

package/dist/components/appbar/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTAppBar } from './AppBar';

package/dist/components/button/Button.d.ts

@@ -0,0 +1,11 @@
+import { MouseEventHandler, ReactNode } from 'react';
+interface IProps {
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    primary?: boolean;
+    size?: "small" | "medium" | "large";
+    children: string | ReactNode;
+    variant?: "contained" | "outlined" | "text";
+}
+declare const LCTButton: ({ disabled, onClick, primary, size, children, variant, ...props }: IProps) => import("react/jsx-runtime").JSX.Element;
+export default LCTButton;

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTButton } from './Button';

package/dist/components/currencyinput/CurrencyInput.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface ICurrencyInputProps {
+    allowNull?: boolean;
+    autoFocus?: boolean;
+    decimalScale?: number;
+    disabled?: boolean;
+    id?: string;
+    onUpdate?: (value: any) => void;
+    placeholder?: string;
+    prefix?: string;
+    size?: "medium" | "small";
+    value?: number | null;
+    width?: number;
+}
+declare const LCTCurrencyInput: React.FC<ICurrencyInputProps>;
+export default LCTCurrencyInput;

package/dist/components/currencyinput/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTCurrencyInput } from './CurrencyInput';

package/dist/components/datepicker/DatePicker.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { Locale } from 'date-fns';
+interface IValidationError {
+    keepButton: boolean;
+    message: string;
+    originalValue?: string | null;
+}
+interface ICustomActonProps {
+    label: string;
+    value: Date;
+}
+interface IAdditionalActionsProps {
+    showToday?: boolean;
+    showClear?: boolean;
+    customActions?: ICustomActonProps[];
+}
+interface IDatePickerProps {
+    disabled?: boolean;
+    fullWidth?: boolean;
+    isUTC?: boolean;
+    startOfDate?: boolean;
+    endOfDate?: boolean;
+    onUpdate: (value: string | null) => void;
+    additionalActions?: IAdditionalActionsProps;
+    size?: "small" | "medium";
+    validate30Days?: boolean;
+    validate?: (value?: any | null) => IValidationError | null;
+    value: string | null;
+    locale?: Locale;
+}
+declare const LCTDatePicker: FC<IDatePickerProps>;
+export default LCTDatePicker;

package/dist/components/datepicker/calendar-icon.d.ts

@@ -0,0 +1,2 @@
+declare function CalendarIcon(): import("react/jsx-runtime").JSX.Element;
+export default CalendarIcon;

package/dist/components/datepicker/index.d.ts

@@ -0,0 +1,6 @@
+export { default as LCTDatePicker } from './DatePicker';
+export { formatDate as lctFormatDate } from './utils';
+export { getLocalDisplayFormattedDate as lctGetLocalDisplayFormattedDate } from './utils';
+export { getLocalDisplayFormattedDateTime as lctGetLocalDisplayFormattedDateTime } from './utils';
+export { getLocale as lctGetLocale } from './utils';
+export { parseDate as lctParseDate } from './utils';

package/dist/components/datepicker/utils.d.ts

@@ -0,0 +1,18 @@
+import { LeapContext } from '@leapdev/leap-host';
+import { Locale } from 'date-fns';
+export declare const defaultDateFormat = "dd/MM/yyyy";
+export declare const defaultDateTimeFormat = "yyyy-MM-dd HH:mm:ss";
+export declare const minDateAsObject: Date;
+export declare const timezone: string;
+export declare const utcFormat = "yyyy-MM-dd HH:mm:ss";
+export declare const minDate: string;
+export declare const oneWeek: string;
+export declare const today: string;
+export declare const tomorrow: string;
+export declare const twoWeeks: string;
+export declare const defaultDate: (formatString?: string) => string;
+export declare const formatDate: (date?: Date | null, startOfDate?: boolean, endOfDate?: boolean, isUTC?: boolean) => string | null;
+export declare const parseDate: (date: any, formatString?: string, parseKeyboardVal?: boolean) => string | null;
+export declare const getLocale: (leapContext?: LeapContext) => Locale | undefined;
+export declare const getLocalDisplayFormattedDate: (value?: string | Date, locale?: Locale) => string;
+export declare const getLocalDisplayFormattedDateTime: (value?: string | Date) => string;

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+interface IDialogProps {
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    closeIcon?: boolean;
+    hideOverflow?: boolean;
+    isOpen: boolean;
+    key?: React.Key | null | undefined;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+    minWidth?: number;
+    onClose?: () => void;
+    showWarningIcon?: boolean;
+    title: string;
+}
+declare const LCTDialog: FC<IDialogProps>;
+export default LCTDialog;

package/dist/components/dialog/images/info-icon.d.ts

@@ -0,0 +1,2 @@
+declare function InfoIcon(): import("react/jsx-runtime").JSX.Element;
+export default InfoIcon;

package/dist/components/dialog/images/leap-icon.d.ts

@@ -0,0 +1,2 @@
+declare function LEAPIcon(): import("react/jsx-runtime").JSX.Element;
+export default LEAPIcon;

package/dist/components/dialog/images/warning-icon.d.ts

@@ -0,0 +1,2 @@
+declare function WarningIcon(): import("react/jsx-runtime").JSX.Element;
+export default WarningIcon;

package/dist/components/dialog/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTDialog } from './Dialog';

package/dist/components/footer/Footer.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+interface IFooterProps {
+    leftComponents?: ReactNode;
+    onCancel?: () => void;
+    onClose?: () => void;
+    onOK?: () => void;
+    onSaveDisable?: boolean;
+}
+declare const LCTFooter: FC<IFooterProps>;
+export default LCTFooter;

package/dist/components/footer/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTFooter } from './Footer';

package/dist/components/formdialog/FormDialog.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+interface IDialogProps {
+    children: React.ReactNode;
+    closeIcon?: boolean;
+    fullWidth?: boolean;
+    hideOverflow?: boolean;
+    isOpen: boolean;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+    minWidth?: number;
+    onCancel?: () => void;
+    onClose?: () => void;
+    onSave?: () => void;
+    title: string;
+}
+declare const LCTFormDialog: FC<IDialogProps>;
+export default LCTFormDialog;

package/dist/components/formdialog/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTFormDialog } from './FormDialog';

package/dist/components/index.d.ts

@@ -0,0 +1,11 @@
+export * from './appbar';
+export * from './button';
+export * from './currencyinput';
+export * from './datepicker';
+export * from './dialog';
+export * from './formdialog';
+export * from './footer';
+export * from './loader';
+export * from './numberinput';
+export * from './select';
+export * from './typography';

package/dist/components/loader/Loader.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface IProps {
+    overlay?: boolean;
+}
+declare const LCTLoader: React.FC<IProps>;
+export default LCTLoader;

package/dist/components/loader/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTLoader } from './Loader';

package/dist/components/numberinput/NumberInput.d.ts

@@ -0,0 +1,12 @@
+interface IProps {
+    autoFocus?: boolean;
+    decimalScale?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    updater?: (event: any) => void;
+    size?: "medium" | "small";
+    value?: number;
+    width?: number;
+}
+declare const LCTNumberInput: ({ autoFocus, disabled, placeholder, size, updater, value, width, ...props }: IProps) => import("react/jsx-runtime").JSX.Element;
+export default LCTNumberInput;

package/dist/components/numberinput/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTNumberInput } from './NumberInput';

package/dist/components/select/Select.d.ts

@@ -0,0 +1,16 @@
+export interface ISelectItem {
+    name: string;
+    value: string;
+}
+interface IProps {
+    autoComplete?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    id: string;
+    items: ISelectItem[];
+    onUpdate: (value: string | null) => void;
+    size?: "small" | "medium";
+    value: string | null;
+}
+declare const LCTSelect: ({ autoComplete, disabled, fullWidth, id, items, onUpdate, size, value, ...props }: IProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default LCTSelect;

package/dist/components/select/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTSelect } from './Select';

package/dist/components/typography/Typography.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { TypographyOwnProps } from '@mui/material/Typography';
+declare const LCTTypography: ({ children, variant, }: PropsWithChildren<TypographyOwnProps>) => import("react/jsx-runtime").JSX.Element;
+export default LCTTypography;

package/dist/components/typography/index.d.ts

@@ -0,0 +1 @@
+export { default as LCTTypography } from './Typography';