@idea-fragments/react-components-zendesk 0.1.73 → 0.1.75

package/dist/types/tags.d.ts

@@ -0,0 +1,261 @@
+/// <reference types="react" />
+import * as react from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
+import * as styled_components from 'styled-components';
+import { FlattenSimpleInterpolation, ThemedStyledProps } from 'styled-components';
+import { ValueOf } from 'utils/types';
+import { Nullable } from 'global';
+
+type ColorProps = {
+    accent?: boolean;
+    color?: string;
+    danger?: boolean;
+    neutral?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    success?: boolean;
+    warning?: boolean;
+};
+type ContainerProps = {
+    _css?: CSS;
+    color?: string;
+    compact?: boolean;
+    fluid?: boolean;
+    className?: any;
+};
+type CSS<T = any> = FlattenSimpleInterpolation | string | T;
+
+declare const FONT_TAGS: {
+    readonly DIV: "div";
+    readonly LABEL: "label";
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+    readonly H4: "h4";
+    readonly H5: "h5";
+    readonly H6: "h6";
+    readonly P: "p";
+    readonly SPAN: "span";
+};
+declare const FONT_SIZES: {
+    readonly XXS: ".8rem";
+    readonly XS: ".9rem";
+    readonly SM: "1rem";
+    readonly MD: "1.3rem";
+    readonly LG: "1.7rem";
+    readonly XL: "2.3rem";
+    readonly XXL: "3.3rem";
+    readonly XXXL: "4rem";
+    readonly XXXXL: "5rem";
+    readonly XXXXXL: "6rem";
+};
+declare const FONT_WEIGHTS: {
+    readonly THIN: "100";
+    readonly LIGHT: "300";
+    readonly REGULAR: "400";
+    readonly MEDIUM: "500";
+    readonly BOLD: "700";
+    readonly BLACK: "800";
+};
+type FontSize = ValueOf<typeof FONT_SIZES>;
+type FontWeight = ValueOf<typeof FONT_WEIGHTS>;
+type FontTag = ValueOf<typeof FONT_TAGS>;
+type TextAlignment = "center" | "left" | "right";
+type CommonTextProps = {
+    align?: TextAlignment;
+    as?: FontTag;
+    hasSubText?: boolean;
+    size?: FontSize;
+    weight?: FontWeight;
+};
+
+type FullSpectrumColors = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+};
+type PartialSpectrumColors = {
+    400: string;
+    M400: string;
+    600: string;
+    M600: string;
+};
+type ContainerStyles = {
+    background?: string;
+    borderRadius?: string;
+    height?: string;
+    margin?: string;
+    padding?: string;
+    shadow?: string;
+    zIndex?: number;
+};
+type Styles = {
+    appBar: Required<Pick<ContainerStyles, "background" | "height" | "shadow" | "zIndex">> & {
+        screenPosition: "top" | "bottom";
+    };
+    border: {
+        color: string;
+    };
+    buttons: {
+        textTransform: Nullable<string>;
+    };
+    chat: {
+        message: {
+            currentUser: {
+                icon: {
+                    background: string;
+                };
+                text: {
+                    background: string;
+                };
+            };
+            other: {
+                icon: {
+                    background: string;
+                };
+                text: {
+                    background: string;
+                };
+            };
+        };
+    };
+    colorAccent: string;
+    colorDanger: string;
+    colorPrimary: string;
+    colorPrimaryDark: string;
+    colorSuccess: string;
+    colorTertiary: string;
+    colorWarning: string;
+    colors: {
+        black: string;
+        white: string;
+        product: {};
+        grey: FullSpectrumColors;
+        blue: FullSpectrumColors;
+        red: FullSpectrumColors;
+        yellow: FullSpectrumColors;
+        green: FullSpectrumColors;
+        kale: FullSpectrumColors;
+        fuschia: PartialSpectrumColors;
+        pink: PartialSpectrumColors;
+        crimson: PartialSpectrumColors;
+        orange: PartialSpectrumColors;
+        lemon: PartialSpectrumColors;
+        lime: PartialSpectrumColors;
+        mint: PartialSpectrumColors;
+        teal: PartialSpectrumColors;
+        azure: PartialSpectrumColors;
+        royal: PartialSpectrumColors;
+        purple: PartialSpectrumColors;
+    };
+    container: {
+        horizontalPadding: string;
+    };
+    drawer: {
+        width: string;
+    };
+    font: {
+        size: string;
+    };
+    footer: {
+        background: string;
+    };
+    infoPanel: {
+        background: string;
+    };
+    modal: {
+        backdrop: {
+            background: string;
+        };
+    };
+    nav: {
+        linkColor: string;
+    };
+    notifications: {
+        zIndex: number;
+    };
+    overlayBackground: string;
+    pageBackground: string;
+    scrollbar: {
+        thumbColor: string;
+        trackColor: string;
+    };
+    scrollbarColor: string;
+    section: ContainerStyles & {
+        body: {
+            padding: string;
+        };
+        header: {
+            padding: string;
+        };
+    };
+    sidebar: {
+        actionButton: {
+            borderRadius: string;
+            color: string;
+        };
+        background: string;
+        boxShadow: string;
+        padding: string;
+        width: string;
+        zIndex: number;
+    };
+    table: {
+        borderColor: string;
+        borderSize: string;
+        filterButtonIcon: Nullable<string>;
+    };
+    textColorDark: string;
+    textColorLight: string;
+    textColorOverPrimaryBg: string;
+    textColorPrimary: string;
+    textColorSecondary: string;
+    tooltip: {
+        darkBackground: string;
+    };
+    getTextColorForBackground: (p: StyledProps<{
+        color: string;
+    }>) => string;
+};
+type Theme = {
+    isDark: boolean;
+    styles: Styles;
+};
+
+type StyledProps<Props = {}> = ThemedStyledProps<Props, Theme>;
+
+type Props = {
+    danger?: boolean;
+    fluid?: boolean;
+    primary?: boolean;
+    success?: boolean;
+};
+type ChipProps = Props & StyledProps;
+declare const Chip: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+} & {
+    as: string;
+    background: string;
+    color: string;
+} & Props, "background" | "color" | "as">;
+
+declare const Close: styled_components.StyledComponent<react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>, styled_components.DefaultTheme, {}, never>;
+type TagProps = {
+    children: ReactNode;
+    className?: string;
+    color?: string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClose?: () => void;
+    size?: "small" | "large";
+    success?: boolean;
+};
+declare let Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Chip, ChipProps, Close, Tag, TagProps };

