create-bestax 4.0.2 → 4.1.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.map +1 -1
- package/dist/constants.js +3 -1
- package/dist/display.d.ts.map +1 -1
- package/dist/display.js +6 -2
- package/dist/file-system.d.ts +1 -1
- package/dist/file-system.d.ts.map +1 -1
- package/dist/file-system.js +11 -1
- package/dist/package-manager.d.ts +5 -0
- package/dist/package-manager.d.ts.map +1 -0
- package/dist/package-manager.js +9 -0
- package/dist/project-creator.d.ts.map +1 -1
- package/dist/project-creator.js +7 -1
- package/package.json +1 -1
- package/templates/skills/bestax-custom-component/SKILL.md +4 -3
- package/templates/skills/bestax-custom-component/references/api.md +3 -2
- package/templates/skills/bestax-custom-component/references/component-catalog.md +2 -2
- package/templates/skills/bestax-form/SKILL.md +7 -2
- package/templates/skills/bestax-form/references/api.md +1 -1
- package/templates/skills/bestax-layout-scaffold/examples/centered.tsx +1 -1
- package/templates/skills/bestax-layout-scaffold/references/layout-components.md +17 -3
- package/templates/skills/bestax-migrate/references/prop-map.md +1 -1
- package/templates/skills/bestax-theming/references/themeable-components.md +3 -3
- package/templates/vite/_gitignore +25 -0
- package/templates/vite-ts/_gitignore +25 -0
- package/templates/vite-ts/tsconfig.json +1 -0
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;;;;;;;wCAaQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AASX,eAAO,MAAM,WAAW,QAed,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,
|
|
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;;;;;;;wCAaQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AASX,eAAO,MAAM,WAAW,QAed,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,MAoIF,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;IAIrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,EA6CvC,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,EA4CtC,CAAC"}
|
package/dist/constants.js
CHANGED
|
@@ -179,7 +179,9 @@ Read skill \`references/\` files with absolute paths — the shell's cwd is not
|
|
|
179
179
|
|
|
180
180
|
\`.claude/launch.json\` declares this app's dev server for Claude Code's browser preview
|
|
181
181
|
(\`npm run dev\` on port 5173, \`--strictPort\`) — start it from there rather than rediscovering
|
|
182
|
-
the command.
|
|
182
|
+
the command. \`--strictPort\` failing because 5173 is busy means an orphaned dev server from an
|
|
183
|
+
earlier session owns the port — kill the listener (\`lsof -tiTCP:5173 -sTCP:LISTEN | xargs kill\`)
|
|
184
|
+
and relaunch; don't move the app to another port.
|
|
183
185
|
|
|
184
186
|
## Docs
|
|
185
187
|
|
package/dist/display.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../src/display.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../src/display.ts"],"names":[],"mappings":"AAKA,wBAAgB,aAAa,IAAI,IAAI,CAMpC;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CA2BtD;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAElD;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAEjD;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC"}
|
package/dist/display.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import chalk from 'chalk';
|
|
2
2
|
import figures from 'figures';
|
|
3
3
|
import { MESSAGES } from './constants.js';
|
|
4
|
+
import { detectPackageManager } from './package-manager.js';
|
|
4
5
|
export function displayHeader() {
|
|
5
6
|
console.log();
|
|
6
7
|
console.log(chalk.cyan('━'.repeat(50)));
|
|
@@ -14,9 +15,12 @@ export function displaySuccess(targetDir) {
|
|
|
14
15
|
console.log();
|
|
15
16
|
console.log(chalk.bold(MESSAGES.NEXT_STEPS));
|
|
16
17
|
console.log();
|
|
18
|
+
// Mirror the package manager that invoked the CLI — `<pm> install` and
|
|
19
|
+
// `<pm> run dev` are valid for all four supported PMs.
|
|
20
|
+
const pm = detectPackageManager();
|
|
17
21
|
console.log(chalk.cyan(` cd ${targetDir}`));
|
|
18
|
-
console.log(chalk.cyan(
|
|
19
|
-
console.log(chalk.cyan(
|
|
22
|
+
console.log(chalk.cyan(` ${pm} install`));
|
|
23
|
+
console.log(chalk.cyan(` ${pm} run dev`));
|
|
20
24
|
console.log();
|
|
21
25
|
console.log(chalk.gray(' Your app includes a beautiful logo-centric homepage'));
|
|
22
26
|
console.log(chalk.gray(' showcasing Bestax, Vite, and React branding.'));
|
package/dist/file-system.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export declare function checkDirectoryExists(targetPath: string): Promise<boolea
|
|
|
2
2
|
export declare function isDirectoryEmpty(targetPath: string): Promise<boolean>;
|
|
3
3
|
export declare function emptyDirectory(targetPath: string): Promise<void>;
|
|
4
4
|
export declare function ensureDirectory(targetPath: string): Promise<void>;
|
|
5
|
-
export declare function copyDirectory(source: string, destination: string): Promise<void>;
|
|
5
|
+
export declare function copyDirectory(source: string, destination: string, renames?: Record<string, string>): Promise<void>;
|
|
6
6
|
export declare function readJsonFile<T = unknown>(filePath: string): Promise<T>;
|
|
7
7
|
export declare function writeJsonFile(filePath: string, data: unknown, spaces?: number): Promise<void>;
|
|
8
8
|
export declare function updatePackageJson(targetPath: string, projectName: string): Promise<void>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-system.d.ts","sourceRoot":"","sources":["../src/file-system.ts"],"names":[],"mappings":"AAIA,wBAAsB,oBAAoB,CACxC,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,OAAO,CAAC,CAElB;AAED,wBAAsB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAM3E;AAED,wBAAsB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAEtE;AAED,wBAAsB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAEvE;AAED,wBAAsB,aAAa,CACjC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"file-system.d.ts","sourceRoot":"","sources":["../src/file-system.ts"],"names":[],"mappings":"AAIA,wBAAsB,oBAAoB,CACxC,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,OAAO,CAAC,CAElB;AAED,wBAAsB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAM3E;AAED,wBAAsB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAEtE;AAED,wBAAsB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAEvE;AAED,wBAAsB,aAAa,CACjC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC/B,OAAO,CAAC,IAAI,CAAC,CAef;AAED,wBAAsB,YAAY,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAE5E;AAED,wBAAsB,aAAa,CACjC,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,OAAO,EACb,MAAM,SAAI,GACT,OAAO,CAAC,IAAI,CAAC,CAEf;AAED,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,IAAI,CAAC,CAQf"}
|
package/dist/file-system.js
CHANGED
|
@@ -17,11 +17,21 @@ export async function emptyDirectory(targetPath) {
|
|
|
17
17
|
export async function ensureDirectory(targetPath) {
|
|
18
18
|
await fs.ensureDir(targetPath);
|
|
19
19
|
}
|
|
20
|
-
export async function copyDirectory(source, destination) {
|
|
20
|
+
export async function copyDirectory(source, destination, renames) {
|
|
21
21
|
if (!(await checkDirectoryExists(source))) {
|
|
22
22
|
throw new Error(MESSAGES.TEMPLATE_NOT_FOUND(source));
|
|
23
23
|
}
|
|
24
24
|
await fs.copy(source, destination);
|
|
25
|
+
if (renames) {
|
|
26
|
+
for (const [from, to] of Object.entries(renames)) {
|
|
27
|
+
const copiedPath = path.join(destination, from);
|
|
28
|
+
if (fs.existsSync(copiedPath)) {
|
|
29
|
+
await fs.move(copiedPath, path.join(destination, to), {
|
|
30
|
+
overwrite: true,
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
25
35
|
}
|
|
26
36
|
export async function readJsonFile(filePath) {
|
|
27
37
|
return fs.readJson(filePath);
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
|
|
2
|
+
/** Detect the package manager that invoked the CLI from npm_config_user_agent
|
|
3
|
+
* (e.g. "pnpm/9.12.0 npm/? node/v22 darwin arm64"). Falls back to npm. */
|
|
4
|
+
export declare function detectPackageManager(userAgent?: string | undefined): PackageManager;
|
|
5
|
+
//# sourceMappingURL=package-manager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"package-manager.d.ts","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAI7D;2EAC2E;AAC3E,wBAAgB,oBAAoB,CAClC,SAAS,GAAE,MAAM,GAAG,SAA6C,GAChE,cAAc,CAKhB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const KNOWN = ['npm', 'pnpm', 'yarn', 'bun'];
|
|
2
|
+
/** Detect the package manager that invoked the CLI from npm_config_user_agent
|
|
3
|
+
* (e.g. "pnpm/9.12.0 npm/? node/v22 darwin arm64"). Falls back to npm. */
|
|
4
|
+
export function detectPackageManager(userAgent = process.env.npm_config_user_agent) {
|
|
5
|
+
const name = userAgent?.split('/')[0] ?? '';
|
|
6
|
+
return KNOWN.includes(name)
|
|
7
|
+
? name
|
|
8
|
+
: 'npm';
|
|
9
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"AA2BA,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"AA2BA,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAWxB,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,oBAAoB,CACxB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,IAAI,CAAC;IAgBV,WAAW,CACf,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,IAAI,CAAC;IAqBV,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;IAgJV,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;CAyIvE"}
|
package/dist/project-creator.js
CHANGED
|
@@ -8,6 +8,12 @@ import { displayHeader, displaySuccess, displayError, displayCancelled, } from '
|
|
|
8
8
|
import { validateProjectName } from './validators.js';
|
|
9
9
|
import { MESSAGES, ICON_LIBRARIES, BULMA_FLAVORS, CLAUDE_MD, LAUNCH_JSON, CONFIG_PROVIDER_ICON_VALUES, } from './constants.js';
|
|
10
10
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
11
|
+
// npm strips literal `.gitignore` files from published tarballs, so the
|
|
12
|
+
// templates track `_gitignore` instead and the scaffolder renames it back
|
|
13
|
+
// on copy — otherwise published scaffolds would ship with no .gitignore.
|
|
14
|
+
const TEMPLATE_RENAMES = {
|
|
15
|
+
_gitignore: '.gitignore',
|
|
16
|
+
};
|
|
11
17
|
export class ProjectCreator {
|
|
12
18
|
templatesDir;
|
|
13
19
|
constructor(templatesDir) {
|
|
@@ -43,7 +49,7 @@ export class ProjectCreator {
|
|
|
43
49
|
async copyTemplate(template, targetPath) {
|
|
44
50
|
const templatePath = this.getTemplatePath(template);
|
|
45
51
|
await ensureDirectory(targetPath);
|
|
46
|
-
await copyDirectory(templatePath, targetPath);
|
|
52
|
+
await copyDirectory(templatePath, targetPath, TEMPLATE_RENAMES);
|
|
47
53
|
}
|
|
48
54
|
async updateIndexHtmlTitle(targetPath, projectName) {
|
|
49
55
|
const indexHtmlPath = path.join(targetPath, 'index.html');
|
package/package.json
CHANGED
|
@@ -50,11 +50,12 @@ label — use that instead"_ or _"No `ProfileCard` exists; I'll build one compos
|
|
|
50
50
|
|
|
51
51
|
Build from existing components before writing any CSS: `Box`, `Card`, `Title`, `SubTitle`,
|
|
52
52
|
`Icon`, `Block`, `Content`, `Tag`, plus the shared Bulma helper props (spacing, color,
|
|
53
|
-
typography, flexbox).
|
|
54
|
-
`
|
|
53
|
+
typography, flexbox). Some compound sub-parts are the exception — `Modal.Card`, `Tabs.Tab`,
|
|
54
|
+
`Message.Body` take **no Bulma helper props**, just `className` + HTML attributes
|
|
55
55
|
plus their own few (`Tabs.Tab` requires `index={i}` and has built-in `disabled` and
|
|
56
56
|
`icon`/`iconLibrary`/`iconVariant`/`iconSize`/`iconFeatures` — don't nest an `<Icon>` there) —
|
|
57
|
-
so put helper props on the parent or on an element inside them, never invent them there.
|
|
57
|
+
so put helper props on the parent or on an element inside them, never invent them there.
|
|
58
|
+
(`Card.*` sub-parts do take helper props, like `Table.*`/`Menu.*`/`Hero.*`.) Most "custom components" are a composition function — zero new styles.
|
|
58
59
|
See `examples/stat-card.tsx` for a complete worked example.
|
|
59
60
|
|
|
60
61
|
## The component spine
|
|
@@ -31,9 +31,10 @@ that can also be used on their own:
|
|
|
31
31
|
|
|
32
32
|
Because the component destructures these into `bulmaHelperClasses`, callers get the full Bulma
|
|
33
33
|
helper surface for free on every component built this way, and `rest` stays clean for DOM
|
|
34
|
-
spreading. (
|
|
34
|
+
spreading. (Some library compound sub-parts — `Modal.Card`, `Tabs.Tab`,
|
|
35
35
|
`Message.Body` — do **not** take helper props: just `className`, HTML attributes, and their own
|
|
36
|
-
few, e.g. `Tabs.Tab`'s required `index` and its built-in `icon`/`disabled` props.
|
|
36
|
+
few, e.g. `Tabs.Tab`'s required `index` and its built-in `icon`/`disabled` props. `Card.*`
|
|
37
|
+
sub-parts do take them.)
|
|
37
38
|
|
|
38
39
|
## `classNames(...)` and friends — `helpers/classNames.ts`
|
|
39
40
|
|
|
@@ -24,8 +24,8 @@ instead of hand-writing markup.
|
|
|
24
24
|
- **Compound components** expose sub-parts via dot access (e.g. `Card.Header`,
|
|
25
25
|
`Navbar.Item`, `Tabs.Tab`, `Hero.Body`, `Columns.Column`, `Table.Tr`); see the
|
|
26
26
|
component's linked page for the full set. Sub-parts do **not** all take helper
|
|
27
|
-
props: the `Table.*`, `Menu.*`, and `Hero.*` families do (most
|
|
28
|
-
too), but `
|
|
27
|
+
props: the `Card.*`, `Table.*`, `Menu.*`, and `Hero.*` families do (most
|
|
28
|
+
`Navbar.*` too), but `Modal.*`, `Tabs.*`, and `Message.*` sub-parts take none —
|
|
29
29
|
just `className`, HTML attributes, and their own few (`Tabs.Tab` requires
|
|
30
30
|
`index` and has built-in `icon`/`disabled` props). Put helper props on the
|
|
31
31
|
parent or on an element inside (`Span`, `Paragraph`, …) instead.
|
|
@@ -96,6 +96,9 @@ All import from `@allxsmith/bestax-bulma`. Convenience components auto-wrap Fiel
|
|
|
96
96
|
| `Taginput` | Tag/chip input; suggestions, confirm keys, closable tags. |
|
|
97
97
|
| `DateInput` / `TimeInput` / `DateTimeInput` (+ `*Base`) | Date / time / datetime pickers. |
|
|
98
98
|
|
|
99
|
+
(`NumberInput` and `TagInput` also exist as deprecated aliases of `Numberinput`/`Taginput` —
|
|
100
|
+
same components; prefer the lowercase-second-word spellings.)
|
|
101
|
+
|
|
99
102
|
## Common props
|
|
100
103
|
|
|
101
104
|
Across the convenience inputs (`Input`, `Select`, `TextArea`, and similar):
|
|
@@ -116,8 +119,10 @@ Across the convenience inputs (`Input`, `Select`, `TextArea`, and similar):
|
|
|
116
119
|
Plus the full Bulma **helper props** (`m`, `p`, `textColor`, `display`, …) on every component
|
|
117
120
|
via `useBulmaClasses`.
|
|
118
121
|
|
|
119
|
-
|
|
120
|
-
`
|
|
122
|
+
Full-width is `isFullwidth` on every component that supports it (`Button`, `LinkButton`,
|
|
123
|
+
`Select`, `File`, `Table`, `Tabs`, `Sidebar`) — always write `isFullwidth`. The deprecated
|
|
124
|
+
spellings compile only where they historically existed: `isFullWidth` everywhere except
|
|
125
|
+
`Sidebar`, `fullwidth` on `Tabs` only, `fullWidth` on `Sidebar` only.
|
|
121
126
|
|
|
122
127
|
The `label` prop on the single-control convenience inputs (`Input`, `Select`, `TextArea`,
|
|
123
128
|
`File`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`,
|
|
@@ -59,7 +59,7 @@ Wraps a single input; adds icons and loading.
|
|
|
59
59
|
## Select / SelectBase, TextArea / TextAreaBase
|
|
60
60
|
|
|
61
61
|
Same convenience/raw split as Input. `Select` supports `isLoading` (on the control), `color`,
|
|
62
|
-
`size`, `isRounded`, `isFullwidth
|
|
62
|
+
`size`, `isRounded`, `isFullwidth`, `multiple` +
|
|
63
63
|
`multipleSize`, plus the Field/Control/message props. `TextArea` adds `rows` and
|
|
64
64
|
`hasFixedSize`.
|
|
65
65
|
|
|
@@ -118,6 +118,18 @@ The responsive grid. `Columns` is the row; `Column` is a cell (also reachable as
|
|
|
118
118
|
```ts
|
|
119
119
|
type BulmaColumnSize =
|
|
120
120
|
| number // 1–12
|
|
121
|
+
| '1'
|
|
122
|
+
| '2'
|
|
123
|
+
| '3'
|
|
124
|
+
| '4'
|
|
125
|
+
| '5'
|
|
126
|
+
| '6'
|
|
127
|
+
| '7'
|
|
128
|
+
| '8'
|
|
129
|
+
| '9'
|
|
130
|
+
| '10'
|
|
131
|
+
| '11'
|
|
132
|
+
| '12' // string form, equivalent
|
|
121
133
|
| 'full'
|
|
122
134
|
| 'half'
|
|
123
135
|
| 'one-third'
|
|
@@ -130,8 +142,8 @@ type BulmaColumnSize =
|
|
|
130
142
|
| 'four-fifths';
|
|
131
143
|
```
|
|
132
144
|
|
|
133
|
-
Numeric sizes
|
|
134
|
-
|
|
145
|
+
Numeric sizes accept a number **or** its string form — `sizeDesktop={7}` and
|
|
146
|
+
`sizeDesktop="7"` are equivalent, and the fraction names are strings.
|
|
135
147
|
|
|
136
148
|
> Columns **stack on mobile** by default and go side-by-side at the tablet breakpoint and up.
|
|
137
149
|
> Use the per-breakpoint `size*` props to control how many cells share a row at each width.
|
|
@@ -157,7 +169,9 @@ the column's auto height). Make the `Column` a flex container and let the card g
|
|
|
157
169
|
```
|
|
158
170
|
|
|
159
171
|
`display`, `flexDirection`, and `flexGrow` are helper props every component accepts;
|
|
160
|
-
`flexGrow` takes a string (`"1"`).
|
|
172
|
+
`flexGrow` takes a string (`"1"`). `Card.*` sub-parts accept helper props too, so pinning a
|
|
173
|
+
footer inside a card is `<Card display="flex" flexDirection="column">` +
|
|
174
|
+
`<Card.Content flexGrow="1">` — no `Box` swap needed.
|
|
161
175
|
|
|
162
176
|
## Grid / Cell
|
|
163
177
|
|
|
@@ -32,7 +32,7 @@ this automatically for literal values; dynamic values get TODOs.
|
|
|
32
32
|
## Boolean modifier convention
|
|
33
33
|
|
|
34
34
|
RBC uses bare booleans (`loading`, `outlined`, `rounded`, `fullwidth`); bestax prefixes
|
|
35
|
-
with `is`/`has` (`isLoading`, `isOutlined`, `isRounded`, `
|
|
35
|
+
with `is`/`has` (`isLoading`, `isOutlined`, `isRounded`, `isFullwidth`). Per-component
|
|
36
36
|
tables live in [component-map.md](component-map.md).
|
|
37
37
|
|
|
38
38
|
## Responsive breakpoint objects → flat per-viewport props
|
|
@@ -50,14 +50,14 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
|
|
|
50
50
|
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
51
51
|
| `Button` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black \| text \| ghost` | `small \| normal \| medium \| large` | adds `text`, `ghost`; also `isLight`, `isOutlined`, `isInverted`, `isRounded` |
|
|
52
52
|
| `Notification` | the 17 `validColors` (`black-bis`, `black-ter`, and greys deprecated: no CSS, dev-warn, removed next major — see ⚠️) | — | also `isLight` |
|
|
53
|
-
| `Tag` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `normal \| medium \| large` | also `isRounded`, `isDelete`, `isHoverable`
|
|
53
|
+
| `Tag` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `normal \| medium \| large` | also `isLight`, `isRounded`, `isDelete`, `isHoverable` |
|
|
54
54
|
| `Box` | `primary \| link \| info \| success \| warning \| danger` | — | `color` renders `has-text-<color>`, same as `textColor` (which wins when both are set; no `.box.is-*` ships — tint via `bgColor`); also `hasShadow` |
|
|
55
55
|
| `Message` | `primary \| link \| info \| success \| warning \| danger` | — | the 6 only |
|
|
56
56
|
| `Input` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded`, `isStatic` |
|
|
57
57
|
| `Avatar` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `16x16 \| 24x24 \| 32x32 \| 48x48 \| 64x64 \| 96x96 \| 128x128 \| number` | initials/icon background (auto-derived from `name` when unset); also `shape` |
|
|
58
58
|
| `Badge` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | pill background; default `danger` |
|
|
59
|
-
| `Title` | — (no `color`; use `textColor`) | `1
|
|
60
|
-
| `SubTitle` | — (no `color`; use `textColor`) | `1
|
|
59
|
+
| `Title` | — (no `color`; use `textColor`) | `1`–`6` (string or number) | also `isSpaced` |
|
|
60
|
+
| `SubTitle` | — (no `color`; use `textColor`) | `1`–`6` (string or number) | — |
|
|
61
61
|
| `Autocomplete` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
62
62
|
| `Checkbox` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
63
63
|
| `DateInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded` |
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Logs
|
|
2
|
+
logs
|
|
3
|
+
*.log
|
|
4
|
+
npm-debug.log*
|
|
5
|
+
yarn-debug.log*
|
|
6
|
+
yarn-error.log*
|
|
7
|
+
pnpm-debug.log*
|
|
8
|
+
lerna-debug.log*
|
|
9
|
+
|
|
10
|
+
node_modules
|
|
11
|
+
dist
|
|
12
|
+
dist-ssr
|
|
13
|
+
*.local
|
|
14
|
+
*.tsbuildinfo
|
|
15
|
+
|
|
16
|
+
# Editor directories and files
|
|
17
|
+
.vscode/*
|
|
18
|
+
!.vscode/extensions.json
|
|
19
|
+
.idea
|
|
20
|
+
.DS_Store
|
|
21
|
+
*.suo
|
|
22
|
+
*.ntvs*
|
|
23
|
+
*.njsproj
|
|
24
|
+
*.sln
|
|
25
|
+
*.sw?
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Logs
|
|
2
|
+
logs
|
|
3
|
+
*.log
|
|
4
|
+
npm-debug.log*
|
|
5
|
+
yarn-debug.log*
|
|
6
|
+
yarn-error.log*
|
|
7
|
+
pnpm-debug.log*
|
|
8
|
+
lerna-debug.log*
|
|
9
|
+
|
|
10
|
+
node_modules
|
|
11
|
+
dist
|
|
12
|
+
dist-ssr
|
|
13
|
+
*.local
|
|
14
|
+
*.tsbuildinfo
|
|
15
|
+
|
|
16
|
+
# Editor directories and files
|
|
17
|
+
.vscode/*
|
|
18
|
+
!.vscode/extensions.json
|
|
19
|
+
.idea
|
|
20
|
+
.DS_Store
|
|
21
|
+
*.suo
|
|
22
|
+
*.ntvs*
|
|
23
|
+
*.njsproj
|
|
24
|
+
*.sln
|
|
25
|
+
*.sw?
|