Repository: styleguidist/react-styleguidist
Pull request #1185 (2018-10-24 11:55:46)

Add foldername.md pattern to getExampleFilename when component is ind…
Fix issue [#1169](https://github.com/styleguidist/react-styleguidist/issues/1169)
Update to getExampleFilename in order to detect example file when the component definition file is `index.js` and the examples are in FolderName.md.
Test has been added.
Unfortunately all other tests do not pass but it looks like it was like this when I forked.

styleguidist-bot: 
<!--
  0 failure: 
  1 warning:  Changes were made...
  
  
  DangerID: danger-id-default;
-->


<table>
  <thead>
    <tr>
      <th width="50"></th>
      <th width="100%" data-danger-table="true">Warnings</th>
    </tr>
  </thead>
  <tbody><tr>
      <td>:warning:</td>
      <td>

  Changes were made to `package-lock.json`, but not to `package.json`.

Please remove `package-lock.json` changes from your pull request. Try to run `git checkout master -- package-lock.json` and commit changes.
  </td>
    </tr>
  </tbody>
</table>



<p align="right">
  Generated by :no_entry_sign: <a href="http://github.com/danger/danger-js/">dangerJS</a>
</p>

DavidHenri008: @sapegin This is my very first PR and I am working on Windows. I have a hard time to complete the PR for two reasons:
1. When I run `npm run test` I am getting many errors that has nothing to do with my modifications. I cloned the master branch in a different repository and I still get the same errors. Do you know if tests (`npm run test`) are successful?
2. Each time I run `npm run test` or `npm start` I am getting 400+ changes in git. But there is no apparent differences. I suspect a crlf/lf issue. But I do not know how to solve this. I am using VSCode as IDE. I think this is the cause of the final differences (since my last commit) that you see in my package-lock.json.

Thanks.
DavidHenri008: As a note I found out that many tests based on snapshots returns error because of path delimiter, ex:
-       "filepath": "components/Price/Price.js",
+       "filepath": "components\\Price\\Price.js", 
Again I just do not know how to fix this on my VSCode Windows setup.
sapegin: 1. Tests are passing in master — you can see it in the Readme — [![Build Status](https://travis-ci.org/styleguidist/react-styleguidist.svg)](https://travis-ci.org/styleguidist/react-styleguidist)

    But I'm sure we have some issues on Windows ;-( If you're feeling adventurous and want to help ;-) it would be super cool.

2. It could be because your Git is converting line endings on checkout — https://adaptivepatchwork.com/2012/03/01/mind-the-end-of-your-line/


sapegin: > Again I just do not know how to fix this on my VSCode Windows setup.

The issue with tests is in the repo, not in your setup. But I don't know what could be the right solution here, so any help is appreciated.
sapegin: I'll update the snapshot, thanks for the work! ;-)

I think removing paths from snapshots is the right way. We can use something like [slash](https://github.com/sindresorhus/slash) to compare paths outside snapshots.

Patch:
diff --git a/examples/basic/src/components/Label/Label.md b/examples/basic/src/components/Label/Label.md
new file mode 100644
index 00000000..b74ac2bf
--- /dev/null
+++ b/examples/basic/src/components/Label/Label.md
@@ -0,0 +1,7 @@
+Basic Label:
+
+    <Label>Hi there !!!</Label>
+
+Pink background label:
+
+    <Label background="deeppink" color="white">Click Me</Label>
diff --git a/examples/basic/src/components/Label/index.js b/examples/basic/src/components/Label/index.js
new file mode 100644
index 00000000..9ef8031a
--- /dev/null
+++ b/examples/basic/src/components/Label/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The only true label.
+ */
+export default function Label({ color, background, children }) {
+	const styles = {
+		color,
+		background,
+		padding: '.5em 1em',
+		borderRadius: '0.3em',
+		fontFamily: 'arial',
+	};
+
+	return <label style={styles}>{children}</label>;
+}
+Label.propTypes = {
+	/**
+	 * Label text.
+	 */
+	children: PropTypes.string.isRequired,
+	color: PropTypes.string,
+	background: PropTypes.string,
+};
+Label.defaultProps = {
+	color: '#333',
+	background: 'white',
+};
diff --git a/scripts/schemas/config.js b/scripts/schemas/config.js
index 1160d61c..6a3b3020 100644
--- a/scripts/schemas/config.js
+++ b/scripts/schemas/config.js
@@ -82,16 +82,17 @@ module.exports = {
 		default: componentPath => {
 			const files = [
 				path.join(path.dirname(componentPath), 'Readme.md'),
+				// ComponentName.md
 				componentPath.replace(path.extname(componentPath), '.md'),
+				// FolderName.md when component definition file is index.js
+				path.join(path.dirname(componentPath), path.basename(path.dirname(componentPath)) + '.md'),
 			];
-
 			for (const file of files) {
 				const existingFile = fileExistsCaseInsensitive(file);
 				if (existingFile) {
 					return existingFile;
 				}
 			}
-
 			return false;
 		},
 		example: componentPath => componentPath.replace(/\.jsx?$/, '.examples.md'),


Test patch:
diff --git a/loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap b/loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap
index e06be44c..c3cf6081 100644
--- a/loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap
+++ b/loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap
@@ -115,6 +115,19 @@ Array [
         },
         "slug": "button-3",
       },
+      Object {
+        "filepath": "components/Label/index.js",
+        "hasExamples": true,
+        "metadata": Object {},
+        "module": Object {
+          "require": "~/test/components/Label/index.js",
+        },
+        "pathLine": "components/Label/index.js",
+        "props": Object {
+          "require": "!!~/loaders/props-loader.js!~/test/components/Label/index.js",
+        },
+        "slug": "label-1",
+      },
       Object {
         "filepath": "components/Placeholder/Placeholder.js",
         "hasExamples": true,
@@ -292,6 +305,19 @@ Object {
       },
       "slug": "button-1",
     },
+    Object {
+      "filepath": "components/Label/index.js",
+      "hasExamples": true,
+      "metadata": Object {},
+      "module": Object {
+        "require": "~/test/components/Label/index.js",
+      },
+      "pathLine": "components/Label/index.js",
+      "props": Object {
+        "require": "!!~/loaders/props-loader.js!~/test/components/Label/index.js",
+      },
+      "slug": "label",
+    },
     Object {
       "filepath": "components/Placeholder/Placeholder.js",
       "hasExamples": true,
diff --git a/scripts/__tests__/config.spec.js b/scripts/__tests__/config.spec.js
index 68022518..2c800721 100644
--- a/scripts/__tests__/config.spec.js
+++ b/scripts/__tests__/config.spec.js
@@ -81,6 +81,15 @@ it('default getExampleFilename should return Component.md path if it exists', ()
 	);
 });
 
+it('default getExampleFilename should return Component.md path if it exists with index.js', () => {
+	process.chdir('../..');
+	const result = getConfig();
+	result.components = './components/**/*.js';
+	expect(result.getExampleFilename(path.resolve('components/Label/index.js'))).toEqual(
+		path.resolve('components/Label/Label.md')
+	);
+});
+
 it('default getExampleFilename should return false if no examples file found', () => {
 	process.chdir('../..');
 	const result = getConfig();
diff --git a/test/components/Label/Label.md b/test/components/Label/Label.md
new file mode 100644
index 00000000..b74ac2bf
--- /dev/null
+++ b/test/components/Label/Label.md
@@ -0,0 +1,7 @@
+Basic Label:
+
+    <Label>Hi there !!!</Label>
+
+Pink background label:
+
+    <Label background="deeppink" color="white">Click Me</Label>
diff --git a/test/components/Label/index.js b/test/components/Label/index.js
new file mode 100644
index 00000000..9ef8031a
--- /dev/null
+++ b/test/components/Label/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The only true label.
+ */
+export default function Label({ color, background, children }) {
+	const styles = {
+		color,
+		background,
+		padding: '.5em 1em',
+		borderRadius: '0.3em',
+		fontFamily: 'arial',
+	};
+
+	return <label style={styles}>{children}</label>;
+}
+Label.propTypes = {
+	/**
+	 * Label text.
+	 */
+	children: PropTypes.string.isRequired,
+	color: PropTypes.string,
+	background: PropTypes.string,
+};
+Label.defaultProps = {
+	color: '#333',
+	background: 'white',
+};