new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Storybook · Setup · all subjects

installation per framework

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Install vite-plugin-storybook-nextjs

Install the plugin using npm install vite-plugin-storybook-nextjs, yarn add vite-plugin-storybook-nextjs, or pnpm add vite-plugin-storybook-nextjs.

React Native Storybook directory

React Native uses the `.rnstorybook` directory instead of `.storybook`.

storiesOf API for Angular

Angular stories can be created using storiesOf() from @storybook/angular, passing a category name and the module, then calling .add() to define individual stories with a name and configuration object containing template and moduleMetadata.

Angular story with ng-content component

In Angular Storybook stories, you can define a component with ng-content and include it in a story template. The component must be declared in the moduleMetadata of the story. In this example, a WithNgContentComponent is created with a template containing ng-content, then used in a story where the content is provided inline in the template string.

moduleMetadata declarations in Angular stories

To use custom Angular components in Storybook stories, they must be declared in the moduleMetadata object. The declarations property is an array that lists all custom components used in the story's template.

custom-elements.json file requirement

Web Components require a custom-elements.json file to generate Props tables documentation in Storybook Docs. This file can be hand-written or generated using an analyzer.

custom-elements.json schema version 1.0.0 analyzers

Known analyzers that output custom-elements.json v1.0.0 include: @custom-elements-manifest/analyzer (supports Vanilla, LitElement, FASTElement, Stencil, Catalyst, Atomico).

custom-elements.json older version analyzers

Known analyzers that output older versions of custom-elements.json include: web-component-analyzer (supports LitElement, Polymer, Vanilla, Stencil) and stenciljs (supports Stencil but does not have all metadata).

Generate custom-elements.json with Stencil

To generate custom-elements.json with Stencil, add a docs-vscode output target to the outputTargets array in stencil.config.ts: { type: 'docs-vscode', file: 'custom-elements.json' }

Web Components story component configuration

In story files for Web Components, set the component property to the component name as a string, which must match the tagName found in the custom-elements.json file. Example: export default { title: 'Demo Card', component: 'your-component-name', };

Web Components Docs addon installation setup

To install Storybook Docs for Web Components, first check the general addon-docs installation section. Then ensure you have a custom-elements.json file. Add to .storybook/preview.js: import { setCustomElementsManifest } from '@storybook/web-components'; import customElements from '../custom-elements.json'; setCustomElementsManifest(customElements);

Give your agent this brain