Skip to content

Commit b3f51b8

Browse files
KagisoLegodiKagisoLegodi
committed
Merge branch 'main' into Filter-by-Category-#58
2 parents 15bdcf3 + d41dc3e commit b3f51b8

18 files changed

+8481
-947
lines changed

‎.github/workflows/linting.yml

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,32 @@ jobs:
1313
strategy:
1414
matrix:
1515
node-version: [18.x, 20.x, 22.x]
16-
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
1716

18-
steps:
19-
- uses: actions/checkout@v4
20-
21-
- name: Use Node.js ${{ matrix.node-version }}
22-
uses: actions/setup-node@v4
23-
with:
24-
node-version: ${{ matrix.node-version }}
25-
cache: 'npm'
26-
27-
- name: Cache node modules
28-
uses: actions/[email protected]
29-
with:
30-
path: node_modules
31-
key: node-modules-${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('package-lock.json') }}
32-
restore-keys: |
33-
node-modules-${{ runner.os }}-node-${{ matrix.node-version }}
17+
env: # Set environment variables at the job level
18+
MONGODB_URI: ${{ secrets.MONGODB_URI }} # Ensure this is correctly set
3419

35-
# Install dependencies with --legacy-peer-deps to avoid peer conflict issues
36-
- run: npm ci --legacy-peer-deps
37-
38-
# Linting step
39-
- run: npm run lint
40-
41-
# Build step
42-
- run: npm run build --if-present
20+
steps:
21+
- uses: actions/checkout@v4
22+
- name: Use Node.js ${{ matrix.node-version }}
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: ${{ matrix.node-version }}
26+
cache: 'npm'
27+
- name: Debug MongoDB URI
28+
run: echo "MONGODB_URI is set to: $MONGODB_URI" # Use the env variable instead of the secret directly
29+
env:
30+
MONGODB_URI: ${{ secrets.MONGODB_URI }}
31+
- name: Cache node modules
32+
uses: actions/[email protected]
33+
with:
34+
path: node_modules
35+
key: node-modules-${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('package-lock.json') }}
36+
restore-keys: |
37+
node-modules-${{ runner.os }}-node-${{ matrix.node-version }}
38+
- run: npm ci --legacy-peer-deps
39+
- run: npm run lint
40+
- run: npm run build --if-present
41+
- name: Run tests
42+
run: |
43+
cd backend
44+
npx mocha --config .mocharc.json

‎.storybook/main.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { StorybookConfig } from "@storybook/nextjs";
2+
3+
const config: StorybookConfig = {
4+
stories: [
5+
"../app/components/**/*.mdx",
6+
"../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
7+
"../app/components/**/**/*.mdx",
8+
"../app/components/**/**/*.stories.@(js|jsx|mjs|ts|tsx)",
9+
"../app/components/stories/**/*.mdx",
10+
"../app/components/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
11+
"../app/components/stories/*.mdx",
12+
"../app/components/stories/*.stories.@(js|jsx|mjs|ts|tsx)",
13+
],
14+
addons: [
15+
"@storybook/addon-onboarding",
16+
"@storybook/addon-links",
17+
"@storybook/addon-essentials",
18+
"@chromatic-com/storybook",
19+
"@storybook/addon-interactions",
20+
"@storybook/addon-styling-webpack"
21+
],
22+
framework: {
23+
name: "@storybook/nextjs",
24+
options: {},
25+
},
26+
};
27+
export default config;

‎.storybook/preview.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// .storybook/preview.js
2+
3+
import type { Preview } from "@storybook/react";
4+
import '../app/global.css';
5+
6+
const preview: Preview = {
7+
parameters: {
8+
controls: {
9+
matchers: {
10+
color: /(background|color)$/i,
11+
date: /Date$/i,
12+
},
13+
},
14+
},
15+
};
16+
17+
export default preview;
18+

‎app/components/CookTimeIcon.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export function CookTimeIcon() {
2+
return (
3+
<svg fill="#000000" width="25px" height="25px" viewBox="0 0 512.853 512.853" xmlns="http://www.w3.org/2000/svg">
4+
<g>
5+
{/* Your SVG path data here */}
6+
</g>
7+
</svg>
8+
);
9+
}
10+

‎app/components/PrepTimeIcon.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export function PrepTimeIcon() {
2+
return (
3+
<svg fill="#000000" width="25px" height="25px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
4+
<g>
5+
{/* Your SVG path data here */}
6+
</g>
7+
</svg>
8+
);
9+
}
10+

‎app/components/RecipeCard.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Link from "next/link";
22
import Carousel from "./Carousel";
33

