A design system and React component framework developed at Stena Line.
All components are available to see in Storybook.
https://stenait.github.io/stenajs-webui
| Package | NPM version |
|---|---|
| calendar |  |
| core |  |
| elements |  |
| forms |  |
| grid |  |
| grid-export |  |
| input-mask |  |
| modal |  |
| panels |  |
| redux |  |
| select |  |
| theme |  |
| tooltip |  |
This project is very much in development, so there may be bugs. If you have any issues, create an issue in Github, or submit a PR with a fix.
See CONTRIBUTING.md for more information on code conventions, etc.
create-react-app is the recommended way of setting up a project.
All documentation uses yarn.
stenajs-webui is built with emotion and styled-system.
stenajs-webui use Font Awesome for icons.
@stenajs-webui/core does not use any icons, but most other packages require Font Awesome.
New and converted stenajs-webui components use CSS variables.
They can be styled by changing the CSS variables defined in their corresponding .module.css file.
stenajs-webui is built with Typescript, and all types are included in the npm package.
There is no need for DefinitelyTyped.
$ yarn add @stenajs-webui/coreInstall any other @stenajs-webui packages in the same way.
core is required by all other packages, and most also require elements.
Most stenajs-webui packages have peer dependencies that have to be met in order to use them.
They are specified in their respective package.json.
For example, to use @stenajs-webui/core you must add the following dependencies:
$ yarn add @emotion/react \
@emotion/styled \
csstype \
prop-types \
react \
react-dom \
styled-systemIf you are using Typescript, you must also add the following dependencies:
$ yarn add typescript
@types/react \
@types/react-dom \
@types/styled-systemtypescript is required by create-react-app when using Typescript, stenajs-webui does not require it.
If you are also using @stenajs-webui/elements, you must also add the following dependencies:
$ yarn add @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/react-fontawesomeSee the package.json file for each package to see what dependencies are required.
If you need to make changes to the library code and test it in your application, you can use Yalc.
Copy this <link> tag into the <head> tag in your public/index.html to define the font in your app:
<link
href="https://d2zob0vy63qnjk.cloudfront.net/StenaSans.css"
rel="stylesheet"
type="text/css"
/>