@appquality/unguess-design-system 0.3.5 → 2.2.0

package/build/stories/loaders/skeleton/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { SkeletonArgs } from "./_types";
+export declare const Default: Story<SkeletonArgs>;
+export declare const Light: Story<SkeletonArgs>;
+declare const _default: ComponentMeta<(props: SkeletonArgs) => JSX.Element>;
+export default _default;

package/build/stories/loaders/spinner/_types.d.ts

@@ -0,0 +1,19 @@
+import { ISpinnerProps } from '@zendeskgarden/react-loaders';
+export interface SpinnerArgs extends ISpinnerProps {
+    /**
+    * Sets the height and width in pixels. Inherits the parent's font size by default.
+    **/
+    size?: string;
+    /**
+     * Sets the length of the animation cycle in milliseconds
+     **/
+    duration?: number;
+    /**
+     * Sets the fill color. Inherits the parent's `color` by default.
+     **/
+    color?: string;
+    /**
+     * Delays displaying the loader to prevent a render flash during normal loading times
+     **/
+    delayMS?: number;
+}

package/build/stories/loaders/spinner/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SpinnerArgs } from './_types';
+/**
+ * Breadcrumbs mark and communicate a user’s location in the product.
+ * <hr>
+ * Used for this:
+    - To show the user where they are in a nested navigation
+    - To provide a quick way to navigate to ancestor pages
+ */
+declare const Spinner: (props: SpinnerArgs) => JSX.Element;
+export { Spinner };

package/build/stories/loaders/spinner/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { SpinnerArgs } from "./_types";
+export declare const Default: Story<SpinnerArgs>;
+declare const _default: ComponentMeta<(props: SpinnerArgs) => JSX.Element>;
+export default _default;

package/build/stories/notifications/_types.d.ts

@@ -0,0 +1,9 @@
+import { INotificationProps, IToastProviderProps } from "@zendeskgarden/react-notifications";
+export interface NotificationArgs extends INotificationProps {
+    /** Applies notification type styles */
+    type?: "success" | "warning" | "error" | "info";
+}
+export interface ToastProviderArgs extends IToastProviderProps {
+    /** Applies regular (non-bold) font weight */
+    isRegular?: boolean;
+}

package/build/stories/notifications/index.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { NotificationArgs, ToastProviderArgs } from "./_types";
+/**
+ * A Notification is a passive status update that keeps users informed of system progress.
+ * <hr>
+ * Used for this:
+    - For a passive status update about user or system activity
+ */
+declare const Notification: (props: NotificationArgs) => JSX.Element;
+declare const ToastProvider: (props: ToastProviderArgs) => JSX.Element;
+declare const useToast: () => {
+    addToast: (content: import("@zendeskgarden/react-notifications").ToastContent, options?: Partial<import("@zendeskgarden/react-notifications").IToastOptions<any>> | undefined) => string;
+    removeToast: (id: string) => void;
+    updateToast: (id: string, options: {
+        content?: import("@zendeskgarden/react-notifications").ToastContent | undefined;
+    } & Partial<import("@zendeskgarden/react-notifications").IToastOptions<any>>) => void;
+    removeAllToasts: () => void;
+    toasts: import("@zendeskgarden/react-notifications").IToast[];
+};
+export { Notification, ToastProvider, useToast };

package/build/stories/notifications/index.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { NotificationArgs } from "./_types";
+interface NotificationStoryProps extends NotificationArgs {
+    title: string;
+    content: string;
+}
+export declare const Default: Story<NotificationStoryProps>;
+declare const _default: ComponentMeta<(props: NotificationArgs) => JSX.Element>;
+export default _default;

package/build/stories/theme/index.d.ts

@@ -1,9 +1,9 @@
 declare const theme: {
     colors: {
         primaryHue: string;
-        foreground: string;
         base: "light" | "dark";
         background: string;
+        foreground: string;
         dangerHue: string;
         warningHue: string;
         successHue: string;

package/build/stories/title/_types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export interface TitleArgs extends HTMLAttributes<HTMLDivElement> {
+    /** Applies regular (non-bold) font weight */
+    isRegular?: boolean;
+}

package/build/stories/title/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TitleArgs } from "./_types";
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+declare const Title: (props: TitleArgs) => JSX.Element;
+export { Title };

package/build/stories/title/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TitleArgs } from "./_types";
+export declare const Default: Story<TitleArgs>;
+declare const _default: ComponentMeta<(props: TitleArgs) => JSX.Element>;
+export default _default;

package/build/stories/typography/block-quote/_types.d.ts

@@ -0,0 +1,5 @@
+import { IBlockquoteProps } from "@zendeskgarden/react-typography";
+export interface BlockquoteArgs extends IBlockquoteProps {
+    /** Controls the spacing between sibling blockquotes */
+    size?: 'small' | 'medium' | 'large';
+}

