FLOWui

React UI/UX components and utilities for WISEflow.

Be aware that breaking changes may occur in minor updates without notice.

Usage

Add the dependency to your react project

yarn add @uniwise/flow-ui

Available components can be found in the storybook here https://uniwise.github.io/flow-ui

Development

Install dependencies

Install all the need dependencies from package.json

yarn install

Build Semantic UI

build Semantic UI by running

yarn semantic:build

Developing a new component

In order to start developing new components and features the best way to get started will be the

yarn run storybook

This will spin up the storybook dev server and allow you to see the components. You can then create new components inside src/ and live reload them by running

yarn start

Styles

For the most part emotion(CSS in JS) is used for styling Flow UI components besides the styling provided by Semantic UI and other packages. For further information about emotion please take a look at their documentation.

Storybook

In order to display components in storybook there have to be a story for the component. Stories should end with *.stories.tsx in order to be includes in storybook. Storybook comes with the following addons:

• @storybook/addon-actions
• @storybook/addon-links
• @storybook/addon-knobs
• @storybook/addon-info

See the corresponding documentation at Storybook's github repo for further information.

Global Styles

In order to import global styles in storybook you should import the styles in /.storybook/config.js as with the semantic styles.

Semantic UI (Fomantic UI)

Due to the fact that Flow UI depends on Semantic UI we somehow need to manage the Semantic UI styles. In order to provide maximum customization the Semantic UI build setup is located inside Flow UI. For documentation regarding Semenatic UI build setup visit https://semantic-ui.com/usage/theming.html.

For now the Semantic UI build setup is configured to use a theme called flow-ui which can be found in the /semantic/src/themes directory. Inside the theme there will be variables for each of the semantic components in semantic that can be tweaked and customized to fit your needs.

In order to build and compile the styles you can use yarn run semantic:build. This command will build the semantic stylesheets and place it in /dist/css directory.

New Component Procedure

• Create componentname.less in semantic/src/definitions/componenttype and add styling. If no configuration is needed, copy and paste the css from the semanticui.zip
• Create componentname.overrides and componentname.variables in both semantic/src/site/componenttype and semantic/src/themes/componenttype. Copy and paste content from any other component
• Import component in semantic/src/semantic.less
• Add component to semantic/src/theme.config
• Add component to the components array in semantic/src/tasks/config/default.js
• Add component to the components array in root/semantic.json
• Run yarn build-semantic

Build

Building the project using yarn run build will delete the exsisting dist folder and compile the project includeing Typescript, CSS and so on using RollupJS.