feat: implement level grouping (#13)

* feat: implement level grouping

* chore: some content changes

Author: code-mattclaffey

.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: [
@@ -27,7 +28,12 @@ const config: StorybookConfig = {
   },
   async viteFinal(baseConfig, { configType }) {
     return mergeConfig(baseConfig, {
-      ...(configType === 'PRODUCTION' ? { base: '/storybook/' } : {})
+      ...(configType === 'PRODUCTION' ? { base: '/storybook/' } : {}),
+      resolve: {
+        alias: {
+          '@shared': path.resolve(__dirname, '../src', 'shared')
+        }
+      }
     });
   }
 };

.storybook/preview.tsx

@@ -12,7 +12,12 @@ const preview: Preview = {
         code: Code
       }
     },
-    storySort: ['Introduction', 'Lessons', 'Recipes'],
+    storySort: [
+      'Introduction',
+      'Lessons',
+      ['🥉 Bronze', '🥈 Silver', '🥇 Gold'],
+      'Recipes'
+    ],
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "npm run build && storybook build -o dist/storybook",

src/course/01-introduction/01-Welcome.mdx

@@ -34,22 +34,30 @@ I will be going in high detail on each of the lessons so if there are some holes
 
 ## Contents
 
-Each lesson is broken down in an exercise file and a final file. The exercise file will have instructions in pseudo format to help guide you through the code snippets. Not to worry though, there will be videos to support you along the way.
+Each lesson is broken down in an exercise file and a final file. The exercise file will have instructions in pseudo format to help guide you through the code snippets.
 
 ### Lessons
 
-- 01 - [Conditionally rendering pattern](?path=/docs/lessons-01-conditional-rendering-pattern-01-lesson--docs)
-- 02 - [Props combination pattern](?path=/docs/lessons-02-props-combination-pattern-01-lesson--docs)
-- 03 - [Render props pattern](?path=/docs/lessons-03-render-props-pattern-01-lesson--docs)
-- 04 - [Presentational and container components pattern](?path=/docs/lessons-04-presentational-container-pattern-01-lesson--docs)
-- 05 - [React Hooks pattern](?path=/docs/lessons-05-hooks-pattern-01-lesson--docs)
-- 06 - [Controlled component pattern](?path=/docs/lessons-06-controlled-components-pattern-01-lesson--docs)
-- 07 - [Higher order component](?path=/docs/lessons-07-higher-order-components-pattern-01-lesson--docs)
-- 08 - [The Provider pattern](?path=/docs/lessons-08-provider-pattern-01-lesson--docs)
-- 09 - [The State Reducer pattern](?path=/docs/lessons-09-state-reducer-pattern-01-lesson--docs)
-- 10 - [Compound components pattern](?path=/docs/lessons-10-compound-components-pattern-01-lesson--docs)
-- 11 - [Slots pattern](?path=/docs/lessons-11-slots-01-lesson--docs)
-- 12 - [Portals pattern](?path=/docs/lessons-12-portals-01-lesson--docs)
+#### 🥉 Bronze
+
+- [Conditionally rendering pattern](?path=/docs/lessons-🥉-bronze-conditional-rendering-pattern-01-lesson--docs)
+- [Props combination pattern](?path=/docs/lessons-🥉-bronze-props-combination-pattern-01-lesson--docs)
+- [React Hooks pattern](?path=/docs/lessons-🥉-bronze-hooks-pattern-01-lesson--docs)
+- [Presentational and container components pattern](?path=/docs/lessons-🥉-bronze-presentational-container-pattern-01-lesson--docs)
+- [Slots pattern](?path=/docs/lessons-🥉-bronze-slots-01-lesson--docs)
+
+#### 🥈 Silver
+
+- [Compound components pattern](?path=/docs/lessons-🥈-sliver-compound-components-pattern-01-lesson--docs)
+- [Controlled component pattern](?path=/docs/lessons-🥈-sliver-controlled-components-pattern-01-lesson--docs)
+- [Render props pattern](?path=/docs/lessons-🥈-sliver-render-props-pattern-01-lesson--docs)
+- [The Provider pattern](?path=/docs/lessons-🥈-sliver-provider-pattern-01-lesson--docs)
+- [The State Reducer pattern](?path=/docs/lessons-🥈-sliver-state-reducer-pattern-01-lesson--docs)
+- [Portals pattern](?path=/docs/lessons-🥈-sliver-portals-01-lesson--docs)
+
+#### 🥇 Gold
+
+- [Higher order component](?path=/docs/lessons-🥇-gold-higher-order-components-pattern-01-lesson--docs)
 
 ## FAQs
 

src/course/01-introduction/02-GettingStarted.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # Getting Started
 
-> Node version 18 required.
+> Node version 18+ required.
 
 ## Installation
 

