storymesh-darwin-arm64 0.1.0 → 0.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/README.md +22 -8
- package/bin/storymesh +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
English | [日本語ドキュメント](README.ja.md)
|
|
4
4
|
|
|
5
|
-
`storymesh` is a Rust CLI that checks whether components have corresponding Storybook story files and reports story coverage. It supports React, Vue, and Angular.
|
|
5
|
+
`storymesh` is a Rust CLI that checks whether components have corresponding Storybook story files and reports story coverage. It supports React, Vue, Svelte, and Angular.
|
|
6
6
|
|
|
7
7
|
Use it to:
|
|
8
8
|
|
|
@@ -17,6 +17,7 @@ Use it to:
|
|
|
17
17
|
| --- | --- | --- |
|
|
18
18
|
| React | `.tsx`, `.jsx`, and PascalCase `.ts` / `.js` files | `react` |
|
|
19
19
|
| Vue | `.vue` | `vue` |
|
|
20
|
+
| Svelte | `.svelte` | `svelte` |
|
|
20
21
|
| Angular | `*.component.ts` and `.ts` files with `@Component(...)` | `angular` |
|
|
21
22
|
|
|
22
23
|
## Installation
|
|
@@ -109,7 +110,7 @@ All 3 React components have stories.
|
|
|
109
110
|
List components with missing stories. Use this command to detect missing stories in CI.
|
|
110
111
|
|
|
111
112
|
```sh
|
|
112
|
-
./target/release/storymesh check [PATH] [--framework react|vue|angular] [--ignore PATTERN] [--ignore-file PATH] [--generate]
|
|
113
|
+
./target/release/storymesh check [PATH] [--framework react|vue|svelte|angular] [--ignore PATTERN] [--ignore-file PATH] [--generate]
|
|
113
114
|
```
|
|
114
115
|
|
|
115
116
|
With `--generate`, the command creates a minimal [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf) story next to each component detected as missing a story:
|
|
@@ -127,7 +128,7 @@ Card.stories.tsx
|
|
|
127
128
|
|
|
128
129
|
With `--generate`, the exit code indicates whether generation succeeded rather than whether stories were missing. It returns `0` if generation succeeds, including when there is nothing to generate, or `2` if generation fails. Running `check` again counts the generated stories as covered. Existing files are never overwritten.
|
|
129
130
|
|
|
130
|
-
React stories use the component's extension (for example, `Button.tsx` → `Button.stories.tsx`); Vue and Angular stories use `.stories.ts`. For React, the generator recognizes default exports and common named exports matching the filename. If it cannot find an importable export, it creates a `render: () => null` placeholder you can edit in Storybook. Vue
|
|
131
|
+
React stories use the component's extension (for example, `Button.tsx` → `Button.stories.tsx`); Vue, Svelte, and Angular stories use `.stories.ts`. For React, the generator recognizes default exports and common named exports matching the filename. If it cannot find an importable export, it creates a `render: () => null` placeholder you can edit in Storybook. Vue and Svelte use default imports with the component file extension, and Angular assumes a conventional class name (for example, `user-card.component.ts` → `UserCardComponent`). Adjust the generated imports if your project's exports differ.
|
|
131
132
|
|
|
132
133
|
### `spec check` / `spec init` / `spec import`
|
|
133
134
|
|
|
@@ -142,9 +143,9 @@ pnpm exec storybook index -o storybook-static/index.json
|
|
|
142
143
|
./target/release/storymesh spec check --spec-dir .storymesh/specs --index storybook-static/index.json
|
|
143
144
|
```
|
|
144
145
|
|
|
145
|
-
`spec init` requires `--framework react|vue|angular` and creates YAML drafts from components in `.storymesh/specs`. Drafts normally contain `stories: []`; add the required UI states before running `spec check`. With `--with-stories`, components without story files receive a CSF `Default` story and YAML declaring that story as required. Existing story files are not edited. Regenerate the index to confirm that Storybook registers the generated stories.
|
|
146
|
+
`spec init` requires `--framework react|vue|svelte|angular` and creates YAML drafts from components in `.storymesh/specs`. Drafts normally contain `stories: []`; add the required UI states before running `spec check`. With `--with-stories`, components without story files receive a CSF `Default` story and YAML declaring that story as required. Existing story files are not edited. Regenerate the index to confirm that Storybook registers the generated stories.
|
|
146
147
|
|
|
147
|
-
`spec import` creates YAML files grouped by title from the stories in the index. It skips existing specs without overwriting them. `--merge` appends only new stories to an existing spec with an exactly matching title. To preserve comments and existing `required` values, updates are limited to simple v1 block-style `stories` lists. Anchors, aliases, flow-style lists, and multiple documents are rejected.
|
|
148
|
+
`spec import` creates YAML files grouped by title from the stories in the index. It skips existing specs without overwriting them. `--merge` appends only new stories to an existing spec with an exactly matching title. To preserve comments and existing `required` values, updates are limited to simple v1 block-style `stories` lists, with either unindented or two-space-indented list items. This includes YAML generated by `spec import` and `spec init --with-stories` for all supported frameworks. Appended entries retain the existing list indentation. Anchors, aliases, flow-style lists, and multiple documents are rejected.
|
|
148
149
|
|
|
149
150
|
Example YAML v1 spec:
|
|
150
151
|
|
|
@@ -248,8 +249,8 @@ pnpm storymesh:ignore-file
|
|
|
248
249
|
### Common rules
|
|
249
250
|
|
|
250
251
|
- Stories are searched for beside the component or in an immediate `stories` / `__stories__` subdirectory.
|
|
251
|
-
- Supported story extensions are `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, and `.
|
|
252
|
-
- The scanner skips `.git`, `.next`, `.storybook`, `build`, `coverage`, `dist`, `node_modules`, and `target` directories.
|
|
252
|
+
- Supported story extensions are `.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, and `.svelte`.
|
|
253
|
+
- The scanner skips `.git`, `.next`, `.storybook`, `.svelte-kit`, `build`, `coverage`, `dist`, `node_modules`, and `target` directories.
|
|
253
254
|
- Files excluded by `.storymeshignore`, `--ignore`, or `--ignore-file` count as neither components nor stories.
|
|
254
255
|
- `*.test.*`, `*.spec.*`, and story files themselves do not count as components.
|
|
255
256
|
|
|
@@ -267,6 +268,19 @@ pnpm storymesh:ignore-file
|
|
|
267
268
|
- `Button.vue` matches a story with the same name, such as `Button.stories.ts`.
|
|
268
269
|
- The `Button/index.vue` and `Button/Button.stories.ts` layout is also supported.
|
|
269
270
|
|
|
271
|
+
### Svelte
|
|
272
|
+
|
|
273
|
+
- `.svelte` files count as components, including lowercase filenames.
|
|
274
|
+
- `Button.svelte` matches `Button.stories.ts`, `Button.stories.js`, or native `Button.stories.svelte` files (and the other supported story extensions).
|
|
275
|
+
- The `Button/index.svelte` and `Button/Button.stories.svelte` layout is also supported, including `stories` / `__stories__` subdirectories.
|
|
276
|
+
- Native stories use [Storybook's Svelte CSF addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf). Generation uses standard CSF `.stories.ts` files with a default import from `./Button.svelte`.
|
|
277
|
+
|
|
278
|
+
```sh
|
|
279
|
+
./target/release/storymesh check src/lib --framework svelte
|
|
280
|
+
./target/release/storymesh check src/lib --framework svelte --generate
|
|
281
|
+
./target/release/storymesh spec init src/lib --framework svelte --with-stories
|
|
282
|
+
```
|
|
283
|
+
|
|
270
284
|
### Angular
|
|
271
285
|
|
|
272
286
|
- `*.component.ts` files count as components.
|
|
@@ -280,7 +294,7 @@ pnpm storymesh:ignore-file
|
|
|
280
294
|
|
|
281
295
|
- Stories with names that differ from their components are not matched.
|
|
282
296
|
- MDX documentation does not count toward coverage.
|
|
283
|
-
- Non-component React `.jsx` / `.tsx` files, and Vue pages or layouts, may count as components.
|
|
297
|
+
- Non-component React `.jsx` / `.tsx` files, and Vue or Svelte pages or layouts (including SvelteKit `+page.svelte` / `+layout.svelte`), may count as components.
|
|
284
298
|
- Components without the `.component` suffix that import Angular's `Component` under an alias are not detected.
|
|
285
299
|
|
|
286
300
|
## Development
|
package/bin/storymesh
CHANGED
|
Binary file
|