feat: add new plop template and script for a component that has subco…

…mponents, with 'Root' as a starting point [SRED-131] (#375)

* feat: add new plop template and script for a component that has subcomponents, with 'Root' as a starting point

* fix: update package-lock.json

* chore: add new-component-with-subcomponents script to root package.json file

* chore: resolve merge conflicts

Makefile

@@ -23,9 +23,12 @@ main-release:
 	make main-publish
 	npm install
 
-# create command for plop templates
+# create commands for plop templates
 new-component:
-	npx plop --plopfile ./scripts/plopfile.js
+	npx plop --plopfile ./scripts/componentPlopfile.js
+
+new-component-with-subcomponents:
+	npx plop --plopfile ./scripts/componentWithSubcomponentsPlopfile.js
 
 validate:
 	npm run lint

package.json

@@ -118,6 +118,7 @@
     "experimental-version": "make experimental-version",
     "experimental-publish": "make experimental-publish",
     "new-component": "make new-component",
+    "new-component-with-subcomponents": "make new-component-with-subcomponents",
     "lint": "eslint --fix --ext .ts,.tsx ui/",
     "clean": "turbo run clean && rm -rf node_modules",
     "dev": "turbo run dev --no-cache --continue",

scripts/plopfile.js → scripts/componentPlopfile.js

@@ -1,5 +1,5 @@
 const prettier = require("prettier");
-const lerna = require("./../lerna.json");
+const lerna = require("../lerna.json");
 
 module.exports = function (plop) {
   plop.setGenerator("component", {

scripts/componentWithSubcomponentsPlopfile.js

@@ -0,0 +1,81 @@
+const prettier = require("prettier");
+const lerna = require("../lerna.json");
+
+module.exports = function (plop) {
+  plop.setGenerator("component", {
+    description: "Create a new WPDS UI kit component with subcomponents",
+    prompts: [
+      {
+        type: "input",
+        name: "componentName",
+        message: "What is the name of the component? i.e. VisuallyHidden",
+        validate: function (value) {
+          if (/.+/.test(value)) {
+            return true;
+          }
+
+          return "component name is required";
+        },
+      },
+    ],
+    actions: function (data) {
+      const actions = [
+        {
+          type: "addMany",
+          destination: `../ui/{{ dashCase componentName }}`,
+          base: "../templates/component-with-subcomponents",
+          templateFiles: "../templates/component-with-subcomponents/**/*",
+          data: {
+            componentName: "{{ dashCase componentName }}",
+          },
+        },
+        {
+          type: "addMany",
+          destination: `../build.washingtonpost.com/docs/components`,
+          base: "../templates/component-doc",
+          templateFiles: "../templates/component-doc/**/*",
+          data: {
+            packageName: "{{ dashCase componentName }}",
+            componentName: "{{ componentName }}",
+            version: lerna.version,
+          },
+        },
+        {
+          type: "append",
+          path: "../ui/kit/src/index.ts",
+          pattern: "// insert new component exports here",
+          template: `export * from "@washingtonpost/wpds-{{ dashCase componentName }}";`,
+        },
+      ];
+
+      actions.push({
+        type: "append",
+        path: "../ui/kit/package.json",
+        pattern: `"dependencies": {`,
+        template: `"@washingtonpost/wpds-{{ dashCase componentName }}": "${lerna.version}",`,
+      });
+
+      actions.push({
+        type: "append",
+        path: "../ui/kit/package.json",
+        pattern: `"peerDependencies": {`,
+        template: `"@washingtonpost/wpds-{{ dashCase componentName }}": "*",`,
+      });
+
+      // format the package.json file using prettier.format
+      actions.push({
+        type: "modify",
+        path: "../ui/kit/package.json",
+        pattern: /\n/,
+        template: "",
+        transform: function (file) {
+          return prettier.format(file, {
+            parser: "json",
+          });
+        },
+      });
+
+      return actions;
+    },
+  });
+};

templates/component-with-subcomponents/README.md.hbs

@@ -0,0 +1,11 @@
+# {{ componentName }}
+
+```jsx
+import { {{ componentName }} } from "@washingtonpost/wpds-ui-kit";
+
+function Component() {
+	return (
+		<{{ componentName }} />
+	);
+}
+```

templates/component-with-subcomponents/package.json.hbs

@@ -0,0 +1,45 @@
+{
+	"name": "@washingtonpost/wpds-{{ dashCase componentName }}",
+	"version": "{{ version }}",
+	"description": "WPDS {{ componentName }}",
+	"author": "WPDS Support <wpds@washpost.com>",
+	"homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
+	"license": "MIT",
+	"source": "src/index.ts",
+	"main": "dist/index.js",
+	"module": "dist/esm/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist",
+		"README.md",
+		"src"
+	],
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/washingtonpost/wpds-ui-kit.git"
+	},
+	"scripts": {
+		"test": "echo \"Error: run tests from root\" && exit 1",
+		"build": "tsup src/index.ts --loader .ts=tsx --minify --format esm,cjs --dts --sourcemap --legacy-output --external react",
+		"dev": "tsup src/index.ts --format esm,cjs --watch --dts --legacy-output --external react",
+    	"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+	},
+	"bugs": {
+		"url": "https://github.com/washingtonpost/wpds-ui-kit/issues"
+	},
+	"devDependencies": {
+		"tsup": "5.11.13",
+    	"typescript": "4.5.5"
+	},
+	"peerDependencies": {
+		"@washingtonpost/wpds-theme": "*",
+		"react": "^16.8.6 || ^17.0.2"
+	},
+	"dependencies": {
+		"@washingtonpost/wpds-theme": "{{ version }}"
+	}
+}

templates/component-with-subcomponents/src/index.ts.hbs

@@ -0,0 +1,2 @@
+export * from "./{{componentName}}";
+export * from "./{{componentName}}Root";

templates/component-with-subcomponents/src/play.stories.tsx.hbs

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { {{ componentName }}Root as Component } from "./";
+
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+
+
+export default {
+	title: "{{ componentName }}Root",
+	component: Component,
+} as ComponentMeta<typeof Component>;
+
+const Template: ComponentStory<typeof Component> = (args) => (
+  <Component {...args} />
+);
+
+export const {{ componentName }}Root = Template.bind({});
+
+{{ componentName }}Root.args = {};

templates/component-with-subcomponents/src/{{ componentName }}.tsx.hbs

@@ -0,0 +1,9 @@
+import { {{ componentName }}Root } from "./{{ componentName }}Root";
+
+export type {{ componentName }}Props = {
+  Root: typeof {{ componentName }}Root;
+};
+
+export const {{ componentName }}: {{ componentName }}Props = {
+  Root: {{ componentName }}Root,
+};

templates/component-with-subcomponents/src/{{ componentName }}Root.tsx.hbs

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import type * as WPDS from "@washingtonpost/wpds-theme";
+
+const NAME = "{{ componentName }}Root";
+
+export type {{ componentName }}RootProps = {
+  /** Any React node may be used as a child to allow for formatting */
+  children?: React.ReactNode;
+  /** Override CSS */
+  css?: WPDS.CSS;
+} & React.ComponentPropsWithRef<"div">;
+
+export const {{ componentName }}Root = React.forwardRef<HTMLDivElement, {{ componentName }}RootProps>(
+  ({ ...props }, ref) => {
+    return <div {...props} ref={ref} />;
+  }
+);
+
+{{ componentName }}Root.displayName = NAME;