feat: implement level grouping

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

@@ -38,18 +38,26 @@ Each lesson is broken down in an exercise file and a final file. The exercise fi
 
 ### 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/03-LessonStructure.mdx

@@ -4,7 +4,7 @@ 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.
 
 ## Exercise files
 
@@ -60,6 +60,6 @@ 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.
+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 folder in the lesson showing the final solution of each exercise.
 
 [Let's get started](?path=/docs/lessons-01-conditional-rendering-pattern-01-lesson--docs)

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;

src/course/02- lessons/01-ConditionalRendering/lesson.mdx renamed to src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/01 - Conditional Rendering Pattern/01-Lesson" />
+<Meta title="Lessons/🥉 Bronze/Conditional Rendering Pattern/01-Lesson" />
 
 # Conditional Rendering Pattern