search

BerkeleyTrue / react-material

Material design components written with React.js and React Style
http://berkeleytrue.github.io/react-material
404 stars 38 forks source link

Architecture ideas and contributing #80

Closed TimothyKrell closed 6 years ago

TimothyKrell commented 9 years ago

Following up from conversations on twitter, I'm really interested in contributing to react-material and getting it up to parity with angular material. This is the one thing I miss from Angular.

phated commented 9 years ago

Just 1 comment about inline styles/react-styles/radium - during my attempt at starting some material design components, I tried JSS, and I was very happy with it. Thoughts on actual styles vs inline?

TimothyKrell commented 9 years ago

I'll definitely put in a plug for JSS. I have been using it on my project and liking it. One plus with it is you don't need to have work arounds for keyframe animations or media queries, because you can just add them as normal css into a style tag that is added to the top of the page.

SanderSpies commented 9 years ago

Sorry guys, but React Material isn't going to use JSS or Radium. I'm happy with the current React Style syntax: https://github.com/SanderSpies/react-material/blob/0.13/components/Button.js. Animations should be solved using a JavaScript solution, and react-magician is my attempt at this: https://github.com/SanderSpies/react-magician. This way you can also control animations using touch, which isn't possible with CSS animations. React magician supports the animation part for this, the touch library is something I still need to implement (https://github.com/SanderSpies/momentum is where that will be). Media queries should be implemented inside the render function, a simple Screen.width will do the trick most of the time. I'm still looking for a better solution though - that can be used for both inline styles and css

Layout blocks sound like a great idea, perhaps we can take some inspiration from https://github.com/reactjs/react-future/tree/master/04%20-%20Layout. Preferably using Flex Box, so yes that would mean dropping old IE versions.

Theming is an interesting challenge, something like ReactMaterial.setThemeColors({primary1: Colors.blue.p500, accent: Colors.blue.a100}) would be a great starting point I think? (Inspiration taken from Angular Material).

For testing I would prefer to use Jest as it has good React support out of the box, but not really a strong opinion here.

Let me know what you want to take a shot at, please fork the 0.13 branch (which is the upcoming version with support React 0.13 and new React Style).

TimothyKrell commented 9 years ago

Thanks for the detailed reply. This all sounds great! I like the strategy you outlined for using React style. I'd imagine using react-magician would give the advantage of providing a lot of reusable animations that a user could plug into their own designs.

Just one question on styling: how would we deal with providing base styling for generic html tags (e.g. font sizes and styling for header tags and <p> tags)?

I'd like to get my feet wet by trying to implement some basic, missing components. I need a progress bar in my app currently, but it looks like there is one there already. Does it needs some work or is it pretty much done? What other components do think would be good to start on? I'd also be willing to make the documentation nicer if you can point me in the right direction.

SanderSpies commented 9 years ago

@TimothyKrell ideally we should have components for headers and paragraphs, with default but overridable sizes.

If you look at the Progress Bar: http://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators you'll notice we don't support everything yet. So this could definitely use work :+1:. It could be a good idea to get started with that and see where that goes. It's really up to you what you want to pick up though :-).

I'll be focusing a bit more on the underlying systems, I hope to get something up soonish for touch momentum support.

natew commented 9 years ago

Subbing to this thread

@SanderSpies once I begin work on the material theme, would you mind if I used this repo as a start point (colors and looking at techniques)? The reapp theme structure is pretty well defined so it should be just dropping in, setting constants, etc.

As for animations I use react-tween-state, in combination with a scroller library when necessary. But I'm keeping an eye on magician. I haven't had a need for it yet, but I could see external users using it.

SanderSpies commented 9 years ago

@natew That would be great, if you got good ideas I definitely like to hear them :+1:

BerkeleyTrue commented 9 years ago

I would like to add waffle.io for project manegement. I have comeback to this project only to be turned off due to not knowing the direction this or react-style project is going. If it helps I can set it up. We use it for FreeCodeCamp with lots of success.

SanderSpies commented 9 years ago

@BerkeleyTrue thanks for being honest.

Regarding React Style: a new version will arrive closely after React 0.13 - which React Material will also use. This version will be aligned with the ideas of @vjeux. I'm expecting it to be mostly what's on GH right now inside the inline-styles branch. After this release, I'm hoping to work together with @jscheid to add support for media queries and CSS source-maps. Hope that clarifies where React Style is going :-).

As for React Material, the idea is still the same: recreate the Material Design components mentioned here: http://www.google.com/design/spec/material-design/introduction.html. I want to do this the best way possible, so my work is mostly focused on the underlying systems to enable this for now:

Hopefully this will make it possible to start working on recreating existing Material design applications with preferably no compromises.

If waffle.io helps with clarifying what's happening: let's do that!

Is there anything you would like to work on?

BerkeleyTrue commented 9 years ago

My projects always rely on server side rendering and the last time I attempted to use this project I ran into issues as RM relies heavily on webpack to overload require statement. I would love to revisit this project and make it as bundler agnostic as possible.

If there are no objections I think I will work on that first.

I will also add waffle board to project if no one objections.

SanderSpies commented 9 years ago

@BerkeleyTrue What's RM? I'm not familiair with that term :-).

BerkeleyTrue commented 9 years ago

React Material, sorry.

SanderSpies commented 9 years ago

Lol, that was too obvious. How would you want to make it bundler agnostic? Op 12 mrt. 2015 08:26 schreef "Berkeley Martinez" <notifications@github.com

:

React Material, sorry.

— Reply to this email directly or view it on GitHub https://github.com/SanderSpies/react-material/issues/80#issuecomment-78434676 .

BerkeleyTrue commented 9 years ago

For instance, this will prevent server side rendering and browserify. What I usually do is turn svg icons into react comp that render svg's directly, like so

SanderSpies commented 9 years ago

@BerkeleyTrue - yes, please! (preferably in an automated way :+1: )

BerkeleyTrue commented 9 years ago

Automation will be tough. I will see what I can do. This should all be done in 0.13 branch as well?

SanderSpies commented 9 years ago

Yes please, these are some build issues though (caused by merging https://github.com/SanderSpies/react-material/pull/87).

On Thu, Mar 12, 2015 at 9:20 AM, Berkeley Martinez <notifications@github.com

wrote:

Automation will be tough. I will see what I can do. This should all be done in 0.13 branch as well?

— Reply to this email directly or view it on GitHub https://github.com/SanderSpies/react-material/issues/80#issuecomment-78439436 .

phated commented 9 years ago

@SanderSpies I'm currently using the build from #87, what issues are you seeing?

TimothyKrell commented 9 years ago

Looks like two files were the culprits, preventing webpack from compiling? I created #92 to fix.