create-bestax 4.2.17 → 4.2.19

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.
Files changed (52) hide show
  1. package/README.md +13 -5
  2. package/dist/cli.d.ts.map +1 -1
  3. package/dist/cli.js +1 -1
  4. package/dist/constants.d.ts +2 -0
  5. package/dist/constants.d.ts.map +1 -1
  6. package/dist/constants.js +10 -2
  7. package/dist/display.d.ts +9 -0
  8. package/dist/display.d.ts.map +1 -1
  9. package/dist/display.js +19 -1
  10. package/dist/file-system.d.ts +21 -4
  11. package/dist/file-system.d.ts.map +1 -1
  12. package/dist/file-system.js +52 -6
  13. package/dist/library-range.d.ts +16 -0
  14. package/dist/library-range.d.ts.map +1 -0
  15. package/dist/library-range.js +40 -0
  16. package/dist/project-creator.d.ts +16 -1
  17. package/dist/project-creator.d.ts.map +1 -1
  18. package/dist/project-creator.js +39 -7
  19. package/dist/prompts.d.ts +1 -0
  20. package/dist/prompts.d.ts.map +1 -1
  21. package/dist/prompts.js +3 -2
  22. package/dist/validators.d.ts +8 -0
  23. package/dist/validators.d.ts.map +1 -1
  24. package/dist/validators.js +18 -1
  25. package/package.json +8 -8
  26. package/templates/skills/bestax-custom-component/references/component-catalog.md +5 -1
  27. package/templates/skills/bestax-form/SKILL.md +45 -16
  28. package/templates/skills/bestax-form/references/api.md +13 -8
  29. package/templates/skills/bestax-form/references/patterns.md +75 -3
  30. package/templates/skills/bestax-layout-scaffold/SKILL.md +34 -6
  31. package/templates/skills/bestax-layout-scaffold/references/archetypes.md +2 -2
  32. package/templates/skills/bestax-layout-scaffold/references/layout-components.md +52 -5
  33. package/templates/skills/bestax-migrate/SKILL.md +34 -5
  34. package/templates/skills/bestax-migrate/references/bloomer/component-map.md +1 -1
  35. package/templates/skills/bestax-migrate/references/bloomer/prop-map.md +12 -9
  36. package/templates/skills/bestax-migrate/references/bulma-classes/component-map.md +153 -105
  37. package/templates/skills/bestax-migrate/references/bulma-classes/prop-map.md +48 -17
  38. package/templates/skills/bestax-migrate/references/bulma-classes/unmappables.md +501 -16
  39. package/templates/skills/bestax-migrate/references/css-migration.md +12 -1
  40. package/templates/skills/bestax-migrate/references/rbx/prop-map.md +23 -17
  41. package/templates/skills/bestax-migrate/references/react-bulma-components/prop-map.md +27 -22
  42. package/templates/skills/bestax-migrate/references/react-bulma-components/unmappables.md +5 -5
  43. package/templates/skills/bestax-optimize/references/modular-build.md +57 -15
  44. package/templates/skills/bestax-theming/SKILL.md +19 -8
  45. package/templates/skills/bestax-theming/examples/dark-mode.tsx +99 -17
  46. package/templates/skills/bestax-theming/examples/theme-config.tsx +13 -8
  47. package/templates/skills/bestax-theming/references/css-variables.md +231 -18
  48. package/templates/skills/bestax-theming/references/themeable-components.md +4 -0
  49. package/templates/vite/package.json +1 -1
  50. package/templates/vite/src/main.jsx +1 -1
  51. package/templates/vite-ts/package.json +1 -1
  52. package/templates/vite-ts/src/main.tsx +1 -1
package/templates/skills/bestax-migrate/references/bulma-classes/prop-map.md CHANGED
@@ -72,7 +72,9 @@ Sizes are `1` to `12`, `full`, `half`, `one-third`, `two-thirds`, `one-quarter`,
72
72
 
73
73
  bestax picks the heading from `size` (`size="3"` renders an `<h3>`) unless `as="p"`. So on an
74
74
  `<h2>`, `is-4` stays a class and the element becomes `<Title as="h2" className="is-4">`, which
75
- renders the same `<h2>`.
75
+ renders the same `<h2>`. To write it as a prop, `textSize="4"` keeps the `<h2>` and sizes it the
76
+ same: it renders Bulma's `is-size-4`, which has the font size `is-4` gives a title or subtitle,
77
+ and as a Bulma helper it is `!important`, so check a title the page's own CSS sizes.
76
78
 
77
79
  ### Other components
78
80
 
