task/FP-1499: CMS pattern library

.gitignore

@@ -23,6 +23,9 @@ repo_name.var
 /static
 /media
 
+# UI Pattern Demo
+/taccsite_ui
+
 # Secrets and Customizations
 taccsite_cms/secrets.py
 *.custom.yml

README.md

@@ -268,6 +268,20 @@ If you need to change files within `/taccsite_custom`:
 <sub>† See [Restarting the CMS Server](#restarting-the-cms-server).</sub>
 
 
+### UI Pattern Demo
+
+This demo shows [Core Styles] with `site.css` from either [Core CMS] or a [Core CMS Resources] project.
+
+1. Build UI patterns demo: \*†
+
+    ```bash
+    npm run build:demo --project=name-of-project
+    ```
+
+<sub>\* You should run these commands in the container __from `/code/`__. _See [Running Commands in Container](#running-commands-in-container)._</sub>\
+<sub>† Where `name-of-project` is "core-cms" or matches a directory from `/taccsite_custom`. __A project name is required.__</sub>
+
+
 ## Running Commands in Container
 
 __If using `docker-compose.yml` then__ run certain commands via shell within container (because files are __not__ re-synced with local machine).
@@ -341,19 +355,7 @@ We use a modifed version of [GitFlow](https://datasift.github.io/gitflow/Introdu
 
 #### Testing Core Styles Changes Locally
 
-1. Clone [Core Styles] (if you haven't already).
-2. Tell project to temporarily use your [Core Styles] clone:
-    ```bash
-    npx link path-to/core-styles # e.g. npx link ../tup-ui/libs/core-styles
-    ```
-
-3. Make changes in your [Core Styles] clone as necessary.
-4. [Build static files.](#how-to-build-static-files)
-5. Test changes.
-6. Commit successful changes to a [Core Styles] branch.
-
-> __Notice__: [If you run `npm install` or `npm ci`, the link is destroyed.](https://github.com/npm/cli/issues/2380#issuecomment-1029967927) Repeat the `… link …` step to restore it.
-
+See [Locally Develop CMS and Styles](https://github.com/TACC/Core-CMS/wiki/Locally-Develop-CMS-and-Styles).
 
 ### Best Practices
 

bin/build-css.js

@@ -6,6 +6,8 @@ const fs = require('fs');
 const buildStylesheets = require('@tacc/core-styles').buildStylesheets;
 const mininmist = require('minimist');
 
+const { getSourcePath } = require( __dirname + '/../bin/get-path.js');
+
 const ROOT = __dirname + '/..';
 const CORE_NAME = 'core-cms';
 const ARGS = mininmist( process.argv.slice( 2 ) );
@@ -16,8 +18,16 @@ const BUILD_ID = ARGS['build-id'] || '';
 /** Build stylesheets for Core and (optional) project */
 (() => {
   // Get style paths
-  const corePath = _getPath('taccsite_cms', 'site_cms');
-  const projPath = _getPath(`taccsite_custom/${PROJECT_NAME}`, PROJECT_NAME );
+  const corePath = getSourcePath(
+    'taccsite_cms',
+    'site_cms',
+    'css'
+  );
+  const projPath = getSourcePath(
+    'taccsite_custom/' + PROJECT_NAME,
+    PROJECT_NAME,
+    'css'
+  );
   const hasProject = ( PROJECT_NAME && PROJECT_NAME !== CORE_NAME );
 
   // Get config paths
@@ -59,13 +69,3 @@ function _build( name, path, configs, id ) {
     }
   );
 }
-
-/**
- * Get path to CSS resources
- * @param {string} dirName - The name of the directory
- * @param {string} [subDirName=dirName] - The name of the sub-directory
- * @return {string}
- */
-function _getPath( dirName, subDirName ) {
-  return dirName + '/static/' + ( subDirName || dirName ) + '/css';
-}

bin/get-path.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+/** Get paths to core or project assets */
+
+const path = require('path');
+
+/**
+ * Get path to source file
+ * @param {string} dirName - The name of the project directory
+ * @param {string} [appName=dirName] - The name of the app directory
+ * @param {string} [end] - Any thing to append to the path
+ * @return {string}
+ */
+function getSourcePath( dirName, appName, end ) {
+  const subDirName = appName || dirName;
+  return path.join( dirName, 'static', subDirName, end );
+}
+
+/**
+ * Get Django static file path
+ * @param {string} appName - The name of the app directory
+ * @param {string} [end] - Any thing to append to the path
+ * @return {string}
+ */
+function getStaticFilePath( appName, end ) {
+  return path.join( 'static', appName, end );
+}
+
+module.exports = { getSourcePath, getStaticFilePath };

fractal.config.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const path = require('path');
+const mandelbrot = require('@frctl/mandelbrot');
+const minimist = require('minimist');
+
+// Get base config
+const fractal = require('@tacc/core-styles/fractal.config.js');
+const themeConfig = require('@tacc/core-styles/fractal.theme.js');
+
+// Get project
+// (name)
+const { getStaticFilePath } = require( __dirname + '/bin/get-path.js');
+const args = minimist( process.argv.slice( 2 ));
+let projectName = args['project'] || '';
+    projectName = ( projectName !== 'core-cms' ) ? projectName : '';
+// (stylesheet)
+const projectCSSFile = projectName
+  ? path.join( '/', getStaticFilePath( projectName, 'css/build/site.css'))
+  : null;
+
+// Get base path
+const coreStylesRoot = path.join(
+  path.dirname( require.resolve('@tacc/core-styles')),
+  // The '../' exits 'src/' which is at the end of what require.resolve returns
+  '../'
+);
+
+// Set source paths
+// (for components)
+fractal.components.set('path',
+  path.join( coreStylesRoot, 'src/lib/_imports')
+);
+// (for stylesheets)
+fractal.components.set('default.context', {
+  styles: {
+    shouldSkipBase: true, // true, because site.css includes components
+    external: {
+      global: [
+        'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
+        '/static/site_cms/css/build/site.css'
+      ].concat(
+        ( projectCSSFile ) ? [ projectCSSFile ] : []
+      )
+    }
+  }
+});
+if ( projectCSSFile ) {
+  fractal.cli.log(`+ Included CSS for "${projectName}": '${projectCSSFile}'`);
+}
+
+// Set website paths
+fractal.web.set('static.path', path.join( coreStylesRoot, 'dist'));
+fractal.web.set('builder.dest', __dirname + '/taccsite_ui');
+
+// Customize theme
+const theme = mandelbrot( Object.assign( themeConfig, {
+  skin: Object.assign( themeConfig.skin, {
+    links: '#877453',
+  })
+}));
+fractal.web.theme( theme );
+
+// Export
+module.exports = fractal;