@appquality/unguess-design-system 3.0.7-alpha → 3.0.9-alpha

package/README.md

@@ -0,0 +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 />
+```

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: {
     decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
@@ -76,7 +75,7 @@ export declare const Default: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -380,7 +379,7 @@ export declare const Basic: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -684,7 +683,7 @@ export declare const Primary: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -988,7 +987,7 @@ export declare const WithIcon: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.0.7-alpha",
+  "version": "3.0.9-alpha",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -9,7 +9,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "yarn run clean && rollup -c",
-    "clean": "rimraf build"
+    "clean": "rimraf build",
+    "release": "npx auto shipit --base-branch=master",
+    "type:check": "tsc"
   },
   "repository": {
     "type": "git",
@@ -32,6 +34,7 @@
     "@nivo/sunburst": "^0.80.0",
     "@nivo/tooltip": "^0.80.0",
     "@nivo/waffle": "^0.80.0",
+    "react-spring": "^9.7.1",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",
@@ -57,7 +60,6 @@
     "@zendeskgarden/react-tooltips": "^8.49.0",
     "@zendeskgarden/react-typography": "^8.49.0",
     "react-slick": "^0.29.0",
-    "react-spring": "^9.4.4",
     "react-window": "^1.8.6",
     "ua-parser-js": "^1.0.2"
   },
@@ -89,8 +91,8 @@
     "formik": "^2.2.9",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-scripts": "^5.0.1",
     "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
     "rimraf": "3.0.2",
     "rollup": "~2.66",
     "rollup-plugin-typescript2": "^0.34.1",

package/.babelrc.json

@@ -1,16 +0,0 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "chrome": 100
-        }
-      }
-    ],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
-  ],
-  "plugins": []
-}