@bitrise/bitkit-v2 0.3.497 → 0.3.498-beta.3202
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/AGENTS.md
CHANGED
|
@@ -4,6 +4,18 @@ Conventions for **using** `@bitrise/bitkit-v2` in your own application code. Bui
|
|
|
4
4
|
|
|
5
5
|
If you're contributing to the library itself, see `CLAUDE.md` instead — this file only covers consumer-side usage.
|
|
6
6
|
|
|
7
|
+
## Top rules
|
|
8
|
+
|
|
9
|
+
The mistakes that break things silently or come up in almost every review. Each is detailed further down; read the whole file before you write code.
|
|
10
|
+
|
|
11
|
+
1. **Only use props and tokens that exist.** Check them in the Storybook MCP. An unknown token, or a dot-form semantic token like `text.secondary`, is dropped without an error. → _Before you start_, _Coding rules_
|
|
12
|
+
2. **Don't rebuild what Bitkit has**, and never use Chakra's own `Button`, `Input`, `Dialog` and the like. → _Building UI_
|
|
13
|
+
3. **Don't override a Bitkit component's styling**, and don't pass an empty or placeholder value to satisfy a required prop. Layout props (`width`, `flex`, `margin*`, …) are fine. → _Building UI_
|
|
14
|
+
4. **Never wrap a Bitkit component in `<Box>` for styling.** Put the style props on the component. → _Coding rules_
|
|
15
|
+
5. **Only semantic colors.** No palette colors, `sys/*` colors, hex codes or color names. → _Coding rules_
|
|
16
|
+
6. **Sizes are tokens.** For a content width use a `layout/maxWidth/*` token; anything else above 128 uses `rem()`. A bare-number string like `"420"` is dropped. → _Coding rules_
|
|
17
|
+
7. **Omit default prop values.** → _Coding rules_
|
|
18
|
+
|
|
7
19
|
## Before you start (instructions for the AI assistant)
|
|
8
20
|
|
|
9
21
|
**AI assistants: using the `bitkit-storybook-mcp` MCP server is mandatory before generating Bitkit code.** Memory, naming intuition, and TypeScript types are all secondary sources — hallucinated props are the #1 failure mode of AI-generated Bitkit code. Code generated with the MCP is much more accurate (live prop tables, real variants, real tokens, real examples) and faster (one structured query vs. crawling node_modules) than code generated without it.
|
|
@@ -222,7 +234,7 @@ Bitkit components use consistent prop names across the library:
|
|
|
222
234
|
- **A surface that stays dark in both color modes** (logs, terminal output) — `background/fixed-contrast` with `text/on-color` (and `color/white/*` for dimmer text). `background/contrast` turns light in dark mode, so the white text on it disappears. Don't reach for a palette color instead.
|
|
223
235
|
- **Always use `textStyle`** — never set `fontFamily` or `fontSize` on `<Text>`. Use `textStyle="body/md/regular"`, `textStyle="code/md"`, etc.
|
|
224
236
|
- **Sizes as strings** — `width="32"`, not `width={32}`. Tokens are strings.
|
|
225
|
-
- **Use existing size tokens** — closest existing token (1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128) representing pixel values (1=1px, 32=32px). Avoid arbitrary px (`width="100px"`). Above 128
|
|
237
|
+
- **Use existing size tokens** — closest existing token (1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128) representing pixel values (1=1px, 32=32px). Avoid arbitrary px (`width="100px"`). Above 128: for a content width use a `layout/maxWidth/*` token (`640`, `960`, `1280`, `1616`; e.g. `maxWidth="layout/maxWidth/960"`, sizes only, not spacing); for anything else use Bitkit's `rem()` helper (`import { rem } from '@bitrise/bitkit-v2'`, `maxWidth={rem(800)}`), never a bare-number string — `maxWidth="800"` is not a token, reaches the CSS without a unit, and the browser silently drops it.
|
|
226
238
|
- **Omit default prop values** — `<IconCross />`, not `<IconCross size="24" />` when 24 is the default.
|
|
227
239
|
- **Never pass `color` to a colored icon** — multi/fixed-color icons (`Icon*Color`, `IconWarningYellow`, `Icon*White`, etc.) have their colors baked in. They omit `color` from their props, so passing it is a type error. Only monochrome icons follow `color` (via `currentColor`).
|
|
228
240
|
- **No shorthand props** — use full names: `marginInline`, `paddingBlockEnd`, `width`, `background`, `padding`. Never `mx`, `pb`, `w`, `bg`, `p`, `mt`.
|
|
@@ -39,19 +39,24 @@ declare const controlButtonRecipe: import('@chakra-ui/react').RecipeDefinition<{
|
|
|
39
39
|
};
|
|
40
40
|
size: {
|
|
41
41
|
xxs: {
|
|
42
|
-
|
|
42
|
+
width: "24";
|
|
43
|
+
height: "24";
|
|
43
44
|
};
|
|
44
45
|
xs: {
|
|
45
|
-
|
|
46
|
+
width: "32";
|
|
47
|
+
height: "32";
|
|
46
48
|
};
|
|
47
49
|
sm: {
|
|
48
|
-
|
|
50
|
+
width: "32";
|
|
51
|
+
height: "32";
|
|
49
52
|
};
|
|
50
53
|
md: {
|
|
51
|
-
|
|
54
|
+
width: "40";
|
|
55
|
+
height: "40";
|
|
52
56
|
};
|
|
53
57
|
lg: {
|
|
54
|
-
|
|
58
|
+
width: "48";
|
|
59
|
+
height: "48";
|
|
55
60
|
};
|
|
56
61
|
};
|
|
57
62
|
}>;
|
|
@@ -8,6 +8,8 @@ var controlButtonRecipe = defineRecipe({
|
|
|
8
8
|
justifyContent: "center",
|
|
9
9
|
borderRadius: "4",
|
|
10
10
|
cursor: "pointer",
|
|
11
|
+
flexShrink: "0",
|
|
12
|
+
padding: 0,
|
|
11
13
|
background: "transparent",
|
|
12
14
|
_disabled: {
|
|
13
15
|
cursor: "not-allowed",
|
|
@@ -51,11 +53,26 @@ var controlButtonRecipe = defineRecipe({
|
|
|
51
53
|
}
|
|
52
54
|
},
|
|
53
55
|
size: {
|
|
54
|
-
xxs: {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
xxs: {
|
|
57
|
+
width: "24",
|
|
58
|
+
height: "24"
|
|
59
|
+
},
|
|
60
|
+
xs: {
|
|
61
|
+
width: "32",
|
|
62
|
+
height: "32"
|
|
63
|
+
},
|
|
64
|
+
sm: {
|
|
65
|
+
width: "32",
|
|
66
|
+
height: "32"
|
|
67
|
+
},
|
|
68
|
+
md: {
|
|
69
|
+
width: "40",
|
|
70
|
+
height: "40"
|
|
71
|
+
},
|
|
72
|
+
lg: {
|
|
73
|
+
width: "48",
|
|
74
|
+
height: "48"
|
|
75
|
+
}
|
|
59
76
|
}
|
|
60
77
|
},
|
|
61
78
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ControlButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ControlButton.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst controlButtonRecipe = defineRecipe({\n className: 'control-button',\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '4',\n cursor: 'pointer',\n background: 'transparent',\n _disabled: {\n cursor: 'not-allowed',\n _hover: {\n background: 'transparent',\n },\n _active: {\n background: 'transparent',\n },\n },\n },\n variants: {\n isDanger: {\n false: {\n color: 'button/control/fg',\n _hover: {\n background: 'button/control/bg-hover',\n color: 'button/control/fg-hover',\n _active: {\n background: 'button/control/bg-active',\n color: 'button/control/fg-active',\n },\n },\n _active: {\n background: 'button/control/bg-active',\n color: 'button/control/fg-active',\n },\n _disabled: {\n color: 'button/control/fg-disabled!',\n },\n },\n true: {\n color: 'button/control-danger/fg',\n _hover: {\n background: 'button/control-danger/bg-hover',\n color: 'button/control-danger/fg-hover',\n _active: {\n background: 'button/control-danger/bg-active',\n color: 'button/control-danger/fg-active',\n },\n },\n _active: {\n background: 'button/control-danger/bg-active',\n color: 'button/control-danger/fg-active',\n },\n _disabled: {\n color: 'button/control-danger/fg-disabled!',\n },\n },\n },\n size: {\n xxs: {
|
|
1
|
+
{"version":3,"file":"ControlButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ControlButton.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst controlButtonRecipe = defineRecipe({\n className: 'control-button',\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '4',\n cursor: 'pointer',\n flexShrink: '0',\n padding: 0,\n background: 'transparent',\n _disabled: {\n cursor: 'not-allowed',\n _hover: {\n background: 'transparent',\n },\n _active: {\n background: 'transparent',\n },\n },\n },\n variants: {\n isDanger: {\n false: {\n color: 'button/control/fg',\n _hover: {\n background: 'button/control/bg-hover',\n color: 'button/control/fg-hover',\n _active: {\n background: 'button/control/bg-active',\n color: 'button/control/fg-active',\n },\n },\n _active: {\n background: 'button/control/bg-active',\n color: 'button/control/fg-active',\n },\n _disabled: {\n color: 'button/control/fg-disabled!',\n },\n },\n true: {\n color: 'button/control-danger/fg',\n _hover: {\n background: 'button/control-danger/bg-hover',\n color: 'button/control-danger/fg-hover',\n _active: {\n background: 'button/control-danger/bg-active',\n color: 'button/control-danger/fg-active',\n },\n },\n _active: {\n background: 'button/control-danger/bg-active',\n color: 'button/control-danger/fg-active',\n },\n _disabled: {\n color: 'button/control-danger/fg-disabled!',\n },\n },\n },\n // Fixed sizes, not padding around the icon: a padded button stretches to the height of a\n // taller sibling in a flex row, so every consumer had to pin it with `alignSelf`.\n size: {\n xxs: { width: '24', height: '24' },\n xs: { width: '32', height: '32' },\n sm: { width: '32', height: '32' },\n md: { width: '40', height: '40' },\n lg: { width: '48', height: '48' },\n },\n },\n defaultVariants: {\n isDanger: false,\n size: 'sm',\n },\n});\n\nexport default controlButtonRecipe;\n"],"mappings":";;AAEA,IAAM,sBAAsB,aAAa;CACvC,WAAW;CACX,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,cAAc;EACd,QAAQ;EACR,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,WAAW;GACT,QAAQ;GACR,QAAQ,EACN,YAAY,cACd;GACA,SAAS,EACP,YAAY,cACd;EACF;CACF;CACA,UAAU;EACR,UAAU;GACR,OAAO;IACL,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,OAAO;KACP,SAAS;MACP,YAAY;MACZ,OAAO;KACT;IACF;IACA,SAAS;KACP,YAAY;KACZ,OAAO;IACT;IACA,WAAW,EACT,OAAO,8BACT;GACF;GACA,MAAM;IACJ,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,OAAO;KACP,SAAS;MACP,YAAY;MACZ,OAAO;KACT;IACF;IACA,SAAS;KACP,YAAY;KACZ,OAAO;IACT;IACA,WAAW,EACT,OAAO,qCACT;GACF;EACF;EAGA,MAAM;GACJ,KAAK;IAAE,OAAO;IAAM,QAAQ;GAAK;GACjC,IAAI;IAAE,OAAO;IAAM,QAAQ;GAAK;GAChC,IAAI;IAAE,OAAO;IAAM,QAAQ;GAAK;GAChC,IAAI;IAAE,OAAO;IAAM,QAAQ;GAAK;GAChC,IAAI;IAAE,OAAO;IAAM,QAAQ;GAAK;EAClC;CACF;CACA,iBAAiB;EACf,UAAU;EACV,MAAM;CACR;AACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitrise/bitkit-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.498-beta.3202",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI V3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -39,7 +39,9 @@
|
|
|
39
39
|
"license": "MIT",
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "vite build",
|
|
42
|
+
"prestorybook": "npm run docs:generate",
|
|
42
43
|
"storybook": "storybook dev -p 6006",
|
|
44
|
+
"prebuild-storybook": "npm run docs:generate",
|
|
43
45
|
"build-storybook": "storybook build",
|
|
44
46
|
"theme:generate-types": "chakra typegen lib/theme/index.ts && node ./scripts/prune-color-tokens.cjs",
|
|
45
47
|
"theme:diff-tokens": "node ./scripts/diff-design-tokens.cjs",
|
|
@@ -47,6 +49,7 @@
|
|
|
47
49
|
"lint": "eslint .",
|
|
48
50
|
"lint:fix": "eslint . --fix",
|
|
49
51
|
"check:agents-drift": "node ./scripts/check-agents-drift.cjs",
|
|
52
|
+
"docs:generate": "tsx ./scripts/generate-docs-text.ts",
|
|
50
53
|
"start": "npm run storybook",
|
|
51
54
|
"type-check": "tsc --noEmit",
|
|
52
55
|
"release": "release-it patch --ci",
|