Document <Spinner /> <Button /> <Icon /> #196

ptbrowne · 2017-09-27T18:02:55Z

Visible on https://ptbrowne.github.io/cozy-ui/react/

Edited: changed the url to show the result on my repo.

enguerran · 2017-09-28T15:41:48Z

I cannot see anything on the link you give

enguerran · 2017-09-28T15:43:26Z

You create a branch on the cozy repository, is that wanted? Why not a fork?
https://github.com/cozy/cozy-ui/tree/doc-spinner-buttons-icons

enguerran

Too many unexplained changes on the configuration. Need more details to be approved.

enguerran · 2017-09-28T15:44:51Z

docs/styleguide.config.js

@@ -1,8 +1,11 @@
 const path = require('path')

 module.exports = {
-  components: path.resolve(__dirname, '../react/{Button,Toggle}/*.{js,jsx}'),
+  components: path.resolve(__dirname, '../react/{Spinner,Icon,Button,Toggle}/*.{js,jsx}'),


We shall not list components here, if we have 30 000 components, we could not list them anymore, could we?

Exactly what I was talking about here : #180 (review)

I am doing the change

enguerran · 2017-09-28T15:49:32Z

docs/webpack.config.js

@@ -33,5 +34,14 @@ module.exports = {
      }
    ]
  },
