neuefische / web-react-recap-project

Vite-powered template for the React Recap Project, featuring automatic GitHub issue creation.

React Recap Project: Theme Creator

Getting Started with the GitHub Repository Template

This template is designed to help you quickly start a new project with predefined issues and a GitHub project board. Follow these steps to configure and use your new repository:

Step 1: Use the Template

Click on the "Use this template" button on the GitHub template repository page to create your new repository.

Step 2: Create a Personal Access Token

1. Navigate to Githubs Token Settings: Create Access Token

2. Personal access token: Click on "Generate new token (classic)".

3. Token settings: Give your token a descriptive name, set the expiration as desired, and select the repo scope. This allows the token to access repositories.

4. Generate token: Click "Generate token" at the bottom.

Important: Copy your new personal access token. You won’t be able to see it again!

💡 You can recreate your token at any time, so do not worry if you accidentally did not copy it

Step 3: Setup Environment Variables

1. Clone your repository: Use git clone to clone your new repository to your local machine.
2. Create .env file:
   • Navigate to the root directory of your cloned repository.
   • Use the command line to create a copy of the .env.example file:

     cp .env.example .env

   • Open the .env file.
   • Fill in your GitHub username, repository name, and the personal access token you created:

     GITHUB_TOKEN=your_personal_access_token_here
     REPO_OWNER=your_github_username
     REPO_NAME=your_repository_name
     

Step 4: Run the Script to Create Issues

In the root directory of your repository, run the following command to install necessary dependencies and run the issue creation script:

npm install
npm run create-issues

💡 This script will automatically create predefined issues in your repository.

🚨 Make sure to run npm run create-issues only once for your repository.

✅ After creating the issues to can revoke the token you created, if you do not want to let it expire

Step 5: Create a GitHub Project Board

1. Go to your repository on GitHub.
2. Click on 'Projects': Find the 'Projects' tab and click on it.
3. Create a new project: Click "New project", name your project, and choose the "Board" template

Step 6: Bulk Add Issues to the Project Board

1. Add issues: Click on "Add item" in the "ToDo" column.
2. Select issues: Click on the "+" and "Add item from repository"
3. Select repository: Select your react-recap-project
4. Add to project: Select all items and click "Add selected items"

Step 7: Start working

Start the development server:

npm run dev

Final Notes

Make sure to keep your personal access token secure and do not share it or commit it to your repository. Follow the steps outlined above to ensure your project setup is successful.

🚨 If you accidentally pushed your access token to github, make sure to regenerate or remove it as fast as possible! This potentially grants access to your github account.

web-react-recap-project's Issues

#3: Delete a color from the theme

As a user,

I want to delete a color from the theme,

So that I can remove colors that I no longer need or want in my custom theme.

Screen.Recording.2024-04-29.at.17.36.20.mov

Acceptance Criteria

• Each color card displayed in the theme includes a "Delete" button for easy removal.
• Clicking the "Delete" button should show a confirmation message before actually deleting
• If there are no colors left in the theme after deletion, display a message encouraging users to add new colors.

Tasks

• Implement a function to handle the deletion of a color.
• Introduce a state to handle the confirmation message
• Reuse the .color-card-headline css rule for the confirm question, but maybe rename it to .color-card-hightlight

#4: Edit a color from the theme

As a User

I want to edit a color in the theme

in order to adjust the colors to my preference.

Screen.Recording.2024-04-29.at.17.40.26.mov

Acceptance Criteria

• Each color card has an "Edit" button.
• Clicking the "Edit" button allows me to modify the role, hex value, and contrast text via a form.
• The updated color information is reflected in the theme upon submission.

Tasks

• Introduce a state for the edit
• Reuse the ColorForm Component and display it within the Color Component when in edit mode

#6: Copy to Clipboard Button

As a User

I want to have a button to copy the hex code to the clipboard

in order to easily use it in my project.

Screen.Recording.2024-04-29.at.17.46.31.mov

Acceptance Criteria

• A "Copy to Clipboard" button is available.
• Clicking the button copies the hex code to the clipboard.
• A confirmation message appears indicating that the color has been copied successfully.
• Confirmation message disappears after 3 seconds

Tasks

• Create a CopyToClipboard component
• Use navigator.clipboard.writeText() API to copy the hex code to the clipboard ( Note that it is async )
• Introduce a state that handles the confirmation message
• Utilize useEffect to set a 3 second timeout to reset the state

#8: Have multiple Themes

As a User

I want to create and view multiple color themes

in order to work on more than one project.

Screen.Recording.2024-04-29.at.18.51.33.mov

Acceptance Criteria

