@appquality/unguess-design-system 0.1.1 → 0.3.1

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 2,
+    "useTabs": false
+}

package/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">    
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link 
+href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap" 
+rel="stylesheet">

package/.storybook/preview.js

@@ -1,3 +1,18 @@
+import { ThemeProvider } from "@zendeskgarden/react-theming";
+import { Chrome } from '@zendeskgarden/react-chrome';
+import GlobalStyle from "../src/stories/shared/globalStyle";
+import { theme } from '../src/stories/theme';
+
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Story />
+    </ThemeProvider>
+  ),
+];
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+# v0.3.1 (Thu Mar 03 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat: change theme export ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v0.2.0 (Thu Mar 03 2022)
+
+#### 🚀 Enhancement
+
+- Cup 422 setup theme [#1](https://github.com/AppQuality/unguess-design-system/pull/1) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v0.2.0 (Wed Mar 02 2022)
+
+#### 🚀 Enhancement
+
+- Cup 422 setup theme [#1](https://github.com/AppQuality/unguess-design-system/pull/1) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v0.1.2 (Tue Mar 01 2022)
+
+#### ⚠️ Pushed to `master`
+
+- chore: move @zendeskgarden/react-theming to dependency ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v0.1.1 (Tue Mar 01 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -1 +1,2 @@
-export * from './stories/Button';
+export * from './stories/button';
+export * from './stories/theme';

package/build/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var reactButtons = require('@zendeskgarden/react-buttons');
 var styled = require('styled-components');
+var reactTheming = require('@zendeskgarden/react-theming');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,8 +42,10 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var DressBerryButton = styled__default["default"](reactButtons.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0.5rem 1rem;\n    background-color: magenta;\n    color: white;\n"], ["\n    padding: 0.5rem 1rem;\n    background-color: magenta;\n    color: white;\n"])));
+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 templateObject_1;
 
+__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' }) });
+
 exports.Button = Button;

package/build/stories/{Button → button}/index.stories.d.ts

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

package/build/stories/shared/globalStyle.d.ts

@@ -0,0 +1,2 @@
+declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default GlobalStyle;

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

@@ -0,0 +1,96 @@
+declare const theme: {
+    colors: {
+        primaryHue: string;
+        foreground: string;
+        base: "light" | "dark";
+        background: string;
+        dangerHue: string;
+        warningHue: string;
+        successHue: string;
+        neutralHue: string;
+        chromeHue: string;
+    };
+    fonts: {
+        system: string;
+        mono: string;
+    };
+    rtl: boolean;
+    document?: any;
+    borders: {
+        sm: string;
+        md: string;
+    };
+    borderRadii: {
+        sm: string;
+        md: string;
+    };
+    borderStyles: {
+        solid: string;
+    };
+    borderWidths: {
+        sm: string;
+        md: string;
+    };
+    breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    components: Record<string, any>;
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+    };
+    fontWeights: {
+        thin: number;
+        extralight: number;
+        light: number;
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+    iconSizes: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    lineHeights: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+    };
+    shadowWidths: {
+        sm: string;
+        md: string;
+    };
+    shadows: {
+        sm: (color: string) => string;
+        md: (color: string) => string;
+        lg: (offsetY: string, blurRadius: string, color: string) => string;
+    };
+    space: {
+        base: number;
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    palette: Record<string, string | Record<string | number, string>>;
+};
+export default theme;

package/package.json

@@ -1,24 +1,19 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "0.1.1",
-  "description": "",
-  "main": "build/index.js",
-  "types": "build/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/AppQuality/unguess-design-system.git"
-  },
+  "version": "0.3.1",
   "dependencies": {
-    "@zendeskgarden/react-buttons": "^8.48.2"
+    "@zendeskgarden/react-buttons": "^8.48.2",
+    "@zendeskgarden/react-chrome": "^8.48.2",
+    "@zendeskgarden/react-theming": "^8.48.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "yarn run clean && rollup -c",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
-    "clean": "rimraf build"
+    "storybook": "start-storybook -p 6006 -s public",
+    "clean": "rimraf build",
+    "release": "npx auto shipit --base-branch=master",
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": [
@@ -74,7 +69,6 @@
     "@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",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -86,5 +80,14 @@
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4",
     "webpack": "^5.69.1"
-  }
+  },
+  "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"
 }

package/src/index.tsx

@@ -1 +1,5 @@
-export * from './stories/Button';
+export * from './stories/button';
+
+
+// Theme settings
+export * from './stories/theme';

package/src/stories/{Button → button}/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/react";
+import { ComponentMeta, Story } from "@storybook/react";
 import { IButtonProps } from "@zendeskgarden/react-buttons";
 import { Button } from ".";
 
@@ -9,11 +9,6 @@ interface IArgs extends IButtonProps {
   isEndIconRotated?: boolean;
 }
 
-export default {
-  title: "Button",
-  component: Button,
-} as Meta;
-
 const defaultArgs: IArgs = {
   isBasic: false,
   isPrimary: false,
@@ -39,3 +34,9 @@ Primary.args = {
   children: "button",
   onClick: () => alert("clicked!"),
 };
+
+
+export default {
+  title: "Button",
+  component: Button,
+} as ComponentMeta<typeof Button>;

package/src/stories/{Button → button}/index.tsx

@@ -2,9 +2,7 @@ import { Button as ZendeskButton, IButtonProps } from '@zendeskgarden/react-butt
 import styled from 'styled-components';
 
 const DressBerryButton = styled(ZendeskButton)`
-    padding: 0.5rem 1rem;
-    background-color: magenta;
-    color: white;
+    padding: 0.5rem 2rem;
 `;
 
 

package/src/stories/shared/globalStyle.ts

@@ -0,0 +1,11 @@
+import { createGlobalStyle } from "styled-components";
+import { theme } from "../theme";
+
+const GlobalStyle = createGlobalStyle`
+body {
+    font-family: ${theme.fonts.system};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }`;
+
+export default GlobalStyle;

package/src/stories/theme/index.ts

@@ -0,0 +1,14 @@
+import { DEFAULT_THEME } from "@zendeskgarden/react-theming";
+
+export const theme = {
+  ...DEFAULT_THEME,
+  colors: {
+    ...DEFAULT_THEME.colors,
+    primaryHue: "pink",
+    foreground: "red",
+  },
+  fonts: {
+    ...DEFAULT_THEME.fonts,
+    system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif',
+  },
+};