@commercelayer/app-elements 0.0.1

package/dist/ui/forms/InputWrapper.d.ts

@@ -0,0 +1,34 @@
+import { HintProps } from '../atoms/Hint';
+import { InputFeedbackProps } from '../forms/InputFeedback';
+export interface InputWrapperBaseProps {
+    /**
+     * optional input label
+     */
+    label?: string;
+    /**
+     * optional hint to be rendered below
+     */
+    hint?: {
+        icon?: HintProps['icon'];
+        text: HintProps['children'];
+    };
+    /**
+     * optional hint to be rendered below
+     */
+    feedback?: Omit<InputFeedbackProps, 'className'>;
+}
+export interface InputWrapperProps extends InputWrapperBaseProps {
+    /**
+     * optional css class names used for the input element
+     */
+    className?: string;
+    name?: string;
+    children: JSX.Element | JSX.Element[];
+}
+declare function InputWrapper({ label, children, className, hint, feedback, name, ...rest }: InputWrapperProps): JSX.Element;
+declare namespace InputWrapper {
+    var displayName: string;
+}
+export { InputWrapper };
+export declare function getFeedbackStyle(feedback?: Omit<InputFeedbackProps, 'className'>): Record<string, boolean>;
+export declare function getFeedbackCssInJs(variant?: InputFeedbackProps['variant']): Pick<CSSStyleDeclaration, 'borderColor' | 'borderWidth'>;

package/dist/ui/forms/Label.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    gap?: boolean;
+}
+declare function Label({ gap, children, className, ...rest }: Props): JSX.Element;
+declare namespace Label {
+    var displayName: string;
+}
+export { Label };

package/dist/ui/forms/RadioButtons.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputHTMLAttributes } from 'react';
+import { InputWrapperBaseProps } from '../forms/InputWrapper';
+export declare type RadioOptionValue = string | number | boolean;
+export interface RadioOption {
+    value: RadioOptionValue;
+    label: string;
+}
+export interface RadioButtonsProps extends InputWrapperBaseProps {
+    id: string;
+    options: RadioOption[];
+    value?: RadioOptionValue;
+    onChange: (value: RadioOptionValue) => void;
+    className?: string;
+    onBlur?: InputHTMLAttributes<HTMLInputElement>['onBlur'];
+}
+declare const RadioButtons: React.ForwardRefExoticComponent<RadioButtonsProps & React.RefAttributes<HTMLInputElement>>;
+export { RadioButtons };

package/dist/ui/lists/List.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { PaginationProps } from '../atoms/Pagination';
+export declare type ListPagination = {
+    recordsPerPage: number;
+    recordCount: number;
+} & Omit<PaginationProps, 'className' | 'isDisabled'>;
+export interface ListProps {
+    /**
+     * List name displayed in the heading
+     */
+    title?: string;
+    /**
+     * Element to be displayed on the right side of the heading
+     */
+    actionButton?: ReactNode;
+    /**
+     * Set an opacity on the list, usefull when changing page and new page data is not ready yet.
+     */
+    isDisabled?: boolean;
+    /**
+     * Show Skeleton UI
+     */
+    isLoading?: boolean;
+    /**
+     * It should only accept or ListItem or ListItemTask
+     */
+    children?: ReactNode;
+    /**
+     * When a `ListPagination` is passed, a pagination nav is added at the bottom of the list
+     */
+    pagination?: ListPagination;
+}
+declare function List({ title, actionButton, isDisabled, children, pagination, isLoading, ...rest }: ListProps): JSX.Element;
+declare namespace List {
+    var displayName: string;
+}
+export { List };