-  plugins: [new ExtractTextPlugin('[name].css')]
+  plugins: [
+    new webpack.LoaderOptionsPlugin({


What is the utility to use LoaderOptionsPlugin if we can set an option in the loader itself?

Thanks, good catch, done !

enguerran · 2017-09-28T15:52:06Z

docs/styleguide.config.js

  webpackConfig: require('./webpack.config.js'),
  serverPort: 6161,
-  styleguideDir: path.resolve(__dirname, '../build/react')
+  styleguideDir: path.resolve(__dirname, '../build/react'),
+  require: [


Cannot fund any documentation about require in webpack.
What is used for?

To require additional files : https://react-styleguidist.js.org/docs/configuration.html#require

enguerran · 2017-09-28T15:56:16Z

react/Icon/index.jsx

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { PropTypes as Types } from 'react'


https://facebook.github.io/react/docs/typechecking-with-proptypes.html

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

Unless it's added with preact-compat. But I think to be more reliable, we should depend on the real proptypes module.

On the other hand, I cannot understand why you alias the import.

On the other hand, I cannot understand why you alias the import.

Oh I'm sure you can :D : it is to type les characters. It is fairly common : https://github.com/search?utf8=%E2%9C%93&q=%22PropTypes+as+Types%22&type=Code

What do you mean by to be more reliable ?

preact-compat is using the prop-types module under the hood 👌 https://github.com/developit/preact-compat/blob/master/package.json#L87

We are using preact but to stay more reliable on react, we also use preact-compat.
For instance preact let us declare the render function with props as parameters, react doesn't. So we usen't.

The same goes to PropTypes, since react 15.5, PropTypes has moved to a different package.

If you look at the import part of both below codesandbox, you'll understand:

preact with preact-compat works with import { PropTypes } from "preact"; (https://codesandbox.io/s/2okk0663rp)

react don't (https://codesandbox.io/s/kmj356yp15)

On the other hand, both works with import PropTypes from "prop-types".

In any event, both used the exact same release of prop-types.

ptbrowne · 2017-09-29T14:04:33Z

I cannot see anything on the link you give

True it was a bad idea to push directly on the gh-pages of the cozy/cozy-ui repository. I forked and pushed on my own branch: https://ptbrowne.github.io/cozy-ui/react/.

You create a branch on the cozy repository, is that wanted? Why not a fork?

Because it is tad more complex to manage the fork. Is it a problem if I push on cozy/cozy-ui ?

enguerran

Some remarks.

enguerran · 2017-09-29T14:36:30Z

react/Icon/Readme.md

+<div style={{ background: '#ccc'}}>{Object.keys(icons).map(icon => <span>
+  { icon } : <Icon icon={ icon } color={ colors[i++] } /><br/>
+</span>) }</div>
+```


Two problems here:

paperplane icon missing

Bug from the icon, not from the docs

only the first 4 icons

Thanks, good catch ><

enguerran · 2017-09-29T14:47:34Z

react/Icon/Readme.md

+<div style={{ background: '#ccc'}}>{Object.keys(icons).map(icon => <span>
+  { icon } : <Icon icon={ icon } color={ colors[i++] } /><br/>
+</span>) }</div>
+```


const icons = require('../../src/icons'); const colors = ['red', 'blue', 'yellow', 'green'] let i = 0; <div style={{ background: '#ccc'}}> {Object.keys(icons).map( icon => ( <span>{ icon } : <Icon icon={ icon } color={ colors[i++%colors.length] } /><br/></span> ) )} </div>

See https://codesandbox.io/s/7y0oz2m3v0

good catch !

enguerran · 2017-09-29T14:48:11Z

react/Icon/Readme.md

+<div style={{ background: '#ccc'}}>{Object.keys(icons).map(icon => <span>
+  { icon } : <Icon icon={ icon } color={ colors[i++] } /><br/>
+</span>) }</div>
+```


Beware of the code sample, it lacks a closing parenthesis in the map function.
And format the code as it could be more readable.

no parenthesis lacking here

enguerran · 2017-09-29T14:49:25Z

react/Icon/Readme.md

+
+import myIcon from 'my-icon.svg' 
+
+<Icon icon={ myIcon } width='2rem' height='2rem' color='purple' />


It ain't no purple.

What do you mean it ain't no purple ? Are you testing with an icon with a fill property ?

Oh, I though the icon was the ⚠️
I did not read the doc that explains we need to use svg-sprite-loader.

enguerran · 2017-09-29T14:50:58Z

react/Icon/index.jsx

 Icon.propTypes = {
-  icon: React.PropTypes.string.isRequired
+  icon: Types.oneOfType([Types.string, Types.object]).isRequired
 }


Add other props even if they are not required.
See https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

Thanks i added the properties. I presume you use this eslint configuration in your editor ? The lint command of cozy-ui only uses standard js, maybe you can add eslint ?

enguerran · 2017-09-29T14:51:44Z

react/Spinner/Readme.md

+  white: <Spinner color='white' />
+  red: <Spinner color='red' />
+</div>
+```


I cannot see colored spinner, look at the screenshot below:

It is a bug from the Spinner

enguerran · 2017-09-29T14:53:26Z

react/Spinner/Readme.md

+<div>
+<Spinner noMargin={ true }/>
+</div>
+```


I see no difference with noMargin={true}, see below:

Bug from the spinner

enguerran · 2017-09-29T14:54:19Z

react/Spinner/Readme.md

+  xlarge: <Spinner size='xlarge' /><br/>
+  xxlarge: <Spinner size='xxlarge' />
+</div>
+```


tiny, small and medium are the exact same size, see:

Bug from the spinner

enguerran · 2017-09-29T14:57:20Z

react/Spinner/Readme.md

+
+```jsx static
+<Spinner loadingType='salut' />
+```


I don't want cozy-ui to be dependent on <I18n />.
But maybe, I am alone on this idea.

So please, consider this comment as a non blocking one, we should update later.

By the way, could you find a way to perform a running demo, maybe you can pass through a props like t={word => word}.

IMHO, this is not a problem of the docs.

It allows to display a running demo.

You cannot pass a t like that since it is wrapped into translate. translate overwrites the t property with the t attribute from the context.

enguerran

Don't we need to fix <Spinner /> within the same Pull Request. I don't know.

Ok, for the other changes.

enguerran · 2017-09-29T15:29:46Z

Even if we can improve the demo by fixing <Spinner /> and by adding more running demos, I see no other blocking things for this Pull-Request.

ptbrowne · 2017-09-29T15:33:05Z

Thanks for the thorough review !

ptbrowne force-pushed the doc-spinner-buttons-icons branch 2 times, most recently from 2734cd8 to 0243891 Compare September 27, 2017 18:15

ptbrowne requested a review from CPatchane September 27, 2017 18:15

enguerran suggested changes Sep 28, 2017

View reviewed changes

ptbrowne force-pushed the doc-spinner-buttons-icons branch 2 times, most recently from 8673e6a to 8aaece6 Compare September 29, 2017 13:58

ptbrowne force-pushed the doc-spinner-buttons-icons branch from 8aaece6 to c6afb24 Compare September 29, 2017 14:09

enguerran suggested changes Sep 29, 2017

View reviewed changes

ptbrowne added 6 commits September 29, 2017 17:09

📚 doc: document <Icon /> in styleguide

db0c5ae

🔩 chore: load cozy-ui css in styleguide

5ab88a1

🔧 chore: use glob for components

84b1e63

📚 doc: document <Button /> in styleguide

44d2b6c

📚 doc: document <Spinner />

24bf2de

💄 lint

d13ab23

ptbrowne force-pushed the doc-spinner-buttons-icons branch from c6afb24 to d13ab23 Compare September 29, 2017 15:16

ptbrowne mentioned this pull request Sep 29, 2017

Spinner acts weirdly #197

Closed

3 tasks

enguerran reviewed Sep 29, 2017

View reviewed changes

enguerran approved these changes Sep 29, 2017

View reviewed changes

ptbrowne merged commit 962318e into master Sep 29, 2017

kosssi deleted the doc-spinner-buttons-icons branch September 29, 2017 16:06

		@@ -1,8 +1,10 @@
		import React from 'react'
		import React, { PropTypes as Types } from 'react'


		import myIcon from 'my-icon.svg'

		<Icon icon={ myIcon } width='2rem' height='2rem' color='purple' />

Document <Spinner /> <Button /> <Icon /> #196

Document <Spinner /> <Button /> <Icon /> #196

Conversation

ptbrowne commented Sep 27, 2017 • edited

enguerran commented Sep 28, 2017

enguerran commented Sep 28, 2017

enguerran left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ptbrowne commented Sep 29, 2017

enguerran left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

enguerran left a comment

Choose a reason for hiding this comment

enguerran commented Sep 29, 2017

ptbrowne commented Sep 29, 2017

ptbrowne commented Sep 27, 2017 •

edited