feat: fp-1499, core-styles pattern demo

Author: wesleyboar

.gitignore

@@ -5,6 +5,9 @@ node_modules
 .postcssrc.yml
 dist
 
+# Fractal
+demo
+
 # IDE
 .vscode
 

.prettierignore

@@ -3,3 +3,7 @@
 # do not format stylesheets until `nx format` ignores multiple blank lines
 # https://prettier.io/docs/en/rationale.html#empty-lines
 *.css
+
+# do not format handlebars until there is a succinct solution for
+# "A block may only be used inside an HTML element or another block."
+*.hbs

README.md

@@ -119,12 +119,6 @@ buildStylesheets(
 
 ## Local Development Setup
 
-### Prequisites for Building the Styles
-
-- Nodejs 16.x
-
-> **Future**: The Core Styles will be rendered via a pattern library software.
-
 ### Code Configuration
 
 Code configuration happens in repos that use these styles.
@@ -137,17 +131,20 @@ Code configuration happens in repos that use these styles.
    npm ci
    ```
 
-> **Future**:
->
-> 2. Build stylesheets + Run the pattern library:
->
->    ```bash
->    npm start
->    ```
->
-> 3. Open the web interface.
->
->    The build command will output the URL (and may even open it for you).
+2. Build stylesheets:
+
+   ```bash
+   npm run build:css
+   ```
+
+3. Run the pattern library:
+
+   ```bash
+   npm start
+   ```
+
+4. Open the web interface.
+   The build command will output the URL (and may even open it for you).
 
 [npm-install]: https://docs.npmjs.com/cli/v8/commands/npm-ci
 
@@ -158,11 +155,9 @@ If you changes files in a `src/lib/` directory, you may need to follow some of t
 #### Quick Start
 
 1. _(optional)_ Make changes to `/src/lib` files.
-2. Build the styles: `npm run build`
-
-   > **Future**: 2. Build and preview the styles: `npm start`
-
-3. _(to debug)_ Review respective `/dist` files' content.
+2. Build the styles: `npm run build:css`
+3. Build and preview the styles: `npm start`
+4. _(to debug)_ Review respective `/dist` or `/demo` files' content.
 
 #### How to Just Build Stylesheets
 
@@ -171,20 +166,20 @@ You can build stylesheets **from** source files **in** `src/lib` directory **to*
 1. Build stylesheets:
 
    ```bash
-   npm run build
+   npm run build:css
    ```
 
    **or**, for custom build id:
 
    ```bash
-   npm run build -- --build-id="..."
+   npm run build:css -- --build-id="..."
    ```
 
 ## Testing
 
-Plugin testing is done manually. Run `npm run build` from root folder in this project, then review output in `/dist/_tests.css`, to ensure plugins are working correctly.
+Plugin testing is done manually. Run `npm run test`, then review output in `/dist/_tests.css`, to ensure plugins are working correctly.
 
-> **Future**: Style testing is done manually. Run `npm start` from root folder in this project, then review output at web interface, to ensure styles are rendering correctly.
+Style testing is done manually. Run `npm start`, then review output at web interface, to ensure styles are rendering correctly.
 
 ### Production Deployment
 

bin/build-css.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+/** Build CSS using the Core-Styles API */
+
+const { buildStylesheets } = require('../src/main');
+
+buildStylesheets('src/lib/_imports/**/*!(README).css', './dist', {
+  baseMirrorDir: 'src/lib/_imports',
+});

bin/test-css.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+/** Test CSS plugins via the Core-Styles API */
+
+const { buildStylesheets } = require('../src/main');
+
+buildStylesheets('src/lib/_tests', './dist', {
+  baseMirrorDir: 'src/lib',
+});

docs/_fractal.md

@@ -0,0 +1,41 @@
+# TACC Core Styles - Tips for Fractal Component Library
+
+## Debugging
+
+### Preview Templates
+
+To see values available in a preview template, adapt this template code:
+
+```html
+<dl>
+  {{#each _target}}
+  <dt>
+    <strong><code>{{@key}}</code></strong>
+  </dt>
+  <dd><code>{{this}}</code></dd>
+  {{/each}}
+</dl>
+```
+
+### Console Logging
+
+To output values (like objects) in the console, adapt this config code:
+
+```js
+const hbs = require('@frctl/handlebars')({
+  helpers: {
+    debug: function (optionalValue) {
+      console.log('Current Context');
+      console.log('====================');
+      console.log(this);
+
+      if (optionalValue) {
+        console.log('Value');
+        console.log('====================');
+        console.log(optionalValue);
+      }
+    },
+  },
+});
+fractal.components.engine(hbs);
+```

docs/index.md

@@ -0,0 +1,26 @@
+---
+title: TACC UI Patterns
+---
+
+This is the UI pattern library for TACC.
+
+The CSS for these patterns is available from [@tacc/core-styles].
+
+---
+
+Known Clients:
+
+- [TACC/Core-CMS]
+- [TACC/Core-Portal]
+- [@tacc/core-components]
+
+[tacc/core-cms]: https://github.com/TACC/Core-CMS
+[tacc/core-portal]: https://github.com/TACC/Core-Portal
+[@tacc/core-components]: https://www.npmjs.com/package/@tacc/core-components
+[@tacc/core-styles]: https://www.npmjs.com/package/@tacc/core-styles
+
+<script type="module">
+Array.from(document.body.querySelectorAll('a'))
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

fractal.config.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const mandelbrot = require('@frctl/mandelbrot');
+const fractal = require('@frctl/fractal').create();
+
+// Get base theme
+const themeConfig = require('./fractal.theme.js');
+const theme = mandelbrot(themeConfig);
+
+// Configure UI
+fractal.set('project.title', 'TACC UI Patterns');
+fractal.components.set('label', 'Patterns'); // default is 'Components'
+fractal.components.set('title', 'Patterns'); // default is 'Components'
+fractal.components.set('default.status', 'wip'); // default is 'ready'
+
+// Set source paths
+// (for components)
+fractal.components.set('path', __dirname + '/src/lib/_imports');
+fractal.components.set('resources', {
+  // Render assets from component folders in a panel
+  // WARNING: Undocumented feature
+  // https://github.com/frctl/fractal/issues/150#issuecomment-254642411
+  // https://github.com/frctl/fractal/issues/93#issuecomment-236429871
+  assets: {
+    label: 'Assets',
+    match: ['**/*.css', '**/*.js'],
+  },
+});
+// (for stylesheets)
+fractal.components.set('default.context', {
+  styles: {
+    internal: {
+      local: [
+        '/settings/border.css',
+        '/settings/color.css',
+        '/settings/font.css',
+        '/settings/max-width.css',
+        '/settings/space.css',
+      ],
+    },
+  },
+});
+
+// Set website paths
+fractal.docs.set('path', __dirname + '/docs');
+fractal.web.set('static.path', __dirname + '/dist');
+fractal.web.set('builder.dest', __dirname + '/demo');
+
+// Customize theme
+fractal.web.theme(theme);
+
+// Export
+module.exports = fractal;

fractal.theme.js

@@ -0,0 +1,12 @@
+'use strict';
+
+// To let any client extend
+module.exports = {
+  skin: {
+    accent: '#000000',
+    complement: '#ffffff',
+    links: '#784fe8',
+  },
+  panels: ['notes', 'html', 'resources', 'context', 'info'],
+  nav: ['search', 'docs', 'components'],
+};