package/dist/ui/lists/ListDetails.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export interface DetailsListProps {
+    /**
+     * Optional title to show on top of the list
+     */
+    title?: string;
+    /**
+     * Use <ListDetailsItem> component as children
+     */
+    children?: ReactNode;
+    /**
+     * css class name
+     */
+    className?: string;
+    /**
+     * font size
+     */
+    fontSize?: 'normal' | 'small';
+    /**
+     * Show skeleton when this is `true`
+     */
+    isLoading?: boolean;
+    /**
+     * Number of items to show as skeleton rows. Default is `3`.
+     */
+    loadingLines?: number;
+}
+declare function ListDetails({ title, children, fontSize, isLoading, loadingLines, ...rest }: DetailsListProps): JSX.Element;
+declare namespace ListDetails {
+    var displayName: string;
+}
+export { ListDetails };

package/dist/ui/lists/ListDetailsItem.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+interface ListDetailsItemProps {
+    /**
+     * label to show on the left side. In a key/value pair, this is the `key`
+     */
+    label: string;
+    /**
+     * content to show on the right side.
+     * It represent the value.
+     * Most of the type it should be a `<CopyToClipboard>` component
+     */
+    children: ReactNode;
+    /**
+     * To show the skeleton item while `children` ar not yet. Label is always rendered
+     */
+    isLoading?: boolean;
+}
+declare function ListDetailsItem({ label, children, isLoading, ...rest }: ListDetailsItemProps): JSX.Element;
+declare namespace ListDetailsItem {
+    var displayName: string;
+}
+export { ListDetailsItem };

package/dist/ui/lists/ListItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    noHover?: boolean;
+}
+declare function ListItem({ label, description, icon, className, noHover, ...rest }: ListItemProps): JSX.Element;
+declare namespace ListItem {
+    var displayName: string;
+}
+export { ListItem };

package/dist/ui/lists/ListItemTask.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StatusUI } from '../atoms/StatusIcon';
+export interface ListItemTaskProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * define the status to show the proper icon
+     */
+    status: StatusUI;
+    /**
+     * Only accepted if status is `progress'
+     */
+    progressPercentage?: number;
+    /**
+     * Main text to show
+     */
+    title: string;
+    /**
+     * Optional text to display below the title
+     */
+    description?: React.ReactNode;
+    /**
+     * When set, this will render a `Cancel` button to cancel the current task
+     */
+    onCancelRequest?: () => void;
+    /**
+     * Disable hover effect
+     */
+    noHover?: boolean;
+}
+declare function ListItemTask({ status, progressPercentage, title, onCancelRequest, description, className, noHover, ...rest }: ListItemTaskProps): JSX.Element;
+declare namespace ListItemTask {
+    var displayName: string;
+}
+export { ListItemTask };

package/dist/ui/tables/Table.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props extends React.TableHTMLAttributes<HTMLTableElement> {
+    thead?: React.ReactNode;
+    tbody?: React.ReactNode;
+}
+declare function Table({ thead, tbody, className, ...rest }: Props): JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
+export { Table };

package/dist/ui/tables/TableData.d.ts

@@ -0,0 +1,13 @@
+export interface TableDataProps {
+    data: Array<Record<string, string | Object>>;
+    className?: string;
+    limit?: number;
+    title?: string;
+    showTotal?: boolean;
+    showOthers?: boolean;
+}
+declare function TableData({ data, className, limit, title, showTotal, showOthers, ...rest }: TableDataProps): JSX.Element;
+declare namespace TableData {
+    var displayName: string;
+}
+export { TableData };

package/dist/utils/children.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Checks if a ReactNode matches a specific component display name.
+ * @param child - a ReactNode single child
+ * @param displayName - the name of the component we would like to match
+ * @returns a boolean values indicating argument match the passed displayName
+ *
+ *  * Example:
+ * ```jsx
+ * React.Children.map(children, (child) =>
+ *  isSpecificReactComponent(child, 'Button')
+ * )
+ * // will return an array of true/false values depending if some child is a button
+ * ```
+ */
+export declare function isSpecificReactComponent(child: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined, displayName: string): boolean;

package/dist/utils/extractHeaders.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Extract all keys from an array of objects of different shapes,
+ * @param data - array of objects of different shapes
+ * @returns an array of string values
+ */
+export declare function extractHeaders(data: Array<Record<string, any>>): string[];