@@ -85,6 +87,8 @@ renders the same `<h2>`.
85
87
  | `.content` → `Content` | `is-small`, `is-medium`, `is-large` | `size` |
86
88
  | `.delete` → `Delete` | `is-small`, `is-medium`, `is-large` | `size` |
87
89
  | `.field` → `Field` | `is-horizontal`, `is-grouped`, `has-addons`, `is-narrow` | `horizontal`, `grouped`, `hasAddons`, `narrow` |
90
+ | `.field` → `Field` | `has-addons-centered`, `has-addons-right`, beside `has-addons` | `hasAddons="centered"`, `hasAddons="right"`, which render both classes |
91
+ | `.field` → `Field` | `is-grouped-centered`, `is-grouped-right`, `is-grouped-multiline`, beside `is-grouped` | `grouped="centered"`, `grouped="right"`, `grouped="multiline"`, which render both classes |
88
92
  | `.grid` → `Grid` | `is-gap-{step}`, `is-column-gap-{step}`, `is-row-gap-{step}`, `0` to `8` in half steps (`is-gap-1.5`) | `gap`, `columnGap`, `rowGap` |
89
93
  | `.grid` → `Grid` | `is-col-min-{1-32}` | `minCol` (a number: `minCol={8}`) |
90
94
  | `.fixed-grid` → `Grid isFixed` (folded) | `has-{1-12}-cols`, `has-{1-12}-cols-{viewport}`, `has-auto-count` | `fixedCols`, `fixedCols{Viewport}` (numbers: `fixedCols={3}`), `fixedCols="auto"` |
@@ -103,20 +107,21 @@ renders the same `<h2>`.
103
107
  | the `<select>` inside `.select` | `is-hovered`, `is-focused` | `isHovered`, `isFocused` |
104
108
  | `.hero` → `Hero` | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-white`, `is-light`, `is-dark` | `color` |
105
109
  | `.hero` → `Hero` | `is-small`, `is-medium`, `is-large`, `is-fullheight`, `is-fullheight-with-navbar` | `size` |
106
- | `.image` → `Image` | `is-16x16`, `is-24x24`, `is-32x32`, `is-48x48`, `is-64x64`, `is-96x96`, `is-128x128`, `is-square` | `size` (a ratio such as `is-4by3` stays a class, since `size` would add `has-ratio`) |
110
+ | `.image` → `Image` | `is-16x16`, `is-24x24`, `is-32x32`, `is-48x48`, `is-64x64`, `is-96x96`, `is-128x128`, `is-square` | `size` |
111
+ | `.image` → `Image` | `is-{ratio}`, for each of the Ratios under Helper classes (`is-16by9`), but not `is-square` (see below) | `size`, on the `<figure>` it renders with no `as` (see below) |
107
112
  | the `<img>` inside `.image` | `is-rounded` | `isRounded` |
108
113
  | `.icon` → `Icon` | `is-small`, `is-medium`, `is-large` | `size` |
109
114
  | `.tabs` → `Tabs` | `is-centered`, `is-right`, `is-left` | `align` |
110
115
  | `.tabs` → `Tabs` | `is-small`, `is-medium`, `is-large` | `size` |
111
116
  | `.tabs` → `Tabs` | `is-fullwidth`, `is-boxed`, `is-toggle`, `is-toggle-rounded` | `isFullwidth`, `boxed`, `toggle`, `rounded` (`is-<color>` stays a class: `color` is deprecated) |
112
- | the `<a>` in a menu item → `Menu.Item` | `is-active` | `active` |
117
+ | the `<a>` in a menu item → `Menu.Item` | `is-active`, beside an `aria-current` of the `<a>`'s own | `active` (without one, the item stays markup with an `attr:aria-current` TODO) |
113
118
  | `.pagination` → `Pagination` | `is-small`, `is-medium`, `is-large` | `size` |
114
119
  | `.pagination` → `Pagination` | `is-centered`, `is-right`, `is-rounded` | `align`, `rounded` (`is-<color>` stays a class: `color` is deprecated) |
115
120
  | `.pagination-link` → `Pagination.Link` | `is-current`, beside an `aria-current` of the element's own | `active` (without one, it stays a class; `is-disabled` stays a class) |
116
121
  | `.level` → `Level` | `is-mobile` | `isMobile` |
117
122
  | `.navbar` → `Navbar` | the ten `.hero` colors | `color` |
118
123
  | `.navbar` → `Navbar` | `is-fixed-top`, `is-fixed-bottom` | `fixed` (`top`, `bottom`) |
119
- | `.navbar` → `Navbar` | `is-transparent` | `transparent` |
124
+ | `.navbar` → `Navbar` | `is-transparent`, `is-spaced`, `has-shadow` | `transparent`, `isSpaced`, `hasShadow` |
120
125
  | `.navbar-menu` → `Navbar.Menu`, `.navbar-item` → `Navbar.Item` | `is-active` | `active` |
121
126
  | `.navbar-dropdown` → `Navbar.DropdownMenu` | `is-right`, `is-up` | `right`, `up` |
122
127
  | `.notification` → `Notification` | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-white`, `is-dark` | `color` |
