springload/pattern-book

Name: pattern-book

Owner: Springload

Description: It's not a pattern library, it's a pattern book

Created: 2017-12-17 10:36:31.0

Updated: 2018-02-22 23:08:32.0

Pushed: 2018-02-28 12:15:57.0

Homepage: https://springload.github.io/pattern-book/

Size: 232

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

It's not a pattern library, it's a pattern book, so make your own library!

---

Pattern-Book is a simple and tiny component that auto-detects your HTML and CSS and displays it, and that's all.

Unlike most Pattern Libaries, also known as Style Guides, there's no need to define components in the way that the framework understands. Instead Pattern-Book works with your existing components and it auto-detects the code being used.

Usage:

rt React, { Component } from "react";
rt Book from "pattern-book";
rt "h6.css"; // contains h6 { color: red; }

s PatternLibrary extends Component {
nder() {
return (
  <div>
    <h4>Patterns</h4>
    <h5>Heading Patterns</h5>
    <hr />

    <Book>
      <h6>My Heading 6</h6>
    </Book>
  </div>
);

Will look like

Patterns

Heading Patterns

---

My Heading 6

HTML

<h6>My Heading 6</h6>

CSS

h6 { color: red; }

Q. This is a pattern library so where's the outdated dev webserver with broken hot reloading?

Great question.

pattern-book doesn't include a dev server because other projects do it better.

So instead just use Create-React-App or, add <Book> tags to a new route in your app, or use whatever boilerplate you like.

Q. How does pattern-book organise the page of patterns… with headings, accordions, tabs, or what?

It doesn't organise them, so design it however you want!

Imagine if your pattern library had 5 components then it probably should be organised quite differently to another library with 1000 components, so this software is unopinionated about organisation. Pattern-Book just renders the component preview so decide for yourself how to organise them (do try react-accessible-accordion though!).

Q. How can I make patterns for an existing website?

One of the advantages of Pattern-Book is that it detects the CSS Rules being applied, so you can put your entire site's CSS files on the page and then write HTML that uses them and Pattern-Book will only display the relevant CSS (no need to manually associate CSS with a particular <Book>). This means that it's hopefully a lot less effort to repurpose your existing CSS as a pattern library.

Features

• [x] Minimal
• [x] CSS Autodetection, so there's no need to manually associate CSS with a pattern
• [x] HTML beautifier

ToDo

• [ ] CSS Beautifier
• [ ] ZIP download of particular components (including assets, eg backgrounds images and fonts).
• [ ] CSS Rule blacklist (and whitelist?) per-book
• [ ] …and show prop types, somehow? (prop-types or Flow/TS?). Sadly I'm not sure how we could support FlowType/TypeScript types because those are removed at compile-time.
• [ ] Detect basic JSX React Components… this is almost working
• [ ] Render prop overrides for HTML and CSS (and the whole render()?)
• [ ] Make it support interactive components (eg accumulating CSS across these multiple states).
• [ ] Make the <Book> not render until it scrolls into view (pattern libraries are notorious for having hundreds of compnents on a long page, so this is hopefully an easy optimisation).
• [ ] Parse SourceMaps to derive Sass (etc) if possible.