# @catastrophee/ui

> Common UI Components

Latest version **0.0.3** (published 2020-02-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @catastrophee/ui
pnpm add @catastrophee/ui
yarn add @catastrophee/ui
bun add @catastrophee/ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-02-13 |
| First published | 2020-02-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 750.6 KB |
| Known vulnerabilities | 0 (+22 in 1 direct dependencies) |
| Install scripts | no |
| Author | Stephani Moroni Bishop |
| Maintainers | stephy |

## Links

- npm: https://www.npmjs.com/package/@catastrophee/ui
- Repository: https://github.com/stephy/catastrophee
- Homepage: http://castastrophee.com
- Issues: https://github.com/stephy/catastrophee/issues
- npm.io page: https://npm.io/package/@catastrophee/ui

## Dependencies (16)

- [mobx](https://npm.io/package/mobx.md) ^5.10.1
- [react](https://npm.io/package/react.md) ^16.8.6
- [glamor](https://npm.io/package/glamor.md) ^2.20.40
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [uuidv4](https://npm.io/package/uuidv4.md) ^4.0.0
- [dompurify](https://npm.io/package/dompurify.md) ^1.0.10
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [mobx-utils](https://npm.io/package/mobx-utils.md) ^5.4.1
- [@catastrophee/models](https://npm.io/package/@catastrophee/models.md) ^0.0.2
- [@catastrophee/styles](https://npm.io/package/@catastrophee/styles.md) ^0.0.3
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.4
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.17
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.8.1
- [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^5.8.2
- [@fortawesome/fontawesome-common-types](https://npm.io/package/@fortawesome/fontawesome-common-types.md) ^0.2.19

## Recent versions

- 0.0.3 (latest) — 2020-02-13
- 0.0.2 — 2020-02-13

## README

# @catastrophee/ui

_@catastrophee/ui_ is a set of React components. These componenets are currently in beta. _Use at your own risk_

# Using @catastrophee/ui

## Install

Installing uicommon on your project

```
npm install --save @catastrophee/ui
```

or

```
yarn add @catastrophee/ui
```

## Import

```
import { Checkbox } from '@catastrophee/ui';
```

## Use

```
<Checkbox ...props />
```

Each component has its own README, please refer to those for more information.

## Need to overwrite styles?

Ideally, you shouldn't **need** to overwrite styles. But if you must, each component takes a prop called **style**. The style prop is _typed_.
To know the key you need to use to replace the style, right click on your component and look for _data-style_ attribute on the html tag. For instance, if **data-style="list"** you can replace the background color with:
`<Component style={{ list: { backgroundColor: "green"}}}>`

# Developing

## Storybook

To run examples:
From project root folder:

```
yarn install
```

```
yarn run storybook
```

_Note_ Stories are availables in the files with .stories extensions

## Rules for Styling Components

- For styling, use glamor.
- Always sort your keys.
- Always put styles in the same file. Usually right after imports, on top. Please don't create one file for style and one file for component. Each component should be one file, easy to use. Default styles should be called defaultStyles.
- Always allow style overwrites. For instance, each component should start with `const styles = merge({}, defaultStyles, style);` and components should always take a style prop.
- Every HTML tag should contain a data-style attribute with the key for that style. If the style has no styles, still create the key but leave it empty
- For all styles add proper typing. For instance, let say your component looks like this:

  ```js
  <div>
    <span>{title}</span>
  </div>
  ```

  Once you add styles it should look like this

  ```js
  const defaultStyles = {
    container: {},
    title: {},
  };
  ....

  <div {...css(defaultStyles.container)}>
    <span {...css(defaultStyles.title)}>{title}</span>
  </div>
  ```

  Once you allow overwrite styles it should look like this

  ```js
  const defaultStyles = {
    container: {},
    title: {},
  };

  const styles = merge({}, defaultStyles, props.style);
  render() {
    <div {...css(styles.container)}>
      <span {...css(styles.title)}>{title}</span>
    </div>
  }
  ```

Let people know how to overwrite styles

```jsx
const defaultStyles = {
  container: {},
  title: {},
};
interface StylesType {
  container: CssPropertyType,
  title: CssPropertyType,
}
....
const styles = merge({}, defaultStyles, props.style);
render() {
  <div {...css(styles.container)} data-style="container">
    <span {...css(styles.title)} data-style="title">{title}</span>
  </div>
}
```

Please take a look at existing components for examples

## Publishing @catastrophee/ui

### @catastrophee/ui

```
cd packagaes/ui
```

```
yarn install
```

```
yarn publish
```

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