@appquality/unguess-design-system 0.3.5 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+# v1.0.0 (Fri Mar 04 2022)
+
+#### 💥 Breaking Change
+
+- Cup 427 ds buttons [#2](https://github.com/AppQuality/unguess-design-system/pull/2) ([@cannarocks](https://github.com/cannarocks))
+
+#### ⚠️ Pushed to `master`
+
+- update .npmignore ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v1.0.0 (Fri Mar 04 2022)
+
+#### 💥 Breaking Change
+
+- Cup 427 ds buttons [#2](https://github.com/AppQuality/unguess-design-system/pull/2) ([@cannarocks](https://github.com/cannarocks))
+
+#### ⚠️ Pushed to `master`
+
+- update .npmignore ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v1.0.0 (Fri Mar 04 2022)
+
+#### 💥 Breaking Change
+
+- Cup 427 ds buttons [#2](https://github.com/AppQuality/unguess-design-system/pull/2) ([@cannarocks](https://github.com/cannarocks))
+
+#### ⚠️ Pushed to `master`
+
+- update .npmignore ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v0.3.5 (Thu Mar 03 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -1,4 +1,5 @@
 import { GlobalStyle } from './stories/shared/globalStyle';
-export * from './stories/button';
+export * from './stories/buttons/button';
+export * from './stories/buttons/anchor';
 export * from './stories/theme';
 export { GlobalStyle };

package/build/index.js

@@ -42,15 +42,24 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: "pink", foreground: "red" }), fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }) });
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: "#003A57" }), fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }) });
 
 var GlobalStyle = styled.createGlobalStyle(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\nbody {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }"], ["\nbody {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }"])), theme.fonts.system);
 var templateObject_1$1;
 
-var DressBerryButton = styled__default["default"](reactButtons.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0.5rem 2rem;\n"], ["\n    padding: 0.5rem 2rem;\n"])));
-var Button = function (props) { return jsxRuntime.jsx(DressBerryButton, __assign({}, props)); };
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+/**
+ *
+ * Buttons let users take action quickly. Use a Button to enable actions or decisions that are important to a user’s workflow.
+ */
+var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
+Button.StartIcon = UgButton.StartIcon;
+Button.EndIcon = UgButton.EndIcon;
 var templateObject_1;
 
+var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
+
+exports.Anchor = Anchor;
 exports.Button = Button;
 exports.GlobalStyle = GlobalStyle;
 exports.theme = theme;

package/build/stories/buttons/anchor/_types.d.ts

@@ -0,0 +1,3 @@
+import { IAnchorProps } from "@zendeskgarden/react-buttons";
+export interface AnchorArgs extends IAnchorProps {
+}

package/build/stories/buttons/anchor/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AnchorArgs } from "./_types";
+declare const Anchor: (props: AnchorArgs) => JSX.Element;
+export { Anchor };

package/build/stories/buttons/anchor/index.stories.d.ts

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

package/build/stories/buttons/button/_types.d.ts

@@ -0,0 +1,16 @@
+import { IButtonProps, IButtonStartIconProps, IButtonEndIconProps } from "@zendeskgarden/react-buttons";
+export interface ButtonArgs extends IButtonProps {
+    /**
+      It's a boolean value that determines whether the button has an icon on the left side.
+    */
+    hasStartIcon?: boolean;
+    /**
+      It's a boolean value that determines whether the button has an icon on the right side.
+    */
+    hasEndIcon?: boolean;
+    isStartIconRotated?: boolean;
+    isEndIconRotated?: boolean;
+    StartIcon?: IButtonStartIconProps;
+    EndIcon?: IButtonEndIconProps;
+    variant?: string;
+}

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ButtonArgs } from "./_types";
+/**
+ *
+ * Buttons let users take action quickly. Use a Button to enable actions or decisions that are important to a user’s workflow.
+ */
+declare const Button: {
+    (props: ButtonArgs): JSX.Element;
+    StartIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonStartIconProps): JSX.Element;
+        displayName: string;
+    };
+    EndIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
+        displayName: string;
+    };
+};
+export { Button };

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ButtonArgs } from "./_types";
+export declare const Default: Story<ButtonArgs>;
+export declare const Basic: Story<ButtonArgs>;
+export declare const Primary: Story<ButtonArgs>;
+export declare const WithIcon: Story<ButtonArgs>;
+declare const _default: ComponentMeta<{
+    (props: ButtonArgs): JSX.Element;
+    StartIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonStartIconProps): JSX.Element;
+        displayName: string;
+    };
+    EndIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
+        displayName: string;
+    };
+}>;
+export default _default;

package/build/stories/buttons/button-group/_types.d.ts

@@ -0,0 +1,3 @@
+import { IButtonGroupProps } from "@zendeskgarden/react-buttons";
+export interface ButtonGroupArgs extends IButtonGroupProps {
+}

package/build/stories/buttons/button-group/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonGroupArgs } from "./_types";
+/**
+A Button group lets users make a selection from a set of options.
+
+This is a legacy component and may be deprecated in the future. Garden does not presently recommend the use of Button groups.
+**/
+declare const ButtonGroup: (props: ButtonGroupArgs) => JSX.Element;
+export { ButtonGroup };

package/build/stories/buttons/button-group/index.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ButtonGroupArgs } from "./_types";
+interface ButtonGroupProps extends ButtonGroupArgs {
+    items: any[];
+}
+export declare const TwoItems: Story<ButtonGroupProps>;
+export declare const WithBorders: Story<ButtonGroupProps>;
+export declare const RoundedItems: Story<ButtonGroupProps>;
+declare const _default: ComponentMeta<(props: ButtonGroupArgs) => JSX.Element>;
+export default _default;

package/build/stories/buttons/shared/_shared.d.ts

@@ -0,0 +1,2 @@
+declare const paddingDefault: import("styled-components").FlattenSimpleInterpolation;
+export { paddingDefault };

package/build/stories/buttons/utils/useButtonVariant.d.ts

@@ -0,0 +1,5 @@
+import { ButtonArgs } from "../button/_types";
+declare const getButtonVariant: (args: ButtonArgs) => {
+    isBasic?: boolean | undefined;
+};
+export { getButtonVariant };

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/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,20 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "0.3.5",
+  "version": "2.0.0",
   "dependencies": {
+    "@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-tooltips": "^8.49.0",
+    "@zendeskgarden/react-typography": "^8.49.0",
+    "@zendeskgarden/svg-icons": "^6.31.1"
   },
   "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 +48,18 @@
     ]
   },
   "peerDependencies": {
+    "@zendeskgarden/react-theming": "^8.48.2",
     "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/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
     "@svgr/rollup": "^6.2.1",
@@ -69,17 +71,18 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.23",
+    "@zendeskgarden/react-theming": "^8.48.2",
     "auto": "^10.32.6",
+    "babel-loader": "^8.2.3",
     "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",
     "styled-components": "^5.3.3",
     "typescript": "^4.6.2",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.69.1"
+    "web-vitals": "^2.1.4"
   },
   "description": "Unguess design system",
   "author": "Luca Cannarozzo (@cannarocks)",

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"],
-};