aruberto / react-foundation-components

Foundation Sites 6 components implemented in React with CSS Modules!

react-foundation-components

Foundation Sites 6 components implemented in React and compatible with CSS Modules!

Why?

I like React. I like CSS Modules. I like Foundation Sites. This is an experiment to see if it's possible to combine all these tools in a modular way!

Installation

npm install --save react-foundation-components

Each component uses local scoped CSS by requiring the subset of the Foundation stylesheets it needs.

Documentation (in progress) or demos of the components are available at http://aruberto.github.io/react-foundation-components. Please look at https://github.com/aruberto/react-foundation-components/tree/master/docs for an example webpack setup and example use of each component.

You can also look at https://github.com/aruberto/react-foundation-components/tree/master/examples/css-modules as an example project that uses CSS Modules with this library.

If you want to use CSS modules and customize Foundation at the same time, look at https://github.com/aruberto/react-foundation-components/tree/master/examples/css-modules-custom which uses https://www.npmjs.com/package/jsontosass-loader to inject sass variables that override Foundation's default settings.

Recommend importing on a per component basis instead of importing the main entry point of package. Importing main entry point will cause final bundle to include all CSS and JS whereas importing on a per component basis will cause your final bundle to only include the CSS and JS you actually need (this may change when tree shaking is introduced in webpack 2)!

Favor

import Button from 'react-foundation-components/lib/button';
import { ShowForScreenSize, HideForScreenSize } from 'react-foundation-components/lib/visibility';

over

import { Button, ShowForScreenSize, HideForScreenSize } from 'react-foundation-components';

If you can't use CSS Modules, a set of components that use Foundation's global scoped class names are also provided. These are located under react-foundation-components/lib/global. To import Button that uses global scoped class names:

import Button from 'react-foundation-components/lib/global/button';
import { ShowForScreenSize, HideForScreenSize } from 'react-foundation-components/lib/global/visibility';

If you use the components under react-foundation-components/lib/global, you are responsible for loading Foundation CSS stylesheet. You can do this in a few ways:

• include stylesheet such as https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.min.css in head of your html with CDN link
• Import/Require react-foundation-components/lib/_foundation.scss
• Use https://www.npmjs.com/package/foundation-sites-loader

Here are some example applications that use global scoped class name components:

• Uses Foundation from CDN - https://github.com/aruberto/react-foundation-components/tree/master/examples/cdn
• Uses Foundation (Flexbox Version) from CDN - https://github.com/aruberto/react-foundation-components/tree/master/examples/cdn-flex
• Requires react-foundation-components/lib/_foundation.scss with global-flexbox set to false - https://github.com/aruberto/react-foundation-components/tree/master/examples/global
• Requires react-foundation-components/lib/_foundation.scss with global-flexbox set to true - https://github.com/aruberto/react-foundation-components/tree/master/examples/global-flex

Thanks

A lot of the components are inspired by React Bootstrap and this project even makes heavy use their utility libraries like react-overlays, dom-helpers, prop-types-extra and uncontrollable. So big thanks to all these project's contributers for all their amazing work!

react-foundation-components's Issues

NPM audit HIGH vulnerability in dependencies

High: Cross-Site Scripting (XSS)
Package: jquery
Patched in: >=3.0.0
Dependency of: react-foundation-components
Path: react-foundation-components > foundation-sites > jquery
More info: https://npmjs.com/advisories/328

Slider

Skipped this in the controls section since it seems like the most complex component in the entire suite. Currently don't have a need for it, so deferring it for now. This may be good research material.

Orbit vs Owl Carousel

The Foundation Orbit Docs recommend using Owl Carousel since Owl is much more robust compared to Orbit's limited functionality. Is it worth spending time implementing Orbit? Or perhaps try and implement Owl Carousel instead?

Tob Bar Input Modifiers

Figure out what these are used for and if possible to handle this scenario in modular way. These CSS rules break modularity, may not be possible to support this.

  .input-group-field {
    width: 100%;
    margin-#{$global-right}: 0;
  }

  // scss-lint:disable QualifyingElement
  input.button {
    width: auto;
  }

Size of search input incorrect

I am trying out the tob-bar example/documentation.

When I do this, I get a topbar that looks like this:

http://i.stack.imgur.com/XSiWW.png

On the foundation example site: http://foundation.zurb.com/sites/docs/top-bar.html
there is a notable difference: The size of the search input.

So some css is missing, and I think it is this, taken from the example sites css:

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 2.4375rem;
    padding: 0.5rem;
    border: 1px solid #cacaca;
    margin: 0 0 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: #0a0a0a;
    background-color: #fefefe;
    -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    border-radius: 0;
    -webkit-transition: -webkit-box-shadow 0.5s, border-color 0.25s ease-in-out;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
}

