Create the mentor card component

.eslintrc

@@ -349,5 +349,6 @@
         "@typescript-eslint/no-explicit-any" : 0,
         "@typescript-eslint/explicit-function-return-type" : 0,
         "@typescript-eslint/explicit-module-boundary-types": 0
-    }
+    },
+    "ignorePatterns": ["src/__mocks__"]
 }

.github/workflows/playwright.yml → .github/workflows/e2e.yml

@@ -1,9 +1,13 @@
-name: Playwright Tests
+name: E2E Tests
 on:
   push:
-    branches: [ main ]
+    branches:
+      - main
+      - development
   pull_request:
-    branches: [ main ]
+    branches:
+      - main
+      - development
 jobs:
   test:
     timeout-minutes: 60

.github/workflows/storybook-tests.yml

@@ -0,0 +1,30 @@
+name: 'Storybook Tests'
+on:
+  push:
+    branches:
+      - main
+      - development
+  pull_request:
+    branches:
+      - main
+      - development
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn test-storybook"

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
     "lint-fix": "eslint --ext .js,.jsx,.ts,.tsx src --color --fix",
     "storybook": "storybook dev -p 6006",
+    "test-storybook": "test-storybook",
     "build-storybook": "storybook build"
   },
   "keywords": [],
@@ -26,15 +27,18 @@
   "devDependencies": {
     "@playwright/test": "^1.34.3",
     "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.27",
     "@storybook/addon-links": "^7.0.18",
     "@storybook/blocks": "^7.0.18",
+    "@storybook/jest": "^0.1.0",
     "@storybook/react": "^7.0.18",
     "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/test-runner": "^0.11.0",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.60",
     "@testing-library/react": "^14.0.0",
+    "@types/css-modules": "^1.0.2",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-router-dom": "^5.3.3",

src/__mocks__/mentors.ts

@@ -0,0 +1,101 @@
+import { Mentor } from '../types';
+
+export const mentors: Mentor[] = [
+  {
+    mentor_id: 1,
+    created_at: '2023-07-01',
+    updated_at: '2023-07-10',
+    state: 'approved',
+    category: 'Technology',
+    application: {
+      designation: 'Software Engineer',
+      country: 'United States',
+      company_or_institution: 'Google',
+      areas_of_expertise: 'Web Development',
+      expectations_from_mentees: 'Commitment and eagerness to learn',
+      mentoring_philosophy: 'Empowering mentees to reach their full potential',
+      commitment_to_program: true,
+      previous_experience_as_mentor: true,
+      reason_for_being_mentor: 'To give back to the community',
+      cv_link: 'https://example.com/cv',
+    },
+    availability: true,
+    profile: {
+      created_at: '2023-06-15',
+      updated_at: '2023-07-05',
+      primary_email: '[email protected]',
+      contact_email: '[email protected]',
+      first_name: 'John',
+      last_name: 'Doe',
+      image_url: 'https://xsgames.co/randomusers/avatar.php?g=male',
+      linkedin_url: 'https://linkedin.com/in/mentor1',
+      type: 'Technical',
+      uuid: 'abc123',
+    },
+  },
+  {
+    mentor_id: 2,
+    created_at: '2023-07-02',
+    updated_at: '2023-07-12',
+    state: 'approved',
+    category: 'Business',
+    application: {
+      designation: 'Chief Marketing Officer',
+      country: 'Canada',
+      company_or_institution: 'Facebook',
+      areas_of_expertise: 'Marketing',
+      expectations_from_mentees: 'Proactive attitude and willingness to learn',
+      mentoring_philosophy:
+        'Sharing practical insights for professional growth',
+      commitment_to_program: true,
+      previous_experience_as_mentor: false,
+      reason_for_being_mentor: 'Passion for supporting aspiring entrepreneurs',
+      cv_link: 'https://example.com/cv',
+    },
+    availability: true,
+    profile: {
+      created_at: '2023-06-20',
+      updated_at: '2023-07-08',
+      primary_email: '[email protected]',
+      contact_email: '[email protected]',
+      first_name: 'Jane',
+      last_name: 'Smith',
+      image_url: 'https://xsgames.co/randomusers/avatar.php?g=female',
+      linkedin_url: 'https://linkedin.com/in/mentor2',
+      type: 'Business',
+      uuid: 'def456',
+    },
+  },
+  {
+    mentor_id: 3,
+    created_at: '2023-07-03',
+    updated_at: '2023-07-12',
+    state: 'approved',
+    category: 'Design',
+    application: {
+      designation: 'UI/UX Designer',
+      country: 'United Kingdom',
+      areas_of_expertise: 'UI/UX Design',
+      company_or_institution: 'Facebook',
+      expectations_from_mentees: 'Attention to detail and creativity',
+      mentoring_philosophy: 'Creating user-centric designs',
+      commitment_to_program: true,
+      previous_experience_as_mentor: true,
+      reason_for_being_mentor: 'To inspire and educate aspiring designers',
+      cv_link: 'https://example.com/cv',
+    },
+    availability: true,
+    profile: {
+      created_at: '2023-06-25',
+      updated_at: '2023-07-07',
+      primary_email: '[email protected]',
+      contact_email: '[email protected]',
+      first_name: 'Emily',
+      last_name: 'Johnson',
+      image_url: '',
+      linkedin_url: 'https://linkedin.com/in/mentor3',
+      type: 'Design',
+      uuid: 'ghi789',
+    },
+  },
+];

src/components/MentorCard/MentorCard.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { UserOutlined } from '@ant-design/icons';
+import { Typography, Avatar, Card } from 'antd';
+
+import styles from './MentorCard.module.css';
+import { Mentor } from '../../types';
+
+const { Title, Text } = Typography;
+
+interface MentorCardProps {
+  mentor: Mentor;
+}
+
+const MentorCard: React.FC<MentorCardProps> = ({ mentor }) => (
+  <Card className={styles.cardContainer}>
+    {mentor.profile.image_url ? (
+      <Avatar
+        src={mentor.profile.image_url}
+        size={100}
+        className={styles.avatarContainer}
+      />
+    ) : (
+      <Avatar
+        icon={<UserOutlined />}
+        size={100}
+        className={styles.avatarContainer}
+      />
+    )}
+    <div className={styles.avatarContainer}>
+      <Title level={5} className={styles.title}>
+        {mentor.profile.first_name} {mentor.profile.last_name}
+      </Title>
+      <Text>{mentor.application.designation}</Text>
+      <br />
+      <Text type="secondary">{mentor.application.company_or_institution}</Text>
+    </div>
+  </Card>
+);
+
+export default MentorCard;

src/components/MentorCard/MentorCard.module.css

@@ -0,0 +1,9 @@
+.cardContainer {
+  width: 200px;
+  text-align: center;
+}
+
+.avatarContainer {
+  margin: auto;
+  margin-top: 10px;
+}

src/components/MentorCard/MentorCard.stories.tsx

@@ -0,0 +1,47 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+
+import MentorCard from './MentorCard.component';
+import { mentors } from '../../__mocks__/mentors';
+
+const meta: Meta<typeof MentorCard> = {
+  component: MentorCard,
+  title: 'Mentor Card',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const defaultCard: Story = {
+  args: {
+    mentor: mentors[0],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const mentorName = canvas.getByText(
+      `${mentors[0].profile.first_name} ${mentors[0].profile.last_name}`
+    );
+
+    const mentorDesignation = canvas.getByText(
+      mentors[0].application.designation
+    );
+
+    const companyOrInstitution = canvas.getByText(
+      mentors[0].application.company_or_institution
+    );
+
+    expect(mentorName).toBeInTheDocument();
+    expect(mentorDesignation).toBeInTheDocument();
+    expect(companyOrInstitution).toBeInTheDocument();
+  },
+};
+
+export const cardWithDefaultImage: Story = {
+  args: {
+    mentor: mentors[2],
+  },
+};

src/components/MentorList/MentorList.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Row, Col } from 'antd';
+
+import { Mentor } from '../../types';
+import MentorCard from '../MentorCard/MentorCard.component';
+
+interface ListProps {
+  mentors?: Mentor[];
+}
+
+export const MentorList: React.FC<ListProps> = ({ mentors }: ListProps) => (
+  <Row gutter={[16, 16]}>
+    {mentors?.map((mentor) => (
+      <Col key={mentor.mentor_id} xs={24} sm={12} md={8} lg={6}>
+        <MentorCard mentor={mentor} />
+      </Col>
+    ))}
+  </Row>
+);

src/components/MentorList/MentorList.stories.ts

@@ -1,44 +1,24 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { MentorList } from "./MentorList";
+import type { Meta, StoryObj } from '@storybook/react';
 
-const data = [
-  {
-    name: 'John Doe',
-    designation:"SE at Google Inc",
-    avatar:"https://xsgames.co/randomusers/avatar.php?g=pixel&key=0"
-  },
-  {
-    name: 'Jane Doe',
-    designation:"SE at Google Inc",
-    avatar: "https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
-  },
-  {
-    name: 'Luke Skywalker',
-    designation:"SE at Google Inc",
-    avatar: "https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
-  },
-  {
-    name: 'Obiwan Kenobi',
-    designation:"SE at Google Inc",
-    avatar: "https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
-  },
-];
+import { MentorList } from './MentorList.component';
+import { mentors } from '../../__mocks__/mentors';
 
-const meta = {
+const meta: Meta<typeof MentorList> = {
   title: 'Mentor List',
   component: MentorList,
   tags: ['autodocs'],
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
   },
-} satisfies Meta<typeof MentorList>;
+};
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const ListWithData: Story = {
   args: {
-    data: data
-  }
+    mentors: [...mentors, ...mentors],
+  },
 };
 export const EmptyList: Story = {};