web-pal / react-trello-board Goto Github PK
View Code? Open in Web Editor NEWTrello like board based on React, Redux, React-dnd
Home Page: http://react-trello-board.web-pal.com
Trello like board based on React, Redux, React-dnd
Home Page: http://react-trello-board.web-pal.com
Hey guys. Pretty cool work! :)
I just have one suggestion: Right now it shows quite nicely how a trello-like board can easily be implemented using react/redux. But unfortunately it is really just the whole sample app right now.
It would be really cool to split it into a library exporting the board components and this sample app based on the lib. This way one could easily use the board in a real-world application.
Need any help fleshing out the README for running the app and contributions?
Would be happy to help!
Dropping a card doesn't trigger vertical scroll when the list is long, so you tend to drag/drop multiple times to reach the end.
The board is well done, thanks for sharing.
Hi,
How do we take production build..???
So I tried to do npm run build
and got this:
0 info it worked if it ends with ok
1 verbose cli [ '/Users/tbrown/.nvm/versions/node/v6.9.0/bin/node',
1 verbose cli '/Users/tbrown/.nvm/versions/node/v6.9.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: /Users/tbrown/.nvm/versions/node/v6.9.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/tbrown/Desktop/react-trello-board-master/node_modules/.bin:/Users/tbrown/.rvm/gems/ruby-2.3.0/bin:/Users/tbrown/.rvm/gems/ruby-2.3.0@global/bin:/Users/tbrown/.rvm/rubies/ruby-2.3.0/bin:/Users/tbrown/.nvm/versions/node/v6.9.0/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin:/usr/X11/bin:/Users/tbrown/.rvm/bin
10 verbose lifecycle [email protected]~build: CWD: /Users/tbrown/Desktop/react-trello-board-master
11 silly lifecycle [email protected]~build: Args: [ '-c',
11 silly lifecycle 'cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors' ]
12 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/Users/tbrown/.nvm/versions/node/v6.9.0/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (/Users/tbrown/.nvm/versions/node/v6.9.0/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:877:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/tbrown/Desktop/react-trello-board-master
17 error Darwin 15.6.0
18 error argv "/Users/tbrown/.nvm/versions/node/v6.9.0/bin/node" "/Users/tbrown/.nvm/versions/node/v6.9.0/bin/npm" "run" "build"
19 error node v6.9.0
20 error npm v3.10.9
21 error code ELIFECYCLE
22 error [email protected] build: `cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors`
22 error Exit status 1
23 error Failed at the [email protected] build script 'cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the React_trello_board package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors
23 error You can get information on how to open an issue for this project with:
23 error npm bugs React_trello_board
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls React_trello_board
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
I am using node 6.2.1
and i run :
npm install
I got this error :
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/me/.nvm/versions/node/v6.2.1/bin/node" "/Users/me/.nvm/versions/node/v6.2.1/bin/npm" "install"
npm ERR! node v6.2.1
npm ERR! npm v3.9.3npm ERR! shasum check failed for /var/folders/4s/ch8k_58x04l59gv_p4jfq6lr0000gn/T/npm-64010-6518f751/registry.npmjs.org/faker/-/faker-3.1.0.tgz
npm ERR! Expected: 0f908faf4e6ec02524e54a57e432c5c013e08c9f
npm ERR! Actual: 9a1c6654a6465ebddda9a56cc10ef4fc8c9cdf2c
npm ERR! From: https://registry.npmjs.org/faker/-/faker-3.1.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issuesnpm ERR! Please include the following file with any support request:
npm ERR! /Users/me/workspace/react-trello-board/npm-debug.lo
I upgrade node to 6.7.0 :
nvm install 6.7.0
I run again π
npm install --verbose
The process is frozen , and the last console message is :
npm verb correctMkdir /Users/me/.npm correctMkdir not in flight; initializing
npm verb afterAdd /Users/me/.npm/react-dom/15.2.1/package/package.json written
βΈ¨ βββββββββββββββΈ© β § fetchMetadata: verb afterAdd /Users/me/.npm/react-dom/15.2.
If you would write a new reducer that would change the card
EXAMPLE:
case CHANGE_CARD: {
const newLists = [...state.lists];
// First card in first row
newLists[0].cards[0].title = "test";
return state.withMutations((ctx) => {
ctx.set('lists', newLists);
});
This results in
But here is the error, when debugging the code in the Render function in Cards, the CardList array is updated and if you look at the CardList data the props have the new title as "test" BUT DraggableCard does NOT re-render.
But as soon as you move the card by dragging, then the re-render of DraggableCard works and the correct title "test" is rendered.
Hey! First of all thank you for the amazing project! I would like to know why you don't expose this library as a npm module. Would you mind to do it?
I am amazed how many solutions are out there but for real none of them work on mobile. Please be the first supporting mobile devices with touch input.
Hold to drag on mobile & click on desktop
This way scrolling is still accesibble just like on trello.
nextY is sometimes 1,2 or 3 instead of 0 when moving to an empty list; consistently reproducible if you drop card towards lower end of the empty list.
I was looking into package.json, but did not find any hint about the license.
Can you clearify that, and even add this info into github project settings.
... and by-the-way, great stuff! Thx.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.