Common ui components that can be shared across projects
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
/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
- Create new component in lib folder as so:
src
└───lib
│ └───ComponentName
│ │ index.tsx
│ │ ComponentName.sass
-
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. -
Update types.d.ts to export types for newly created component so that other projects consuming this library can find it.
run npm run build
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.
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 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.
- 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
- 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