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.

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