feat: wizard to generate pages in newly created projects

The wizard produced in a generator project now can prompt
developers through the process of creating new pages

Fixes #16

Author: developher-net

package.json

@@ -105,10 +105,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 0,
-        "functions": 20,
-        "lines": 9,
-        "statements": 9.2
+        "branches": 1.5,
+        "functions": 22.5,
+        "lines": 11,
+        "statements": 11
       }
     },
     "testPathIgnorePatterns": [

templates/default/config/plop/plopfiles/__snapshots__/defaut.test.js.snap templates/default/config/plop/plopfiles/__snapshots__/default.test.js.snap

@@ -1,5 +1,18 @@
 module.exports = plop => {
   const templates = '../templates'
+
+  // Looks for '/' in the path and returns
+  // relative ../ of the same number
+  plop.addHelper('relativeSegments', (path) => {
+    const count = (path.match(/\//g) || []).length
+    const relPath = new Array(count).fill('../', 0, count).join('')
+    // eslint-disable-next-line no-console
+    console.debug(`${count} segments found in path`)
+    // eslint-disable-next-line no-console
+    console.debug(`prefixing with ${relPath}`)
+    return relPath
+  })
+
   plop.setGenerator('component', {
     description: 'Create a component',
     // User input prompts provided as arguments to the template
@@ -46,7 +59,38 @@ module.exports = plop => {
         type: 'add',
         path: 'src/components/{{atomicType}}s/{{properCase componentName}}/{{properCase componentName}}.test.jsx',
         templateFile: `${templates}/components/{{atomicType}}/{{properCase atomicType}}.test.jsx.hbs`,
-      },
+      }
     ],
   });
-};
+  plop.setGenerator('page', {
+    description: 'Create a new page',
+    prompts: [
+      {
+        type: 'input',
+        name: 'pageName',
+        message: 'SEO-friendly page title? (do not include app name)',
+        placeholder: 'My Example Page'
+      },
+      {
+        type: 'input',
+        name: 'pagePath',
+        message: 'URL to page? (Start from the first slash and leave off http://example.com and index.html)',
+        placeholder: 'example/my-example-page'
+      }
+    ],
+    actions: [
+      // Add the page template
+      {
+        type: 'add',
+        path: 'src/pages/{{lowerCase pagePath}}/index.jsx',
+        templateFile: `${templates}/pages/index.jsx.hbs`,
+      },
+      // Add the unit test file
+      {
+        type: 'add',
+        path: 'src/__tests__/pages/{{lowerCase pagePath}}/index.test.jsx',
+        templateFile: `${templates}/pages/index.test.jsx.hbs`,
+      }
+    ]
+  })
+}

templates/default/config/plop/plopfiles/default.js

@@ -0,0 +1,28 @@
+import config from './default'
+
+const mockPlop = {}
+const mockHelpers = {}
+mockPlop.setGenerator = jest.fn()
+mockPlop.addHelper = jest.fn((name, fn) => {
+  mockHelpers[name] = fn
+})
+
+describe('plopfile:default', () => {
+  afterEach(() => {
+    mockPlop.setGenerator.mockClear()
+    mockPlop.addHelper.mockClear()
+  });
+  it('provides the default plop configuration', () => {
+    config(mockPlop)
+    expect(mockPlop.setGenerator.mock.calls.length).toEqual(2)
+    expect(mockPlop.setGenerator.mock.calls[0]).toMatchSnapshot()
+  })
+  describe('helpers.relativeSegments()', () => {
+    it('generates a relative path with depth matching provided depth', () => {
+      config(mockPlop)
+      expect(mockPlop.setGenerator.mock.calls.length).toEqual(2)
+      expect(mockHelpers.relativeSegments('my/example/page')).toEqual('../../')
+      expect(mockHelpers.relativeSegments('page')).toEqual('')
+    })
+  })
+})

templates/default/config/plop/plopfiles/default.test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Link from 'next/link'
+import GlobalHead from '{{relativeSegments pagePath}}../../components/organisms/GlobalHead'
+
+const {{properCase pageName}} = () => {
+  return (
+    <>
+      <GlobalHead title="{{pageName}} - page-plop" />
+      <p>Boilerplate content for {{pageName}}</p>
+      <p>
+        Try navigating to
+
+        <Link href="/">the homepage</Link>
+
+        and observe the URL changing
+      </p>
+    </>
+  )
+}
+
+export default {{properCase pageName}}

templates/default/config/plop/plopfiles/defaut.test.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import {{properCase pageName}} from '{{relativeSegments pagePath}}../../../pages/{{pagePath}}'
+
+describe('Pages:{{properCase pageName}}', () => {
+  it('renders the {{pageName}} page', () => {
+    const component = renderer.create(<{{properCase pageName}} />)
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})