Feature/next/fractal

.travis.yml

@@ -25,30 +25,30 @@ deploy:
   # deploy develop to Staging
   - provider: script
     script:
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --exclude "*" --include "*.html" --content-type "text/html; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --exclude "*" --include "*.css" --content-type "text/css; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --exclude "*" --include "*.js" --content-type "application/javascript; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --include "*" --exclude "*.js" --exclude "*.html" --exclude "*.css"
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --exclude "*" --include "*.html" --content-type "text/html; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --exclude "*" --include "*.css" --content-type "text/css; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --exclude "*" --include "*.js" --content-type "application/javascript; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${STAGING_BUCKET} --delete --region=${STAGING_BUCKET_REGION} --include "*" --exclude "*.js" --exclude "*.html" --exclude "*.css"
     skip_cleanup: true
     on:
       branch: develop
   # deploy next to Next (staging)
   - provider: script
     script:
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --exclude "*" --include "*.html" --content-type "text/html; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --exclude "*" --include "*.css" --content-type "text/css; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --exclude "*" --include "*.js" --content-type "application/javascript; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --include "*" --exclude "*.js" --exclude "*.html" --exclude "*.css"
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --exclude "*" --include "*.html" --content-type "text/html; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --exclude "*" --include "*.css" --content-type "text/css; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --exclude "*" --include "*.js" --content-type "application/javascript; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${NEXT_BUCKET} --delete --region=${NEXT_BUCKET_REGION} --include "*" --exclude "*.js" --exclude "*.html" --exclude "*.css"
     skip_cleanup: true
     on:
       branch: next
   # deploy tags matching v#.#.*  to Production
   - provider: script
     script:
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --exclude "*" --include "*.html" --content-type "text/html; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --exclude "*" --include "*.css" --content-type "text/css; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --exclude "*" --include "*.js" --content-type "application/javascript; charset=utf-8" &&
-      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --include "*" --exclude "*.js" --exclude "*.html" --exclude "*.css" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --exclude "*" --include "*.html" --content-type "text/html; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --exclude "*" --include "*.css" --content-type "text/css; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --exclude "*" --include "*.js" --content-type "application/javascript; charset=utf-8" &&
+      ~/.local/bin/aws s3 sync packages/gravity-ui-nunjucks/dist/pattern-library s3://${PROD_BUCKET} --delete --region=${PROD_BUCKET_REGION} --include "*" --exclude "*.js" --exclude "*.html" --exclude "*.css" &&
       ./scripts/cdn_publish.sh
     skip_cleanup: true
     on:

packages/gravity-ui-nunjucks/.gitignore

@@ -1,11 +1,15 @@
 # Exclude build Output
 dist/
 
-# Exclude unwanted stuff Pattern Lab generates
+# Exclude generated files
+src/components/_generated/*.njk
+src/components/00-particles/00-color/01-color-palettes/color-palettes.config.json
+src/components/00-particles/00-color/02-color-schemes/color-schemes.config.json
+src/components/00-particles/05-logos-and-icons/00-svg-symbols/svg-symbols.config.json
+
+# Legacy excludes (to be removed eventually)
 dependencyGraph.json
 src/_meta/*.mustache
-
-# Exclude generated files
 src/_patterns/_generated/*.njk
 src/_patterns/00-particles/05-logos-and-icons/00-svg-symbols.json
 src/_patterns/00-particles/00-color/01-color-palettes.json

packages/gravity-ui-nunjucks/build-api.js

@@ -52,5 +52,5 @@ module.exports = {
    *
    * @public
    */
-  distPath,
+  distPatternLibraryPath: (...pathSegments) => distPath('pattern-library', ...pathSegments),
 };

packages/gravity-ui-nunjucks/build-consts.js

