Ideas log

idea

single source of true, does not separate it
SCSS

Architecture

front end
- react (component design, UI design)
- redux (store design)
style-sheet generator
- code > scss
- code > css (min, normal, map)
front-end code generator
- change the store data, the react will render it
3-parties integration
- webpack loader
Reverse
- CSS > CSS Story

Components

Configuration(Manager)Service
Variable(Container|Manager)
Validator
CSS generator
CSS Meta (The intermedia language, which can generate CSS and SCSS)
Doc generator
Selector generator

backend? (it is needed? since there is no any usage for the backend)
for hot reload

Code Taste

Config > Code
Chain style call
Stateful vs Stateless
Async Promise
Unify style, minimize reading documentation

Documentation Structure

Group(nested)
- Block
- example
  - text
- section
- text
- code

Color (SCSS only)

Define color and list in the documentation

story
    .defineColor('screen-max-height', '100')

Variable

Define variable for use (scoped)

story
    .define('screen-max-height', 100);

Modulize (SCSS only)

module
    .define('module-name', 'verbose-name');

Namespace

Namespace (prefix style)(CSS related)(optional)

namespace
    .separator('-')
    .add('layout', 'Layout', 'l')
    .add('component', 'Component', 'c')
    .add('helper', 'Helper', 'h');

BEM

Configuration

bem
    .el('--')
    .modifier('__');

Atomic

atomic({
    'text-bold': ['font-weight', 'bold'],
});

// CSS builder
block('card')
.namespace('layout')
.el('header')
.style({
backgroundColor: 'red',
})
.part('yoyo')

// modifier
const sizeModifier = modifyier('size', 'size', ['small', 'big', 'tiny']);
const colorModifyier = modifyier('color', 'color', ['default', 'primary', 'warning', 'error']);
const stateModifyier = modifyier('state', 'state', ['is-active', 'primary', 'warning', 'error']);
const buttonActivationModifier = modifyier('disabled', 'disabled', ['is-disabled']);

// documentation doc
// group (key, title, description)
group
.create('form', 'Form');

const btnModifiers = [sizeModifier, colorModifyier, buttonActivationModifier];

Existing Building Block

JSS

group('form') // for documentation
    .block('btn', 'Button')
        .namespace('component') // will affect selector
        .section('btn element', () => {
            <button
                modifier={btnModifiers}
                className="btn"
            >
                <Text name="buttonText"/>
            </button>
        })
            .example('Disabled Button'
                'This is a disabled button'
                , {size: 'small', color: 'red', 'disabled', 'is-disabled'}
            )
            .example('Multiple Button',
                'This is a sample of multiple buttons',
                () => {
                    return (
                        <button>Hello World</button>
                        <button class="hello world">
                            <Text name="buttonText"/>
                        </button>
                        <button>Hello World</button>
                    );
                }
            )
            .end()
        .section('a tag', () => {
            <a
                modifier={btnModifiers}
                className="btn"
            >
                Hello world
            </a>
        })
        .section('div tag', () => {
            <div
                modifier={btnModifiers}
                className="btn"
            >
                Hello world
            </div>
        });


group('form')
    .block(null, 'Card')

group('form')
    .block('card', 'Card')
        .namespace('component')
        .el('header')
            .style({
                'hello'
            })
        .el('body')
            .style({ // different coding syle
                'yoyo'
            })
            // in the method coding style
            .modifier('padding', {
                padding: '1px 1px 1px 1px',
            })
            .end()
        .section('btn', () => {
            return (
                <div className="card">
                    <div className="card-header">
                    </div>
                    <div>
                    </div>
                </div>
            );
        });

API Design

big config vs function chain
(function chain): IDE provide auto complete and type checking, avoid using object type option, also we use typescript

stateful vs stateless
stateless function can reduce side-effect, but it is little bit hard to use in our case. storyboard basically is a state builder.

object vs static method
mixed, internally it use object.
but the API provide fluent chain API

sundy001 / css-storybook Goto Github PK

css-storybook's People

Contributors

Watchers

css-storybook's Issues