grommet / grommet-ferret

Example application using grommet

Grommet: focus on the essential experience

Documentation

Visit the Grommet website for more information.

Support / Contributing

Before opening an issue or pull request, please read the Contributing guide.

Install

You can install Grommet using either of the methods given below.

For npm users:

  $ npm install grommet styled-components --save

For Yarn users:

  $ yarn add grommet styled-components

There are more detailed instructions in the Grommet Starter app tutorial for new apps. For incorporating Grommet into an existing app, see the Existing App version.

Explore

1. Storybook examples per component, you can create them locally by running:

     $ npm run storybook

   or

     $ yarn storybook

2. Grommet starter template sandbox.

3. Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.

4. End-to-end project examples from our community in the #i-made-this Slack channel.

5. Read more from the Grommet team on Medium.

Stable

grommet is also available on a stable branch that is built with the content of the 'master' branch. From your package.json point to stable.

"grommet": "https://github.com/grommet/grommet/tarball/stable",

For more info, read the stable wiki.

Release History

See the Change Log.

Tools Behind Grommet

Grommet is produced using this great tool:

• BrowserStack for browser emulators and simulators.
• Circle CI for continuous integration.

grommet-ferret's Issues

Filter expands the whole window

App is not working - well it has several issues

This has been working fine, then yesterday the Nav sidebar, check boxes from the filter and several other areas stopped working. You can click them all day but nothing happens. Also in places like the enclosure screen the content bleeds through the header when scrolling (see screenshot). We using this as a reference foundation since the Grommet docs are not great and are lacking integration examples, so it would be nice if it could get fixed.

Screenshot of screen bleed

IE11 hangs after being initialized

After starting the dev server, browse to the ferret app. It indicates that it is being initialized. Once it is initialized, the Settings page is displayed. Press Submit to display the configuration page (see screenshot below).

This page stays on 0% and never gets updated.

ferret will start up correctly if you browse to the app using chrome. Once the app has been configured in chrome, you can successfully browse to it using IE11 as well.

npm run build failing

Just doing an npm run build after running npm run install is giving the following error.

[email protected] build C:\Users\aaa\Downloads\grommet-ferret-master\grommet-ferret-master
gulp dist

