sumelms / frontend Goto Github PK

We need to integrate Yup with i18next and allow it to support locale. I know that Yup supports locale but I'm not totally convinced that is a good idea to use it.

So, I was hoping to use i18next as well with Yup - but I need to test. Maybe we can combine both.

Anyway, the translations to the validations should be stored in the application i18next namespace, in this case: src/languages/<lang>/validation.json

User story

In order to ...
As a ...
I want to ...

UI Resource

API

If applicable, add the API endpoint(s).

Aditional information

Any other additional information.

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

Description

Create a Loading Spinner component to notify the user that some computation is going on or taking some time to retrieve data.

UI Resource

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional Information

I think that it is possible to use the react-avatar or even take it as an example.

MUST:

• ATRIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only

Possible unknowns

None.

Dependencies

None.

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Description

We need to have a basic card component that must be the base of other possible card formats.

UI Resource

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional information

DON'T:

• Write any custom CSS, please, use TailwindCSS only
• The icons don't need to exactly match with the ones from the reference image

Possible unknowns

None.

Dependencies

None.

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Description

We need to create a component that handles the way that we print the Sumé Logo. This component, at this moment, is just being used by the sidebar component (#44) but it could be used in several other places, so it must be possible to change its color based on the application Theme as well, to change its format and size.

UI Resource

If you need any reference check the #44
The logo and other possible resources can be found here

API

n/a

Additional information

MUST:

• It must be responsive
• Support dark and light themes
• Support Icon or Full logo format

DON'T:

• Handle the logo size it must be done by an outside container, not by the component itself
• Write any custom CSS, please, use TailwindCSS only

Possible unknowns

None.

Dependencies

• #58

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

User story

In order to ...
As a ...
I want to ...

UI Resource

API

If applicable, add the API endpoint(s).

Aditional information

Any other additional information.

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

Description

Review the Docker images and docker-compose file. I tried to run them with podman-compose and it was unable to build the frontend image. Initially, I was thinking that it could be related to SELinux, but doesn't seem to be the case.

Here is the message error:

➜ podman-compose up
using podman version: podman version 3.0.1
Error: error inspecting object: unable to find a name and tag match for frontend_frontend in repotags: no such image
podman build -t frontend_frontend -f ./docker/Dockerfile .
STEP 1: FROM node:alpine
STEP 2: WORKDIR /app
--> Using cache 33857c093643fa5ce87483f88853acc7ed495e9692d7808d7712451719df4182
--> 33857c09364
STEP 3: COPY package.json /app
--> Using cache 61630d63aebf664f518fa7451a50c6e2ffcfd06408a02d643446f5bc50b2dac7
--> 61630d63aeb
STEP 4: COPY yarn.lock /app
--> Using cache 3177c7b83e2aaecf86805ef6f67cfd4aca44e70bd0d553f8f24319541715fed2
--> 3177c7b83e2
STEP 5: RUN yarn install -s
error running container: error creating container for [/bin/sh -c yarn install -s]: chdir: Not a directory
: exit status 1
Error: error building at STEP "RUN yarn install -s": error while running runtime: exit status 1
125

Am I doing something wrong?

Steps to reproduce

Steps to reproduce the behavior:

1. Clone the repository
2. From project root, with a non-root user, execute: podman-compose up

Expected behavior

It should allow me to build and run the frontend image and also the keycloack image.

Screenshots

None.

Desktop (please complete the following information):

• OS: [e.g. iOS] Fedora Linux 5.10.23-200.fc33.x86_64

Smartphone (please complete the following information):

None.

Additional context

• I'm not sure if it is working with docker-compose, but it should be able to run with both.

Description

Fix CSS style to new the layout components

Screenshots

Create the CourseCard Component.

Right now we have one script that generates the dictionaries, and this script is written in Python. To avoid that need that our collaborators must have Python installed in order to be able to run this script it is better if we convert the script to Javascript, to be executed by NodeJS.

This is the Python Script:
https://github.com/sumelms/frontend/blob/main/utils/build_translations.py

User story

In order to ...
As a ...
I want to ...

UI Resource

API

If applicable, add the API endpoint(s).

Aditional information

Any other additional information.

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

Description

• #154
• #149
• #150
• #151
• #152
• #153

Goals

Implement the Classroom page as in the screenshot

Additional context

n/a

Short description

Add tests to the new ContainerLayout component.

Relates to #98 #97

User story

In order to ...
As a ...
I want to ...

Blocked by: themesberg/flowbite-react#259

UI Resource

API

If applicable, add the API endpoint(s).

Aditional information

Any other additional information.

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

Description

Create a sidebar to the default application layout. It must be fixed to the right side of the layout and must have 100% height.

UI Resource

full size

The logo and other possible resources can be found here

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional information

As a suggestion this component can be split into the following sub-components:

• Logo (#47) - (it must have height of h-8 + py-4 to match the Header's height)
• MenuList
• MenuListItem (possible states: default, hover, active, disabled)
• Icon (#48)

MUST:

• The MenuList component MUST receive an object as the parameter that contains all the menu items that need to be listed
• The Sidebar must be fixed to the left side of the screen
• The Sidebar should vertically occupy the screen at 100%
• ARIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only
• The icons don't need to exactly match with the ones from the reference image

Possible unknowns

We need to explore the Sidebar width, but I'm guessing that it must be something around w-16 and w-32. I guess that would be nice to explore it.

Dependencies

• #47
• #48

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Description

Right now we are loading the modules directly at the router component (here) and I kind of don't like it, 'cause I do want to be able to load modules like Laravel's Service Providers (here). It means that every module should be able to bootstrap itself and do its own configurations.

UI Resource

None

API

None

Additional Information

MUST:

• Create a Module Provider
• All modules must be loaded directly from the Module Provider
• Modules must be able to add their own routes
• Modules must be able to add their own sidebar menus (if necessary)

DON'T:

• Dynamic load

Possible unknowns

I could think about some basic needs for now, but I think that we have some hidden requirements for this task. Mostly 'cause it will also affect other application regions, like the Sidebar and the Router itself.

Dependencies

None.

Configure back the repository CI, but this time, using Circle CI:

• Lint
• Unit test
• e2e test

User story

In order to ...
As a ...
I want to ...

UI Resource

API

If applicable, add the API endpoint(s).

Aditional information

Depends on:

• #99
• #98

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

User story

In order to ...
As a ...
I want to ...

UI Resource

API

If applicable, add the API endpoint(s).

Aditional information

Any other additional information.

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

Description

I'm not sure if the issue was introduced by the #32 or if it was already there. Anyway, doesn't matter. We need to fix it.

Steps to reproduce

Steps to reproduce the behavior:

1. Create a PR
2. See the tests failing

Expected behavior

It should not fail.

Screenshots

None.

Desktop (please complete the following information):

None.

Smartphone (please complete the following information):

None.

Additional context

None.

We need to find a nice way to fake the API to the front-end so we don't need to run a full backend instance to develop it.

Requirements

• It should stay inside the frontend repository;
• Must be easy to run (using yarn/npm command);
• Easy to edit to keep in sync with the real backend;
• Must support middlewares (to simulate protected routes and user permissions);

Nice to have

• Help us to keep the API documented;
• Integration or some documentation generator;

Description

Create the Default Application Layout that must provide the basic structure to the Sumé LMS content and navigation.

Additional information

This is what we must have at the end of this epic:

Issues

• #44
• #54

Description

Create the Tab component.

UI Resource

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional Information

MUST:

• It needs to be responsive
• Tab title must accept icons and/or text;
• ARIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only

Possible unknowns

None.

Dependencies

None.

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Description

I was checking the README instructions, and it seems that some commands are not working. For example the one for e2e tests. In this case, I think that would be better to verify all the instructions, and also standardize the commands.

Expected behavior

All the commands should be working.

Additional context

We also need to give some option, like, you can run it with yarn or npm

We need to create the Theme Switcher to support Light and Dark themes. Here is a good tutorial how to do it using TailwindCSS and React: https://medium.com/@steven_creates/how-to-build-a-dynamic-theme-changer-with-react-and-tailwind-css-with-react-usecontext-hook-a0f818603f28

Description

Create common components that can be shared between the UI.

Additional information

• The common components MUST be inside the src/components folder.

Issues

• #49
• #50
• #47
• #48
• #51
• #52
• #55
• #58
• #72

Description

Create a default Button component.

UI Resource

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional Information

I think that it is possible to use the react-avatar or even take it as an example.

MUST:

• Accept prepend and append icons (#48)
• Accept different variants: default bg-gray-100 , danger bg-red-500, info bg-blue-500, warning bg-yellow-500, success bg-green-500)
• Support outlined version
• Support the current states: default/active, hover, focus, pressed and disabled
• ATRIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only

Possible unknowns

• Maybe the DON'T could be ignored if we find a way to use the @apply utility to simplify the button variant styling.

Dependencies

• #48

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Description

Create the Progressbar component.

UI Resource

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional Information

MUST:

• It needs to be responsive
• Show/Hide number indicator
• It must accept multiple colors
• Do not fix the height or width
• ATRIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only

Possible unknowns

None.

Dependencies

None.

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Short description

Fix Layout component tests. The tests of these components started to break during the conversion of the repository to use the flowbite library.
In order to keep consistency and a healthy platform, we should fix the tests and create the integration ones.

Aditional information

Remove the flag it.skip to visualize the errors during the test execution.

We need to install and configure Cypress to create e2e tests.

• Install Cypress
• Configure Cypress
• Create at least one sample test

Description

The current route structure doesn't support nested routes, which causes some undesired full-page reloads while navigating between pages.

Steps to reproduce

Steps to reproduce the behavior:

1. Clone the repo and run the project
2. Login with any account
3. Navigate between the pages
4. See that it refreshes the whole page every time

Expected behavior

It should only load the content part of the page.

Screenshots

Desktop (please complete the following information):

N/A

Smartphone (please complete the following information):

N/A

Additional context

N/A

Short description

We need to install the storybook to the project in order to improve the component development, documentation, and maintenance.

Description

Install the storyboard;
Configure the storyboard;
Find out the best structure to document the components that belong to the modules;
Create the first stories;

Aditional information

To ease the initial development we decided to build the component library within the frontend, but the idea is that these components and their storybook will be migrated to this repository as the design system progresses.

User story

In order to ...
As a ...
I want to ...

UI Resource

API

If applicable, add the API endpoint(s).

Aditional information

Any other additional information.

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

Description

A clear and concise description of what the epic is about.

Goals

Describe the epic goals.

• #97
• #98
• #99
• #100
• #101
• Course page section related course [future]

Additional context

Add any other context about the problem here.

Description

Create a fixed top header to the default application layout. It is 100% width and its height must be the same height as the sidebar logo (h-8 + py-4)

UI Resource

full size

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional information

As a suggestion this component can be split into the following sub-components:

• Avatar (#55)
• MenuList
• MenuListItem (possible states: default, hover, active, disabled)
• UserDropdown
• UserDropdownMenu
• UserDropdownMenuItem
• Icon (#48)

MUST:

• The MenuList and the DropdownMenu components MUST receive objects as the parameter that contains all the menu items that need to be listed
• The Header must be fixed to the top of the main content, and at the right side of the sidebar
• The Header must have the same height as the sidebar's logo
• The Header must fill 100% of the Main content width
• ARIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only
• The icons don't need to exactly match with the ones from the reference image

Possible unknowns

None.

Dependencies

• #44 (not a blocker)
• #55 (not a blocker - there is a basic avatar component)
• #48

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Description

Create an Avatar component to hold the user's avatar/picture.

UI Resource

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional Information

I think that it is possible to use the react-avatar or even take it as an example.

MUST:

• It must support at least 3 sizes: xs (~16px), md (~32px), lg (~128px)
• It needs to be responsive
• It must accept the image URL as a parameter
• The default avatar must be a lettered avatar
• [X]ARIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only

Possible unknowns

None.

Dependencies

None.

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)

Description

Right now we only have a few containers and components in our application, so, it is a good moment to start doing things right. We need to implement an asynchronous container load system.

Additional context

By implementing react-loadable create a PoC to validate the benefits of async component loading.

Questions

• Can we use async load non-containers/routers components?
• What are the pros and cons for async containers/routers components loading?
• I can be used on PWA?
• Is the react-loadable the best option?

We decide that we will use TailwindCSS as our toolkit to develop the Frontend, so we need to install it in our project.

Scope

• Install TailwindCSS

Out of scope

• Convert the existing components to use TailwinCSS

User story

In order to ...
As a ...
I want to ...

UI Resource

If applicable, add the screenshot or link to the UI resources.

API

If applicable, add the API endpoint(s).

Aditional information

Any other additional information.

Scenarios

Add the possible scenarios using GWT.

Scenario A Title
Given I ...
When I ...
Then I ...

Possible unknowns

List of possible unknowns related.

Improve the README to make it easier to contribute to the project.
I suggest create sections like:

• About the project;
• Instructions to getting started;
• What is required to start;
• Common troubleshooting

It is probably a good idea to have a few tools to help us to keep the translation non-technical and also, help us to find out missing translation keys. I was wondering if it is not possible to use Weblate and i18next-scanner or if there are better options. In this case, this is task is about:

• Investigate possible tools to translate and scan for translation keys in our codebase;
• Testing and compare the possible tools;
• The translation tool must be easy to use for non-developers;
• The translation tool doesn't actually need to be a self-hosted tool;
• If it is a desktop tool, better if supports at least Windows and Linux;

We are using keycloak.js to authenticate the application, but it causes some undesired dependency. We should prefer to use protocol over service. In this case, it means that we should not be depending on the keycloak library, but implement the authentication using some OpenID library, so we can easily swap the authentication service behind the curtain.

Some interesting links:

• https://betweendata.io/posts/react-keycloak-authentication/
• https://github.com/bjerkio/oidc-react
• https://javascript.plainenglish.io/secure-react-spa-using-keycloak-with-openid-connect-a25e2ad51743

Some Keycloak alternatives (for tests):

• https://www.g2.com/products/keycloak/competitors/alternatives

We need to install and configure an accessibility check tool.

Describe the solution you'd like

• Install and configure react-axe;

Additional context

• How does it impact our e2e tests with Cypress?

Description

Install the Heroicons

UI Resource

n/a

API

n/a

Additional information

None.

Possible unknowns

None.

Dependencies

None.

Mentoring

No.

Create a basic auth module that should handle:

• Login
• Register
• Forgot password
• Change password