4-
export default function RecipeCard({ recipe }) {
4+
export default function RecipeCard(recipe) {
55
const formatDate = (dateString) => {
66
const options = { year: "numeric", month: "long", day: "numeric" };
77
const date = new Date(dateString);
@@ -113,4 +113,4 @@ export default function RecipeCard({ recipe }) {
113113
</div>
114114
</div>
115115
);
116-
}
116+
}

‎app/components/RecipeCard.stories.js

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,39 @@
1-
import { RecipeCard } from './RecipeCard';
1+
// RecipeCard.stories.js
2+
import RecipeCard from "./RecipeCard";
23

3-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
4-
export default {
5-
title: 'Example/RecipeCard',
4+
// Mock data for the RecipeCard
5+
const mockRecipe = {
6+
title: "Classic Spaghetti Carbonara",
7+
prep: 15,
8+
cook: 30,
9+
images: [
10+
"https://images.unsplash.com/photo-1481931098730-318b6f776db0?q=80&w=2790&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
11+
],
12+
published: "2023-09-15",
13+
};
14+
15+
16+
const meta = {
17+
title: "RecipeCard/RecipeCard",
618
component: RecipeCard,
719
parameters: {
8-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
9-
layout: 'centered',
20+
layout: "centered",
1021
},
11-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
12-
tags: ['autodocs'],
13-
// More on argTypes: https://storybook.js.org/docs/api/argtypes
22+
tags: ["autodocs"],
1423
argTypes: {
15-
backgroundColor: { control: 'color' },
24+
title: { control: 'text' },
25+
prep: { control: 'number' },
26+
cook: { control: 'number' },
27+
images: { control: 'array' },
28+
published: { control: 'date' },
1629
},
30+
args: { ...mockRecipe },
1731
};
1832

19-
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
33+
export default meta;
34+
2035
export const Primary = {
2136
args: {
22-
primary: true,
23-
label: 'Button',
37+
...mockRecipe
2438
},
2539
};
26-

‎app/components/stories/Button.jsx

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import React from 'react';
22

3-
import PropTypes from 'prop-types';
4-
53
import './button.css';
64

75
/** Primary UI component for user interaction */
8-
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
6+
export const Button = ({
7+
primary = false,
8+
size = 'medium',
9+
backgroundColor,
10+
label,
11+
...props
12+
}) => {
913
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
1014
return (
1115
<button
@@ -22,23 +26,3 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
2226
</button>
2327
);
2428
};
25-
26-
Button.propTypes = {
27-
/** Is this the principal call to action on the page? */
28-
primary: PropTypes.bool,
29-
/** What background color to use */
30-
backgroundColor: PropTypes.string,
31-
/** How large should the button be? */
32-
size: PropTypes.oneOf(['small', 'medium', 'large']),
33-
/** Button contents */
34-
label: PropTypes.string.isRequired,
35-
/** Optional click handler */
36-
onClick: PropTypes.func,
37-
};
38-
39-
Button.defaultProps = {
40-
backgroundColor: null,
41-
primary: false,
42-
size: 'medium',
43-
onClick: undefined,
44-
};

‎app/components/stories/Button.stories.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { fn } from '@storybook/test';
33
import { Button } from './Button';
44

55
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6-
export default {
6+
const meta = {
77
title: 'Example/Button',
88
component: Button,
99
parameters: {
@@ -20,6 +20,8 @@ export default {
2020
args: { onClick: fn() },
2121
};
2222

23+
export default meta;
24+
2325
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
2426
export const Primary = {
2527
args: {

‎app/components/stories/Header.jsx

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22

3-
import PropTypes from 'prop-types';
4-
53
import { Button } from './Button';
64
import './header.css';
75

@@ -45,16 +43,3 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
4543
</div>
4644
</header>
4745
);
48-
49-
Header.propTypes = {
50-
user: PropTypes.shape({
51-
name: PropTypes.string.isRequired,
52-
}),
53-
onLogin: PropTypes.func.isRequired,
54-
onLogout: PropTypes.func.isRequired,
55-
onCreateAccount: PropTypes.func.isRequired,
56-
};
57-
58-
Header.defaultProps = {
59-
user: null,
60-
};

‎app/components/stories/Header.stories.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { fn } from '@storybook/test';
22

33
import { Header } from './Header';
44

5-
export default {
5+
const meta = {
66
title: 'Example/Header',
77
component: Header,
88
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
@@ -17,6 +17,9 @@ export default {
1717
onCreateAccount: fn(),
1818
},
1919
};
20+
21+
export default meta;
22+
2023
export const LoggedIn = {
2124
args: {
2225
user: {
@@ -25,6 +28,4 @@ export const LoggedIn = {
2528
},
2629
};
2730

28-
export const LoggedOut = {
29-
args: {},
30-
};
31+
export const LoggedOut = {};

‎app/components/stories/Page.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const Page = () => {
1414
onLogout={() => setUser(undefined)}
1515
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
1616
/>
17+
1718
<section className="storybook-page">
1819
<h2>Pages in Storybook</h2>
1920
<p>
@@ -31,7 +32,7 @@ export const Page = () => {
3132
<ul>
3233
<li>
3334
Use a higher-level connected component. Storybook helps you compose such data from the
34-
&quot;args&quot; of child component stories
35+
&aposargs&apos of child component stories
3536
</li>
3637
<li>
3738
Assemble data in the page component from your services. You can mock these services out

‎app/components/stories/Page.stories.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { expect, userEvent, within } from '@storybook/test';
22

33
import { Page } from './Page';
44

5-
export default {
5+
const meta = {
66
title: 'Example/Page',
77
component: Page,
88
parameters: {
@@ -11,6 +11,8 @@ export default {
1111
},
1212
};
1313

14+
export default meta;
15+
1416
export const LoggedOut = {};
1517

1618
// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing

‎app/globals.css renamed to ‎app/global.css

File renamed without changes.

‎app/layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import './globals.css'
1+
import './global.css'
22

33
export const metadata = {
44
title: 'Next.js',

0 commit comments

Comments
 (0)