create-bestax 3.7.0 → 3.7.1
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
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,MAgGF,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
|
@@ -93,10 +93,31 @@ ${setupLines.join('\n')}
|
|
|
93
93
|
|
|
94
94
|
## House style
|
|
95
95
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
96
|
+
**Never inline \`style={{}}\`** — the components accept helper props that cover the common
|
|
97
|
+
cases. Before writing \`style\`, translate each declaration with this table:
|
|
98
|
+
|
|
99
|
+
| Inline style you're about to write | Helper props instead |
|
|
100
|
+
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
101
|
+
| \`marginTop: '1rem'\` (any margin/padding) | \`mt="4"\` — \`m\`/\`mt\`/\`mx\`/\`p\`/\`py\`/… scale: \`1\`=0.25rem, \`2\`=0.5rem, \`3\`=0.75rem, \`4\`=1rem, \`5\`=1.5rem, \`6\`=3rem (nearest step) |
|
|
102
|
+
| \`textAlign: 'center'\` | \`textAlign="centered"\` (also \`left\`, \`right\`, \`justified\`) |
|
|
103
|
+
| \`color: '#…'\` | \`textColor\` with the nearest Bulma color: \`primary\`, \`link\`, \`info\`, \`success\`, \`warning\`, \`danger\`, \`white\`, \`black\`, \`grey\` (+ \`grey-light\`, \`grey-dark\`, …) |
|
|
104
|
+
| \`backgroundColor: '#…'\` | \`bgColor\` (same palette) |
|
|
105
|
+
| \`fontSize: …\` | \`textSize="1"\`…\`"7"\` (\`1\` largest) — for headings use \`Title\`/\`SubTitle\` \`size\` |
|
|
106
|
+
| \`fontWeight: …\` | \`textWeight\`: \`light\`, \`normal\`, \`medium\`, \`semibold\`, \`bold\` |
|
|
107
|
+
| \`textTransform\`, italics | \`textTransform\`: \`uppercase\`, \`lowercase\`, \`capitalized\`, \`italic\` |
|
|
108
|
+
| \`display: 'flex'\` + flex properties | same-named props: \`display="flex"\`, \`flexDirection\`, \`justifyContent\`, \`alignItems\`, \`flexWrap\` |
|
|
109
|
+
| \`height: '100%'\` on a flex child | \`flexGrow="1"\` |
|
|
110
|
+
| \`display: 'none'\` | \`visibility="hidden"\`, or responsive \`display*\` props (\`displayMobile\`, \`displayTablet\`, …) |
|
|
111
|
+
|
|
112
|
+
- Spacing, typography, and flex helpers are on every component; \`textColor\`/\`bgColor\` are
|
|
113
|
+
on the content components (\`Box\`, \`Block\`, \`Title\`, \`Content\`, \`Hero\`, \`Card\`, …) — the
|
|
114
|
+
ones with a semantic \`color\` variant (\`Tag\`, \`Tabs\`, \`Panel\`) take \`color\` instead.
|
|
115
|
+
\`Notification\` is the mixed case: it takes \`textColor\`, but its background comes from
|
|
116
|
+
the semantic \`color\` prop, not \`bgColor\`.
|
|
117
|
+
- Flex layouts have no \`gap\` helper — space children with margins (\`Grid\` and \`Columns\`
|
|
99
118
|
take a \`gap\` prop, so prefer that there).
|
|
119
|
+
- No helper matches (e.g. \`maxWidth\`, a one-off gradient)? Add a named class to
|
|
120
|
+
\`src/App.css\` and pass it via \`className\` — still never inline \`style\`.
|
|
100
121
|
- Compose existing components before writing custom CSS; theme via \`Theme\` and \`--bulma-*\`
|
|
101
122
|
variables, never hardcoded colors.
|
|
102
123
|
- \`Navbar.Burger\`/\`Navbar.Menu\` are controlled — wire \`active\` via state on both, and pair
|
package/package.json
CHANGED
|
@@ -101,8 +101,32 @@ free. `references/api.md` documents the helpers.
|
|
|
101
101
|
## Styling ladder — use the lowest rung that works
|
|
102
102
|
|
|
103
103
|
**Rung 1 — helper props only (default).** House rules: never `style={{}}`. Layout with
|
|
104
|
-
`Block`/`Box` and `display="flex"`, `flexDirection`, `alignItems`, `justifyContent`.
|
|
105
|
-
**no `gap` helper** — space children with `m*`/`p*` margins instead
|
|
104
|
+
`Block`/`Box` and `display="flex"`, `flexDirection`, `alignItems`, `justifyContent`. Flex
|
|
105
|
+
layouts have **no `gap` helper** — space children with `m*`/`p*` margins instead (`Grid` and
|
|
106
|
+
`Columns` take a `gap` prop). Before writing `style={{ … }}` anywhere, translate each
|
|
107
|
+
declaration:
|
|
108
|
+
|
|
109
|
+
| Inline style you're about to write | Helper props instead |
|
|
110
|
+
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
111
|
+
| `marginTop: '1rem'` (any margin/padding) | `mt="4"` — `m`/`mt`/`mx`/`p`/`py`/… scale: `1`=0.25rem, `2`=0.5rem, `3`=0.75rem, `4`=1rem, `5`=1.5rem, `6`=3rem (nearest step) |
|
|
112
|
+
| `textAlign: 'center'` | `textAlign="centered"` (also `left`, `right`, `justified`) |
|
|
113
|
+
| `color: '#…'` | `textColor` with the nearest Bulma color: `primary`, `link`, `info`, `success`, `warning`, `danger`, `white`, `black`, `grey` (+ `grey-light`, `grey-dark`, …) |
|
|
114
|
+
| `backgroundColor: '#…'` | `bgColor` (same palette) |
|
|
115
|
+
| `fontSize: …` | `textSize="1"`…`"7"` (`1` largest) — for headings use `Title`/`SubTitle` `size` |
|
|
116
|
+
| `fontWeight: …` | `textWeight`: `light`, `normal`, `medium`, `semibold`, `bold` |
|
|
117
|
+
| `textTransform`, italics | `textTransform`: `uppercase`, `lowercase`, `capitalized`, `italic` |
|
|
118
|
+
| `display: 'flex'` + flex properties | same-named props: `display="flex"`, `flexDirection`, `justifyContent`, `alignItems`, `flexWrap` |
|
|
119
|
+
| `height: '100%'` on a flex child | `flexGrow="1"` |
|
|
120
|
+
| `display: 'none'` | `visibility="hidden"`, or responsive `display*` props (`displayMobile`, `displayTablet`, …) |
|
|
121
|
+
|
|
122
|
+
Spacing, typography, and flex helpers are on every component; `textColor`/`bgColor` are on
|
|
123
|
+
the content components you'll compose with (`Box`, `Block`, `Title`, `Content`, `Card`, …) —
|
|
124
|
+
the ones with a semantic `color` variant (`Tag`, `Tabs`, `Panel`) take `color` instead.
|
|
125
|
+
`Notification` is the mixed case: it takes `textColor`, but its background comes from the
|
|
126
|
+
semantic `color` prop, not `bgColor`.
|
|
127
|
+
|
|
128
|
+
A value with no helper equivalent (`maxWidth: 720`, a one-off gradient) moves you to rung 2 —
|
|
129
|
+
a named class in a stylesheet — never to inline `style`.
|
|
106
130
|
|
|
107
131
|
**Rung 2 — a plain CSS file**, scoped under the component's class, consuming `--bulma-*`
|
|
108
132
|
variables — never literal colors, so `Theme` and dark mode keep working:
|
|
@@ -153,7 +177,8 @@ render, prop→class mapping, helper-prop passthrough (`m="3"` → `m-3`), and t
|
|
|
153
177
|
- [ ] Inventory checked (catalog + bestax.io/docs/api) and the decision surfaced to the user.
|
|
154
178
|
- [ ] All imports from `@allxsmith/bestax-bulma` (no deep/internal paths).
|
|
155
179
|
- [ ] Composition first — existing components + helper props before any CSS.
|
|
156
|
-
- [ ] No inline `style={{}}` anywhere
|
|
180
|
+
- [ ] No inline `style={{}}` anywhere — translate via the rung-1 mapping table; values with
|
|
181
|
+
no helper equivalent get a named class (rung 2).
|
|
157
182
|
- [ ] Lowest sufficient ladder rung (helper props → scoped CSS vars → Sass).
|
|
158
183
|
- [ ] All colors/radii derived from `--bulma-*` variables — no literals.
|
|
159
184
|
- [ ] Renders correctly via `npm run dev`, including dark mode.
|
|
@@ -51,9 +51,9 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
|
|
|
51
51
|
does nothing (no error, silent failure). For a `fixed="top"` `Navbar`, add the
|
|
52
52
|
`has-navbar-fixed-top` class to `<html>` so content is not hidden behind it — the library
|
|
53
53
|
does not do this automatically, and an inline padding offset is not a substitute.
|
|
54
|
-
- **Style with helper props, not inline `style`.**
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
- **Style with helper props, not inline `style`.** Before writing `style={{ … }}` anywhere,
|
|
55
|
+
translate each declaration with the mapping table below — the helper props cover the common
|
|
56
|
+
cases. Set the app-wide icon library once with `<ConfigProvider iconLibrary="…">` at the root
|
|
57
57
|
rather than `library` on every `<Icon>`.
|
|
58
58
|
- **CTAs on a colored hero must stay legible in both schemes.** On a fixed-color surface
|
|
59
59
|
(`Hero color="primary"`, a dark banner), use **filled** buttons — `color="light"` or
|
|
@@ -63,6 +63,33 @@ color }}`. Set the app-wide icon library once with `<ConfigProvider iconLibrary=
|
|
|
63
63
|
`<Theme isRoot colorMode="light">` — so a visitor's OS dark mode can't flip Bulma's text
|
|
64
64
|
colors out from under the fixed palette (details: the `bestax-theming` skill's contrast rules).
|
|
65
65
|
|
|
66
|
+
## Inline style → helper prop mapping
|
|
67
|
+
|
|
68
|
+
Look up the declaration you were about to inline. The spacing, typography, and flex helpers
|
|
69
|
+
below are on every component; `textColor`/`bgColor` are on the content components you'll
|
|
70
|
+
target (`Box`, `Block`, `Title`, `Content`, `Hero`, `Card`, …) — the ones with a semantic
|
|
71
|
+
`color` variant (`Tag`, `Tabs`, `Panel`) take `color` instead; wrap content in a `Block` if
|
|
72
|
+
you need a text color there. `Notification` is the mixed case: it takes `textColor`, but its
|
|
73
|
+
background comes from the semantic `color` prop, not `bgColor`.
|
|
74
|
+
|
|
75
|
+
| Inline style you're about to write | Helper props instead |
|
|
76
|
+
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
77
|
+
| `marginTop: '1rem'` (any margin/padding) | `mt="4"` — `m`/`mt`/`mx`/`p`/`py`/… scale: `1`=0.25rem, `2`=0.5rem, `3`=0.75rem, `4`=1rem, `5`=1.5rem, `6`=3rem (nearest step) |
|
|
78
|
+
| `textAlign: 'center'` | `textAlign="centered"` (also `left`, `right`, `justified`) |
|
|
79
|
+
| `color: '#…'` | `textColor` with the nearest Bulma color: `primary`, `link`, `info`, `success`, `warning`, `danger`, `white`, `black`, `grey` (+ `grey-light`, `grey-dark`, …) |
|
|
80
|
+
| `backgroundColor: '#…'` | `bgColor` (same palette) |
|
|
81
|
+
| `fontSize: …` | `textSize="1"`…`"7"` (`1` largest) — for headings use `Title`/`SubTitle` `size` |
|
|
82
|
+
| `fontWeight: …` | `textWeight`: `light`, `normal`, `medium`, `semibold`, `bold` |
|
|
83
|
+
| `textTransform`, italics | `textTransform`: `uppercase`, `lowercase`, `capitalized`, `italic` |
|
|
84
|
+
| `display: 'flex'` + flex properties | same-named props: `display="flex"`, `flexDirection`, `justifyContent`, `alignItems`, `flexWrap` |
|
|
85
|
+
| `height: '100%'` on a flex child | `flexGrow="1"` |
|
|
86
|
+
| `display: 'none'` | `visibility="hidden"`, or responsive `display*` props (`displayMobile`, `displayTablet`, …) |
|
|
87
|
+
| `gap: …` in a flex layout | no `gap` helper exists — space children with `m*` margins; `Grid` and `Columns` take a `gap` prop, so prefer those there |
|
|
88
|
+
|
|
89
|
+
No helper matches (e.g. `maxWidth`, a one-off gradient)? Add a named class to the project
|
|
90
|
+
stylesheet (`src/App.css` in a scaffolded app) and pass it via `className` — still never
|
|
91
|
+
inline `style`.
|
|
92
|
+
|
|
66
93
|
## References
|
|
67
94
|
|
|
68
95
|
- `references/layout-components.md` — the layout component inventory: real prop names, types, and
|
|
@@ -89,5 +116,6 @@ color }}`. Set the app-wide icon library once with `<ConfigProvider iconLibrary=
|
|
|
89
116
|
- [ ] Wire `active` state to **both** `Navbar.Burger` and `Navbar.Menu` (they are controlled).
|
|
90
117
|
- [ ] For a fixed navbar, add `has-navbar-fixed-top` to `<html>`.
|
|
91
118
|
- [ ] Do not use `Tile` — it is not shipped.
|
|
92
|
-
- [ ] Style with helper props
|
|
119
|
+
- [ ] Style with helper props, not inline `style` — translate via the mapping table; values
|
|
120
|
+
with no helper get a named class in the stylesheet, never `style={{}}`.
|
|
93
121
|
- [ ] Set the icon library once via `<ConfigProvider iconLibrary="…">` at the root.
|