chore: use Mustache for the new component templating flow

packages/components/.prettierignore

@@ -0,0 +1,4 @@
+build
+.firebase
+storybook-static
+dist

packages/components/package.json

@@ -7,7 +7,7 @@
   "types": "dist/index.d.js",
   "scripts": {
     "start": "start-storybook -p 6006 --loglevel verbose",
-    "format": "prettier --write '**/*.{tsx,mdx,md}'",
+    "format": "prettier --write '**/*.{ts,tsx,mdx,md}'",
     "build:sb": "yarn build && build-storybook",
     "build": "tsc",
     "dev": "tsc --watch",
@@ -37,10 +37,12 @@
     "@storybook/addons": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/theming": "^6.4.22",
+    "@types/mustache": "^4.1.2",
     "@types/react-flag-icon-css": "^1.0.5",
     "babel-loader": "8.1.0",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.4",
+    "mustache": "^4.2.0",
     "typescript": "^4.5.5"
   }
 }

packages/components/scripts/new-component.ts

@@ -5,35 +5,48 @@
     $ new-component ComponentName
  */
 
-import { fstat, mkdirSync, readFile, readFileSync, writeFileSync } from "fs";
-import { basename, extname, resolve } from "path";
+import { mkdirSync, readFileSync, writeFileSync } from 'fs'
+import { resolve } from 'path'
+import * as Mustache from 'mustache'
 
-const [componentName] = process.argv.slice(2);
+const [componentName] = process.argv.slice(2)
 
 if (!componentName) {
-    console.log(`⚠️ Component name is required. Example usage:
+  console.log(`⚠️ Component name is required. Example usage:
 $ yarn new-component ComponentName`)
-    process.exit(1)
+  process.exit(1)
 }
 
 try {
-    mkdirSync(resolve(__dirname, `../src/${componentName}`))
+  mkdirSync(resolve(__dirname, `../src/${componentName}`))
 } catch (e) {
-    console.log(`${componentName} already exists`)
-    process.exit(1);
+  console.log(`${componentName} already exists`)
+  process.exit(1)
 }
 
-console.log(`Created a new component: ${componentName}`);
+console.log(`Created a new component: ${componentName}`)
 
 // Load template files
 function createComponentFile(filename: string) {
-    const componentPath = resolve(__dirname, './templates/' + filename);
-    // Transform to include `componentName`
-    const componentNameCode = readFileSync(componentPath, { encoding: 'utf8' }).replace(/ComponentName/g, componentName);
-
-    // Write files to directory
-    writeFileSync(resolve(__dirname, `../src/${componentName}/`, filename.replace('{componentName}', componentName)), componentNameCode);
+  const componentPath = resolve(__dirname, './templates/' + filename)
+  // Transform to include `componentName`
+  const fileTemplate = readFileSync(componentPath, {
+    encoding: 'utf8',
+  })
 
+  // Write files to directory
+  const newFilePath = resolve(
+    __dirname,
+    `../src/${componentName}/`,
+    filename.replace('{componentName}', componentName).replace('.mst', ''),
+  )
+  console.log(`Writing:`, newFilePath)
+  writeFileSync(
+    newFilePath,
+    Mustache.render(fileTemplate, { ComponentName: componentName }),
+  )
 }
 
-['{componentName}.tsx', '{componentName}.stories.mdx'].map(createComponentFile)
+;['{componentName}.tsx.mst', '{componentName}.stories.mdx.mst'].map(
+  createComponentFile,
+)

packages/components/scripts/templates/{componentName}.stories.mdx.mst

@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions'
 import { Story, Meta, Preview, Props, Description } from '@storybook/addon-docs'
-import { ComponentName } from './ComponentName.tsx'
+import { {{ComponentName}} } from './{{ComponentName}}.tsx'
 
-<Meta title="Base Components/ComponentName" component={ComponentName} />
+<Meta title="Base Components/{{ComponentName}}" component={{{ComponentName}}} />
 
 # ComponentNames
 
 Below you will be able to see how to use and configure a `ComponentName` component:
 
-<Story name="ComponentName">
-  <ComponentName />
+<Story name="{{ComponentName}}">
+  <{{ComponentName}} />
 </Story>

packages/components/scripts/templates/{componentName}.tsx

@@ -1,5 +0,0 @@
-interface Props {}
-
-export const ComponentName = (props: Props) => {
-  return <>ComponentName</>
-}

packages/components/scripts/templates/{componentName}.tsx.mst

@@ -0,0 +1,5 @@
+interface Props {}
+
+export const {{ComponentName}} = (props: Props) => {
+  return <>{{ComponentName}}</>
+}

yarn.lock

@@ -7616,6 +7616,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mustache@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "@types/mustache@npm:4.1.2"
+  checksum: 1f37849aae39b3188dbeac71734393586db80faa798795ea730db8e40d393c1d4d6a65ad8735a5ccf6dfc8b920d0792af1e6ef13e3ed2e02d204259678545240
+  languageName: node
+  linkType: hard
+
 "@types/node-fetch@npm:^2.5.7":
   version: 2.5.12
   resolution: "@types/node-fetch@npm:2.5.12"
@@ -23171,10 +23178,12 @@ fsevents@^1.2.7:
     "@storybook/addons": ^6.4.22
     "@storybook/react": ^6.4.22
     "@storybook/theming": ^6.4.22
+    "@types/mustache": ^4.1.2
     "@types/react-flag-icon-css": ^1.0.5
     babel-loader: 8.1.0
     eslint: ^7.32.0
     eslint-plugin-import: ^2.25.4
+    mustache: ^4.2.0
     prettier: ^2.5.1
     react: ^17.0.2
     react-flag-icon-css: ^1.0.25