@@ -10,11 +10,6 @@
  */
 
 module.exports = {
-  /**
-   * Name of root source directory.
-   */
-  srcDirname: 'src',
-
   /**
    * Name of root distributables directory.
    */

packages/gravity-ui-nunjucks/fractal.js

@@ -0,0 +1,51 @@
+const fractal = require('@frctl/fractal').create();
+const nunj = require('@frctl/nunjucks');
+
+const bldApi = require('./build-api');
+const bldPaths = require('./gulp/paths');
+
+/* Set the title of the project */
+fractal.set('project.title', 'Build Gravity pattern library');
+fractal.set('project.version', bldApi.version);
+
+/* Tell Fractal where the components will live */
+fractal.components.set('path', bldPaths.srcComponentsPath());
+
+// register the Nunjucks adapter for your components
+fractal.components.engine(nunj());
+
+// look for files with a .nunj file extension
+fractal.components.set('ext', '.njk');
+
+/* Tell Fractal where the documentation pages will live */
+fractal.docs.set('path', bldPaths.srcDocsPath());
+
+// Set engine to Nunjucks
+fractal.docs.engine(nunj);
+fractal.docs.set('ext', '.md');
+
+/* Tell Fractal which directory to serve up for static assets */
+fractal.web.set('static.path', bldPaths.distAssetsPath());
+
+/* Tell Fractal which directory to build static HTML output to */
+fractal.web.set('builder.dest', bldApi.distPatternLibraryPath());
+
+/* Tweak BrowserSync config */
+fractal.web.set('server.syncOptions', {
+  // Automatically open localhost URL in default brwoser
+  open: 'local',
+
+  snippetOptions: {
+    // Make BrowerSync JS snippet get appended
+    // to <head> instead of <body>, so that it doesn't
+    // interfere with our * + * CSS rules.
+    rule: {
+      fn(snippet, match) {
+        return snippet + match;
+      },
+      match: /<\/head>/i,
+    },
+  },
+});
+
+module.exports = fractal;

packages/gravity-ui-nunjucks/gulp/fractal-tasks.js

@@ -0,0 +1,53 @@
+const fractal = require('../fractal');
+
+const taskNamePrefix = 'fractal:';
+
+// keep a reference to the fractal CLI console utility
+const logger = fractal.cli.console;
+
+/*
+ * Start the Fractal server
+ *
+ * In this example we are passing the option 'sync: true' which means that it will
+ * use BrowserSync to watch for changes to the filesystem and refresh the browser automatically.
+ * Obviously this is completely optional!
+ *
+ * This task will also log any errors to the console.
+ */
+async function startServer() {
+  const server = fractal.web.server({
+    sync: true,
+  });
+
+  server.on('error', err => logger.error(err.message));
+
+  await server.start();
+  logger.success(`Fractal server is now running at ${server.url}`);
+  logger.success(`Network URL: ${server.urls.sync.external}`);
+}
+startServer.displayName = `${taskNamePrefix}start`;
+
+/*
+ * Run a static export of the project web UI.
+ *
+ * This task will report on progress using the 'progress' event emitted by the
+ * builder instance, and log any errors to the terminal.
+ *
+ * The build destination will be the directory specified in the 'builder.dest'
+ * configuration option set above.
+ */
+async function buildPatternLibrary() {
+  const builder = fractal.web.builder();
+
+  builder.on('progress', (completed, total) => logger.update(`Exported ${completed} of ${total} items`, 'info'));
+  builder.on('error', err => logger.error(err.message));
+
+  await builder.build();
+  logger.success('Fractal build completed!');
+}
+buildPatternLibrary.displayName = `${taskNamePrefix}build`;
+
+module.exports = {
+  startServer,
+  buildPatternLibrary,
+};

packages/gravity-ui-nunjucks/gulp/gravity.js

@@ -3,7 +3,6 @@ const gulp = require('gulp');
 const filter = require('gulp-filter');
 const uiLibPaths = require('@buildit/gravity-ui-web/build-api.js');
 const pkgPaths = require('./paths.js');
-const { serverReload, serverRefreshCss } = require('./patternlab.js');
 
 const taskNamePrefix = 'gravity:';
 
@@ -33,7 +32,7 @@ function makeCopyOtherTask(allowEmpty = false) {
 function watchCss() {
   gulp.watch(
     uiLibPaths.distPath('**', '*.css'),
-    gulp.series(makeCopyCssTask(true), serverRefreshCss),
+    makeCopyCssTask(true),
   );
 }
 watchCss.displayName = `${taskNamePrefix}css:watch`;
@@ -45,7 +44,7 @@ function watchOther() {
       uiLibPaths.distPath('**', '*'),
       `!${uiLibPaths.distPath('**', '*.css')}`,
     ],
-    gulp.series(makeCopyOtherTask(true), serverReload),
+    makeCopyOtherTask(true),
   );
 }
 watchOther.displayName = `${taskNamePrefix}other:watch`;

packages/gravity-ui-nunjucks/gulp/paths.js

@@ -7,7 +7,6 @@
  * builds.
  */
 const path = require('path');
-const patternLabConfig = require('../patternlab-config.json');
 const bldConsts = require('../build-consts.js');
 
 const gulpDir = __dirname;