[01:42:53] Requiring external module babel-register
C:\Users\aaa\Downloads\grommet-ferret-master\grommet-ferret-master\node_modules\require-dir\index.js:93
if (!require.extensions.hasOwnProperty(ext)) {
^

TypeError: require.extensions.hasOwnProperty is not a function
at requireDir (C:\Users\aaa\Downloads\grommet-ferret-master\grommet-ferret-master\node_modules\require-dir\index.j
s:93:37)
at Object. (C:\Users\aaa\Downloads\grommet-ferret-master\grommet-ferret-master\node_modules\gulp-git\in
dex.js:4:18)
at Module._compile (module.js:641:30)
at Module._extensions..js (module.js:652:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\aaa\Downloads\grommet-ferret-master\grommet-f
erret-master\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
at Object. (C:/Users/aaa/Downloads/grommet-ferret-master/grommet-ferret-master/gulpfile.babel.js:4:1)
at Module._compile (module.js:641:30)
at loader (C:\Users\aaa\Downloads\grommet-ferret-master\grommet-ferret-master\node_modules\babel-register\lib\node
.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\aaa\Downloads\grommet-ferret-master\grommet-f
erret-master\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: gulp dist
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\aaa\AppData\Roaming\npm-cache_logs\2017-11-23T07_42_55_364Z-debug.log

README File Error

Modular Grommet points to a blank screen.

http://www.grommet.io/docs/documentation/modular-grommet

Create updated example app and deprecate Ferret

The animation doesn't work on IE11

Below animation doesn't work on IE11.
grommet-ferret/src/index.html

NWJS

I have tried to follow the procedures to run grommet-ferret in the latest NWJS (0.19.5 SDK) and get as far as NW launching and showing a window with the logo repeatedly drawing in the center. I had to make some changes to package.json to reference index.html rather than main.html. Are those instructions up-to-date and complete?

run `gulp test` failed.

I add a test case to test actions.js. configured testPaths in gulpfile.js.

when I run gulp test. it failed.

$ gulp test
[01:06:24] Using gulpfile c:\git\grommet-ferret\gulpfile.js
[01:06:24] Starting 'test'...
[01:06:32] 'test' errored after 8.1 s
[01:06:32] Invariant Violation: Browser history needs a DOM
    at Object.invariant [as default] (c:\git\grommet-ferret\node_modules\invaria
nt\invariant.js:42:15)
    at createBrowserHistory (c:\git\grommet-ferret\node_modules\history\lib\crea
teBrowserHistory.js:41:100)
    at c:\git\grommet-ferret\node_modules\history\lib\useQueries.js:55:19
    at Object.<anonymous> (c:\git\grommet-ferret\src\js\RouteHistory.js:9:267)
    at Module._compile (module.js:398:26)
    at Object.moduleLoader [as .js] (c:\git\grommet-ferret\node_modules\grommet\
node_modules\gulp-jsx-coverage\index.js:159:16)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)

it looks like RouteHistory.js need run in browser.

I added the following code to the head of gulpfile.js to workaround this problem.

var jsdom = require("jsdom-no-contextify").jsdom;
global.document = jsdom('<html><body></body></html>');
global.window = document.defaultView;
global.navigator = {
  userAgent: 'node.js'
};

it still failed

$ gulp test
[SECURITY] node-uuid: crypto not usable, falling back to insecure Math.random()
[01:37:55] Using gulpfile c:\git\grommet-ferret\gulpfile.js
[01:37:55] Starting 'test'...
[01:38:00] 'test' errored after 5.15 s
[01:38:00] Error: Cannot find module 'index.scss'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (c:\git\grommet-ferret\src\js\index.js:3:1)
    at Module._compile (module.js:398:26)
    at Object.moduleLoader [as .js] (c:\git\grommet-ferret\node_modules\gulp-jsx
-coverage\index.js:159:16)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)

Could ferret provide a runnable test case sample? Thanks!

ERROR in ./~/grommet/~/css-loader!./~/grommet/~/sass-loader

cloned from https://github.com/grommet/grommet-ferret.git,

ran npm install at Grommet root folder as well (/usr/lib/node_modules/grommet and ./grommet-ferret/node_modules/grommet) .

$ cd server
$ gulp dev

and from other terminal i started grommet-ferret# gulp dev

and getting
ERROR in ./src/js/components/SessionMenu.js
Module not found: Error: Cannot resolve module 'react-gravatar' in /root/arungm/grommet-ferret/src/js/components
@ ./src/js/components/SessionMenu.js 27:21-46

ERROR in .//grommet//css-loader!.//grommet//sass-loader?outputStyle=expanded&includePaths[]=%2Froot%2Farungm%2Fgrommet-ferret%2Fnode_modules&includePaths[]=%2Froot%2Farungm%2Fgrommet-ferret%2Fnode_modules%2Fgrommet%2Fnode_modules!./src/scss/index.scss
Module build failed:
@include inuit-font-size($label-font-size);
^
Undefined variable: "$label-font-size".
in /root/arungm/grommet-ferret/node_modules/grommet-index/scss/grommet-index/_objects.index.scss (line 20, column 32)
@ ./src/scss/index.scss 4:14-338 13:2-17:4 14:20-344

i'm using :14.04.1-Ubuntu x86_64

Do we have a example about how to use Localization?

I want to know how to use localization in component.

it works with FormattedMessage in react-intl? is it the right way in grommet?

<FormattedMessage
     id="Ferret"
     defaultMessage="Ferret"
/>

Thanks!

gulp dev is not working

Hi,

I am a hpe employee from India.
I am using grommet 0.4.0 in windows for one of our internal project POC. I have downloaded the latest grommet-ferret code and built.
When I do development build using gulp dev, the login page is opening and after login it gives the below error.

WebSocket connection to 'ws://localhost:8010/rest/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

But if I do gulp dist and start the server manually it works fine.

Could you please resolve this issue?

Thanks
Dhamo

Question: should I decouple Component with Actions?

In Items.js, we import action create method from action.js directly. it seems violate the suggestions in Smart and Dumb Components.

Should I use a smart component to wrap Items.js in my project? is there any concern? if Items.js get callback from this.props, it would be easier to write the unit test.

ps: Is there other place to post my question?

Resize to tablet width. The 'Server Hardware' dashboard first column is not displayed properly

Transferring from grommet/grommet#299

OnMore Lazy Loading issue on Table Component when it is on Layer

It is observed that onMore event is trigger anytime we scroll (up or down) and it is not just triggering when we scroll down and release.
Table component onMore is triggering correctly when we scroll at the bottom of page and release, but it works until there is an enough space left at the bottom after that it stops triggering onMore event, we are trying to implement Lazy loading with this.
Please let me know if there is any settings which will trigger onMore only in case we scroll at the bottom of page and release???
Find code pen for the same
http://codepen.io/avadhutk/pen/BQebrj?editors=0010

Link to Live Demo not working

Logo icon missing, unable to reopen sidebar

With the logo icon missing, there's nothing to click to reopen the sidebar.

Enclosure detail cannot be opened.

click one enclosure in enclosure list. nothing happen.

error message in console.

Uncaught ReferenceError: index is not defined                        Tiles.js:185

it looks like code in gremmet-index/components/Tiles.js was changed.

    key: 'render',
    value: function render() {
      var classes = [CLASS_ROOT];
      if (this.props.className) {
        classes.push(this.props.className);
      }

      var tiles = undefined;
      var selectionIndex = undefined;
      if (this.props.result && this.props.result.items) {
        tiles = this.props.result.items.map(function (item) {
          if (this.props.selection && item.uri === this.props.selection) {
            selectionIndex = index;                        // line 185
          }
          return this._renderTile(item);
        }, this);
      }

      var onMore = undefined;
      if (this.props.result && this.props.result.count < this.props.result.total) {
        onMore = this.props.onMore;
      }

      return _react2['default'].createElement(
        _grommetComponentsTiles2['default'],
        { className: classes.join(' '), onMore: onMore, flush: true,
          selectable: this.props.onSelect || false,
          selected: selectionIndex,
          size: this.props.size },
        tiles
      );
    }

Cannot load app after following the README

I have followed the README instructions to download the code, get the modules and start both the server and the client but when I do so the client stays on the loading screen.

I get the following error in the command line for the client:

ERROR in ./src/js/index.js
Module not found: Error: Cannot resolve module 'react-intl/lib/locale-data/en' in C:\Users\raffertd\grommet-ferret\src\js
@ ./src/js/index.js 31:10-50

questions: in below code, how does pane2 get resolved to dashboard component?

var pane1 = navActive ? : null;
var pane2 = this.props.children;

return (
  <App centered={false}>
    <Split flex="right" onResponsive={this._onResponsive} priority="left">
      {pane1}
      {pane2}
    </Split>
  </App>
);

Duplicate [path] variable in server.js

There were 2 var path defined in the server.js.

`var path = require('path');

var PORT = process.env.PORT || 8010;

var app = express();

app.use(ddos.express);

app.use(compression());

app.use(cookieParser());

app.use(morgan('dev'));

app.use(bodyParser.json());

var path = require('path');`

localhost:8010 is a logo?

All I get from
http://localhost:8010/ OR http://localhost:8010/rest is the logo.

Is this suppose to happen?

Table header layout

When I open the "Activity" tab for the first time, there is a layout issue for the last 3 column headers(see attached img). Initially they are displayed properly, but then the content of the table is moved abit to the right and this causes the issue. If you click for example on the header or resize the window, the issue dissapears. I also inspected the element and noticed that there is a table(class="table__mirror") that contains only the header, if I delete this element the issue is gone again.
It is reproducible only when the "Activity" tab is open for the first time.
This isue is also reproducible on a local application which uses the index component.

Reproduced on: Chrome 47

App encounters error on start (Meter.js)

When starting up the app locally using gulp dev, my console displays the following message: Meter.js:358 Uncaught TypeError: Cannot read property 'onClick' of undefined

The page shows "App Ready" but nothing else loads up.

Opening the sidebar splits the application vertically in mobile view

Please check the screenshots,

1. Before opening the sidebar,
   

2. After opening the sidebar
   

3. After scrolling down
   

question： why there is no reducer to handle INDEX_NAV, did i miss anything?

greped reducers directory and got nothing there. :(

Can't run app

I am trying to run the application, but I get this: Error: ENOENT: no such file or directory, stat '/Users/marcospoot/Documents/grum/dist/index.html'
(I beginner in reactjs)

Unable to start the server.

Need help to run this project.

1. There is no dev task in gulpfile.js.
2. gulp dist is throwing error.

[13:51:41] Requiring external module babel-register
C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180
throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i, dirname));
^