@@ -130,6 +135,16 @@ renders the same `<h2>`.
130
135
  | `.tag` → `Tag` | `is-light`, `is-rounded`, `is-hoverable` | `isLight`, `isRounded`, `isHoverable` |
131
136
  | `.tag` → `Tag` | `is-medium`, `is-large` | `size` |
132
137
 
138
+ `is-square` sits with the fixed sizes, not the ratios. Bulma sizes it like `is-1by1`, but `Image`
139
+ renders `size="square"` on a `<div>`, as it does a fixed size. So
140
+ `<figure className="image is-square">` becomes `<Image as="figure" size="square">`, while
141
+ `<figure className="image is-1by1">` becomes `<Image size="1by1">`.
142
+
143
+ A ratio converts to identical markup only on a bestax-bulma whose `Image` writes nothing but the
144
+ ratio class on its container. An older one also writes `has-ratio` there, which Bulma reads only
145
+ on a child, so the page looks the same, unless that `.image` sits inside another ratio `.image`,
146
+ which then stretches it to fill. Upgrade bestax-bulma, or keep that ratio as a class.
147
+
133
148
  `Progress` takes `value` and `max` as numbers: `value="40"` becomes `value={40}`. An
134
149
  expression (`value={percent}`) carries over as written, so if it holds a string the migrated
135
150
  file fails to typecheck while still rendering the same; wrap it in `Number(…)`. `Delete`
