From 6072d853c301630414df7940a2d1a3e65a866b41 Mon Sep 17 00:00:00 2001 From: code-mattclaffey Date: Tue, 20 May 2025 11:25:21 +0100 Subject: [PATCH 1/2] feat: implement level grouping --- .storybook/main.ts | 8 +- .storybook/preview.tsx | 7 +- package.json | 2 +- src/course/01-introduction/01-Welcome.mdx | 32 ++++-- .../01-introduction/03-LessonStructure.mdx | 4 +- .../exercise/exercise.stories.tsx | 51 +++++++++ .../exercise}/exercise.tsx | 2 +- .../final}/final.stories.tsx | 33 ++++-- .../ConditionalRendering/final}/final.tsx | 2 +- .../ConditionalRendering}/lesson.mdx | 2 +- .../Hooks}/components.tsx | 6 +- .../Hooks/exercise}/exercise.stories.tsx | 2 +- .../Hooks/exercise}/exercise.tsx | 2 +- .../01-Bronze/Hooks/final}/final.stories.tsx | 2 +- .../01-Bronze/Hooks/final}/final.tsx | 2 +- .../{05-Hooks => 01-Bronze/Hooks}/lesson.mdx | 2 +- .../exercise}/exercise.stories.tsx | 2 +- .../exercise}/exercise.tsx | 8 +- .../final}/final.stories.tsx | 3 +- .../final}/final.tsx | 8 +- .../PresentationalAndContainer}/lesson.mdx | 2 +- .../PresentationalAndContainer}/mocks.ts | 0 .../exercise}/exercise.stories.tsx | 2 +- .../PropsCombination/exercise}/exercise.tsx | 0 .../PropsCombination/final}/final.stories.tsx | 2 +- .../PropsCombination/final}/final.tsx | 0 .../PropsCombination}/lesson.mdx | 2 +- .../Slots/exercise}/exercise.stories.tsx | 2 +- .../Slots/exercise}/exercise.tsx | 0 .../01-Bronze/Slots/final}/final.stories.tsx | 2 +- .../01-Bronze/Slots/final}/final.tsx | 2 +- .../Slots}/icons/index.tsx | 0 .../{11-Slots => 01-Bronze/Slots}/lesson.mdx | 2 +- .../exercise.stories.tsx | 38 ------- .../exercise}/components/Accordion.tsx | 0 .../exercise}/components/Accoridon.module.css | 0 .../exercise}/components/ChevronDown.tsx | 0 .../Compound/exercise}/exercise.stories.tsx | 2 +- .../Compound/exercise}/exercise.tsx | 0 .../Compound/final}/components/Accordion.tsx | 0 .../final}/components/Accoridon.module.css | 0 .../final}/components/ChevronDown.tsx | 0 .../Compound/final}/final.stories.tsx | 2 +- .../02-Silver/Compound/final}/final.tsx | 0 .../Compound}/lesson.mdx | 2 +- .../Controlled/exercise}/exercise.stories.tsx | 3 +- .../Controlled/exercise}/exercise.tsx | 2 +- .../Controlled/final/final.stories.tsx | 20 ++++ .../02-Silver/Controlled/final}/final.tsx | 2 +- .../Controlled}/lesson.mdx | 2 +- .../Portals/exercise}/components/modal.tsx | 2 +- .../Portals/exercise}/exercise.stories.tsx | 2 +- .../Portals/exercise}/exercise.tsx | 2 +- .../Portals/final}/components/modal.tsx | 2 +- .../Portals/final}/final.stories.tsx | 2 +- .../02-Silver/Portals/final}/final.tsx | 2 +- .../Portals}/lesson.mdx | 2 +- .../Provider/exercise}/Provider.tsx | 0 .../Provider/exercise}/exercise.stories.tsx | 2 +- .../Provider/exercise}/exercise.tsx | 0 .../02-Silver/Provider/final}/Provider.tsx | 2 +- .../Provider/final}/final.stories.tsx | 2 +- .../02-Silver/Provider/final}/final.tsx | 0 .../Provider}/lesson.mdx | 2 +- .../exercise}/exercise.stories.tsx | 2 +- .../RenderProps/exercise}/exercise.tsx | 6 +- .../RenderProps/final}/final.stories.tsx | 2 +- .../02-Silver/RenderProps/final}/final.tsx | 6 +- .../RenderProps}/lesson.mdx | 2 +- .../exercise}/exercise.stories.tsx | 2 +- .../StateReducer/exercise}/exercise.tsx | 0 .../StateReducer/final}/final.stories.tsx | 2 +- .../02-Silver/StateReducer/final}/final.tsx | 2 +- .../StateReducer}/lesson.mdx | 2 +- .../exercise}/exercise.stories.tsx | 3 +- .../exercise}/exercise.tsx | 0 .../exercise}/withPokemon.tsx | 0 .../final}/final.stories.tsx | 2 +- .../01-HigherOrderComponents/final}/final.tsx | 2 +- .../final}/withPokemon.tsx | 2 +- .../01-HigherOrderComponents}/lesson.mdx | 2 +- .../04-PresentationalAndContainer/mocks.ts | 104 ------------------ .../02-solutions/05-Hooks/components.tsx | 30 ----- .../10-Compound/final.stories.tsx | 20 ---- .../02-solutions/11-Slots/icons/index.tsx | 31 ------ tsconfig.app.json | 5 +- tsconfig.node.json | 5 +- vite.config.ts | 6 +- 88 files changed, 208 insertions(+), 321 deletions(-) create mode 100644 src/course/02- lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx rename src/course/02- lessons/{01-ConditionalRendering => 01-Bronze/ConditionalRendering/exercise}/exercise.tsx (92%) rename src/course/{02-solutions/01-ConditionalRendering => 02- lessons/01-Bronze/ConditionalRendering/final}/final.stories.tsx (51%) rename src/course/{02-solutions/01-ConditionalRendering => 02- lessons/01-Bronze/ConditionalRendering/final}/final.tsx (89%) rename src/course/02- lessons/{01-ConditionalRendering => 01-Bronze/ConditionalRendering}/lesson.mdx (97%) rename src/course/02- lessons/{05-Hooks => 01-Bronze/Hooks}/components.tsx (71%) rename src/course/02- lessons/{08-Provider => 01-Bronze/Hooks/exercise}/exercise.stories.tsx (88%) rename src/course/02- lessons/{05-Hooks => 01-Bronze/Hooks/exercise}/exercise.tsx (97%) rename src/course/{02-solutions/03-RenderProps => 02- lessons/01-Bronze/Hooks/final}/final.stories.tsx (88%) rename src/course/{02-solutions/05-Hooks => 02- lessons/01-Bronze/Hooks/final}/final.tsx (96%) rename src/course/02- lessons/{05-Hooks => 01-Bronze/Hooks}/lesson.mdx (98%) rename src/course/02- lessons/{04-PresentationalAndContainer => 01-Bronze/PresentationalAndContainer/exercise}/exercise.stories.tsx (86%) rename src/course/02- lessons/{04-PresentationalAndContainer => 01-Bronze/PresentationalAndContainer/exercise}/exercise.tsx (93%) rename src/course/{02-solutions/04-PresentationalAndContainer => 02- lessons/01-Bronze/PresentationalAndContainer/final}/final.stories.tsx (85%) rename src/course/{02-solutions/04-PresentationalAndContainer => 02- lessons/01-Bronze/PresentationalAndContainer/final}/final.tsx (93%) rename src/course/02- lessons/{04-PresentationalAndContainer => 01-Bronze/PresentationalAndContainer}/lesson.mdx (98%) rename src/course/02- lessons/{04-PresentationalAndContainer => 01-Bronze/PresentationalAndContainer}/mocks.ts (100%) rename src/course/02- lessons/{02-PropsCombination => 01-Bronze/PropsCombination/exercise}/exercise.stories.tsx (94%) rename src/course/02- lessons/{02-PropsCombination => 01-Bronze/PropsCombination/exercise}/exercise.tsx (100%) rename src/course/{02-solutions/02-PropsCombination => 02- lessons/01-Bronze/PropsCombination/final}/final.stories.tsx (94%) rename src/course/{02-solutions/02-PropsCombination => 02- lessons/01-Bronze/PropsCombination/final}/final.tsx (100%) rename src/course/02- lessons/{02-PropsCombination => 01-Bronze/PropsCombination}/lesson.mdx (96%) rename src/course/02- lessons/{11-Slots => 01-Bronze/Slots/exercise}/exercise.stories.tsx (90%) rename src/course/02- lessons/{11-Slots => 01-Bronze/Slots/exercise}/exercise.tsx (100%) rename src/course/{02-solutions/11-Slots => 02- lessons/01-Bronze/Slots/final}/final.stories.tsx (90%) rename src/course/{02-solutions/11-Slots => 02- lessons/01-Bronze/Slots/final}/final.tsx (96%) rename src/course/02- lessons/{11-Slots => 01-Bronze/Slots}/icons/index.tsx (100%) rename src/course/02- lessons/{11-Slots => 01-Bronze/Slots}/lesson.mdx (97%) delete mode 100644 src/course/02- lessons/01-ConditionalRendering/exercise.stories.tsx rename src/course/02- lessons/{10-Compound => 02-Silver/Compound/exercise}/components/Accordion.tsx (100%) rename src/course/02- lessons/{10-Compound => 02-Silver/Compound/exercise}/components/Accoridon.module.css (100%) rename src/course/02- lessons/{10-Compound => 02-Silver/Compound/exercise}/components/ChevronDown.tsx (100%) rename src/course/02- lessons/{06-Controlled => 02-Silver/Compound/exercise}/exercise.stories.tsx (86%) rename src/course/02- lessons/{10-Compound => 02-Silver/Compound/exercise}/exercise.tsx (100%) rename src/course/{02-solutions/10-Compound => 02- lessons/02-Silver/Compound/final}/components/Accordion.tsx (100%) rename src/course/{02-solutions/10-Compound => 02- lessons/02-Silver/Compound/final}/components/Accoridon.module.css (100%) rename src/course/{02-solutions/10-Compound => 02- lessons/02-Silver/Compound/final}/components/ChevronDown.tsx (100%) rename src/course/{02-solutions/06-Controlled => 02- lessons/02-Silver/Compound/final}/final.stories.tsx (86%) rename src/course/{02-solutions/10-Compound => 02- lessons/02-Silver/Compound/final}/final.tsx (100%) rename src/course/02- lessons/{10-Compound => 02-Silver/Compound}/lesson.mdx (96%) rename src/course/02- lessons/{05-Hooks => 02-Silver/Controlled/exercise}/exercise.stories.tsx (85%) rename src/course/02- lessons/{06-Controlled => 02-Silver/Controlled/exercise}/exercise.tsx (98%) create mode 100644 src/course/02- lessons/02-Silver/Controlled/final/final.stories.tsx rename src/course/{02-solutions/06-Controlled => 02- lessons/02-Silver/Controlled/final}/final.tsx (96%) rename src/course/02- lessons/{06-Controlled => 02-Silver/Controlled}/lesson.mdx (96%) rename src/course/02- lessons/{12-Portals => 02-Silver/Portals/exercise}/components/modal.tsx (96%) rename src/course/02- lessons/{12-Portals => 02-Silver/Portals/exercise}/exercise.stories.tsx (89%) rename src/course/02- lessons/{12-Portals => 02-Silver/Portals/exercise}/exercise.tsx (96%) rename src/course/{02-solutions/12-Portals => 02- lessons/02-Silver/Portals/final}/components/modal.tsx (95%) rename src/course/{02-solutions/12-Portals => 02- lessons/02-Silver/Portals/final}/final.stories.tsx (89%) rename src/course/{02-solutions/12-Portals => 02- lessons/02-Silver/Portals/final}/final.tsx (96%) rename src/course/02- lessons/{12-Portals => 02-Silver/Portals}/lesson.mdx (96%) rename src/course/02- lessons/{08-Provider => 02-Silver/Provider/exercise}/Provider.tsx (100%) rename src/course/02- lessons/{09-StateReducer => 02-Silver/Provider/exercise}/exercise.stories.tsx (88%) rename src/course/02- lessons/{08-Provider => 02-Silver/Provider/exercise}/exercise.tsx (100%) rename src/course/{02-solutions/08-Provider => 02- lessons/02-Silver/Provider/final}/Provider.tsx (95%) rename src/course/{02-solutions/09-StateReducer => 02- lessons/02-Silver/Provider/final}/final.stories.tsx (88%) rename src/course/{02-solutions/08-Provider => 02- lessons/02-Silver/Provider/final}/final.tsx (100%) rename src/course/02- lessons/{08-Provider => 02-Silver/Provider}/lesson.mdx (96%) rename src/course/02- lessons/{10-Compound => 02-Silver/RenderProps/exercise}/exercise.stories.tsx (87%) rename src/course/02- lessons/{03-RenderProps => 02-Silver/RenderProps/exercise}/exercise.tsx (91%) rename src/course/{02-solutions/08-Provider => 02- lessons/02-Silver/RenderProps/final}/final.stories.tsx (87%) rename src/course/{02-solutions/03-RenderProps => 02- lessons/02-Silver/RenderProps/final}/final.tsx (90%) rename src/course/02- lessons/{03-RenderProps => 02-Silver/RenderProps}/lesson.mdx (96%) rename src/course/02- lessons/{03-RenderProps => 02-Silver/StateReducer/exercise}/exercise.stories.tsx (87%) rename src/course/02- lessons/{09-StateReducer => 02-Silver/StateReducer/exercise}/exercise.tsx (100%) rename src/course/{02-solutions/05-Hooks => 02- lessons/02-Silver/StateReducer/final}/final.stories.tsx (87%) rename src/course/{02-solutions/09-StateReducer => 02- lessons/02-Silver/StateReducer/final}/final.tsx (97%) rename src/course/02- lessons/{09-StateReducer => 02-Silver/StateReducer}/lesson.mdx (97%) rename src/course/02- lessons/{07-HigherOrderComponents => 03-Gold/01-HigherOrderComponents/exercise}/exercise.stories.tsx (87%) rename src/course/02- lessons/{07-HigherOrderComponents => 03-Gold/01-HigherOrderComponents/exercise}/exercise.tsx (100%) rename src/course/02- lessons/{07-HigherOrderComponents => 03-Gold/01-HigherOrderComponents/exercise}/withPokemon.tsx (100%) rename src/course/{02-solutions/07-HigherOrderComponents => 02- lessons/03-Gold/01-HigherOrderComponents/final}/final.stories.tsx (86%) rename src/course/{02-solutions/07-HigherOrderComponents => 02- lessons/03-Gold/01-HigherOrderComponents/final}/final.tsx (95%) rename src/course/{02-solutions/07-HigherOrderComponents => 02- lessons/03-Gold/01-HigherOrderComponents/final}/withPokemon.tsx (94%) rename src/course/02- lessons/{07-HigherOrderComponents => 03-Gold/01-HigherOrderComponents}/lesson.mdx (96%) delete mode 100644 src/course/02-solutions/04-PresentationalAndContainer/mocks.ts delete mode 100644 src/course/02-solutions/05-Hooks/components.tsx delete mode 100644 src/course/02-solutions/10-Compound/final.stories.tsx delete mode 100644 src/course/02-solutions/11-Slots/icons/index.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index ed55f6b..3ade951 100644 --- a/.storybook/main.ts +++ b/.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') + } + } }); } }; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 2e15d5f..9ef9680 100644 --- a/.storybook/preview.tsx +++ b/.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, diff --git a/package.json b/package.json index 10bdd62..40ed1d8 100644 --- a/package.json +++ b/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", diff --git a/src/course/01-introduction/01-Welcome.mdx b/src/course/01-introduction/01-Welcome.mdx index fe55e20..f87c80f 100644 --- a/src/course/01-introduction/01-Welcome.mdx +++ b/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 diff --git a/src/course/01-introduction/03-LessonStructure.mdx b/src/course/01-introduction/03-LessonStructure.mdx index 8626b76..380be42 100644 --- a/src/course/01-introduction/03-LessonStructure.mdx +++ b/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) diff --git a/src/course/02- lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx b/src/course/02- lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx new file mode 100644 index 0000000..b8777c9 --- /dev/null +++ b/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 = { + title: + 'Lessons/🥉 Bronze/Conditional Rendering Pattern/02-Exercise', + component: ComponentOne +}; + +export default meta; +type Story = StoryObj; + +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 + } +}; diff --git a/src/course/02- lessons/01-ConditionalRendering/exercise.tsx b/src/course/02- lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx similarity index 92% rename from src/course/02- lessons/01-ConditionalRendering/exercise.tsx rename to src/course/02- lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx index 9fdbe6a..5bb0e63 100644 --- a/src/course/02- lessons/01-ConditionalRendering/exercise.tsx +++ b/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; diff --git a/src/course/02-solutions/01-ConditionalRendering/final.stories.tsx b/src/course/02- lessons/01-Bronze/ConditionalRendering/final/final.stories.tsx similarity index 51% rename from src/course/02-solutions/01-ConditionalRendering/final.stories.tsx rename to src/course/02- lessons/01-Bronze/ConditionalRendering/final/final.stories.tsx index a17bb30..7052c79 100644 --- a/src/course/02-solutions/01-ConditionalRendering/final.stories.tsx +++ b/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 = { - 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 diff --git a/src/course/02-solutions/01-ConditionalRendering/final.tsx b/src/course/02- lessons/01-Bronze/ConditionalRendering/final/final.tsx similarity index 89% rename from src/course/02-solutions/01-ConditionalRendering/final.tsx rename to src/course/02- lessons/01-Bronze/ConditionalRendering/final/final.tsx index 0a9f76d..d2779ef 100644 --- a/src/course/02-solutions/01-ConditionalRendering/final.tsx +++ b/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; diff --git a/src/course/02- lessons/01-ConditionalRendering/lesson.mdx b/src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx similarity index 97% rename from src/course/02- lessons/01-ConditionalRendering/lesson.mdx rename to src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx index a27307e..1a1c2fd 100644 --- a/src/course/02- lessons/01-ConditionalRendering/lesson.mdx +++ b/src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Conditional Rendering Pattern diff --git a/src/course/02- lessons/05-Hooks/components.tsx b/src/course/02- lessons/01-Bronze/Hooks/components.tsx similarity index 71% rename from src/course/02- lessons/05-Hooks/components.tsx rename to src/course/02- lessons/01-Bronze/Hooks/components.tsx index 2adee81..63591b5 100644 --- a/src/course/02- lessons/05-Hooks/components.tsx +++ b/src/course/02- lessons/01-Bronze/Hooks/components.tsx @@ -1,6 +1,6 @@ -import { Input } from '../../../shared/components/Input/Input.component'; -import { Label } from '../../../shared/components/Label/Label.component'; -import { ErrorMessage } from '../../../shared/components/ErrorMessage/ErrorMessage.component'; +import { Input } from '@shared/components/Input/Input.component'; +import { Label } from '@shared/components/Label/Label.component'; +import { ErrorMessage } from '@shared/components/ErrorMessage/ErrorMessage.component'; import { HTMLAttributes } from 'react'; export interface ITextFieldProps { diff --git a/src/course/02- lessons/08-Provider/exercise.stories.tsx b/src/course/02- lessons/01-Bronze/Hooks/exercise/exercise.stories.tsx similarity index 88% rename from src/course/02- lessons/08-Provider/exercise.stories.tsx rename to src/course/02- lessons/01-Bronze/Hooks/exercise/exercise.stories.tsx index 6feb89c..2407fb0 100644 --- a/src/course/02- lessons/08-Provider/exercise.stories.tsx +++ b/src/course/02- lessons/01-Bronze/Hooks/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/08 - Provider Pattern/02-Exercise', + title: 'Lessons/🥉 Bronze/Hooks Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/05-Hooks/exercise.tsx b/src/course/02- lessons/01-Bronze/Hooks/exercise/exercise.tsx similarity index 97% rename from src/course/02- lessons/05-Hooks/exercise.tsx rename to src/course/02- lessons/01-Bronze/Hooks/exercise/exercise.tsx index 7191929..875f1bb 100644 --- a/src/course/02- lessons/05-Hooks/exercise.tsx +++ b/src/course/02- lessons/01-Bronze/Hooks/exercise/exercise.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, useState } from 'react'; -import { ITextFieldProps, TextFieldComponent } from './components'; +import { ITextFieldProps, TextFieldComponent } from '../components'; /* * Observations diff --git a/src/course/02-solutions/03-RenderProps/final.stories.tsx b/src/course/02- lessons/01-Bronze/Hooks/final/final.stories.tsx similarity index 88% rename from src/course/02-solutions/03-RenderProps/final.stories.tsx rename to src/course/02- lessons/01-Bronze/Hooks/final/final.stories.tsx index 38c16c2..bc3c325 100644 --- a/src/course/02-solutions/03-RenderProps/final.stories.tsx +++ b/src/course/02- lessons/01-Bronze/Hooks/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/03 - Render Props Pattern/03-Final', + title: 'Lessons/🥉 Bronze/Hooks Pattern/03-Final', component: Final }; diff --git a/src/course/02-solutions/05-Hooks/final.tsx b/src/course/02- lessons/01-Bronze/Hooks/final/final.tsx similarity index 96% rename from src/course/02-solutions/05-Hooks/final.tsx rename to src/course/02- lessons/01-Bronze/Hooks/final/final.tsx index 95f7cad..ec340b2 100644 --- a/src/course/02-solutions/05-Hooks/final.tsx +++ b/src/course/02- lessons/01-Bronze/Hooks/final/final.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, useState } from 'react'; -import { TextFieldComponent } from './components'; +import { TextFieldComponent } from '../components'; interface IFieldProps { name: string; diff --git a/src/course/02- lessons/05-Hooks/lesson.mdx b/src/course/02- lessons/01-Bronze/Hooks/lesson.mdx similarity index 98% rename from src/course/02- lessons/05-Hooks/lesson.mdx rename to src/course/02- lessons/01-Bronze/Hooks/lesson.mdx index a55afb9..6ab9443 100644 --- a/src/course/02- lessons/05-Hooks/lesson.mdx +++ b/src/course/02- lessons/01-Bronze/Hooks/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Hooks Pattern diff --git a/src/course/02- lessons/04-PresentationalAndContainer/exercise.stories.tsx b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.stories.tsx similarity index 86% rename from src/course/02- lessons/04-PresentationalAndContainer/exercise.stories.tsx rename to src/course/02- lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.stories.tsx index d3892a6..0f004ef 100644 --- a/src/course/02- lessons/04-PresentationalAndContainer/exercise.stories.tsx +++ b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.stories.tsx @@ -4,7 +4,7 @@ import { BrandPageOne, BrandPageTwo } from './exercise'; const meta: Meta = { title: - 'Lessons/04 - Presentational & Container Pattern/02-Exercise', + 'Lessons/🥉 Bronze/Presentational & Container Pattern/02-Exercise', component: BrandPageOne }; diff --git a/src/course/02- lessons/04-PresentationalAndContainer/exercise.tsx b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.tsx similarity index 93% rename from src/course/02- lessons/04-PresentationalAndContainer/exercise.tsx rename to src/course/02- lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.tsx index 215ef12..9b199da 100644 --- a/src/course/02- lessons/04-PresentationalAndContainer/exercise.tsx +++ b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.tsx @@ -1,12 +1,12 @@ import { useEffect, useState } from 'react'; -import { ErrorMessage } from '../../../shared/components/ErrorMessage/ErrorMessage.component'; +import { ErrorMessage } from '@shared/components/ErrorMessage/ErrorMessage.component'; import { ICheckoutData, useBrandOnePayment, useCheckout -} from './mocks'; -import { Skeleton } from '../../../shared/components/Skeleton/Skeleton.component'; -import { Button } from '../../../shared/components/Button/Button.component'; +} from '../mocks'; +import { Skeleton } from '@shared/components/Skeleton/Skeleton.component'; +import { Button } from '@shared/components/Button/Button.component'; interface IPaymentTemplate { hasPaymentFailed: boolean; diff --git a/src/course/02-solutions/04-PresentationalAndContainer/final.stories.tsx b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/final/final.stories.tsx similarity index 85% rename from src/course/02-solutions/04-PresentationalAndContainer/final.stories.tsx rename to src/course/02- lessons/01-Bronze/PresentationalAndContainer/final/final.stories.tsx index a6bd4a5..448e8fe 100644 --- a/src/course/02-solutions/04-PresentationalAndContainer/final.stories.tsx +++ b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/final/final.stories.tsx @@ -3,7 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import { BrandPageOne, BrandPageTwo } from './final'; const meta: Meta = { - title: 'Lessons/04 - Presentational & Container Pattern/03-Final', + title: + 'Lessons/🥉 Bronze/Presentational & Container Pattern/03-Final', component: BrandPageOne }; diff --git a/src/course/02-solutions/04-PresentationalAndContainer/final.tsx b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/final/final.tsx similarity index 93% rename from src/course/02-solutions/04-PresentationalAndContainer/final.tsx rename to src/course/02- lessons/01-Bronze/PresentationalAndContainer/final/final.tsx index 028dc5e..e539017 100644 --- a/src/course/02-solutions/04-PresentationalAndContainer/final.tsx +++ b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/final/final.tsx @@ -1,13 +1,13 @@ import { useEffect, useState } from 'react'; -import { ErrorMessage } from '../../../shared/components/ErrorMessage/ErrorMessage.component'; +import { ErrorMessage } from '@shared/components/ErrorMessage/ErrorMessage.component'; import { useBrandOnePayment, useCheckout, useBrandTwoPayment, ICheckoutData -} from './mocks'; -import { Button } from '../../../shared/components/Button/Button.component'; -import { Skeleton } from '../../../shared/components/Skeleton/Skeleton.component'; +} from '../mocks'; +import { Button } from '@shared/components/Button/Button.component'; +import { Skeleton } from '@shared/components/Skeleton/Skeleton.component'; interface IPaymentTemplate { hasPaymentFailed: boolean; diff --git a/src/course/02- lessons/04-PresentationalAndContainer/lesson.mdx b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/lesson.mdx similarity index 98% rename from src/course/02- lessons/04-PresentationalAndContainer/lesson.mdx rename to src/course/02- lessons/01-Bronze/PresentationalAndContainer/lesson.mdx index b784a02..080b3ae 100644 --- a/src/course/02- lessons/04-PresentationalAndContainer/lesson.mdx +++ b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Presentational & Container Pattern diff --git a/src/course/02- lessons/04-PresentationalAndContainer/mocks.ts b/src/course/02- lessons/01-Bronze/PresentationalAndContainer/mocks.ts similarity index 100% rename from src/course/02- lessons/04-PresentationalAndContainer/mocks.ts rename to src/course/02- lessons/01-Bronze/PresentationalAndContainer/mocks.ts diff --git a/src/course/02- lessons/02-PropsCombination/exercise.stories.tsx b/src/course/02- lessons/01-Bronze/PropsCombination/exercise/exercise.stories.tsx similarity index 94% rename from src/course/02- lessons/02-PropsCombination/exercise.stories.tsx rename to src/course/02- lessons/01-Bronze/PropsCombination/exercise/exercise.stories.tsx index 0b6a2f8..3a85de5 100644 --- a/src/course/02- lessons/02-PropsCombination/exercise.stories.tsx +++ b/src/course/02- lessons/01-Bronze/PropsCombination/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/02 - Props Combination Pattern/02-Exercise', + title: 'Lessons/🥉 Bronze/Props Combination Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/02-PropsCombination/exercise.tsx b/src/course/02- lessons/01-Bronze/PropsCombination/exercise/exercise.tsx similarity index 100% rename from src/course/02- lessons/02-PropsCombination/exercise.tsx rename to src/course/02- lessons/01-Bronze/PropsCombination/exercise/exercise.tsx diff --git a/src/course/02-solutions/02-PropsCombination/final.stories.tsx b/src/course/02- lessons/01-Bronze/PropsCombination/final/final.stories.tsx similarity index 94% rename from src/course/02-solutions/02-PropsCombination/final.stories.tsx rename to src/course/02- lessons/01-Bronze/PropsCombination/final/final.stories.tsx index 6b5a5fe..fe71bb7 100644 --- a/src/course/02-solutions/02-PropsCombination/final.stories.tsx +++ b/src/course/02- lessons/01-Bronze/PropsCombination/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/02 - Props Combination Pattern/03-Final', + title: 'Lessons/🥉 Bronze/Props Combination Pattern/03-Final', component: Final }; diff --git a/src/course/02-solutions/02-PropsCombination/final.tsx b/src/course/02- lessons/01-Bronze/PropsCombination/final/final.tsx similarity index 100% rename from src/course/02-solutions/02-PropsCombination/final.tsx rename to src/course/02- lessons/01-Bronze/PropsCombination/final/final.tsx diff --git a/src/course/02- lessons/02-PropsCombination/lesson.mdx b/src/course/02- lessons/01-Bronze/PropsCombination/lesson.mdx similarity index 96% rename from src/course/02- lessons/02-PropsCombination/lesson.mdx rename to src/course/02- lessons/01-Bronze/PropsCombination/lesson.mdx index 475e56a..2115d3c 100644 --- a/src/course/02- lessons/02-PropsCombination/lesson.mdx +++ b/src/course/02- lessons/01-Bronze/PropsCombination/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Props Combination Pattern diff --git a/src/course/02- lessons/11-Slots/exercise.stories.tsx b/src/course/02- lessons/01-Bronze/Slots/exercise/exercise.stories.tsx similarity index 90% rename from src/course/02- lessons/11-Slots/exercise.stories.tsx rename to src/course/02- lessons/01-Bronze/Slots/exercise/exercise.stories.tsx index c3521e5..a40b57b 100644 --- a/src/course/02- lessons/11-Slots/exercise.stories.tsx +++ b/src/course/02- lessons/01-Bronze/Slots/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/11 - Slots/02-Exercise', + title: 'Lessons/🥉 Bronze/Slots/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/11-Slots/exercise.tsx b/src/course/02- lessons/01-Bronze/Slots/exercise/exercise.tsx similarity index 100% rename from src/course/02- lessons/11-Slots/exercise.tsx rename to src/course/02- lessons/01-Bronze/Slots/exercise/exercise.tsx diff --git a/src/course/02-solutions/11-Slots/final.stories.tsx b/src/course/02- lessons/01-Bronze/Slots/final/final.stories.tsx similarity index 90% rename from src/course/02-solutions/11-Slots/final.stories.tsx rename to src/course/02- lessons/01-Bronze/Slots/final/final.stories.tsx index dc71714..8fb0fda 100644 --- a/src/course/02-solutions/11-Slots/final.stories.tsx +++ b/src/course/02- lessons/01-Bronze/Slots/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/11 - Slots/03-Final', + title: 'Lessons/🥉 Bronze/Slots/03-Final', component: Final }; diff --git a/src/course/02-solutions/11-Slots/final.tsx b/src/course/02- lessons/01-Bronze/Slots/final/final.tsx similarity index 96% rename from src/course/02-solutions/11-Slots/final.tsx rename to src/course/02- lessons/01-Bronze/Slots/final/final.tsx index fb91eb8..b34f17c 100644 --- a/src/course/02-solutions/11-Slots/final.tsx +++ b/src/course/02- lessons/01-Bronze/Slots/final/final.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { HTMLAttributes } from 'react'; -import { IconOne, IconTwo } from './icons'; +import { IconOne, IconTwo } from '../icons'; interface IButton extends HTMLAttributes { className?: string; diff --git a/src/course/02- lessons/11-Slots/icons/index.tsx b/src/course/02- lessons/01-Bronze/Slots/icons/index.tsx similarity index 100% rename from src/course/02- lessons/11-Slots/icons/index.tsx rename to src/course/02- lessons/01-Bronze/Slots/icons/index.tsx diff --git a/src/course/02- lessons/11-Slots/lesson.mdx b/src/course/02- lessons/01-Bronze/Slots/lesson.mdx similarity index 97% rename from src/course/02- lessons/11-Slots/lesson.mdx rename to src/course/02- lessons/01-Bronze/Slots/lesson.mdx index 2093db8..3538912 100644 --- a/src/course/02- lessons/11-Slots/lesson.mdx +++ b/src/course/02- lessons/01-Bronze/Slots/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Slots Pattern diff --git a/src/course/02- lessons/01-ConditionalRendering/exercise.stories.tsx b/src/course/02- lessons/01-ConditionalRendering/exercise.stories.tsx deleted file mode 100644 index 5c66860..0000000 --- a/src/course/02- lessons/01-ConditionalRendering/exercise.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import { userEvent, within, expect } from "@storybook/test"; - -import { ComponentOne } from "./exercise"; - -const meta: Meta = { - title: "Lessons/01 - Conditional Rendering Pattern/02-Exercise", - component: ComponentOne, -}; - -export default meta; -type Story = StoryObj; - -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, - }, -}; diff --git a/src/course/02- lessons/10-Compound/components/Accordion.tsx b/src/course/02- lessons/02-Silver/Compound/exercise/components/Accordion.tsx similarity index 100% rename from src/course/02- lessons/10-Compound/components/Accordion.tsx rename to src/course/02- lessons/02-Silver/Compound/exercise/components/Accordion.tsx diff --git a/src/course/02- lessons/10-Compound/components/Accoridon.module.css b/src/course/02- lessons/02-Silver/Compound/exercise/components/Accoridon.module.css similarity index 100% rename from src/course/02- lessons/10-Compound/components/Accoridon.module.css rename to src/course/02- lessons/02-Silver/Compound/exercise/components/Accoridon.module.css diff --git a/src/course/02- lessons/10-Compound/components/ChevronDown.tsx b/src/course/02- lessons/02-Silver/Compound/exercise/components/ChevronDown.tsx similarity index 100% rename from src/course/02- lessons/10-Compound/components/ChevronDown.tsx rename to src/course/02- lessons/02-Silver/Compound/exercise/components/ChevronDown.tsx diff --git a/src/course/02- lessons/06-Controlled/exercise.stories.tsx b/src/course/02- lessons/02-Silver/Compound/exercise/exercise.stories.tsx similarity index 86% rename from src/course/02- lessons/06-Controlled/exercise.stories.tsx rename to src/course/02- lessons/02-Silver/Compound/exercise/exercise.stories.tsx index 57b9197..b35e34d 100644 --- a/src/course/02- lessons/06-Controlled/exercise.stories.tsx +++ b/src/course/02- lessons/02-Silver/Compound/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/06 - Controlled Components Pattern/02-Exercise', + title: 'Lessons/🥈 Sliver/Compound Components Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/10-Compound/exercise.tsx b/src/course/02- lessons/02-Silver/Compound/exercise/exercise.tsx similarity index 100% rename from src/course/02- lessons/10-Compound/exercise.tsx rename to src/course/02- lessons/02-Silver/Compound/exercise/exercise.tsx diff --git a/src/course/02-solutions/10-Compound/components/Accordion.tsx b/src/course/02- lessons/02-Silver/Compound/final/components/Accordion.tsx similarity index 100% rename from src/course/02-solutions/10-Compound/components/Accordion.tsx rename to src/course/02- lessons/02-Silver/Compound/final/components/Accordion.tsx diff --git a/src/course/02-solutions/10-Compound/components/Accoridon.module.css b/src/course/02- lessons/02-Silver/Compound/final/components/Accoridon.module.css similarity index 100% rename from src/course/02-solutions/10-Compound/components/Accoridon.module.css rename to src/course/02- lessons/02-Silver/Compound/final/components/Accoridon.module.css diff --git a/src/course/02-solutions/10-Compound/components/ChevronDown.tsx b/src/course/02- lessons/02-Silver/Compound/final/components/ChevronDown.tsx similarity index 100% rename from src/course/02-solutions/10-Compound/components/ChevronDown.tsx rename to src/course/02- lessons/02-Silver/Compound/final/components/ChevronDown.tsx diff --git a/src/course/02-solutions/06-Controlled/final.stories.tsx b/src/course/02- lessons/02-Silver/Compound/final/final.stories.tsx similarity index 86% rename from src/course/02-solutions/06-Controlled/final.stories.tsx rename to src/course/02- lessons/02-Silver/Compound/final/final.stories.tsx index 830039c..d09a9cb 100644 --- a/src/course/02-solutions/06-Controlled/final.stories.tsx +++ b/src/course/02- lessons/02-Silver/Compound/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/06 - Controlled Components Pattern/03-Final', + title: 'Lessons/🥈 Sliver/Compound Components Pattern/03-Final', component: Final }; diff --git a/src/course/02-solutions/10-Compound/final.tsx b/src/course/02- lessons/02-Silver/Compound/final/final.tsx similarity index 100% rename from src/course/02-solutions/10-Compound/final.tsx rename to src/course/02- lessons/02-Silver/Compound/final/final.tsx diff --git a/src/course/02- lessons/10-Compound/lesson.mdx b/src/course/02- lessons/02-Silver/Compound/lesson.mdx similarity index 96% rename from src/course/02- lessons/10-Compound/lesson.mdx rename to src/course/02- lessons/02-Silver/Compound/lesson.mdx index 66b3236..9751a69 100644 --- a/src/course/02- lessons/10-Compound/lesson.mdx +++ b/src/course/02- lessons/02-Silver/Compound/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Compound Components Pattern diff --git a/src/course/02- lessons/05-Hooks/exercise.stories.tsx b/src/course/02- lessons/02-Silver/Controlled/exercise/exercise.stories.tsx similarity index 85% rename from src/course/02- lessons/05-Hooks/exercise.stories.tsx rename to src/course/02- lessons/02-Silver/Controlled/exercise/exercise.stories.tsx index 28c98ec..1bda094 100644 --- a/src/course/02- lessons/05-Hooks/exercise.stories.tsx +++ b/src/course/02- lessons/02-Silver/Controlled/exercise/exercise.stories.tsx @@ -3,7 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/05 - Hooks Pattern/02-Exercise', + title: + 'Lessons/🥈 Sliver/Controlled Components Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/06-Controlled/exercise.tsx b/src/course/02- lessons/02-Silver/Controlled/exercise/exercise.tsx similarity index 98% rename from src/course/02- lessons/06-Controlled/exercise.tsx rename to src/course/02- lessons/02-Silver/Controlled/exercise/exercise.tsx index 5d723eb..d3878c7 100644 --- a/src/course/02- lessons/06-Controlled/exercise.tsx +++ b/src/course/02- lessons/02-Silver/Controlled/exercise/exercise.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { useEffect, useRef, useState } from 'react'; import FocusLock from 'react-focus-lock'; -import { Button } from '../../../shared/components/Button/Button.component'; +import { Button } from '@shared/components/Button/Button.component'; interface IModal { isVisible: boolean; diff --git a/src/course/02- lessons/02-Silver/Controlled/final/final.stories.tsx b/src/course/02- lessons/02-Silver/Controlled/final/final.stories.tsx new file mode 100644 index 0000000..61763d8 --- /dev/null +++ b/src/course/02- lessons/02-Silver/Controlled/final/final.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Final } from './final'; + +const meta: Meta = { + title: 'Lessons/🥈 Sliver/Controlled Components Pattern/03-Final', + component: Final +}; + +export default meta; +type Story = StoryObj; + +/* + * 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 () => {}, + args: {} +}; diff --git a/src/course/02-solutions/06-Controlled/final.tsx b/src/course/02- lessons/02-Silver/Controlled/final/final.tsx similarity index 96% rename from src/course/02-solutions/06-Controlled/final.tsx rename to src/course/02- lessons/02-Silver/Controlled/final/final.tsx index b4bbb8e..0976052 100644 --- a/src/course/02-solutions/06-Controlled/final.tsx +++ b/src/course/02- lessons/02-Silver/Controlled/final/final.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { useEffect, useRef, useState } from 'react'; import FocusLock from 'react-focus-lock'; -import { Button } from '../../../shared/components/Button/Button.component'; +import { Button } from '@shared/components/Button/Button.component'; interface IModal { isVisible: boolean; diff --git a/src/course/02- lessons/06-Controlled/lesson.mdx b/src/course/02- lessons/02-Silver/Controlled/lesson.mdx similarity index 96% rename from src/course/02- lessons/06-Controlled/lesson.mdx rename to src/course/02- lessons/02-Silver/Controlled/lesson.mdx index 1b2b099..f238cf0 100644 --- a/src/course/02- lessons/06-Controlled/lesson.mdx +++ b/src/course/02- lessons/02-Silver/Controlled/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Controlled Components Pattern diff --git a/src/course/02- lessons/12-Portals/components/modal.tsx b/src/course/02- lessons/02-Silver/Portals/exercise/components/modal.tsx similarity index 96% rename from src/course/02- lessons/12-Portals/components/modal.tsx rename to src/course/02- lessons/02-Silver/Portals/exercise/components/modal.tsx index 749bbd0..e209c37 100644 --- a/src/course/02- lessons/12-Portals/components/modal.tsx +++ b/src/course/02- lessons/02-Silver/Portals/exercise/components/modal.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { useEffect, useRef } from 'react'; // 👨🏻‍💻 1B - import { createPortal } from 'react-dom'; import FocusLock from 'react-focus-lock'; -import { Button } from '../../../../shared/components/Button/Button.component'; +import { Button } from '@shared/components/Button/Button.component'; interface IModal { isVisible: boolean; diff --git a/src/course/02- lessons/12-Portals/exercise.stories.tsx b/src/course/02- lessons/02-Silver/Portals/exercise/exercise.stories.tsx similarity index 89% rename from src/course/02- lessons/12-Portals/exercise.stories.tsx rename to src/course/02- lessons/02-Silver/Portals/exercise/exercise.stories.tsx index 63d4c26..f032f5d 100644 --- a/src/course/02- lessons/12-Portals/exercise.stories.tsx +++ b/src/course/02- lessons/02-Silver/Portals/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/12 - Portals/02-Exercise', + title: 'Lessons/🥈 Sliver/Portals/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/12-Portals/exercise.tsx b/src/course/02- lessons/02-Silver/Portals/exercise/exercise.tsx similarity index 96% rename from src/course/02- lessons/12-Portals/exercise.tsx rename to src/course/02- lessons/02-Silver/Portals/exercise/exercise.tsx index 7158c39..9e87a08 100644 --- a/src/course/02- lessons/12-Portals/exercise.tsx +++ b/src/course/02- lessons/02-Silver/Portals/exercise/exercise.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Modal } from './components/modal'; -import { Button } from '../../../shared/components/Button/Button.component'; +import { Button } from '@shared/components/Button/Button.component'; // 👨🏻‍💻 1A - have a look at the current implementation of the modal and then go to components/modal.tsx diff --git a/src/course/02-solutions/12-Portals/components/modal.tsx b/src/course/02- lessons/02-Silver/Portals/final/components/modal.tsx similarity index 95% rename from src/course/02-solutions/12-Portals/components/modal.tsx rename to src/course/02- lessons/02-Silver/Portals/final/components/modal.tsx index e25f422..bb42cff 100644 --- a/src/course/02-solutions/12-Portals/components/modal.tsx +++ b/src/course/02- lessons/02-Silver/Portals/final/components/modal.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import FocusLock from 'react-focus-lock'; -import { Button } from '../../../../shared/components/Button/Button.component'; +import { Button } from '@shared/components/Button/Button.component'; interface IModal { isVisible: boolean; diff --git a/src/course/02-solutions/12-Portals/final.stories.tsx b/src/course/02- lessons/02-Silver/Portals/final/final.stories.tsx similarity index 89% rename from src/course/02-solutions/12-Portals/final.stories.tsx rename to src/course/02- lessons/02-Silver/Portals/final/final.stories.tsx index 55f1e75..7bf7e01 100644 --- a/src/course/02-solutions/12-Portals/final.stories.tsx +++ b/src/course/02- lessons/02-Silver/Portals/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/12 - Portals/03-Final', + title: 'Lessons/🥈 Sliver/Portals/03-Final', component: Final }; diff --git a/src/course/02-solutions/12-Portals/final.tsx b/src/course/02- lessons/02-Silver/Portals/final/final.tsx similarity index 96% rename from src/course/02-solutions/12-Portals/final.tsx rename to src/course/02- lessons/02-Silver/Portals/final/final.tsx index 3504ff6..04c5305 100644 --- a/src/course/02-solutions/12-Portals/final.tsx +++ b/src/course/02- lessons/02-Silver/Portals/final/final.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Modal } from './components/modal'; -import { Button } from '../../../shared/components/Button/Button.component'; +import { Button } from '@shared/components/Button/Button.component'; export const Final = () => { const [isVisible, setIsVisible] = useState(false); diff --git a/src/course/02- lessons/12-Portals/lesson.mdx b/src/course/02- lessons/02-Silver/Portals/lesson.mdx similarity index 96% rename from src/course/02- lessons/12-Portals/lesson.mdx rename to src/course/02- lessons/02-Silver/Portals/lesson.mdx index 8b7a9f4..517a6d2 100644 --- a/src/course/02- lessons/12-Portals/lesson.mdx +++ b/src/course/02- lessons/02-Silver/Portals/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Portals Pattern diff --git a/src/course/02- lessons/08-Provider/Provider.tsx b/src/course/02- lessons/02-Silver/Provider/exercise/Provider.tsx similarity index 100% rename from src/course/02- lessons/08-Provider/Provider.tsx rename to src/course/02- lessons/02-Silver/Provider/exercise/Provider.tsx diff --git a/src/course/02- lessons/09-StateReducer/exercise.stories.tsx b/src/course/02- lessons/02-Silver/Provider/exercise/exercise.stories.tsx similarity index 88% rename from src/course/02- lessons/09-StateReducer/exercise.stories.tsx rename to src/course/02- lessons/02-Silver/Provider/exercise/exercise.stories.tsx index 17ae5bb..2775324 100644 --- a/src/course/02- lessons/09-StateReducer/exercise.stories.tsx +++ b/src/course/02- lessons/02-Silver/Provider/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/09 - State Reducer Pattern/02-Exercise', + title: 'Lessons/🥈 Sliver/Provider Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/08-Provider/exercise.tsx b/src/course/02- lessons/02-Silver/Provider/exercise/exercise.tsx similarity index 100% rename from src/course/02- lessons/08-Provider/exercise.tsx rename to src/course/02- lessons/02-Silver/Provider/exercise/exercise.tsx diff --git a/src/course/02-solutions/08-Provider/Provider.tsx b/src/course/02- lessons/02-Silver/Provider/final/Provider.tsx similarity index 95% rename from src/course/02-solutions/08-Provider/Provider.tsx rename to src/course/02- lessons/02-Silver/Provider/final/Provider.tsx index 6f0bdb8..82dff67 100644 --- a/src/course/02-solutions/08-Provider/Provider.tsx +++ b/src/course/02- lessons/02-Silver/Provider/final/Provider.tsx @@ -2,7 +2,7 @@ import { createContext, useContext, useMemo, useState } from 'react'; import { IPokemonManagerState, PokemonManager -} from '../../../shared/modules/PokemonManager/PokemonManager'; +} from '@shared/modules/PokemonManager/PokemonManager'; export interface IPokemonProviderState extends IPokemonManagerState { fetchPokemons: (total: number) => Promise; diff --git a/src/course/02-solutions/09-StateReducer/final.stories.tsx b/src/course/02- lessons/02-Silver/Provider/final/final.stories.tsx similarity index 88% rename from src/course/02-solutions/09-StateReducer/final.stories.tsx rename to src/course/02- lessons/02-Silver/Provider/final/final.stories.tsx index 493f022..dfc29b9 100644 --- a/src/course/02-solutions/09-StateReducer/final.stories.tsx +++ b/src/course/02- lessons/02-Silver/Provider/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/09 - State Reducer Pattern/03-Final', + title: 'Lessons/🥈 Sliver/Provider Pattern/03-Final', component: Final }; diff --git a/src/course/02-solutions/08-Provider/final.tsx b/src/course/02- lessons/02-Silver/Provider/final/final.tsx similarity index 100% rename from src/course/02-solutions/08-Provider/final.tsx rename to src/course/02- lessons/02-Silver/Provider/final/final.tsx diff --git a/src/course/02- lessons/08-Provider/lesson.mdx b/src/course/02- lessons/02-Silver/Provider/lesson.mdx similarity index 96% rename from src/course/02- lessons/08-Provider/lesson.mdx rename to src/course/02- lessons/02-Silver/Provider/lesson.mdx index ffa9838..032ca68 100644 --- a/src/course/02- lessons/08-Provider/lesson.mdx +++ b/src/course/02- lessons/02-Silver/Provider/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Provider Pattern diff --git a/src/course/02- lessons/10-Compound/exercise.stories.tsx b/src/course/02- lessons/02-Silver/RenderProps/exercise/exercise.stories.tsx similarity index 87% rename from src/course/02- lessons/10-Compound/exercise.stories.tsx rename to src/course/02- lessons/02-Silver/RenderProps/exercise/exercise.stories.tsx index ac0daa2..4ae95da 100644 --- a/src/course/02- lessons/10-Compound/exercise.stories.tsx +++ b/src/course/02- lessons/02-Silver/RenderProps/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/10 - Compound Components Pattern/02-Exercise', + title: 'Lessons/🥈 Sliver/Render Props Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/03-RenderProps/exercise.tsx b/src/course/02- lessons/02-Silver/RenderProps/exercise/exercise.tsx similarity index 91% rename from src/course/02- lessons/03-RenderProps/exercise.tsx rename to src/course/02- lessons/02-Silver/RenderProps/exercise/exercise.tsx index 5e07985..62f783e 100644 --- a/src/course/02- lessons/03-RenderProps/exercise.tsx +++ b/src/course/02- lessons/02-Silver/RenderProps/exercise/exercise.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, useState } from 'react'; -import { Input } from '../../../shared/components/Input/Input.component'; -import { Label } from '../../../shared/components/Label/Label.component'; -import { ErrorMessage } from '../../../shared/components/ErrorMessage/ErrorMessage.component'; +import { Input } from '@shared/components/Input/Input.component'; +import { Label } from '@shared/components/Label/Label.component'; +import { ErrorMessage } from '@shared/components/ErrorMessage/ErrorMessage.component'; export interface ITextInputFieldProps { name: string; diff --git a/src/course/02-solutions/08-Provider/final.stories.tsx b/src/course/02- lessons/02-Silver/RenderProps/final/final.stories.tsx similarity index 87% rename from src/course/02-solutions/08-Provider/final.stories.tsx rename to src/course/02- lessons/02-Silver/RenderProps/final/final.stories.tsx index e9d0334..d19b771 100644 --- a/src/course/02-solutions/08-Provider/final.stories.tsx +++ b/src/course/02- lessons/02-Silver/RenderProps/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/08 - Provider Pattern/03-Final', + title: 'Lessons/🥈 Sliver/Render Props Pattern/03-Final', component: Final }; diff --git a/src/course/02-solutions/03-RenderProps/final.tsx b/src/course/02- lessons/02-Silver/RenderProps/final/final.tsx similarity index 90% rename from src/course/02-solutions/03-RenderProps/final.tsx rename to src/course/02- lessons/02-Silver/RenderProps/final/final.tsx index f453323..e22879c 100644 --- a/src/course/02-solutions/03-RenderProps/final.tsx +++ b/src/course/02- lessons/02-Silver/RenderProps/final/final.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, HTMLAttributes, useState } from 'react'; -import { Input } from '../../../shared/components/Input/Input.component'; -import { Label } from '../../../shared/components/Label/Label.component'; -import { ErrorMessage } from '../../../shared/components/ErrorMessage/ErrorMessage.component'; +import { Input } from '@shared/components/Input/Input.component'; +import { Label } from '@shared/components/Label/Label.component'; +import { ErrorMessage } from '@shared/components/ErrorMessage/ErrorMessage.component'; interface ITextFieldProps { hasError: boolean; diff --git a/src/course/02- lessons/03-RenderProps/lesson.mdx b/src/course/02- lessons/02-Silver/RenderProps/lesson.mdx similarity index 96% rename from src/course/02- lessons/03-RenderProps/lesson.mdx rename to src/course/02- lessons/02-Silver/RenderProps/lesson.mdx index fb3b3d9..7e6dff2 100644 --- a/src/course/02- lessons/03-RenderProps/lesson.mdx +++ b/src/course/02- lessons/02-Silver/RenderProps/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Render Props Pattern diff --git a/src/course/02- lessons/03-RenderProps/exercise.stories.tsx b/src/course/02- lessons/02-Silver/StateReducer/exercise/exercise.stories.tsx similarity index 87% rename from src/course/02- lessons/03-RenderProps/exercise.stories.tsx rename to src/course/02- lessons/02-Silver/StateReducer/exercise/exercise.stories.tsx index b039a1f..ff19034 100644 --- a/src/course/02- lessons/03-RenderProps/exercise.stories.tsx +++ b/src/course/02- lessons/02-Silver/StateReducer/exercise/exercise.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/03 - Render Props Pattern/02-Exercise', + title: 'Lessons/🥈 Sliver/State Reducer Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/09-StateReducer/exercise.tsx b/src/course/02- lessons/02-Silver/StateReducer/exercise/exercise.tsx similarity index 100% rename from src/course/02- lessons/09-StateReducer/exercise.tsx rename to src/course/02- lessons/02-Silver/StateReducer/exercise/exercise.tsx diff --git a/src/course/02-solutions/05-Hooks/final.stories.tsx b/src/course/02- lessons/02-Silver/StateReducer/final/final.stories.tsx similarity index 87% rename from src/course/02-solutions/05-Hooks/final.stories.tsx rename to src/course/02- lessons/02-Silver/StateReducer/final/final.stories.tsx index 6b78fa8..d6b730c 100644 --- a/src/course/02-solutions/05-Hooks/final.stories.tsx +++ b/src/course/02- lessons/02-Silver/StateReducer/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/05 - Hooks Pattern/03-Final', + title: 'Lessons/🥈 Sliver/State Reducer Pattern/03-Final', component: Final }; diff --git a/src/course/02-solutions/09-StateReducer/final.tsx b/src/course/02- lessons/02-Silver/StateReducer/final/final.tsx similarity index 97% rename from src/course/02-solutions/09-StateReducer/final.tsx rename to src/course/02- lessons/02-Silver/StateReducer/final/final.tsx index 7414940..e34d56a 100644 --- a/src/course/02-solutions/09-StateReducer/final.tsx +++ b/src/course/02- lessons/02-Silver/StateReducer/final/final.tsx @@ -2,7 +2,7 @@ import { Dispatch, useEffect, useReducer } from 'react'; import { IPokemon, PokemonManager -} from '../../../shared/modules/PokemonManager/PokemonManager'; +} from '@shared/modules/PokemonManager/PokemonManager'; interface IPokemonReducerState { pokemons?: IPokemon[]; diff --git a/src/course/02- lessons/09-StateReducer/lesson.mdx b/src/course/02- lessons/02-Silver/StateReducer/lesson.mdx similarity index 97% rename from src/course/02- lessons/09-StateReducer/lesson.mdx rename to src/course/02- lessons/02-Silver/StateReducer/lesson.mdx index 7cd41e0..185de16 100644 --- a/src/course/02- lessons/09-StateReducer/lesson.mdx +++ b/src/course/02- lessons/02-Silver/StateReducer/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # State Reducer Pattern diff --git a/src/course/02- lessons/07-HigherOrderComponents/exercise.stories.tsx b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/exercise/exercise.stories.tsx similarity index 87% rename from src/course/02- lessons/07-HigherOrderComponents/exercise.stories.tsx rename to src/course/02- lessons/03-Gold/01-HigherOrderComponents/exercise/exercise.stories.tsx index 09540c2..adedfa2 100644 --- a/src/course/02- lessons/07-HigherOrderComponents/exercise.stories.tsx +++ b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/exercise/exercise.stories.tsx @@ -3,7 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Exercise } from './exercise'; const meta: Meta = { - title: 'Lessons/07 - Higher Order Components Pattern/02-Exercise', + title: + 'Lessons/🥇 Gold/Higher Order Components Pattern/02-Exercise', component: Exercise }; diff --git a/src/course/02- lessons/07-HigherOrderComponents/exercise.tsx b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/exercise/exercise.tsx similarity index 100% rename from src/course/02- lessons/07-HigherOrderComponents/exercise.tsx rename to src/course/02- lessons/03-Gold/01-HigherOrderComponents/exercise/exercise.tsx diff --git a/src/course/02- lessons/07-HigherOrderComponents/withPokemon.tsx b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/exercise/withPokemon.tsx similarity index 100% rename from src/course/02- lessons/07-HigherOrderComponents/withPokemon.tsx rename to src/course/02- lessons/03-Gold/01-HigherOrderComponents/exercise/withPokemon.tsx diff --git a/src/course/02-solutions/07-HigherOrderComponents/final.stories.tsx b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/final.stories.tsx similarity index 86% rename from src/course/02-solutions/07-HigherOrderComponents/final.stories.tsx rename to src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/final.stories.tsx index 82482b7..43ddf05 100644 --- a/src/course/02-solutions/07-HigherOrderComponents/final.stories.tsx +++ b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/final.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Final } from './final'; const meta: Meta = { - title: 'Lessons/07 - Higher Order Components Pattern/03-Final', + title: 'Lessons/🥇 Gold/Higher Order Components Pattern/03-Final', component: Final }; diff --git a/src/course/02-solutions/07-HigherOrderComponents/final.tsx b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/final.tsx similarity index 95% rename from src/course/02-solutions/07-HigherOrderComponents/final.tsx rename to src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/final.tsx index fe8200a..c3f4f0b 100644 --- a/src/course/02-solutions/07-HigherOrderComponents/final.tsx +++ b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/final.tsx @@ -3,7 +3,7 @@ import { IPokemonManagerActions, withPokemons } from './withPokemon'; import { IPokemon, IPokemonManagerState -} from '../../../shared/modules/PokemonManager/PokemonManager'; +} from '@shared/modules/PokemonManager/PokemonManager'; interface IMapStateToPropsComponentOneResponse { pokemons: IPokemon[]; diff --git a/src/course/02-solutions/07-HigherOrderComponents/withPokemon.tsx b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/withPokemon.tsx similarity index 94% rename from src/course/02-solutions/07-HigherOrderComponents/withPokemon.tsx rename to src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/withPokemon.tsx index 375bba6..6d60112 100644 --- a/src/course/02-solutions/07-HigherOrderComponents/withPokemon.tsx +++ b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/final/withPokemon.tsx @@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'; import { IPokemonManagerState, PokemonManager -} from '../../../shared/modules/PokemonManager/PokemonManager'; +} from '@shared/modules/PokemonManager/PokemonManager'; export interface IPokemonManagerActions { fetchPokemons: (total: number) => Promise; diff --git a/src/course/02- lessons/07-HigherOrderComponents/lesson.mdx b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/lesson.mdx similarity index 96% rename from src/course/02- lessons/07-HigherOrderComponents/lesson.mdx rename to src/course/02- lessons/03-Gold/01-HigherOrderComponents/lesson.mdx index aa8e0ba..eeddd2b 100644 --- a/src/course/02- lessons/07-HigherOrderComponents/lesson.mdx +++ b/src/course/02- lessons/03-Gold/01-HigherOrderComponents/lesson.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/blocks'; - + # Higher Order Components Pattern diff --git a/src/course/02-solutions/04-PresentationalAndContainer/mocks.ts b/src/course/02-solutions/04-PresentationalAndContainer/mocks.ts deleted file mode 100644 index 944b403..0000000 --- a/src/course/02-solutions/04-PresentationalAndContainer/mocks.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { useState } from 'react'; - -interface IAddress { - id: number; - displayAddress: string; -} - -export interface ICheckoutData { - deliveryAddress: IAddress; - billingAddress?: IAddress; -} - -type ApiHook = [ - () => Promise, - { - data: T; - isSuccess: boolean; - isError: boolean; - isLoading: boolean; - onBillingAddressUpdate?: () => void; - } -]; - -export const useCheckout = (): ApiHook => { - const [data, setData] = useState(); - const [isError] = useState(false); - const [isLoading, setIsLoading] = useState(false); - const [isSuccess, setIsSuccess] = useState(false); - - const getCheckoutInfo = async () => { - setIsLoading(true); - setData({ - deliveryAddress: { - id: 1, - displayAddress: '12 John Doe St, W12 5TH' - }, - billingAddress: undefined - }); - - setTimeout(() => { - setIsLoading(false); - setIsSuccess(true); - }, 1000); - }; - - const onBillingAddressUpdate = () => { - setData({ - deliveryAddress: data?.deliveryAddress as IAddress, - billingAddress: { - id: 2, - displayAddress: '12 John Doe Billing St, W12 5TH' - } - }); - }; - - return [ - getCheckoutInfo, - { data, isError, isLoading, isSuccess, onBillingAddressUpdate } - ]; -}; - -export const useBrandOnePayment = (): ApiHook => { - const [isError] = useState(false); - const [isLoading, setIsLoading] = useState(false); - const [isSuccess, setIsSuccess] = useState(false); - - const makePayment = async () => { - setIsLoading(true); - - makePayment(); - - setTimeout(() => { - setIsLoading(false); - setIsSuccess(true); - }, 1000); - }; - - return [ - makePayment, - { data: undefined, isSuccess, isError, isLoading } - ]; -}; - -export const useBrandTwoPayment = (): ApiHook => { - const [isError] = useState(false); - const [isLoading, setIsLoading] = useState(false); - const [isSuccess, setIsSuccess] = useState(false); - - const makePayment = async () => { - setIsLoading(true); - - makePayment(); - - setTimeout(() => { - setIsLoading(false); - setIsSuccess(true); - }, 1000); - }; - - return [ - makePayment, - { data: undefined, isSuccess, isError, isLoading } - ]; -}; diff --git a/src/course/02-solutions/05-Hooks/components.tsx b/src/course/02-solutions/05-Hooks/components.tsx deleted file mode 100644 index 2adee81..0000000 --- a/src/course/02-solutions/05-Hooks/components.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Input } from '../../../shared/components/Input/Input.component'; -import { Label } from '../../../shared/components/Label/Label.component'; -import { ErrorMessage } from '../../../shared/components/ErrorMessage/ErrorMessage.component'; -import { HTMLAttributes } from 'react'; - -export interface ITextFieldProps { - hasError: boolean; - errorMessage?: string; - id: string; - name: string; - label: string; - input: HTMLAttributes & { required?: boolean }; -} - -export const TextFieldComponent = ({ - hasError, - errorMessage, - input, - id, - name, - label -}: ITextFieldProps) => ( -
- - - {errorMessage && hasError && ( - - )} -
-); diff --git a/src/course/02-solutions/10-Compound/final.stories.tsx b/src/course/02-solutions/10-Compound/final.stories.tsx deleted file mode 100644 index e4f27ff..0000000 --- a/src/course/02-solutions/10-Compound/final.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { Final } from './final'; - -const meta: Meta = { - title: 'Lessons/10 - Compound Components Pattern/03-Final', - component: Final -}; - -export default meta; -type Story = StoryObj; - -/* - * 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 () => {}, - args: {} -}; diff --git a/src/course/02-solutions/11-Slots/icons/index.tsx b/src/course/02-solutions/11-Slots/icons/index.tsx deleted file mode 100644 index 75775a1..0000000 --- a/src/course/02-solutions/11-Slots/icons/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -export const IconTwo = ( - - - -); - -export const IconOne = ( - - - -); diff --git a/tsconfig.app.json b/tsconfig.app.json index 3be60d9..23ed661 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -21,7 +21,10 @@ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + "paths": { + "@shared/*": ["./src/shared/*"] + } }, "include": ["src"], "ignore": ["src/**/*.mdx"] diff --git a/tsconfig.node.json b/tsconfig.node.json index 3afdd6e..f89e416 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -7,7 +7,10 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true, "strict": true, - "noEmit": true + "noEmit": true, + "paths": { + "@shared/*": ["./src/shared/*"] + } }, "include": ["vite.config.ts"] } diff --git a/vite.config.ts b/vite.config.ts index 9cc50ea..6549182 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react()] }); From 6c04cd9cf41adb8e2cc0a0132692f7d803de058a Mon Sep 17 00:00:00 2001 From: code-mattclaffey Date: Tue, 20 May 2025 11:34:34 +0100 Subject: [PATCH 2/2] chore: some content changes --- src/course/01-introduction/01-Welcome.mdx | 2 +- src/course/01-introduction/02-GettingStarted.mdx | 2 +- src/course/01-introduction/03-LessonStructure.mdx | 8 +++++--- .../02- lessons/01-Bronze/ConditionalRendering/lesson.mdx | 2 +- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/course/01-introduction/01-Welcome.mdx b/src/course/01-introduction/01-Welcome.mdx index f87c80f..87e2a82 100644 --- a/src/course/01-introduction/01-Welcome.mdx +++ b/src/course/01-introduction/01-Welcome.mdx @@ -34,7 +34,7 @@ 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 diff --git a/src/course/01-introduction/02-GettingStarted.mdx b/src/course/01-introduction/02-GettingStarted.mdx index 2e084b0..966de2a 100644 --- a/src/course/01-introduction/02-GettingStarted.mdx +++ b/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 diff --git a/src/course/01-introduction/03-LessonStructure.mdx b/src/course/01-introduction/03-LessonStructure.mdx index 380be42..43fa999 100644 --- a/src/course/01-introduction/03-LessonStructure.mdx +++ b/src/course/01-introduction/03-LessonStructure.mdx @@ -6,6 +6,10 @@ import { Meta } from '@storybook/blocks'; 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 The best way to go about this course is to read through the content of the exercise and then at the end there is a challenge to complete in the exercise.tsx. In each file it will contain comments in the code which will guide you through the challenge. Each comment has an emoji which represents a certain meaning to the code, they are: @@ -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 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) +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. diff --git a/src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx b/src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx index 1a1c2fd..ccecd36 100644 --- a/src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx +++ b/src/course/02- lessons/01-Bronze/ConditionalRendering/lesson.mdx @@ -86,7 +86,7 @@ const Component = () => { ## Exercise -In the first exercise we are going to look into building a login and logout toggle which will render a username when they have logged in. Go to the exercise.tsx inside the 01-ConditionalRendering folder and start the exercise. Once completed, the Tests will show as passed in the storybook "Interactions" addon section. +In the first exercise we are going to look into building a login and logout toggle which will render a username when they have logged in. Go to the exercise.tsx inside the ConditionalRendering folder and start the exercise. Once completed, the Tests will show as passed in the storybook "Interactions" addon section. ## Feedback