@appquality/unguess-design-system 2.12.86 → 3.0.2-alpha

package/README.md

@@ -1,73 +0,0 @@
-# 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 +0,0 @@
-#!/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