epam-ai-conductor 0.1.0

package/dist/content/module-1/task/module-1_home-task_components.md

@@ -0,0 +1,257 @@
+---
+sidebar_position: 2
+sidebar_label: "COMPONENTS"
+title: Components description for Tasks 1
+---
+
+:::tip
+**You need just follow from one step to another.**  
+The description was created in such a way
+that you do not need to navigate through the document at random.
+:::
+
+:::info
+You can watch [this (link)](https://www.youtube.com/watch?v=Cla1WwguArA) 7 minutes tutorial video about components creation 😉
+:::
+
+## Header
+
+![](images/header.png)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2905-67147&t=2XuYekWUy7fL4Ba9-0)
+
+### Create `Logo` component.
+
+Logo component contains only logo picture (you can use any picture, you like).
+
+:::info
+Logo component is just a function component which returns `img` tag.
+:::
+
+:::tip
+If you use TypeScript and have this error  
+![](images/ts_images_errorjpg.jpg)  
+Try to find solution [here](https://stackoverflow.com/questions/52759220/importing-images-in-typescript-react-cannot-find-module)
+:::
+
+### Create `Button` component.
+
+Button component is a function component which returns `button` tag.
+
+:::tip
+You will use Button component in several places through your app,
+so you should use `props` for this component such as `buttonText` and `onClick`
+(and any props, that you want).
+
+If you want to repeat how to work with `props` you can:  
+⭐ read theoretical material again [(link)](/docs/module-1/components-and-props);  
+⭐ watch this tutorial [(link)](https://www.youtube.com/watch?v=m7OWXtbiXX8&list=RDCMUC80PWRj_ZU8Zu0HSMNVwKWw&index=3).
+:::
+
+### Create `Header` component.
+
+Header should be in `App` component.
+
+`Header` component should include:
+
+- `Logo` component;
+
+- Logout button (`Button` component **WITHOUT** any functionality for the current task).
+
+[Small demo](../components-and-props#how-to-create-a-simple-function-component)
+
+---
+
+## Courses
+
+### Create `CourseCard` component.
+
+![](images/course_card.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2905-67147&t=GislgRTjkGsyZ4Xy-0)
+
+This component contains all info about the course.
+
+For the current task you should use `mockedCoursesList` array for courses info.
+
+`CourseCard` components should be rendered in `Courses` component (you will create it in the next step).
+
+`CourseCard` component should contain the following information:
+
+1. Title (Course name);
+
+2. Duration (format: hh:mm + 'hours'). In the `mockedCoursesList` duration is specified in minutes;
+
+:::info
+If `hh` < 10 (0,1,2,3,4,5,6,7,8,9) => '0' + h:mm + 'hours' (02:20 hours)  
+If `mm` < 10 (0,1,2,3,4,5,6,7,8,9) => hh:'0' + m + 'hours' (10:06 hours)  
+If `hh` = 1 => hh:mm + 'hour' (01:30 hour)
+:::
+
+3. Creation date (format: dd.mm.yyyy);
+
+4. Description;
+
+5. `Show course` button.  
+   When user clicks `Show course` button `CourseInfo` component with current course info should replace `Courses` component.  
+   (You will create it after `Courses` component).
+
+6. `Authors` list:
+   - the authors' names should be displayed on the one line;
+
+   - if all authors' names do not fit on one line,
+     then the extra text should be cut off and '...' should be added at the end of line.
+
+:::caution
+In `mockedCoursesList` each course has only authors' `ids`.  
+To define authors' names you should find them in `mockedAuthorsList` by id.
+:::
+
+### Mocked courses and authors data.
+
+Save these data as constants and use in your App:
+
+```js
+export const mockedCoursesList = [
+  {
+    id: "de5aaa59-90f5-4dbc-b8a9-aaf205c551ba",
+    title: "JavaScript",
+    description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
+                    has been the industry's standard dummy text ever since the 1500s, when an unknown 
+                    printer took a galley of type and scrambled it to make a type specimen book. It has survived 
+                    not only five centuries, but also the leap into electronic typesetting, remaining essentially u
+                    nchanged.`,
+    creationDate: "08/03/2021",
+    duration: 160,
+    authors: [
+      "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+      "f762978b-61eb-4096-812b-ebde22838167",
+    ],
+  },
+  {
+    id: "b5630fdd-7bf7-4d39-b75a-2b5906fd0916",
+    title: "Angular",
+    description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
+                    has been the industry's standard dummy text ever since the 1500s, when an unknown 
+                    printer took a galley of type and scrambled it to make a type specimen book.`,
+    creationDate: "10/11/2020",
+    duration: 210,
+    authors: [
+      "df32994e-b23d-497c-9e4d-84e4dc02882f",
+      "095a1817-d45b-4ed7-9cf7-b2417bcbf748",
+    ],
+  },
+];
+
+export const mockedAuthorsList = [
+  {
+    id: "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+    name: "Vasiliy Dobkin",
+  },
+  {
+    id: "f762978b-61eb-4096-812b-ebde22838167",
+    name: "Nicolas Kim",
+  },
+  {
+    id: "df32994e-b23d-497c-9e4d-84e4dc02882f",
+    name: "Anna Sidorenko",
+  },
+  {
+    id: "095a1817-d45b-4ed7-9cf7-b2417bcbf748",
+    name: "Valentina Larina",
+  },
+];
+```
+
+### `EmptyCourseList` component
+
+![](images/emptyCourseList.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2906-66989&t=GislgRTjkGsyZ4Xy-0)
+
+`EmptyCourseList` component should be rendered instead of `Courses` components when
+we do not have any course.
+
+`EmptyCourseList` component should include:
+
+- Title with text: 'Course List is Empty'.
+
+- Subtitle text: 'Please use "Add New Course" button to add your first course'.
+
+- `Add New Course` button **WITHOUT** functionality for current task. (Reuse `Button` Component).
+
+### Create `Courses` component.
+
+![](images/courses_component.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2907-67422&t=2XuYekWUy7fL4Ba9-0)
+
+`Courses` component should be rendered in `App` component.
+
+`Courses` component should include:
+
+- `SearchBar` component (optional extra task).
+
+- `CourseCard` component.
+
+- `Add new course` button WITHOUT any functionality. (Reuse `Button` component).
+
+:::tip  
+You should import `mockedCoursesList` and `mockedAuthorsList` to the `App` component and pass it to the `Courses` component as a prop.  
+Use loop for `CourseCard` rendering.  
+Please, follow [this link](https://react.dev/learn/rendering-lists#rendering-data-from-arrays) to the **"Embedding map() in JSX"** topic to see the example.
+:::
+
+---
+
+## Course info
+
+![](images/course_info.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=6130-322&t=2XuYekWUy7fL4Ba9-0)
+
+- This component shows information about the course.
+
+- This component contains:
+  - ID of course;
+  - Title;
+  - Description;
+  - Duration;
+  - List of authors;
+  - Creation date;
+  - `Back to courses` button.
+
+- This component should be rendered instead of `Courses` component.
+
+- Pass course information to the `CourseInfo` component using `props`.
+
+- By clicking `Back` button `CourseInfo` component should be replaced by `Courses` component.
+
+---
+
+## Search. Extra Task
+
+![](images/search_field.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2905-67147&t=2XuYekWUy7fL4Ba9-0)
+
+### Create `SearchBar` component.
+
+`SearchBar` should be in Courses component (above the list of courses).
+
+`SearchBar` component should include:
+
+- `Input` component;
+
+- `Button` component.
+
+#### Add functionality for searching courses:
+
+- User should have ability to search course by **title** and **id**;
+
+- The search is performed by the occurrence of characters in the string,
+  and **not just by a match at the beginning of the string**;
+
+- **Case-insensitive** search;
+
+- When user clicks on `Search` button it displays all courses that match the search query;
+
+- All courses are displayed when user cleans search field.
+
+<sub>(Search by title example)</sub>
+
+![](images/course_search.jpg)

package/dist/content/module-1/task/module-1_home-task_good_practices.md

@@ -0,0 +1,69 @@
+---
+sidebar_position: 3
+sidebar_label: 'GOOD PRACTICES'
+title: GOOD PRACTICES
+---
+
+# GOOD PRACTICES THAT YOU CAN APPLY FOR THIS TASK:
+1. Place `css` files in the folder with the component.
+
+Example:
+   ```
+   src
+   |
+   |- components
+      |
+      |-Header
+        |-Header.jsx //component
+        |-header.css //styles for this component
+   
+   ```
+2. Use `label` tag for input. [Link to the W3C.](https://www.w3schools.com/tags/tag_label.asp)
+
+
+3. Use `key` attribute for list rendering. [Link to the documentation.](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)
+
+
+4. Use constants to avoid a hardcode. *For example, when passing string properties to a component:*
+```js
+// BAD
+<Button text='Search' />
+
+
+// GOOD
+//constants.js
+const BUTTON_TEXT = 'Search';
+
+//Button.jsx
+import {BUTTON_TEXT} from './constants.js';
+
+<Button text={BUTTON_TEXT} />
+```
+
+5. Add empty string between import groups. *Example:*
+```js
+import from '[node_modules]'
+ 
+import from '[own_components]'
+import from '[constants]'
+ 
+import from '[styles]'
+```
+
+6. Use common `index.js` file for components and helpers. [Link to the article](https://www.digitalocean.com/community/tutorials/react-index-js-public-interfaces).
+
+
+7. If component does not have any logic you can return the markup immediately. *Examples:*
+```js
+import logo from '../../assets/logo.jpg';
+
+export const Logo = () => <img src={logo} />;
+```
+
+or
+
+```js
+export const Button = ({ text, onClick }) => (
+	<button onClick={onClick}>{text}</button>
+);
+```

package/dist/content/module-1/task/module-1_home-task_task.md

@@ -0,0 +1,253 @@
+---
+sidebar_position: 1
+sidebar_label: 'TASK'
+title: 'Module 1. React Components'
+---
+
+Hello friend!   
+Let me say a few words what we are going to do with you.
+We will write a small React application that allows users to manage a list of courses 
+with features like creating, deleting, and viewing course information. 
+Additionally, the application will have authorization functionality to ensure
+secure access to the application's features.
+
+The main goal of this task is to create app skeleton - set of
+some simple components for the app.
+
+Please, follow next steps:
+
+## Steps:
+
+1. Generate a new project:
+
+```http request
+npx create-react-app courses-app
+```
+
+:::note
+You can use `git bash` to run the command.
+
+
+`courses-app` is a name of the project. You can give any name you want.
+:::
+
+2. Open you new project via code editor.
+
+
+3. Configure `eslint` and `prettier`.  
+   See instruction in the [ESLINT instruction](eslint).
+
+
+4. Configure `pre-commit hook`.  
+   See instruction in the [PRE COMMIT instruction](pre_commit).
+
+
+5. Run your project.
+```http request
+npm run start
+```
+
+Result in the browser:  
+![](images/initial_react_view.jpg)  
+
+:::tip
+Now it's good time to push your INITIAL COMMIT to the repo and create a new branch for the first module.
+:::
+
+
+## Project structure requirements
+
+1. You should use **function** components for your app.
+
+
+2. Rename `App.js` to `App.jsx` / `App.tsx`. `App` - main app file.
+
+
+3. Delete unnecessary files:
+- `src/App.test.js`
+- `src/logo.svg`
+- `src/reportWebVitals.js`
+- all files in the `public` folder EXCEPT `public/index.html` and `manifest.json`
+
+4. Delete default code in files:
+
+- `scr/App`
+- `src/App.css`
+
+You can do like this:
+```js
+function App() {
+	return <div>React</div>;
+}
+
+export default App;
+```
+
+Delete unnecessary import and function call in the `index.js` file 
+```js
+import reportWebVitals from './reportWebVitals';
+...
+reportWebVitals();
+```
+
+Result in the browser:
+![](images/initial_view_localhost.jpg)
+
+:::tip
+If you use `App.tsx` you need to fix its import in the `index.js` file
+```js
+import App from './App.tsx';
+```
+:::
+
+5. Create folders and files for each component. Follow the architecture below:
+
+```
+src
+  |-- common
+  |   |--Button
+  |   |  |__ Button.jsx/.tsx
+  |   |  
+  |   |__Input
+  |   |   |__ Input.jsx/.tsx   
+  |   |   |
+  |   |__ //any common components you want to add
+  |
+  |-- components
+  |   |-- CourseInfo
+  |   |   |__ CourseInfo.jsx/.tsx
+  |   |   
+  |   |-- Courses
+  |   |   |__ components
+  |   |      |__ CourseCard
+  |   |         |__ CourseCard.jsx/.tsx
+  |   |      |__ SearchBar (extra task)
+  |   |      |  |__ SearchBar.jsx/.tsx
+  |   |   |__ Courses.jsx/.tsx
+  |   |
+  |   |__ // any components you want to add 
+  |   |
+  |   |-- EmptyCourseList
+  |   |    |__ EmptyCourseList.jsx/.tsx
+  |   |
+  |   |-- Header
+  |   |    |__ Header.jsx/.tsx
+  |   |    |__ components
+  |   |        |__ Logo
+  |   |            |__ Logo.jsx/.tsx
+  |
+  |-- helpers
+  |    |
+  |    |--getCourseDuration.js/.ts // a helper to format course duration   
+  |    |
+  |    |--formatCreationDate.js/.ts // to format date that we will receive from server  
+  |    |
+  |    |__ // any helpers you want to add
+  |
+  |-- constants.js/.ts // file with mocked data
+  |
+  |-- App.jsx/.tsx
+  |-- App.css
+  |-- index.js
+  |_ ...
+                  
+```
+
+:::caution
+The presented architecture is required for use, BUT you can add files and folders at your discretion.
+::: 
+
+7. You can use any way to add styles to components (styled components, Bootstrap, CSS modules etc). Also, you can use preprocessors like SASS [instruction.](https://create-react-app.dev/docs/adding-a-sass-stylesheet/) 
+
+:::tip
+It's recommended to keep each component's style file in their appropriate folders.
+:::
+
+8. You can choose the design at your discretion.  
+   **It is important to keep the layout** (the arrangement of elements on the page).
+
+
+![](images/initial_view.jpg)  
+**App initial view**  
+
+## Final preparations:
+1. Support browsers: Google Chrome.
+2. Type checking: you can use TypeScript (it's not required but recommended).
+
+Please, read requirements for the first task. To find the full description of each criteria please go to 
+the [COMPONENTS page.](components)
+
+## Criteria (30 points max)
+
+### Common
+
+* [1 point] - The architecture of the application **should be** the same as presented above.
+
+
+* [1 point] - Components are presented as [**function components**](https://react.dev/reference/react/Component) (not class components).
+
+
+* [1 point] - Use `.jsx` extensions for files with [`jsx` syntax](https://react.dev/learn/writing-markup-with-jsx).
+
+
+* [1 point] - All inputs and buttons should be reusable components.
+
+
+* [2 points] - `eslint`, `prettier` and `pre-commit hook` work correctly.
+
+### [Header component](/docs/module-1/home-task/components#header)
+* [3 points] - Should display `Header` component with:
+  * `Logo` (any appropriate image)
+  * `Logout` button (without functionality)
+
+### [CourseCard component](/docs/module-1/home-task/components#create-coursecard-component)
+* [5 points] - Should display `CourseCard` component with:
+  * course title;
+  * course description;
+  * authors list;
+  * course duration;
+  * creation date;
+  * `Show course` button.
+
+* [2 point] Show `CourseInfo` component with current course information by clicking `Show course` button.
+
+### [EmptyCourseList component](/docs/module-1/home-task/components#emptycourselist-component)
+
+* [2 points] - Show `EmptyCourseList` component when no courses.
+
+* [2 point] - Component Should contain:
+  * title 'Your List Is Empty';
+  * subtitle 'Please use "Add New Course" button to add your first course'.
+  * `Add New Course` button (without functionality for current task).
+
+### [Courses component](/docs/module-1/home-task/components#courses)
+* [2 points] - Show list of courses (use [mocked course list](/docs/module-1/home-task/components#mocked-courses-and-authors-data) for this task).
+
+* [1 point] - Show `Add new course` button (without functionality for current task).
+
+
+### [CourseInfo Component](/docs/module-1/home-task/components#course-info)
+
+* [5 points] - Create component that contains: 
+  * course title
+  * course description
+  * course ID
+  * course duration
+  * creation date
+  * course authors
+  * `Back` button
+
+* [2 point] - By clicking `Back` button `CourseInfo` component should be replaced by `Courses` component.
+
+## Extra Task
+### [Searching](/docs/module-1/home-task/components#search-extra-task)
+* Implement searching functionality by title. Reset search result when searchbar is empty.
+
+
+* Implement searching functionality by id. Reset search result when searchbar is empty.
+
+[Full description](/docs/module-1/home-task/components#search-extra-task)
+
+:::info
+Please find a detailed description of components and functionality in the [COMPONENTS](components) section.
+:::

package/dist/content/module-1/tests/Button.test.tsx

@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom'
+import { render, fireEvent, screen } from "@testing-library/react";
+import { Button } from "../common/Button/Button";
+
+describe('Button component', () => {
+  test("Should render button with provided label", () => {
+    const handleClickMock = jest.fn();
+    render(<Button buttonText='Hello' handleClick={handleClickMock}/>);
+    const buttonElement = screen.getByText("Hello");
+
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  test("Should call provided callback", () => {
+    const handleClickMock = jest.fn();
+    render(<Button handleClick={handleClickMock} buttonText='Click me'/>);
+    const buttonElement = screen.getByText("Click me");
+
+    fireEvent.click(buttonElement);
+    expect(handleClickMock).toHaveBeenCalledTimes(1);
+  });
+})

package/dist/content/module-1/tests/CourseCard.test.tsx

@@ -0,0 +1,64 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { CourseCard } from "../components/Courses/components/CourseCard/CourseCard";
+
+describe('CourseCard component', () => {
+  const course = {
+    id: "1",
+    title: "Course Title",
+    description: "Course Description",
+    creationDate: "08/03/2021",
+    duration: 60,
+    authors: [
+      "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+      "f762978b-61eb-4096-812b-ebde22838167",
+    ],
+  };
+
+  test("Should contain title", () => {
+    render(<CourseCard course={course} />);
+
+    const titleElement = screen.getByText("Course Title");
+
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  test("Should contain description", () => {
+    render(<CourseCard course={course} />);
+    const descriptionElement = screen.getByText("Course Description");
+    expect(descriptionElement).toBeInTheDocument();
+  });
+
+  test("Should contain duration", () => {
+    render(<CourseCard course={course} />);
+
+    const durationElement = screen.getByText(/01:00 hour/);
+
+    expect(durationElement).toBeInTheDocument();
+  });
+
+  test("Should contain date", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/08.03.2021/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+
+  test("Should contain authors list", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/Vasiliy Dobkin, Nicolas Kim/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+
+  test("Should contain authors list", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/Show course/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+})
+