@protacon/arrow-ui-react-components

Arrow ui

Common ui components that can be shared accross 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

1. 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.

2. 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

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