src/course/01-introduction/03-LessonStructure.mdx

@@ -4,7 +4,11 @@ import { Meta } from '@storybook/blocks';
 
 # Lesson Structure
 
-As you will have already noticed in the sidebar that there is a "Lessons" section. Each lesson will get slightly more and more complex as we go on so it eases us into the course. Each lesson will also contain an "exercise.(tsx)" file and a "final.(tsx)".
+As you will have already noticed in the sidebar that there is a "Lessons" section. Each lesson sits within a Bronze/Silver/Gold tier folder which mirrors to the complexity of that pattern & we provide more challenging exercises. Each lesson will also contain an "exercise" folder and a "final" folder.
+
+## Storybook / Folder Structure
+
+As you can see the storybook sidebar mirrors the way the folder structure is within the repo. This is done so you can easily navigate to the files you are changing within the exercises.
 
 ## Exercise files
 
@@ -60,6 +64,4 @@ const Component = () => {
 
 ## Final files
 
-If you get stuck do not worry! Each lesson.mdx file will have a video going through it all and there will be a final.tsx file showing the final solution of each exercise.
-
-[Let's get started](?path=/docs/lessons-01-conditional-rendering-pattern-01-lesson--docs)
+If you get stuck do not worry! Each will have a final folder in the lesson showing the final solution of each exercise. Head over to any of the lessons to get started with which patterns you wish to learn.

src/course/02- lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { userEvent, within, expect } from '@storybook/test';
+
+import { ComponentOne } from './exercise';
+
+const meta: Meta<typeof ComponentOne> = {
+  title:
+    'Lessons/🥉 Bronze/Conditional Rendering Pattern/02-Exercise',
+  component: ComponentOne
+};
+
+export default meta;
+type Story = StoryObj<typeof ComponentOne>;
+
+const username = 'John Doe';
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(
+      canvas.getByRole('button', { name: 'Login' })
+    );
+
+    await expect(
+      canvas.getByText(`Welcome ${username}`)
+    ).toBeInTheDocument();
+    await expect(
+      canvas.queryByRole('button', { name: 'Login' })
+    ).toBeNull();
+
+    await userEvent.click(
+      canvas.getByRole('button', { name: 'Logout' })
+    );
+
+    await expect(
+      canvas.queryByText(`Welcome ${username}`)
+    ).toBeNull();
+    await expect(
+      canvas.queryByRole('button', { name: 'Logout' })
+    ).toBeNull();
+  },
+  args: {
+    username
+  }
+};

src/course/02- lessons/01-ConditionalRendering/exercise.tsx renamed to src/course/02- lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../../../shared/components/Button/Button.component';
+import { Button } from '@shared/components/Button/Button.component';
 
 interface IComponentProps {
   username: string;

src/course/02-solutions/01-ConditionalRendering/final.stories.tsx renamed to src/course/02- lessons/01-Bronze/ConditionalRendering/final/final.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { userEvent, within, expect } from '@storybook/test';
-
 import { ComponentOne } from './final';
 
 const meta: Meta<typeof ComponentOne> = {
-  title: 'Lessons/01 - Conditional Rendering Pattern/03-Final',
+  title: 'Lessons/🥉 Bronze/Conditional Rendering Pattern/03-Final',
   component: ComponentOne
 };
 
@@ -22,15 +21,27 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await userEvent.click(canvas.getByRole('button', { name: 'Login' }));
-
-    await expect(canvas.getByText(`Welcome ${username}`)).toBeInTheDocument();
-    await expect(canvas.queryByRole('button', { name: 'Login' })).toBeNull();
-
-    await userEvent.click(canvas.getByRole('button', { name: 'Logout' }));
-
-    await expect(canvas.queryByText(`Welcome ${username}`)).toBeNull();
-    await expect(canvas.queryByRole('button', { name: 'Logout' })).toBeNull();
+    await userEvent.click(
+      canvas.getByRole('button', { name: 'Login' })
+    );
+
+    await expect(
+      canvas.getByText(`Welcome ${username}`)
+    ).toBeInTheDocument();
+    await expect(
+      canvas.queryByRole('button', { name: 'Login' })
+    ).toBeNull();
+
+    await userEvent.click(
+      canvas.getByRole('button', { name: 'Logout' })
+    );
+
+    await expect(
+      canvas.queryByText(`Welcome ${username}`)
+    ).toBeNull();
+    await expect(
+      canvas.queryByRole('button', { name: 'Logout' })
+    ).toBeNull();
   },
   args: {
     username

src/course/02-solutions/01-ConditionalRendering/final.tsx renamed to src/course/02- lessons/01-Bronze/ConditionalRendering/final/final.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button } from '../../../shared/components/Button/Button.component';
+import { Button } from '@shared/components/Button/Button.component';
 
 interface IComponentProps {
   username: string;