@commerce7/admin-ui 2.0.45 → 2.0.47

package/lib/types/text/index.d.ts

@@ -0,0 +1,3 @@
+import Text, { TextProps } from './Text';
+export type { TextProps };
+export default Text;

package/lib/types/text/theme.d.ts

@@ -0,0 +1,13 @@
+declare const colors: {
+    light: {
+        errorFontColor: string;
+        fontColor: string;
+        secondaryFontColor: string;
+    };
+    dark: {
+        errorFontColor: string;
+        fontColor: string;
+        secondaryFontColor: string;
+    };
+};
+export { colors };

package/lib/types/textarea/Textarea.d.ts

@@ -0,0 +1,67 @@
+import React, { ChangeEvent, FocusEvent } from 'react';
+export interface TextareaProps {
+    /**
+     * Set the element to autoFocus on mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * Add className to the outermost element.
+     */
+    className?: string;
+    /**
+     * Help text to describe the form field
+     */
+    description?: string;
+    /**
+     * Set the element to be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Show an error message and set the component styles to visually show an error.
+     */
+    errorMessage?: string;
+    /**
+     * Set the height of the element.
+     */
+    height?: number;
+    /**
+     * Set the id of the element.
+     * The label uses this id to ensure htmlFor is set correctly.
+     */
+    id?: string;
+    /**
+     * The label for the component.
+     */
+    label?: string;
+    /**
+     * Callback onBlur.
+     */
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Callback onChange.
+     */
+    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Callback onFocus.
+     */
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * The placeholder of the element.
+     */
+    placeholder?: string;
+    /**
+     * Set the element to be required.
+     * This will show an asterisk in the label and add 'required' to the DOM node.
+     */
+    required?: boolean;
+    /**
+     * The value of the element.
+     */
+    value: string;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/lib/types/textarea/Textarea.styles.d.ts

@@ -0,0 +1,8 @@
+interface StyledTextareaProps {
+    height: number;
+    hasErrorMessage?: boolean;
+}
+declare const StyledTextarea: import("styled-components").StyledComponent<"input", any, import("../common/form/styles").StyledFormItemProps & {
+    as: string;
+} & StyledTextareaProps, "as">;
+export { StyledTextarea };

package/lib/types/textarea/index.d.ts

@@ -0,0 +1,3 @@
+import Textarea, { TextareaProps } from './Textarea';
+export type { TextareaProps };
+export default Textarea;

package/lib/types/ui/Commerce7AdminUI.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface Commerce7AdminUIProps {
+    /**
+     * Theme mode for the UI
+     * @default 'light'
+     */
+    mode?: 'light' | 'dark';
+    /**
+     * Child components to render
+     */
+    children?: React.ReactNode;
+}
+declare const Commerce7AdminUI: React.FC<Commerce7AdminUIProps>;
+export type { Commerce7AdminUIProps };
+export default Commerce7AdminUI;

package/lib/types/ui/index.d.ts

@@ -0,0 +1,4 @@
+import Commerce7AdminUI, { Commerce7AdminUIProps } from './Commerce7AdminUI';
+import { Theme } from './theme';
+export type { Commerce7AdminUIProps, Theme };
+export default Commerce7AdminUI;

package/lib/types/ui/theme.d.ts

@@ -0,0 +1,160 @@
+export declare const c7Colors: {
+    white: string;
+    black: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    orange100: string;
+    orange200: string;
+    orange300: string;
+    purple100: string;
+    purple200: string;
+    purple300: string;
+    violet100: string;
+    violet200: string;
+    violet300: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blueberry100: string;
+    blueberry200: string;
+    blueberry300: string;
+    slate100: string;
+    slate200: string;
+    slate300: string;
+    slate400: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    gray750: string;
+    gray800: string;
+    gray900: string;
+    gray950: string;
+};
+export declare const fontColors: {
+    dark: string;
+    light: string;
+};
+export interface Theme {
+    c7__ui: {
+        mode: 'light' | 'dark';
+        fontFamily: string;
+        fontSizeBase: string;
+        fontSizeSmall: string;
+        fontWeightBase: string;
+        fontWeightStrong: string;
+        fontWeightHeading: string;
+        fontColor: string;
+        secondaryFontColor: string;
+        linkColor: string;
+        backgroundColor: string;
+        secondaryBackgroundColor: string;
+        borderColor: string;
+        errorColor: string;
+        borderRadius: string;
+        borderRadiusMedium: string;
+        boxShadow: string;
+        colors: typeof c7Colors;
+        breakpoints: {
+            smallUp: string;
+            smallOnly: string;
+            mediumUp: string;
+            mediumOnly: string;
+            largeUp: string;
+            largeOnly: string;
+            xLargeUp: string;
+        };
+    };
+}
+export declare const createTheme: (mode: "light" | "dark") => {
+    c7__ui: {
+        mode: "light" | "dark";
+        fontFamily: string;
+        fontSizeBase: string;
+        fontSizeSmall: string;
+        fontWeightBase: string;
+        fontWeightStrong: string;
+        fontWeightHeading: string;
+        fontColor: string;
+        secondaryFontColor: string;
+        linkColor: string;
+        backgroundColor: string;
+        secondaryBackgroundColor: string;
+        borderColor: string;
+        errorColor: string;
+        borderRadius: string;
+        borderRadiusMedium: string;
+        boxShadow: string;
+        colors: {
+            white: string;
+            black: string;
+            yellow100: string;
+            yellow200: string;
+            yellow300: string;
+            green100: string;
+            green200: string;
+            green300: string;
+            red100: string;
+            red200: string;
+            red300: string;
+            orange100: string;
+            orange200: string;
+            orange300: string;
+            purple100: string;
+            purple200: string;
+            purple300: string;
+            violet100: string;
+            violet200: string;
+            violet300: string;
+            blue100: string;
+            blue200: string;
+            blue300: string;
+            blue400: string;
+            blue500: string;
+            blue600: string;
+            blueberry100: string;
+            blueberry200: string;
+            blueberry300: string;
+            slate100: string;
+            slate200: string;
+            slate300: string;
+            slate400: string;
+            gray100: string;
+            gray200: string;
+            gray300: string;
+            gray400: string;
+            gray500: string;
+            gray600: string;
+            gray700: string;
+            gray750: string;
+            gray800: string;
+            gray900: string;
+            gray950: string;
+        };
+        breakpoints: {
+            smallUp: string;
+            smallOnly: string;
+            mediumUp: string;
+            mediumOnly: string;
+            largeUp: string;
+            largeOnly: string;
+            xLargeUp: string;
+        };
+    };
+};
+export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{
+    theme: Theme;
+}, import("styled-components").DefaultTheme>;

package/lib/types/utils/hooks/useEscKeydown.d.ts

@@ -0,0 +1,2 @@
+export default useEscKeydown;
+declare function useEscKeydown(handler: any): void;

package/lib/types/utils/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,2 @@
+export default useOnClickOutside;
+declare function useOnClickOutside(ref: any, handler: any): void;

package/lib/types/utils/hooks/useWindowSize.d.ts

@@ -0,0 +1,8 @@
+export default useWindowSize;
+declare function useWindowSize(): {
+    width: number;
+    height: number;
+} | {
+    width: null;
+    height: null;
+};

package/lib/types/vividIcon/VividIcon.d.ts

@@ -0,0 +1,34 @@
+import React, { MouseEvent } from 'react';
+type VividIconColor = 'pink' | 'blue' | 'green' | 'teal' | 'orange' | 'purple' | 'yellow' | 'gray';
+export interface VividIconProps {
+    /**
+     * Add className to the outermost element.
+     */
+    className?: string;
+    /**
+     * Set the icon to use.
+     */
+    icon: string;
+    /**
+     * The label for the component.
+     * This should be used when passing in an onClick prop, for accessibility reasons.
+     */
+    label?: string;
+    /**
+     * Callback fired when the component is clicked.
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Set the visual property of the component.
+     */
+    color?: VividIconColor;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+}
+declare const VividIcon: {
+    ({ className, label, onClick, icon, color, dataTestId }: VividIconProps): React.JSX.Element;
+    displayName: string;
+};
+export default VividIcon;

package/lib/types/vividIcon/VividIcon.styles.d.ts

@@ -0,0 +1,9 @@
+declare const StyledIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledIconProps {
+    color: 'pink' | 'blue' | 'green' | 'teal' | 'orange' | 'purple' | 'gray' | 'yellow';
+}
+declare const StyledIcon: import("styled-components").StyledComponent<{
+    ({ className, icon, label, onClick, size, variant, dataTestId }: import("../icon").IconProps): import("react").JSX.Element | null;
+    displayName: string;
+}, any, StyledIconProps, never>;
+export { StyledIconContainer, StyledIcon };

package/lib/types/vividIcon/index.d.ts

@@ -0,0 +1,3 @@
+import VividIcon, { VividIconProps } from './VividIcon';
+export type { VividIconProps };
+export default VividIcon;

package/lib/types/vividIcon/theme.d.ts

@@ -0,0 +1,108 @@
+export namespace colors {
+    namespace light {
+        namespace pink {
+            let backgroundColor: string;
+            let fillColor: string;
+        }
+        namespace blue {
+            let backgroundColor_1: string;
+            export { backgroundColor_1 as backgroundColor };
+            let fillColor_1: string;
+            export { fillColor_1 as fillColor };
+        }
+        namespace green {
+            let backgroundColor_2: string;
+            export { backgroundColor_2 as backgroundColor };
+            let fillColor_2: string;
+            export { fillColor_2 as fillColor };
+        }
+        namespace teal {
+            let backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+            let fillColor_3: string;
+            export { fillColor_3 as fillColor };
+        }
+        namespace orange {
+            let backgroundColor_4: string;
+            export { backgroundColor_4 as backgroundColor };
+            let fillColor_4: string;
+            export { fillColor_4 as fillColor };
+        }
+        namespace purple {
+            let backgroundColor_5: string;
+            export { backgroundColor_5 as backgroundColor };
+            let fillColor_5: string;
+            export { fillColor_5 as fillColor };
+        }
+        namespace gray {
+            let backgroundColor_6: string;
+            export { backgroundColor_6 as backgroundColor };
+            let fillColor_6: string;
+            export { fillColor_6 as fillColor };
+        }
+        namespace yellow {
+            let backgroundColor_7: string;
+            export { backgroundColor_7 as backgroundColor };
+            let fillColor_7: string;
+            export { fillColor_7 as fillColor };
+        }
+    }
+    namespace dark {
+        export namespace pink_1 {
+            let backgroundColor_8: string;
+            export { backgroundColor_8 as backgroundColor };
+            let fillColor_8: string;
+            export { fillColor_8 as fillColor };
+        }
+        export { pink_1 as pink };
+        export namespace blue_1 {
+            let backgroundColor_9: string;
+            export { backgroundColor_9 as backgroundColor };
+            let fillColor_9: string;
+            export { fillColor_9 as fillColor };
+        }
+        export { blue_1 as blue };
+        export namespace green_1 {
+            let backgroundColor_10: string;
+            export { backgroundColor_10 as backgroundColor };
+            let fillColor_10: string;
+            export { fillColor_10 as fillColor };
+        }
+        export { green_1 as green };
+        export namespace teal_1 {
+            let backgroundColor_11: string;
+            export { backgroundColor_11 as backgroundColor };
+            let fillColor_11: string;
+            export { fillColor_11 as fillColor };
+        }
+        export { teal_1 as teal };
+        export namespace orange_1 {
+            let backgroundColor_12: string;
+            export { backgroundColor_12 as backgroundColor };
+            let fillColor_12: string;
+            export { fillColor_12 as fillColor };
+        }
+        export { orange_1 as orange };
+        export namespace purple_1 {
+            let backgroundColor_13: string;
+            export { backgroundColor_13 as backgroundColor };
+            let fillColor_13: string;
+            export { fillColor_13 as fillColor };
+        }
+        export { purple_1 as purple };
+        export namespace gray_1 {
+            let backgroundColor_14: string;
+            export { backgroundColor_14 as backgroundColor };
+            let fillColor_14: string;
+            export { fillColor_14 as fillColor };
+        }
+        export { gray_1 as gray };
+        export namespace yellow_1 {
+            let backgroundColor_15: string;
+            export { backgroundColor_15 as backgroundColor };
+            let fillColor_15: string;
+            export { fillColor_15 as fillColor };
+        }
+        export { yellow_1 as yellow };
+    }
+}

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@commerce7/admin-ui",
-  "version": "2.0.45",
+  "version": "2.0.47",
   "description": "Commerce7 Admin UI Component Library",
   "keywords": [
     "Commerce7"
   ],
   "main": "./lib/build.js",
+  "types": "./lib/types/index.d.ts",
   "license": "MIT",
   "scripts": {
-    "build": "webpack",
+    "build": "npm run build:js && npm run build:types",
+    "build:js": "webpack",
+    "build:types": "rm -rf lib/types && tsc -p tsconfig.build.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "pre-commit": "lint-staged",

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationMap": false,
+    "rootDir": "./src",
+    "outDir": "./lib/types"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "src/stories/**/*", "**/*.stories.ts", "**/*.stories.tsx"]
+}