nishiki-tech / nishiki-frontend Goto Github PK

Description

Improve UI directory structure especially because the following two directories could be unified:

• src/components/ui/icons/buttons/
• src/components/ui/icons/links/

Additional Contexts

• This issue branched off from #35

Feature Title

Add Group Collection Page

User Stories

User can see group collection page

Acceptance Criteria

• show list of group names
• show number of containers for each group
• show number of users for each group

Overview

The task is to create a shared UI component for a dialog.

Criteria

• It is preferred to build the modal (dialog) component based on shadcn/ui.

Feature Title

Add "Commit Convention" section to CONTRIBUTING.md

User Stories

Since there is no convention for commit messages, they lack consistency.

Acceptance Criteria

• Add "Commit Convention" section, by following: https://github.com/chakra-ui/chakra-ui/blob/main/CONTRIBUTING.md#commit-convention

Additional Context

Feature Title

The task is to create components that can be used repeatedly throughout the project.

Components

• #56
• #57
• #58
• #90
• #59
• #92
• #102
• #103
• #105
• #130
• #131
• #163
• #192
• #193
• #198

Acceptance Criteria

• Determine directory architecture
• Determine whether if App Router should be used

Feature Title

Add CUD function at Group Collection Page

Description

Address the issues related to styles configuration discussed in #35

Criterias

• Refine 'tailwind.config.ts'
  • colors
  • font sizes
• Sync 'STYLE_NOTE.md' with 'tailwind.config.ts'
• Consider renaming 'STYLE_NOTE.md' to be meaningful
• Remove dark theme definition from all files

Additional Context

• This issue branched off from #35

Feature Title

The task is to create Food related page

Components

• #84
• #121 *Omitted because it will be handled after the 1st release
• #122
• #137
• #149
• #151
• #208

Feature Title

A concise title for the new feature.

User Stories

As a [user type], I want [an action] so that [benefit/value].

Acceptance Criteria

• Criterion 1
• Criterion 2

Technical Details

• API Changes:
• Database Changes:
• Dependencies:

Additional Context

Any other internal context or references.

Feature Title

Apply Design format to Group Collection Page

Feature Title

• Implement GoogleLogin component and cognito integration

Samples

// components/GoogleLoginButton.js
import { GoogleLogin } from 'react-google-login';

const GoogleLoginButton = ({ onSuccess, onFailure }) => {
  return (
    <GoogleLogin
      clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
      buttonText="Login with Google"
      onSuccess={onSuccess}
      onFailure={onFailure}
      cookiePolicy={'single_host_origin'}
    />
  );
};

export default GoogleLoginButton;


// pages/login.js
import GoogleLoginButton from '../components/GoogleLoginButton';
import { signInWithGoogleToken } from '../utils/cognito';

