## 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](https://reactjs.org/).
**Notice!** [TypeScript](https://www.typescriptlang.org/) 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](https://www.npmjs.com/package/@skf-design-system/ui-components-react)
Simply install it with one of the commands below.
### Install using NPM
```bash
npm install @skf-design-system/ui-components-react
```
### Install using pnpm
```bash
pnpm add @skf-design-system/ui-components-react
```
### Install using Yarn
```bash
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..
```ts
import { SkfUiProvider } from "@skf-design-system/ui-components-react";
import { MyApp } from './App.tsx';
...
```
## Testing with Jest in NextJS
[Here is how to configure jest](./docs/JESTCONFIG.md) 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](https://ui-components.skf.com/).
### 🎁 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)
## 🛠️ 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](https://github.com/SKF-Internal/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
[](https://codesandbox.io/p/sandbox/ui-components-react-fqm8vc)
## 🧑⚖️ License
Copyright SKF 2023
# SKF UI Components React