upnotes-io / react-todo Goto Github PK

View Code? Open in Web Editor NEW

8.0 3.0 41.0 4.05 MB

A generic todo list componet for react. This is being used in an electron based app: https://upnotes.io

JavaScript 6.70% TypeScript 87.44% CSS 5.63% Shell 0.22%

hacktoberfest hacktoberfest2022 note-taking react todolist

react-todo's Introduction

React todo component

A react todo component is created using material UI

Storybook

https://upnotes-io.github.io/react-todo/

Installation

// with npm
npm i react-todo-component

// with yarn
yarn add react-todo-component

Testing

yarn storybook

Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import {Todo} from 'react-todo-component';

ReactDOM.render(
    <Todo />,
  document.getElementById('root')
);

Contribution guide

If you're reading this, you're awesome! Thank you for helping us.

Clone git repository on your local git clone [email protected]:upnotes-io/react-todo.git
Run yarn install to install dependencies.
We are using storybook. Just run yarn run storybook to test on local.
Pick a issue and comment you are working on it.
Create your feature branch, do changes and create pull request.

Step to release the npm module

Create a new account in npm. https://www.npmjs.com/signup
Create a new access token and select publish as a type https://www.npmjs.com/settings/upnotes/tokens
Add secret to your repo or organization as NPM_TOKEN https://github.com/organizations/upnotes-io/settings/secrets/actions/new
Create a new tag and use that tag to create the release. Creating a new release will trigger the workflow.

Publishing to github pages:

Adding deploy keys to your repo:

react-todo's People

Contributors

Stargazers

Watchers

react-todo's Issues

full dark mode

make want to make it also dark

UI is not matching with dark mode

Update readme

Css improvements

Need to figure out the best possible way to write CSS so that it is customizable. Anyone who wants to use this component should be able to style according to their needs.

Add undo/redo support across items add and removal

Ctr/cmd + z and ctr/cmd + y should work accross multiple items while undo and redo. Please refer to google keep behavier of undo and redo for checkboxes.

Drag and drop implementation needed to change todo list ordering

User should be able to rearrange to-do items using drag and drop.

Add new todo item on pressing enter in between todo list rows

Pressing enter for creating new row works for the first item but it does not work for rest of the rows.
https://upnotes-io.github.io/react-todo/

If cursor is in the middle the line should get split into 2 with dividing the text into 2 lines and cursor remains in the next line.
By pressing enter in the end of the line should cause new row to be created in the next line and the curser shoud be in the next line.
By pressing enter in the begining of the line should cause the row to be created at the top and the cursor should remain in the current line.

Basically 2ed and 3ed points are special conditions to the first point so if first usecase is implemented correctally the 2ed and 3ed should automatically work.

Wrap text with limit of 1200 chars

Right now the text does not wrap.

Show only 2 lines with blur at the bottom of every line if it is not active and show full text when clicked.
At one point of time only one checkbox can be active.
Trancate the text to 1200 chars when user tries to paste more than 1200 and show error when user tries to add more chars than 1200.
Referance:

Create a Container component similar to MUI Container component using class bases css.

Add jest tests with github action to execute test on every PR and merge

Introducing jest for testing scenario with writing few high level tests for each component.
Adding github action to execute tests on each PR and merge.

Missing Components

I think there are below-mentioned things that need to be implemented:

prettier
eslint integrated with airbnb standard
husky as a pre-commit hook that'll call lint-staged scripts
lint-staged that will check prettier, then linting, and then proceed with the commit
unit testing with jest
e2e testing with cypress

airbnb is a suggestion

Create a TextField component similar to MUI TextField component using class bases css.

require more accurate instruction for Contributor guided

I have setup the following instruction but I got some errors like this

warning package.json: "dependencies" has dependency "husky" with range "^8.0.3" that collides with a dependency in "devDependencies" of the same name with version "^8.0.0"
warning [email protected]: "dependencies" has dependency "husky" with range "^8.0.3" that collides with a dependency in "devDependencies" of the same name with version "^8.0.0"
..

