All files / packages/design-system/scripts/gulp/generate examples.js

0% Statements 0/23
0% Branches 0/4
0% Functions 0/13
0% Lines 0/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93                                                                                                                                                                                         
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
import Task from 'data.task';
import Immutable from 'immutable';
import gulp from 'gulp';
import gulpInsert from 'gulp-insert';
import path from 'path';
import React from 'react';
import ReactDOM from 'react-dom/server';
import through from 'through2';
import Vinyl from 'vinyl';
 
import { beautify as prettyHTML } from '../../../shared/utils/beautify';
 
import createInstance from '../../lib';
import paths from '../../helpers/paths';
import showcase from '../../ui/showcase';
import { ui } from '../../ui';
 
const getFileName = (component, variant, item) =>
  Immutable.List.of(
    component.get('id'),
    variant.get('id'),
    item.get('id')
  ).join('_');
 
const getWrappedElement = item =>
  item.get('Context')
    ? React.createElement(item.get('Context'), null, item.get('element'))
    : item.get('element');
 
const render = item =>
  React.isValidElement(item.get('element'))
    ? prettyHTML(ReactDOM.renderToStaticMarkup(getWrappedElement(item)))
    : `FAILED: ${item.get('id')}`;
 
const transform = stream => (file, encoding, callback) => {
  const json = JSON.parse(String(file.contents));
  stream.write(
    new Vinyl({
      path: `${path.basename(file.path, 'json')}html`,
      contents: Buffer.from(json.snapshot.html)
    })
  );
  callback();
};
 
export const wrapped = () =>
  gulp
    .src(`${paths.generated}/examples/*.html`)
    .pipe(
      gulpInsert.wrap(
        '<!DOCTYPE html><html lang="en" class="example-html"><head><title>Example</title><link type="text/css" rel="stylesheet" href="../assets/styles/index.css" /><style type="text/css">.example-html { background: white; }</style></head><body>',
        '</body></html>'
      )
    )
    .pipe(gulp.dest(paths.html));
 
export { default as unwrappedDocs } from './examples.docs';
 
export const unwrapped = () => {
  const stream = through.obj();
  ui()
    .chain(uiJSON =>
      Task.of(createInstance(uiJSON)).map(SLDS =>
        uiJSON.get('components').map(comp =>
          SLDS.variants(comp)
            .filter(variant => variant.get('showcasePath'))
            .map(variant =>
              showcase(variant.get('showcasePath'), true).map(section =>
                section.get('items').map(i =>
                  stream.write(
                    new Vinyl({
                      path: `${getFileName(comp, variant, i)}.html`,
                      contents: Buffer.from(render(i))
                    })
                  )
                )
              )
            )
        )
      )
    )
    .fork(
      e => {
        throw e;
      },
      () => stream.end()
    );
  return stream.pipe(gulp.dest(`${paths.generated}/examples`));
};