package/dist/types/text.d.ts

@@ -0,0 +1,152 @@
+/// <reference types="react" />
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as styled_components from 'styled-components';
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { ValueOf } from 'utils/types';
+
+type ColorProps = {
+    accent?: boolean;
+    color?: string;
+    danger?: boolean;
+    neutral?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    success?: boolean;
+    warning?: boolean;
+};
+type ContainerProps = {
+    _css?: CSS;
+    color?: string;
+    compact?: boolean;
+    fluid?: boolean;
+    className?: any;
+};
+type CSS<T = any> = FlattenSimpleInterpolation | string | T;
+
+declare const FONT_TAGS: {
+    readonly DIV: "div";
+    readonly LABEL: "label";
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+    readonly H4: "h4";
+    readonly H5: "h5";
+    readonly H6: "h6";
+    readonly P: "p";
+    readonly SPAN: "span";
+};
+declare const FONT_SIZES: {
+    readonly XXS: ".8rem";
+    readonly XS: ".9rem";
+    readonly SM: "1rem";
+    readonly MD: "1.3rem";
+    readonly LG: "1.7rem";
+    readonly XL: "2.3rem";
+    readonly XXL: "3.3rem";
+    readonly XXXL: "4rem";
+    readonly XXXXL: "5rem";
+    readonly XXXXXL: "6rem";
+};
+declare const FONT_WEIGHTS: {
+    readonly THIN: "100";
+    readonly LIGHT: "300";
+    readonly REGULAR: "400";
+    readonly MEDIUM: "500";
+    readonly BOLD: "700";
+    readonly BLACK: "800";
+};
+type FontSize = ValueOf<typeof FONT_SIZES>;
+type FontWeight = ValueOf<typeof FONT_WEIGHTS>;
+type FontTag = ValueOf<typeof FONT_TAGS>;
+type TextAlignment = "center" | "left" | "right";
+type CommonTextProps = {
+    align?: TextAlignment;
+    as?: FontTag;
+    hasSubText?: boolean;
+    size?: FontSize;
+    weight?: FontWeight;
+};
+
+declare const H1: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "h1";
+}, "as">;
+declare const H2: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "h2";
+}, "as">;
+declare const H3: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "h3";
+}, "as">;
+declare const H4: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "h4";
+}, "as">;
+declare const H5: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "h5";
+}, "as">;
+declare const H6: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "h6";
+}, "as">;
+
+declare const Label: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "label";
+}, "as">;
+
+declare const Paragraph: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+}, "as">;
+declare const XXS: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+}, "as">;
+declare const XS: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+}, "as">;
+declare const MD: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+}, "as">;
+declare const LG: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+}, "as">;
+declare const XL: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+}, "as">;
+
+type TextProps = CommonTextProps & ContainerProps & ColorProps & {
+    children: ReactNode;
+};
+declare const Text: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: ReactNode;
+}, never>;
+
+declare const Hint: styled_components.StyledComponent<"div", styled_components.DefaultTheme, CommonTextProps & ContainerProps & ColorProps & {
+    children: react.ReactNode;
+} & {
+    as: "p";
+}, "as">;
+
+export { H1, H2, H3, H4, H5, H6, Hint, LG, Label, MD, Paragraph, Text, TextProps, XL, XS, XXS };

