@skf-design-system/ui-components-react

SKF UI Components React

Example App | MS Teams | Storybook • Beta | Wiki | Report Issues | Code Sandbox

Introduction

The SKF UI Library is a collection of components that is meant to facilitate the creation of web applications across the global SKF organization. Using the SKF UI Library will give apps an SKF look and feel, and will let users focus on building business logic and features, instead of worrying about the basics. We support SSR and Nextjs!

🏃 Getting started

Let's go!

💻 Pre-requisities

Your project needs to be based on React >=18. Notice! TypeScript is strongly recommended.

Public package

This repository is internal within SKF-Internal enterprise organisation. However, we publish our package externally with public in order to enable easy consumption of our components.

Find our package here, @skf-design-system/ui-components-react

Simply install it with one of the commands below.

Install using NPM

npm install @skf-design-system/ui-components-react

Install using pnpm

pnpm add @skf-design-system/ui-components-react

Install using Yarn

yarn add @skf-design-system/ui-components-react

Finally wrap your app in SkfUiProvider

Wrap your app in SkfUiProvider to get the correct base styling and proper React context, and your good to go..

import { SkfUiProvider } from "@skf-design-system/ui-components-react";
import { MyApp } from './App.tsx';
...
<SkfUiProvider>
	<MyApp/>
</SkfUiProvider>

Testing with Jest in NextJS

Here is how to configure jest to work with our components in NextJS

📖 Further reading

Getting started with our components

We use Storybook to document and showcase our components in the best way possible. This is the best place to read up on how to use our components. The main branch of our Storybook can be found here.

🎁 Contributing

Would you like to contribute to the ui components library? That is awesome! Thank you for wanting to be part of our community.

SKF-email

In order to contribute, you will need a valid SKF-email ending with @skf.com as your primary GitHub-email to be able to clone and install this repo.

🙋‍♀️ But I am a consultant outside SKF domain without SKF email?

🛠️ Troubleshooting

🙋‍♀️ But I am a consultant outside the SKF domain without SKF email?

Contact us and let's see what solution suit you best.

🙋‍♀️ I get a 404 when I try to reach the GitHub page

• Do you have an SKF email address? If not contact your manager/SKF contact.
• Do you have SSO enabled? If not contact IT.
• Do you have access to GitHub on your SKF account? Contact IT and make sure your account have access to the Enterprise Organisation.

🙋‍♀️ I get a compilation error talking about ecmascript modules, issues with date-fns, etc

Your bundler is trying to import modules using commonJS that we don't support. You could be using Webpack (used in create-react-app for example) that needs commonJS which we don't support. The easiest is if you start up/convert your project using Vite (= modern create-react-app) or the React based backend/frontend meta framework Nextjs.

🙋‍♀️ Our app is Created with Create-react-app / using webpack / using commonJS imports

Look the answer above.

🙋‍♀️ But I am stuck on React 17 and you say it only work on 18+, what can I do?

Best is if you upgrade to ensure you get the latest version of the component library. But if you don't want to upgrade immediately you can still use ui-components-react-legacy (Not maintained)

🙋‍♀️ I get confused, is it called Ferris library or SKF Ui Components Library?

It was previoulsy named The Ferris Library but changed name to SKF UI Library recently. At the same time the team behind grew and merged with a design team to further streamline internal processes and deliver a optimised project aimed at propell SKF internal project faster towards their goal.

🙋‍♀️ I cannot run Jest tests in NextJS

You need to to configure Jest the [right way](./docs/JESTCONFIG.md)

Code Sandbox

🧑‍⚖️ License

Copyright SKF 2023