add demo folder structure to template with @domain-group/fe-co-demo

Author: albertstill

packages/react-scripts/config/paths.js

@@ -51,10 +51,11 @@ module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
- appHtml: resolveApp('public/index.html'),
- appIndexJs: resolveApp('src/index.js'),
+ appHtml: resolveApp('demo/index.html'),
+ appIndexJs: resolveApp('demo/index.jsx'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
+ appDemo: resolveApp('demo'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
@@ -71,10 +72,11 @@ module.exports = {
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
- appHtml: resolveApp('public/index.html'),
- appIndexJs: resolveApp('src/index.js'),
+ appHtml: resolveApp('demo/index.html'),
+ appIndexJs: resolveApp('demo/index.jsx'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
+ appDemo: resolveApp('demo'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
@@ -101,10 +103,11 @@ if (
  appPath: resolveApp('.'),
  appBuild: resolveOwn('../../build'),
  appPublic: resolveOwn('template/public'),
- appHtml: resolveOwn('template/public/index.html'),
- appIndexJs: resolveOwn('template/src/index.js'),
+ appHtml: resolveOwn('template/demo/index.html'),
+ appIndexJs: resolveOwn('template/demo/index.jsx'),
  appPackageJson: resolveOwn('package.json'),
  appSrc: resolveOwn('template/src'),
+ appDemo: resolveOwn('template/demo'),
  yarnLockFile: resolveOwn('template/yarn.lock'),
  testsSetup: resolveOwn('template/src/setupTests.js'),
  appNodeModules: resolveOwn('node_modules'),

packages/react-scripts/config/webpack.config.dev.js

@@ -164,7 +164,7 @@ module.exports = {
  loader: require.resolve('eslint-loader'),
  },
  ],
- include: paths.appSrc,
+ include: [paths.appSrc, paths.appDemo],
  },
  {
  // "oneOf" will traverse all following loaders until one will
@@ -185,7 +185,7 @@ module.exports = {
  // Process JS with Babel.
  {
  test: /\.(js|jsx|mjs)$/,
- include: paths.appSrc,
+ include: [paths.appSrc, paths.appDemo],
  loader: require.resolve('babel-loader'),
  options: {
  // @remove-on-eject-begin

packages/react-scripts/package.json

@@ -1,6 +1,7 @@
 {
  "name": "domain-react-scripts",
- "version": "0.1.0",
+ "author": "Albert Still <albert.still@domain.com.au>",
+ "version": "0.0.0",
  "description": "Configuration and scripts for Domain React components",
  "repository": "DomainGroupOSS/create-react-app",
  "license": "MIT",

packages/react-scripts/scripts/init.js

@@ -38,7 +38,7 @@ module.exports = function(
  // Setup the script rules
  appPackage.scripts = {
  start: 'domain-react-scripts start',
- build: 'domain-react-scripts build',
+ // build: 'domain-react-scripts build',
  test: 'domain-react-scripts test --env=jsdom',
  };
 
@@ -129,6 +129,22 @@ module.exports = function(
  }
  }
 
+ let devDepArgs;
+ if (useYarn) {
+ devDepArgs = ['add', '--dev'];
+ } else {
+ devDepArgs = ['install', '--save-dev', verbose && '--verbose'].filter(
+ e => e
+ );
+ }
+ devDepArgs.push('@domain-group/fe-co-demo');
+
+ const proc = spawn.sync(command, devDepArgs, { stdio: 'inherit' });
+ if (proc.status !== 0) {
+ console.error(`\`${command} ${devDepArgs.join(' ')}\` failed`);
+ return;
+ }
+
  // Display the most elegant way to cd.
  // This needs to handle an undefined originalDirectory for
  // backward compatibility with old global-cli's.

packages/react-scripts/scripts/start.js

@@ -68,27 +68,48 @@ if (process.env.HOST) {
  console.log();
 }
 
-const legacyInputSassPath = path.join(paths.appPath, 'src', 'legacy.scss');
-const legacyOutputCssPath = path.join(paths.appSrc, 'legacy.css');
-if (fs.existsSync(legacyInputSassPath)) {
+const legacySrcInputSassPath = path.join(paths.appSrc, 'legacy.scss');
+const legacySrcOutputCssPath = path.join(paths.appSrc, 'legacy.css');
+if (fs.existsSync(legacySrcInputSassPath)) {
  console.log(
  chalk.cyan(
  'Detected `src/legacy.scss`, attempting to compile to `src/legacy.css` using node-sass.'
  )
  );
 
  const { css } = sass.renderSync({
- file: legacyInputSassPath,
+ file: legacySrcInputSassPath,
  includePaths: [paths.appNodeModules],
  });
 
- fs.writeFileSync(legacyOutputCssPath, css);
+ fs.writeFileSync(legacySrcOutputCssPath, css);
 
  console.log(
  chalk.cyan('Successfully wrote compiled Sass to `src/legacy.css`')
  );
 }
 
+const legacyDemoInputSassPath = path.join(paths.appDemo, 'legacy.scss');
+const legacyDemoOutputCssPath = path.join(paths.appDemo, 'legacy.css');
+if (fs.existsSync(legacyDemoInputSassPath)) {
+ console.log(
+ chalk.cyan(
+ 'Detected `demo/legacy.scss`, attempting to compile to `demo/legacy.css` using node-sass.'
+ )
+ );
+
+ const { css } = sass.renderSync({
+ file: legacyDemoInputSassPath,
+ includePaths: [paths.appNodeModules],
+ });
+
+ fs.writeFileSync(legacyDemoOutputCssPath, css);
+
+ console.log(
+ chalk.cyan('Successfully wrote compiled Sass to `demo/legacy.css`')
+ );
+}
+
 // We attempt to use the default port but if it is busy, we offer the user to
 // run on a different port. `choosePort()` Promise resolves to the next free port.
 choosePort(HOST, DEFAULT_PORT)

packages/react-scripts/template/demo/fixtures.js

@@ -0,0 +1,21 @@
+import Example from '../src';
+
+const fixtureGroups = [
+ {
+ component: Example,
+ fixtures: {
+ 'One Column': {
+ props: {
+ isTwoColumn: false,
+ },
+ },
+ 'Two Columns': {
+ props: {
+ isTwoColumn: true,
+ },
+ },
+ },
+ },
+];
+
+export default fixtureGroups;

packages/react-scripts/template/public/index.html renamed to packages/react-scripts/template/demo/index.html

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FeCoDemo from '@domain-group/fe-co-demo';
+import fixtures from './fixtures';
+import './legacy.css';
+
+ReactDOM.render(
+ <FeCoDemo fixtureGroups={fixtures} />,
+ document.getElementById('root'),
+);

packages/react-scripts/template/demo/index.jsx

@@ -0,0 +1,8 @@
+@import '@domain-group/fe-co-demo/lib/scss/fe-co-demo';
+
+html,
+body,
+#root {
+ height: 100%;
+ width: 100%;
+}

packages/react-scripts/template/demo/legacy.scss

@@ -21,4 +21,5 @@ yarn-debug.log*
 yarn-error.log*
 
 # Domain legacy Sass
+/demo/legacy.css
 /src/legacy.css