package/build/stories/typography/block-quote/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BlockquoteArgs } from "./_types";
+/**
+ *  Use Blockquote to represent a body of text that is from another source.
+ */
+declare const Blockquote: (props: BlockquoteArgs) => JSX.Element;
+export { Blockquote };

package/build/stories/typography/block-quote/index.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const Default: Story<any>;
+declare const _default: ComponentMeta<(props: import("./_types").BlockquoteArgs) => JSX.Element>;
+export default _default;

package/build/stories/typography/code/_types.d.ts

@@ -0,0 +1,7 @@
+import { ICodeProps } from "@zendeskgarden/react-typography";
+export interface CodeArgs extends ICodeProps {
+    /** Applies color to the background and the text */
+    hue?: "grey" | "red" | "green" | "yellow";
+    /** Adjusts the font size. By default font size is inherited from the surrounding text. */
+    size?: "small" | "medium" | "large" | "inherit";
+}

package/build/stories/typography/code/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CodeArgs } from "./_types";
+/**
+ *  Use Code to style and format inline fragments of computer code.
+ */
+declare const Code: (props: CodeArgs) => JSX.Element;
+export { Code };

package/build/stories/typography/code/index.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CodeArgs } from "./_types";
+export declare const Default: Story<CodeArgs>;
+export declare const Color: Story<CodeArgs>;
+export declare const Size: Story<CodeArgs>;
+declare const _default: ComponentMeta<(props: CodeArgs) => JSX.Element>;
+export default _default;

package/build/stories/typography/ellipsis/_types.d.ts

@@ -0,0 +1,9 @@
+import { IEllipsisProps } from "@zendeskgarden/react-typography";
+export interface EllipsisArgs extends IEllipsisProps {
+    /** Overrides the auto-generated `title` attribute */
+    title?: string;
+    /** Updates the element's HTML tag */
+    tag?: any;
+    /** Controls the element width */
+    width?: number;
+}

package/build/stories/typography/ellipsis/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { EllipsisArgs } from "./_types";
+/**
+ *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
+ */
+declare const Ellipsis: (props: EllipsisArgs) => JSX.Element;
+export { Ellipsis };

package/build/stories/typography/ellipsis/index.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const Default: Story<any>;
+declare const _default: ComponentMeta<(props: import("./_types").EllipsisArgs) => JSX.Element>;
+export default _default;

package/build/stories/typography/lists/_types.d.ts

@@ -0,0 +1,17 @@
+import { IOrderedListProps, IUnorderedListProps } from "@zendeskgarden/react-typography";
+export interface OrderedListArgs extends IOrderedListProps {
+    /** Adjusts the vertical spacing between list items */
+    size?: "small" | "medium" | "large";
+    /** Sets the marker style */
+    type?: "decimal" | "decimal-leading-zero" | "lower-alpha" | "lower-roman" | "upper-alpha" | "upper-roman";
+    /** Sets list items */
+    items?: string[];
+}
+export interface UnorderedListArgs extends IUnorderedListProps {
+    /** Adjusts the vertical spacing between list items */
+    size?: "small" | "medium" | "large";
+    /** Sets the marker style */
+    type?: "circle" | "disc" | "square";
+    /** Sets list items (just for stories) */
+    items?: string[];
+}

package/build/stories/typography/lists/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { OrderedListArgs, UnorderedListArgs } from "./_types";
+/**
+ *  Use Lists to style and format ordered and unordered lists.
+ *  <hr>
+ *  Use Lists to style and format ordered (`<ol>`) and unordered (`<ul>`) lists.
+ */
+declare const OrderedList: {
+    (props: OrderedListArgs): JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+};
+declare const UnorderedList: {
+    (props: UnorderedListArgs): JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+};
+export { OrderedList, UnorderedList };

package/build/stories/typography/lists/ordered.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { OrderedListArgs } from "./_types";
+export declare const Ordered: Story<OrderedListArgs>;
+declare const _default: ComponentMeta<{
+    (props: OrderedListArgs): JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+}>;
+export default _default;

package/build/stories/typography/lists/unordered.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { UnorderedListArgs } from "./_types";
+export declare const Unordered: Story<UnorderedListArgs>;
+declare const _default: ComponentMeta<{
+    (props: UnorderedListArgs): JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+}>;
+export default _default;

package/build/stories/typography/paragraph/_types.d.ts

@@ -0,0 +1,5 @@
+import { IParagraphProps } from "@zendeskgarden/react-typography";
+export interface ParagraphArgs extends IParagraphProps {
+    /** Controls the spacing between sibling paragraphs */
+    size?: "small" | "medium" | "large";
+}

