Skip to content

Commit 189ced1

Browse files
pfultonpfulton
committed
fix(generator): restore files to pre-formatted state
1 parent 5537c1b commit 189ced1

File tree

12 files changed

+270
-235
lines changed

12 files changed

+270
-235
lines changed

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ components/expressvars/css/**/*.css
88
components/vars/css/**/*.css
99
components/tokens/custom-*/*.css
1010
tools/preview/storybook-static/**
11+
tools/generator
1112
dist
1213
template.hbs
1314

‎tools/generator/plopfile.js

Lines changed: 70 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,40 @@
1-
import { spawn } from "child_process";
2-
import { existsSync, readdirSync, readFileSync } from "fs";
3-
import { readFile } from "fs/promises";
4-
import { resolve } from "path";
1+
import { spawn } from 'child_process';
2+
import { existsSync, readdirSync, readFileSync } from 'fs';
3+
import { readFile } from 'fs/promises';
4+
import { resolve } from 'path';
55

6-
import yaml from "js-yaml";
7-
import cheerio from "cheerio";
6+
import yaml from 'js-yaml';
7+
import cheerio from 'cheerio';
88

9-
import autocompletePrompt from "inquirer-autocomplete-prompt";
10-
import fuzzy from "fuzzy";
9+
import autocompletePrompt from 'inquirer-autocomplete-prompt';
10+
import fuzzy from 'fuzzy';
1111

1212
const fetchPackage = async (path) =>
13-
readFile(resolve(path, "package.json"), {
14-
encoding: "utf8",
15-
}).then(JSON.parse);
13+
readFile(resolve(path, 'package.json'), {
14+
encoding: 'utf8'
15+
})
16+
.then(JSON.parse);
1617

1718
export default async (plop) => {
1819
/* Allow customization from the environment variables */
19-
const rootFolder = process.env.ROOT_DIR ?? resolve(process.cwd(), "../../");
20-
const srcPath =
21-
process.env.COMPONENT_DIR ?? resolve(rootFolder, "components");
22-
const projectName = process.env.PROJECT_NAME ?? "Spectrum CSS";
20+
const rootFolder = process.env.ROOT_DIR ?? resolve(process.cwd(), '../../');
21+
const srcPath = process.env.COMPONENT_DIR ?? resolve(rootFolder, 'components');
22+
const projectName = process.env.PROJECT_NAME ?? 'Spectrum CSS';
2323
const pkg = await fetchPackage(rootFolder);
2424

25-
const tokens = await fetchPackage(resolve(srcPath, "tokens"));
26-
const builder = await fetchPackage(
27-
resolve(process.cwd(), "../component-builder-simple")
28-
);
25+
const tokens = await fetchPackage(resolve(srcPath, 'tokens'));
26+
const builder = await fetchPackage(resolve(process.cwd(), '../component-builder-simple'));
2927

3028
/* Fetch the project name */
31-
plop.setWelcomeMessage(
32-
`Welcome to the ${projectName} component generator!\n To get started, answer a few short questions about your component.`
33-
);
29+
plop.setWelcomeMessage(`Welcome to the ${projectName} component generator!\n To get started, answer a few short questions about your component.`);
3430

