Fix readme casing

Readme.md

@@ -1,3 +1,10 @@
+# Mobify Fork
+
+* Clone this repo and check out #ui-dev branch
+* Run `npm link`
+* Inside SDK repo: `npm link react-styleguidist && npm run docs:dev`
+* Make any necessary changes to react-styleguidist
+
 # React Styleguidist
 
 [![Build Status](https://travis-ci.org/sapegin/react-styleguidist.svg)](https://travis-ci.org/sapegin/react-styleguidist) [![Dependency Status](https://david-dm.org/sapegin/react-styleguidist.svg)](https://david-dm.org/sapegin/react-styleguidist) [![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist)

bin/styleguidist.js

@@ -6,28 +6,11 @@
 
 const minimist = require('minimist');
 const chalk = require('chalk');
-const getConfig = require('../scripts/config');
-const consts = require('../scripts/consts');
-const StyleguidistError = require('../scripts/utils/error');
 
 const argv = minimist(process.argv.slice(2));
 
-let config;
-try {
-	config = getConfig(argv);
-}
-catch (err) {
-	if (err instanceof StyleguidistError) {
-		console.error(chalk.bold.red(err.message));
-		console.log();
-		console.log('Learn how to configure your style guide:');
-		console.log(chalk.underline(consts.DOCS_CONFIG));
-		process.exit(1);
-	}
-	else {
-		throw err;
-	}
-}
+const getConfig = require('../scripts/config');
+const config = getConfig(argv);
 
 switch (argv._[0]) {
 	case 'build':
@@ -50,37 +33,20 @@ function commandBuild() {
 			process.exit(1);
 		}
 		else {
-			console.log('Style guide published to:');
-			console.log(chalk.underline(config.styleguideDir));
+			console.log('Style guide published to', chalk.underline(config.styleguideDir));
 		}
 	});
 }
 
 function commandServer() {
-	process.on('uncaughtException', err => {
-		if (err.code === 'EADDRINUSE') {
-			console.error(chalk.bold.red(
-				`You have another server running at port ${config.serverPort} somewhere, shut it down first`
-			));
-			console.log();
-			console.log('You can change the port using the `serverPort` option in your style guide config:');
-			console.log(chalk.underline(consts.DOCS_CONFIG));
-			process.exit(1);
-		}
-		else {
-			throw err;
-		}
-	});
-
 	const server = require('../scripts/server');
 	server(config, err => {
 		if (err) {
 			console.log(err);
 		}
 		else {
-			console.log('Style guide server started at:');
-			console.log(chalk.underline('http://' + config.serverHost + ':' + config.serverPort));
-			console.log();
+			// console.log('Listening at', chalk.underline('http://' + config.serverHost + ':' + config.serverPort));
+			console.log('React Styleguidist is building...');
 		}
 	});
 }

examples/customised/styleguide/components/StyleGuide/index.jsx

