styled-components module structure

readme.md

This is a first go at how I think it would make sense to work with styled-components.

We can break down the sytled components by general categories. In this instance we have a Forms category in the form.js file which will contain HTML elements relating to HTML forms. If you need form elements you will just import in this styled-components module into your component file. This will allow for cleaner and less noisy react component files. In addition I feel this structure will facilitate the creation of a style guide and reduce duplication of styled-component definitions across react component files. You can see in the provide sample files that we are using the Input and Label styled-components in multiple files. They have been defined in a single place, and are brought in through your run-of-the-mill module import syntax.

Address.jsx

import React from 'react';
import { Input, Select, Option, Label } from '../assets/styled-components/forms.js';

class Address extends React.Component {
  render() {
    return (
      <section>
        <h3>Address Component</h3>
        <Label fullwidth >Street 1:
          <Input type="text" fullwidth />
        </Label>

        <Label fullwidth >Street 2:
          <Input type="text" fullwidth />
        </Label>

        <Label>City:
          <Input type="text" />
        </Label>

        <Label>State:
          <Select>
            <Option value="foo">Foo</Option>
            <Option value="bar">Bar</Option>
            <Option value="baz">Baz</Option>
          </Select>
        </Label>

        <Label>Zip:
          <Input type="text" />
        </Label>

        <Label>Country:
          <Input type="text" />
        </Label>
      </section>
    );
  }
}

export default Address;

forms.js

import styled from 'styled-components';

const styles = {
  Form : styled.form`
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 10px;
  `,

  Input : styled.input`
    background-color: #F1F1F1;
    display: block;
    width: 100%;
  `,

  Select : styled.select`
    display: block;
    width: 100%;
  `,

  Option : styled.option`
  `,

  Label : styled.label`
  `,

}

module.exports = styles;

JobFormS2.jsx

import React from 'react';
import Address from './Address';
import { Form, Input, Label } from '../assets/styled-components/forms.js';

class JobFormS2 extends React.Component {
  render() {
    return (
      <section>
        <h2>Company Info</h2>
        <div>
          ⊙====Ⓞ==--⊙----⊙----⊙
        </div>
        <Form>
          <Label>Company Name:
            <Input type="text" />
          </Label>
          <Address />
          <div>
            <button>Back</button>
            <button>Next</button>
          </div>
        </Form>
      </section>
    );
  }
}

export default JobFormS2;