3531
/* Fetch the list of existing components to avoid conflicts */
36-
const existingComponents = readdirSync(srcPath, {
37-
withFileTypes: true,
38-
}).reduce((pkgs, dirent) => {
32+
const existingComponents = readdirSync(srcPath, { withFileTypes: true }).reduce((pkgs, dirent) => {
3933
if (dirent.isDirectory()) pkgs.push(dirent.name);
4034
return pkgs;
4135
}, []);
4236

43-
plop.setHelper("parse", (str, sep = "/", start = 0, end = undefined) => {
37+
plop.setHelper('parse', (str, sep = '/', start = 0, end = undefined) => {
4438
if (!str) return;
4539
const array = str.split(sep);
4640
return array.slice(start, end).join(sep);
@@ -49,9 +43,7 @@ export default async (plop) => {
4943
function getExistingMarkupExample(metadataPath, name, plop) {
5044
if (existsSync(`${metadataPath}/${name}.yml`) === false) return;
5145

52-
const r = readFileSync(`${metadataPath}/${name}.yml`, {
53-
encoding: "utf8",
54-
});
46+
const r = readFileSync(`${metadataPath}/${name}.yml`, { encoding: 'utf8' });
5547
const result = yaml.load(r);
5648
if (!result) return;
5749

@@ -60,139 +52,113 @@ export default async (plop) => {
6052

6153
const $ = cheerio.load(examples[0].markup);
6254

63-
const className = plop.renderString("spectrum-{{ pascalCase name }}", {
64-
name,
65-
});
55+
const className = plop.renderString('spectrum-{{ pascalCase name }}', { name });
6656
const $example = $(`.${className}`);
6757

6858
if (!$example) return;
6959

7060
return $example.first().toString();
7161
}
7262

73-
plop.setActionType(
74-
"install",
75-
(_, config) =>
76-
new Promise((resolve, reject) => {
77-
const install = spawn("yarn", ["install"], {
78-
cwd: config.root,
79-
shell: true,
80-
stdio: "inherit",
81-
});
82-
install.on("close", (code) => {
83-
if (`${code}` === "0") {
84-
resolve(`Successfully installed dependencies.`);
85-
} else {
86-
reject(`Failed to install dependencies; exit code ${code}.`);
87-
}
88-
});
89-
})
90-
);
63+
plop.setActionType('install', (_, config) => new Promise((resolve, reject) => {
64+
const install = spawn('yarn', ['install'], {
65+
cwd: config.root,
66+
shell: true,
67+
stdio: 'inherit',
68+
});
69+
install.on('close', (code) => {
70+
if (`${code}` === '0') {
71+
resolve(`Successfully installed dependencies.`);
72+
} else {
73+
reject(`Failed to install dependencies; exit code ${code}.`);
74+
}
75+
});
76+
}));
9177

92-
plop.setGenerator("component", {
93-
description: "Component generator",
78+
plop.setGenerator('component', {
79+
description: 'Component generator',
9480
prompts: [
9581
{
96-
type: "input",
97-
name: "name",
98-
message: "Component name (i.e. Help text)",
82+
type: 'input',
83+
name: 'name',
84+
message: 'Component name (i.e. Help text)',
9985
validate: (answer) => {
10086
if (!answer || answer.length < 1) {
10187
return "Naming is hard; but it must have a name. You can always change it later.";
10288
}
10389

104-
const name = plop.renderString("{{ lowerCase (camelCase name) }}", {
105-
name: answer,
106-
});
90+
const name = plop.renderString('{{ lowerCase (camelCase name) }}', { name: answer });
10791
if (name && existingComponents && existingComponents.includes(name)) {
10892
return "A component with that name already exists. You can always change it later.";
10993
}
11094

11195
return true;
11296
},
113-
transformer: (answer) =>
114-
plop.renderString("{{ sentenceCase name }}", {
115-
name: answer,
116-
}),
97+
transformer: (answer) => plop.renderString('{{ sentenceCase name }}', { name: answer }),
11798
},
11899
],
119100
actions: (data) => {
120101
data.description = `The ${data.name} component is...`;
121-
data.folderName = plop.renderString(
122-
"{{ lowerCase (camelCase name) }}",
123-
data
124-
);
102+
data.folderName = plop.renderString('{{ lowerCase (camelCase name) }}', data);
125103
data.pkg = pkg;
126104
data.tokens = { name: tokens.name, version: tokens.version };
127105
data.builder = { name: builder.name, version: builder.version };
128106

129107
return [
130108
{
131-
type: "addMany",
109+
type: 'addMany',
132110
destination: `${srcPath}/{{ folderName }}`,
133-
base: "templates",
134-
templateFiles: "templates/**/*.hbs",
111+
base: 'templates',
112+
templateFiles: 'templates/**/*.hbs',
135113
skipIfExists: true,
136114
},
137115
{
138-
type: "install",
116+
type: 'install',
139117
root: rootFolder,
140118
},
141-
(data, config, plop) =>
142-
plop.renderString(
143-
`Successfully created component {{ folderName }}. To preview your component, run \`yarn dev\` and navigate to the {{ folderName }} story.`
144-
),
119+
(data, config, plop) => plop.renderString(`Successfully created component {{ folderName }}. To preview your component, run \`yarn dev\` and navigate to the {{ folderName }} story.`),
145120
];
146121
},
147122
});
148123

149-
plop.setPrompt("autocomplete", autocompletePrompt);
150-
plop.setGenerator("story", {
151-
description: "Storybook generator for existing components",
124+
plop.setPrompt('autocomplete', autocompletePrompt);
125+
plop.setGenerator('story', {
126+
description: 'Storybook generator for existing components',
152127
prompts: [
153128
{
154-
type: "autocomplete",
155-
name: "folderName",
156-
message: "Select the component you wish to update",
157-
source: (_, input = "") =>
158-
new Promise((resolve, reject) => {
159-
if (existingComponents.length === 0) reject("No components found.");
160-
setTimeout(() => {
161-
const results = fuzzy.filter(input, existingComponents);
162-
if (results && results.length > 0)
163-
resolve(results.map((r) => r.string));
164-
}, Math.random() * 470 + 30);
165-
}),
166-
emptyText: "No components match the search.",
129+
type: 'autocomplete',
130+
name: 'folderName',
131+
message: 'Select the component you wish to update',
132+
source: (_, input = '') => new Promise((resolve, reject) => {
133+
if (existingComponents.length === 0) reject('No components found.');
134+
setTimeout(() => {
135+
const results = fuzzy.filter(input, existingComponents);
136+
if (results && results.length > 0) resolve(results.map((r) => r.string));
137+
}, Math.random() * 470 + 30);
138+
}),
139+
emptyText: 'No components match the search.',
167140
},
168141
],
169142
actions: (data) => {
170-
data.name = plop.renderString("{{ sentenceCase folderName }}", data);
143+
data.name = plop.renderString('{{ sentenceCase folderName }}', data);
171144
data.description = `The ${data.name} component is...`;
172145

173-
const metadataPath = plop.renderString(
174-
`${srcPath}/{{ folderName }}/metadata`,
175-
data
176-
);
146+
const metadataPath = plop.renderString(`${srcPath}/{{ folderName }}/metadata`, data);
177147
data.example = getExistingMarkupExample(metadataPath, data.name, plop);
178148

179149
return [
180150
{
181-
type: "addMany",
151+
type: 'addMany',
182152
destination: `${srcPath}/{{ folderName }}/stories`,
183-
base: "templates/stories",
184-
templateFiles: "templates/stories/*.hbs",
153+
base: 'templates/stories',
154+
templateFiles: 'templates/stories/*.hbs',
185155
skipIfExists: true,
186156
},
187157
{
188-
type: "install",
158+
type: 'install',
189159
root: rootFolder,
190160
},
191-
(data, config, plop) =>
192-
plop.renderString(
193-
`Successfully updated {{ folderName }}. To preview your component, run \`yarn dev\` and navigate to the {{ folderName }} story.`,
194-
data
195-
),
161+
(data, config, plop) => plop.renderString(`Successfully updated {{ folderName }}. To preview your component, run \`yarn dev\` and navigate to the {{ folderName }} story.`, data),
196162
];
197163
},
198164
});

‎tools/generator/templates/.npmignore.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/dist/docs/
1+
/dist/docs/

‎tools/generator/templates/README.md.hbs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
# @spectrum-css/{{folderName}}
1+
# @spectrum-css/{{ folderName }}
22

3-
> The Spectrum CSS
4-
{{name}}
5-
component This package is part of the [Spectrum CSS
6-
project](https://github.com/adobe/spectrum-css). See the [Spectrum CSS
7-
documentation](https://opensource.adobe.com/spectrum-css/{{folderName}}).
3+
> The Spectrum CSS {{ name }} component
4+
5+
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
6+
7+
See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/{{ folderName }}).

‎tools/generator/templates/gulpfile.js.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('@spectrum-css/component-builder-simple');
1+
module.exports = require('@spectrum-css/component-builder-simple');

‎tools/generator/templates/index.css.hbs

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,40 @@
1-
/*! Copyright 2023 Adobe. All rights reserved. This file is licensed to you
2-
under the Apache License, Version 2.0 (the "License"); you may not use this file
3-
except in compliance with the License. You may obtain a copy of the License at
4-
http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or
5-
agreed to in writing, software distributed under the License is distributed on
6-
an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either
7-
express or implied. See the License for the specific language governing
8-
permissions and limitations under the License. */ .spectrum-{{pascalCase name}}
9-
{ /* Variables defined here */ /* --spectrum-{{folderName}}-... */ &:lang(ja),
10-
&:lang(zh), &:lang(ko) { --spectrum-{{folderName}}-line-height-cjk:
11-
var(--spectrum-cjk-line-height-100); } } .spectrum-{{pascalCase name}}--sizeS {}
12-
.spectrum-{{pascalCase name}}--sizeM {} .spectrum-{{pascalCase name}}--sizeL {}
13-
.spectrum-{{pascalCase name}}--sizeXL {} @media (forced-colors: active) {
14-
.spectrum-{{pascalCase name}}
15-
{ --highcontrast-{{folderName}}-content-color-default: CanvasText;
16-
forced-color-adjust: none; } } .spectrum-{{pascalCase name}}
17-
{ /* Properties defined here */ color: var(--highcontrast-{{folderName}}-content-color-default,
18-
var(--mod-{{folderName}}-content-color-default, var(--spectrum-{{folderName}}-content-color-default)));
19-
}
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
.spectrum-{{ pascalCase name }} {
14+
/* Variables defined here */
15+
/* --spectrum-{{ folderName }}-... */
16+
17+
&:lang(ja),
18+
&:lang(zh),
19+
&:lang(ko) {
20+
--spectrum-{{ folderName }}-line-height-cjk: var(--spectrum-cjk-line-height-100);
21+
}
22+
}
23+
24+
.spectrum-{{ pascalCase name }}--sizeS {}
25+
.spectrum-{{ pascalCase name }}--sizeM {}
26+
.spectrum-{{ pascalCase name }}--sizeL {}
27+
.spectrum-{{ pascalCase name }}--sizeXL {}
28+
29+
@media (forced-colors: active) {
30+
.spectrum-{{ pascalCase name }} {
31+
--highcontrast-{{ folderName }}-content-color-default: CanvasText;
32+
33+
forced-color-adjust: none;
34+
}
35+
}
36+
37+
.spectrum-{{ pascalCase name }} {
38+
/* Properties defined here */
39+
color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default)));
40+
}

0 commit comments

Comments
 (0)