ReferenceError: Unknown plugin "react-hot-loader/babel" specified in "C:\Users\singmaya\Documents\GitHub\grommet-ferret\.babelrc" at 1, attempted to resolve relative to "C:\Users\singmaya\Documents\GitHub\grommet-ferret"
at C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:233:36)
at OptionManager.init (C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\options\option-manager.js:367:12)
at compile (C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\lib\node.js:103:45)
at loader (C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\singmaya\Documents\GitHub\grommet-ferret\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:487:32)

Error: Cannot resolve module 'grommet/components/icons/Clear'

Running gulp dev from master of grommet-ferret returns an Error:

the output shows 482 components build but one has an error

[463] ./src/js/components/server-profiles/ServerProfileForm.js 25.9 kB {0} [built] [1 error]

ERROR in ./src/js/components/server-profiles/ServerProfileForm.js
Module not found: Error: Cannot resolve module 'grommet/components/icons/Clear' in /root/grommet/grommet-ferret-master/src/js/components/server-profiles
 @ ./src/js/components/server-profiles/ServerProfileForm.js 63:13-54

Following this the app starts but only the grommet logo is displayed.

I checked and sure enough grommet/components/icons/Clear does not exist .... So I modified ServerProfileForm.js to point to a file that does exist, restarted with gulp dev and the app loaded fine i.e. all 482 components including:

