# smartbear-design-system

> Presentational components implementing the SmartBear Design System

Latest version **0.1.0** (published 2020-08-05) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install smartbear-design-system
pnpm add smartbear-design-system
yarn add smartbear-design-system
bun add smartbear-design-system
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-08-05 |
| First published | 2020-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 4.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aslak Hellesøy |
| Maintainers | cukebot |

## Links

- npm: https://www.npmjs.com/package/smartbear-design-system
- Repository: https://github.com/SmartBear/design-system
- Homepage: https://github.com/SmartBear/design-system#readme
- Issues: https://github.com/SmartBear/design-system/issues
- npm.io page: https://npm.io/package/smartbear-design-system

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.44
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8
- [styled-components](https://npm.io/package/styled-components.md) ^5.1.1
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.2

## Recent versions

- 0.1.0 (latest) — 2020-08-05

## README

# SmartBear Design System

This repository contains presentational components implementing the
[SmartBear Design System](https://smartbear.atlassian.net/wiki/spaces/UT/pages/632422482/Design+System+1.0.0).

See a [live demo](https://smartbear.github.io/design-system/) based on [StoryBook](https://storybook.js.org/).

Currently the only implementation is based on [React](https://reactjs.org/), using [Styled Components](https://www.styled-components.com/),
and only a few components are implemented.

If people want to implement components using other UI technologies such as [Vue](https://vuejs.org/), [Ember](https://emberjs.com/)
or other we could move the React implementation to a sub directory.

We could also consider replacing Styled Components with a general-purpose [CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)
and [CSS Modules](https://github.com/css-modules/css-modules) so that the same stylesheets can be used with several
UI technologies.

Suggestions and pull requests welcome!

## Try it out

    # Install dependencies
    npm install

    # View components in Storybook
    npm run storybook

    # Run tests
    npm test

## Deploy live demo

Run this:

    npm run deploy-storybook

TODO: Set up CI and run this automatically

## Architecture

The design system is based on [tailwindcss](https://tailwindcss.com) and [tailwindui](https://tailwindui.com).
This is extended with a custom theme and custom CSS classes.

### Custom theme

The design system theme is implemented by extending tailwindcss' default theme, as described in [Customizing Your Design System](https://tailwindcss.com/course/customizing-your-design-system).

The theme defines the following values:

- Colours (using design system specific names)
- Spacing (padding, margin, width and height)

The theme is defined in `tailwind.config.js`. All names in the theme use the `sb-` prefix to distinguish from default tailwindcss names.

### Defining Components

We define components in CSS according to tailwindcss' [Extracting CSS components with @apply](https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply)
guidelines.

## Upgrading Dependencies

It's good practice to regularly upgrade dependencies:

    npx npm-check-updates --upgrade

After doing this, export the default tailwind config

    npx tailwind init tailwind-full.config.js --full

This file is not in source control (it's in `.gitignore`), but it's useful to look at it to see if the structure has changed,
in which case you may have to update the theme in `tailwind.config.js`

## Releasing

    npm version [major|minor|patch]
    npm publish

---
_Source: https://npm.io/package/smartbear-design-system · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._