# befish-ui-ts

> This project skeleton was created to help people get started with creating their own React component library using:

Latest version **1.0.0** (published 2020-04-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install befish-ui-ts
pnpm add befish-ui-ts
yarn add befish-ui-ts
bun add befish-ui-ts
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-04-20 |
| First published | 2020-04-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | BeFish |
| Maintainers | mserpez |

## Links

- npm: https://www.npmjs.com/package/befish-ui-ts
- npm.io page: https://npm.io/package/befish-ui-ts

## Dependencies (2)

- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.9.11
- [styled-components](https://npm.io/package/styled-components.md) ^5.1.0

## Recent versions

- 1.0.0 (latest) — 2020-04-20

## README

# React Component Library

This project skeleton was created to help people get started with creating their own React component library using:

- [Rollup](https://github.com/rollup/rollup)
- [Sass](https://sass-lang.com/)
- [TypeScript](https://www.typescriptlang.org/)

[**Read my blog post about why and how I created this project skeleton ▸**](https://blog.harveydelaney.com/creating-your-own-react-component-library/)

## Development

### Testing

```shell
npm run test
```

### Building

```shell
npm run build
```

### Storybook

```shell
npm run storybook
```

### Installing component library locally

Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:

```shell
npm i --save ../react-component-library
```

which will install the local component library as a dependency in `test-app`. Your components can then be imported and used.

### Publishing

First make sure that you've updated the `name` field in `package.json` to reflect your NPM package name in your private or public NPM registry. Then run:

```shell
npm publish
```

## Component Usage

Let's say you created a public NPM package called `harvey-component-library` with the `TestComponent` component created in this repository.

Usage of the component (after the library installed as a dependency into another project) will be:

```javascript
import React from 'react';
import { TestComponent } from 'harvey-component-library';

const App = () => (
  <div className='app-container'>
    <h1>Hello I'm consuming the component library</h1>
    <TestComponent theme='primary' />
  </div>
);

export default App;
```

## Using internal SASS variables

I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the `typography.scss` and `variables.scss` into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.

For example, let's say you installed `harvey-component-library` into your project. To use the exported variables/mixins, in a SASS file you would do the following:

```sass
@import '~harvey-component-library/build/typography';

.example-container {
    @include heading;

    color: $harvey-white;
}
```

# LISTA DE COMPONENTES A PASAR:

## FORM:

1. TextField
1. AreaField
1. PasswordField
1. IntField
1. DecimalField
1. TimePicker
1. DatePicker
1. SwichInput
1. RadioInput ( JSON CON OPCIONES CADA UNA DIBUJA UN RADIO)
1. CheckBoxInput
1. SelectInput (simple and multiple)
1. AutoCompleteInput (simple and multiple)
1. ColorInput

## FORM NICE TO HAVE:

1. DateTimePicker
1. DateRangePicker

## BUTTONS:

1. containedButton
1. outlinedButton
1. linkButton
1. floatButton (simple and menu)

## BUTTONS NICE TO HAVE:

1. iconButton

## ADMIN LAYOUT:

1. Header
1. Menu
1. Container
1. Footer

# ACLARACIONES:

1. Funcional Components.
1. Use memo
1. todo hooks

# TESTING

1. https://enzymejs.github.io/enzyme/
1. https://npmjs.com/package/chai
1. https://www.npmjs.com/package/mocha
1. https://sinonjs.org/
1. https://www.npmjs.com/package/nyc
1. https://www.npmjs.com/package/nock

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