[463] ./src/js/components/server-profiles/ServerProfileForm.js 25.9 kB {0} [built]

The question is should the file grommet/components/icons/Clear exist, am I missing a dependency? Or has it been replaced and /src/js/components/server-profiles/ServerProfileForm.js needs updating?

My setup:

OS: Centos 7.1
Node: 6.0.0
NPM: 3.8.6
Python: 2.7.5
gulp: CLI version 3.9.1
grommet 3.8.6

README.md: invalid link to Getting Started

Link "Modular Grommet" in README.md (section "How To", L11) points to a non-existing resource.

Currently, it is

http://grommet.io/docs/develop/get-started

Looks like it should be

http://grommet.io/docs/get-started

or, perhaps

http://grommet.io/docs/architecture

Failing to build with Babel errors

I have updated the Node (NPM) packages to the latest. First I tried to build and run as is but that failed.

With the latest Node (NPM) packages, I'm getting the following error:

nrydevops@cloudshell:~/grommet-ferret (nrydevops)$ npm run build

> [email protected] build /home/nrydevops/grommet-ferret
> gulp dist

[15:07:18] Requiring external module babel-register
assert.js:350
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (/home/nrydevops/grommet-ferret/node_modules/undertaker/lib/set-task.js:10:3)
    at Gulp.task (/home/nrydevops/grommet-ferret/node_modules/undertaker/lib/task.js:13:8)
    at Object.<anonymous> (/home/nrydevops/grommet-ferret/gulpfile.babel.js:26:6)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at loader (/home/nrydevops/grommet-ferret/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/nrydevops/grommet-ferret/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at execute (/home/nrydevops/grommet-ferret/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
    at Liftoff.handleArguments (/home/nrydevops/grommet-ferret/node_modules/gulp/node_modules/gulp-cli/index.js:201:24)
    at Liftoff.execute (/home/nrydevops/grommet-ferret/node_modules/gulp/node_modules/liftoff/index.js:201:12)
    at module.exports (/home/nrydevops/grommet-ferret/node_modules/flagged-respawn/index.js:51:3)
    at Liftoff.<anonymous> (/home/nrydevops/grommet-ferret/node_modules/gulp/node_modules/liftoff/index.js:191:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gulp dist`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nrydevops/.npm/_logs/2019-12-27T20_07_45_608Z-debug.log
nrydevops@cloudshell:~/grommet-ferret (nrydevops)$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

I think this is a really awesome demo of Grommet, and I would really like to update it to V2.

Application start up issue

After the $ npm install, I am able to start the dev env using $ gulp dev ...
but when I open the browser, I get this error:

Uncaught SyntaxError: Unexpected token <

Upon inspection, it is reporting the first line in Index.js

My versions are:
Node - v5.10.1
Npm - 3.8.3

Please help!