Why is this not included, what do I have to do?

Tabs Header Position

Currently Tabs Header is always above Tabs Content.

Need to come up with a good way to integrate a grid so that Tabs Header can appear to left or right of Tabs Content like example shown http://foundation.zurb.com/sites/docs/tabs.html#vertical-tabs

This may require creating a separate Flex version of Tabs components so that user can pick between using a float grid and flex grid.

Foundation Default Mixins are not changeable

I want to change the form-input-error mixin to get a custom background-lighten value. I've tried to add both, "background-lighten": "1" and
"form-input-error": { "background": "blue", "background-lighten": "1" }
to the theme.json, as provided in the example at css-modules-custom, but no changes where shown. A simple "input-background-invalid": "blue", does change the border color, but results in a default 10% background-color for the input field.

Is it possible to change the background-lighten value?

LinkWithDropdown: how to close overlay by select one of their option

Hello,

I need to hide dropdown overlay if i click outside them or click on one of their option, how i can do this?

Thank you!

Issue with global styles

lib/global/visibility/index.js

var _createWrapperComponent = require('../util/create-wrapper-component');

should be

var _createWrapperComponent = require('../../util/create-wrapper-component');

Complete Forms

Implement:

• Fieldset
• progress
• meter

Unknown Prop warnings in React 15.2

@aruberto getting warnings about props being passed into a div.
<div horizontalAlignment={} />
Seems like a behavior caused by createWrapperComponent when using the flex grid.

Please advise.

FormFieldInput (error is a bool) and redux-form (error is string)

Any chance of changing the error property of the FormFieldInput (probably other form controls) from bool to any? redux-form puts a string as the value for the error property. Something else might set an object?

LinkWithDropdown dropdownAlignment="right" is not aligned properly, see the screenshots below

Here is how it looks now:

It used to be looking like this:

Example starter applications

Provide example application setups

LinkWithDropdown cannot be closed programmatically (or I can't find a way to do this, please help)

How can I create my own components with css modules styling?

Can you provide an example with more styling than only changing the theme colors?

thanks
Andreas

[Reveal] overlay prop should accept 'static' as value

This jsx code

<Reveal onHide={() => this.setState({show: false})} show={this.state.show} overlay="static">
  <p>Content</p>
</Reveal>

Raises a warning in React 15.0.1:

Warning: Failed prop type: Invalid prop `overlay` of type `string` supplied to `Reveal`, expected `boolean`.

The Reveal overlay prop value is passed to the backdrop prop of the underlying Modal component from react-overlays. This backdrop prop accepts boolean values and the string 'static'.
See react-overlay Modal propTypes

This special 'static' value is used when a click on the overlay should not close the modal (same as a {closeOnClick: false} option in the reveal foundation plugin)

Customizable SASS

Provide a mechanism to be able to tweak Foundation SASS settings and/or provide custom styling.

Babel + Webpack Integration

Hello,

First of all, awesome work you've done, but i'm trying to integrate your components with react-starter-kit and i'm getting the following error:

/Users/<user>/Projects/<project>/node_modules/react-foundation-components/lib/top-bar/_styles.scss:1
(function (exports, require, module, __filename, __dirname) { @import '../common';
                                                              ^
SyntaxError: Invalid or unexpected token

Documentation

Convert the demo app into a doc site since demo app contains example of pretty much every use case would want in docs. Need a getting started page explaining how to setup webpack. Ideally try to include inline editing as well.

How to include main own scss in css-modules-custom example

I want to add my own scss files to the css-modules-custom-example project. But I am getting this error when adding a scss file:

ERROR in Loader <project-dir>/node_modules/jsontosass/jsontosass.js?path=<project-sir>/src/theme.json didn't return a function

So how do I included my own sass files?

Support react 16

We are using uncontrollable package as dependency. It has some issues with react 16, its batching version uses deprecated react-dom/lib/ReactUpdates. Can we switch to the non-batching version which works in all versions of react? For more details see this issue: jquense/uncontrollable#19

Unit Tests

All components should have some sort of unit test.

[Off Canvas] - Page remains slid out after screen size changed greater than reveal

1. Create off canvas with reveal = large
2. Shrink screen size small
3. Toggle off canvas open
4. Without closing off canvas, make screen size large. Notice page is still shifted.

How do you reset the max-width for .row class without editing the node_module foundation-sites/scss?

I'm trying to figure out how can I set the row max-width without having to edit the node_module/foundation-sites/scss file.. any ideas? I don't want to have to add a new class to my own scss file with row max-width !important.

Thank you so much!

high severity vulnerability when running npm install --save react-foundation-components

Where is JQuery used in react-foundation-components? How does JQuery fit with React?