package/dist/types/tooltips.d.ts

@@ -0,0 +1,67 @@
+import * as styled_components from 'styled-components';
+import * as prop_types from 'prop-types';
+import * as react from 'react';
+import { PropsWithChildren, ReactNode, ComponentType, SVGAttributes, FC } from 'react';
+import * as _zendeskgarden_react_tooltips from '@zendeskgarden/react-tooltips';
+
+type Placement = "start" | "end" | "auto" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "end-top" | "end-bottom" | "start-top" | "start-bottom";
+type TooltipProps = PropsWithChildren<{
+    arrow?: boolean;
+    maxWidth?: string;
+    placement?: Placement;
+    content: ReactNode;
+    type?: "light";
+}>;
+declare const Tooltip: styled_components.StyledComponent<{
+    ({ id, delayMS, isInitialVisible, content, refKey, placement, eventsEnabled, popperModifiers, children, hasArrow, size, type, appendToNode, zIndex, isVisible: externalIsVisible, ...otherProps }: _zendeskgarden_react_tooltips.ITooltipProps): react.JSX.Element;
+    displayName: string;
+    propTypes: {
+        appendToNode: prop_types.Requireable<any>;
+        hasArrow: prop_types.Requireable<boolean>;
+        delayMS: prop_types.Requireable<number>;
+        eventsEnabled: prop_types.Requireable<boolean>;
+        id: prop_types.Requireable<string>;
+        content: prop_types.Validator<NonNullable<prop_types.ReactNodeLike>>;
+        placement: prop_types.Requireable<"top" | "bottom" | "end" | "start" | "auto" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "end-top" | "end-bottom" | "start-top" | "start-bottom">;
+        popperModifiers: prop_types.Requireable<any>;
+        size: prop_types.Requireable<"small" | "large" | "medium" | "extra-large">;
+        type: prop_types.Requireable<"light" | "dark">;
+        zIndex: prop_types.Requireable<NonNullable<string | number | null | undefined>>;
+        isInitialVisible: prop_types.Requireable<boolean>;
+        refKey: prop_types.Requireable<string>;
+    };
+    defaultProps: {
+        hasArrow: boolean;
+        eventsEnabled: boolean;
+        type: string;
+        placement: string;
+        delayMS: number;
+        refKey: string;
+    };
+}, styled_components.DefaultTheme, {
+    arrow?: boolean | undefined;
+    maxWidth?: string | undefined;
+    placement?: Placement | undefined;
+    content: ReactNode;
+    type?: "light" | undefined;
+} & {
+    children?: ReactNode;
+}, never>;
+
+type SVGComponent = ComponentType<SVGAttributes<any>>;
+type Props$1 = {
+    color?: string;
+    size?: number | string;
+    svg: string | Array<string> | SVGComponent;
+    title?: string;
+    onClick?: () => void;
+};
+type IconProps = Props$1;
+
+type Props = Omit<TooltipProps, "content"> & {
+    icon: string;
+    iconProps?: IconProps;
+};
+declare let IconTooltip: FC<PropsWithChildren<Props>>;
+
+export { IconTooltip, Tooltip, TooltipProps };

package/dist/types/types.d.ts