@@ -17,16 +16,16 @@ function pkgRootPath(...pathSegements) {
   return path.resolve(gulpDir, '..', ...pathSegements);
 }
 
-// ==== Pattern library ====
-
-// Resolves the given path segments relative to Pattern Lab's patterns source dir
-function srcPatternsPath(...pathSegments) {
-  return pkgRootPath(patternLabConfig.paths.source.patterns, ...pathSegments);
+// Resolves the given path segments relative to the source dir
+function srcPath(...pathSegements) {
+  return pkgRootPath('src', ...pathSegements);
 }
 
-// Resolves the given path segments relative to the SASS src dir
-function distPath(...pathSegements) {
-  return pkgRootPath(bldConsts.distDirname, ...pathSegements);
+// ==== Pattern library ====
+
+// Resolves the given path segments relative to the temporary assets dir
+function distAssetsPath(...pathSegements) {
+  return pkgRootPath(bldConsts.distDirname, 'pattern-library-assets', ...pathSegements);
 }
 
 module.exports = {
@@ -44,37 +43,85 @@ module.exports = {
 
   /**
    * Takes a sequence of path segments relative to the pattern
-   * library's source patterns directory and returns the absolute path.
+   * library's source components directory and returns the absolute path.
    *
    * @param  {...string} pathSegements One or more path segments
-   *        relative to the pattern library's source patterns directory.
+   *        relative to the pattern library's source components directory.
    *
    * @return {string} Absolute file path to the specified source
    *        directory or file.
    */
-  srcPatternsPath,
+  srcComponentsPath: (...pathSegments) => srcPath('components', ...pathSegments),
 
   /**
-   * Takes a sequence of path segments relative to the distributables
-   * directory and returns the absolute path.
+   * Takes a sequence of path segments relative to the pattern
+   * library's source docs directory and returns the absolute path.
    *
    * @param  {...string} pathSegements One or more path segments
-   *        relative to the distributables directory.
+   *        relative to the pattern library's source docs directory.
    *
-   * @return {string} Absolute file path to the specified distributable
+   * @return {string} Absolute file path to the specified source
    *        directory or file.
    */
-  distPath,
+  srcDocsPath: (...pathSegments) => srcPath('docs', ...pathSegments),
 
   /**
    * Takes a sequence of path segments relative to the pattern
-   * library's distributables directory and returns the absolute path.
+   * library's source SASS directory and returns the absolute path.
+   *
+   * @param  {...string} pathSegements One or more path segments
+   *        relative to the pattern library's source SASS directory.
+   *
+   * @return {string} Absolute file path to the specified source
+   *        directory or file.
+   */
+  srcPlSassPath: (...pathSegments) => srcPath('sass', ...pathSegments),
+
+  /**
+   * Takes a sequence of path segments relative to the pattern
+   * library's source assets directory and returns the absolute path.
+   *
+   * @param  {...string} pathSegements One or more path segments
+   *        relative to the pattern library's source assets directory.
+   *
+   * @return {string} Absolute file path to the specified source
+   *        directory or file.
+   */
+  srcAssetsPath: (...pathSegments) => srcPath('assets', ...pathSegments),
+
+  /**
+   * Takes a sequence of path segments relative to Fractal's temporary
+   * static assets directory and returns the absolute path.
    *
    * @param  {...string} pathSegements One or more path segments
-   *        relative to the Gravity distributables directory.
+   *        relative to the temporary assets directory.
    *
    * @return {string} Absolute file path to the specified distributable
    *        directory or file.
    */
-  distGravityPath: (...pathSegements) => distPath('gravity', ...pathSegements),
+  distAssetsPath,
+
+  /**
+   * Takes a sequence of path segments relative to the temporary Gravity
+   * distributables directory and returns the absolute path.
+   *
+   * @param  {...string} pathSegements One or more path segments
+   *        relative to the temporary Gravity distributables directory.
+   *
+   * @return {string} Absolute file path to the specified temporary
+   *        directory or file.
+   */
+  distGravityPath: (...pathSegements) => distAssetsPath('gravity', ...pathSegements),
+
+  /**
+   * Takes a sequence of path segments relative to the temporary pattern
+   * library styles distributables directory and returns the absolute path.
+   *
+   * @param  {...string} pathSegements One or more path segments
+   *        relative to the temporary pattern library styles directory.
+   *
+   * @return {string} Absolute file path to the specified temporary
+   *        directory or file.
+   */
+  distPlStylesPath: (...pathSegements) => distAssetsPath('pl-styles', ...pathSegements),
 };