storybook is broken

[awb99]

Griddle version

latest version via git clone from git

Expected Behavior

the story book should run

Actual Behavior

Running storybook brings an error

ERROR in ./stories/index.tsx
Module build failed: SyntaxError: Unexpected token (64:60)

  62 |     return fakeData_1["default"].slice(start, start + 10);
  63 | }
> 64 | var GreenLeftSortIconComponent = function (props) { return (<span style={{ color: "#00ff00" }}>
     |                                                             ^
  65 |     {props.icon && <span className={props.iconClassName}>{props.icon}</span>}
  66 |     {props.title}
  67 |   </span>); };

 @ ./.storybook/config.js 4:2-23

Steps to reproduce

git clone https://github.com/GriddleGriddle/Griddle.git
cd Griddle/
npm install
npm run storybook

[dahlbyk]

I'm not able to reproduce this. On a fresh clone at master (caff6351694e5572bb1198a0fdfb6d617f0c1b05):

> griddle-react@1.13.1 storybook C:\Dev\OSS\Griddle
> start-storybook -p 6006

@kadira/storybook v2.35.3

=> Loading custom .babelrc
=> Loading custom webpack config.

React Storybook started on => http://localhost:6006/

ts-loader: Using typescript@2.5.3 and C:\Dev\OSS\Griddle\tsconfig.json
webpack built c65309814d5f314c131f in 8960ms

Can you share what you get from npm ls --parseable --long? What version of node and npm?

[rkralston]

I can run the storybook. However, Table.empty with columns and TableContainer.base both error out in the browser:

TableContainer.base: Cannot read property 'object' of undefined TypeError: Cannot read property 'object' of undefined at http://localhost:6006/static/preview.bundle.js:69242:50 at http://localhost:6006/static/preview.bundle.js:69245:7 at renderMain (http://localhost:6006/static/preview.bundle.js:66842:18) at renderPreview (http://localhost:6006/static/preview.bundle.js:66875:13) at Array.renderUI (http://localhost:6006/static/preview.bundle.js:62115:27) at Object.dispatch (http://localhost:6006/static/preview.bundle.js:66169:20) at http://localhost:6006/static/preview.bundle.js:62094:17 at http://localhost:6006/static/preview.bundle.js:37229:22 at Array.forEach (<anonymous>) at Channel._handleEvent (http://localhost:6006/static/preview.bundle.js:37228:20)

Table.empty with columns: Cannot read property 'object' of undefined TypeError: Cannot read property 'object' of undefined at http://localhost:6006/static/preview.bundle.js:69073:50 at renderMain (http://localhost:6006/static/preview.bundle.js:66842:18) at renderPreview (http://localhost:6006/static/preview.bundle.js:66875:13) at Array.renderUI (http://localhost:6006/static/preview.bundle.js:62115:27) at Object.dispatch (http://localhost:6006/static/preview.bundle.js:66169:20) at http://localhost:6006/static/preview.bundle.js:62094:17 at http://localhost:6006/static/preview.bundle.js:37229:22 at Array.forEach (<anonymous>) at Channel._handleEvent (http://localhost:6006/static/preview.bundle.js:37228:20) at PostmsgTransport._handleEvent (http://localhost:6006/static/preview.bundle.js:37107:15)

[dahlbyk]

@rkralston that helps, thanks. Looks like a TS issue; check out #827.

[dahlbyk]

Please let us know if there are any other issues with the Storybook as of master.

[rkralston]

Pulled latest, the stories above are fixed. with custom griddle key that doesn't exist returns:

Griddle: Property 'garbage' doesn't exist in row data. Please specify a rowKey that exists in <RowDefinition>
Error: Griddle: Property 'garbage' doesn't exist in row data. Please specify a rowKey that exists in <RowDefinition>
    at transformData (http://localhost:6006/static/preview.bundle.js:37441:12)
    at Object.GRIDDLE_INITIALIZED (http://localhost:6006/static/preview.bundle.js:62761:57)
    at GRIDDLE_INITIALIZED (http://localhost:6006/static/preview.bundle.js:72183:24)
    at http://localhost:6006/static/preview.bundle.js:12051:15
    at http://localhost:6006/static/preview.bundle.js:19989:36
    at callReducerWithBeforeAfterPipe (http://localhost:6006/static/preview.bundle.js:12057:11)
    at reducer (http://localhost:6006/static/preview.bundle.js:12066:13)
    at computeNextEntry (<anonymous>:1:33861)
    at recomputeStates (<anonymous>:1:34161)
    at <anonymous>:1:37746

[dahlbyk]

Yeah, that story is broken by design? Maybe we should just delete it…

Pondering: does anyone know of a way to automate running all stories in a Storybook? Just as a sanity check.

[rkralston]

Haven't heard of anything for testing, maybe fitness?

Line 205 in stories/index.tsx comments // don't do things this way - fine for example storybook and then defines a const events. Later the same thing is done.

I am now using connect, actions, and selectors in a page size component.

For multi-column sorting, I need to call reducers.GRIDDLE_SET_SORT. Since I will need this not just for grouping, but also for pivot tables. My company wants me to drop Griddle and just write it myself. :-(

[dahlbyk]

Line 205 in stories/index.tsx comments // don't do things this way - fine for example storybook and then defines a const events. Later the same thing is done.

You should be able to wire up events through a plugin, too. Though (IMO) events is the weakest part of Griddle, as it's not composable. It's generally better to replace the Enhancer that provides event handlers.

For multi-column sorting, I need to call reducers.GRIDDLE_SET_SORT. Since I will need this not just for grouping, but also for pivot tables.

Do you have a specific question on this? Please ask on Stack Overflow or post a new issue.

My company wants me to drop Griddle and just write it myself. :-(

Just a few hundred hours and you'll be all caught up. 😀

But seriously, Griddle is built to be extensible. If you find it's missing the hooks you need, it's certainly in the project's interest to improve that story. Not sure what @ryanlanciaux & @joellanciaux's situation is, but I just do this for fun. If your company would like to sponsor some work on the project, I'm sure we can figure something out. Certainly cheaper than starting from scratch.