• I can create multiple themes
• I can switch between themes using a dropdown menu
• Each theme can be independently edited, deleted, and saved.
• You can not edit or delete the Default Theme

 🚨 This is a complex ticket that requires major refactoring

You may want to introduce themes like so:

export const initialThemes = [
  {
    id: "t1",
    name: "Default Theme",
    colors: ["c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9"],
  },
  {
    id: "t2",
    name: "2nd Theme",
    colors: ["c10", "c11", "c12"],
  },
];

#2: Add a color to the theme

As a user,

I want to add a color to the theme,

So that I can customize my color scheme according to my preferences.

Screen.Recording.2024-04-29.at.17.32.28.mov

Acceptance Criteria

• Users can input a role, hex value, and contrast text via a form to add a new color to the theme.
• The form should be prefilled with default values to guide user input.
• Upon submission, the new color is added to the top of the colors and is displayed on a color card to confirm addition.
• The inputs for hex and contrastText should include both color and text input types for easy and accurate color selection.

Tasks

• Implement a ColorForm component that allows users to submit new colors to the theme.
• Use a package to generate unique id's like nanoid or ui
• Develop a ColorInput component to handle synchronized text and color inputs, ensuring that they reflect the same value. ( Controlled Inputs )

Hints

Hint: ColorForm- Spoiler Alert! 🚨

./Components/ColorForm/ColorForm.jsx

import ColorInput from "../ColorInput/ColorInput";
import "./ColorForm.css";

export default function ColorForm({
  onSubmitColor,
  initialData = { role: "some color", hex: "#123456", contrastText: "#ffffff" },
}) {
  function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);
    onSubmitColor(data);
  }

  return (
    <form className="color-form" onSubmit={handleSubmit}>
      <label htmlFor="role">
        Role
        <br />
        <input
          type="text"
          id="role"
          name="role"
          defaultValue={initialData.role}
        />
      </label>
      <br />
      <label htmlFor="hex">
        Hex
        <br />
        <ColorInput id="hex" defaultValue={initialData.hex} />
      </label>
      <br />
      <label htmlFor="contrastText">
        Contrast Text
        <br />
        <ColorInput id="contrastText" defaultValue={initialData.contrastText} />
      </label>
      <br />
      <button>ADD COLOR</button>
    </form>
  );
}

Hint: ColorInput - Spoiler Alert! 🚨

./ColorInput/ColorInput

import { useState } from "react";

export default function ColorInput({ id, defaultValue }) {
  const [inputValue, setInputValue] = useState(defaultValue);

  function handleInputValue(event) {
    setInputValue(event.target.value);
  }

  return (
    <>
      <input
        type="text"
        id={id}
        name={id}
        value={inputValue}
        onChange={handleInputValue}
      />
      <input type="color" value={inputValue} onChange={handleInputValue} />
    </>
  );
}

#5: Persist theme in localStorage

As a User

I want to automatically save the theme in localStorage

in order to retain it between sessions.

Screen.Recording.2024-04-29.at.17.43.18.mov

Acceptance Criteria

• The theme is saved to localStorage upon any addition, deletion, or edit of a color.
• Upon reloading the application, the theme is retrieved and displayed from localStorage.

Tasks

• Install use-local-storage-state package from npm npm i use-local-storage-state and use it

#7: Fetch API to Check If Contrast Is Okay

As a Developer

I want to check the contrast ratio via an API when colors are added or edited

in order to ensure accessibility compliance.

Screen.Recording.2024-04-29.at.18.44.36.mov

Acceptance Criteria

• An API call is made automatically when a color or contrast text is added or edited.
• The application displays a message indicating whether the contrast ratio is sufficient next to the respective color card.

Tasks

• Use this Contrast Checker API to display the overall a11y score for each color

Hint

This is how you can send data to an API, it is called a post request.

 async function postFetch() {
      const response = await fetch(
        "https://www.some-api-url.com/api",
        {
          method: "POST",
          body: JSON.stringify({ cool: true }),
          headers: {
           "Content-Type": "application/json",
         },
        }
      );
}

#1: Display Theme Colors

Value Proposition

As a User

I want to view a single theme

in order to understand its color scheme and visual representation.

Acceptance Criteria

• When I open the app, I can see a single theme displayed.
• The name of the theme is displayed.
• Each color in the theme is represented by a color card.
• Each color card displays:
  • hex value of the color
  • the role of the color
  • the color itself in the background color of the element
  • the font in the respective contrastText color

💡 Check if your colors are accessible: Contrast Checker

Tasks

• Set up a React component for displaying a single color card.
• Display hex value, role and contrastText on each color card.
• Style color cards to accurately represent the colors.
• Map color cards for each color in the theme.