I don't know how to solve it.

On hitting space and then hitting the enter button a blank todo list is being created

Hey @kamalkishor1991

I would like to work on this issue.
Can you please assign this issue to me

Handle pressing back in the beginning of the todo item

Right now nothing happens if you press back in the beginning of the todo item.

If todo note is empty it should get deleted.
If the text size is greater than 0 it should merge into previous todo item

Create a AccordionDetails component similar to MUI AccordionDetails component using class bases css.

Improve the final build for npm

Find out a way to build just the TodoApp component.
Define the peer dependencies properly and test by using package in other places.
Need to find out the best possible way to build a lib.

update on delete icon

when hover on delete icon

change backgruond color to

can i work on this as my first conterpution

Node Version

The project run perfectly fine on node:16 version. So we can do either of two:

add these lines in package.json file:

  "engines": {
    "node": "^16.20",
    "yarn": "^1.22"
  },
  "engineStrict": true

or work on the migration from v16 to the v22 version of nodejs.

Create a Checkbox component similar to MUI checkbox component using class bases css.

User should be able to navigate using up and down arrow keys in todo items.

Cannot run storybook

Error on yarn run storybook

System Environment

macOS 13.4.1

Description
Can not run on a terminal or Zsh

Steps to Reproduce

First clone repos, It's perfectly fine

When I run yarn install

[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @mui/[email protected]" has incorrect peer dependency "react@^17.0.0 || ^18.0.0".
warning " > @mui/[email protected]" has incorrect peer dependency "react-dom@^17.0.0 || ^18.0.0".
warning "@mui/material > @mui/[email protected]" has incorrect peer dependency "react@^17.0.0 || ^18.0.0".
warning "@mui/material > @mui/[email protected]" has incorrect peer dependency "react-dom@^17.0.0 || ^18.0.0".
warning "@mui/material > @mui/[email protected]" has incorrect peer dependency "react@^17.0.0 || ^18.0.0".
warning "@mui/material > @mui/[email protected]" has incorrect peer dependency "react@^17.0.0 || ^18.0.0".
warning "@mui/material > @mui/system > @mui/[email protected]" has incorrect peer dependency "react@^17.0.0 || ^18.0.0".
warning "@mui/material > @mui/system > @mui/[email protected]" has incorrect peer dependency "react@^17.0.0 || ^18.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@>=2".
warning " > @storybook/[email protected]" has unmet peer dependency "require-from-string@^2.0.2".
warning " > [email protected]" has incorrect peer dependency "react@^18.0.0".
warning " > [email protected]" has incorrect peer dependency "react-dom@^18.0.0".
[4/4] 🔨  Building fresh packages...
$ husky install
husky - Git hooks installed
✨  Done in 12.10s.```

After that, yarn run storybook

yarn run v1.22.19
$ start-storybook -p 6006
info @storybook/react v6.5.13
info
info => Loading presets

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

info Addon-docs: using MDX1
info => Using implicit CSS loaders
(node:21123) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using default Webpack4 setup
10% building 1/1 modules 0 active
info => Ignoring cached manager due to change in manager config
10% building 1/7 modules 6 active /Users/nyanlin/github/react-todo/node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.jsnode:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/nyanlin/github/react-todo/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/nyanlin/github/react-todo/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/nyanlin/github/react-todo/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/nyanlin/github/react-todo/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/nyanlin/github/react-todo/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/nyanlin/github/react-todo/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/nyanlin/github/react-todo/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /Users/nyanlin/github/react-todo/node_modules/loader-runner/lib/LoaderRunner.js:205:4 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.6.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Text typing in input field rather than going down to list when typing

When entered text the text is going into another input in list for typing , which I think is little bit frustrating, A button on side of input field would be better for adding items

Create a Accordion, AccordionDetails, AccordionSummary component similar to MUI component using class based css.

One level hierarchy support

User should be able to create sub-todo items.