@@ -0,0 +1,168 @@
+import { ThemedStyledProps } from 'styled-components';
+import { Nullable } from 'global';
+
+type StyledComponentProps = {
+    className?: string;
+};
+
+type FullSpectrumColors = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+};
+type PartialSpectrumColors = {
+    400: string;
+    M400: string;
+    600: string;
+    M600: string;
+};
+type ContainerStyles = {
+    background?: string;
+    borderRadius?: string;
+    height?: string;
+    margin?: string;
+    padding?: string;
+    shadow?: string;
+    zIndex?: number;
+};
+type Styles = {
+    appBar: Required<Pick<ContainerStyles, "background" | "height" | "shadow" | "zIndex">> & {
+        screenPosition: "top" | "bottom";
+    };
+    border: {
+        color: string;
+    };
+    buttons: {
+        textTransform: Nullable<string>;
+    };
+    chat: {
+        message: {
+            currentUser: {
+                icon: {
+                    background: string;
+                };
+                text: {
+                    background: string;
+                };
+            };
+            other: {
+                icon: {
+                    background: string;
+                };
+                text: {
+                    background: string;
+                };
+            };
+        };
+    };
+    colorAccent: string;
+    colorDanger: string;
+    colorPrimary: string;
+    colorPrimaryDark: string;
+    colorSuccess: string;
+    colorTertiary: string;
+    colorWarning: string;
+    colors: {
+        black: string;
+        white: string;
+        product: {};
+        grey: FullSpectrumColors;
+        blue: FullSpectrumColors;
+        red: FullSpectrumColors;
+        yellow: FullSpectrumColors;
+        green: FullSpectrumColors;
+        kale: FullSpectrumColors;
+        fuschia: PartialSpectrumColors;
+        pink: PartialSpectrumColors;
+        crimson: PartialSpectrumColors;
+        orange: PartialSpectrumColors;
+        lemon: PartialSpectrumColors;
+        lime: PartialSpectrumColors;
+        mint: PartialSpectrumColors;
+        teal: PartialSpectrumColors;
+        azure: PartialSpectrumColors;
+        royal: PartialSpectrumColors;
+        purple: PartialSpectrumColors;
+    };
+    container: {
+        horizontalPadding: string;
+    };
+    drawer: {
+        width: string;
+    };
+    font: {
+        size: string;
+    };
+    footer: {
+        background: string;
+    };
+    infoPanel: {
+        background: string;
+    };
+    modal: {
+        backdrop: {
+            background: string;
+        };
+    };
+    nav: {
+        linkColor: string;
+    };
+    notifications: {
+        zIndex: number;
+    };
+    overlayBackground: string;
+    pageBackground: string;
+    scrollbar: {
+        thumbColor: string;
+        trackColor: string;
+    };
+    scrollbarColor: string;
+    section: ContainerStyles & {
+        body: {
+            padding: string;
+        };
+        header: {
+            padding: string;
+        };
+    };
+    sidebar: {
+        actionButton: {
+            borderRadius: string;
+            color: string;
+        };
+        background: string;
+        boxShadow: string;
+        padding: string;
+        width: string;
+        zIndex: number;
+    };
+    table: {
+        borderColor: string;
+        borderSize: string;
+        filterButtonIcon: Nullable<string>;
+    };
+    textColorDark: string;
+    textColorLight: string;
+    textColorOverPrimaryBg: string;
+    textColorPrimary: string;
+    textColorSecondary: string;
+    tooltip: {
+        darkBackground: string;
+    };
+    getTextColorForBackground: (p: StyledProps<{
+        color: string;
+    }>) => string;
+};
+type Theme = {
+    isDark: boolean;
+    styles: Styles;
+};
+
+type StyledProps<Props = {}> = ThemedStyledProps<Props, Theme>;
+
+export { StyledComponentProps, StyledProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idea-fragments/react-components-zendesk",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "private": false,
   "files": [
     "dist/*.js",
@@ -8,13 +8,9 @@
     "dist/types"
   ],
   "exports": {
-    "./*": "./dist/*.js"
-  },
-  "typesVersions": {
-    ">=4.2": {
-      "*": [
-        "dist/types/*.d.ts"
-      ]
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "default": "./dist/*.js"
     }
   },
   "dependencies": {
@@ -118,8 +114,7 @@
     "eject": "react-scripts eject",
     "format": "./git_hooks/pre_commit/prettier.sh",
     "lint": "eslint",
-    "rollup": "NODE_OPTIONS=--max-old-space-size=8192 rollup --config",
-    "rollup-windows": "rollup --config --max-old-space-size=8192",
+    "rollup": "npm run cleanup && node scripts/rollup-prompt.js",
     "start": "react-scripts start",
     "storybook": "storybook dev -p 6006",
     "test": "react-scripts test"