open-index/open-npm huggingface dataset:
npm package: @protacon/arrow-ui-react-components
Description: Common ui components that can be shared across projects
Latest version: 6.1.0

# Arrow ui

Common ui components that can be shared across projects

# Development

## getting started

`npm install` to install dependencies

then

`npm run develop`

to watch for file changes and compile sass and launch storybook.

then go to `localhost:6006` to see changes in live to components

## file structure

`/src/lib` contains all components which are structured in following way:

```
folder name: component name
index.tsx : component related code
component_name.sass: component related styles
```

`/stories` includes all storybook related code

## Development workflow

1. Create new component in lib folder as so:

```
src
└───lib
│   └───ComponentName
│       │   index.tsx
│       │   ComponentName.sass
```

2. After creating initial component, add it to storybook to watch live updates with following file name: `ComponentName.stories.js`.
   See Button.stories.js for example how to use storybook.

3. Update types.d.ts to export types for newly created component so that other projects consuming this library can find it.

## Building library

run `npm run build`

## Usage in other projects

Run `npm install --save @protacon/arrow-ui-components`

Note: After updating components here you need to update this package in the other project by running `npm update @protacon/arrow-ui-components`

Remember to change version in package.json accordingly.

## Using development version

You can use unpublished version of this project by setting git repository url to package.json
or from your local development environment by [npm link](https://docs.npmjs.com/cli/link).

# Publishing package to npm

Publishing is handled by Jenkins. It publishes this package to the npm when Git tag is created and pushed.

NOTE! Tag is used as the version in npm, so it overrides the version in package.json.
Version in package.json should still be kept up to date.

# TODO

- input fields
  - text field
  - text area field
  - checkbox
  - select
  - color select
  - fileupload
  - time picker
  - date time picker
  - date range field
  - error notification for errors
- full screen modal
- bordered rows
- breadcrumb
- typography components with defined sizes

# known issues

- Storybook components must be imported from build folder because of mismatch between typescript and javascript. Adding typescript support to storybook would mean ejecting CRA app and might bring additional difficulties
- sass usage could be refactored
- declaration of function components is tricky