-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #111 from EdAdaptive/usage-docs
Add usage docs
- Loading branch information
Showing
4 changed files
with
116 additions
and
75 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,36 @@ | ||
| # UI kit 2022 for Adaptive | ||
| # Adaptive UI-Kit 2022 | ||
|
|
||
| ## Installation | ||
| ## Setup | ||
|
|
||
| UI Kit 2022 is available as an [NPM package](https://www.npmjs.com/package/ui-kit-2022) | ||
| 1. Install [Node.js and NPM](https://nodejs.org/en/download/) | ||
| 2. Install Yarn2+ (https://yarnpkg.com/getting-started/install) and follow these steps: | ||
| - Run: `npm install -g yarn` | ||
| - Run: `yarn set version berry` | ||
| 3. Run the command `yarn` | ||
| 4. Run the command `yarn prepare` | ||
| - This will enable pre-commit check | ||
|
|
||
| ``` | ||
| npm i ui-kit-2022 | ||
| ``` | ||
| ### Development Workflow | ||
|
|
||
| ## Usage | ||
| This library is composed of several packages, most of which need to be built before your development and build tooling will work. The quickest way to build the package is to run the command: `yarn build`. | ||
|
|
||
| ``` | ||
| import "./App.css"; | ||
| While not always neccessary, you can remove all builds with `yarn clean`. | ||
|
|
||
| import { Logo } from "@ui-kit-2022/components"; | ||
| See the `package.json` in the project root for a set of available quick commands that can be run with `yarn {command}`. | ||
|
|
||
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <Logo /> | ||
| </div> | ||
| ); | ||
| } | ||
| export default App; | ||
| ``` | ||
| To run a local command on a sub package, for instance if you only want to build a single package, you can run `yarn workspace {package-name} run {command}`. The package name is not the folder name, but the name in the packages own `package.json`. Examples of useful commands: | ||
|
|
||
| ### Theme Usage | ||
| - `yarn workspace @ui-kit-2022/components run build` to build the component package only. | ||
| - `yarn workspace @ui-kit-2022/docs run preview` to run the storybook locally for development. | ||
| - `yarn workspace @ui-kit-2022/theme run dev` to run a dev build of the theme package that auto rebuilds on change. The `@ui-kit-2022/components` package also supports a `dev` command. | ||
|
|
||
| - Install `@mui/material` and `@emotion/styled` using `npm install @mui/material @emotion/styled` | ||
| When developing in multiple packages at the same time, currently you'll need to run separate dev/preview commands for each package in order for each to auto rebuild so dependent packages to recongize changes in the package they depend upon. | ||
| For instance, Storybook will no longer auto update when a file changes in the components package. You'll need to make sure the components package is autorebuilding along side the Storybook process to get a similar experience. | ||
|
|
||
| To use a theme other than the default you'll need to add a `ThemeProvider` component. Here is an example of such: | ||
| ## Releasing | ||
|
|
||
| ``` | ||
| import React from "react"; | ||
| import ReactDOM from "react-dom/client"; | ||
| import App from "./App"; | ||
| import "./index.css"; | ||
| Releases are handled with [Changesets](https://github.com/changesets/changesets/). | ||
|
|
||
| import { ThemeProvider } from "@mui/material/styles"; | ||
| import { light, dark } from "@ui-kit-2022/theme"; | ||
| import CssBaseline from "@mui/material/CssBaseline"; | ||
| When adding a feature or fixing a bug, add to the changset before commiting and sending a PR if you think that change needs to be specified in the release changelog: `yarn changeset` | ||
|
|
||
| ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( | ||
| <React.StrictMode> | ||
| <ThemeProvider theme={dark}> | ||
| <CssBaseline /> | ||
| <App /> | ||
| </ThemeProvider> | ||
| </React.StrictMode> | ||
| ); | ||
| ``` | ||
| As we merge in these changesets, a release PR will be created and updated with all the changesets that have been merged, handling all package version bumps and generating the changelog. Once that PR is approved and merged, a release will be created, and the new package versions will be published to NPM. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| # UI Kit Components | ||
|
|
||
| This package contains React components for the UI Kit Design System. To learn more visit the project's: | ||
|
|
||
| - [Storybook](https://adaptiveconsulting.github.io/ui-kit-2022/) | ||
| - [GitHub](https://github.com/AdaptiveConsulting/ui-kit-2022) | ||
|
|
||
| ## Installation | ||
|
|
||
| Run the following command to install the package using [NPM](https://www.npmjs.com/) | ||
|
|
||
| ``` | ||
| npm i @ui-kit-2022/components | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| The `@ui-kit-2022/components` package provides components and icons used in the UI Kit Design System. | ||
|
|
||
| To use a component import it from the package: | ||
|
|
||
| ``` | ||
| import { Button } from "@ui-kit-2022/components"; | ||
| function ComponentExample() { | ||
| return <Button variant="PRIMARY">Button Text</Button>; | ||
| } | ||
| ``` | ||
|
|
||
| To use an icon import it from the package: | ||
|
|
||
| ``` | ||
| import { Icon } from "@ui-kit-2022/components"; | ||
| function IconExample() { | ||
| return <Icon.Calendar />; | ||
| } | ||
| ``` | ||
|
|
||
| ## Design System Usage | ||
|
|
||
| To apply the UI Kit Design System import either theme from the `@ui-kit-2022/theme` package: | ||
|
|
||
| ``` | ||
| import { ThemeProvider } from "@mui/material/styles"; | ||
| import { light, dark } from "@ui-kit-2022/theme"; | ||
| import CssBaseline from "@mui/material/CssBaseline"; | ||
| ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( | ||
| <React.StrictMode> | ||
| <ThemeProvider theme={dark}> | ||
| <CssBaseline /> | ||
| <ComponentExample /> | ||
| </ThemeProvider> | ||
| </React.StrictMode> | ||
| ); | ||
| ``` | ||
|
|
||
| This will provide additional styling for several components in this package. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # UI Kit Theme | ||
|
|
||
| This package contains light and dark themes from the UI Kit Design System. To learn more visit the project's: | ||
|
|
||
| - [Storybook](https://adaptiveconsulting.github.io/ui-kit-2022/) | ||
| - [GitHub](https://github.com/AdaptiveConsulting/ui-kit-2022) | ||
|
|
||
| ## Installation | ||
|
|
||
| Run the following command to install the package using [NPM](https://www.npmjs.com/) | ||
|
|
||
| ``` | ||
| npm i @ui-kit-2022/theme | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| To apply a theme import it from the `@ui-kit-2022/theme` package and use a ThemeProvider: | ||
|
|
||
| ``` | ||
| import { ThemeProvider } from "@mui/material/styles"; | ||
| import { light, dark } from "@ui-kit-2022/theme"; | ||
| import '@ui-kit-2022/theme/dist/style.css'; | ||
| import CssBaseline from "@mui/material/CssBaseline"; | ||
| ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( | ||
| <React.StrictMode> | ||
| <ThemeProvider theme={dark}> | ||
| <CssBaseline /> | ||
| <ComponentExample /> | ||
| </ThemeProvider> | ||
| </React.StrictMode> | ||
| ); | ||
| ``` |