@learningpool/ui v1.11.4

@learningpool/ui

@learningpool/ui is the Component library for use on modern Learning Pool projects, built on top of MUI and bootstrapped with Create React App.

Our documentation is provided via Storybook and our tests are written using Jest.

Installation

First clone the repo then run:

npm install

Available Scripts

In the project directory, you can run:

npm run start

Runs the app in the development mode.\ Open http://localhost:6006 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

npm run start:run-test

The same as the npm run start command but runs the npm run test:generate-output command first, so the test results displayed within Storybook are up-to-date.

npm run build-storybook

Builds the Storybook app for pushing to the public subdomain.

npm run test

Runs the component Jest tests. If its the first run it also takes a snapshot for comparison, on successive runs.

npm run test:update-snapshot

Updates the Jest snapshot.

npm run test:generate-output

Runs the tests and outputs the results to a file .jest-test-results.json for use within the Storybook addon Jest

Getting started

Project structure

A quick understanding of the architecture of the project is useful before getting started. As this project is used to maintain a Component library it compiles into a module that is hosted on NPM. The lib and stories directory structure should mirror each other for ease of navigation through the project.

src
│
└───lib
│   │
│   └───atoms
│   │   │
│   │   └───Button
│   │   ...
│   └───molecules
│   ...
└───stories
    │
    └───atoms
    │   │
    │   └───Button
    │   ...
    └───molecules
    ...

Creating a component

To get started it is recommended to create a directory for the component in the directory appropriate for your component:

src
│
└───lib
    │
    └───atoms
        │
        └───Component
                Component.test.tsx
                Component.tsx
                ComponentStyles.tsx

Once you have created the above structure, it should be mirrored within the src/stories directory. It may not require a directory if it is just one file e.g. src/stories/atoms/Component.stories.tsx

If the component is a bit more complicated and requires extra work for the story, it would be best to create a directory to containing the story and additional files.

src
│
└───stories
    │
    └───atoms
        │
        └───Component
                Component.stories.tsx
                Component.tsx

Using the library

Add the following in the head of the project (if React it's likely to be index.html within the public directory).

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:wght@400;600;700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:wght@300;400;500&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />

Importing and using components from the library.

import { Button } from 'learningpool-ui'

return <Button />

See all the components currently available components source code.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

There are related repositories which will be linked in the future.

License

MIT