dsp

@salesforce-ux/design-system-previewer

This previewer is intended to work with the Salesforce Lightning Design System.

Showing:

Popularity

Downloads/wk

33

Maintenance

No Maintenance Data Available

Package

Dependencies

13

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Design System Previewer

This previewer is intended to work with the Salesforce Lightning Design System.

Installation

npm install @salesforce-ux/design-system-previewer --save-dev

Usage

const createPreviewer = require('@salesforce-ux/design-system-previewer');

const previewer = createPreviewer({
  // where are your static assets
  publicPath: {
    '/assets': [ path.resolve(__dirname, '../assets') ] // this uses express.static under the hood
  },
  // where is your css?
  cssUrl: '/assets/styles/index.css',
  // get me some comments as a string
  getComments: (done) => done(null, "all comments in system"),
  // get me some markup for a component/variant
  getMarkup: (component, variant, done) => done(null, "get Component/Variant markup"),
});

previewer.listen(3003, ({ server, emit }) => {
  // when your css changes
  emit('style');

  // when your markup changes
  emit('markup');

  // when your annotations changes
  emit('comments');

  console.log(`Previewer available at: http://localhost:${server.address().port}/preview`);
});

Development

This project is meant to run by https://github.com/salesforce-ux/design-system

The command (from design-system) is npm run previewer-dev

Any changes should live reload from that point on.

Licenses

Source code is licensed under BSD 3-Clause

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial