Fastmodel Layout Components

A library of layout-related components for re-use across all Fastmodel React applications.

Demo here.

Installation

yarn add fastmodel-layout-components

Usage

You must import the CSS file for the sidebar and modal to work properly. Most other styles are inline. Then you can import the individual components you need.

1import 'fastmodel-layout-components/css/index.css';
2// e.g.
3import { Button, Tip, Popover, Modal, Sidebar } from 'fastmodel-layout-components';

Contribution

If you are going to add a component to this library, make sure that it meets the following criteria:

1. It should be universally useful to our apps.
2. It should be as simple and composable as possible. It's better to compose many simpler components into one more complex one than to have one big, highly configurable component. The Sidebar is a good example of this, and the Button component is a good counter-example.
3. It should have a helpful, up-to-date corresponding demo that documents how to use it.
4. Make sure you export the component in index.jsx.

To create a demo

To create a demo component, follow these steps:

1. Create your demo component file.

    $ touch demo/demo/MyNewComponentDemo.jsx
   

2. In demo/demo.jsx, import your demo component, and add it too the DemoIndex and DemoPage.

    // first import the component
    import MyNewComponentDemo from "./demo/MyNewComponentDemo";
    // then add it to DemoIndex
    <DemoLink to="MyNewComponent">MyNewComponent</DemoLink>
    // and finally add it to DemoPage
    <Route path="MyNewComponent" component={MyNewComponentDemo}/>
    
   

3. Now, you have a link on our demo page to an empty file that doesn't export a component at all, so it's time to build the actual demo component. At a minimum, your demo should demonstrate how the component works and should indicate what props are to be used with the component. Ideally, your demo will have an interactive UI that allows someone to play with any of the props the component can use and see the effects in real time.
4. As you develop your demo, you can see your work by opening index.html in your browser.

#####NOTE: You may notice that most of the demos so far barely live up to the 'minimum' standard I just described, let alone the 'ideal' standard. Help us make this library better!