Merge pull request #127 from oaknational/chore/PUPIL-439/readme

PUPIL-439: Update links to storybook and add some additional sections to the README
oaknational · Mar 7, 2024 · 7b381f0 · 7b381f0
2 parents af5e86f + 6c7f237
commit 7b381f0
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -4,14 +4,45 @@
 
 ## Overview
 
-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://lively-meringue-8ebd43.netlify.app/) please consult 1Password for access.
+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.
 
 ## Installation
 
 This library is suitable for use in an app using React 18 and Next.js 13+
 
 You can install it using `npm i @oaknational/oak-components` or any other package manager that supports the NPM registry.
 
+### Theming, global styles and fonts
+
+For components to be styled correctly they will need access to a theme, some global styles and the Lexend font.
+
+You can add those to your app using something like:
+
+```typescript
+import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components";
+import Head from "next/head";
+import { Lexend } from "next/font/google";
+
+const lexend = Lexend({ subsets: ['latin'] });
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <Head>
+        <OakGlobalStyles />
+      </Head>
+      <body className={lexend.className}>
+        <OakThemeProvider theme={oakDefaultTheme}>{children}</OakThemeProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+### TypeScript
+
+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.
+
 ## Development
 
 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
 4. run `npm install`
 5. To view the storybook run `npm run storybook`
 
+## Making changes
+
+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`
+
+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.
+
 ## Testing components inside a host app like OWA
 
 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
 4. Now when you start your target app you should have access to the locally packaged version of the library
 5. To uninstall the local package you can run `yalc remove @oaknational/oak-components` inside the target app
    - 🚨 if you're an Oak engineer developing in OWA there is a convenience script and you should use `npm run remove-local-components` instead
-     as it will automaticallyt re-install the library from NPM.
+     as it will automatically re-install the library from NPM.
 
 ## Structure
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -113,7 +113,8 @@
         "@semantic-release/git",
         {
           "assets": [
-            "package.json"
+            "package.json",
+            "package-lock.json"
           ],
           "message": "build(release): ${nextRelease.version} [skip ci]"
         }

diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,10 +1,10 @@
 # How to review this PR
 
-*Leave this text block for the reviewer*
+_Leave this text block for the reviewer_
 
 - Check [component hierarchy](https://miro.com/app/board/uXjVNnKBgyk=/?share_link_id=59445593794) is followed correctly
-- Check the design [Heuristics](https://lively-meringue-8ebd43.netlify.app/?path=/docs/docs-howtodesigncomponents--docs#heuristics-for-component-design) have been followed
-- Check [naming conventions](https://lively-meringue-8ebd43.netlify.app/?path=/docs/docs-namingconventions--docs) have been applied
+- Check the design [Heuristics](https://components.thenational.academy/?path=/docs/docs-howtodesigncomponents--docs#heuristics-for-component-design) have been followed
+- Check [naming conventions](https://components.thenational.academy/?path=/docs/docs-namingconventions--docs) have been applied
 - Check for these gotchyas:
   - Missing exports for Oak components
   - Accidental export of Internal components

diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
@@ -17,3 +17,4 @@ export * from "./OakThemeProvider";
 export * from "./OakMaxWidth";
 export * from "./OakCloudinaryImage";
 export * from "./OakKbd";
+export * from "./OakGlobalStyle";