open-index/open-npm huggingface dataset:
npm package: @pattern-lab-ui/react
Description: A React Design System
Latest version: 2.1.5

# @pattern-lab-ui/react

![npm version](https://img.shields.io/npm/v/@pattern-lab-ui/react)

### About
A comprehensive React Design System built to provide reusable components that ensure consistency and scalability across your projects.

See the [Changelog](https://github.com/flavia-dantas/design-system-pattern-lab-ui/blob/main/packages/react/CHANGELOG.md) for detailed updates and new features.

### Components

- Button
- Heading
- Text
- TextInput
- Textarea
- Checkbox
- Avatar
- MultiStep

## Installation
Install with [npm](https://www.npmjs.com/)

```bash
npm i @pattern-lab-ui/react
```

## How to Use 

Create a `global.ts` file in `src/styles/global.ts`

Import the global styles:

```typescript
import { globalCss } from "@pattern-lab-ui/react";
```

If you need to add more styles:
```typescript
import { globalCss } from "@pattern-lab-ui/react";

export const globalStyles = globalCss({
  '*': {
    boxSizing: 'border-box',
    padding: 0,
    margin: 0,
  },
  body: {
    backgroundColor: '$gray900',
    color: '$gray100',
    '-webkit-font-smoothing': 'antialiased',
  },
})
```

Using the Components:
```typescript
import { Heading } from "@pattern-lab-ui/react";

export default function Home() {
  return (
    <Heading as="h1">Hello World</Heading>
  );
}
```
Applying Styles in the `App()` (in the `_app.tsx` file)

Example using Next.js `v14.2.12` and React `v18`:
```typescript
import { globalStyles } from "@/styles/global";
import type { AppProps } from "next/app";

globalStyles()

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
```

### Also see: @pattern-lab-ui/tokens
Tokens for your react project React.
[@pattern-lab-ui/tokens
](https://www.npmjs.com/package/@pattern-lab-ui/tokens
)
npm package: @pattern-lab-ui/tokens
Description: Tokens for your react project
Latest version: 2.1.3

# @pattern-lab-ui/tokens

![npm version](https://img.shields.io/npm/v/@pattern-lab-ui/tokens)

### About
A set of design tokens that serve as the foundation for styling your React applications. Tokens include variables for colors, typography, spacing, and other design elements, allowing for unified and consistent design implementations.

See the [Changelog](https://github.com/flavia-dantas/design-system-pattern-lab-ui/blob/main/packages/tokens/CHANGELOG.md) for detailed updates and new features.

### Tokens

- Colors
- Font Sizes
- Font Weights
- Font Families
- Line Heights
- Radii
- Space

## Installation
Install with [npm](https://www.npmjs.com/)

```bash
npm i @pattern-lab-ui/tokens
```

## How to Use 
Exemple:

```typescript
import { colors } from '@pattern-lab-ui/tokens';

const Container = styled.div`
  background-color: ${colors.gray900};
  color: ${colors.gray100};
`;
```

### Also see: @pattern-lab-ui/react a React Design System.
Components for your project [@pattern-lab-ui/react](https://www.npmjs.com/package/@pattern-lab-ui/react).
npm package: @pattern-lab/edition-twig
Description: Pattern Lab node with Twig PHP Engine
Author: Evan Lovely
Latest version: 6.1.0

## Working on Pattern Lab's UI Locally

### Step 1: Install Dependencies
Run the following in the root of the Pattern Lab repo:

```
yarn run setup
```

### Step 2
Finally, go back into this folder, `cd packages/edition-twig`, and start up the local dev server which watches UIKit and the local Pattern Lab instance for changes, live reloads, etc by running `yarn dev`
npm package: @pattern-lab/engine-handlebars
Description: The Handlebars engine for Pattern Lab / Node
Author: Brian Muenzenmeyer & Geoffrey Pursell
Latest version: 6.1.0

# The Handlebars PatternEngine for Pattern Lab / Node

To install the Handlebars PatternEngine in your edition, `npm install --save @pattern-lab/engine-handlebars` should do the trick.

## Supported features

* [x] [Includes](https://patternlab.io/docs/including-patterns/)
* [x] Lineage
* [x] [Hidden Patterns](https://patternlab.io/docs/hiding-patterns-in-the-navigation/)
* [x] [Pseudo-Patterns](https://patternlab.io/docs/using-pseudo-patterns/)
* [x] [Pattern States](https://patternlab.io/docs/using-pattern-states/)
* [ ] ~~[Pattern Parameters](https://patternlab.io/docs/using-pattern-parameters/)~~ (Accomplished instead using [native Handlebars partial arguments](https://handlebarsjs.com/guide/partials.html))
* [ ] ~~[Style Modifiers](https://github.com/pattern-lab/patternlab-node/issues/1177)~~ (Accomplished instead using [native Handlebars partial arguments](https://handlebarsjs.com/guide/partials.html))

## Helpers

To add custom [helpers](https://handlebarsjs.com/api-reference/helpers.html) or otherwise interact with Handlebars directly, create a file named `patternlab-handlebars-config.js` in the root of your Pattern Lab project, or override the default location by specifying one or several glob patterns in the Pattern Lab config:

```json
  {
    ...
    "engines": {
      "handlebars": {
        "extend": [
          "handlebars-helpers.js",
          "helpers/**/*.js"
        ]
      }
    }
  }
```

Each file should export a function which takes Handlebars as an argument.

```js
module.exports = function(Handlebars) {
  // Put helpers here

  Handlebars.registerHelper('fullName', function(person) {
    // Example: person = {firstName: "Alan", lastName: "Johnson"}
    return person.firstName + " " + person.lastName;
  });
};
```
npm package: @pattern-lab/engine-liquid
Description: The Liquid engine for Pattern Lab / Node
Author: Cameron Roe
Latest version: 6.1.0

# The Liquid PatternEngine for Pattern Lab / Node

Based on the the stellar initial work found in https://github.com/cameronroe/patternengine-node-liquid

## Installing

To install the Liquid PatternEngine in your edition, `npm install @pattern-lab/engine-liquid` should do the trick.

## Supported features

This PatternEngine is in alpha and considered a work in progress.

* [x] [Includes](https://patternlab.io/docs/including-patterns/)
* [x] Lineage

**TBD**

* [ ] [Hidden Patterns](https://patternlab.io/docs/hiding-patterns-in-the-navigation/)
* [ ] [Pseudo-Patterns](https://patternlab.io/docs/using-pseudo-patterns/)
* [ ] [Pattern States](https://patternlab.io/docs/using-pattern-states/)
* [ ] [Pattern Parameters](https://patternlab.io/docs/using-pattern-parameters/)
* [ ] [Style Modifiers](https://github.com/pattern-lab/patternlab-node/issues/1177)
npm package: @pattern-lab/engine-mustache
Description: The Mustache engine for Pattern Lab / Node
Author: Brian Muenzenmeyer & Geoffrey Pursell
Latest version: 6.1.0

## The Mustache PatternEngine for Pattern Lab / Node

This one should be included by default with [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node/tree/dev/packages/core) and consumed by [Node Editions](https://github.com/pattern-lab?utf8=%E2%9C%93&query=edition-node).

If it's missing from your project for any reason, `npm install @pattern-lab/engine-mustache` should do the trick.
npm package: @pattern-lab/engine-nunjucks
Description: The nunjucks PatternEngine for Pattern Lab / Node
Author: Dan White
Latest version: 6.1.0
Deprecated: false

# The Nunjucks engine for Pattern Lab / Node

## Installing

To install the Nunjucks PatternEngine in your edition, run `npm install @pattern-lab/engine-nunjucks`.

## Supported features
- [x] [Includes](https://patternlab.io/docs/including-patterns/)
- [x] Lineage
- [x] [Hidden Patterns](https://patternlab.io/docs/hiding-patterns-in-the-navigation/)
- [x] [Pseudo-Patterns](https://patternlab.io/docs/using-pseudo-patterns/)
- [x] [Pattern States](https://patternlab.io/docs/using-pattern-states/)
- [ ] ~~[Pattern Parameters](https://patternlab.io/docs/using-pattern-parameters/)~~ (Accomplished instead using native Nunjucks variables)
- [ ] ~~[Style Modifiers](https://github.com/pattern-lab/patternlab-node/issues/1177)~~ (Accomplished instead using native Nunjucks variables)

Level of Support is more or less full. Partial calls and lineage hunting are supported. Nunjucks does not support the mustache-specific syntax extensions, style modifiers and pattern parameters, because their use cases are addressed by the core Nunjucks feature set. Pattern Lab's listitems feature is still written in the mustache syntax.

## Extending the Nunjucks instance

To add custom filters or make customizations to the nunjucks instance, add the following to `patternlab-config.json`:

```json
  {
    ...
    "engines": {
      "nunjucks": {
        "extend": [
          "nunjucks-extensions/*.js"
        ]
      }
    }
  }
```

...or use the default file name: `patternlab-nunjucks-config.js` (in the root of your Pattern Lab project).

Each file providing extensions should export a function with the Nunjucks environment as parameter.

```js
module.exports = function (env) {
  [YOUR CUSTOM CODE HERE]
};
```

Example: `patternlab-nunjucks-config.js` file that uses lodash and adds three custom filters.

```js
var _shuffle = require('lodash/shuffle'),
  _take = require('lodash/take');

exports = module.exports = function (env) {
  env.addFilter('shorten', function (str, count) {
    return str.slice(0, count || 5);
  });

  env.addFilter('shuffle', (arr) => {
    return _shuffle(arr);
  });

  env.addFilter('take', (arr, number) => {
    return _take(arr, number);
  });
};
```

## What Nunjucks features are missing?

I have not yet figured out a way to support variables in pattern includes. I'm thinking it might be possible to use Nunjucks precompile feature to get the compiled partial name before returning it to Pattern Lab, but just a thought at this point.
npm package: @pattern-lab/engine-react
Description: The React engine for Pattern Lab / Node
Author: Brian Muenzenmeyer & Geoffrey Pursell
Latest version: 0.2.1-beta.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# The React PatternEngine for Pattern Lab / Node

This is the **very preliminary** React PatternEngine for Patternlab / Node.

## Status

You can author standalone React components that include only the main React module, which I know isn't much yet. We're working on it.

The current release works with the 2.X series of Patternlab / Node. Support for the 3.X series is underway on the `dev` branch.

## Installing

To install the React PatternEngine in your edition, `npm install @pattern-lab/engine-react` should do the trick.

## Supported features

* [x] [Includes](http://patternlab.io/docs/pattern-including.html)
* [x] Data inheritance: This can be achieved by combining react `props` & `defaultProps`
* [x] [Hidden Patterns](http://patternlab.io/docs/pattern-hiding.html)
* [x] [Pseudo-Patterns](http://patternlab.io/docs/pattern-pseudo-patterns.html)
* [x] [Pattern States](http://patternlab.io/docs/pattern-states.html#node)
* [x] [Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html): With react props
* [x] [Style Modifiers](http://patternlab.io/docs/pattern-stylemodifier.html): With react props
* [x] Lineage
* [x] Incremental builds

## Usage

* `*.js` and `*.jsx` files are detected as patterns.
* To include patterns, import components using the standard Pattern Lab naming convention, as in: ```javascript
  import HelloWorld from 'atoms-hello-world';

```
* Standard pattern JSON is passed into React components as props.

## Notes
* Components are rendered statically to markup at build time using ReactDOMServer.renderToStaticMarkup(), but also transpiled and inlined as scripts in the pattern code to execute at runtime.
* We currently assume the React include (and others, once we figure that out) are written using es2015 module syntax.
* The Babel transforms are currently hard-coded into the engine, but we hope to make this configurable in the future.
```
npm package: @pattern-lab/engine-twig
Description: The Twig engine for Pattern Lab / Node
Author: Brian Muenzenmeyer & Geoffrey Pursell
Latest version: 6.1.0

## The Twig PatternEngine for Pattern Lab / Node

To install the Twig engine in your edition, `npm install @pattern-lab/engine-twig` should do the trick. This pattern engine uses the [`twing`](https://www.npmjs.com/package/twing) library.

## Supported features

Level of support for Twig constructs is on the level that the `twing` library supports. The following partial resolution schemes (`includes`, `extends`, `import`) are supported:

* relative file paths: standard by `twing` libary
* namespaces: standard by `twing` library, `engine-twig` only passes the configuration from `patternlab-config.json`
* Patternlab pattern names: integration between Patternlab and `twing` implemented by a custom [`loader`](https://nightlycommit.github.io/twing/api.html#create-your-own-loader)

Now that this engine uses a better Twig Javascript library, the following issues are resolved:

* [Pattern Lab does not support twig extends](https://github.com/pattern-lab/patternlab-node/issues/554)
* [Verify maturity of Twig engine](https://github.com/pattern-lab/patternlab-node/issues/285)

See https://github.com/pattern-lab/the-spec/issues/37 for more info.

## Adding Custom Extensions

Create a JS file in Pattern Lab root directory (e.g. `twingExtensions.js`) and set 
```javascript
"engine": {
  "twig": {
    "loadExtensionFile": "twingExtensions.js"
  }
}
```
in `patternlab-config.json`. See [Editing the Configuration Options](https://patternlab.io/docs/editing-the-configuration-options/#heading-loadextensionfile) for more info.

- this JS file must export a Map for `TwingEnvironment.addExtensions(extensions: Map<string, TwingExtensionInterface>)`
- Map will be added to the TwingEnvironment on startup

### Example

```javascript
// twingExtensions.js
const { TwingExtension, TwingFunction } = require('twing');

const extensionsMap = new Map();

class TestTwingExtension extends TwingExtension {
  getFunctions() {
    return [
      new TwingFunction('foobar', function (foo) {
        return Promise.resolve(`function foobar called with param "${foo}"`);
      }),
    ];
  }
}
extensionsMap.set('TestTwingExtension', new TestTwingExtension());

module.exports = extensionsMap;
```

See https://nightlycommit.github.io/twing/advanced.html#creating-an-extension for more details on how to create extensions
npm package: @pattern-lab/patternengine-node-handlebars
Description: The Handlebars engine for Pattern Lab / Node
Author: Brian Muenzenmeyer & Geoffrey Pursell
Latest version: 2.0.0-alpha.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# The Handlebars engine for Pattern Lab / Node

To install the Handlebars engine in your edition, `npm install patternengine-node-handlebars` should do the trick.

## Supported features
- [x] [Includes](http://patternlab.io/docs/pattern-including.html)
- [x] Lineage
- [x] [Hidden Patterns](http://patternlab.io/docs/pattern-hiding.html)
- [x] [Pseudo-Patterns](http://patternlab.io/docs/pattern-pseudo-patterns.html)
- [x] [Pattern States](http://patternlab.io/docs/pattern-states.html)
- [ ] [Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html) (Accomplished instead using [native Handlebars partial arguments](http://handlebarsjs.com/partials.html))
- [ ] [Style Modifiers](http://patternlab.io/docs/pattern-stylemodifier.html) (Accomplished instead using [native Handlebars partial arguments](http://handlebarsjs.com/partials.html))
npm package: @pattern-lab/patternengine-node-liquid
Description: The Liquid engine for Pattern Lab / Node
Author: Cameron Roe
Latest version: 1.0.0-alpha.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# The Liquid engine for Pattern Lab / Node

Based on the the stellar initial work found in https://github.com/cameronroe/patternengine-node-liquid

## Installing

To install the Underscore engine in your edition, `npm install pattern-lab/patternengine-node-underscore` should do the trick.


## Supported features

This PatternEngine is in alpha and considered a work in progress.

- [x] [Includes](http://patternlab.io/docs/pattern-including.html)
- [x] Lineage

**TBD**

- [ ] [Hidden Patterns](http://patternlab.io/docs/pattern-hiding.html)
- [ ] [Pseudo-Patterns](http://patternlab.io/docs/pattern-pseudo-patterns.html)
- [ ] [Pattern States](http://patternlab.io/docs/pattern-states.html)
- [ ] [Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
- [ ] [Style Modifiers](http://patternlab.io/docs/pattern-stylemodifier.html)
npm package: @pattern-lab/patternengine-node-mustache
Description: The Mustache engine for Pattern Lab / Node
Author: Brian Muenzenmeyer & Geoffrey Pursell
Latest version: 2.0.0-alpha.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

## The Mustache engine for Pattern Lab / Node

This one should be included by default with [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node) and consumed by [Node Editions](https://github.com/pattern-lab?utf8=%E2%9C%93&query=edition-node).

If it's missing from your project for any reason, `npm install patternengine-node-mustache` should do the trick.
npm package: @pattern-lab/plugin-tab
Description: ![license](https://img.shields.io/github/license/pattern-lab/patternlab-node.svg) [![npm](https://img.shields.io/npm/v/@pattern-lab/plugin-tab.svg)](https://www.npmjs.com/package/@pattern-lab/plugin-tab) [![Join the chat at Gitter](https://badges.gitter.i
Author: Brian Muenzenmeyer
Latest version: 6.1.0

![license](https://img.shields.io/github/license/pattern-lab/patternlab-node.svg)
[![npm](https://img.shields.io/npm/v/@pattern-lab/plugin-tab.svg)](https://www.npmjs.com/package/@pattern-lab/plugin-tab)
[![Join the chat at Gitter](https://badges.gitter.im/pattern-lab/node.svg)](https://gitter.im/pattern-lab/node)

# Tab Plugin for Pattern Lab Node

The Tab Plugin allows Pattern Lab Node users to see sibling files next to a pattern in the filesystem, displaying them as additional tabs alongside the template and HTML tabs in both the Style Guide frontend and the single-pattern info modal.

[Read more about Pattern Lab Node Plugins](https://github.com/pattern-lab/patternlab-node/wiki/Creating-Plugins)

## Installation

To add the Tab Plugin to your project using [npm](https://www.npmjs.com/) type:

    npm install @pattern-lab/plugin-tab --save

Or add it directly to your project's `package.json` file and run `npm install`

During installation, the plugin is added as a key to the `plugins` object in your main Pattern Lab project's `patternlab-config.json` file

> If you don't see this object, try running `npm run postinstall` within the root of your project.

## Configuration

Post-installation, you will see the following in your `patternlab-config.json`:

Example:

```
"plugins": {
  "@pattern-lab/plugin-tab": {
    "enabled": true,
    "initialized": false,
    "options": {
      "tabsToAdd": []
    }
  }
}
```

Add file extensions to this array as strings. Example: `"tabsToAdd": ["scss", "js"]`. You are all set now.

## Expected Structure

With the Tab Plugin installed, you can now accompany pattern template files with the file types of your choice and expect Pattern Lab to show them as tabs. The file structure would be similar to that of `pattern.json` or `pattern.md` files, except that it will be `pattern.<<type>>`.

For example, if we added an `scss` tab:

```
./_patterns/foo/bar
├── pattern.mustache (the pattern template)
├── pattern.md (optional pattern-specific documentation and metadata)
├── pattern.json (optional pattern-specific data)
└── pattern.scss (a file matching the tab you added.)
```

## Enabling / Disabling the Plugin

After install, you may manually enable or disable the plugin by finding the `@pattern-lab/plugin-tab` key within your main Pattern Lab project's `patternlab-config.json` file and setting the `enabled` flag. In the future this will be possible via CLI.
npm package: @pattern-lab/starterkit-handlebars-demo
Description: Pattern Lab's Demo StarterKit for Handlebars.
Author: Brad Frost
Latest version: 6.1.0

# Demo StarterKit for Handlebars

The Demo StarterKit for Handlebars is meant to be used as a demonstration of a Handlebars-based project in Pattern Lab.

## Requirements

The Base StarterKit for Handlebars requires the following PatternEngine:

- `@pattern-lab/engine-handlebars`: [npm](https://www.npmjs.com/package/@pattern-lab/engine-handlebars), [Github](https://github.com/pattern-lab/patternlab-node/tree/dev/packages/engine-handlebars)

## Install

[Installation Instructions](https://patternlab.io/docs/starterkits/)

## Edit Files

After installation the files for this StarterKit can be found in `source/`.
npm package: @pattern-lab/starterkit-handlebars-vanilla
Description: Pattern Lab Vanilla StarterKit for Handlebars.
Author: Brad Frost
Latest version: 1.4.3

# Vanilla StarterKit for Handlebars

The Vanilla StarterKit for Handlebars is meant to be used as a demonstration of a Handlebars-based project in Pattern Lab.

## Install

[Installation Instructions](https://patternlab.io/docs/starterkits/)

## Edit Files

After installation the files for this StarterKit can be found in `source/`.
npm package: @pattern-lab/starterkit-mustache-base
Description: The Mustache-based minimal StarterKit for Pattern Lab.
Author: Dave Olsen
Latest version: 3.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

![license](https://img.shields.io/github/license/pattern-lab/starterkit-mustache-base.svg?maxAge=2592000)
![current release](https://img.shields.io/npm/v/@pattern-lab/starterkit-mustache-base.svg)
[![Packagist](https://img.shields.io/packagist/v/pattern-lab/starterkit-mustache-base.svg?maxAge=2592000)](https://packagist.org/packages/pattern-lab/starterkit-mustache-base) [![Gitter](https://img.shields.io/gitter/room/pattern-lab/front-end.svg?maxAge=2592000)](https://gitter.im/pattern-lab/frontend-viewer)

# Base StarterKit for Mustache

The Base StarterKit for Mustache is meant to be used as a near-blank starting point for Mustache-based projects in Pattern Lab.

## Requirements

The Base StarterKit for Mustache requires the following PatternEngine:

Node:

* `@pattern-lab/patternengine-node-mustache`: [npm](https://www.npmjs.com/package/@pattern-lab/patternengine-node-mustache), [Github](https://github.com/pattern-lab/patternengine-node-mustache)

PHP:

* `pattern-lab/patternengine-mustache`: [documentation](https://github.com/pattern-lab/patternengine-php-mustache#mustache-patternengine-for-pattern-lab), [GitHub](https://github.com/pattern-lab/patternengine-php-mustache), [Packagist](https://packagist.org/packages/pattern-lab/patternengine-mustache)

## Install

[Installation Instructions](http://patternlab.io/docs/advanced-starterkits.html)

## Edit Files

After installation the files for this StarterKit can be found in `source/`.
npm package: @pattern-lab/starterkit-mustache-demo
Description: The Mustache-based demo StarterKit for Pattern Lab.
Author: Dave Olsen
Latest version: 5.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

![license](https://img.shields.io/github/license/pattern-lab/starterkit-mustache-demo.svg)
![current release](https://img.shields.io/npm/v/@pattern-lab/starterkit-mustache-demo.svg)
[![Packagist](https://img.shields.io/packagist/v/pattern-lab/starterkit-mustache-demo.svg)](https://packagist.org/packages/pattern-lab/starterkit-mustache-demo) [![Gitter](https://img.shields.io/gitter/room/pattern-lab/php.svg)](https://gitter.im/pattern-lab/php)

# Demo StarterKit for Mustache

The Demo StarterKit for Mustache is meant to show off some of the capabilities of developing Mustache-based projects in Pattern Lab.

## Requirements

The Demo StarterKit for Mustache requires the following PatternEngine:

Node:

* `@pattern-lab/patternengine-node-mustache`: [npm](https://www.npmjs.com/package/@pattern-lab/patternengine-node-mustache), [Github](https://github.com/pattern-lab/patternengine-node-mustache)

PHP:

* `pattern-lab/patternengine-mustache`: [documentation](https://github.com/pattern-lab/patternengine-php-mustache#mustache-patternengine-for-pattern-lab), [GitHub](https://github.com/pattern-lab/patternengine-php-mustache), [Packagist](https://packagist.org/packages/pattern-lab/patternengine-mustache)

## Install

[Installation Instructions](http://patternlab.io/docs/advanced-starterkits.html)

## Edit Files

After installation the files for this StarterKit can be found in `source/`.
npm package: @pattern-lab/starterkit-twig-demo
Description: Pattern Lab's Demo StarterKit for Twig.
Author: Dave Olsen
Latest version: 6.1.0

![license](https://img.shields.io/github/license/pattern-lab/starterkit-twig-demo.svg)
[![Packagist](https://img.shields.io/packagist/v/pattern-lab/starterkit-twig-demo.svg)](https://packagist.org/packages/pattern-lab/starterkit-twig-demo) [![Gitter](https://img.shields.io/gitter/room/pattern-lab/php.svg)](https://gitter.im/pattern-lab/php)

# Demo StarterKit for Twig

The Demo StarterKit for Twig is meant to be used as a demo that highlights how to combine Twig and Pattern Lab. It is currently very thin. We're looking for maintainers who may be interested in making this demo the equal to if not better than the Mustache demo.

## Requirements

The Demo StarterKit for Twig requires the following PatternEngine:

* `pattern-lab/patternengine-twig`: [documentation](https://github.com/pattern-lab/patternengine-php-twig#twig-patternengine-for-pattern-lab), [GitHub](https://github.com/pattern-lab/patternengine-php-twig), [Packagist](https://packagist.org/packages/pattern-lab/patternengine-twig)

## Install

This StarterKit can be installed using the following command:

    php core/console --starterkit --install pattern-lab/starterkit-twig-demo

It is recommended that you **do not** install this StarterKit as a dependency for your Pattern Lab project via Composer.

## Edit Files

After installation the files for this StarterKit can be found in `source/`.
npm package: @pattern-lab/styleguidekit-assets-default
Description: The default set of front-end assets for Pattern Lab.
Author: Brad Frost
Latest version: 4.0.0-alpha.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

![license](https://img.shields.io/github/license/pattern-lab/styleguidekit-assets-default.svg) ![current release](https://img.shields.io/npm/v/@pattern-lab/styleguidekit-assets-default.svg)
[![Packagist](https://img.shields.io/packagist/v/pattern-lab/styleguidekit-assets-default.svg)](https://packagist.org/packages/pattern-lab/styleguidekit-assets-default) [![Gitter](https://img.shields.io/gitter/room/pattern-lab/frontend-viewer.svg)](https://gitter.im/pattern-lab/frontend-viewer)

# Static Assets for the Default StyleguideKit

This code is responsible for creating Pattern Lab's UI look, feel, and functionality. These assets are are meant to be used in conjunction with the default [Mustache](https://github.com/pattern-lab/styleguidekit-mustache-default) and [Twig](https://github.com/pattern-lab/styleguidekit-twig-default) StyleguideKits, which control Pattern Lab-specific UI _inside_ the iframe.

## Installation

### Node
Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To install the default static assets run:

    npm install @pattern-lab/styleguidekit-assets-default


### PHP 

Pattern Lab PHP uses [Composer](https://getcomposer.org/) to manage project dependencies. To install the default static assets run:

    composer require pattern-lab/styleguidekit-assets-default

## Development Requirements

In order to modify these assets you need to install the following:

* the [Development Edition of Pattern Lab](https://github.com/pattern-lab/edition-php-development)
* [Node.js](http://nodejs.org) and NPM
* [Bower](http://bower.io)
* [Ruby Sass](http://sass-lang.com/install)
	
## Development Set-up

Read the [contribution guidelines](https://github.com/pattern-lab/styleguidekit-assets-default/blob/master/.github/CONTRIBUTING.md)
npm package: @pattern-lab/styleguidekit-mustache-default
Description: The default Mustache-based StyleguideKit for Pattern Lab. Contains styles and mark-up for Pattern Lab's front-end.
Latest version: 4.0.0-alpha.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

![license](https://img.shields.io/github/license/pattern-lab/styleguidekit-mustache-default.svg?maxAge=2592000)
[![Packagist](https://img.shields.io/packagist/v/pattern-lab/styleguidekit-mustache-default.svg?maxAge=2592000)](https://packagist.org/packages/pattern-lab/styleguidekit-mustache-default) [![Gitter](https://img.shields.io/gitter/room/pattern-lab/php.svg?maxAge=2592000)](https://gitter.im/pattern-lab/frontend-viewer)

# Default Mustache StyleguideKit for Pattern Lab

The default Mustache StyleguideKit provides the basic front-end assets when using most PatternEngines as part of the [Pattern Lab Ecosystem](http://patternlab.io/docs/advanced-ecosystem-overview.html). This StyleguideKit includes Mustache templates for the "View All" views and works with the [default StyleguideKit static assets](https://github.com/pattern-lab/styleguidekit-assets-default).

## Installation

### Node

Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To install this repository run:

    npm install styleguidekit-mustache-default

### PHP

Pattern Lab PHP uses [Composer](https://getcomposer.org/) to manage project dependencies. 
To install this repository:

    composer require pattern-lab/styleguidekit-mustache-default

Learn more about this StyleguideKit's dependencies on [Packagist](https://packagist.org/packages/pattern-lab/styleguidekit-mustache-default).
npm package: @pattern-lab/uikit-bare
Description: ![license](https://img.shields.io/github/license/pattern-lab/patternlab-node.svg) ![current release](https://img.shields.io/npm/v/@pattern-lab/uikit-workshop.svg) [![Gitter](https://img.shields.io/gitter/room/pattern-lab/frontend-viewer.svg)](https://gi
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

![license](https://img.shields.io/github/license/pattern-lab/patternlab-node.svg)
![current release](https://img.shields.io/npm/v/@pattern-lab/uikit-bare.svg)
[![Gitter](https://img.shields.io/gitter/room/pattern-lab/node.svg)](https://gitter.im/pattern-lab/node)

# UIKit Bare

~~Front-end assets and templates for the default Pattern Lab [workshop](http://bradfrost.com/blog/post/the-workshop-and-the-storefront/) view.~~

~~This code is responsible for creating Pattern Lab's default workshop UI look, feel, and functionality.~~

An even simpler starting point for UIKit development. It only has the final output UIKit of uikit-workshop, minus the complicated build pipeline that utilized. 


## Installation

### Node

Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To install the default static assets run:

    npm install @pattern-lab/uikit-bare

## Development Requirements

In order to modify these assets you need to install the following:

* [Node.js](http://nodejs.org) and NPM

## Development Set-up

Read the [contribution guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/packages/uikit-workshop/.github/CONTRIBUTING.md)
npm package: @pattern-lab/uikit-workshop
Description: Front-end assets and templates for the default Pattern Lab workshop view
Latest version: 6.1.0

![license](https://img.shields.io/github/license/pattern-lab/patternlab-node.svg)
![current release](https://img.shields.io/npm/v/@pattern-lab/uikit-workshop.svg)
[![Gitter](https://img.shields.io/gitter/room/pattern-lab/frontend-viewer.svg)](https://gitter.im/pattern-lab/frontend-viewer)

# UIKit Default

Front-end assets and templates for the default Pattern Lab [workshop](https://bradfrost.com/blog/post/the-workshop-and-the-storefront/) view.

This code is responsible for creating Pattern Lab's default workshop UI look, feel, and functionality.

## Installation

### Node

Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To install the default static assets run:

    npm install @pattern-lab/uikit-workshop

## Development Requirements

In order to modify these assets you need to install the following:

* [Node.js](https://nodejs.org/) and NPM
* [Bower](https://bower.io/)
* [Ruby Sass](https://sass-lang.com/install)

## Development Set-up

Read the [contribution guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/packages/uikit-workshop/.github/CONTRIBUTING.md)


## Working on Pattern Lab's UI Locally

### Step 1: Install Dependencies
Run the following in the root of the Pattern Lab repo:

```
yarn run setup
```

### Step 2 (Optional)
If you want to build using a fuller set of examples than what comes with the default Handlebars demo, run `yarn run preview:hbs`. Otherwise skip to step 3.

### Step 3
Finally, go into the `packages/development-edition-engine-handlebars` or `packages/edition-twig` folder and start up the local dev server which watches UIKit and the local Pattern Lab instance for changes, live reloads, etc by running `yarn dev`

```
cd packages/development-edition-engine-handlebars
yarn dev
```
npm package: @pattern-lab/website
Description: The website for patternlab.io
Latest version: 6.1.0

# Pattern Lab Website

This is the website for patternlab.io. This site was build using the [Hylia starter kit](https://hylia.website/), which is a lightweight [Eleventy](https://11ty.io) starter kit.

---

## How to work with this project

1. Clone this repository
2. `cd` into the project directory and run `yarn`
3. Once all the dependencies are installed run `yarn start`
4. Open your browser at `http://localhost:8080`

## Terminal commands

### Serve the site locally

```bash
yarn start
```

### Build a production version of the site

```bash
yarn production
```

### Compile Sass

```bash
yarn sass:process
```
npm package: @pattern5/cli
Description: CLI client for Pattern5 — query coding standards from the terminal
Latest version: 0.2.2

# @pattern5/cli

CLI for [Pattern5](https://pattern5.com) — query and manage your team's coding standards from the terminal.

## Install

```bash
npm install -g @pattern5/cli
```

## Quick start

```bash
# 1. Authenticate via browser
pattern5 login

# 2. Search your standards
pattern5 search "error handling"

# 3. View full details
pattern5 get <artifact-id>
```

## Commands

| Command | Description |
|---------|-------------|
| `pattern5 login` | Authenticate with Pattern5 via browser-based OAuth |
| `pattern5 logout` | Clear stored credentials |
| `pattern5 whoami` | Show current authentication status |
| `pattern5 search <query>` | Search artifacts by keyword |
| `pattern5 list` | List published artifacts |
| `pattern5 get <id>` | Get full artifact details by ID |
| `pattern5 collections` | List available collections |
| `pattern5 collections add <collection> <ids...>` | Add artifacts to a collection |
| `pattern5 collections remove <collection> <id>` | Remove an artifact from a collection |
| `pattern5 submit` | Create a new artifact |
| `pattern5 update <id>` | Update an existing artifact |
| `pattern5 manage <id>` | Unpublish or dismiss an artifact |
| `pattern5 config` | Manage CLI configuration |

## Authentication

**OAuth (recommended)** — opens a browser to sign in:

```bash
pattern5 login
```

**API key** — for CI/CD or headless environments:

```bash
pattern5 config set-key <your-api-key>
```

Generate API keys at [app.pattern5.dev/settings/api-keys](https://pattern5.com/settings/api-keys).

## Configuration

```bash
pattern5 config              # Show current config
pattern5 config set-url <url>         # Set API URL
pattern5 config set-collection <id>   # Set default collection
pattern5 config reset                 # Reset to defaults
```

Config is stored in `~/.config/pattern5/`.

## Examples

```bash
# Search with JSON output
pattern5 search "authentication" --json

# List only standards
pattern5 list --type standard

# Submit an artifact from a file
pattern5 submit --file pattern.yaml

# Submit and assign to a collection
pattern5 submit --type standard --title "..." --description "..." \
  --collection "My Collection" --file sections.json

# Pipe content via stdin
cat pattern.yaml | pattern5 submit --stdin

# Add existing artifacts to a collection
pattern5 collections add "My Collection" d50e719d a82daf9d

# Remove an artifact from a collection
pattern5 collections remove "My Collection" d50e719d

# Use a specific collection for queries
pattern5 search "caching" --collection <collection-id>
```

## Global options

| Option | Description |
|--------|-------------|
| `--json` | Output as JSON |
| `--api-url <url>` | Override API URL |
| `--api-key <key>` | Override API key |
| `--help` | Show help |
| `--version` | Show version |

## Requirements

- Node.js 22 or later

## Links

- [Pattern5](https://pattern5.com)

## License

MIT