package/build/stories/typography/paragraph/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ParagraphArgs } from "./_types";
+/**
+ *  Use Paragraph to render blocks of text with Garden styling.
+ */
+declare const Paragraph: (props: ParagraphArgs) => JSX.Element;
+export { Paragraph };

package/build/stories/typography/paragraph/ordered.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ParagraphArgs } from "./_types";
+export declare const Default: Story<ParagraphArgs>;
+declare const _default: ComponentMeta<(props: ParagraphArgs) => JSX.Element>;
+export default _default;

package/build/stories/typography/typescale/_types.d.ts

@@ -0,0 +1,43 @@
+import { ISMProps, IMDProps, ILGProps, IXLProps, IXXLProps, IXXXLProps } from "@zendeskgarden/react-typography";
+export interface SMArgs extends ISMProps {
+    /** Updates the element's HTML tag */
+    tag?: any;
+    /** Applies bold font style */
+    isBold?: boolean;
+    /** Renders with monospace font */
+    isMonospace?: boolean;
+}
+export interface MDArgs extends IMDProps {
+    /** Updates the element's HTML tag */
+    tag?: any;
+    /** Applies bold font style */
+    isBold?: boolean;
+    /** Renders with monospace font */
+    isMonospace?: boolean;
+}
+export interface LGArgs extends ILGProps {
+    /** Updates the element's HTML tag */
+    tag?: any;
+    /** Applies bold font style */
+    isBold?: boolean;
+    /** Renders with monospace font */
+    isMonospace?: boolean;
+}
+export interface XLArgs extends IXLProps {
+    /** Updates the element's HTML tag */
+    tag?: any;
+    /** Applies bold font style */
+    isBold?: boolean;
+}
+export interface XXLArgs extends IXXLProps {
+    /** Updates the element's HTML tag */
+    tag?: any;
+    /** Applies bold font style */
+    isBold?: boolean;
+}
+export interface XXXLArgs extends IXXXLProps {
+    /** Updates the element's HTML tag */
+    tag?: any;
+    /** Applies bold font style */
+    isBold?: boolean;
+}

package/build/stories/typography/typescale/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SMArgs, MDArgs, LGArgs, XLArgs, XXLArgs, XXXLArgs } from "./_types";
+/**
+ *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
+ */
+declare const SM: (props: SMArgs) => JSX.Element;
+declare const MD: (props: MDArgs) => JSX.Element;
+declare const LG: (props: LGArgs) => JSX.Element;
+declare const XL: (props: XLArgs) => JSX.Element;
+declare const XXL: (props: XXLArgs) => JSX.Element;
+declare const XXXL: (props: XXXLArgs) => JSX.Element;
+export { SM, MD, LG, XL, XXL, XXXL };

package/build/stories/typography/typescale/index.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+export declare const Default: Story<any>;
+declare const _default: ComponentMeta<(props: import("./_types").MDArgs) => JSX.Element>;
+export default _default;

package/generate-story.sh