@@ -137,14 +152,14 @@ converts only with `type` and `aria-label` set (see `defaults:<Target>` in the u
137
152
  and a `type="button"` is dropped, since bestax renders it by itself. `Card.Header.Icon` likewise
138
153
  converts only with an `aria-label` and a `type` of `button`, `submit` or `reset`, since it renders
139
154
  `aria-label="more options"` and `type="button"` otherwise.
140
- `.tag`'s `is-delete` stays a class: `isDelete` turns the tag into a `<button>`. `.navbar`'s
141
- `is-spaced` and `has-shadow`, and a `.navbar-item`'s `has-dropdown` and `is-hoverable`, stay
142
- classes too: bestax has no prop for them on those components. So do a `.field`'s
143
- `has-addons-centered`, `has-addons-right` and `is-grouped-*`, because the `hasAddons` and
144
- `grouped` values that render them render `has-addons` and `is-grouped` as well, and an input's,
145
- textarea's or select's color, because `color` renders `has-text-<color>` on it too. On a
146
- `.columns`, the gap helpers (`is-gap-*`, `is-column-gap-*`, `is-row-gap-*`) stay classes as well:
147
- `Columns`' own `gap` is its gutter (`is-<step>`), and it leaves the column and row gap helpers out.
155
+ `.tag`'s `is-delete` stays a class: `isDelete` turns the tag into a `<button>`. A
156
+ `.navbar-item`'s `has-dropdown` and `is-hoverable` stay classes too, since bestax has no prop for
157
+ them on that component. So do a `.field`'s `has-addons-centered`, `has-addons-right` and
158
+ `is-grouped-*` without `has-addons` or `is-grouped` beside them, because the `hasAddons` and
159
+ `grouped` values that render them render those as well, and an input's, textarea's or select's
160
+ color, because `color` renders `has-text-<color>` on it too. On a `.columns`, the gap helpers
161
+ (`is-gap-*`, `is-column-gap-*`, `is-row-gap-*`) stay classes as well: `Columns`' own `gap` is its
162
+ gutter (`is-<step>`), and it leaves the column and row gap helpers out.
148
163
 
149
164
  ## Helper classes
150
165
 
@@ -152,7 +167,10 @@ These convert on every component above and on the plain-tag wrappers.
152
167
 
153
168
  Colors are `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`, `black-bis`,
154
169
  `black-ter`, `grey-darker`, `grey-dark`, `grey`, `grey-light`, `grey-lighter`, `white`,
155
- `white-bis`, `white-ter`, `light`, `dark`, `inherit` and `current`. Gap steps are `0` to `8` in
170
+ `white-bis`, `white-ter`, `light`, `dark`, `inherit` and `current`. Shades are `00` to `95` in
171
+ steps of five, `invert`, `light`, `dark`, `soft`, `bold` and `on-scheme`, on the colors Bulma
172
+ shades: `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`, `white`, `light` and
173
+ `dark`. Gap steps are `0` to `8` in
156
174
  half steps (`0`, `0.5`, `1`, … `7.5`, `8`). Overflow values are `auto`, `clip`, `hidden`, `scroll`
157
175
  and `visible`. Ratios are `1by1`, `5by4`, `4by3`, `3by2`, `5by3`, `16by9`, `2by1`, `3by1`,
158
176
  `4by5`, `3by4`, `2by3`, `3by5`, `9by16`, `1by2` and `1by3`.
@@ -161,8 +179,10 @@ and `visible`. Ratios are `1by1`, `5by4`, `4by3`, `3by2`, `5by3`, `16by9`, `2by1
161
179
  | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
162
180
  | `m-{n}`, `mt-{n}`, `mr-{n}`, `mb-{n}`, `ml-{n}`, `mx-{n}`, `my-{n}` (`0` to `6`, `auto`) | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my` |
163
181
  | `p-{n}`, `pt-{n}`, `pr-{n}`, `pb-{n}`, `pl-{n}`, `px-{n}`, `py-{n}` | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py` |
182
+ | `is-marginless`, `is-paddingless` (Bulma 0.9's, which v1 removed) | `m="0"`, `p="0"`, which render v1's `m-0` and `p-0` |
164
183
  | `has-text-{color}` | `textColor` (on `Menu`, `Menu.Label`, `Menu.List` and `Table`, `color`) |
165
184
  | `has-background-{color}` | `bgColor` (on `Menu`, `Menu.Label`, `Menu.List`, `Tag`, `File`, `InputBase`, `TextAreaBase` and `SelectBase`, `backgroundColor`) |
185
+ | `has-text-{color}-{shade}`, `has-background-{color}-{shade}` | the same color prop, with `colorShade` or `backgroundColorShade` (`textColor="primary" colorShade="on-scheme"`) |
166
186
  | `is-size-1` … `is-size-7`, and `-{viewport}` | `textSize`, `textSize{Viewport}` |
167
187
  | `has-text-centered`, `-justified`, `-left`, `-right`, and `-{viewport}` | `textAlign`, `textAlign{Viewport}` |
168
188
  | `is-capitalized`, `is-lowercase`, `is-uppercase`, `is-italic` | `textTransform` |
@@ -221,10 +241,21 @@ Some classes stay put because of how bestax renders them:
221
241
  instead of as its own class.
222
242
  - `is-hidden` becomes `visibility="hidden"`, which renders the same class and doesn't interact
223
243
  with `display`.
244
+ - `is-marginless` and `is-paddingless` are the only classes a conversion changes: they style
245
+ nothing under v1, so they become the prop of the v1 helper that does their job. A live class
246
+ for the same prop keeps it, whichever is written first, so beside `p-2` the class stays with a
247
+ `legacy:` TODO, and so it does wherever the element stays markup. Beside a class for another
248
+ prop, such as `px-2`, it still converts: v1 puts every side and axis class after `p-0`, so
249
+ `px-2` keeps its sides.
224
250
 
225
251
  ## Classes that stay classes
226
252
 
227
- Color shades (`has-text-primary-65`), the `-touch` and `-only` breakpoints of text size and
228
- alignment, Grid and `.image` modifiers away from their own element, an `.image` ratio, and the
229
- Bulma helpers bestax has no prop for (`is-display-*`, `is-visibility-*`, `is-float-*`,
230
- `is-clear-*`, …) stay in `className`. They render exactly as before.
253
+ A color shade one color and one shade can't write (`has-text-primary-100`, the `-invert` of a
254
+ shade such as `has-text-primary-30-invert`, a shade of the `text` color), a shade or color for a
255
+ prop another class already wrote (`has-text-primary-30 has-text-info-40` keeps the second), the
256
+ palettes and `is-bold` and `is-soft`, the `-touch` and `-only` breakpoints of text size and
257
+ alignment, Grid and `.image` modifiers away from their own element, v1's `marginless` and
258
+ `paddingless` (the rules of `m-0` and `p-0` under other names), and the Bulma helpers bestax has
259
+ no prop for (`is-display-*`, `is-visibility-*`, `is-float-*`, `is-clear-*`, …) stay in
260
+ `className`. They render exactly as before. An `.image` size or ratio away from its `.image` also
261
+ gets a `modifier:image` TODO, since Bulma styles it only there.