Add option to use parent folder name as component name

src/utils/options.js

@@ -7,6 +7,7 @@ function getOption({ opts }, name, defaultValue = true) {
 export const useDisplayName = state => getOption(state, 'displayName')
 export const useSSR = state => getOption(state, 'ssr', true)
 export const useFileName = state => getOption(state, 'fileName')
+export const useFolderName = state => getOption(state, 'folderName', false)
 export const useMinify = state => getOption(state, 'minify')
 export const useTranspileTemplateLiterals = state =>
   getOption(state, 'transpileTemplateLiterals')

src/visitors/displayNameAndId.js

@@ -1,6 +1,6 @@
 import path from 'path'
 import fs from 'fs'
-import { useFileName, useDisplayName, useSSR } from '../utils/options'
+import { useFileName, useFolderName, useDisplayName, useSSR } from '../utils/options'
 import getName from '../utils/getName'
 import prefixLeadingDigit from '../utils/prefixDigit'
 import hash from '../utils/hash'
@@ -48,21 +48,26 @@ const addConfig = t => (path, displayName, componentId) => {
   }
 }
 
-const getBlockName = file => {
+const getBlockName = (file, state) => {
+  if (state && useFolderName(state)) return getFolderName(file)
+
   const name = path.basename(
     file.opts.filename,
     path.extname(file.opts.filename)
   )
+
   return name !== 'index'
     ? name
-    : path.basename(path.dirname(file.opts.filename))
+    : getFolderName(file)
 }
 
+const getFolderName = file => path.basename(path.dirname(file.opts.filename))
+
 const getDisplayName = t => (path, state) => {
   const { file } = state
   const componentName = getName(t)(path)
   if (file) {
-    const blockName = getBlockName(file)
+    const blockName = getBlockName(file, state)
     if (blockName === componentName) {
       return componentName
     }

test/fixtures/use-folder-name/.babelrc

@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "transpileTemplateLiterals": false,
+        "ssr": true,
+        "folderName": true
+      }
+    ]
+  ]
+}

test/fixtures/use-folder-name/code.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+const Test = styled.div`color: red;`;
+const before = styled.div`color: blue;`;
+styled.div``;
+export default styled.button``;

test/fixtures/use-folder-name/output.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+const Test = styled.div.withConfig({
+  displayName: "use-folder-name__Test",
+  componentId: "sc-1lbi44x-0"
+})`color:red;`;
+const before = styled.div.withConfig({
+  displayName: "use-folder-name__before",
+  componentId: "sc-1lbi44x-1"
+})`color:blue;`;
+styled.div.withConfig({
+  displayName: "use-folder-name",
+  componentId: "sc-1lbi44x-2"
+})``;
+export default styled.button.withConfig({
+  displayName: "use-folder-name",
+  componentId: "sc-1lbi44x-3"
+})``;