PaDL - Pattern Design Library System

Installation

Use npx to run PaDL instead of installing globally.

About

This is a project that allows you to easily create pattern libraries, with pure webcomponents using polymer (or lit). It bundles all of your components together with the needed polyfills so that you only require one js file.

Why use?

PaDL does a few things that makes developing webcomponents easier:

1. 🎉 Generates all the files that you need, when creating a pattern library and when creating a new component.
2. 👩‍💻 Creates a kickass development environment, using Storybook.
3. 🚀 Bundles and tree shakes all the needed files together.

Example structure

If we create a hello-world pattern library with a primary-button web component:

├─┬ hello-world
  ├─┬ src
  | └─┬ primary-button
  |   ├── component.js
  |   ├── story.js
  |   └── styles.less
  ├─┬ test
  | ├─┬ primary-button
  | | ├── primary-button_test.js
  | | └── primary-button_test.html
  | └── index.html
  └─┬ dist
    ├── hello-world.min.js
    └── components.min.js

To create this example:

 npx padl new hello-world
 cd hello-world && npm i
 padl g primary-button
 padl build

Integration

As seen in the example, hello-world.min.js file is created.

This will add all the polyfills, components, lit-element and can inline your global styles. This is in an effort to reduce the amount of blocking, while keeping the file as small as possible.

Note: Our browser coverage is last 2 browsers.

How to

Usage: padl [options] [command]

Options:
  -v, --v, --version      Output the current version
  -h, --help              output usage information

Commands:
  build [options]         Build padl web component files
  analysis                Analyse padl web component files
  delete|d [component]    Delete specific component
  generate|g [component]  Create new web component
  new [options] [name]    Create new library
  serve|s [options]       Serve web components using Storybook
  test|t [options]        Run tests

Create a new pattern library

npx padl new [name]

Options

Options:
  --no-styles  Create a new library that does not need styles in the component
  -h, --help   output usage information

Create a new component

Inside your pattern library

npm run padl -- generate [component]

npm run padl -- g [component]

This will create a lit component and also generate the story.js, styles.less with the test files.

Delete a component

Inside your pattern library

npm run padl -- delete [component]

npm run padl -- d [component]

This will delete all the related files to the component including the test files.

Build your library

Inside your pattern library

npm run build

Options

Options:
  --storybook  Creates static storybook with build
  -h, --help   output usage information

In your dist folder will find the components.min.js

Files	Notes
components.js	All components bundled together.
polyfill.js	All polyfills bundled together.
components.min.js	Components and polyfills bundled together and minified.
only.components.min.js	Only components minified.
hello-world.js	Bundled components with side loading of polyfills and inline styling (if option turned on). Name based on repository or name in config.
hello-world.min.js	Minfied version. Recommend to use in production.

Serve a component

Inside your pattern library

npm start

This will generate a storybook of all your component stories at localhost:9001

Options

Options:
  -p, --port <port>  Change port number
  --no-open          Stops serve from automatically opening in browser after loading
  --no-reload        Stops Storybook from automatically reloading to changes
  -h, --help         output usage information

Config file

Name	Type	Default	Notes
type	String	lit
watch	Object		Ability to watch changes in directories
└─ watchGlob	Array
└─ commands	Array
static	Array		Copy files into dist
globalStyle	Object		Global less styles
└─ input	String
└─ output	String
└─ watch	String | Array | Glob
└─ inline	Boolean	false	Add inline styles to bundle file

Example

{
  "type": "lit",
  "watch": {
    "watchGlob": ["styles/**", "dist/*"],
    "commands": ["npm run less:watch"]
  },
  "static": ["./styles/fonts"],
  "globalStyle": {
    "inline": true,
    "input": "./styles/base/all.less",
    "output": "./dist/styles.min.css",
    "watch": "./styles/**"
  }
}

Test your components

Inside your pattern library

npm t

npm run padl -- test

Options

Options:
  -h, --headless    Run tests headlessly
  -p, --persistent  Keep tests open after running
  -h, --help        output usage information

Headless

For headless testing to work you need a config file in your project root called wct.headless.config.json.

An example of how this file could be:

{
  "plugins": {
    "local": {
      "browsers": ["chrome", "firefox"],
      "browserOptions": {
        "chrome": [
          "headless"
        ],
        "firefox": [
          "-headless"
        ]
      }
    }
  }
}

Dependencies

This uses a variety of other resources:

• Lit Element
• Storybook