@appquality/unguess-design-system 2.8.3 → 2.8.6

package/README.md

@@ -1,73 +1,73 @@
-# UNGUESS Design System
-
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-
-## Used by
-
-- [Unguess platform](https://app.unguess.io/)
-
-## Tech stack
-
-Building components
-
-- 🪴 [Zendesk Garden](https://garden.zendesk.com/) as base design system
-- ⚛️ [React](https://reactjs.org/) declarative component-centric UI
-- 📚 [Storybook](https://storybook.js.org) for UI component development and [auto-generated docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- 👩‍🎤 [Styled Components](https://styled-components.com/) for component-scoped styling
-
-Maintaining the system
-
-- 📦 [Yarn](https://yarnpkg.com/) for package management
-- 📦 [NPM](https://www.npmjs.com/) for distribution
-- ✅ [Chromatic](https://www.chromatic.com/) to prevent UI bugs in components (by Storybook maintainers)
-
-## Why
-
-The Unguess design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.
-
-## Install
-
-```bash
-yarn
-```
-
-## Global Styles
-
-Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
-
-#### Option 1: Render the `GlobalStyle` component
-
-Useful when you don't need any custom `body` styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level `App` component.
-
-```javascript
-import { global } from '@storybook/design-system';
-const { GlobalStyle } = global;
-```
-
-```javascript
-/* Render the global styles once per page */
-<GlobalStyle />
-```
-
-#### Option 2: Use the `bodyStyles` to apply styling
-
-Useful when you want build upon the shared global styling.
-
-```javascript
-import { Global, css } from '@storybook/theming';
-import { global } from '@storybook/design-system';
-const { bodyStyles } = global;
-
-const customGlobalStyle = css`
-  body {
-    ${bodyStyles}// Custom body styling for the app
-  }
-`;
-
-const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
-```
-
-```javascript
-/* Render the global styles once per page */
-<CustomGlobalStyle />
-```
+# UNGUESS Design System
+
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+## Used by
+
+- [Unguess platform](https://app.unguess.io/)
+
+## Tech stack
+
+Building components
+
+- 🪴 [Zendesk Garden](https://garden.zendesk.com/) as base design system
+- ⚛️ [React](https://reactjs.org/) declarative component-centric UI
+- 📚 [Storybook](https://storybook.js.org) for UI component development and [auto-generated docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- 👩‍🎤 [Styled Components](https://styled-components.com/) for component-scoped styling
+
+Maintaining the system
+
+- 📦 [Yarn](https://yarnpkg.com/) for package management
+- 📦 [NPM](https://www.npmjs.com/) for distribution
+- ✅ [Chromatic](https://www.chromatic.com/) to prevent UI bugs in components (by Storybook maintainers)
+
+## Why
+
+The Unguess design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.
+
+## Install
+
+```bash
+yarn
+```
+
+## Global Styles
+
+Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
+
+#### Option 1: Render the `GlobalStyle` component
+
+Useful when you don't need any custom `body` styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level `App` component.
+
+```javascript
+import { global } from '@storybook/design-system';
+const { GlobalStyle } = global;
+```
+
+```javascript
+/* Render the global styles once per page */
+<GlobalStyle />
+```
+
+#### Option 2: Use the `bodyStyles` to apply styling
+
+Useful when you want build upon the shared global styling.
+
+```javascript
+import { Global, css } from '@storybook/theming';
+import { global } from '@storybook/design-system';
+const { bodyStyles } = global;
+
+const customGlobalStyle = css`
+  body {
+    ${bodyStyles}// Custom body styling for the app
+  }
+`;
+
+const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
+```
+
+```javascript
+/* Render the global styles once per page */
+<CustomGlobalStyle />
+```

package/generate-story.sh

@@ -1,61 +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"
+#!/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,119 +1,119 @@
-{
-  "name": "@appquality/unguess-design-system",
-  "version": "2.8.3",
-  "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.49.0",
-    "@zendeskgarden/react-dropdowns": "^8.49.0",
-    "@zendeskgarden/react-grid": "^8.49.0",
-    "@zendeskgarden/react-loaders": "^8.49.0",
-    "@zendeskgarden/react-modals": "^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",
-    "react-spring": "^9.4.4",
-    "react-window": "^1.8.6"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "yarn run clean && rollup -c",
-    "build-storybook": "build-storybook",
-    "storybook": "start-storybook -p 6006",
-    "clean": "rimraf build",
-    "release": "npx auto shipit --base-branch=master",
-    "test": "react-scripts test"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "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/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-library": "^0.0.9",
-    "@svgr/rollup": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
-    "@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",
-    "@zendeskgarden/svg-icons": "^6.31.1",
-    "auto": "^10.36.5",
-    "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": "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.5.0",
-    "web-vitals": "^2.1.4"
-  },
-  "description": "Unguess design system",
-  "author": "Luca Cannarozzo (@cannarocks)",
-  "main": "build/index.js",
-  "types": "build/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/AppQuality/unguess-design-system.git"
-  },
-  "license": "ISC",
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
-}
+{
+  "name": "@appquality/unguess-design-system",
+  "version": "2.8.6",
+  "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.49.0",
+    "@zendeskgarden/react-dropdowns": "^8.49.0",
+    "@zendeskgarden/react-grid": "^8.49.0",
+    "@zendeskgarden/react-loaders": "^8.49.0",
+    "@zendeskgarden/react-modals": "^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",
+    "react-spring": "^9.4.4",
+    "react-window": "^1.8.6"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "yarn run clean && rollup -c",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 6006",
+    "clean": "rimraf build",
+    "release": "npx auto shipit --base-branch=master",
+    "test": "react-scripts test"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "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/preset-create-react-app": "^3.1.7",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
+    "@svgr/rollup": "^6.2.1",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@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",
+    "@zendeskgarden/svg-icons": "^6.31.1",
+    "auto": "^10.36.5",
+    "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": "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.5.0",
+    "web-vitals": "^2.1.4"
+  },
+  "description": "Unguess design system",
+  "author": "Luca Cannarozzo (@cannarocks)",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AppQuality/unguess-design-system.git"
+  },
+  "license": "ISC",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

package/build/hooks/useWindowSize.d.ts

@@ -1,4 +0,0 @@
-export default function useWindowSize(): {
-    width: number;
-    height: number;
-};

package/build/index.d.ts

@@ -1,63 +0,0 @@
-import { GlobalStyle } from "./stories/shared/globalStyle";
-export * from "./stories/accordions";
-export * from "./stories/avatar";
-export * from "./stories/breadcrumbs";
-export * from "./stories/buttons/anchor";
-export * from "./stories/buttons/button";
-export * from "./stories/buttons/button-group";
-export * from "./stories/buttons/icon-button";
-export * from "./stories/buttons/split-button";
-export * from "./stories/cards";
-export * from "./stories/campaignCards";
-export * from "./stories/close";
-export * from "./stories/counter";
-export * as DropdownField from "./stories/dropdowns/field";
-export * from "./stories/dropdowns/item";
-export * from "./stories/dropdowns/menu";
-export * from "./stories/dropdowns/multiselect";
-export * from "./stories/dropdowns/select";
-export * from "./stories/forms/checkbox";
-export * as FormField from "./stories/forms/field";
-export * from "./stories/forms/input";
-export * from "./stories/forms/radio";
-export * from "./stories/forms/textarea";
-export * from "./stories/forms/toggle";
-export * from "./stories/grid/col";
-export * from "./stories/grid/row";
-export * from "./stories/grid/grid";
-export * from "./stories/icons";
-export * from "./stories/label";
-export * from "./stories/loaders/progress";
-export * from "./stories/loaders/skeleton";
-export * from "./stories/loaders/spinner";
-export * from "./stories/login-form";
-export * from "./stories/logo";
-export * from "./stories/modals";
-export * from "./stories/navigation/body";
-export * from "./stories/navigation/content";
-export * from "./stories/navigation/header";
-export * from "./stories/navigation/header/header-item";
-export * from "./stories/navigation/app-header";
-export * from "./stories/navigation/main";
-export * from "./stories/navigation/nav";
-export * from "./stories/navigation/nav/nav-item";
-export * from "./stories/navigation/sidebar";
-export * from "./stories/navigation/chrome";
-export * from "./stories/notifications";
-export * from "./stories/pagination";
-export * from "./stories/profile-modal";
-export { Table, Head as TableHead, HeaderRow, HeaderCell, Body as TableBody, Row as TableRow, Cell as TableCell, Caption, } from "./stories/table";
-export { GroupRow, GroupedTable, } from "./stories/table/grouped";
-export * from "./stories/tags";
-export * from "./stories/tiles";
-export * from "./stories/theme";
-export * from "./stories/title";
-export * from "./stories/trigger";
-export * from "./stories/typography/block-quote";
-export * from "./stories/typography/code";
-export * from "./stories/typography/ellipsis";
-export * from "./stories/typography/lists";
-export * from "./stories/typography/paragraph";
-export * from "./stories/typography/span";
-export * from "./stories/typography/typescale";
-export { GlobalStyle };