const LoginPage = () => {
  const handleLoginSuccess = async (response) => {
    try {
      const { tokenId } = response;
      const user = await signInWithGoogleToken(tokenId);
      console.log('User logged in:', user);
      // Post-login processing (storage of user information, redirects, etc.)
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  const handleLoginFailure = (response) => {
    console.error('Google login failed:', response);
  };

  return (
    <div>
      <h1>Login Page</h1>
      <GoogleLoginButton
        onSuccess={handleLoginSuccess}
        onFailure={handleLoginFailure}
      />
    </div>
  );
};

export default LoginPage;



// utils/cognito.js
import { CognitoIdentityServiceProvider } from 'aws-sdk';

const cognito = new CognitoIdentityServiceProvider({
  region: process.env.AWS_REGION,
});

export const signInWithGoogleToken = async (googleToken) => {
  // Process of sending Google token to Cognito for authentication
  // Ex) call AdminInitiateAuth, GetId, GetCredentialsForIdentity  Cognito API 
};

export default {
  signInWithGoogleToken,
};

Acceptance Criteria

• can login with google account
• can access backend api (lambda)

Description

Add a "check list section" for the assignee to check the things to do. All the options in the check list have to be completed and ticked before requesting a PR review.

Why is it important?

• PR reviews are occasionally passed to reviewers with some careless mistakes, for example, specifying a wrong base branch the PR should be merged to, and it could lead to crucial problems.

Additional Context

Feature Title

• Implement unit test code with Jest

Reference

• https://nextjs.org/docs/app/building-your-application/testing/jest

Criteria

• Install related libraries for Jest
• Initial test code for apiclient and utility methods

Feature Title

• Add Group Single Page
• Just display API response data, (not apply design css from figma yet.)

User Stories

User can see Group Single Page

Acceptance Criteria

• Show list of users
• Show list of containers

Overview

The task is to create a shared UI component for a drawer.

Criteria

This component:

• Is preferred to be built, using shadcn/ui.
• Is preferred to have multiple directions (from bottom/left/right).

Bug Description

Find the typo in the template files.

Steps to Reproduce

None

Expected Behavior

None

Screenshots

None

Additional Context

None

Feature Title

Add Food Collection page

User Stories

User can see Food Collection page

Acceptance Criteria

• show list of food
• add filter by category, container, group
• add search by name
• sort by name

Feature Title

• Go back to Login page if you are not logged in.
• Maybe have to implement middleware (need investigation)

Description

This proposal is about the issue templates that are currently available for each team member and community. There are three templates named "Bug report", "New feature request", and "Question". However, there are some difficulties associated with these templates, such as it being hard to choose the most appropriate one and the contents of each template not fitting the purpose of our writing. We need to make some changes to address these issues.

Feature Title

Set up Renovate in order to automate the process of package updating.

Acceptance Criteria

• Renovate creates a PR weekly for the package that its newer version is available.
• Updates of minor and patch types should be bundled in one PR except TypeScript and next.

Technical Details

Additional Context

Any other internal context or references.

Feature Title

Function of going back to previous pages.

User Stories

Users can go back to previous page when they push "<" back button.

Feature Title

Generate API Client code from OpenAPI Specification file in Docs repo.

User Stories

when this repo gets an event from the docs repo, a GitHub action is invoked to generate a type definitions file.

Acceptance Criteria

• valid docker file
• #29
• generate the API client code

Additional Context

Overview

The task is to create a shared UI component for a card.

Criteria

The component:

• Is preferred to be built, using shadcn/ui.

Overviee

See: https://github.com/orgs/genesis-tech-tribe/discussions/78

• #53
• #143
• #148

Feature Title

Reference to Mock server nishiki-web-api.yaml was not latest

Feature Title

Create the staging branch

Acceptance Criteria

• Create the staging branch
• Create a branch protection for the staging branch
• Add the staging branch to the nishiki-frontend app on AWS Amplify
• Add PR preview for the staging branch for the nishiki-frontend app on AWS Amplify

Additional Context

• This issue could be addressed just before the 1st release

Overview

The task is to create a shared UI component for a button.

Criteria

• It is preferred to build the button component based on shadcn/ui.
• The button component should have multiple variants and sizes that correspond to the Figma design.

When you create a new issue on a Project, you should not see the issue template created in each repository. The goal of this task is to figure out how to use issue templates on Projects.

Ideally, templates are created on each repository and they are accessible when creating an issue on a Project.

• Create a default issue template
• Research how to make templates accessible from a GitHub Project

Description

Criteria

• #296
• #294
• #325
• #324

Notes

Screen Captures

Description

The DIRECTORY_STRUCTURE.md is needed to be improved for developers to make it easier to understand.

This is the original discussion.

Additional Context

• This issue branched off from PR #35

Overview

The src/components/ui/Icon.tsx file should be fixed based on the Open-Closed Principle (OCP), one of the SOLID principles. In the current code, all the possible icons are imported within the Icon.tsx file, which means whenever we need a new icon in the future, the icon has to be imported into this file. That is against the principle:

"Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification."

Criteria

• Accepts any SVG or other image as a child component.
• Has some variety of sizes (e.g., 24x24px, 32x32px, 48x48px, match parent width/height)
• Has some variety of border radiuses (e.g., 4px 8px 10px, full)

Note

• The component might be better to be renamed to IconButton, IconButton or whatever sounds like a button. Because some icon SVGs will be used as simple images without wrapping with this component.

Feature Title

Add CUD function at Group Collection Page

Criteria

• #158
• #159
• #160

Description

Currently, each API call is written separetely. Create common function with Authentication header for API client

Criteria

• API Data cache strategy is applied at common method -> #74
• Header Authentication is implemented at common method
• Appropriate async process handling is applied
• use Fetch API instead of axios library to utilize Next.js cache functions

Overview

Next.js 14 was released on October 26th. Since we started this project very recently, it is better to upgrade the Next.js from v13 to v14 as soon as possible before starting a lot of coding on v13.

Additional Contexts

• Official Migration Guide

Overview

Hosting a repository of GitHub Organization require a Vercel's Team, which costs 20USD/mo. It would be better if there are any other web app hosting services with lower pricing.

Criterias

• Find other web app hosting services (e.g. Netlify, AWS Amplify)
• Enable preview deployment for each GitHub Pull Request (Important for PR reviews!)

Divided tasks

• #119
• #120
• #69
• #70

Feature Title

Apply Design format to Group Single Page

Description

Discuss with designers what fonts will be used and where they should be listed (most likely in the Figma file). After that, improve the font configuration (fonts.ts) under the const/ directory.

Criterials

• Discuss with designers and determine about fonts definition
• Update fonts configuration in fonts.ts
• Update the directory structure for font configuration. Currently, the file is located at src/const/fonts/fonts.ts. Since the font-related files will be mostly likely only one file, the const/fonts/ directory may not be necessary.

Additional Contexts

• This issue branched off from #35

Feature Title

• Apply App router server component cache mechanism.
• Currently, API response is not cached at server component when backend API is called.
• Investigate how to integrate server action cache effectively and apply it.

reference

• https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

Related Issues

• #74

Feature Title

Configure Google and AWS Cognito

• Create an OAuth 2.0 client ID in the Google API Console.
• Configure Google as the identity provider in the AWS Cognito user pool.

Acceptance Criteria

• Finish setting at Google API Console.
• Finish setting at AWS Cognito

Related tasks

• nishiki-tech/nishiki-backend#133
• nishiki-tech/nishiki-backend#135

Feature Title

Authentication implementation

User Stories

• Users can log in with google account

Acceptance Criteria

• #52
• #53

Feature Title

• Use Access token to call Backend API (API Gateway)
• Utilize import { fetchAuthSession } from 'aws-amplify/auth';