create-bestax 3.1.4 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constants.d.ts +6 -1
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +48 -3
- package/dist/project-creator.d.ts +2 -1
- package/dist/project-creator.d.ts.map +1 -1
- package/dist/project-creator.js +10 -12
- package/package.json +1 -1
- package/templates/skills/bestax-custom-component/SKILL.md +100 -329
- package/templates/skills/bestax-custom-component/examples/stat-card.tsx +101 -0
- package/templates/skills/bestax-custom-component/references/api.md +10 -1
- package/templates/skills/bestax-custom-component/references/component-catalog.md +7 -1
- package/templates/skills/bestax-custom-component/references/library-contributor.md +395 -0
- package/templates/skills/bestax-custom-component/references/patterns.md +5 -2
- package/templates/skills/bestax-theming/references/css-variables.md +27 -0
- package/templates/skills/bestax-theming/references/themeable-components.md +12 -10
package/dist/constants.d.ts
CHANGED
|
@@ -29,7 +29,12 @@ export declare const PROMPTS: {
|
|
|
29
29
|
readonly SELECT_BULMA_FLAVOR: "Which Bulma CSS flavor would you like to use?";
|
|
30
30
|
readonly INSTALL_SKILLS: "Install the bestax AI skills (.claude/skills) for Claude Code and other agents?";
|
|
31
31
|
};
|
|
32
|
-
export declare const
|
|
32
|
+
export declare const CONFIG_PROVIDER_ICON_VALUES: Record<string, string>;
|
|
33
|
+
export interface ClaudeMdOptions {
|
|
34
|
+
bulmaFlavor: string;
|
|
35
|
+
iconLibrary: string;
|
|
36
|
+
}
|
|
37
|
+
export declare const CLAUDE_MD: (projectName: string, { bulmaFlavor, iconLibrary }: ClaudeMdOptions) => string;
|
|
33
38
|
export interface IconLibrary {
|
|
34
39
|
name: string;
|
|
35
40
|
display: string;
|
package/dist/constants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;wCAMQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;wCAMQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;AAOX,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK9D,CAAC;AAKF,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,GACpB,aAAa,MAAM,EACnB,8BAA8B,eAAe,KAC5C,MA8DF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,EAyCvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EA0CtC,CAAC"}
|
package/dist/constants.js
CHANGED
|
@@ -27,13 +27,57 @@ export const PROMPTS = {
|
|
|
27
27
|
SELECT_BULMA_FLAVOR: 'Which Bulma CSS flavor would you like to use?',
|
|
28
28
|
INSTALL_SKILLS: 'Install the bestax AI skills (.claude/skills) for Claude Code and other agents?',
|
|
29
29
|
};
|
|
30
|
-
//
|
|
31
|
-
//
|
|
32
|
-
|
|
30
|
+
// Icon libraries that require a `ConfigProvider iconLibrary` wrapper, mapped
|
|
31
|
+
// to the exact prop value the scaffolder writes into main.tsx/jsx ('none' and
|
|
32
|
+
// 'fontawesome' are the defaults and need no provider). Shared with
|
|
33
|
+
// project-creator.setupConfigProvider AND the CLAUDE_MD template below so the
|
|
34
|
+
// generated docs can never drift from the generated code.
|
|
35
|
+
export const CONFIG_PROVIDER_ICON_VALUES = {
|
|
36
|
+
mdi: 'mdi',
|
|
37
|
+
ionicons: 'ion',
|
|
38
|
+
'material-icons': 'material-icons',
|
|
39
|
+
'material-symbols': 'material-symbols',
|
|
40
|
+
};
|
|
41
|
+
export const CLAUDE_MD = (projectName, { bulmaFlavor, iconLibrary }) => {
|
|
42
|
+
const flavor = BULMA_FLAVORS.find(f => f.name === bulmaFlavor);
|
|
43
|
+
const icon = ICON_LIBRARIES.find(lib => lib.name === iconLibrary);
|
|
44
|
+
const setupLines = [
|
|
45
|
+
`- Bulma flavor: **${bulmaFlavor}** — the app imports **prebuilt** CSS` +
|
|
46
|
+
(flavor ? ` (\`${flavor.importStatement.trim()}\`)` : '') +
|
|
47
|
+
`; there is no Sass pipeline unless you add \`sass\`.`,
|
|
48
|
+
];
|
|
49
|
+
if (flavor?.needsPrefix) {
|
|
50
|
+
setupLines.push(`- Every Bulma class carries the \`bestax-\` prefix and the app is wrapped in ` +
|
|
51
|
+
`\`<ConfigProvider classPrefix="bestax-">\` — custom CSS selectors must match the prefix.`);
|
|
52
|
+
}
|
|
53
|
+
const providerIconValue = CONFIG_PROVIDER_ICON_VALUES[iconLibrary];
|
|
54
|
+
setupLines.push(iconLibrary === 'none'
|
|
55
|
+
? `- No icon library is installed — add one before using \`<Icon>\` ` +
|
|
56
|
+
`(https://bestax.io/docs/api/elements/icon).`
|
|
57
|
+
: `- Icon library: **${icon?.display ?? iconLibrary}** — use \`<Icon name="..." />\`.` +
|
|
58
|
+
(providerIconValue
|
|
59
|
+
? ` The app is already wrapped in \`<ConfigProvider iconLibrary="${providerIconValue}">\` ` +
|
|
60
|
+
`— extend that provider rather than adding a second one.`
|
|
61
|
+
: ''));
|
|
62
|
+
return `# ${projectName}
|
|
33
63
|
|
|
34
64
|
This app is built with [\`@allxsmith/bestax-bulma\`](https://bestax.io) — React components for
|
|
35
65
|
Bulma 1.x.
|
|
36
66
|
|
|
67
|
+
## This app's setup
|
|
68
|
+
|
|
69
|
+
${setupLines.join('\n')}
|
|
70
|
+
|
|
71
|
+
## House style
|
|
72
|
+
|
|
73
|
+
- Never inline \`style={{}}\` — use the helper props every component accepts (\`m*\`/\`p*\`
|
|
74
|
+
spacing, \`textColor\`/\`bgColor\`, \`display="flex"\`, \`flexDirection\`, \`alignItems\`).
|
|
75
|
+
Flex layouts have no \`gap\` helper — space children with margins (\`Grid\` has a real
|
|
76
|
+
\`gap\` prop and \`Columns\` has \`gapSize\`, so prefer those there).
|
|
77
|
+
- Compose existing components before writing custom CSS; theme via \`Theme\` and \`--bulma-*\`
|
|
78
|
+
variables, never hardcoded colors.
|
|
79
|
+
- There is no test runner or Storybook in this app — don't assume one.
|
|
80
|
+
|
|
37
81
|
## AI skills
|
|
38
82
|
|
|
39
83
|
\`.claude/skills/\` contains Agent Skills that teach Claude how to build with this library. They load
|
|
@@ -52,6 +96,7 @@ Prefer the library's components and these skills over hand-written Bulma markup
|
|
|
52
96
|
- LLM-ready docs: https://bestax.io/llms.txt (curated index) and https://bestax.io/llms-full.txt
|
|
53
97
|
- Using bestax with AI tools: https://bestax.io/docs/guides/llms
|
|
54
98
|
`;
|
|
99
|
+
};
|
|
55
100
|
export const ICON_LIBRARIES = [
|
|
56
101
|
{
|
|
57
102
|
name: 'none',
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type ClaudeMdOptions } from './constants.js';
|
|
1
2
|
export interface ProjectConfig {
|
|
2
3
|
projectName: string;
|
|
3
4
|
template: string;
|
|
@@ -19,7 +20,7 @@ export declare class ProjectCreator {
|
|
|
19
20
|
checkExistingDirectory(targetPath: string, targetDir: string): Promise<boolean>;
|
|
20
21
|
getTemplatePath(template: string): string;
|
|
21
22
|
copyTemplate(template: string, targetPath: string): Promise<void>;
|
|
22
|
-
setupSkills(targetPath: string, projectName: string): Promise<void>;
|
|
23
|
+
setupSkills(targetPath: string, projectName: string, options: ClaudeMdOptions): Promise<void>;
|
|
23
24
|
setupBulmaFlavor(targetPath: string, bulmaFlavor: string, template: string): Promise<void>;
|
|
24
25
|
private getIconName;
|
|
25
26
|
private getIconProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"AA2BA,OAAO,EAML,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,YAAY,CAAS;gBAEjB,YAAY,CAAC,EAAE,MAAM;IAI3B,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAa3D,sBAAsB,CAC1B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC;IAkBnB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAInC,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAMjE,WAAW,CACf,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,IAAI,CAAC;IAiBV,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmDhB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IAYd,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IA2IV,mBAAmB,CACvB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmEV,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;CAwIvE"}
|
package/dist/project-creator.js
CHANGED
|
@@ -6,7 +6,7 @@ import { checkDirectoryExists, isDirectoryEmpty, emptyDirectory, ensureDirectory
|
|
|
6
6
|
import { promptProjectName, promptOverwriteDirectory, promptTemplate, promptIconLibrary, promptBulmaFlavor, promptInstallSkills, } from './prompts.js';
|
|
7
7
|
import { displayHeader, displaySuccess, displayError, displayCancelled, } from './display.js';
|
|
8
8
|
import { validateProjectName } from './validators.js';
|
|
9
|
-
import { MESSAGES, ICON_LIBRARIES, BULMA_FLAVORS, CLAUDE_MD, } from './constants.js';
|
|
9
|
+
import { MESSAGES, ICON_LIBRARIES, BULMA_FLAVORS, CLAUDE_MD, CONFIG_PROVIDER_ICON_VALUES, } from './constants.js';
|
|
10
10
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
11
11
|
export class ProjectCreator {
|
|
12
12
|
templatesDir;
|
|
@@ -45,14 +45,14 @@ export class ProjectCreator {
|
|
|
45
45
|
await ensureDirectory(targetPath);
|
|
46
46
|
await copyDirectory(templatePath, targetPath);
|
|
47
47
|
}
|
|
48
|
-
async setupSkills(targetPath, projectName) {
|
|
48
|
+
async setupSkills(targetPath, projectName, options) {
|
|
49
49
|
const skillsSrc = path.join(this.templatesDir, 'skills');
|
|
50
50
|
if (!(await checkDirectoryExists(skillsSrc))) {
|
|
51
51
|
console.log(chalk.yellow(' Skipping skills — bundle not found in this build.'));
|
|
52
52
|
return;
|
|
53
53
|
}
|
|
54
54
|
await fs.copy(skillsSrc, path.join(targetPath, '.claude', 'skills'));
|
|
55
|
-
await fs.writeFile(path.join(targetPath, 'CLAUDE.md'), CLAUDE_MD(projectName));
|
|
55
|
+
await fs.writeFile(path.join(targetPath, 'CLAUDE.md'), CLAUDE_MD(projectName, options));
|
|
56
56
|
console.log(chalk.green(MESSAGES.SKILLS_ADDED));
|
|
57
57
|
}
|
|
58
58
|
async setupBulmaFlavor(targetPath, bulmaFlavor, template) {
|
|
@@ -264,14 +264,9 @@ export class ProjectCreator {
|
|
|
264
264
|
configProps.push('classPrefix="bestax-"');
|
|
265
265
|
}
|
|
266
266
|
if (needsIconLibrary) {
|
|
267
|
-
//
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
ionicons: 'ion',
|
|
271
|
-
'material-icons': 'material-icons',
|
|
272
|
-
'material-symbols': 'material-symbols',
|
|
273
|
-
};
|
|
274
|
-
const iconLibraryValue = iconLibraryMap[iconLibrary];
|
|
267
|
+
// Shared with the CLAUDE_MD template so the generated docs always
|
|
268
|
+
// name the same provider value the scaffolder writes here.
|
|
269
|
+
const iconLibraryValue = CONFIG_PROVIDER_ICON_VALUES[iconLibrary];
|
|
275
270
|
if (iconLibraryValue) {
|
|
276
271
|
configProps.push(`iconLibrary="${iconLibraryValue}"`);
|
|
277
272
|
}
|
|
@@ -395,7 +390,10 @@ export class ProjectCreator {
|
|
|
395
390
|
await this.setupIconLibrary(targetPath, iconLibrary, template);
|
|
396
391
|
await this.setupConfigProvider(targetPath, bulmaFlavor, iconLibrary, template);
|
|
397
392
|
if (installSkills) {
|
|
398
|
-
await this.setupSkills(targetPath, projectName
|
|
393
|
+
await this.setupSkills(targetPath, projectName, {
|
|
394
|
+
bulmaFlavor,
|
|
395
|
+
iconLibrary,
|
|
396
|
+
});
|
|
399
397
|
}
|
|
400
398
|
displaySuccess(targetDir);
|
|
401
399
|
}
|