package/dist/utils/pagination.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Helper function to retrieve the first and last index of the current page
+ * Example: To show `1-50 of 148` or `51-100 of 148` or `100-148 of 148` we can do `${firstOfPage}-${lastOfPage} of ${recordCount}`
+ * @param currentPage - The current active page (Int)
+ * @param recordsPerPage - Number of items listed in a single page (Int)
+ * @param recordCount - Number of the total items from all pages (Int)
+ * @returns an object containing `firstOfPage` which is the first index of the current page (on page 2 with 30 items per page will be 31)
+ *          and  `lastOfPage` which is the last index of the current page (on page 2 with 30 items per page will be 60)
+ */
+export declare function makeCurrentPageOffsets({ currentPage, recordsPerPage, recordCount }: {
+    currentPage: number;
+    recordsPerPage: number;
+    recordCount: number;
+}): {
+    firstOfPage: number;
+    lastOfPage: number;
+};
+/**
+ * Helper function to make a list of adjacent pages.
+ * It will consider the final and first page to avoid generating not existing pages.
+ * Example: If current page is 3 and we want to generate 5 adjacents it could return
+ * [3,4,5,6,7] or [1,2,3] depending on the direction we are looking for.
+ * @param currentPage - The current active page (Int)
+ * @param pageCount - The total number of pages (Int)
+ * @param adjacentPagesCount - How many adjacent pages we need to generate (Int)
+ * @param direction - The direction we need to look for. It could be `forward` or `backward`
+ * @param excludeCurrentPage - Boolean flag, in case we don't need the current page to be in the array
+ * @returns an array of adjacent page numbers
+ */
+export declare function makeSomeAdjacentPages({ currentPage, pageCount, adjacentPagesCount, direction, excludeCurrentPage }: {
+    currentPage: number;
+    pageCount: number;
+    adjacentPagesCount: number;
+    direction?: 'backward' | 'forward';
+    excludeCurrentPage?: boolean;
+}): number[];
+export declare function computeTitleWithPagination({ title, firstOfPage, lastOfPage, recordCount, currentPage }: {
+    title: string;
+    firstOfPage: number;
+    lastOfPage: number;
+    recordCount: number;
+    currentPage: number;
+}): string;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@commercelayer/app-elements",
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js"
+    },
+    "./style.css": {
+      "import": "./dist/style.css"
+    }
+  },
+  "engines": {
+    "node": ">=18",
+    "pnpm": ">=7"
+  },
+  "dependencies": {
+    "@commercelayer/sdk": "^4.20.0",
+    "@tailwindcss/forms": "^0.5.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/lodash": "^4.14.191",
+    "@types/react": "^18.0.26",
+    "@types/react-datepicker": "^4.8.0",
+    "@types/react-dom": "^18.0.9",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@vitejs/plugin-react": "^3.0.0",
+    "autoprefixer": "^10.4.13",
+    "classnames": "^2.3.2",
+    "jsdom": "^20.0.3",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "phosphor-react": "^1.4.1",
+    "polished": "^4.2.2",
+    "postcss": "^8.4.20",
+    "react": "^18.2.0",
+    "react-datepicker": "^4.8.0",
+    "react-dom": "^18.2.0",
+    "react-select": "^5.7.0",
+    "tailwindcss": "^3.2.4",
+    "ts-invariant": "^0.10.3",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.3",
+    "vite-plugin-dts": "^1.7.1",
+    "vitest": "^0.26.2"
+  },
+  "devDependencies": {
+    "@commercelayer/eslint-config-ts-react": "^0.1.3",
+    "@types/node": "^18.11.17",
+    "cross-fetch": "^3.1.5",
+    "eslint": "^8.30.0",
+    "msw": "^1.0.0",
+    "type-fest": "^3.5.4"
+  },
+  "peerDependencies": {
+    "@commercelayer/sdk": "^4.x"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}