@oaknational/oak-components 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/types.d.ts +8 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
|
-
This is a React Typescript components library which supports React and Next applications produced by [Oak National Academy](https://www.thenational.academy/). A Storybook for the components can be found [here](https://
|
|
7
|
+
This is a React Typescript components library which supports React and Next applications produced by [Oak National Academy](https://www.thenational.academy/). A Storybook for the components can be found [here](https://components.thenational.academy/) please consult 1Password for access.
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
@@ -12,6 +12,37 @@ This library is suitable for use in an app using React 18 and Next.js 13+
|
|
|
12
12
|
|
|
13
13
|
You can install it using `npm i @oaknational/oak-components` or any other package manager that supports the NPM registry.
|
|
14
14
|
|
|
15
|
+
### Theming, global styles and fonts
|
|
16
|
+
|
|
17
|
+
For components to be styled correctly they will need access to a theme, some global styles and the Lexend font.
|
|
18
|
+
|
|
19
|
+
You can add those to your app using something like:
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components";
|
|
23
|
+
import Head from "next/head";
|
|
24
|
+
import { Lexend } from "next/font/google";
|
|
25
|
+
|
|
26
|
+
const lexend = Lexend({ subsets: ['latin'] });
|
|
27
|
+
|
|
28
|
+
export default function RootLayout({ children }) {
|
|
29
|
+
return (
|
|
30
|
+
<html lang="en">
|
|
31
|
+
<Head>
|
|
32
|
+
<OakGlobalStyles />
|
|
33
|
+
</Head>
|
|
34
|
+
<body className={lexend.className}>
|
|
35
|
+
<OakThemeProvider theme={oakDefaultTheme}>{children}</OakThemeProvider>
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### TypeScript
|
|
43
|
+
|
|
44
|
+
If you're using TypeScript you might want to add `@types/styled-components` to your development dependencies (`npm i -D @types/styled-components`). This will ensure that all components are properly type hinted in your IDE.
|
|
45
|
+
|
|
15
46
|
## Development
|
|
16
47
|
|
|
17
48
|
1. Copy the example env config `cp .env.example .env`
|
|
@@ -20,6 +51,12 @@ You can install it using `npm i @oaknational/oak-components` or any other packag
|
|
|
20
51
|
4. run `npm install`
|
|
21
52
|
5. To view the storybook run `npm run storybook`
|
|
22
53
|
|
|
54
|
+
## Making changes
|
|
55
|
+
|
|
56
|
+
We use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) and [semantic versioning](https://semver.org/). Releases are managed by [Semantic Release](https://github.com/semantic-release/semantic-release) and are automatically published to [NPM](https://www.npmjs.com/package/@oaknational/oak-components) on every merge to `main`
|
|
57
|
+
|
|
58
|
+
Changes should go through a pull-request to `main` and require approval by at least 1 reviewer. You should seek reviews from a QA/designer/PM when necessary.
|
|
59
|
+
|
|
23
60
|
## Testing components inside a host app like OWA
|
|
24
61
|
|
|
25
62
|
Sometimes it isn't enough to develop entirely inside Storybook and it might be necessary to try local changes inside a target app. You can do this with [yalc](https://github.com/wclr/yalc)
|
|
@@ -32,7 +69,7 @@ Sometimes it isn't enough to develop entirely inside Storybook and it might be n
|
|
|
32
69
|
4. Now when you start your target app you should have access to the locally packaged version of the library
|
|
33
70
|
5. To uninstall the local package you can run `yalc remove @oaknational/oak-components` inside the target app
|
|
34
71
|
- 🚨 if you're an Oak engineer developing in OWA there is a convenience script and you should use `npm run remove-local-components` instead
|
|
35
|
-
as it will
|
|
72
|
+
as it will automatically re-install the library from NPM.
|
|
36
73
|
|
|
37
74
|
## Structure
|
|
38
75
|
|