@@ -0,0 +1,61 @@
+#!/bin/bash
+print_help () {
+	echo "Usage"
+	echo "      $0 new-story-name"
+	exit
+}
+
+if [ $# -lt 1 ]; then
+	print_help
+fi
+
+STORY_NAME="${1}"
+STORY_NAME_LOWER="$(tr '[:upper:]' '[:lower:]' <<< "${STORY_NAME}")"
+generate_component() {
+	cat << EOF
+import { ${STORY_NAME}Props } from "./_types";
+
+export const Basic${STORY_NAME} = ({}: ${STORY_NAME}Props) => {};
+EOF
+}
+
+generate_types() {
+	cat << EOF
+import { BaseProps } from "../../shared/_types";
+export interface ${STORY_NAME}Props extends BaseProps {};
+
+EOF
+}
+generate_styled_component() {
+	cat << EOF
+import styled from "styled-components";
+import { Basic${STORY_NAME} } from "./_component";
+
+export const ${STORY_NAME} = styled(Basic${STORY_NAME})\`\`;
+EOF
+}
+generate_stories() {
+	cat << EOF
+import { Story, Meta } from "@storybook/react";
+import { ${STORY_NAME}Props } from "./_types";
+import { ${STORY_NAME} } from "./${STORY_NAME}";
+
+export default {
+  title: "${STORY_NAME}",
+  component: ${STORY_NAME},
+} as Meta;
+
+const Template: Story<${STORY_NAME}Props> = (args) => <${STORY_NAME} {...args} />;
+
+export const ${STORY_NAME}Base = Template.bind({});
+${STORY_NAME}Base.args = {};
+EOF
+}
+
+mkdir "src/test-stories/$STORY_NAME_LOWER"
+
+generate_component > "src/test-stories/$STORY_NAME_LOWER/_component.tsx"
+generate_types > "src/test-stories/$STORY_NAME_LOWER/_types.ts"
+generate_styled_component > "src/test-stories/$STORY_NAME_LOWER/$STORY_NAME.tsx"
+generate_stories > "src/test-stories/$STORY_NAME_LOWER/$STORY_NAME.stories.tsx"
+2606:50c0:8003::154

package/package.json

@@ -1,16 +1,29 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "0.3.5",
+  "version": "2.2.0",
   "dependencies": {
+    "@zendeskgarden/react-accordions": "^8.49.0",
+    "@zendeskgarden/react-avatars": "^8.49.0",
+    "@zendeskgarden/react-breadcrumbs": "^8.49.0",
     "@zendeskgarden/react-buttons": "^8.48.2",
     "@zendeskgarden/react-chrome": "^8.48.2",
-    "@zendeskgarden/react-theming": "^8.48.2"
+    "@zendeskgarden/react-dropdowns": "^8.49.0",
+    "@zendeskgarden/react-grid": "^8.49.0",
+    "@zendeskgarden/react-loaders": "^8.49.0",
+    "@zendeskgarden/react-notifications": "^8.49.0",
+    "@zendeskgarden/react-pagination": "^8.49.0",
+    "@zendeskgarden/react-tables": "^8.49.0",
+    "@zendeskgarden/react-tags": "^8.49.0",
+    "@zendeskgarden/react-tooltips": "^8.49.0",
+    "@zendeskgarden/react-typography": "^8.49.0",
+    "@zendeskgarden/svg-icons": "^6.31.1",
+    "react-window": "^1.8.6"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "yarn run clean && rollup -c",
-    "build-storybook": "build-storybook -s public",
-    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 6006",
     "clean": "rimraf build",
     "release": "npx auto shipit --base-branch=master",
     "test": "react-scripts test"
@@ -44,20 +57,20 @@
     ]
   },
   "peerDependencies": {
+    "@zendeskgarden/react-theming": "^8.48.2",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
     "@rollup/plugin-image": "^2.1.1",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-interactions": "^6.4.19",
     "@storybook/addon-links": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/node-logger": "^6.4.19",
-    "@storybook/preset-create-react-app": "^4.0.1",
+    "@storybook/preset-create-react-app": "^3.1.7",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
     "@svgr/rollup": "^6.2.1",
@@ -68,18 +81,24 @@
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.23",
+    "@zendeskgarden/react-theming": "^8.48.2",
     "auto": "^10.32.6",
+    "babel-loader": "^8.2.3",
+    "commitizen": "^4.2.4",
+    "cz-conventional-changelog": "3.3.0",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
+    "react-scripts": "4.0.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.68.0",
     "rollup-plugin-typescript2": "^0.31.2",
+    "storybook-addon-designs": "^6.2.1",
     "styled-components": "^5.3.3",
-    "typescript": "^4.6.2",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.69.1"
+    "typescript": "^4.5.0",
+    "web-vitals": "^2.1.4"
   },
   "description": "Unguess design system",
   "author": "Luca Cannarozzo (@cannarocks)",
@@ -89,5 +108,10 @@
     "type": "git",
     "url": "git+https://github.com/AppQuality/unguess-design-system.git"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
 }

package/build/stories/button/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IButtonProps } from '@zendeskgarden/react-buttons';
-export declare const Button: (props: IButtonProps) => JSX.Element;

package/build/stories/button/index.stories.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta, Story } from "@storybook/react";
-import { IButtonProps } from "@zendeskgarden/react-buttons";
-interface IArgs extends IButtonProps {
-    hasStartIcon?: boolean;
-    hasEndIcon?: boolean;
-    isStartIconRotated?: boolean;
-    isEndIconRotated?: boolean;
-}
-export declare const Basic: Story<IArgs>;
-export declare const Primary: Story<IArgs>;
-declare const _default: ComponentMeta<(props: IButtonProps) => JSX.Element>;
-export default _default;

package/rollup.config.js

@@ -1,28 +0,0 @@
-// rollup.config.js
-import image from "@rollup/plugin-image";
-import svgr from "@svgr/rollup";
-import typescript from "rollup-plugin-typescript2";
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
-  input: "src/index.tsx",
-  output: {
-    dir: "build",
-    format: "cjs",
-  },
-  plugins: [
-    image(),
-    svgr({
-      svgoConfig: {
-        plugins: [
-          {
-            active: false,
-            name: "removeDimensions",
-          },
-        ],
-      },
-    }),
-    typescript(),
-  ],
-  external: ["react", "react-dom", "styled-components"],
-};