diegohaz / arc

React starter kit based on Atomic Design

Hi there 👋

I'll eventually add something here.

arc's Issues

Use airbnb eslint config

[universal-redux] Global styles applied several times now

After your latest bug fix (moving globalInjects to componentWillMount) global styles are applied several times on the server.

On your demo page (https://arc.diegohaz.com/) the global styles are applied 3 times. In my app which has a little more global styles, they are applied up to 12 times. It seems like this grows over time.

I will investigate a little and post my findings.

Improve grammar on README/website

Well, I'm not a native English speaker, so readme and website may contain some spelling mistakes or sentences that could be written in a better way.

Just as I always try to write correctly in my native language (Portuguese), I do with English. But, well, until I master the language, I will need some help. 😅

I will appreciate very much people doing some review. Also, this is another way for beginners to contribute.

I'm leaving this issue here ad eternum so we can constantly improve that.

[redux] Add confirm modal

Remove sinon dependency

dev script not working in Windows 10

trying to run the 'dev' task in windows was failing for me.
I needed to update the task to the following:
"dev": "concurrently --kill-others "nodemon --watch src" "node webpack/webpack-dev-server"",

npm run build fails on windows10 using node 4.4.2

Follow the Object Rest Destructuring specification

https://github.com/sebmarkbage/ecmascript-rest-spread/blob/master/Rest.md

Currently, we are breaking this rule on some component props destructuring:

let { ...x, y, z } = obj; // syntax error

The components are:

• Input
• Link
• Feature
• IconButton
• IconLink
• Modal
• Table

The solution is probably as simple as changing this:

const Feature = ({ icon, title, link, children, ...props, soon }) => {

to this:

const Feature = ({ icon, title, link, children, ...props }) => {
  const { soon } = props

I'll leave this issue here for a while for the case of someone wants to contribute.

Question about inheritance and atomic design

I've been trying to find examples of structuring really large UI applications and came across arc. I feel like the concepts here are very, very cool!

One thing I'm having trouble trying to figure out is if inheritance can fit into the flow. By inheritance, I mean taking a basic atom (or molecule, organism, template... probably not page) and inheriting all of it's properties while adding in more specific ones.

Let's use the example of a Button atom:

Let's say our Button atom can have several properties. Things like "disabled", "innerContent", "hidden", "color".

These are things that all Buttons in our app need, but what if we have we want to have a button with a more detailed spec. For example, we have lists in our app and there are action buttons in each row of the app:

These buttons need the same properties as our Button atom, but they also have specific requirements like "the button should be a cricle", "the button should have no color unless the user hovers on it", etc.

So on to the actual questions:
Can we create a RowActionButton atom that inherits from our Button atom?
Since the atom is only useful in our ListRow molecule, can we place it in the folder structure within that molecule's specification?

Add Modal component

Using something like react-modal

About directory structure scalability

Hi there,

first of: nice work! I really like the work put into this, the overall consistency and composability is awesome!

Though, I have some concerns about the directory structure, and how it would scale when you' are faced with the reality and more and more components need to be added as either atoms/molecules etc.

Let's say I have several components that mount as content in a modal, the content-components all look and behave differently. So I'd have around 10 'molecule' components that only act as a content placeholder for one specific 'organism' (the Modal component). This doesn't really scale well when you have other 'molecules' that also live within the 'molecules' directory though.

I hope that makes sense so far.

E.g. the folder would look like this:

-- atoms
---- Divider
---- ...etc.
-- molecules
---- ModalContent1
---- ModalContent2
---- ModalContent3
---- ModalContent4
---- ModalContent5
---- ModalContent6
---- ModalContent7
---- ModalContent8
---- ModalContent9
---- ModalContent10
---- Foo
---- Bar
---- Baz
---- ...many many more.

So my idea would be the following: organisms and molecules can have sub-directorys with components that will only be used by them. So it would look like this:

-- organisms
---- Modal
------ index.jsx (entry point of the modal component)
------ molecules (molecules ONLY used by Modal)
-------- ModalContent1
-------- ModalContent2
-------- ModalContent3
-------- ModalContent4
-------- ModalContent5
-------- ...etc.

organisms can have molecules
molecules can have atoms

This would be a scaleable solution imo, and still follow the atom design pattern in a way.

Would love to get some feedback on this. Maybe I'm misunderstanding something big!

In other words, how would one structure/handle components that are special to another component (it will/should never be used by other components).

[redux] Create sagas to handle resolve/reject actions

Currently we are handling resolve/reject on every saga. To reduce the boilerplate, it should be handled by a separated saga, like I did here: https://github.com/tramaLabs/web/blob/39f5b8b31e39d5d604e04ad60cbdf046bc1c6859/src/store/status/sagas.js

import { fork, take } from 'redux-saga/effects'

export function* watchResolveReject () {
  const resolvers = {}
  const rejecters = {}
  while (true) {
    const { type, resolve, reject, ...rest } = yield take('*')
    let [ suffix, ...prefix ] = type.split('_').reverse()
    prefix = prefix.reverse().join('_')
    yield { prefix, suffix }

    switch (suffix) {
    case 'REQUEST':
      resolvers[prefix] = resolve
      rejecters[prefix] = reject
      break
    case 'SUCCESS':
      if (resolvers[prefix]) {
        resolvers[prefix](rest)
        delete resolvers[prefix]
      }
      break
    case 'FAILURE':
      if (rejecters[prefix]) {
        rejecters[prefix](rest)
        delete rejecters[prefix]
      }
    }

    yield { resolvers, rejecters }
  }
}

export default function* () {
  yield fork(watchResolveReject)
}

Update src-clean folder

After the last changes, src-clean got out of sync with src.

Remove React propTypes on the build file

Maybe using something like babel-plugin-transform-react-remove-prop-types

404 on sample page

If you load the sample page directly, it produces a 404. This page is only accessible if you load the homepage, and then navigate to the sample page. Troubling to see this, hopefully the cause is simple, or has to do with GitHub Pages?

Deploy to dist, blank index.html

I did npm run build I looked into the public & dist folder I see a .JS and the index.html but the index is blank. Am I doing something wrong?

Add react-storybook

https://getstorybook.io/

It works like a playground. Since we don't have specific documentation for each component, this is a very good way for people to understand what they can do with ARc components (perhaps better than having docs).

Stories should be placed inside component folder as index.stories.js. I will create the basic setup on a separate branch and start a PR (this will be merged into master). Everyone willing to help writing stories are welcome.

ReferenceError: Proxy is not defined

Getting this error when running npm test.
I have cloned the project, run npm install then npm test

FAIL src/components/molecules/Field/index.test.js
● Test suite failed to run

ReferenceError: Proxy is not defined
  
  at Object.<anonymous> (test/componentsMock.js:10:32)
  at Object.<anonymous> (src/components/molecules/Field/index.js:5:45)
  at Object.<anonymous> (src/components/molecules/Field/index.test.js:3:35)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:87:13)
  at process.emit (events.js:172:7)
  at handleMessage (internal/child_process.js:686:10)
  at Pipe.channel.onread (internal/child_process.js:440:11)

In componentsMock.js
There is a use of Proxy object but it is not imported.

Reverse colors on globals.js

Currently we are using Array.prototype.reverse() at runtime on many styles. This should be static and defined on globals.js. Something like:

export const reverseColors = {}

Object.keys(colors).forEach((key) => {
  reverseColors[key] = [ ...colors[key] ].reverse()
})

[redux] import takeEvery from 'redux-saga' has been deprecated

import takeEvery from 'redux-saga' has been deprecated in favor of import takeEvery from 'redux-saga/effects'.
The latter will not work with yield*, as helper effects are wrapped automatically for you in fork effect.
Therefore yield takeEvery will return task descriptor to your saga and execute next lines of code.

[universal-redux] Nodemon restarts all the time

Change

"dev": "concurrently --kill-others 'nodemon .' 'node webpack/webpack-dev-server'",

to

"dev": "concurrently --kill-others 'nodemon --watch src' 'node webpack/webpack-dev-server'",

so it watches only the src directory.

[redux|universal-redux] Put routing side effects on sagas

Move this snippet to sagas (possibly listening to the LOCATION_CHANGE action).

Thoughts on ImmutableJs

I am integrating react-virtualized into my site. In their docs they are using ImmutableJs a lot. It looks very handy for comparing data sets.

I was wondering what's your opinion on adding it to the boilerplate? Are you using lodash for these types of things?

[universal-redux] Hydrate store "on page load"

I would like to hydrate my store with user data "on page load" (meaning: before initial render). Basically something like that:

if sessionCookie {
    call api to get user data and put into store
} 

That code should be shared with the application so I can reuse it for the login form.

I am not sure when and how to do this with server side rendering. My thoughts are:

• It feels like this should happen in a saga. But how do I run this saga before initial render?
• Should it run on the server? I think yes
• Alternatively I could use my own Api for login that shares the code with SSR

It would be great if you could give me your thoughts.

Add Dropdown Components

I've found your organization and composition of components to be very helpful to my own work. To that end, I'd love to see your take on building a couple of dropdown controls.

I've got a simple dropdown component that renders out basic HTML select/options list and also a more complex one that takes in an item renderer component for more custom dropdowns.

I came here hoping to see how you would have implemented them and was disappointed to not find one in your current library.

Add Input range/slider

Add a component to render a <input type="range"> component with a nice UI.

How to scale multiple forms?

I'm playing through the universal redux example and I'm curious what the proper way to scale the application to have potentially dozens of forms?

Would you reuse the forms actions but have a different container for each form?

[redux] Add a store naming conventions section to README

Explain the naming conventions used in store code

[universal-redux] How to apply global styles?

Awesome boilerplate!

Until today I was using the master branch to work on components. Like in your examples I was using injectGlobal from styled-components to add webfonts, root font size and some base styles for html and body elements.

Today I decided to try the server side rendering branch. I realised that injectGlobal runs on page load. That causes a small glitch in the UI because the browser first displays the page without said styles and then injects them only after first render.

Using a styles.css solves that issue. I was wondering if you have a better solution to that?

Animate Tooltip

Also, replace some rems to ems

Replace rem by em on Heading component

arc/src/components/atoms/Heading/index.js

Lines 14 to 15 in c92f79b

	margin-top: ${1 + 0.5 * (1 / level)}rem;
	margin-bottom: ${0.5 + 0.5 * (1 / level)}rem;

Replace rem by em without changing its visual.

Add webpack loaders to storybook webpack config

We need to add something like this

storybookBaseConfig.module.loaders.push(...baseConfig.module.loaders)

to https://github.com/diegohaz/arc/blob/master/.storybook/webpack.config.js so our custom loaders could be used in storybook. The boilerplate itself doesn't need this, but one importing different things (e.g. import 'image.png') will do.

I'm just leaving it here in the case of someone wants to contribute.

Use styled-theme

https://github.com/diegohaz/styled-theme

Update src-clean folders

Some are not in sync with src like services/api in redux branch.

[master] browser caches js files

Since js file name always remain app.js, browser caches it and we manually need to invalidate the cache when loading the application.

Update react-router

react-router-redux is already supporting react-router v3

[redux] Add normalizr

https://github.com/paularmstrong/normalizr

About command "clean"

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\laragon\\bin\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
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: C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\Administrator\Desktop\ccb\generator-reactpackage\scaff\node_modules\.bin;C:\Users\Administrator\AppData\Roaming\npm;C:\laragon\bin\cmder\vendor\telnet;C:\laragon\bin\cmder\vendor\putty;C:\Users\Administrator\AppData\Roaming\Composer\vendor\bin;C:\laragon\bin\mysql\mariadb-10.1.9\bin;C:\laragon\bin\php\php-7.0.12-Win32-VC14-x86;C:\laragon\bin\composer;C:\laragon\bin\apache\httpd-2.4.23-win32-VC14\bin;C:\laragon\bin\redis\redis-2.8.17;C:\laragon\bin\memcached\memcached-1.4.5;C:\laragon\bin\nodejs;C:\laragon\bin\nginx\nginx-1.10.1;C:\laragon\bin\notepad++;C:\laragon\bin\telnet;C:\laragon\bin\sublime;C:\laragon\bin\ngrok;C:\laragon\bin\sendmail;C:\laragon\bin\winscp;C:\laragon\bin\git\bin;C:\laragon\bin\git\cmd;C:\laragon\bin\git\usr\bin;C:\laragon\bin\git\mingw32\bin;C:\laragon\bin;C:\laragon\usr\bin;C:\laragon\bin\putty;C:\laragon\bin\cmder\bin;C:\ProgramData\Oracle\Java\javapath;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Java\jdk1.8.0_111\bin;C:\Program Files (x86)\Java\jdk1.8.0_111\jre\bin;C:\Program Files\TortoiseSVN\bin;C:\laragon\bin\git\bin;C:\laragon\bin\php\php-7.0.12-Win32-VC14-x86;C:\laragon\bin\composer;C:\laragon\bin\nodejs;C:\Users\Administrator\AppData\Roaming\npm;C:\Users\Administrator\AppData\Local\Microsoft\WindowsApps;C:\Users\Administrator\AppData\Local\atom\bin;;C:\Program Files (x86)\SSH Communications Security\SSH Secure Shell;C:\laragon\bin\cmder\;
10 verbose lifecycle [email protected]~build: CWD: C:\Users\Administrator\Desktop\ccb\generator-reactpackage\scaff
11 silly lifecycle [email protected]~build: Args: [ '/d /s /c',
11 silly lifecycle   'npm run clean && npm run copy && cross-env NODE_ENV=production webpack' ]
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: `npm run clean && npm run copy && cross-env NODE_ENV=production webpack`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:279: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> (C:\Users\Administrator\AppData\Roaming\npm\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 C:\Users\Administrator\Desktop\ccb\generator-reactpackage\scaff
17 error Windows_NT 10.0.14393
18 error argv "C:\\laragon\\bin\\nodejs\\node.exe" "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
19 error node v6.9.1
20 error npm  v4.0.5
21 error code ELIFECYCLE
22 error [email protected] build: `npm run clean && npm run copy && cross-env NODE_ENV=production webpack`
22 error Exit status 1
23 error Failed at the [email protected] build script 'npm run clean && npm run copy && cross-env NODE_ENV=production webpack'.
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 arc package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     npm run clean && npm run copy && cross-env NODE_ENV=production webpack
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs arc
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls arc
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

when I run "npm run build",I got this error.
who can tell me what happend?

[redux] Add auth flow

Like this: https://github.com/tramaLabs/web/blob/39f5b8b31e39d5d604e04ad60cbdf046bc1c6859/src/store/auth/sagas.js

[redux] Add actionsMock

If one wants to import store/actions.js on tests, we need to mock this file. This snippet should work:

const snakeCase = require('lodash/snakeCase')

const action = (prefix) => new Proxy({}, {
  get: (target, suffix) => () => ({
    type: snakeCase(`${prefix}_${suffix}`).toUpperCase()
  }),
  apply: (target, thisArg, argumentsList) => () => ({
    type: snakeCase(prefix).toUpperCase()
  })
})

const actions = new Proxy({}, {
  get: (target, property) => {
    if (/^[A-Z_]+$/.test(property)) {
      return property
    }
    return action(property)
  }
})

module.exports = actions

[redux] Add Facebook Login Button component

This is required for #31

[universal-redux] Webfonts, how to?

My first thought was to use injectGlobal from styled-components in the App.js file and copying the font to the ./public folder.

injectGlobal`
  @font-face {
    font-family: 'Avenir';
    src:  url('/avenir-roman.woff2') format('woff2'),
          url('/avenir-roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
`

(Outside the component, see #11)

This somehow seems to cause problems in chrome (not in safari and FF though). Let me try to explain:

1. When opening my index route (rendered on the server) the browser loads the font (initiated from the index html file) and displays the text correctly.
2. Then I click on a link that leads to a different route: injectGlobal from app.js runs and the font gets downloaded again (because the initiator is app.js this time). The result is that chrome renders all text that uses the font as transparent.

This seems like a bug in chrome. Is there a better way to load fonts?
(I guess falling back to the styles.css file is always an option)

Make a small refactoring on component tests

Currently we have some tests written in this way:

expect(wrapper.find({ id: 'foo' }).length).toBeGreaterThan(0)

It's more readable to change it to:

expect(wrapper.find({ id: 'foo' })).toHaveLength(1)

Explain what the template components are

It's not so clear to people who are new to Atomic Design what the templates are, how they can be implemented in React and why it's a good practice to adopt them. Actually, what I see is that people simply remove the folder and don't use it at all.

A brief explanation in README might help.

[universal-redux] Not found page

Hi diegohaz, Great boilerplate!
By the way, could you give some example or proper way to render not found page when fetching non existing data from API?

[redux] Split store

Currently all files from store are imported and exported by src/store/index.js, but the way this is being done seems hacky and may cause some circular dependency conflicts.

I think it would be better to split that into separate files like I did here: https://github.com/tramaLabs/web/tree/23d2f6a17e411034e78f782dfe7d25264dd75d25/src/store

Rename component files to index.js

Example:

├── atoms
│   ├── Badge
│   │   ├── index.js
│   │   └── index.test.js
│   ├── Button
│   │   ├── index.js
│   │   └── index.test.js

It should be easier to rename/duplicate components.

Please, test generator-arc

Hi, guys, recently I've released the generator-arc branch.

I have big plans for it, but first I need to make sure this is stable. I'll really appreciate if you guys start to use it on your projects and give your feedback.

It should work even if you aren't using ARc, at least yo arc:component --ours, which clones an actual component of yours and automates the process to create a new one.

Just npm install -g yo generator-arc, go to your project root and yo arc:component --ours (or --theirs if you want to grab any ARc's component).

[fullstack] not start after install using instructions from the readme.md

The problem

i have no idea how to start

env info:

osx 10.11.6

Create a minimal src folder

For those who don't want to start with a lot of predefined components and tests, put together with the boilerplate a src-minimal folder with only the minimal code required to start the development of the app (some Hello World code) so one can just rename it to src (and rename the older one to something else, like src-example) to use it.

The src-example could be removed or left there as it will no longer be part of the build process.