[SDPA-2718] Update docs / new-component / package-dependencies script…

…s. (#412)

* [SDPA-2718] Update generate-readme to work with storybook 5.

* [SDPA-2718] Update package-dependencies script.

* [SDPA-2718] Update new-package script.

* [SDPA-2718] Fixes to new-component script.

package.json

@@ -38,7 +38,10 @@
     "bay:destroy": "docker-compose down -v",
     "bay:logs": "docker-compose logs",
     "bay:cli": "docker exec -i $(docker-compose ps -q app)",
-    "bay:pull": "docker image ls --format \"{{.Repository}}:{{.Tag}}\" | grep amazeeio | grep -v none | xargs -n1 docker pull | cat"
+    "bay:pull": "docker image ls --format \"{{.Repository}}:{{.Tag}}\" | grep amazeeio | grep -v none | xargs -n1 docker pull | cat",
+    "docs:storybook": "cd src/ && yarn run docs",
+    "new-component:storybook": "cd src/ && yarn run new-component",
+    "package-dependencies:storybook": "cd src/ && yarn run package-dependencies"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",

src/package.json

@@ -7,7 +7,10 @@
   "scripts": {
     "start": "start-storybook -p 6006 -s ./static",
     "build-storybook": "cross-env NODE_ENV=production build-storybook -c .storybook -s ./static -o ./public",
-    "test:unit": "cross-env NODE_ENV=test jest --colors"
+    "test:unit": "cross-env NODE_ENV=test jest --colors",
+    "docs": "node ./scripts/generate-readme/generate-readme.js",
+    "new-component": "node ./scripts/generate-component/generate-component.js",
+    "package-dependencies": "node ./scripts/generate-dependencies/generate-dependencies.js"
   },
   "dependencies": {
     "@dpc-sdp/ripple-accordion": "1.0.0-beta.8",
@@ -76,6 +79,7 @@
     "svg-sprite-loader": "^3.7.3",
     "svgo": "^1.2.2",
     "svgo-loader": "^2.2.1",
+    "twig": "^1.13.3",
     "url-loader": "^2.0.1",
     "vue-loader": "^15.7.0",
     "vue-style-loader": "^4.1.2",

src/scripts/generate-package/package_template.vue → src/scripts/generate-component/component_template.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="{{packageClassName}}"></div>
+  <div class="{{componentClassName}}">
+    <span>{{ componentNaturalName }}</span>
+  </div>
 </template>
 
 <script>
 // Add imports
 // import RplIcon from '@dpc-sdp/ripple-icon'
 
 export default {
-  name: '{{packageRippleName}}',
+  name: '{{componentRippleName}}',
   props: {
     // ...
   },
@@ -29,7 +31,7 @@ export default {
   @import "~@dpc-sdp/ripple-global/scss/settings";
   @import "~@dpc-sdp/ripple-global/scss/tools";
 
-  .{{packageClassName}} {
+  .{{componentClassName}} {
     // Add styles
   }
 </style>

src/scripts/generate-component/generate-component.js

@@ -0,0 +1,91 @@
+/**
+ * Generates a Package and folder for a new component, based off the default
+ * templates.
+ */
+
+let Twig = require('twig')
+let fs = require('fs')
+let path = require('path')
+const packageManager = 'yarn'
+const componentDirectory = '../packages/components'
+
+if (process.argv.length < 5) {
+  console.error(`Missing arguments: ${packageManager} run new-component:storybook "[Component name]" "[Component description]" "[Atoms / Molecules / Organisms]"`)
+  console.log(`e.g. ${packageManager} run new-component:storybook "My Component" "A component to..." "Organisms"`)
+  return true
+}
+
+let pkg = fs.readFileSync('./package.json', 'utf-8')
+
+// Arguments
+let componentName = process.argv.length > 2 ? process.argv[2] : 'My Component'
+let description = process.argv.length > 3 ? process.argv[3] : 'A component for...'
+let atom = process.argv.length > 4 ? process.argv[4] : 'Organisms'
+let version = JSON.parse(pkg).version
+
+// Helper functions
+function getSnakeCase (val) {
+  return val.toLowerCase().replace(/\s/gi, '-')
+}
+
+function getTitleCase (val) {
+  const arr = val.split(' ')
+  for (let i = 0; i < arr.length; i++) {
+    let word = arr[i]
+    arr[i] = word[0].toUpperCase() + word.substr(1).toLowerCase()
+  }
+  return arr.join(' ')
+}
+
+function getTitleCaseNoSpace (val) {
+  return getTitleCase(val).replace(/\s/gi, '')
+}
+
+function getCamelCase (val) {
+  const word = getTitleCaseNoSpace(val)
+  return (word[0].toLowerCase() + word.substr(1))
+}
+
+// Get Names
+let data = {
+  componentNaturalName: getTitleCase(componentName),
+  componentSpacelessName: getTitleCaseNoSpace(componentName),
+  componentFileName: getTitleCaseNoSpace(componentName),
+  componentDemoDataName: getCamelCase(componentName),
+  componentRippleName: 'Rpl' + getTitleCaseNoSpace(componentName),
+  componentClassName: 'rpl-' + getSnakeCase(componentName),
+  componentPackageName: 'ripple-' + getSnakeCase(componentName),
+  componentRippleExportName: '{ ' + 'Rpl' + getTitleCaseNoSpace(componentName) + ' }',
+  componentDescription: description,
+  componentAtomFolder: getTitleCaseNoSpace(atom),
+  componentVersion: version
+}
+const directory = componentDirectory + '/' + data.componentAtomFolder + '/' + data.componentSpacelessName + '/'
+const files = [
+  { template: '.npmignore', output: '.npmignore' },
+  { template: 'component_template.vue', output: data.componentSpacelessName + '.vue' },
+  { template: 'index_template.js', output: 'index.js' },
+  { template: 'LICENSE', output: 'LICENSE' },
+  { template: 'package_template.json', output: 'package.json' },
+  { template: 'stories_template.js', output: 'stories.js' }
+]
+
+// Make folder
+if (!fs.existsSync(directory)) {
+  fs.mkdirSync(directory)
+}
+// Create all files
+files.forEach((item) => {
+  Twig.renderFile(path.join(__dirname, item.template), data, (err, twigOutput) => {
+    if (err) {
+      console.log(err)
+    } else {
+      fs.writeFileSync(directory + item.output, twigOutput)
+    }
+  })
+})
+
+console.log(`Created "${getTitleCase(componentName)}"`)
+console.log(`\nTo complete setup, run:`)
+console.log(`- ${packageManager} run package-dependencies:storybook`)
+console.log(`- ${packageManager} run docs:storybook`)

src/scripts/generate-component/index_template.js

@@ -0,0 +1,4 @@
+import {{componentRippleName}} from './{{componentFileName}}.vue'
+
+export {{componentRippleExportName}}
+export default {{componentRippleName}}

src/scripts/generate-component/package_template.json

@@ -0,0 +1,15 @@
+{
+  "name": "@dpc-sdp/{{componentPackageName}}",
+  "version": "{{componentVersion}}",
+  "description": "{{componentDescription}}",
+  "license": "Apache-2.0",
+  "main": "index.js",
+  "homepage": "https://ripple.sdp.vic.gov.au",
+  "repository": "https://github.com/dpc-sdp/ripple/tree/master/packages/components/{{componentAtomFolder}}/{{componentSpacelessName}}",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dpc-sdp/ripple-global": "{{componentVersion}}"
+  }
+}

src/scripts/generate-component/stories_template.js

@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/vue'
+
+import {
+  withKnobs
+} from '@storybook/addon-knobs/vue'
+
+import {{componentRippleName}} from './{{componentFileName}}.vue'
+
+storiesOf('{{componentAtomFolder}}/{{componentSpacelessName}}', module)
+  .addDecorator(withKnobs)
+  .add('{{componentNaturalName}}', () => ({
+    components: { {{componentRippleName}} },
+    template: `<{{componentClassName}} />`,
+    props: {}
+  }))

src/scripts/generate-dependencies/dependency-utils.js

@@ -4,6 +4,7 @@
  */
 
 let fs = require('fs')
+const componentDirectory = '../packages/components'
 
 function getImportStatmentsFromVueFiles (directoryArray) {
   const importSet = new Set()
@@ -57,9 +58,9 @@ function listMissingPackages (packageDirectories) {
 }
 
 function fixMissingPackages (packageDirectories) {
-  // Get lerna version.
-  let lerna = fs.readFileSync('./lerna.json', 'utf-8')
-  lerna = JSON.parse(lerna)
+  // Get version.
+  let rootPkg = fs.readFileSync('./package.json', 'utf-8')
+  let version = JSON.parse(rootPkg).version
 
   packageDirectories.forEach(pkg => {
     // Get each package.
@@ -83,7 +84,7 @@ function fixMissingPackages (packageDirectories) {
 
     // Add ripple packages.
     imports.forEach(neededPackage => {
-      pkgObj.dependencies[neededPackage] = lerna.version
+      pkgObj.dependencies[neededPackage] = version
     })
 
     orderDependencies(pkgObj)
@@ -105,7 +106,7 @@ function orderDependencies (obj) {
 
 function getPackageDirectories () {
   let pkgglob = require('glob-fs')({ gitignore: true })
-  return pkgglob.readdirSync('./packages/**/package.json')
+  return pkgglob.readdirSync(`${componentDirectory}/**/package.json`)
 }
 
 function addComponentsToRootPackage (packageDirectories) {
@@ -122,10 +123,9 @@ function addComponentsToRootPackage (packageDirectories) {
 
   // Add ripple packages to root dependencies.
   packageDirectories.forEach(pkg => {
-    let pkgPath = pkg.substr(0, (pkg.lastIndexOf('/')))
     let pkgJson = fs.readFileSync(pkg)
     pkgJson = JSON.parse(pkgJson)
-    packageJson.dependencies[pkgJson.name] = `file:${pkgPath}`
+    packageJson.dependencies[pkgJson.name] = pkgJson.version
   })
 
   orderDependencies(packageJson)

src/scripts/generate-dependencies/generate-dependencies.js

@@ -1,13 +1,12 @@
 /**
  * Adds package dependencies to:
  * * Root `./package.json`
- * * Components `./packages/.../package.json`
+ * * Components `./components/.../package.json`
  *
  * Requires:
  *
  * 1. Each ripple component package to have a `package.json` file with:
  *   - name
- * 2. The root directory to have a `lerna.json` file with:
  *   - version
  *
  * Script expects to be called via npm in the root directory:
@@ -20,8 +19,8 @@ const utils = require('./dependency-utils')
 // Get all ripple packages and add depdendencies.
 const packages = utils.getPackageDirectories()
 
-// Add all ripple `./packages/` to `./package.json`.
+// Add all ripple `./components/` to `./package.json`.
 utils.addComponentsToRootPackage(packages)
 
-// Add all imported ripple `./packages/` to `./packages/**/package.json`.
+// Add all imported ripple `./components/` to `./components/**/package.json`.
 utils.fixMissingPackages(packages)