framework.dev/plopfile.js at main · ADTmux/framework.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/* eslint-disable @typescript-eslint/no-var-requires */
const htmlElements = Object.keys(require("html-element-list"))
const _ = require("lodash")
const fs = require("fs/promises")

module.exports = function (
	/** @type {import('plop').NodePlopAPI} */
	plop
) {
	plop.setPrompt("autocomplete", require("inquirer-autocomplete-prompt"))
	plop.setPrompt("file-selector", require("inquirer-file-tree-selection-prompt"))
	plop.setHelper("startCase", _.startCase)
	plop.setHelper("kebabCase", _.kebabCase)
	plop.setHelper("camelCase", _.camelCase)
	plop.setHelper("pascalCase", _.flow(_.camelCase, _.upperFirst))
	plop.setGenerator("component", {
		description: "design system component",
		prompts: [
			{
				type: "input",
				name: "name",
				message: "name of the component",
			},
			{
				type: "autocomplete",
				name: "el",
				message: "the HTML element the component will have at its root",
				source: (_answers, input) =>
					htmlElements.filter((el) => el.startsWith(input)),
			},
		],
		actions: [
			{
				type: "add",
				path: "packages/system/src/components/{{kebabCase name}}.tsx",
				templateFile: "plop-templates/component.hbs",
			},
			{
				type: "add",
				path: "packages/system/src/components/{{kebabCase name}}.css.ts",
				templateFile: "plop-templates/component.css.hbs",
			},
			{
				type: "add",
				path: "packages/system/src/components/{{kebabCase name}}.stories.tsx",
				templateFile: "plop-templates/component.stories.hbs",
			},
		],
	})
	plop.setGenerator("icon", {
		description: "design system icon",
		prompts: [
			{
				type: "input",
				name: "name",
				message: "name of the icon (without the word 'icon', it will be appended automatically)",
			},
		],
		actions: [
			{
				type: "add",
				path: "packages/system/src/icons/{{kebabCase name}}-icon.tsx",
				templateFile: "plop-templates/icon.hbs",
			},
		],
	})
	plop.setGenerator("color scheme", {
		description: "generate a color scheme from a DSP tokens file",
		prompts: [
			{
				type: "input",
				name: "name",
				message: "name for the color scheme",
			},
			{
				type: "file-selector",
				name: "tokensFile",
				message: "token file from the DSP package",
				basePath: ".",
			},
		],
		actions: [
			async function (data) {
				const tokensFile = await fs.readFile(data.tokensFile)
				const tokensData = JSON.parse(tokensFile)
				data.palette = JSON.stringify(
					Object.fromEntries(
						tokensData.entities
							.filter((color) => color.category_id === "ref.palette")
							.map((color) => [
								_.camelCase(_.last(color.id.split("."))),
								color.value,
							])
					)
				)
			},
			{
				type: "add",
				path: "packages/system/src/themes/{{kebabCase name}}-color-scheme.ts",
				templateFile: "plop-templates/color-scheme.hbs",
			},
		],
	})
}