@@ -9,9 +9,6 @@ const StyleGuideRenderer = ({ title, components, toc, sidebar }) => (
 			<div className={s.wrapper}>
 				<div className={s.components}>
 					{components}
-					<footer className={s.footer}>
-						Generated with <a className={s.link} href="https://github.com/sapegin/react-styleguidist">React Styleguidist</a>
-					</footer>
 				</div>
 				{sidebar &&
 					<div className={s.sidebar}>{toc}</div>

loaders/examples.loader.js

@@ -13,6 +13,9 @@ const EVAL_PLACEHOLDER_REGEXP = new RegExp(escapeRegExp(JSON.stringify(EVAL_PLAC
 const COMPONENT_PLACEHOLDER = '__COMPONENT__';
 const COMPONENT_PLACEHOLDER_REGEXP = new RegExp(escapeRegExp(COMPONENT_PLACEHOLDER), 'g');
 
+const IMAGE_PLACEHOLDER = '__IMG_ORIGIN__';
+const IMAGE_PLACEHOLDER_REGEXP = new RegExp(escapeRegExp(IMAGE_PLACEHOLDER), 'g');
+
 function examplesLoader(source) {
 	if (this.cacheable) {
 		this.cacheable();
@@ -23,6 +26,9 @@ function examplesLoader(source) {
 	const componentName = query.componentName || COMPONENT_PLACEHOLDER;
 	source = source.replace(COMPONENT_PLACEHOLDER_REGEXP, componentName);
 
+	// Replace __IMAGE_ORIGIN__ with the passed-in image path
+	source = source.replace(IMAGE_PLACEHOLDER_REGEXP, query.imagePath)
+
 	// Load examples
 	let examples = chunkify(source);
 

loaders/styleguide.loader.js

@@ -9,8 +9,22 @@ const utils = require('./utils/js');
 const requireIt = utils.requireIt;
 const toCode = utils.toCode;
 
+const DESIGN_CONTENT_NAME = 'DESIGN_README'
+const SLICE_NAME = 'slice'
+
 /* eslint-disable no-console */
 
+function hasSlice(filepath, config) {
+	const sliceFileName = config.getExampleFilename(filepath, `assets/${SLICE_NAME}.png`)
+	const filename = path.parse(filepath).name;
+
+	if (filename === 'index' || filename === DESIGN_CONTENT_NAME) {
+		return fs.existsSync(sliceFileName);
+	} else {
+		return path.basename(path.dirname(filepath)) === filename && fs.existsSync(sliceFileName)
+	}
+}
+
 /**
  * Return JS code as a string for a component with all required for style guide information.
  *
@@ -20,17 +34,33 @@ const toCode = utils.toCode;
  */
 function processComponent(filepath, config) {
 	const nameFallback = getNameFallback(filepath);
-	const examplesFile = config.getExampleFilename(filepath);
 	const componentPath = path.relative(config.configDir, filepath);
+	const designMarkdownFileName = config.getExampleFilename(filepath, `${DESIGN_CONTENT_NAME}.md`)
+	const sliceFileName = config.getExampleFilename(filepath, 'slice.png')
 
-	return toCode({
+	// You need to stringify these - otherwise you'll get a compilation error!
+	const code = {
+		imagePath: JSON.stringify(config.imagePath),
+		hasSlice: hasSlice(filepath, config),
 		filepath: JSON.stringify(filepath),
 		nameFallback: JSON.stringify(nameFallback),
 		pathLine: JSON.stringify(config.getComponentPathLine(componentPath)),
-		module: requireIt(filepath),
-		props: requireIt('!!props!' + filepath),
-		examples: getExamples(examplesFile, nameFallback, config.defaultExample),
-	});
+		designMarkdown: getExamples(designMarkdownFileName, nameFallback, config.defaultExample, config.imagePath)
+	};
+
+	if (path.basename(filepath) !== `${DESIGN_CONTENT_NAME}.md`) {
+		const examplesFileName = config.getExampleFilename(filepath);
+
+		code.examples = getExamples(examplesFileName, nameFallback, config.defaultExample, config.imagePath);
+		code.module = requireIt(filepath);
+		code.props = requireIt('!!props!' + filepath);
+	} else {
+		// Later on in the application, we'll deconstruct this property and accessing
+		// an undefined property will explode - so let's give it an empty object
+		code.props = JSON.stringify({})
+	}
+
+	return toCode(code);
 }
 
 /**
@@ -41,7 +71,7 @@ function processComponent(filepath, config) {
  */
 function getNameFallback(filepath) {
 	const filename = path.parse(filepath).name;
-	return filename === 'index' ? path.basename(path.dirname(filepath)) : filename;
+	return (filename === 'index' || filename === DESIGN_CONTENT_NAME) ? path.basename(path.dirname(filepath)) : filename;
 }
 
 /**
@@ -52,13 +82,13 @@ function getNameFallback(filepath) {
  * @param {string} defaultExample
  * @returns {string}
  */
-function getExamples(examplesFile, nameFallback, defaultExample) {
+function getExamples(examplesFile, nameFallback, defaultExample, imagePath) {
 	if (fs.existsSync(examplesFile)) {
-		return requireIt('examples!' + examplesFile);
+		return requireIt('examples?imagePath=' + imagePath + '!' + examplesFile);
 	}
 
 	if (defaultExample) {
-		return requireIt('examples?componentName=' + nameFallback + '!' + defaultExample);
+		return requireIt('examples?imagePath=' + imagePath + '&componentName=' + nameFallback + '!' + defaultExample);
 	}
 
 	return null;

package.json

@@ -57,6 +57,7 @@
     "remark-parse": "~2.0.2",
     "semver-utils": "1.1.1",
     "style-loader": "0.13.1",
+    "svg-react-loader": "0.3.7",
     "unified": "~5.1.0",
     "unist-util-visit": "~1.1.0",
     "webpack-dev-middleware": "1.8.4",

scripts/config.js

@@ -27,7 +27,13 @@ const DEFAULT_CONFIG = {
 	serverPort: 3000,
 	highlightTheme: 'base16-light',
 	verbose: false,
-	getExampleFilename: componentpath => path.join(path.dirname(componentpath), 'Readme.md'),
+	getExampleFilename: (componentpath, fileName) => {
+		// Careful: Mobify decision to use README.md. On some systems (Linux) the filesystem
+		//          is case sensitive and so the files in git _must_ match this casing.
+		fileName = fileName ? fileName : 'README.md';
+
+		return path.join(path.dirname(componentpath), fileName);
+	},
 	getComponentPathLine: componentpath => componentpath,
 	updateWebpackConfig: null,
 };
@@ -120,8 +126,8 @@ function getConfig(options) {
 function findConfig(file) {
 	if (file) {
 		// Custom config location
-
 		const configFilepath = file[0] === '/' ? file : path.join(process.cwd(), file);
+
 		if (!fs.existsSync(configFilepath)) {
 			throw new StyleguidistError('Styleguidist config not found: ' + configFilepath + '.');
 		}
@@ -130,10 +136,10 @@ function findConfig(file) {
 	}
 
 	// Search config file in all parent directories
-
 	let configDir;
+
 	try {
-		configDir = findup.sync(__dirname, CONFIG_FILENAME);
+		configDir = findup.sync(process.cwd(), CONFIG_FILENAME);
 	}
 	catch (exception) {
 		throw new StyleguidistError('Styleguidist config not found: ' + CONFIG_FILENAME + '.');

scripts/make-webpack-config.js

@@ -51,10 +51,24 @@ module.exports = function(config, env) {
 
 	const isProd = env === 'production';
 
+	// Allow for users to provide production or dev-based image origins for embedded
+	// assets in markdown files
+	let assetBuildOrigin = ''
+
+	if (config.assetBuildOrigin) {
+		assetBuildOrigin = isProd ? config.assetBuildOrigin.prod : config.assetBuildOrigin.dev
+	}
+
+	if (config.imagePath) {
+		config.imagePath = assetBuildOrigin + '/' + path.join(config.imagePath, '/');
+	} else {
+		config.imagePath = ''
+	}
+
 	let webpackConfig = {
 		output: {
 			path: config.styleguideDir,
-			filename: 'build/bundle.js',
+			filename: 'styleguidist.js',
 		},
 		resolve: {
 			alias: {
@@ -96,6 +110,11 @@ module.exports = function(config, env) {
 					include: sourceDir,
 					loader: 'style!css?modules&importLoaders=1&localIdentName=ReactStyleguidist-[name]__[local]',
 				},
+				{
+					test: /\.svg$/,
+					include: sourceDir,
+					loader: 'babel!svg-react',
+				},
 			],
 			noParse: /babel-standalone/,
 		},
@@ -189,7 +208,7 @@ module.exports = function(config, env) {
 	else {
 		webpackConfig = merge(webpackConfig, {
 			entry: [
-				'webpack-hot-middleware/client',
+				require.resolve('webpack-hot-middleware/client'),
 				entryScript,
 			],
 			cache: true,

src/index.js

@@ -11,7 +11,6 @@ import {
 import StyleGuide from 'rsg-components/StyleGuide';
 
 import 'highlight.js/styles/tomorrow.css';
-import './styles.css';
 
 // Make libraries available in examples
 global.React = React;