x0

Component-based design system for website generation, used in c8r/zero

Development

npm i

Render test

npm start

Documentation

• docs
• API

Features

• Works with any React component
• x0 components and primitives can be used in external React projects
• Uses default React.createElement, instead of a custom wrapper
• Currently uses glamor for CSS output (with potential for pluggable options)
• Uses React context for theme and block-level context
• Support for raw-JSX components with the createComponent function
• (potentially) support for JSX-syntax for sites
• Block-level contextual overrides
• Theming
• Primitive components with styled-system

Data structures

These are largely the same as the previous x0 implementation with some minor, and some breaking changes.

The core render function accepts a single object argument with the following shape:

const page = x0({
  meta: {},
  theme: {},
  content: [],
  // custom components
  components: {}
})

• The meta object is essentially the same as before, storing page metatags and options.
• The theme object has been simplified and no longer includes component/primitive-specific styles
• The content array is similar but with changes to the shape of content block objects
• The components object is merge with the default library to allow for custom components

// Theme shape
{
  fonts: [],
  fontSizes: [],
  space: [],
  colors: [],
  breakpoints: []
}

// Content block
[
  {
    // id for React application key
    _id: 0,
    // Uses `String.split()` and an idx function to allow
    // for arbitrary component library shapes
    component: 'Header.Basic',
    // Same props as before
    heading: 'Hello',
    text: 'Hi',
    // the `styles` object is a replacement for the `meta` object
    // and is intended to only include style overrides
    styles: {
      // *some* block-level styles
      backgroundImage: 'hello.png',
      // Per-primitive override
      Heading: {
        // Accepts styled-system props that hook into the theme context
        f: [ 4, 5 ],
        // any arbitrary CSS overrides
        css: {
          borderBottomWidth: 4
        }
      }
    }
  }
]

Modules

• x0 - core library that exports all submodules (default export is render)
• render - core function for rendering x0 sites into HTML
• component - the stock component library
• primitives - built-in component primitives
• themes - stock themes
• css - CSS-in-JS module, currently uses glamor
• create-component - parses raw JSX into x0 components
• Page - React component that maps content arrays and handles context
• Provider - React context provider for theme
• withContext - HOC to add x0 contextTypes to components
• util - various x0 utilities

How It Works

The render function is a wrapper around the Page component and handles merging custom components with the stock library, rendering HTML, and rendering CSS. The render function returns an object, which also includes a .toHTML() method to create an entire document with metatags and inlined CSS. The Page component maps over the content array and uses the Provider component to apply themes as React context.

Todo

• CLI
• Microservice
• Create page from JSX
• Allow for multi-pages sites with better site data structure
• Port current x0 components over - the good ones, at least
• Figure out a more elegant solution for icons
• Figure out a solution for array items/children
• Ensure custom components/primitives work
• Interoperability with c8r/lab and c8r/icon
• Block-level image/embed ratios