Add new section for theme creation. (#91)

Fix import.

Author: akademy

src/index.ts

@@ -17,6 +17,7 @@ export * from "./themes/BaseTheme";
 export * from "./themes/DiamondTheme";
 export * from "./themes/GenericTheme";
 export * from "./themes/ThemeProvider";
+export * from "./themes/ThemeManager";
 
 // utils
 export * from "./utils/diamond";

src/storybook/Introduction.mdx

@@ -1,67 +1,109 @@
-import { version } from "../../package.json"
+import packageJson from "../../package.json"
 import { Meta } from "@storybook/blocks";
 
 <Meta title="Introduction" />
 
 <div className="sb-container">
     <div className='sb-section-title'>
-        # Scientific React UI v{version}
+        # Scientific React UI v{packageJson.version}
 
         ## Introduction
 
         SciReactUI is a collection of useful scientific focused components, utilizing Material UI, to make your React based websites look great.
 
-        This storybook displays the components for version <strong>{version}</strong>.
+        This storybook displays the components in @diamondlightsource/sci-react-ui:<strong>{packageJson.version}</strong>.
     </div>
 </div>
+
+<div className="sb-container">
+    <div className='sb-section-title'>
+        ## Usage
+
+        ### Add Theme
+
+        First select a theme: `GenericTheme` or `DiamondTheme` are available to use
+        (you can also create your own, see following section):
+
+        ```tsx filename="main.tsx"
+        import {
+            ThemeProvider,
+            DiamondTheme
+        } from "@diamondlightsource/sci-react-ui";
+
+        root.render(
+          <ThemeProvider theme={DiamondTheme}>
+            <App />
+          </ThemeProvider>
+        )
+        ```
+
+        ### Create an App
+
+        Then create something, for instance, you may want a Navigation Bar at the top of your website:
+
+        ```tsx filename="App.tsx"
+        import {Container, Typography} from "@mui/material";
+        import {
+          Navbar,
+          NavLink,
+          NavLinks
+        } from "@diamondlightsource/sci-react-ui";
+
+        function App() {
+          return <>
+            <Navbar>
+              <NavLinks key="links">
+                <NavLink href="#" key="first">A link</NavLink>
+              </NavLinks>
+            </Navbar>
+            <Container>
+              <Typography variant="h2">Scientific UI Collection</Typography>
+              <Typography>A collection of science based React components.</Typography>
+            </Container>
+        </>
+        }
+        export default App;
+        ```
+
+    </div>
+</div>
+
+
 <div className="sb-container">
     <div className='sb-section-title'>
-        # Usage
-
-        ## Add Theme
-
-        First select a theme: GenericTheme or DiamondTheme (or create your own):
-
-```js
-import {
-    ThemeProvider,
-	DiamondTheme
-} from "@diamondlightsource/sci-react-ui";
-
-root.render(
-  <ThemeProvider theme={DiamondTheme}>
-    <App />
-  </ThemeProvider>
-)
-```
-
-## Create App
-
-Then create something, e.g.
-
-```js
-import {Container, Typography} from "@mui/material";
-import {
-  Navbar,
-  NavLink,
-  NavLinks
-} from "@diamondlightsource/sci-react-ui";
-
-function App() {
-  return <>
-    <Navbar>
-      <NavLinks key="links">
-        <NavLink href="#" key="first">A link</NavLink>
-      </NavLinks>
-    </Navbar>
-    <Container>
-      <Typography variant="h2">Scientific UI Collection</Typography>
-      <Typography>A collection of science based React components.</Typography>
-    </Container>
-</>
-}
-export default App;
-```
+        ## Create new Theme
+
+        The 'GenericTheme.ts' shows you a simple example of creating a new theme.
+        Use `mergeThemeOptions` to create a new one from an existing one.
+
+        To inherit from the DiamondTheme by overriding the light palette, use something like this:
+
+        ```tsx
+        import { createTheme, Theme } from "@mui/material/styles";
+        import { DiamondThemeOptions, mergeThemeOptions } from '@diamondlightsource/sci-react-ui'
+
+        const MyThemeOptions = mergeThemeOptions({
+            colorSchemes: {
+                light: {
+                    palette: {
+                        primary: {
+                            main: "#f00",
+                            light: "#f55",
+                            dark: "#a00",
+                            contrastText: "#fff",
+                        },
+                    },
+                },
+            }
+        }, DiamondThemeOptions);
+
+        const MyTheme: Theme = createTheme(MyThemeOptions);
+        export { MyTheme };
+        ```
+
+        The theme options are documented in MUI. For the examples used in DiamondTheme
+        see [DiamondTheme.tsx](https://github.com/DiamondLightSource/sci-react-ui/blob/main/src/themes/DiamondTheme.ts)
+        on GitHub.
 
     </div>
 </div>

src/themes/GenericTheme.ts

@@ -23,5 +23,5 @@ const GenericThemeOptions = mergeThemeOptions({
 });
 
 const GenericTheme: Theme = createTheme(GenericThemeOptions);
-console.log(GenericTheme);
+
 export { GenericTheme, GenericThemeOptions };