clearboard's People
clearboard's Issues
Selecting card
Add logic for selecting cards
Requirements
- Use the selection indicator component when a card is clicked
- Store the selected card in mobX store
Selection indicator
LeftSidePanel component
Create a React component - with tests and stories for the left side panel component.
Design
Requirements
- The component receives a list of objects. Object shape is:
type LeftSidePanelItem = {
onClick?: () => void;
icon: React.ComponentType;
hoverElement: React.ComponentType;
}
- The panel's position is close to the left edge of the screen(always)
- If
onClick
is defined then clicking on element triggers this action - When hovering over element, the additional panel shows up(and hides on mouse leave)
Handle authentication
Handle authentication
Requirements
- Use existing login and register components
- Use Axios to send a request to the backend
- Store received token in localStorage
- Store information about auth in mobX store
- Create unit tests - use MSW(Mock Service Worker)
Login and register design
Floating menu for card
Moving card
Create a React component for the board and handle moving card
Requirements
- Create a board container
- Board should render a list of cards(from store)
- Add logic to move card inside the board container(event listeners, update x and y value of card)
- The moving logic should be outside of the card
- Card is a dumb component, that has only some display logic
- The card will probably need to forwardRef
Create zoom component
Card
Create a React component - with tests and stories for the card component.
Design
Requirements
- 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; };
}
- 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.
- The color from props defines the background color of the card
Adding cards
Create logic for storing cards
Requirements
- Add an icon to the left side panel
- Store list of cards in mobX store(for now we do not want to integrate with the backend)
- The icon in the left side panel should create a new card on click - create some default values
- The card is pushed to the list of cards in the store
Board view
Clock component
AppBar
Create a React component - with tests and stories for the App bar component.
Design
Requirements
- The component is always on top of the page
- The component receives the following props:
type AppBarProps = {
languages: Array<{name: string; id: string;}>;
onChangeLanguage: (id: string) => void;
username: string;
}
- The component has a dropdown with a list of options
Dashboard menu
Create a React component - with tests and stories for the dashboard menu component.
Design
Requirements
- Dashboard receives props:
type PageGroup = {
groupName: string;
pages: Array<{
pageId: string;
name: string;
}>;
}
type DashboardProps = {
onChangePage: (pageId: string) => void;
currentPage: string;
pages: Array<PageGroup>;
}
- Dashboard renders a list of pages
- When a page is clicked the
onChangePage
function is called - The grey arrow indicates the current page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.