Add logic for selecting cards

Requirements

1. Use the selection indicator component when a card is clicked
2. Store the selected card in mobX store

Create a React component - with tests and stories for the selection indicator component.

Design

Requirements

1. The indicator wraps all the children
2. The indicator receives a callback, that should be called when one of the corner buttons is clicked

Create a React component - with tests and stories for the left side panel component.

Design

Requirements

1. The component receives a list of objects. Object shape is:

type LeftSidePanelItem = {
    onClick?: () => void;
    icon: React.ComponentType;
    hoverElement: React.ComponentType;
}

2. The panel's position is close to the left edge of the screen(always)
3. If onClick is defined then clicking on element triggers this action
4. When hovering over element, the additional panel shows up(and hides on mouse leave)

Handle authentication

Requirements

1. Use existing login and register components
2. Use Axios to send a request to the backend
3. Store received token in localStorage
4. Store information about auth in mobX store
5. Create unit tests - use MSW(Mock Service Worker)

Create a React component - with tests and stories for the register and login components.

Design

Requirements

1. Login has redirect link to register
2. In this task we create only the UI part, no integration with backend yet

Create a React component - with tests and stories for the floating menu component

Design

Requirements

1. Floating menu is moving with the card
2. Floating menu receives a list of buttons
3. Floating menu is visible only when a card is selected

Create a React component for the board and handle moving card

Requirements

1. Create a board container
2. Board should render a list of cards(from store)
3. Add logic to move card inside the board container(event listeners, update x and y value of card)
4. The moving logic should be outside of the card
5. Card is a dumb component, that has only some display logic
6. The card will probably need to forwardRef

Create a React component - with tests and stories for the zoom component.

Design

Requirements

1. The user is able to add and delete the zoom value with buttons.
2. The user is able to input a value from keyboard
3. Min value is 50, max value is 200

Create a React component - with tests and stories for the card component.

Design

Requirements

1. The card receives following props:

type CardProps = {
  author: string;
  text: string;
  numberOfVotes: number;
  coordinates: { x: number; y: number; };
  onVoteUp: () => void;
  onVoteDown: () => void;
  color: string;
  size: { width: number; height: number; };
}

2. The card is a simple div, that has the position set to absolute and is moved based on x and y from props. The div's size is based on size props.
3. The color from props defines the background color of the card

Create logic for storing cards

Requirements

1. Add an icon to the left side panel
2. Store list of cards in mobX store(for now we do not want to integrate with the backend)
3. The icon in the left side panel should create a new card on click - create some default values
4. The card is pushed to the list of cards in the store

Create board view.

Requirements:

1. The board receives boardId
2. The board displays a list of cards passed as an array
3. For now the board is full size(except for the go back button
4. The go back button redirects to dashboard(need to create some basic dashboard view

Create a React component - with tests and stories for the clock component.

Design

Requirements

1. The user is able to add and delete seconds. The increment value equals 10.
2. The user is not able to set a negative value
3. Seconds are converted to minutes when > 60.

Create a React component - with tests and stories for the App bar component.

Design

Requirements

1. The component is always on top of the page
2. The component receives the following props:

type AppBarProps = {
    languages: Array<{name: string; id: string;}>;
    onChangeLanguage: (id: string) => void;
    username: string;
}

3. The component has a dropdown with a list of options

Create a React component - with tests and stories for the dashboard menu component.

Design

Requirements

1. Dashboard receives props:

type PageGroup = {
    groupName: string;
    pages: Array<{
        pageId: string;
        name: string;
    }>;
}

type DashboardProps = {
    onChangePage: (pageId: string) => void;
    currentPage: string;
    pages: Array<PageGroup>;
}

2. Dashboard renders a list of pages
3. When a page is clicked the onChangePage function is called
4. The grey arrow indicates the current page