├── .editorconfig ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug-report.yml │ ├── config.yml │ └── feature-request.yml ├── PULL_REQUEST_TEMPLATE.md ├── commit-convention.md └── workflows │ ├── nightly.yml │ ├── pr-title.yml │ ├── release-notes.yml │ ├── test-nuxt3.yml │ ├── test-svelte4.yml │ ├── test-vue3.yml │ └── test.yml ├── .gitignore ├── .npmrc ├── .stackblitz └── codeflow.json ├── .vscode └── settings.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── docs ├── .vitepress │ ├── config.js │ └── theme │ │ ├── DemoLinks.vue │ │ ├── DemoPreview.vue │ │ ├── MeetTeam.vue │ │ ├── SponsorButton.vue │ │ ├── index.js │ │ ├── style │ │ ├── index.pcss │ │ └── vars.pcss │ │ └── util │ │ └── dark.ts ├── examples │ ├── index.md │ ├── tailwind.md │ ├── visual-regression-testing │ │ ├── lost-pixel.md │ │ └── percy.md │ └── vue3 │ │ ├── controlled-stories.md │ │ ├── single-stories.md │ │ └── variant-stories.md ├── guide │ ├── config.md │ ├── getting-started.md │ ├── index.md │ ├── plugins │ │ ├── development.md │ │ └── official.md │ ├── svelte3 │ │ ├── controls.md │ │ ├── docs.md │ │ ├── events.md │ │ ├── getting-started.md │ │ ├── hierarchy.md │ │ └── stories.md │ └── vue3 │ │ ├── app-setup.md │ │ ├── controls.md │ │ ├── docs.md │ │ ├── events.md │ │ ├── getting-started.md │ │ ├── hierarchy.md │ │ ├── stories.md │ │ └── wrapper.md ├── index.md ├── new.md ├── package.json ├── public │ ├── favicon.ico │ ├── histoire+percy.svg │ ├── histoire.mp3 │ ├── logo.svg │ ├── opengraph.png │ ├── stackblitz.png │ ├── svelte.svg │ └── vue.svg └── reference │ ├── client.md │ ├── config.md │ ├── plugin-api.md │ ├── svelte3 │ ├── story.md │ └── variant.md │ └── vue3 │ ├── story.md │ └── variant.md ├── eslint.config.mjs ├── examples ├── nuxt3 │ ├── .gitignore │ ├── README.md │ ├── app.vue │ ├── components │ │ ├── AutoImport.story.vue │ │ ├── BaseButton.story.vue │ │ ├── BaseButton.vue │ │ ├── BaseButtonLink.story.vue │ │ ├── BaseButtonLink.vue │ │ ├── Meow.vue │ │ └── Simple.story.vue │ ├── cypress.config.mjs │ ├── cypress │ │ ├── e2e │ │ │ ├── all-stories.cy.js │ │ │ └── render-story.cy.js │ │ ├── fixtures │ │ │ └── example.json │ │ └── support │ │ │ ├── commands.js │ │ │ └── e2e.js │ ├── histoire.config.ts │ ├── nuxt.config.ts │ ├── package.json │ └── tailwind.config.cjs ├── svelte4 │ ├── cypress.config.mjs │ ├── cypress │ │ ├── e2e │ │ │ ├── render-story.cy.js │ │ │ └── state-sync.cy.js │ │ ├── fixtures │ │ │ └── example.json │ │ └── support │ │ │ ├── commands.js │ │ │ └── e2e.js │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── vue-amsterdam.svg │ ├── src │ │ ├── Amsterdam.svelte │ │ ├── BaseButton.story.md │ │ ├── BaseButton.story.svelte │ │ ├── BaseButton.svelte │ │ ├── BindThis.story.svelte │ │ ├── Cars.story.svelte │ │ ├── ColorButton.story.svelte │ │ ├── ColorButton.svelte │ │ ├── ControlsVariant.story.svelte │ │ ├── Introduction.story.md │ │ ├── Meow.story.svelte │ │ ├── NoIframe.story.svelte │ │ └── ShareControls.story.svelte │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── sveltekit │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package.json │ ├── postcss.config.js │ ├── src │ │ ├── app.css │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── histoire.css │ │ ├── histoire.setup.ts │ │ ├── hooks.server.ts │ │ ├── lib │ │ │ ├── Counter.story.svelte │ │ │ ├── Counter.svelte │ │ │ ├── form.ts │ │ │ └── header │ │ │ │ ├── Header.svelte │ │ │ │ └── svelte-logo.svg │ │ └── routes │ │ │ ├── +layout.svelte │ │ │ ├── +page.svelte │ │ │ ├── +page.ts │ │ │ ├── about │ │ │ ├── +page.svelte │ │ │ └── +page.ts │ │ │ └── todos │ │ │ ├── +page.server.ts │ │ │ ├── +page.svelte │ │ │ └── api.ts │ ├── static │ │ ├── favicon.png │ │ ├── robots.txt │ │ ├── svelte-welcome.png │ │ └── svelte-welcome.webp │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── vue3-percy │ ├── histoire.config.ts │ ├── package.json │ ├── postcss.config.cjs │ ├── src │ │ ├── components │ │ │ ├── InjectDemo.story.vue │ │ │ └── InjectDemo.vue │ │ ├── histoire.css │ │ └── histoire.setup.ts │ └── vite.config.ts ├── vue3-screenshot │ ├── .histoire │ │ └── screenshots │ │ │ └── src-components-injectdemo-story-vue-src-components-injectdemo-story-vue-0-1280x800.png │ ├── histoire.config.ts │ ├── package.json │ ├── postcss.config.cjs │ ├── src │ │ ├── components │ │ │ ├── InjectDemo.story.vue │ │ │ └── InjectDemo.vue │ │ ├── histoire.css │ │ └── histoire.setup.ts │ └── vite.config.ts ├── vue3-themed │ ├── histoire.config.ts │ ├── package.json │ ├── postcss.config.cjs │ ├── public │ │ └── my-favicon.svg │ ├── src │ │ ├── BaseButton.story.vue │ │ ├── BaseButton.vue │ │ ├── Serialize.story.vue │ │ ├── SubStory.story.vue │ │ ├── histoire-setup.ts │ │ ├── histoire.css │ │ └── img │ │ │ ├── logo-dark.svg │ │ │ ├── logo-light.svg │ │ │ └── logo-square.svg │ └── vite.config.ts ├── vue3-vuetify │ ├── histoire.config.ts │ ├── package.json │ ├── postcss.config.cjs │ ├── src │ │ ├── components │ │ │ └── v-btn.story.vue │ │ ├── histoire.setup.ts │ │ └── shims.d.ts │ └── vite.config.ts └── vue3 │ ├── cypress-parallel.mjs │ ├── cypress.config.mjs │ ├── cypress │ ├── e2e │ │ ├── codegen-vue3.cy.js │ │ ├── controls.cy.js │ │ ├── docs.cy.js │ │ ├── event.cy.js │ │ ├── markdown-links.cy.js │ │ ├── search.cy.js │ │ ├── setup-vue3.cy.js │ │ ├── state.cy.js │ │ ├── stories-list.cy.js │ │ ├── story-preview.cy.js │ │ ├── toolbar-background.cy.js │ │ └── wrapper.cy.js │ ├── fixtures │ │ └── example.json │ ├── plugins │ │ └── index.js │ └── support │ │ ├── commands.js │ │ └── e2e.js │ ├── histoire.config.ts │ ├── package.json │ ├── postcss.config.cjs │ ├── public │ ├── histoire.svg │ ├── lottie-data.json │ └── vue-amsterdam.svg │ ├── src │ ├── LongFile1.story.md │ ├── LongFile2.story.md │ ├── MarkdownFile.story.md │ ├── components │ │ ├── Amsterdam.vue │ │ ├── AutoStateProps.story.vue │ │ ├── AutoStateProps.vue │ │ ├── BaseButton.story.vue │ │ ├── BaseButton.vue │ │ ├── CodeGen.story.vue │ │ ├── ColorButton.story.vue │ │ ├── ColorButton.vue │ │ ├── ComplexParameter.story.vue │ │ ├── ComplexParameter.vue │ │ ├── ContrastColor.story.vue │ │ ├── Controls.story.vue │ │ ├── DarkMode.story.vue │ │ ├── Demo.story.vue │ │ ├── Demo.vue │ │ ├── Docs.story.vue │ │ ├── Empty.story.vue │ │ ├── EventButton.story.vue │ │ ├── EventButton.vue │ │ ├── EventButtonGrid.story.vue │ │ ├── GlobalComp.vue │ │ ├── HandWrittenSource.story.vue │ │ ├── HugeGrid.story.vue │ │ ├── InjectDemo.vue │ │ ├── Introduction.story.vue │ │ ├── LottieAnimation.story.vue │ │ ├── MarkdownLinks.story.vue │ │ ├── Meow.story.md │ │ ├── Meow.story.vue │ │ ├── ModalWithSlots.vue │ │ ├── NoVariantTag.story.vue │ │ ├── PiniaStore.story.vue │ │ ├── PiniaStore.vue │ │ ├── Responsive.story.vue │ │ ├── Responsive.vue │ │ ├── Serialize.story.vue │ │ ├── SharedControls.story.vue │ │ ├── SlotWithProps.vue │ │ ├── State.story.vue │ │ ├── StateOption.story.vue │ │ ├── StateSetup.story.vue │ │ ├── StateSetup2.story.vue │ │ ├── StorySetup.story.vue │ │ ├── SubStory.story.vue │ │ ├── SubStory2.story.vue │ │ ├── WithSass.story.vue │ │ ├── WithSass.vue │ │ ├── WrapperGlobal.vue │ │ ├── WrapperMetaOnStory.story.vue │ │ ├── WrapperMetaOnVariant.story.vue │ │ └── huge-grid.js │ ├── env.d.ts │ ├── histoire.css │ ├── histoire.setup.ts │ ├── lib │ │ └── myStore.ts │ └── main.ts │ ├── tailwind.config.cjs │ ├── tsconfig.json │ └── vite.config.ts ├── logo-wip.svg ├── logo.svg ├── netlify.toml ├── package.json ├── packages ├── histoire-app │ ├── package.json │ ├── postcss.config.cjs │ ├── scripts │ │ ├── copy.mjs │ │ └── watchAndCopy.mjs │ ├── src │ │ ├── app │ │ │ ├── App.vue │ │ │ ├── api.ts │ │ │ ├── assets │ │ │ │ ├── histoire-text-dark.svg │ │ │ │ ├── histoire-text.svg │ │ │ │ └── histoire.svg │ │ │ ├── components │ │ │ │ ├── HomeView.vue │ │ │ │ ├── app │ │ │ │ │ ├── AppHeader.vue │ │ │ │ │ ├── AppLogo.vue │ │ │ │ │ ├── Breadcrumb.vue │ │ │ │ │ ├── HomeCounter.vue │ │ │ │ │ ├── InitialLoading.vue │ │ │ │ │ └── MobileOverlay.vue │ │ │ │ ├── base │ │ │ │ │ ├── BaseButton.vue │ │ │ │ │ ├── BaseCheckbox.vue │ │ │ │ │ ├── BaseCopyIcon.vue │ │ │ │ │ ├── BaseEmpty.vue │ │ │ │ │ ├── BaseIcon.vue │ │ │ │ │ ├── BaseKeyboardShortcut.vue │ │ │ │ │ ├── BaseListItem.vue │ │ │ │ │ ├── BaseListItemLink.vue │ │ │ │ │ ├── BaseOverflowMenu.vue │ │ │ │ │ ├── BaseOverflowTab.vue │ │ │ │ │ ├── BaseSelect.vue │ │ │ │ │ ├── BaseSplitPane.vue │ │ │ │ │ ├── BaseTab.vue │ │ │ │ │ └── BaseTag.vue │ │ │ │ ├── command │ │ │ │ │ ├── CommandPrompts.vue │ │ │ │ │ ├── CommandPromptsModal.vue │ │ │ │ │ ├── PromptSelect.vue │ │ │ │ │ └── PromptText.vue │ │ │ │ ├── misc │ │ │ │ │ ├── CheckerboardPattern.vue │ │ │ │ │ └── HatchedPattern.vue │ │ │ │ ├── panel │ │ │ │ │ ├── ControlsComponentPropItem.vue │ │ │ │ │ ├── ControlsComponentProps.vue │ │ │ │ │ ├── ControlsComponentState.vue │ │ │ │ │ ├── ControlsComponentStateItem.vue │ │ │ │ │ ├── PaneTabs.vue │ │ │ │ │ ├── StatePresets.vue │ │ │ │ │ ├── StoryControls.vue │ │ │ │ │ ├── StoryDocs.vue │ │ │ │ │ ├── StoryEvent.vue │ │ │ │ │ ├── StoryEvents.vue │ │ │ │ │ ├── StorySidePanel.vue │ │ │ │ │ └── StorySourceCode.vue │ │ │ │ ├── search │ │ │ │ │ ├── SearchItem.vue │ │ │ │ │ ├── SearchItemContent.vue │ │ │ │ │ ├── SearchLoading.vue │ │ │ │ │ ├── SearchModal.vue │ │ │ │ │ ├── SearchPane.vue │ │ │ │ │ ├── search-docs-data.ts │ │ │ │ │ ├── search-title-data.ts │ │ │ │ │ └── types.ts │ │ │ │ ├── story │ │ │ │ │ ├── GenericMountStory.vue │ │ │ │ │ ├── GenericRenderStory.vue │ │ │ │ │ ├── StoryResponsivePreview.vue │ │ │ │ │ ├── StoryVariantGrid.vue │ │ │ │ │ ├── StoryVariantGridItem.vue │ │ │ │ │ ├── StoryVariantListItem.vue │ │ │ │ │ ├── StoryVariantSingle.vue │ │ │ │ │ ├── StoryVariantSinglePreviewNative.vue │ │ │ │ │ ├── StoryVariantSinglePreviewRemote.vue │ │ │ │ │ ├── StoryVariantSingleView.vue │ │ │ │ │ ├── StoryView.vue │ │ │ │ │ └── StoryViewer.vue │ │ │ │ ├── toolbar │ │ │ │ │ ├── DevOnlyToolbarOpenInEditor.vue │ │ │ │ │ ├── ToolbarBackground.vue │ │ │ │ │ ├── ToolbarNewTab.vue │ │ │ │ │ ├── ToolbarResponsiveSize.vue │ │ │ │ │ ├── ToolbarTextDirection.vue │ │ │ │ │ └── ToolbarTitle.vue │ │ │ │ └── tree │ │ │ │ │ ├── StoryGroup.vue │ │ │ │ │ ├── StoryList.vue │ │ │ │ │ ├── StoryListFolder.vue │ │ │ │ │ └── StoryListItem.vue │ │ │ ├── index.ts │ │ │ ├── plugin.ts │ │ │ ├── router.ts │ │ │ ├── sandbox.ts │ │ │ ├── stores │ │ │ │ ├── command.ts │ │ │ │ ├── events.ts │ │ │ │ ├── folder.ts │ │ │ │ ├── preview-settings.ts │ │ │ │ └── story.ts │ │ │ ├── style │ │ │ │ ├── floating.pcss │ │ │ │ ├── main.pcss │ │ │ │ ├── sandbox.css │ │ │ │ └── transitions.pcss │ │ │ ├── types.ts │ │ │ └── util │ │ │ │ ├── commands.ts │ │ │ │ ├── config.ts │ │ │ │ ├── const.ts │ │ │ │ ├── dark.ts │ │ │ │ ├── docs.ts │ │ │ │ ├── env.ts │ │ │ │ ├── events.ts │ │ │ │ ├── keyboard.ts │ │ │ │ ├── mapping.ts │ │ │ │ ├── open-in-editor.ts │ │ │ │ ├── preview-settings.ts │ │ │ │ ├── responsive.ts │ │ │ │ ├── sandbox.ts │ │ │ │ ├── scroll.ts │ │ │ │ ├── select.ts │ │ │ │ ├── state.ts │ │ │ │ ├── tooltip.ts │ │ │ │ └── variant.ts │ │ ├── bundle-index.js │ │ ├── bundle-main-dev.js │ │ ├── bundle-main.js │ │ ├── bundle-sandbox-dev.js │ │ ├── bundle-sandbox.js │ │ ├── index.ts │ │ ├── shim.d.ts │ │ └── virtual.d.ts │ ├── tailwind.config.cjs │ ├── tsconfig.json │ └── vite.config.ts ├── histoire-controls-stories │ ├── Intro.story.md │ ├── histoire-setup.ts │ ├── histoire.config.ts │ ├── package.json │ ├── public │ │ └── histoire.svg │ ├── tailwind.config.cjs │ └── vite.config.ts ├── histoire-controls │ ├── README.md │ ├── package.json │ ├── postcss.config.cjs │ ├── src │ │ ├── components │ │ │ ├── HstCopyIcon.vue │ │ │ ├── HstWrapper.vue │ │ │ ├── button │ │ │ │ ├── HstButton.story.vue │ │ │ │ ├── HstButton.vue │ │ │ │ ├── HstButtonGroup.story.vue │ │ │ │ └── HstButtonGroup.vue │ │ │ ├── checkbox │ │ │ │ ├── HstCheckbox.spec.ts │ │ │ │ ├── HstCheckbox.story.vue │ │ │ │ ├── HstCheckbox.vue │ │ │ │ ├── HstCheckboxList.story.vue │ │ │ │ ├── HstCheckboxList.vue │ │ │ │ ├── HstSimpleCheckbox.story.vue │ │ │ │ ├── HstSimpleCheckbox.vue │ │ │ │ └── __snapshots__ │ │ │ │ │ └── HstCheckbox.spec.ts.snap │ │ │ ├── colorselect │ │ │ │ ├── HstColorSelect.story.vue │ │ │ │ └── HstColorSelect.vue │ │ │ ├── design-tokens │ │ │ │ ├── HstColorShades.story.vue │ │ │ │ ├── HstColorShades.vue │ │ │ │ ├── HstTokenGrid.story.vue │ │ │ │ ├── HstTokenGrid.vue │ │ │ │ ├── HstTokenList.story.vue │ │ │ │ └── HstTokenList.vue │ │ │ ├── json │ │ │ │ ├── HstJson.story.vue │ │ │ │ └── HstJson.vue │ │ │ ├── number │ │ │ │ ├── HstNumber.story.vue │ │ │ │ └── HstNumber.vue │ │ │ ├── radio │ │ │ │ ├── HstRadio.story.vue │ │ │ │ └── HstRadio.vue │ │ │ ├── select │ │ │ │ ├── CustomSelect.vue │ │ │ │ ├── HstSelect.story.vue │ │ │ │ └── HstSelect.vue │ │ │ ├── slider │ │ │ │ ├── HstSlider.story.vue │ │ │ │ └── HstSlider.vue │ │ │ ├── text │ │ │ │ ├── HstText.story.vue │ │ │ │ └── HstText.vue │ │ │ └── textarea │ │ │ │ ├── HstTextarea.story.vue │ │ │ │ └── HstTextarea.vue │ │ ├── end.d.ts │ │ ├── index.ts │ │ ├── style │ │ │ └── main.css │ │ ├── types.ts │ │ └── utils.ts │ ├── tailwind.config.cjs │ ├── tsconfig.json │ └── vite.config.ts ├── histoire-plugin-nuxt │ ├── README.md │ ├── package.json │ ├── runtime │ │ ├── app-component.mjs │ │ ├── components.mjs │ │ └── composables.mjs │ ├── src │ │ ├── global.d.ts │ │ ├── index.ts │ │ └── runtime │ │ │ └── app-setup.ts │ └── tsconfig.json ├── histoire-plugin-percy │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── histoire-plugin-screenshot │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── histoire-plugin-svelte │ ├── assets │ │ ├── histoire-svelte-text.svg │ │ └── histoire-svelte.svg │ ├── package.json │ ├── src │ │ ├── client │ │ │ ├── MountStory.svelte │ │ │ ├── MountVariant.svelte │ │ │ ├── RenderStory.svelte │ │ │ ├── RenderVariant.svelte │ │ │ ├── Stub.svelte │ │ │ ├── Wrap.svelte │ │ │ ├── index.ts │ │ │ ├── mount.ts │ │ │ ├── render.ts │ │ │ └── util.ts │ │ ├── collect │ │ │ ├── Story.svelte │ │ │ ├── Variant.svelte │ │ │ └── index.ts │ │ ├── commands │ │ │ ├── generate-story.client.ts │ │ │ └── generate-story.server.ts │ │ ├── helpers.ts │ │ ├── index.node.ts │ │ ├── index.ts │ │ └── util │ │ │ └── list-components.ts │ ├── svelte.config.js │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── histoire-plugin-vue │ ├── client.d.ts │ ├── collect.d.ts │ ├── components.d.ts │ ├── package.json │ ├── src │ │ ├── client │ │ │ ├── app │ │ │ │ ├── MountStory.ts │ │ │ │ ├── RenderStory.ts │ │ │ │ ├── RouterLinkStub.ts │ │ │ │ ├── Story.ts │ │ │ │ ├── Variant.ts │ │ │ │ ├── global-components.ts │ │ │ │ ├── index.ts │ │ │ │ └── util.ts │ │ │ ├── client.ts │ │ │ ├── codegen.ts │ │ │ ├── server.ts │ │ │ └── server │ │ │ │ ├── Story.ts │ │ │ │ ├── Variant.ts │ │ │ │ ├── run.ts │ │ │ │ └── stub.ts │ │ ├── commands │ │ │ ├── generate-story.client.ts │ │ │ └── generate-story.server.ts │ │ ├── helpers.ts │ │ ├── index.node.ts │ │ ├── index.ts │ │ └── util │ │ │ └── list-components.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── histoire-shared │ ├── package.json │ ├── src │ │ ├── codegen │ │ │ ├── const.ts │ │ │ ├── index.ts │ │ │ ├── serialize-js.ts │ │ │ └── util.ts │ │ ├── index.ts │ │ ├── state.ts │ │ ├── story.ts │ │ ├── type-utils.ts │ │ └── types │ │ │ ├── command.ts │ │ │ ├── config.ts │ │ │ ├── index.ts │ │ │ ├── plugin.ts │ │ │ ├── prompt.ts │ │ │ └── story.ts │ └── tsconfig.json ├── histoire-vendors │ ├── entries.js │ ├── floating-vue.d.ts │ ├── iconify.d.ts │ ├── package.json │ ├── pinia.d.ts │ ├── rollup.config.mjs │ ├── scroll.d.ts │ ├── src │ │ └── client │ │ │ ├── b-floating-vue.ts │ │ │ ├── b-iconify.ts │ │ │ ├── b-pinia.ts │ │ │ ├── b-scroll.ts │ │ │ ├── b-vue-router.ts │ │ │ ├── b-vue-use.ts │ │ │ └── b-vue.ts │ ├── tsconfig.json │ ├── vue-router.d.ts │ ├── vue-use.d.ts │ └── vue.d.ts └── histoire │ ├── README.md │ ├── bin.mjs │ ├── client.d.ts │ ├── client.js │ ├── index.d.ts │ ├── package.json │ ├── plugin.d.ts │ ├── plugin.js │ ├── src │ ├── controls.ts │ └── node │ │ ├── __tests__ │ │ ├── markdown.spec.ts │ │ ├── markdown │ │ │ ├── test1.story.md │ │ │ └── test2.story.md │ │ └── tree.spec.ts │ │ ├── alias.ts │ │ ├── bin.ts │ │ ├── build-serialize.ts │ │ ├── build.ts │ │ ├── builtin-plugins │ │ ├── pinceau-tokens.ts │ │ ├── tailwind-tokens.ts │ │ └── vanilla-support │ │ │ ├── MountStory.ts │ │ │ ├── RenderStory.ts │ │ │ ├── client.ts │ │ │ ├── collect.ts │ │ │ ├── plugin.ts │ │ │ ├── types.ts │ │ │ └── vanilla.story.ts │ │ ├── collect │ │ ├── index.ts │ │ ├── run.ts │ │ └── worker.ts │ │ ├── colors.ts │ │ ├── commands │ │ ├── build.ts │ │ ├── dev.ts │ │ └── preview.ts │ │ ├── config.ts │ │ ├── context.ts │ │ ├── dom │ │ ├── dom-keys.ts │ │ ├── env.ts │ │ └── util.ts │ │ ├── index.ts │ │ ├── load.ts │ │ ├── markdown.ts │ │ ├── plugin.ts │ │ ├── preview.ts │ │ ├── search.ts │ │ ├── server.ts │ │ ├── stories.ts │ │ ├── tree.ts │ │ ├── util │ │ ├── find-up.ts │ │ ├── fs.ts │ │ ├── log.ts │ │ ├── slugify.ts │ │ └── vendors.ts │ │ ├── vendors │ │ ├── controls.ts │ │ └── vue.ts │ │ ├── virtual │ │ ├── index.ts │ │ ├── markdown.ts │ │ ├── noop.ts │ │ ├── resolved-commands.ts │ │ ├── resolved-config.ts │ │ ├── resolved-generated-global-setup.ts │ │ ├── resolved-generated-setup-code.ts │ │ ├── resolved-markdown-files.ts │ │ ├── resolved-stories.ts │ │ ├── resolved-support-plugins-client.ts │ │ ├── resolved-support-plugins-collect.ts │ │ ├── resolved-theme.ts │ │ ├── story-source.ts │ │ ├── story.ts │ │ ├── util.ts │ │ └── vite-plugin.ts │ │ └── vite.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── postcss.config.cjs ├── screenshot.png └── tailwind.config.cjs /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | indent_style = space 7 | indent_size = 2 8 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [Akryum, hugoattal] 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Questions & Discussions 4 | url: https://github.com/histoire-dev/histoire/discussions 5 | about: Use GitHub discussions for message-board style questions and discussions. 6 | - name: Discord Chat 7 | url: https://discord.gg/KpCnT72rJk 8 | about: Ask questions and discuss with other Histoire users in real time. 9 | -------------------------------------------------------------------------------- /.github/workflows/pr-title.yml: -------------------------------------------------------------------------------- 1 | name: Check PR title 2 | 3 | on: 4 | pull_request_target: 5 | types: 6 | - opened 7 | - edited 8 | - synchronize 9 | 10 | jobs: 11 | check-title: 12 | runs-on: ubuntu-latest 13 | steps: 14 | # Please look up the latest version from 15 | # https://github.com/amannn/action-semantic-pull-request/releases 16 | - uses: amannn/action-semantic-pull-request@v3.4.2 17 | env: 18 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 19 | -------------------------------------------------------------------------------- /.github/workflows/release-notes.yml: -------------------------------------------------------------------------------- 1 | name: Create release 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10 7 | workflow_dispatch: 8 | 9 | jobs: 10 | build: 11 | name: Create Release 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout code 15 | uses: actions/checkout@master 16 | with: 17 | fetch-depth: 0 # Fetch all tags 18 | 19 | - name: Create Release for Tag 20 | id: release_tag 21 | uses: Akryum/release-tag@v4.0.7 22 | env: 23 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 24 | with: 25 | tag_name: ${{ github.ref }} 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | histoire-dist/ 4 | .histoire/dist/ 5 | .idea 6 | **/cypress/screenshots/ 7 | **/cypress/videos/ 8 | .DS_Store 9 | .eslintcache 10 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | public-hoist-pattern[]=*nuxt* 2 | public-hoist-pattern[]=*ufo* 3 | public-hoist-pattern[]=*defu* 4 | public-hoist-pattern[]=*postcss* 5 | -------------------------------------------------------------------------------- /.stackblitz/codeflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "pnpm": { 3 | "overrides": { 4 | "histoire": "./packages/histoire", 5 | "@histoire/plugin-vue": "./packages/historie-plugin-vue", 6 | "@histoire/plugin-svelte": "./packages/historie-plugin-svelte", 7 | "@histoire/plugin-nuxt": "./packages/historie-plugin-nuxt", 8 | "@histoire/plugin-percy": "./packages/historie-plugin-percy", 9 | "@histoire/plugin-screenshot": "./packages/historie-plugin-screenshot" 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "tailwindCSS.experimental.configFile": { 3 | "tailwind.config.cjs": "docs/**", 4 | "packages/histoire-app/tailwind.config.cjs": "packages/histoire-app/**", 5 | "packages/histoire-controls/tailwind.config.cjs": "packages/histoire-controls/**" 6 | }, 7 | 8 | // Enable the ESlint flat config support 9 | "eslint.experimental.useFlatConfig": true, 10 | 11 | // Disable the default formatter, use eslint instead 12 | "editor.formatOnSave": false, 13 | 14 | // Auto fix 15 | "editor.codeActionsOnSave": { 16 | "source.fixAll.eslint": "explicit", 17 | "source.organizeImports": "never" 18 | }, 19 | 20 | // Enable eslint for all supported languages 21 | "eslint.validate": [ 22 | "javascript", 23 | "javascriptreact", 24 | "typescript", 25 | "typescriptreact", 26 | "vue", 27 | "html", 28 | "markdown", 29 | "json", 30 | "jsonc", 31 | "yaml", 32 | "toml", 33 | "gql", 34 | "graphql" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Guillaume Chau 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.js: -------------------------------------------------------------------------------- 1 | import { Icon } from '@iconify/vue' 2 | import FloatingVue from 'floating-vue' 3 | import DefaultTheme from 'vitepress/theme' 4 | import DemoLinks from './DemoLinks.vue' 5 | import DemoPreview from './DemoPreview.vue' 6 | import MeetTeam from './MeetTeam.vue' 7 | import SponsorButton from './SponsorButton.vue' 8 | import 'floating-vue/dist/style.css' 9 | import './style/vars.pcss' 10 | import './style/index.pcss' 11 | 12 | export default { 13 | ...DefaultTheme, 14 | enhanceApp({ app }) { 15 | app.use(FloatingVue, { 16 | themes: { 17 | dropdown: { 18 | computeTransformOrigin: true, 19 | }, 20 | }, 21 | }) 22 | app.component('Icon', Icon) 23 | app.component('SponsorButton', SponsorButton) 24 | app.component('MeetTeam', MeetTeam) 25 | app.component('DemoPreview', DemoPreview) 26 | app.component('DemoLinks', DemoLinks) 27 | }, 28 | } 29 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/style/vars.pcss: -------------------------------------------------------------------------------- 1 | :root { 2 | --c-brand: #10B981; 3 | --c-brand-light:#34D399; 4 | } 5 | 6 | html.dark { 7 | --c-brand: #3aa675; 8 | --c-brand-light: #349469; 9 | 10 | --c-bg: #22272e; 11 | --c-bg-light: #2b313a; 12 | --c-bg-lighter: #262c34; 13 | 14 | --c-text: #adbac7; 15 | --c-text-light: #96a7b7; 16 | --c-text-lighter: #8b9eb0; 17 | --c-text-lightest: #8094a8; 18 | 19 | --c-border: #3e4c5a; 20 | --c-border-dark: #34404c; 21 | --c-divider: #34404c; 22 | 23 | --c-tip: #318a62; 24 | --c-warning: #ceab00; 25 | --c-warning-bg: #7e755b; 26 | --c-warning-title: #ceac03; 27 | --c-warning-text: #362e00; 28 | --c-danger: #940000; 29 | --c-danger-bg: #806161; 30 | --c-danger-title: #610000; 31 | --c-danger-text: #3a0000; 32 | --c-details-bg: #323843; 33 | 34 | --code-hl-bg-color: #363b46; 35 | } 36 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/util/dark.ts: -------------------------------------------------------------------------------- 1 | import { useDark, useToggle } from '@vueuse/core' 2 | 3 | export const isDark = useDark({ valueDark: 'dark' }) 4 | export const toggleDark = useToggle(isDark) 5 | -------------------------------------------------------------------------------- /docs/examples/index.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | Find more examples [on the repository](https://github.com/histoire-dev/histoire/tree/main/examples)! 4 | -------------------------------------------------------------------------------- /docs/examples/tailwind.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS example 2 | 3 | In this example, we will see how to add Tailwind CSS to the stories. 4 | 5 | ## CSS file 6 | 7 | Make sure your project has a style file with the [Tailwind directives](https://tailwindcss.com/docs/functions-and-directives#tailwind). 8 | 9 | ```css 10 | /* src/tailwind.css */ 11 | 12 | @tailwind base; 13 | @tailwind components; 14 | @tailwind utilities; 15 | ``` 16 | 17 | ## Setup file 18 | 19 | Histoire allows us to execute a setup file automatically when rendering the stories. This is useful to add global CSS files. [Learn more](../guide/config.md#global-js-and-css) 20 | 21 | ```js 22 | // src/histoire-setup.ts 23 | 24 | import './tailwind.css' 25 | ``` 26 | 27 | We need to tell Histoire to use this file in the configuration file. [Learn more](../reference/config.md#setupfile) 28 | 29 | ```js 30 | // histoire.config.ts 31 | 32 | import { defineConfig } from 'histoire' 33 | 34 | export default defineConfig({ 35 | setupFile: '/src/histoire-setup.ts', 36 | }) 37 | ``` 38 | 39 | You can now use Tailwind utility classes in your stories (or import components using them)! 40 | -------------------------------------------------------------------------------- /docs/examples/visual-regression-testing/percy.md: -------------------------------------------------------------------------------- 1 | # Histoire Screenshot with Percy for visual regression testing 2 | 3 | You need the [Percy CLI](https://docs.percy.io/docs/cli-overview) installed to be able to send snapshots to Percy. 4 | 5 | ```bash 6 | pnpm add -D @histoire/plugin-percy 7 | ``` 8 | 9 | Add the plugin in histoire config: 10 | 11 | ```js 12 | import { HstPercy } from '@histoire/plugin-percy' 13 | import { defineConfig } from 'histoire' 14 | 15 | export default defineConfig({ 16 | plugins: [ 17 | HstPercy({ 18 | // Options here 19 | }), 20 | ], 21 | }) 22 | ``` 23 | 24 | Then use the Percy CLI 25 | 26 | ```bash 27 | # Replace `story:build` with the script to build the stories if you changed it 28 | percy exec pnpm run story:build 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/examples/vue3/single-stories.md: -------------------------------------------------------------------------------- 1 | # Single stories 2 | 3 | Here are some pattern examples to test your component without any variant. This is the simplest way to get you started. 4 | 5 | ## Within an iframe 6 | 7 | This will display your component inside an iframe to be able to test the responsiveness correctly. The iframe is needed for CSS media queries to work properly. 8 | 9 | ```vue 10 | 13 | 14 | 19 | ``` 20 | 21 | ## Integrated 22 | 23 | This will integrate your component directly in the app. The advantage being that you can pass complex arguments (such as functions or recursive object), but responsiveness won't work for CSS media queries. 24 | 25 | ```vue 26 | 29 | 30 | 38 | ``` 39 | -------------------------------------------------------------------------------- /docs/guide/plugins/official.md: -------------------------------------------------------------------------------- 1 | # Official Plugins 2 | 3 | - [@histoire/plugin-vue](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-vue): Vue 3 (support plugin) 4 | - [@histoire/plugin-nuxt](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-nuxt): Nuxt 3 5 | - [@histoire/plugin-svelte](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-svelte): Svelte 3 and SvelteKit 6 | - [@histoire/plugin-percy](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-percy): Visual regression testing with Percy 7 | - [@histoire/plugin-screenshot](https://github.com/histoire-dev/histoire/tree/main/packages/histoire-plugin-screenshot): Visual regression testing (simple) 8 | -------------------------------------------------------------------------------- /docs/guide/svelte3/events.md: -------------------------------------------------------------------------------- 1 | # Events 2 | 3 | Histoire can display a list of events emitted from your story. To register new events, use the `logEvent` function from `histoire/client`. 4 | 5 | The first parameter is the name of the event, and the second one is a data object you want to display when clicking on the event. 6 | 7 | ```svelte{3,11-12} 8 | 14 | 15 | 18 | logEvent('My event', arg)} />
19 | 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/guide/vue3/events.md: -------------------------------------------------------------------------------- 1 | # Events 2 | 3 | Histoire can display a list of events emitted from your story. To register new events, use the `logEvent` function from `histoire/client`. 4 | 5 | The first parameter is the name of the event, and the second one is a data object you want to display when clicking on the event. 6 | 7 | ```vue{3,10,11} 8 | 12 | 13 | 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/new.md: -------------------------------------------------------------------------------- 1 | # Quickstart 2 | 3 | [Learn more about Histoire](./guide/index.md) 4 | 5 |
6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "vue": "^3.5.13" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/public/histoire.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/docs/public/histoire.mp3 -------------------------------------------------------------------------------- /docs/public/opengraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/docs/public/opengraph.png -------------------------------------------------------------------------------- /docs/public/stackblitz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/docs/public/stackblitz.png -------------------------------------------------------------------------------- /docs/reference/client.md: -------------------------------------------------------------------------------- 1 | # Client API Reference 2 | 3 | You can access various APIs meant to be used inside stories from the `histoire/client` module. 4 | 5 | ## `logEvent` 6 | 7 | Logs an event in the `Events` sidepane. 8 | 9 | ```js 10 | import { logEvent } from 'histoire/client' 11 | 12 | logEvent('click', { some: 'data' }) 13 | ``` 14 | 15 | ## `isCollecting` 16 | 17 | Returns `true` if the story is executing through the NodeJS server. 18 | 19 | ```js 20 | import { isCollecting } from 'histoire/client' 21 | 22 | if (!isCollecting()) { 23 | // do something only in the browser 24 | } 25 | ``` 26 | 27 | ## `isDark` 28 | 29 | Returns `true` if dark mode is enabled. 30 | 31 | ```js 32 | import { isDark } from 'histoire/client' 33 | 34 | if (isDark()) { 35 | // do something only in dark mode 36 | } 37 | ``` 38 | 39 | ## `toggleDark` 40 | 41 | `toggleDark(value?: boolean): boolean` 42 | 43 | Toggles dark mode. If `value` is provided, it will be used instead of toggling. Returns the new value. 44 | 45 | ```js 46 | import { toggleDark } from 'histoire/client' 47 | 48 | toggleDark(true) 49 | ``` 50 | -------------------------------------------------------------------------------- /docs/reference/plugin-api.md: -------------------------------------------------------------------------------- 1 | # Plugin API 2 | 3 | ::: warning 4 | This doc and the Plugin API are work-in-progress. Expect changes. 5 | ::: 6 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import antfu from '@antfu/eslint-config' 2 | import pluginCypress from 'eslint-plugin-cypress/flat' 3 | 4 | export default antfu({ 5 | ignores: [ 6 | '**/histoire-dist/', 7 | '**/generated/', 8 | '**/public/', 9 | '**/.svelte-kit/', 10 | ], 11 | }, { 12 | rules: { 13 | 'curly': ['error', 'multi-line', 'consistent'], 14 | 'antfu/if-newline': 'off', 15 | 'antfu/no-import-dist': 'off', 16 | 'node/prefer-global/process': 'off', 17 | 'no-console': 'warn', 18 | 'ts/no-use-before-define': 'warn', 19 | 'vue/define-macros-order': 'off', // Bugged 20 | 'unused-imports/no-unused-vars': 'off', // Bugged on catch : https://github.com/sweepline/eslint-plugin-unused-imports/issues/105 21 | }, 22 | }, { 23 | files: ['**/*.vue'], 24 | rules: { 25 | 'import/first': 'off', 26 | }, 27 | }, { 28 | files: ['**/*.cy.js'], 29 | plugins: { 30 | cypress: pluginCypress, 31 | }, 32 | }, pluginCypress.configs.globals) 33 | -------------------------------------------------------------------------------- /examples/nuxt3/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | -------------------------------------------------------------------------------- /examples/nuxt3/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install --shamefully-hoist 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information. 43 | -------------------------------------------------------------------------------- /examples/nuxt3/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /examples/nuxt3/components/AutoImport.story.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /examples/nuxt3/components/BaseButtonLink.story.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /examples/nuxt3/components/BaseButtonLink.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 28 | 29 | 39 | -------------------------------------------------------------------------------- /examples/nuxt3/components/Meow.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/nuxt3/components/Simple.story.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /examples/nuxt3/cypress.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | viewportWidth: 1280, 5 | viewportHeight: 768, 6 | chromeWebSecurity: false, 7 | 8 | retries: { 9 | runMode: 2, 10 | openMode: 0, 11 | }, 12 | 13 | e2e: { 14 | baseUrl: 'http://localhost:4567', 15 | setupNodeEvents(_on, _config) { 16 | // implement node event listeners here 17 | }, 18 | }, 19 | 20 | video: false, 21 | }) 22 | -------------------------------------------------------------------------------- /examples/nuxt3/cypress/e2e/all-stories.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | describe('Stories list', () => { 4 | it('should display all stories', () => { 5 | cy.clearLocalStorage() 6 | cy.visit('/') 7 | cy.get('[data-test-id="story-list-item"]').should('have.length', 5) 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /examples/nuxt3/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /examples/nuxt3/cypress/support/commands.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/examples/nuxt3/cypress/support/commands.js -------------------------------------------------------------------------------- /examples/nuxt3/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | import './commands' 2 | -------------------------------------------------------------------------------- /examples/nuxt3/histoire.config.ts: -------------------------------------------------------------------------------- 1 | import { HstNuxt } from '@histoire/plugin-nuxt' 2 | import { HstVue } from '@histoire/plugin-vue' 3 | import { defineConfig } from 'histoire' 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | HstVue(), 8 | HstNuxt(), 9 | ], 10 | }) 11 | -------------------------------------------------------------------------------- /examples/nuxt3/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://v3.nuxtjs.org/api/configuration/nuxt.config 2 | export default defineNuxtConfig({ 3 | modules: [ 4 | '@nuxtjs/tailwindcss', 5 | ], 6 | 7 | runtimeConfig: { 8 | public: { 9 | configFromNuxt: 'test', 10 | }, 11 | }, 12 | 13 | compatibilityDate: '2024-12-20', 14 | }) 15 | -------------------------------------------------------------------------------- /examples/nuxt3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "histoire-example-nuxt3", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "story:dev": "histoire dev", 8 | "story:build": "histoire build", 9 | "story:preview": "histoire preview --port 4567", 10 | "ci": "start-server-and-test story:preview http://localhost:4567/ test", 11 | "test": "cypress run", 12 | "test:dev": "cypress open --config baseUrl=http://localhost:6006", 13 | "test:examples": "pnpm run story:build && pnpm run ci" 14 | }, 15 | "devDependencies": { 16 | "@histoire/plugin-nuxt": "workspace:*", 17 | "@histoire/plugin-vue": "workspace:*", 18 | "@nuxtjs/tailwindcss": "^6.12.2", 19 | "cypress": "^13.16.1", 20 | "histoire": "workspace:*", 21 | "nuxt": "^3.14.1592", 22 | "start-server-and-test": "^2.0.8", 23 | "vue": "^3.5.13" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/nuxt3/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /examples/svelte4/cypress.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | viewportWidth: 1280, 5 | viewportHeight: 768, 6 | chromeWebSecurity: false, 7 | 8 | retries: { 9 | runMode: 2, 10 | openMode: 0, 11 | }, 12 | 13 | e2e: { 14 | baseUrl: 'http://localhost:4567', 15 | setupNodeEvents(_on, _config) { 16 | // implement node event listeners here 17 | }, 18 | }, 19 | 20 | video: false, 21 | }) 22 | -------------------------------------------------------------------------------- /examples/svelte4/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /examples/svelte4/cypress/support/commands.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/examples/svelte4/cypress/support/commands.js -------------------------------------------------------------------------------- /examples/svelte4/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | import './commands' 2 | -------------------------------------------------------------------------------- /examples/svelte4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "histoire-example-svelte4", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "story:dev": "histoire dev", 8 | "story:build": "histoire build", 9 | "story:preview": "histoire preview --port 4567", 10 | "ci": "start-server-and-test story:preview http://localhost:4567/ test", 11 | "test": "cypress run", 12 | "test:dev": "cypress open --config baseUrl=http://localhost:6006", 13 | "test:examples": "pnpm run story:build && pnpm run ci" 14 | }, 15 | "dependencies": { 16 | "svelte": "^4.2.7" 17 | }, 18 | "devDependencies": { 19 | "@histoire/plugin-svelte": "workspace:*", 20 | "@sveltejs/vite-plugin-svelte": "^3.0.2", 21 | "cypress": "^13.16.1", 22 | "histoire": "workspace:*", 23 | "start-server-and-test": "^2.0.8", 24 | "svelte-preprocess": "^5.1.0", 25 | "vite": "^5.0.11" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/svelte4/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: [], 3 | } 4 | -------------------------------------------------------------------------------- /examples/svelte4/src/Amsterdam.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | Vue Amsterdam 9 | -------------------------------------------------------------------------------- /examples/svelte4/src/BaseButton.story.md: -------------------------------------------------------------------------------- 1 | # BaseButton 2 | 3 | ```svelte 4 | 5 | Click me 6 | 7 | ``` 8 | 9 | Hello world! 10 | -------------------------------------------------------------------------------- /examples/svelte4/src/BaseButton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 | 35 | -------------------------------------------------------------------------------- /examples/svelte4/src/BindThis.story.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 12 | 13 |
14 | button={button} 15 |
16 | 17 | 24 | 25 | 26 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/svelte4/src/Cars.story.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 🚗 13 | 14 | 15 | 🏎️ 16 | 17 | 18 | 🚜 19 | 20 | 21 | -------------------------------------------------------------------------------- /examples/svelte4/src/ColorButton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /examples/svelte4/src/ControlsVariant.story.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | {content} 1 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {content} 2 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/svelte4/src/Introduction.story.md: -------------------------------------------------------------------------------- 1 | --- 2 | group: 'top' 3 | icon: 'carbon:bookmark' 4 | --- 5 | 6 | # Welcome 7 | 8 | This is a demo book using Svelte 3. 9 | 10 | --- 11 | 12 | Learn more about Histoire [here](https://histoire.dev/). 13 | -------------------------------------------------------------------------------- /examples/svelte4/src/Meow.story.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 😺 8 | 9 | 10 | 😹 11 | 12 | 13 | 😻 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/svelte4/src/NoIframe.story.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | No iframe story content 11 | 12 |
{content}
13 |
14 | 15 |
16 | 17 | 18 | 22 | 23 | 24 | 25 | 37 | -------------------------------------------------------------------------------- /examples/svelte4/src/ShareControls.story.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {content} 19 | 20 | 21 | 22 | 23 | 24 | {content} 25 | 26 | 27 | -------------------------------------------------------------------------------- /examples/svelte4/svelte.config.js: -------------------------------------------------------------------------------- 1 | import sveltePreprocess from 'svelte-preprocess' 2 | 3 | export default { 4 | preprocess: sveltePreprocess(), 5 | } 6 | -------------------------------------------------------------------------------- /examples/svelte4/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "baseUrl": ".", 11 | "rootDir": "src", 12 | "module": "ESNext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "types": [ 16 | "node" 17 | ], 18 | "strictBindCallApply": true, 19 | "strictFunctionTypes": true, 20 | "alwaysStrict": true, 21 | // Strict 22 | "noImplicitAny": false, 23 | "noImplicitThis": true, 24 | "declaration": false, 25 | "outDir": "dist", 26 | "removeComments": false, 27 | "sourceMap": false, 28 | "allowSyntheticDefaultImports": true, 29 | "esModuleInterop": true, 30 | "skipLibCheck": true, 31 | "preserveWatchOutput": true 32 | }, 33 | "include": [ 34 | "src" 35 | ], 36 | "exclude": [ 37 | "node_modules", 38 | "generated/**/*", 39 | "dist/**/*", 40 | "src/**/*.spec.ts" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /examples/svelte4/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { HstSvelte } from '@histoire/plugin-svelte' 4 | import { svelte } from '@sveltejs/vite-plugin-svelte' 5 | import { defineConfig } from 'vite' 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | svelte(), 10 | ], 11 | histoire: { 12 | plugins: [ 13 | HstSvelte(), 14 | ], 15 | tree: { 16 | groups: [ 17 | { 18 | id: 'top', 19 | title: '', 20 | }, 21 | ], 22 | }, 23 | }, 24 | }) 25 | -------------------------------------------------------------------------------- /examples/sveltekit/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | .vercel 10 | .output 11 | -------------------------------------------------------------------------------- /examples/sveltekit/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /examples/sveltekit/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm create svelte@latest 12 | 13 | # create a new project in my-app 14 | npm create svelte@latest my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /examples/sveltekit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sveltekit", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "sk:dev": "vite dev", 8 | "sk:build": "vite build", 9 | "sk:package": "svelte-kit package", 10 | "sk:preview": "vite preview", 11 | "sk:check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 12 | "sk:check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 13 | "story:dev": "histoire dev", 14 | "story:build": "histoire build", 15 | "story:preview": "histoire preview --port 4567" 16 | }, 17 | "dependencies": { 18 | "@fontsource/fira-mono": "^5.1.0", 19 | "cookie": "^1.0.2" 20 | }, 21 | "devDependencies": { 22 | "@histoire/plugin-svelte": "workspace:*", 23 | "@sveltejs/adapter-auto": "^3.3.1", 24 | "@sveltejs/kit": "^2.9.0", 25 | "@types/cookie": "^1.0.0", 26 | "histoire": "workspace:*", 27 | "svelte": "^5.7.0", 28 | "svelte-check": "^4.1.1", 29 | "svelte-preprocess": "^6.0.3", 30 | "tslib": "^2.8.1", 31 | "typescript": "5.6.3", 32 | "vite": "^6.0.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/sveltekit/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: [], 3 | } 4 | -------------------------------------------------------------------------------- /examples/sveltekit/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | interface Locals { 6 | userid: string 7 | } 8 | 9 | // interface Platform {} 10 | 11 | // interface PrivateEnv {} 12 | 13 | // interface PublicEnv {} 14 | } 15 | -------------------------------------------------------------------------------- /examples/sveltekit/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/sveltekit/src/histoire.css: -------------------------------------------------------------------------------- 1 | @import '@fontsource/fira-mono'; 2 | 3 | :root { 4 | font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 5 | Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 6 | --font-mono: 'Fira Mono', monospace; 7 | --pure-white: #ffffff; 8 | --primary-color: #b9c6d2; 9 | --secondary-color: #d0dde9; 10 | --tertiary-color: #edf0f8; 11 | --accent-color: #ff3e00; 12 | --heading-color: rgba(0, 0, 0, 0.7); 13 | --text-color: #444444; 14 | --background-without-opacity: rgba(255, 255, 255, 0.7); 15 | --column-width: 42rem; 16 | --column-margin-top: 4rem; 17 | } 18 | -------------------------------------------------------------------------------- /examples/sveltekit/src/histoire.setup.ts: -------------------------------------------------------------------------------- 1 | import './histoire.css' 2 | -------------------------------------------------------------------------------- /examples/sveltekit/src/hooks.server.ts: -------------------------------------------------------------------------------- 1 | import type { Handle } from '@sveltejs/kit' 2 | import * as cookie from 'cookie' 3 | 4 | export const handle: Handle = async ({ event, resolve }) => { 5 | const cookies = cookie.parse(event.request.headers.get('cookie') || '') 6 | event.locals.userid = cookies.userid || crypto.randomUUID() 7 | 8 | const response = await resolve(event) 9 | 10 | if (!cookies.userid) { 11 | // if this is the first time the user has visited this app, 12 | // set a cookie so that we recognise them when they return 13 | response.headers.set( 14 | 'set-cookie', 15 | cookie.serialize('userid', event.locals.userid, { 16 | path: '/', 17 | httpOnly: true, 18 | }), 19 | ) 20 | } 21 | 22 | return response 23 | } 24 | -------------------------------------------------------------------------------- /examples/sveltekit/src/lib/Counter.story.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 |
9 | 10 |
11 | 12 | 15 | 16 | 46 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 |
11 |

12 | 13 | 14 | 15 | Welcome 16 | 17 | 18 | 19 | to your new
SvelteKit app 20 |

21 | 22 |

23 | try editing src/routes/+page.svelte 24 |

25 | 26 | 27 |
28 | 29 | 58 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/+page.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true 2 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/about/+page.svelte: -------------------------------------------------------------------------------- 1 | 2 | About 3 | 4 | 5 | 6 |
7 |

About this app

8 | 9 |

10 | This is a SvelteKit app. You can make your own by typing the 11 | following into your command line and following the prompts: 12 |

13 | 14 | 
npm create svelte@latest
15 | 16 |

17 | The page you're looking at is purely static HTML, with no client-side interactivity needed. 18 | Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening 19 | the devtools network panel and reloading. 20 |

21 | 22 |

23 | The TODOs page illustrates SvelteKit's data loading and form handling. Try using 24 | it with JavaScript disabled! 25 |

26 |
27 | 28 | 35 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/about/+page.ts: -------------------------------------------------------------------------------- 1 | import { browser, dev } from '$app/env' 2 | 3 | // we don't need any JS on this page, though we'll load 4 | // it in dev so that we get hot module replacement... 5 | export const hydrate = dev 6 | 7 | // ...but if the client-side router is already loaded 8 | // (i.e. we came here from elsewhere in the app), use it 9 | export const router = browser 10 | 11 | // since there's no dynamic data here, we can prerender 12 | // it so that it gets served as a static asset in prod 13 | export const prerender = true 14 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/todos/api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | This module is used by the /todos endpoint to 3 | make calls to api.svelte.dev, which stores todos 4 | for each user. 5 | 6 | (The data on the todo app will expire periodically; no 7 | guarantees are made. Don't use it to organise your life.) 8 | */ 9 | 10 | const base = 'https://api.svelte.dev' 11 | 12 | export function api(method: string, resource: string, data?: Record) { 13 | return fetch(`${base}/${resource}`, { 14 | method, 15 | headers: { 16 | 'content-type': 'application/json', 17 | }, 18 | body: data && JSON.stringify(data), 19 | }) 20 | } 21 | -------------------------------------------------------------------------------- /examples/sveltekit/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/examples/sveltekit/static/favicon.png -------------------------------------------------------------------------------- /examples/sveltekit/static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /examples/sveltekit/static/svelte-welcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/examples/sveltekit/static/svelte-welcome.png -------------------------------------------------------------------------------- /examples/sveltekit/static/svelte-welcome.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/examples/sveltekit/static/svelte-welcome.webp -------------------------------------------------------------------------------- /examples/sveltekit/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto' 2 | import preprocess from 'svelte-preprocess' 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://github.com/sveltejs/svelte-preprocess 7 | // for more information about preprocessors 8 | preprocess: preprocess(), 9 | 10 | kit: { 11 | adapter: adapter(), 12 | }, 13 | } 14 | 15 | export default config 16 | -------------------------------------------------------------------------------- /examples/sveltekit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "resolveJsonModule": true, 5 | "allowJs": true, 6 | "checkJs": true, 7 | "strict": true, 8 | "sourceMap": true, 9 | "esModuleInterop": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "skipLibCheck": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /examples/sveltekit/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { HstSvelte } from '@histoire/plugin-svelte' 4 | import { sveltekit } from '@sveltejs/kit/vite' 5 | import { defineConfig } from 'vite' 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | sveltekit(), 10 | ], 11 | histoire: { 12 | plugins: [ 13 | HstSvelte(), 14 | ], 15 | setupFile: './src/histoire.setup.ts', 16 | tree: { 17 | groups: [ 18 | { 19 | id: 'top', 20 | title: '', 21 | }, 22 | ], 23 | }, 24 | }, 25 | }) 26 | -------------------------------------------------------------------------------- /examples/vue3-percy/histoire.config.ts: -------------------------------------------------------------------------------- 1 | import { HstPercy } from '@histoire/plugin-percy' 2 | import { HstVue } from '@histoire/plugin-vue' 3 | import { defineConfig } from 'histoire' 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | HstVue(), 8 | HstPercy({ 9 | ignored: ({ file }) => file.includes('tailwind-tokens'), 10 | }), 11 | ], 12 | }) 13 | -------------------------------------------------------------------------------- /examples/vue3-percy/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "histoire-example-vue3-percy", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "story:dev": "histoire dev", 8 | "story:build": "histoire build", 9 | "story:preview": "histoire preview" 10 | }, 11 | "dependencies": { 12 | "vue": "^3.5.13" 13 | }, 14 | "devDependencies": { 15 | "@histoire/plugin-percy": "workspace:*", 16 | "@histoire/plugin-vue": "workspace:*", 17 | "@vitejs/plugin-vue": "^5.2.1", 18 | "histoire": "workspace:*", 19 | "vite": "^6.0.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/vue3-percy/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [], 3 | } 4 | -------------------------------------------------------------------------------- /examples/vue3-percy/src/components/InjectDemo.story.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /examples/vue3-percy/src/components/InjectDemo.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /examples/vue3-percy/src/histoire.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | color: #10B981; 3 | } 4 | 5 | html.htw-dark { 6 | background: #27272a ; 7 | color: #e9e9ed; 8 | } 9 | -------------------------------------------------------------------------------- /examples/vue3-percy/src/histoire.setup.ts: -------------------------------------------------------------------------------- 1 | import { defineSetupVue3 } from '@histoire/plugin-vue' 2 | import './histoire.css' 3 | 4 | export const setupVue3 = defineSetupVue3(({ app }) => { 5 | app.provide('demo', 24) 6 | }) 7 | -------------------------------------------------------------------------------- /examples/vue3-percy/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import vue from '@vitejs/plugin-vue' 4 | import { defineConfig } from 'vite' 5 | // @TODO investigate ESM errors when this is imported in vite.config.ts 6 | // https://github.com/vitejs/vite/issues/7981 7 | // import { HstScreenshot } from '@histoire/plugin-screenshot' 8 | 9 | export default defineConfig({ 10 | plugins: [ 11 | vue(), 12 | ], 13 | 14 | histoire: { 15 | // plugins: [ 16 | // HstScreenshot(), 17 | // ], 18 | 19 | // Alternative way of specifying histoire config 20 | setupFile: '/src/histoire.setup.ts', 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/.histoire/screenshots/src-components-injectdemo-story-vue-src-components-injectdemo-story-vue-0-1280x800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/examples/vue3-screenshot/.histoire/screenshots/src-components-injectdemo-story-vue-src-components-injectdemo-story-vue-0-1280x800.png -------------------------------------------------------------------------------- /examples/vue3-screenshot/histoire.config.ts: -------------------------------------------------------------------------------- 1 | import { HstScreenshot } from '@histoire/plugin-screenshot' 2 | import { HstVue } from '@histoire/plugin-vue' 3 | import { defineConfig } from 'histoire' 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | HstVue(), 8 | HstScreenshot({ 9 | ignored: ({ file }) => file.includes('tailwind-tokens'), 10 | }), 11 | ], 12 | }) 13 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "histoire-example-vue3-screenshot", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "story:dev": "histoire dev", 8 | "story:build": "histoire build", 9 | "story:preview": "histoire preview" 10 | }, 11 | "dependencies": { 12 | "vue": "^3.5.13" 13 | }, 14 | "devDependencies": { 15 | "@histoire/plugin-screenshot": "workspace:*", 16 | "@histoire/plugin-vue": "workspace:*", 17 | "@vitejs/plugin-vue": "^5.2.1", 18 | "histoire": "workspace:*", 19 | "vite": "^6.0.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [], 3 | } 4 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/src/components/InjectDemo.story.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/src/components/InjectDemo.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/src/histoire.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | color: #10B981; 3 | } 4 | 5 | html.htw-dark { 6 | background: #27272a ; 7 | color: #e9e9ed; 8 | } 9 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/src/histoire.setup.ts: -------------------------------------------------------------------------------- 1 | import { defineSetupVue3 } from '@histoire/plugin-vue' 2 | import './histoire.css' 3 | 4 | export const setupVue3 = defineSetupVue3(({ app }) => { 5 | app.provide('demo', 42) 6 | }) 7 | -------------------------------------------------------------------------------- /examples/vue3-screenshot/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import vue from '@vitejs/plugin-vue' 4 | import { defineConfig } from 'vite' 5 | // @TODO investigate ESM errors when this is imported in vite.config.ts 6 | // https://github.com/vitejs/vite/issues/7981 7 | // import { HstScreenshot } from '@histoire/plugin-screenshot' 8 | 9 | export default defineConfig({ 10 | plugins: [ 11 | vue(), 12 | ], 13 | 14 | histoire: { 15 | // plugins: [ 16 | // HstScreenshot(), 17 | // ], 18 | 19 | // Alternative way of specifying histoire config 20 | setupFile: '/src/histoire.setup.ts', 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /examples/vue3-themed/histoire.config.ts: -------------------------------------------------------------------------------- 1 | import { HstVue } from '@histoire/plugin-vue' 2 | import { defineConfig } from 'histoire' 3 | 4 | export default defineConfig({ 5 | plugins: [ 6 | HstVue(), 7 | ], 8 | }) 9 | -------------------------------------------------------------------------------- /examples/vue3-themed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "histoire-example-vue3-themed", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "story:dev": "histoire dev", 8 | "story:build": "histoire build", 9 | "story:preview": "histoire preview" 10 | }, 11 | "dependencies": { 12 | "vue": "^3.5.13" 13 | }, 14 | "devDependencies": { 15 | "@histoire/plugin-vue": "workspace:*", 16 | "@vitejs/plugin-vue": "^5.2.1", 17 | "histoire": "workspace:*", 18 | "vite": "^6.0.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/vue3-themed/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [], 3 | } 4 | -------------------------------------------------------------------------------- /examples/vue3-themed/src/Serialize.story.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /examples/vue3-themed/src/SubStory.story.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /examples/vue3-themed/src/histoire-setup.ts: -------------------------------------------------------------------------------- 1 | import './histoire.css' 2 | 3 | console.log('Theme loaded!') 4 | -------------------------------------------------------------------------------- /examples/vue3-themed/src/histoire.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'); 3 | 4 | html, body, #app { 5 | font-family: 'Roboto', sans-serif; 6 | } 7 | 8 | .__histoire-code code { 9 | font-family: 'Fira Code', monospace; 10 | } -------------------------------------------------------------------------------- /examples/vue3-themed/src/img/logo-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vue3-themed/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue' 2 | import { defaultColors } from 'histoire' 3 | import { defineConfig } from 'vite' 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | vue(), 8 | ], 9 | 10 | histoire: { 11 | theme: { 12 | title: 'Acme Design System', 13 | favicon: './public/my-favicon.svg', 14 | logo: { 15 | square: './src/img/logo-square.svg', 16 | light: './src/img/logo-light.svg', 17 | dark: './src/img/logo-dark.svg', 18 | }, 19 | colors: { 20 | primary: defaultColors.cyan, 21 | }, 22 | }, 23 | setupFile: './src/histoire-setup.ts', 24 | // vite: { 25 | // server: { 26 | // port: 3042, 27 | // }, 28 | // }, 29 | }, 30 | }) 31 | -------------------------------------------------------------------------------- /examples/vue3-vuetify/histoire.config.ts: -------------------------------------------------------------------------------- 1 | import { HstVue } from '@histoire/plugin-vue' 2 | import { defineConfig } from 'histoire' 3 | 4 | export default defineConfig({ 5 | plugins: [ 6 | HstVue(), 7 | ], 8 | }) 9 | -------------------------------------------------------------------------------- /examples/vue3-vuetify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "histoire-example-vue3-vuetify", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "story:dev": "histoire dev", 8 | "story:build": "histoire build", 9 | "story:preview": "histoire preview" 10 | }, 11 | "dependencies": { 12 | "@mdi/font": "^7.4.47", 13 | "vue": "^3.5.13", 14 | "vuetify": "^3.7.5" 15 | }, 16 | "devDependencies": { 17 | "@histoire/plugin-vue": "workspace:*", 18 | "@vitejs/plugin-vue": "^5.2.1", 19 | "histoire": "workspace:*", 20 | "vite": "^6.0.5", 21 | "vite-plugin-vuetify": "2.0.4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/vue3-vuetify/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [], 3 | } 4 | -------------------------------------------------------------------------------- /examples/vue3-vuetify/src/components/v-btn.story.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | -------------------------------------------------------------------------------- /examples/vue3-vuetify/src/histoire.setup.ts: -------------------------------------------------------------------------------- 1 | import { defineSetupVue3 } from '@histoire/plugin-vue' 2 | 3 | // Vuetify 4 | import { createVuetify } from 'vuetify' 5 | // Styles 6 | import '@mdi/font/css/materialdesignicons.css' 7 | 8 | import 'vuetify/styles' 9 | 10 | export const setupVue3 = defineSetupVue3(({ app }) => { 11 | app.use(createVuetify()) 12 | }) 13 | -------------------------------------------------------------------------------- /examples/vue3-vuetify/src/shims.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module 'vuetify' 4 | declare module 'vuetify/lib/components' 5 | declare module 'vuetify/lib/directives' 6 | -------------------------------------------------------------------------------- /examples/vue3-vuetify/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import vue from '@vitejs/plugin-vue' 4 | import { defineConfig } from 'vite' 5 | import vuetify from 'vite-plugin-vuetify' 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | vuetify({ 11 | autoImport: true, 12 | }), 13 | ], 14 | 15 | histoire: { 16 | setupFile: 'src/histoire.setup.ts', 17 | }, 18 | }) 19 | -------------------------------------------------------------------------------- /examples/vue3/cypress.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | viewportWidth: 1280, 5 | viewportHeight: 768, 6 | chromeWebSecurity: false, 7 | 8 | retries: { 9 | runMode: 2, 10 | openMode: 0, 11 | }, 12 | 13 | e2e: { 14 | baseUrl: 'http://localhost:4567', 15 | setupNodeEvents(_on, _config) { 16 | // implement node event listeners here 17 | }, 18 | }, 19 | 20 | video: false, 21 | }) 22 | -------------------------------------------------------------------------------- /examples/vue3/cypress/e2e/docs.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | describe('Story docs', () => { 4 | it('should display the story docs', () => { 5 | cy.visit('/') 6 | cy.get('[data-test-id="story-list-item"]').contains('Demo').click() 7 | cy.get('[data-test-id="story-variant-list-item"]').contains('untitled').click() 8 | cy.get('[data-test-id="story-side-panel"] a').contains('Docs').click() 9 | cy.get('[data-test-id="story-docs"] h1').contains('Title 1') 10 | cy.get('[data-test-id="story-docs"] h2').contains('Title 2') 11 | cy.get('[data-test-id="story-docs"] a').contains('Link') 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /examples/vue3/cypress/e2e/markdown-links.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | describe('Markdown links', () => { 4 | it('should be just #welcome and not contain attribute target="_blank"', () => { 5 | cy.visit('/story/src-components-markdownlinks-story-vue?variantId=_default') 6 | cy.get('#link-to-welcome').should('have.attr', 'href', '#welcome').should('not.have.attr', 'target') 7 | }) 8 | 9 | it('should have target="_blank" set when they external', () => { 10 | cy.visit('/story/src-components-markdownlinks-story-vue?variantId=_default') 11 | cy.get('#link-to-history').should('have.attr', 'href', 'https://histoire.dev/').should('have.attr', 'target', '_blank') 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /examples/vue3/cypress/e2e/setup-vue3.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | describe('Setup app (vue3)', () => { 4 | const getIframeBody = () => cy.get('iframe[data-test-id="preview-iframe"]') 5 | .its('0.contentDocument.body') 6 | .should('not.be.empty') 7 | .then(cy.wrap) 8 | 9 | it('should handle global setup', () => { 10 | cy.visit('/story/src-components-storysetup-story-vue?variantId=global') 11 | getIframeBody().contains('42') 12 | }) 13 | 14 | it('should handle local setup', () => { 15 | cy.visit('/story/src-components-storysetup-story-vue?variantId=local') 16 | getIframeBody().contains('meow') 17 | }) 18 | 19 | it('should display global components', () => { 20 | cy.visit('/story/src-components-storysetup-story-vue?variantId=global-component') 21 | getIframeBody().contains('Global component') 22 | }) 23 | }) 24 | -------------------------------------------------------------------------------- /examples/vue3/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /examples/vue3/cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************************** 3 | // This example plugins/index.js can be used to load plugins 4 | // 5 | // You can change the location of this file or turn off loading 6 | // the plugins file with the 'pluginsFile' configuration option. 7 | // 8 | // You can read more here: 9 | // https://on.cypress.io/plugins-guide 10 | // *********************************************************** 11 | 12 | // This function is called when a project is opened or re-opened (e.g. due to 13 | // the project's config changing) 14 | 15 | /** 16 | * @type {Cypress.PluginConfig} 17 | */ 18 | 19 | module.exports = (_on, _config) => { 20 | // `on` is used to hook into various events Cypress emits 21 | // `config` is the resolved Cypress config 22 | } 23 | -------------------------------------------------------------------------------- /examples/vue3/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /examples/vue3/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /examples/vue3/histoire.config.ts: -------------------------------------------------------------------------------- 1 | import { HstVue } from '@histoire/plugin-vue' 2 | import { defineConfig, getDefaultConfig } from 'histoire' 3 | 4 | export default defineConfig({ 5 | // outDir: 'hdist', 6 | plugins: [ 7 | HstVue(), 8 | ], 9 | backgroundPresets: [ 10 | ...(getDefaultConfig().backgroundPresets || []), 11 | { 12 | label: 'Custom gray', 13 | color: '#cafff5', 14 | contrastColor: '#005142', 15 | }, 16 | ], 17 | // autoApplyContrastColor: true, 18 | // routerMode: 'hash', 19 | theme: { 20 | darkClass: 'my-dark', 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /examples/vue3/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = process.env.HISTOIRE_DEV 2 | ? { 3 | plugins: [ 4 | require('postcss-import'), 5 | require('tailwindcss/nesting'), 6 | require('tailwindcss')('./tailwind.config.cjs'), 7 | require('autoprefixer'), 8 | ], 9 | } 10 | : { 11 | plugins: [], 12 | } 13 | -------------------------------------------------------------------------------- /examples/vue3/src/MarkdownFile.story.md: -------------------------------------------------------------------------------- 1 | # Markdown file 2 | 3 | This is a standalone `MarkdownFile.story.md` file, rendering as a docs-only story. 4 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Amsterdam.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /examples/vue3/src/components/AutoStateProps.story.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | -------------------------------------------------------------------------------- /examples/vue3/src/components/AutoStateProps.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | -------------------------------------------------------------------------------- /examples/vue3/src/components/ColorButton.story.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 46 | -------------------------------------------------------------------------------- /examples/vue3/src/components/ColorButton.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | 23 | 28 | -------------------------------------------------------------------------------- /examples/vue3/src/components/ComplexParameter.story.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | -------------------------------------------------------------------------------- /examples/vue3/src/components/ComplexParameter.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /examples/vue3/src/components/ContrastColor.story.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /examples/vue3/src/components/DarkMode.story.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Demo.story.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | 24 | 25 | # Title 1 26 | 27 | ## Title 2 28 | 29 | [Link](https://example.com) 30 | 31 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Demo.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Docs.story.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | # Title 16 | 17 | ## Subtitle 18 | 19 | > Hello 20 | 21 | Deserunt nihil nam qui. :cat2: Accusamus ea a voluptatem. Vel veniam non temporibus pariatur cumque aperiam tempora tempora. Assumenda aspernatur qui cum aut tempora rerum. Quisquam quibusdam dignissimos magni et. 22 | 23 | [Learn more](https://histoire.dev) 24 | 25 | ```vue 26 | 31 | 32 | 35 | ``` 36 | 37 | Ratione vero beatae corrupti quia. Tenetur temporibus ipsa qui qui tempora. Quae harum velit odit quo animi maxime officiis. Dolores ea iusto et. 38 | 39 | - Meow 40 | - Waf 41 | - Purr 42 | 43 | 1. Meow 44 | 2. Waf 45 | 3. Purr 46 | 47 | [Go home](/) 48 | 49 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Empty.story.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/vue3/src/components/EventButton.story.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | -------------------------------------------------------------------------------- /examples/vue3/src/components/EventButton.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | -------------------------------------------------------------------------------- /examples/vue3/src/components/EventButtonGrid.story.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 23 | -------------------------------------------------------------------------------- /examples/vue3/src/components/GlobalComp.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /examples/vue3/src/components/HugeGrid.story.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 28 | -------------------------------------------------------------------------------- /examples/vue3/src/components/InjectDemo.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Introduction.story.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | # Welcome 11 | 12 | This is a demo book using Vue 3. 13 | 14 | --- 15 | 16 | Learn more about Histoire [here](https://histoire.dev/). 17 | 18 | -------------------------------------------------------------------------------- /examples/vue3/src/components/LottieAnimation.story.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 26 | 27 | 35 | -------------------------------------------------------------------------------- /examples/vue3/src/components/MarkdownLinks.story.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | [Link to welcome header](#welcome){id="link-to-welcome"} 11 | 12 | # Welcome 13 | 14 | This is just a link to [Histoire.dev](https://histoire.dev/){id="link-to-history"}. 15 | 16 | - [Go to Introduction](./Introduction.story.vue) 17 | - [Go to CodeGen > Slots](./CodeGen.story.vue?variantId=slots) 18 | - [Go to Markdown file](../MarkdownFile.story.md) 19 | 20 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Meow.story.md: -------------------------------------------------------------------------------- 1 | # Meow 2 | 3 | 🐈 4 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Meow.story.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /examples/vue3/src/components/ModalWithSlots.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /examples/vue3/src/components/NoVariantTag.story.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /examples/vue3/src/components/PiniaStore.story.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /examples/vue3/src/components/PiniaStore.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Responsive.story.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Responsive.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | -------------------------------------------------------------------------------- /examples/vue3/src/components/Serialize.story.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /examples/vue3/src/components/SlotWithProps.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /examples/vue3/src/components/StateOption.story.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | -------------------------------------------------------------------------------- /examples/vue3/src/components/StorySetup.story.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | -------------------------------------------------------------------------------- /examples/vue3/src/components/SubStory.story.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 22 | -------------------------------------------------------------------------------- /examples/vue3/src/components/SubStory2.story.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /examples/vue3/src/components/WithSass.story.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /examples/vue3/src/components/WithSass.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | 26 | 49 | -------------------------------------------------------------------------------- /examples/vue3/src/components/WrapperGlobal.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 23 | -------------------------------------------------------------------------------- /examples/vue3/src/components/WrapperMetaOnStory.story.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /examples/vue3/src/components/WrapperMetaOnVariant.story.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /examples/vue3/src/components/huge-grid.js: -------------------------------------------------------------------------------- 1 | export const count = 1000 2 | -------------------------------------------------------------------------------- /examples/vue3/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue3/src/histoire.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | color: #10B981; 3 | } 4 | 5 | html.htw-dark { 6 | background: #27272a; 7 | color: #e9e9ed; 8 | } 9 | -------------------------------------------------------------------------------- /examples/vue3/src/histoire.setup.ts: -------------------------------------------------------------------------------- 1 | import { defineSetupVue3 } from '@histoire/plugin-vue' 2 | import { createPinia } from 'pinia' 3 | import GlobalComp from './components/GlobalComp.vue' 4 | import WrapperGlobal from './components/WrapperGlobal.vue' 5 | import './histoire.css' 6 | 7 | declare module 'histoire' { 8 | // Extend the story `meta` prop 9 | interface CommonMeta { 10 | /** 11 | * Set to `false` to disable the `WrapperGlobal` component styling. 12 | */ 13 | wrapper?: boolean 14 | } 15 | } 16 | 17 | export const setupVue3 = defineSetupVue3(({ app, addWrapper }) => { 18 | app.provide('demo', 42) 19 | const pinia = createPinia() 20 | app.use(pinia) 21 | 22 | app.component('GlobalComp', GlobalComp) 23 | 24 | app.directive('dashed-border', { 25 | beforeMount: (el, { value }) => { 26 | el.style.border = `1px dashed ${value}` 27 | }, 28 | }) 29 | 30 | addWrapper(WrapperGlobal) 31 | }) 32 | -------------------------------------------------------------------------------- /examples/vue3/src/lib/myStore.ts: -------------------------------------------------------------------------------- 1 | import { defineStore } from 'pinia' 2 | import { ref } from 'vue' 3 | 4 | export const useMyStore = defineStore('myStore', () => { 5 | const myValue = ref(10) 6 | 7 | return { 8 | myValue, 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /examples/vue3/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import Responsive from './components/Responsive.vue' 3 | 4 | const app = createApp(Responsive) 5 | app.mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue3/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | const config = require('@histoire/app/tailwind.config.cjs') 2 | 3 | module.exports = config 4 | -------------------------------------------------------------------------------- /examples/vue3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "baseUrl": ".", 11 | "rootDir": "src", 12 | "module": "ESNext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "types": [ 16 | "node" 17 | ], 18 | "strictBindCallApply": true, 19 | "strictFunctionTypes": true, 20 | "alwaysStrict": true, 21 | // Strict 22 | "noImplicitAny": false, 23 | "noImplicitThis": true, 24 | "declaration": false, 25 | "outDir": "dist", 26 | "removeComments": false, 27 | "sourceMap": false, 28 | "allowSyntheticDefaultImports": true, 29 | "esModuleInterop": true, 30 | "skipLibCheck": true, 31 | "preserveWatchOutput": true 32 | }, 33 | "include": [ 34 | "src" 35 | ], 36 | "exclude": [ 37 | "node_modules", 38 | "generated/**/*", 39 | "dist/**/*", 40 | "src/**/*.spec.ts" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build.environment] 2 | NODE_VERSION = "16" 3 | NPM_FLAGS = "--version" # prevent Netlify npm install 4 | 5 | [[redirects]] 6 | from = "/*" 7 | to = "/index.html" 8 | status = 200 9 | -------------------------------------------------------------------------------- /packages/histoire-app/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('tailwindcss/nesting'), 5 | require('tailwindcss')('./tailwind.config.cjs'), 6 | require('autoprefixer'), 7 | ], 8 | } 9 | -------------------------------------------------------------------------------- /packages/histoire-app/scripts/copy.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'fs-extra' 2 | import { globbySync } from 'globby' 3 | import { normalizePath } from 'vite' 4 | 5 | function toDist(file) { 6 | return normalizePath(file).replace(/^src\//, 'dist/') 7 | } 8 | 9 | globbySync('src/**/*').forEach((file) => { 10 | if (file.endsWith('.vue') || file.endsWith('.ts') || file.endsWith('tsconfig.json')) return 11 | fs.copy(file, toDist(file)) 12 | }) 13 | -------------------------------------------------------------------------------- /packages/histoire-app/scripts/watchAndCopy.mjs: -------------------------------------------------------------------------------- 1 | import chokidar from 'chokidar' 2 | import fs from 'fs-extra' 3 | import { normalizePath } from 'vite' 4 | 5 | function toDist(file) { 6 | return normalizePath(file).replace(/^src\//, 'dist/') 7 | } 8 | 9 | // copy non ts files, such as an html or css, to the dist directory whenever 10 | // they change. 11 | chokidar 12 | .watch('src/**/!(*.ts|*.vue|tsconfig.json)') 13 | .on('change', file => fs.copy(file, toDist(file))) 14 | .on('add', file => fs.copy(file, toDist(file))) 15 | .on('unlink', file => fs.remove(toDist(file))) 16 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/api.ts: -------------------------------------------------------------------------------- 1 | import { isDark as _isDark } from './util/dark.js' 2 | 3 | export { toggleDark } from './util/dark.js' 4 | 5 | export { logEvent } from './util/events.js' 6 | 7 | export function isDark() { 8 | return _isDark.value 9 | } 10 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/app/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/app/HomeCounter.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 40 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/base/BaseButton.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 34 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/base/BaseCopyIcon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 35 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/base/BaseEmpty.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/base/BaseIcon.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | 27 | 32 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/base/BaseKeyboardShortcut.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/base/BaseListItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/base/BaseTag.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/misc/CheckerboardPattern.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/misc/HatchedPattern.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/panel/ControlsComponentProps.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 35 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/panel/ControlsComponentState.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 35 | 36 | 39 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/panel/ControlsComponentStateItem.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 45 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/search/SearchLoading.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/search/search-docs-data.ts: -------------------------------------------------------------------------------- 1 | import type { SearchData } from './types.js' 2 | import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$histoire-search-docs-data' 3 | import { markRaw } from 'vue' 4 | 5 | export const searchData: SearchData = markRaw(_searchData) 6 | 7 | export function onUpdate(cb: (data: SearchData) => unknown) { 8 | _onUpdate(cb) 9 | } 10 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/search/search-title-data.ts: -------------------------------------------------------------------------------- 1 | import type { SearchData } from './types.js' 2 | import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$histoire-search-title-data' 3 | import { markRaw } from 'vue' 4 | 5 | export const searchData: SearchData = markRaw(_searchData) 6 | 7 | export function onUpdate(cb: (data: SearchData) => unknown) { 8 | _onUpdate(cb) 9 | } 10 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/search/types.ts: -------------------------------------------------------------------------------- 1 | export interface SearchData { 2 | index: Array<{ id: number, text: string }> 3 | idMap: Record 4 | } 5 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/story/GenericMountStory.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | 27 | 36 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/story/GenericRenderStory.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 32 | 33 | 42 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 30 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/components/tree/StoryList.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 36 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/index.ts: -------------------------------------------------------------------------------- 1 | import FloatingVue from 'floating-vue' 2 | import { createPinia } from 'pinia' 3 | import { createApp } from 'vue' 4 | import App from './App.vue' 5 | import { setupPluginApi } from './plugin.js' 6 | import { router } from './router' 7 | import 'virtual:$histoire-theme' 8 | 9 | export async function mountMainApp() { 10 | const app = createApp(App) 11 | app.use(createPinia()) 12 | app.use(FloatingVue, { 13 | overflowPadding: 4, 14 | arrowPadding: 8, 15 | themes: { 16 | tooltip: { 17 | distance: 8, 18 | }, 19 | dropdown: { 20 | computeTransformOrigin: true, 21 | distance: 8, 22 | }, 23 | }, 24 | }) 25 | app.use(router) 26 | app.mount('#app') 27 | 28 | if (import.meta.hot) { 29 | import.meta.hot.send('histoire:mount', {}) 30 | 31 | /* #__PURE__ */ setupPluginApi() 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/router.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' 2 | import { histoireConfig } from './util/config' 3 | 4 | export const base = import.meta.env.BASE_URL as string 5 | 6 | function createRouterHistory() { 7 | switch (histoireConfig.routerMode) { 8 | case 'hash': return createWebHashHistory(base) 9 | case 'history': 10 | default: 11 | return createWebHistory(base) 12 | } 13 | } 14 | 15 | export const router = createRouter({ 16 | history: createRouterHistory(), 17 | routes: [ 18 | { 19 | path: '/', 20 | name: 'home', 21 | component: () => import('./components/HomeView.vue'), 22 | }, 23 | { 24 | path: '/story/:storyId', 25 | name: 'story', 26 | component: () => import('./components/story/StoryView.vue'), 27 | }, 28 | ], 29 | }) 30 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/stores/command.ts: -------------------------------------------------------------------------------- 1 | import type { ClientCommand } from '@histoire/shared' 2 | import { defineStore } from 'pinia' 3 | import { ref } from 'vue' 4 | import { executeCommand, getCommandContext } from '../util/commands.js' 5 | 6 | export const useCommandStore = defineStore('command', () => { 7 | const selectedCommand = ref(null) 8 | const showPromptsModal = ref(false) 9 | 10 | function activateCommand(command: ClientCommand) { 11 | selectedCommand.value = command 12 | if (command.prompts?.length) { 13 | showPromptsModal.value = true 14 | } 15 | else { 16 | const params = command.getParams?.(getCommandContext()) ?? {} 17 | executeCommand(command, params) 18 | } 19 | } 20 | 21 | return { 22 | selectedCommand, 23 | showPromptsModal, 24 | activateCommand, 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/stores/events.ts: -------------------------------------------------------------------------------- 1 | import { defineStore } from 'pinia' 2 | import { reactive, ref, watch } from 'vue' 3 | import { useStoryStore } from './story.js' 4 | 5 | export interface HstEvent { 6 | name: string 7 | argument: unknown 8 | } 9 | 10 | export const useEventsStore = defineStore('events', () => { 11 | const storyStore = useStoryStore() 12 | 13 | const events = reactive>([]) 14 | const unseen = ref(0) 15 | 16 | function addEvent(event: HstEvent) { 17 | events.push(event) 18 | unseen.value++ 19 | } 20 | 21 | function reset() { 22 | events.length = 0 23 | unseen.value = 0 24 | } 25 | 26 | watch(() => storyStore.currentVariant?.id, () => { 27 | reset() 28 | }) 29 | 30 | return { 31 | addEvent, 32 | reset, 33 | events, 34 | unseen, 35 | } 36 | }) 37 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/stores/preview-settings.ts: -------------------------------------------------------------------------------- 1 | import type { PreviewSettings } from '../types' 2 | import { useStorage } from '@vueuse/core' 3 | import { defineStore } from 'pinia' 4 | 5 | export const usePreviewSettingsStore = defineStore('preview-settings', () => { 6 | const currentSettings = useStorage('_histoire-sandbox-settings-v3', { 7 | responsiveWidth: 720, 8 | responsiveHeight: null, 9 | rotate: false, 10 | backgroundColor: 'transparent', 11 | checkerboard: false, 12 | textDirection: 'ltr', 13 | }) 14 | 15 | return { 16 | currentSettings, 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/style/floating.pcss: -------------------------------------------------------------------------------- 1 | /* @TODO custom themes */ 2 | 3 | .v-popper { 4 | line-height: 0; 5 | } 6 | 7 | .v-popper--theme-dropdown { 8 | .htw-dark & { 9 | .v-popper__inner { 10 | @apply htw-bg-gray-700 htw-border-gray-850 htw-text-gray-100; 11 | } 12 | 13 | .v-popper__arrow-inner { 14 | @apply htw-border-gray-700; 15 | } 16 | 17 | .v-popper__arrow-outer { 18 | @apply htw-border-gray-850; 19 | } 20 | } 21 | 22 | &.v-popper__popper--show-from .v-popper__wrapper { 23 | transform: scale(.75); 24 | } 25 | 26 | &.v-popper__popper--show-to .v-popper__wrapper { 27 | transform: none; 28 | transition: transform .15s cubic-bezier(0, 1, .5, 1); 29 | } 30 | } 31 | 32 | .v-popper__popper:focus-visible { 33 | outline: none; 34 | } 35 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/style/sandbox.css: -------------------------------------------------------------------------------- 1 | @import '@histoire/controls/dist/index.es.css'; 2 | 3 | html, 4 | body { 5 | background: transparent !important; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | } 11 | 12 | html { 13 | font-size: 1rem; 14 | font-family: 'Noto Sans Display', system-ui, sans-serif; 15 | } 16 | 17 | .htw-sandbox-hidden { 18 | display: none; 19 | } 20 | 21 | .__histoire-render-story:not(.__histoire-render-custom-controls) { 22 | overflow: auto; 23 | min-height: 100%; 24 | } 25 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/style/transitions.pcss: -------------------------------------------------------------------------------- 1 | .__histoire-scale-x { 2 | &-enter-active, 3 | &-leave-active { 4 | transition: transform .15s, opacity .15s; 5 | } 6 | 7 | &-enter-from, 8 | &-leave-to { 9 | transform: scaleX(0); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .__histoire-scale-y { 15 | &-enter-active, 16 | &-leave-active { 17 | transition: transform .15s, opacity .15s; 18 | } 19 | 20 | &-enter-from, 21 | &-leave-to { 22 | transform: scaleY(0); 23 | opacity: 0; 24 | } 25 | } 26 | 27 | .__histoire-fade { 28 | &-enter-active, 29 | &-leave-active { 30 | transition: opacity .15s; 31 | } 32 | 33 | &-enter-from, 34 | &-leave-to { 35 | opacity: 0; 36 | } 37 | } 38 | 39 | .__histoire-fade-bottom { 40 | &-enter-active, 41 | &-leave-active { 42 | transition: transform .15s, opacity .15s; 43 | transform: translateY(0px); 44 | } 45 | 46 | &-enter-from, 47 | &-leave-to { 48 | transform: translateY(32px); 49 | opacity: 0; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/config.ts: -------------------------------------------------------------------------------- 1 | import type { HistoireConfig } from '@histoire/shared' 2 | import { config as configRaw, logos as logosRaw } from 'virtual:$histoire-config' 3 | 4 | export const histoireConfig: HistoireConfig = configRaw 5 | export const customLogos: HistoireConfig['theme']['logo'] = logosRaw 6 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/const.ts: -------------------------------------------------------------------------------- 1 | export const STATE_SYNC = '__histoire:state-sync' 2 | export const SANDBOX_READY = '__histoire:sandbox-ready' 3 | export const EVENT_SEND = '__histoire:event' 4 | export const PREVIEW_SETTINGS_SYNC = '__histoire:preview-settings-sync' 5 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/dark.ts: -------------------------------------------------------------------------------- 1 | import { useDark, useToggle } from '@vueuse/core' 2 | import { watch } from 'vue' 3 | import { histoireConfig } from './config.js' 4 | 5 | export const isDark = useDark({ 6 | valueDark: 'htw-dark', 7 | initialValue: histoireConfig.theme.defaultColorScheme, 8 | storageKey: 'histoire-color-scheme', 9 | storage: histoireConfig.theme.storeColorScheme ? localStorage : sessionStorage, 10 | }) 11 | export const toggleDark = useToggle(isDark) 12 | 13 | function applyDarkToControls() { 14 | window.__hst_controls_dark?.forEach((ref) => { 15 | ref.value = isDark.value 16 | }) 17 | } 18 | 19 | watch(isDark, () => { 20 | applyDarkToControls() 21 | }, { 22 | immediate: true, 23 | }) 24 | 25 | window.__hst_controls_dark_ready = () => { 26 | applyDarkToControls() 27 | } 28 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/docs.ts: -------------------------------------------------------------------------------- 1 | import type { Story, Variant } from '../types' 2 | import { unindent } from '@histoire/shared' 3 | import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client' 4 | 5 | export async function getSourceCode(story: Story, variant: Variant) { 6 | if (variant.source) { 7 | return variant.source 8 | } 9 | else if (variant.slots?.().source) { 10 | const source = variant.slots?.().source()[0].children 11 | if (source) { 12 | return unindent(source) 13 | } 14 | } 15 | else { 16 | const clientPlugin = clientSupportPlugins[story.file?.supportPluginId] 17 | if (clientPlugin) { 18 | const pluginModule = await clientPlugin() 19 | return pluginModule.generateSourceCode(variant) 20 | } 21 | } 22 | 23 | const sourceLoader = story.file?.source 24 | if (sourceLoader) { 25 | return (await sourceLoader()).default 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/env.ts: -------------------------------------------------------------------------------- 1 | export const isMac = navigator.platform.toLowerCase().includes('mac') 2 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/events.ts: -------------------------------------------------------------------------------- 1 | import { EVENT_SEND } from './const' 2 | 3 | export async function logEvent(name: string, argument) { 4 | console.log('[histoire] Event fired', { name, argument }) 5 | const event = { 6 | name, 7 | argument: JSON.parse(stringifyEvent(argument)), // Needed for HTMLEvent that can't be cloned 8 | } 9 | if (location.href.includes('__sandbox')) { 10 | window.parent?.postMessage({ 11 | type: EVENT_SEND, 12 | event, 13 | }) 14 | } 15 | else { 16 | const { useEventsStore } = await import('../stores/events.js') 17 | useEventsStore().addEvent(event) 18 | } 19 | } 20 | 21 | function stringifyEvent(e) { 22 | const obj = {} 23 | for (const k in e) { 24 | obj[k] = e[k] 25 | } 26 | return JSON.stringify(obj, (k, v) => { 27 | if (v instanceof Node) return 'Node' 28 | if (v instanceof Window) return 'Window' 29 | return v 30 | }, ' ') 31 | } 32 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/open-in-editor.ts: -------------------------------------------------------------------------------- 1 | export function openInEditor(file: string) { 2 | return fetch(`${import.meta.env.BASE_URL}__open-in-editor?file=${encodeURIComponent(file)}`) 3 | } 4 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/preview-settings.ts: -------------------------------------------------------------------------------- 1 | import type { PreviewSettings } from '../types' 2 | import { reactive } from 'vue' 3 | import { histoireConfig } from './config' 4 | 5 | export const receivedSettings = reactive({} as PreviewSettings) 6 | 7 | export function applyPreviewSettings(settings: PreviewSettings) { 8 | Object.assign(receivedSettings, settings) 9 | 10 | // Text direction 11 | document.documentElement.setAttribute('dir', settings.textDirection) 12 | 13 | // Contrast color 14 | const contrastColor = getContrastColor(settings) 15 | document.documentElement.style.setProperty('--histoire-contrast-color', contrastColor) 16 | if (histoireConfig.autoApplyContrastColor) { 17 | document.documentElement.style.color = contrastColor 18 | } 19 | } 20 | 21 | export function getContrastColor(setting: PreviewSettings) { 22 | return histoireConfig.backgroundPresets.find(preset => preset.color === setting.backgroundColor)?.contrastColor ?? 'unset' 23 | } 24 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/responsive.ts: -------------------------------------------------------------------------------- 1 | import { useMediaQuery } from '@vueuse/core' 2 | 3 | export const isMobile = useMediaQuery('(max-width: 640px)') 4 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/sandbox.ts: -------------------------------------------------------------------------------- 1 | import type { Story, Variant } from '../types' 2 | import { base } from '../router' 3 | 4 | export function getSandboxUrl(story: Story, variant: Variant) { 5 | const url = new URLSearchParams() 6 | url.append('storyId', story.id) 7 | url.append('variantId', variant.id) 8 | return `${base}__sandbox.html?${url.toString()}` 9 | } 10 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/scroll.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue' 2 | import scrollIntoView from 'scroll-into-view-if-needed' 3 | import { onMounted, watch } from 'vue' 4 | 5 | export function useScrollOnActive(active: Ref, el: Ref) { 6 | watch(active, (value) => { 7 | if (value) { 8 | autoScroll() 9 | } 10 | }) 11 | 12 | function autoScroll() { 13 | if (el.value) { 14 | scrollIntoView(el.value, { 15 | scrollMode: 'if-needed', 16 | block: 'center', 17 | inline: 'nearest', 18 | behavior: 'smooth', 19 | }) 20 | } 21 | } 22 | 23 | onMounted(() => { 24 | if (active.value) { 25 | autoScroll() 26 | } 27 | }) 28 | 29 | return { 30 | autoScroll, 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/select.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue' 2 | import { computed, ref, watch } from 'vue' 3 | 4 | export function useSelection(list: Ref) { 5 | const selectedIndex = ref(0) 6 | 7 | watch(list, () => { 8 | selectedIndex.value = 0 9 | }) 10 | 11 | function selectNext() { 12 | selectedIndex.value++ 13 | if (selectedIndex.value > list.value.length - 1) { 14 | selectedIndex.value = 0 15 | } 16 | } 17 | 18 | function selectPrevious() { 19 | selectedIndex.value-- 20 | if (selectedIndex.value < 0) { 21 | selectedIndex.value = list.value.length - 1 22 | } 23 | } 24 | 25 | return { 26 | selectedIndex: computed(() => selectedIndex.value), 27 | selectNext, 28 | selectPrevious, 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/tooltip.ts: -------------------------------------------------------------------------------- 1 | import { isMac } from './env.js' 2 | import { formatKey } from './keyboard.js' 3 | 4 | export function makeTooltip(descriptionHtml: string, keyboardShortcut: (options: { isMac: boolean }) => string) { 5 | return { 6 | content: `
${descriptionHtml}
${genKeyboardShortcutHtml(keyboardShortcut({ isMac }))}
`, 7 | html: true, 8 | } 9 | } 10 | 11 | function genKeyboardShortcutHtml(shortcut: string) { 12 | return `${shortcut.split('+').map(k => formatKey(k.trim())).join(' ')}` 13 | } 14 | -------------------------------------------------------------------------------- /packages/histoire-app/src/app/util/variant.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue' 2 | import type { Variant } from '../types' 3 | import { computed } from 'vue' 4 | import { useRoute } from 'vue-router' 5 | 6 | export function useCurrentVariantRoute(variant: Ref) { 7 | const route = useRoute() 8 | const isActive = computed(() => route.query.variantId === variant.value.id) 9 | const targetRoute = computed(() => ({ 10 | ...route, 11 | query: { 12 | ...route.query, 13 | variantId: variant.value.id, 14 | }, 15 | })) 16 | 17 | return { 18 | isActive, 19 | targetRoute, 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/histoire-app/src/bundle-index.js: -------------------------------------------------------------------------------- 1 | export * from './bundled/api.js' 2 | -------------------------------------------------------------------------------- /packages/histoire-app/src/bundle-main-dev.js: -------------------------------------------------------------------------------- 1 | import { mountMainApp } from './app/index' 2 | import './app/style/main.pcss' 3 | 4 | mountMainApp() 5 | -------------------------------------------------------------------------------- /packages/histoire-app/src/bundle-main.js: -------------------------------------------------------------------------------- 1 | import { mountMainApp } from './bundled/index.js' 2 | import './style.css' 3 | import './bundled/app.css' 4 | 5 | mountMainApp() 6 | -------------------------------------------------------------------------------- /packages/histoire-app/src/bundle-sandbox-dev.js: -------------------------------------------------------------------------------- 1 | import './app/style/sandbox.css' 2 | import './app/sandbox' 3 | -------------------------------------------------------------------------------- /packages/histoire-app/src/bundle-sandbox.js: -------------------------------------------------------------------------------- 1 | import './app/style/sandbox.css' 2 | import './bundled/sandbox.js' 3 | -------------------------------------------------------------------------------- /packages/histoire-app/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './app/api.js' 2 | -------------------------------------------------------------------------------- /packages/histoire-app/src/shim.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import type { Ref } from '@histoire/vendors/vue' 4 | 5 | global { 6 | interface Window { 7 | __hst_controls_dark: Ref[] 8 | __hst_controls_dark_ready: () => void 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/histoire-app/src/virtual.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'virtual:$histoire-commands' { 2 | import type { ClientCommand } from '@histoire/shared' 3 | 4 | export const registeredCommands: ClientCommand[] 5 | } 6 | 7 | declare module 'virtual:*'; 8 | -------------------------------------------------------------------------------- /packages/histoire-controls-stories/Intro.story.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: intro 3 | title: Introduction 4 | group: top 5 | icon: carbon:bookmark 6 | --- 7 | 8 | # Builtin controls & components 9 | 10 | This book contains all the available builtin components to be used with [Histoire](https://histoire.dev/). 11 | 12 | ## How to use 13 | 14 | - [For Vue](https://histoire.dev/guide/vue3/controls.html#builtin-controls) 15 | - [For Svelte](https://histoire.dev/guide/svelte3/controls.html#builtin-controls) 16 | -------------------------------------------------------------------------------- /packages/histoire-controls-stories/histoire-setup.ts: -------------------------------------------------------------------------------- 1 | import '@histoire/controls/src/style/main.css' 2 | -------------------------------------------------------------------------------- /packages/histoire-controls-stories/histoire.config.ts: -------------------------------------------------------------------------------- 1 | import { HstVue } from '@histoire/plugin-vue' 2 | import { defineConfig } from 'histoire' 3 | 4 | export default defineConfig({ 5 | plugins: [ 6 | HstVue(), 7 | { 8 | name: 'builtin:tailwind-tokens', 9 | }, 10 | ], 11 | 12 | storyMatch: ['../histoire-controls/src/**/*.story.vue'], 13 | 14 | setupFile: '/histoire-setup.ts', 15 | 16 | theme: { 17 | title: 'Histoire controls', 18 | favicon: 'histoire.svg', 19 | }, 20 | 21 | tree: { 22 | groups: [ 23 | { 24 | id: 'top', 25 | title: '', 26 | }, 27 | { 28 | id: 'controls', 29 | title: 'Controls', 30 | }, 31 | { 32 | id: 'design-system', 33 | title: 'Design System', 34 | }, 35 | ], 36 | }, 37 | 38 | vite: { 39 | server: { 40 | fs: { 41 | allow: [ 42 | '../histoire-controls/src', 43 | ], 44 | }, 45 | }, 46 | }, 47 | }) 48 | -------------------------------------------------------------------------------- /packages/histoire-controls-stories/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@histoire/controls-stories", 3 | "type": "module", 4 | "version": "0.8.4", 5 | "private": true, 6 | "description": "Stories for the prebuilt controls components", 7 | "author": { 8 | "name": "Guillaume Chau" 9 | }, 10 | "license": "MIT", 11 | "repository": { 12 | "url": "https://github.com/Akryum/histoire.git", 13 | "type": "git", 14 | "directory": "packages/histoire-controls-stories" 15 | }, 16 | "scripts": { 17 | "story:dev": "histoire dev", 18 | "story:build": "histoire build", 19 | "story:preview": "histoire preview" 20 | }, 21 | "dependencies": { 22 | "@histoire/controls": "workspace:*", 23 | "vue": "^3.5.13" 24 | }, 25 | "devDependencies": { 26 | "@histoire/plugin-vue": "workspace:*", 27 | "@vitejs/plugin-vue": "^5.2.1", 28 | "histoire": "workspace:*", 29 | "vite": "^6.0.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/histoire-controls-stories/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('@histoire/controls/tailwind.config.cjs') 2 | -------------------------------------------------------------------------------- /packages/histoire-controls-stories/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue' 2 | import { defineConfig } from 'vite' 3 | 4 | export default defineConfig({ 5 | plugins: [ 6 | vue(), 7 | ], 8 | }) 9 | -------------------------------------------------------------------------------- /packages/histoire-controls/README.md: -------------------------------------------------------------------------------- 1 | # @histoire/controls 2 | 3 | Builtin controls component 4 | 5 | [Docs](https://controls.histoire.dev) 6 | -------------------------------------------------------------------------------- /packages/histoire-controls/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('tailwindcss/nesting'), 5 | require('tailwindcss')('./tailwind.config.cjs'), 6 | require('autoprefixer'), 7 | ], 8 | } 9 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/HstCopyIcon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | 25 | 39 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/HstWrapper.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | 20 | 43 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/button/HstButton.story.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/button/HstButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 27 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/checkbox/HstCheckbox.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import HstCheckbox from './HstCheckbox.vue' 3 | 4 | describe('hstCheckbox', () => { 5 | it('toggle to checked', async () => { 6 | const wrapper = mount(HstCheckbox, { 7 | props: { 8 | modelValue: false, 9 | title: 'Label', 10 | }, 11 | }) 12 | await wrapper.trigger('click') 13 | expect(wrapper.emitted('update:modelValue')[0]).toEqual([true]) 14 | expect(wrapper.html()).toMatchSnapshot() 15 | }) 16 | 17 | it('toggle to unchecked', async () => { 18 | const wrapper = mount(HstCheckbox, { 19 | props: { 20 | modelValue: true, 21 | title: 'Label', 22 | }, 23 | }) 24 | await wrapper.trigger('click') 25 | expect(wrapper.emitted('update:modelValue')[0]).toEqual([false]) 26 | expect(wrapper.html()).toMatchSnapshot() 27 | }) 28 | }) 29 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.story.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/colorselect/HstColorSelect.story.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/json/HstJson.story.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 42 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/number/HstNumber.story.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 43 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/select/HstSelect.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 41 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/slider/HstSlider.story.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 38 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/components/textarea/HstTextarea.story.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 36 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/end.d.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from '@histoire/vendors/vue' 2 | 3 | global { 4 | interface Window { 5 | __hst_controls_dark: Ref[] 6 | __hst_controls_dark_ready: () => void 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/style/main.css: -------------------------------------------------------------------------------- 1 | @import 'floating-vue/dist/style.css'; 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | 8 | body { 9 | font-size: 1.125rem; 10 | @apply dark:htw-text-gray-100; 11 | } 12 | 13 | @media (min-width: 640px) { 14 | body { 15 | font-size: .875rem; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/types.ts: -------------------------------------------------------------------------------- 1 | export interface HstControlOption { 2 | label: string 3 | value: any 4 | } 5 | -------------------------------------------------------------------------------- /packages/histoire-controls/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export const isDark = ref(false) 4 | 5 | if (!window.__hst_controls_dark) { 6 | window.__hst_controls_dark = [] 7 | } 8 | 9 | // There could be multiple instances of the controls lib (in the controls book https://controls.histoire.dev) 10 | window.__hst_controls_dark.push(isDark) 11 | 12 | window.__hst_controls_dark_ready?.() 13 | -------------------------------------------------------------------------------- /packages/histoire-controls/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | const path = require('node:path') 2 | const inheritedConfig = require('../../tailwind.config.cjs') 3 | 4 | module.exports = { 5 | ...inheritedConfig, 6 | prefix: 'htw-', 7 | content: [ 8 | path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'), 9 | ], 10 | corePlugins: { 11 | preflight: false, 12 | }, 13 | } 14 | -------------------------------------------------------------------------------- /packages/histoire-controls/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import vue from '@vitejs/plugin-vue' 4 | import { defineConfig } from 'vite' 5 | 6 | export default defineConfig({ 7 | plugins: [ 8 | vue(), 9 | ], 10 | resolve: { 11 | alias: process.env.VITEST 12 | ? {} 13 | : { 14 | 'floating-vue': '@histoire/vendors/floating-vue', 15 | '@iconify/vue': '@histoire/vendors/iconify', 16 | 'pinia': '@histoire/vendors/pinia', 17 | 'scroll-into-view-if-needed': '@histoire/vendors/scroll', 18 | 'vue-router': '@histoire/vendors/vue-router', 19 | '@vueuse/core': '@histoire/vendors/vue-use', 20 | 'vue': '@histoire/vendors/vue', 21 | }, 22 | }, 23 | 24 | build: { 25 | emptyOutDir: false, 26 | 27 | lib: { 28 | entry: 'src/index.ts', 29 | formats: [ 30 | 'es', 31 | ], 32 | fileName: 'index.es', 33 | }, 34 | 35 | rollupOptions: { 36 | external: [ 37 | /@histoire/, 38 | ], 39 | }, 40 | }, 41 | 42 | test: { 43 | environment: 'jsdom', 44 | globals: true, 45 | }, 46 | }) 47 | -------------------------------------------------------------------------------- /packages/histoire-plugin-nuxt/README.md: -------------------------------------------------------------------------------- 1 | # Histoire + Nuxt 3 2 | 3 | ```bash 4 | pnpm add -D @histoire/plugin-nuxt 5 | ``` 6 | 7 | Add the plugin in histoire config: 8 | 9 | ```js 10 | import { HstNuxt } from '@histoire/plugin-nuxt' 11 | import { defineConfig } from 'histoire' 12 | 13 | export default defineConfig({ 14 | plugins: [ 15 | HstNuxt(), 16 | ], 17 | }) 18 | ``` 19 | -------------------------------------------------------------------------------- /packages/histoire-plugin-nuxt/runtime/app-component.mjs: -------------------------------------------------------------------------------- 1 | export default function render() { 2 | return null 3 | } 4 | -------------------------------------------------------------------------------- /packages/histoire-plugin-nuxt/runtime/components.mjs: -------------------------------------------------------------------------------- 1 | import { defineComponent, h } from 'vue' 2 | 3 | export const NuxtLink = defineComponent({ 4 | name: 'NuxtLink', 5 | props: { 6 | to: [String, Object], 7 | }, 8 | setup(props, ctx) { 9 | return () => h('a', { 10 | href: typeof props.to === 'string' ? props.to : '#', 11 | ...ctx.attrs, 12 | }, [ctx.slots.default?.()]) 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/histoire-plugin-nuxt/runtime/composables.mjs: -------------------------------------------------------------------------------- 1 | export const useNuxtApp = () => ({ runWithContext: async fn => await fn() }) 2 | -------------------------------------------------------------------------------- /packages/histoire-plugin-nuxt/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | const __HST_COLLECT__: boolean 3 | } 4 | 5 | export {} 6 | -------------------------------------------------------------------------------- /packages/histoire-plugin-nuxt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "rootDir": "src", 11 | "module": "ESNext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "types": [ 15 | "node" 16 | ], 17 | "strictBindCallApply": true, 18 | "strictFunctionTypes": true, 19 | "alwaysStrict": true, 20 | // Strict 21 | "noImplicitAny": false, 22 | "noImplicitThis": true, 23 | "outDir": "dist", 24 | "removeComments": false, 25 | "sourceMap": false, 26 | "allowSyntheticDefaultImports": true, 27 | "esModuleInterop": true, 28 | "skipLibCheck": true, 29 | "preserveWatchOutput": true 30 | }, 31 | "include": [ 32 | "src" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "generated/**/*", 37 | "dist/**/*", 38 | "src/**/*.spec.ts" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /packages/histoire-plugin-percy/README.md: -------------------------------------------------------------------------------- 1 | # Histoire Screenshot with Percy for visual regression testing 2 | 3 | You need the [Percy CLI](https://docs.percy.io/docs/cli-overview) installed to be able to send snapshots to Percy. 4 | 5 | ```bash 6 | pnpm add -D @histoire/plugin-percy 7 | ``` 8 | 9 | Add the plugin in histoire config: 10 | 11 | ```js 12 | import { HstPercy } from '@histoire/plugin-percy' 13 | import { defineConfig } from 'histoire' 14 | 15 | export default defineConfig({ 16 | plugins: [ 17 | HstPercy({ 18 | // Options here 19 | }), 20 | ], 21 | }) 22 | ``` 23 | 24 | Then use the Percy CLI 25 | 26 | ```bash 27 | # Replace `story:build` with the script to build the stories if you changed it 28 | percy exec pnpm run story:build 29 | ``` 30 | -------------------------------------------------------------------------------- /packages/histoire-plugin-percy/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "rootDir": "src", 11 | "module": "ESNext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "types": [ 15 | "node" 16 | ], 17 | "strictBindCallApply": true, 18 | "strictFunctionTypes": true, 19 | "alwaysStrict": true, 20 | // Strict 21 | "noImplicitAny": false, 22 | "noImplicitThis": true, 23 | "outDir": "dist", 24 | "removeComments": false, 25 | "sourceMap": false, 26 | "allowSyntheticDefaultImports": true, 27 | "esModuleInterop": true, 28 | "skipLibCheck": true, 29 | "preserveWatchOutput": true 30 | }, 31 | "include": [ 32 | "src" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "generated/**/*", 37 | "dist/**/*", 38 | "src/**/*.spec.ts" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /packages/histoire-plugin-screenshot/README.md: -------------------------------------------------------------------------------- 1 | # Histoire Screenshot visual regression testing 2 | 3 | ``` 4 | pnpm add -D @histoire/plugin-screenshot 5 | ``` 6 | 7 | Add the plugin in histoire config: 8 | 9 | ```js 10 | import { HstScreenshot } from '@histoire/plugin-screenshot' 11 | import { defineConfig } from 'histoire' 12 | 13 | export default defineConfig({ 14 | plugins: [ 15 | HstScreenshot({ 16 | // Options here 17 | }), 18 | ], 19 | }) 20 | ``` 21 | 22 | ## Setting Up Chrome Linux Sandbox 23 | 24 | If you get an error like No usable sandbox! or Running as root without --no-sandbox is not supported, you need to properly set up sandboxing on your Linux instance. 25 | Alternatively, if you completely trust the content, you can disable sandboxing (strongly discouraged): 26 | 27 | ref. https://github.com/sindresorhus/capture-website#faq 28 | 29 | ``` 30 | import { defineConfig } from 'histoire' 31 | import { HstScreenshot } from '@histoire/plugin-screenshot' 32 | 33 | export default defineConfig({ 34 | plugins: [ 35 | HstScreenshot({ 36 | launchOptionsArgs: ['--no-sandbox', '--disable-setuid-sandbox'], 37 | }), 38 | ], 39 | }) 40 | ``` 41 | -------------------------------------------------------------------------------- /packages/histoire-plugin-screenshot/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "rootDir": "src", 11 | "module": "ESNext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "types": [ 15 | "node" 16 | ], 17 | "strictBindCallApply": true, 18 | "strictFunctionTypes": true, 19 | "alwaysStrict": true, 20 | // Strict 21 | "noImplicitAny": false, 22 | "noImplicitThis": true, 23 | "outDir": "dist", 24 | "removeComments": false, 25 | "sourceMap": false, 26 | "allowSyntheticDefaultImports": true, 27 | "esModuleInterop": true, 28 | "skipLibCheck": true, 29 | "preserveWatchOutput": true 30 | }, 31 | "include": [ 32 | "src" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "generated/**/*", 37 | "dist/**/*", 38 | "src/**/*.spec.ts" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/client/MountStory.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | {#if story.variants.length === 1 && story.variants[0].id === '_default'} 18 | 19 | 20 | 21 | 22 | {:else} 23 | 24 | {/if} 25 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/client/RenderStory.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | {#if slotName === 'controls'} 24 | 25 | {/if} 26 | {#if slotName === 'default' || story.meta?.hasVariantChildComponents} 27 | 28 | {/if} 29 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/client/RenderVariant.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | {#if shouldRender} 27 | {#if slotName === 'default'} 28 | 29 | {/if} 30 | {#if slotName === 'controls'} 31 | 32 | {/if} 33 | {/if} 34 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/client/Stub.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/packages/histoire-plugin-svelte/src/client/Stub.svelte -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/client/index.ts: -------------------------------------------------------------------------------- 1 | export { default as MountStory } from './mount' 2 | export { default as RenderStory } from './render' 3 | 4 | declare module '@histoire/shared' { 5 | interface StoryMeta { 6 | hasVariantChildComponents?: boolean 7 | } 8 | } 9 | 10 | export function generateSourceCode() { 11 | // noop 12 | } 13 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/collect/Story.svelte: -------------------------------------------------------------------------------- 1 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/collect/Variant.svelte: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/commands/generate-story.client.ts: -------------------------------------------------------------------------------- 1 | import type { ClientCommandOptions } from 'histoire' 2 | import { kebabCase } from 'change-case' 3 | import { openStory, sendEvent } from 'histoire/plugin' 4 | 5 | export default { 6 | prompts: [ 7 | { 8 | field: 'component', 9 | label: 'Choose a component', 10 | type: 'select', 11 | options: async search => sendEvent('listSvelteComponents', { search }), 12 | required: true, 13 | }, 14 | { 15 | field: 'fileName', 16 | label: 'File name', 17 | type: 'text', 18 | required: true, 19 | defaultValue: answers => answers.component?.replace(/[^/]+\/([^/]+)\.svelte$/, '$1.story.svelte'), 20 | }, 21 | ], 22 | clientAction: (params) => { 23 | const index = params.component.lastIndexOf('/') 24 | const dirname = params.component.substring(0, index + 1) 25 | const file = `${dirname}${params.fileName}` 26 | const storyId = kebabCase(file.toLowerCase()) 27 | openStory(storyId) 28 | }, 29 | } as ClientCommandOptions 30 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './helpers.js' 2 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/src/util/list-components.ts: -------------------------------------------------------------------------------- 1 | import { globby } from 'globby' 2 | 3 | export async function listComponentFiles(search = '', ignore: string[] = [], limit = 10) { 4 | let files = await globby('**/*.svelte', { 5 | gitignore: true, 6 | ignore: [ 7 | 'node_modules', 8 | ...ignore, 9 | ], 10 | }) 11 | if (search) { 12 | const searchText = search.toLowerCase() 13 | files = files.filter(file => file.toLowerCase().includes(searchText)) 14 | } 15 | return files.slice(0, limit) 16 | } 17 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | import sveltePreprocess from 'svelte-preprocess' 2 | 3 | export default { 4 | preprocess: sveltePreprocess(), 5 | } 6 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": [ 4 | "src/client", 5 | "src/collect" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/histoire-plugin-svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "rootDir": "src", 11 | "module": "ESNext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "types": [ 15 | "node" 16 | ], 17 | "strictBindCallApply": true, 18 | "strictFunctionTypes": true, 19 | "alwaysStrict": true, 20 | // Strict 21 | "noImplicitAny": false, 22 | "noImplicitThis": true, 23 | "outDir": "dist", 24 | "removeComments": false, 25 | "sourceMap": false, 26 | "allowSyntheticDefaultImports": true, 27 | "esModuleInterop": true, 28 | "skipLibCheck": true, 29 | "preserveWatchOutput": true 30 | }, 31 | "include": [ 32 | "src" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "generated/**/*", 37 | "dist/**/*", 38 | "src/**/*.spec.ts" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/client.d.ts: -------------------------------------------------------------------------------- 1 | // https://github.com/microsoft/TypeScript/issues/33079 2 | export * from './dist/client/client' 3 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/collect.d.ts: -------------------------------------------------------------------------------- 1 | // https://github.com/microsoft/TypeScript/issues/33079 2 | export * from './dist/client/server' 3 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/client/app/index.ts: -------------------------------------------------------------------------------- 1 | export { default as MountStory } from './MountStory' 2 | export { default as RenderStory } from './RenderStory' 3 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/client/client.ts: -------------------------------------------------------------------------------- 1 | export * from './app/index.js' 2 | export * from './codegen.js' 3 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/client/server.ts: -------------------------------------------------------------------------------- 1 | export * from './server/run.js' 2 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/client/server/stub.ts: -------------------------------------------------------------------------------- 1 | const stub = { name: 'StubbedComponent', render: () => null } 2 | 3 | export function autoStubComponents(vnodes: any[]) { 4 | for (const vnode of vnodes) { 5 | if (typeof vnode.type === 'object' && (vnode.type as any).name !== 'HistoireVariant') { 6 | vnode.type = stub 7 | } 8 | if (Array.isArray(vnode.children)) { 9 | autoStubComponents(vnode.children) 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/commands/generate-story.client.ts: -------------------------------------------------------------------------------- 1 | import type { ClientCommandOptions } from 'histoire' 2 | import { kebabCase } from 'change-case' 3 | import { openStory, sendEvent } from 'histoire/plugin' 4 | 5 | export default { 6 | prompts: [ 7 | { 8 | field: 'component', 9 | label: 'Choose a component', 10 | type: 'select', 11 | options: async search => sendEvent('listVueComponents', { search }), 12 | required: true, 13 | }, 14 | { 15 | field: 'fileName', 16 | label: 'File name', 17 | type: 'text', 18 | required: true, 19 | defaultValue: answers => answers.component?.replace(/[^/]+\/([^/]+)\.vue$/, '$1.story.vue'), 20 | }, 21 | ], 22 | clientAction: (params) => { 23 | const index = params.component.lastIndexOf('/') 24 | const dirname = params.component.substring(0, index + 1) 25 | const file = `${dirname}${params.fileName}` 26 | const storyId = kebabCase(file.toLowerCase()) 27 | openStory(storyId) 28 | }, 29 | } as ClientCommandOptions 30 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/helpers.ts: -------------------------------------------------------------------------------- 1 | import type { Story, Variant } from '@histoire/shared' 2 | import type { App, Component } from 'vue' 3 | 4 | export interface Vue3StorySetupApi { 5 | app: App 6 | story?: Story 7 | variant?: Variant 8 | addWrapper: (wrapper: Component) => void 9 | } 10 | 11 | export type Vue3StorySetupHandler = (api: Vue3StorySetupApi) => Promise | void 12 | 13 | export function defineSetupVue3(handler: Vue3StorySetupHandler): Vue3StorySetupHandler { 14 | return handler 15 | } 16 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './helpers.js' 2 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/src/util/list-components.ts: -------------------------------------------------------------------------------- 1 | import { globby } from 'globby' 2 | 3 | export async function listComponentFiles(search = '', ignore: string[] = [], limit = 10) { 4 | let files = await globby('**/*.vue', { 5 | gitignore: true, 6 | ignore: [ 7 | 'node_modules', 8 | ...ignore, 9 | ], 10 | }) 11 | if (search) { 12 | const searchText = search.toLowerCase() 13 | files = files.filter(file => file.toLowerCase().includes(searchText)) 14 | } 15 | return files.slice(0, limit) 16 | } 17 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": [ 4 | "src/client" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /packages/histoire-plugin-vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "rootDir": "src", 11 | "module": "ESNext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "types": [ 15 | "node" 16 | ], 17 | "strictBindCallApply": true, 18 | "strictFunctionTypes": true, 19 | "alwaysStrict": true, 20 | // Strict 21 | "noImplicitAny": false, 22 | "noImplicitThis": true, 23 | "outDir": "dist", 24 | "removeComments": false, 25 | "sourceMap": false, 26 | "allowSyntheticDefaultImports": true, 27 | "esModuleInterop": true, 28 | "skipLibCheck": true, 29 | "preserveWatchOutput": true 30 | }, 31 | "include": [ 32 | "src" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "generated/**/*", 37 | "dist/**/*", 38 | "src/**/*.spec.ts" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/codegen/const.ts: -------------------------------------------------------------------------------- 1 | export const voidElements = [ 2 | 'area', 3 | 'base', 4 | 'br', 5 | 'col', 6 | 'embed', 7 | 'hr', 8 | 'img', 9 | 'input', 10 | 'keygen', 11 | 'link', 12 | 'meta', 13 | 'param', 14 | 'source', 15 | 'track', 16 | 'wbr', 17 | ] 18 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/codegen/index.ts: -------------------------------------------------------------------------------- 1 | export * from './const.js' 2 | export * from './serialize-js.js' 3 | export * from './util.js' 4 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './codegen/index.js' 2 | export * from './state.js' 3 | export * from './story.js' 4 | export * from './type-utils.js' 5 | export * from './types/index.js' 6 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/state.ts: -------------------------------------------------------------------------------- 1 | export function clone(data) { 2 | try { 3 | return structuredClone(data) 4 | } 5 | catch (e) { 6 | console.warn(e, `Fallback to JSON cloning`) 7 | try { 8 | return JSON.parse(JSON.stringify(data)) 9 | } 10 | catch (e) { 11 | console.error(e) 12 | } 13 | return data 14 | } 15 | } 16 | 17 | export function omit(data, keys: string[]) { 18 | const copy = {} 19 | for (const key in data) { 20 | if (!keys.includes(key)) { 21 | copy[key] = data[key] 22 | } 23 | } 24 | return copy 25 | } 26 | 27 | export function applyState(target: any, state: any, override = false) { 28 | for (const key in state) { 29 | // iframe sync needs to update properties without overriding them 30 | if (!override && target[key] && !key.startsWith('_h') && typeof target[key] === 'object' && !Array.isArray(target[key])) { 31 | Object.assign(target[key], state[key]) 32 | } 33 | else { 34 | try { 35 | target[key] = state[key] 36 | } 37 | catch (e) { 38 | // noop 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/story.ts: -------------------------------------------------------------------------------- 1 | export const omitInheritStoryProps = [ 2 | 'id', 3 | 'title', 4 | 'group', 5 | 'layout', 6 | 'variants', 7 | 'file', 8 | 'slots', 9 | 'lastSelectedVariant', 10 | ] 11 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/type-utils.ts: -------------------------------------------------------------------------------- 1 | export type Awaitable = Promise | T 2 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './command.js' 2 | export * from './config.js' 3 | export * from './plugin.js' 4 | export * from './prompt.js' 5 | export * from './story.js' 6 | -------------------------------------------------------------------------------- /packages/histoire-shared/src/types/prompt.ts: -------------------------------------------------------------------------------- 1 | import type { Awaitable } from '../type-utils.js' 2 | 3 | export interface PromptBase { 4 | field: string 5 | label: string 6 | required?: boolean 7 | defaultValue?: TValue | ((answers: Record) => TValue) 8 | } 9 | 10 | export interface TextPrompt extends PromptBase { 11 | type: 'text' 12 | } 13 | 14 | export type SelectPromptOption = string | { value: string, label: string } 15 | 16 | export interface SelectPrompt extends PromptBase { 17 | type: 'select' 18 | options: SelectPromptOption[] | ((search: string, answers: Record) => Awaitable) 19 | } 20 | 21 | export type Prompt = TextPrompt 22 | | SelectPrompt 23 | -------------------------------------------------------------------------------- /packages/histoire-vendors/entries.js: -------------------------------------------------------------------------------- 1 | export const entries = [ 2 | 'src/client/b-floating-vue.ts', 3 | 'src/client/b-iconify.ts', 4 | 'src/client/b-pinia.ts', 5 | 'src/client/b-scroll.ts', 6 | 'src/client/b-vue-router.ts', 7 | 'src/client/b-vue-use.ts', 8 | 'src/client/b-vue.ts', 9 | ] 10 | -------------------------------------------------------------------------------- /packages/histoire-vendors/floating-vue.d.ts: -------------------------------------------------------------------------------- 1 | import Default from './dist/client/b-floating-vue' 2 | 3 | export default Default 4 | export * from './dist/client/b-floating-vue' 5 | -------------------------------------------------------------------------------- /packages/histoire-vendors/iconify.d.ts: -------------------------------------------------------------------------------- 1 | import Default from './dist/client/b-iconify' 2 | 3 | export default Default 4 | export * from './dist/client/b-iconify' 5 | -------------------------------------------------------------------------------- /packages/histoire-vendors/pinia.d.ts: -------------------------------------------------------------------------------- 1 | import Default from './dist/client/b-pinia' 2 | 3 | export default Default 4 | export * from './dist/client/b-pinia' 5 | -------------------------------------------------------------------------------- /packages/histoire-vendors/scroll.d.ts: -------------------------------------------------------------------------------- 1 | import Default from './dist/client/b-scroll' 2 | 3 | export default Default 4 | export * from './dist/client/b-scroll' 5 | -------------------------------------------------------------------------------- /packages/histoire-vendors/src/client/b-floating-vue.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-named-default 2 | import { default as Default } from 'floating-vue' 3 | 4 | export * from 'floating-vue' 5 | export default Default 6 | -------------------------------------------------------------------------------- /packages/histoire-vendors/src/client/b-iconify.ts: -------------------------------------------------------------------------------- 1 | export * from '@iconify/vue' 2 | -------------------------------------------------------------------------------- /packages/histoire-vendors/src/client/b-pinia.ts: -------------------------------------------------------------------------------- 1 | export * from 'pinia' 2 | -------------------------------------------------------------------------------- /packages/histoire-vendors/src/client/b-scroll.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-named-default 2 | import { default as Default } from 'scroll-into-view-if-needed' 3 | 4 | export default Default 5 | -------------------------------------------------------------------------------- /packages/histoire-vendors/src/client/b-vue-router.ts: -------------------------------------------------------------------------------- 1 | export * from 'vue-router' 2 | -------------------------------------------------------------------------------- /packages/histoire-vendors/src/client/b-vue-use.ts: -------------------------------------------------------------------------------- 1 | export * from '@vueuse/core' 2 | -------------------------------------------------------------------------------- /packages/histoire-vendors/src/client/b-vue.ts: -------------------------------------------------------------------------------- 1 | export * from 'vue' 2 | -------------------------------------------------------------------------------- /packages/histoire-vendors/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "module": "ESNext", 11 | "moduleResolution": "node", 12 | "resolveJsonModule": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "strictBindCallApply": true, 17 | "strictFunctionTypes": true, 18 | "alwaysStrict": true, 19 | // Strict 20 | "noImplicitAny": false, 21 | "noImplicitThis": true, 22 | "declaration": true, 23 | "outDir": "dist", 24 | "removeComments": false, 25 | "sourceMap": false, 26 | "allowSyntheticDefaultImports": true, 27 | "esModuleInterop": true, 28 | "skipLibCheck": true, 29 | "preserveWatchOutput": true 30 | }, 31 | "include": [ 32 | "src" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /packages/histoire-vendors/vue-router.d.ts: -------------------------------------------------------------------------------- 1 | import Default from './dist/client/b-vue-router' 2 | 3 | export default Default 4 | export * from './dist/client/b-vue-router' 5 | -------------------------------------------------------------------------------- /packages/histoire-vendors/vue-use.d.ts: -------------------------------------------------------------------------------- 1 | import Default from './dist/client/b-vue-use' 2 | 3 | export default Default 4 | export * from './dist/client/b-vue-use' 5 | -------------------------------------------------------------------------------- /packages/histoire-vendors/vue.d.ts: -------------------------------------------------------------------------------- 1 | import Default from './dist/client/b-vue' 2 | 3 | export default Default 4 | export * from './dist/client/b-vue' 5 | -------------------------------------------------------------------------------- /packages/histoire/README.md: -------------------------------------------------------------------------------- 1 | # Histoire 2 | 3 | > Fast and beautiful interactive component playgrounds 4 | 5 | [Learn more](https://github.com/Akryum/histoire) 6 | 7 | ``` 8 | pnpm add histoire -D 9 | pnpm exec histoire dev 10 | pnpm exec histoire build 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/histoire/bin.mjs: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 'use strict' 3 | 4 | import './dist/node/bin.js' 5 | -------------------------------------------------------------------------------- /packages/histoire/client.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @deprecated 3 | */ 4 | export function hstEvent(name: string, argument): void 5 | 6 | /** 7 | * Logs an event to the 'Events' sidepane. 8 | * @param name Event name 9 | * @param argument Additional log data displayed when inspecting the event. 10 | */ 11 | export function logEvent(name: string, argument): void 12 | 13 | /** 14 | * Returns `true` when in the NodeJS server while collecting stories. 15 | */ 16 | export function isCollecting(): boolean 17 | 18 | export function toggleDark(value?: boolean): boolean 19 | export function isDark(): boolean 20 | -------------------------------------------------------------------------------- /packages/histoire/client.js: -------------------------------------------------------------------------------- 1 | import { logEvent } from '@histoire/app' 2 | 3 | export * from '@histoire/app' 4 | 5 | export function isCollecting() { 6 | return process.env.HST_COLLECT === 'true' 7 | } 8 | 9 | /** 10 | * @deprecated 11 | */ 12 | export function hstEvent(...args) { 13 | console.warn(`'hstEvent' is deprecated. Use 'logEvent' instead.`) 14 | return logEvent(...args) 15 | } 16 | -------------------------------------------------------------------------------- /packages/histoire/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './dist/node/index' 2 | -------------------------------------------------------------------------------- /packages/histoire/plugin.d.ts: -------------------------------------------------------------------------------- 1 | export function sendEvent(event: string, payload?: any): Promise 2 | 3 | export function openStory(storyId: string): void 4 | -------------------------------------------------------------------------------- /packages/histoire/plugin.js: -------------------------------------------------------------------------------- 1 | export function sendEvent(event, payload) { 2 | if (window.__HST_PLUGIN_API__) { 3 | return window.__HST_PLUGIN_API__.sendEvent(event, payload) 4 | } 5 | } 6 | 7 | export function openStory(storyId) { 8 | if (window.__HST_PLUGIN_API__) { 9 | return window.__HST_PLUGIN_API__.openStory(storyId) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/histoire/src/controls.ts: -------------------------------------------------------------------------------- 1 | export * from '@histoire/controls' 2 | -------------------------------------------------------------------------------- /packages/histoire/src/node/__tests__/markdown/test1.story.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # Test1 5 | 6 | Link to test 2 7 | [Test2](./test2.story.md) 8 | -------------------------------------------------------------------------------- /packages/histoire/src/node/__tests__/markdown/test2.story.md: -------------------------------------------------------------------------------- 1 | 2 | # Test2 3 | 4 | Link to test 1 5 | [Test1](./test1.story.md) 6 | -------------------------------------------------------------------------------- /packages/histoire/src/node/alias.ts: -------------------------------------------------------------------------------- 1 | import { createRequire } from 'node:module' 2 | import path from 'pathe' 3 | 4 | const require = createRequire(import.meta.url) 5 | 6 | export const APP_PATH = path.join(path.dirname(require.resolve('@histoire/app/package.json')), process.env.HISTOIRE_DEV ? 'src' : 'dist') 7 | 8 | export const TEMP_PATH = path.join(process.cwd(), 'node_modules', '.histoire') 9 | -------------------------------------------------------------------------------- /packages/histoire/src/node/builtin-plugins/vanilla-support/client.ts: -------------------------------------------------------------------------------- 1 | export { default as MountStory } from './MountStory' 2 | export { default as RenderStory } from './RenderStory' 3 | 4 | export function generateSourceCode() { 5 | // noop 6 | } 7 | -------------------------------------------------------------------------------- /packages/histoire/src/node/builtin-plugins/vanilla-support/plugin.ts: -------------------------------------------------------------------------------- 1 | import type { Plugin } from '@histoire/shared' 2 | import { fileURLToPath } from 'node:url' 3 | import { dirname } from 'pathe' 4 | 5 | const __dirname = dirname(fileURLToPath(import.meta.url)) 6 | 7 | export function vanillaSupport(): Plugin { 8 | return { 9 | name: 'builtin:vanilla-support', 10 | 11 | defaultConfig() { 12 | return { 13 | supportMatch: [ 14 | { 15 | id: 'vanilla', 16 | patterns: ['**/*.js'], 17 | pluginIds: ['vanilla'], 18 | }, 19 | ], 20 | } 21 | }, 22 | 23 | supportPlugin: { 24 | id: 'vanilla', 25 | moduleName: __dirname, 26 | setupFn: 'setupVanilla', 27 | importStoryComponent: (file, index) => `import Comp${index} from ${JSON.stringify(file.moduleId)}`, // @TODO code-splitting 28 | }, 29 | 30 | // onDev (api) { 31 | // // Test vanilla story 32 | // api.addStoryFile(resolve(__dirname, './vanilla.story.js')) 33 | // }, 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/histoire/src/node/collect/run.ts: -------------------------------------------------------------------------------- 1 | import type { ServerRunPayload } from '@histoire/shared' 2 | // @ts-expect-error virtual module 3 | import { collectSupportPlugins } from 'virtual:$histoire-support-plugins-collect' 4 | 5 | export async function run(payload: ServerRunPayload) { 6 | const { run } = await collectSupportPlugins[payload.file.supportPluginId]() 7 | const result = await run(payload) 8 | return result 9 | } 10 | -------------------------------------------------------------------------------- /packages/histoire/src/node/commands/build.ts: -------------------------------------------------------------------------------- 1 | import { build } from '../build.js' 2 | import { createContext } from '../context.js' 3 | 4 | export interface BuildOptions { 5 | config?: string 6 | } 7 | 8 | export async function buildCommand(options: BuildOptions) { 9 | const ctx = await createContext({ 10 | configFile: options.config, 11 | mode: 'build', 12 | }) 13 | await build(ctx) 14 | } 15 | -------------------------------------------------------------------------------- /packages/histoire/src/node/commands/preview.ts: -------------------------------------------------------------------------------- 1 | import pc from 'picocolors' 2 | import { createContext } from '../context.js' 3 | import { startPreview } from '../preview.js' 4 | 5 | export interface PreviewOptions { 6 | port?: number 7 | } 8 | 9 | export async function previewCommand(options: PreviewOptions) { 10 | const ctx = await createContext({ 11 | mode: 'build', 12 | }) 13 | 14 | for (const plugin of ctx.config.plugins) { 15 | if (plugin.onPreview) { 16 | await plugin.onPreview() 17 | } 18 | } 19 | 20 | const { baseUrl } = await startPreview(options.port, ctx) 21 | console.log(`Preview server listening on ${pc.cyan(baseUrl)}`) 22 | } 23 | -------------------------------------------------------------------------------- /packages/histoire/src/node/index.ts: -------------------------------------------------------------------------------- 1 | export { defaultColors } from './colors.js' 2 | export * from './config.js' 3 | export * from './plugin.js' 4 | export * from '@histoire/shared' 5 | 6 | declare module 'rollup' { 7 | interface PluginContextMeta { 8 | histoire: { 9 | isCollecting: boolean 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/histoire/src/node/util/find-up.ts: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs' 2 | import path from 'pathe' 3 | 4 | export function findUp(cwd: string = process.cwd(), fileNames: string[]): string { 5 | let { root } = path.parse(cwd) 6 | let dir = cwd 7 | 8 | // On Windows, it will for example return `C:`, we need to add the trailing `/` 9 | if (root[1] === ':' && root[2] === undefined) { 10 | root += '/' 11 | } 12 | 13 | while (dir !== root) { 14 | for (const fileName of fileNames) { 15 | const searchPath = path.join(dir, fileName) 16 | if (fs.existsSync(searchPath)) { 17 | return searchPath 18 | } 19 | } 20 | dir = path.dirname(dir) 21 | } 22 | 23 | return null 24 | } 25 | -------------------------------------------------------------------------------- /packages/histoire/src/node/util/fs.ts: -------------------------------------------------------------------------------- 1 | export const slash = (str: string) => str.replace(/\\/g, '/') 2 | -------------------------------------------------------------------------------- /packages/histoire/src/node/util/log.ts: -------------------------------------------------------------------------------- 1 | import pc from 'picocolors' 2 | 3 | export async function wrapLogError(id: string, cb: () => unknown) { 4 | try { 5 | await cb() 6 | } 7 | catch (e) { 8 | console.error(pc.red(`[Error] ${id}: ${e}`)) 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/histoire/src/node/util/slugify.ts: -------------------------------------------------------------------------------- 1 | // From vitepress 2 | 3 | // string.js slugify drops non ascii chars so we have to 4 | // use a custom implementation here 5 | import { remove as removeDiacritics } from 'diacritics' 6 | // eslint-disable-next-line no-control-regex 7 | const rControl = /[\u0000-\u001F]/g 8 | const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g 9 | 10 | export function slugify(str: string): string { 11 | return ( 12 | removeDiacritics(str) 13 | // Remove control characters 14 | .replace(rControl, '') 15 | // Replace special characters 16 | .replace(rSpecial, '-') 17 | // Remove continuous separators 18 | .replace(/-{2,}/g, '-') 19 | // Remove prefixing and trailing separators 20 | .replace(/^-+|-+$/g, '') 21 | // ensure it doesn't start with a number (#121) 22 | .replace(/^(\d)/, '_$1') 23 | // lowercase 24 | .toLowerCase() 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /packages/histoire/src/node/util/vendors.ts: -------------------------------------------------------------------------------- 1 | import path from 'node:path' 2 | import { fileURLToPath, pathToFileURL } from 'node:url' 3 | 4 | // Resolve an absolute path to e.g. node_modules/.pnpm/histoire@0.11.7_vite@3.2.4/node_modules/histoire/dist/node/vendors/controls.js 5 | // https://github.com/histoire-dev/histoire/issues/282 6 | export const __dirname = path.dirname(fileURLToPath(import.meta.url)) 7 | 8 | // https://github.com/vitejs/vite/issues/9661 9 | const alias = { 10 | '@histoire/vendors/vue': path.resolve(__dirname, '../vendors/vue.js'), 11 | '@histoire/controls': path.resolve(__dirname, '../vendors/controls.js'), 12 | } 13 | 14 | export function getInjectedImport(request: string) { 15 | let id: string = request 16 | 17 | if (alias[id]) { 18 | id = alias[id] 19 | } 20 | 21 | if (path.isAbsolute(id)) { 22 | return JSON.stringify(pathToFileURL(id).href) 23 | } 24 | else { 25 | return JSON.stringify(id) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/histoire/src/node/vendors/controls.ts: -------------------------------------------------------------------------------- 1 | export * from '@histoire/controls' 2 | -------------------------------------------------------------------------------- /packages/histoire/src/node/vendors/vue.ts: -------------------------------------------------------------------------------- 1 | export * from '@histoire/vendors/vue' 2 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/markdown.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | 3 | export function markdown(ctx: Context, id: string) { 4 | const fileId = id.slice('/__resolved__virtual:md:'.length) 5 | const file = ctx.markdownFiles.find(f => f.id === fileId) 6 | if (!file) { 7 | throw new Error(`Markdown file not found: ${fileId}`) 8 | } 9 | const { html, frontmatter, relativePath } = file 10 | return `export const html = ${JSON.stringify(html)} 11 | export const frontmatter = ${JSON.stringify(frontmatter)} 12 | export const relativePath = ${JSON.stringify(relativePath)} 13 | 14 | if (import.meta.hot) { 15 | import.meta.hot.accept(newModule => { 16 | if (newModule) { 17 | window.__hst_md_hmr(newModule) 18 | } 19 | }) 20 | }` 21 | } 22 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/noop.ts: -------------------------------------------------------------------------------- 1 | export const noop = () => `export default () => {}` 2 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/resolved-config.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | 3 | export function resolvedConfig(ctx: Context) { 4 | let js = `export const config = ${JSON.stringify(ctx.config)}\n` 5 | if (ctx.config.theme?.logo) { 6 | for (const key in ctx.config.theme.logo) { 7 | js += `import Logo_${key} from '${ctx.config.theme.logo[key]}'\n` 8 | } 9 | } 10 | js += `export const logos = {${Object.keys(ctx.config.theme?.logo ?? {}).map(key => `${key}: Logo_${key}`).join(', ')}}\n` 11 | return js 12 | } 13 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/resolved-generated-global-setup.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | import { GENERATED_SETUP_CODE } from './index.js' 3 | import { ID_SEPARATOR } from './util.js' 4 | 5 | export function resolvedGeneratedGlobalSetup(ctx: Context) { 6 | if (ctx.config.setupCode) { 7 | return [ 8 | // Import 9 | `${ctx.config.setupCode.map((c, index) => `import * as setup_${index} from '${GENERATED_SETUP_CODE}${ID_SEPARATOR}${index}'`).join('\n')}`, 10 | // List 11 | `const setupList = [${ctx.config.setupCode.map((c, index) => `setup_${index}`).join(', ')}]`, 12 | // Setups 13 | ...ctx.supportPlugins.map(p => p.setupFn).flat().map(fnName => `export async function ${fnName} (payload) { 14 | for (const setup of setupList) { 15 | if (setup?.${fnName}) { 16 | await setup.${fnName}(payload) 17 | } 18 | } 19 | }`), 20 | ].join('\n') 21 | } 22 | else { 23 | return '' 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/resolved-generated-setup-code.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | import { ID_SEPARATOR } from './util.js' 3 | 4 | export function resolvedGeneratedSetupCode(ctx: Context, id: string) { 5 | const [, index] = id.split(ID_SEPARATOR) 6 | return ctx.config.setupCode?.[index] ?? '' 7 | } 8 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/resolved-markdown-files.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | import { getInjectedImport } from '../util/vendors.js' 3 | 4 | export function resolvedMarkdownFiles(ctx: Context) { 5 | const filesJs = ctx.markdownFiles.map(f => `${JSON.stringify(f.relativePath)}: () => import(${JSON.stringify(`virtual:md:${f.id}`)})`).join(',') 6 | return `import { reactive } from ${process.env.HISTOIRE_DEV ? `'vue'` : getInjectedImport('@histoire/vendors/vue')} 7 | export const markdownFiles = reactive({${filesJs}}) 8 | if (import.meta.hot) { 9 | if (!window.__hst_md_hmr) { 10 | window.__hst_md_hmr = (newModule) => { 11 | markdownFiles[newModule.relativePath] = () => newModule 12 | } 13 | } 14 | 15 | import.meta.hot.accept(newModule => { 16 | Object.assign(markdownFiles, newModule.markdownFiles) 17 | }) 18 | }` 19 | } 20 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/resolved-support-plugins-client.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | import { createRequire } from 'node:module' 3 | import { PLUGINS_HAVE_DEV } from './util.js' 4 | 5 | const require = createRequire(import.meta.url) 6 | 7 | export function resolvedSupportPluginsClient(ctx: Context) { 8 | const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/client${process.env.HISTOIRE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, { 9 | paths: [ctx.root, import.meta.url], 10 | }))})`) 11 | return `export const clientSupportPlugins = { 12 | ${plugins.join(',\n ')} 13 | }` 14 | } 15 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/resolved-support-plugins-collect.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | import { createRequire } from 'node:module' 3 | import { PLUGINS_HAVE_DEV } from './util.js' 4 | 5 | const require = createRequire(import.meta.url) 6 | 7 | export function resolvedSupportPluginsCollect(ctx: Context) { 8 | const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/collect${process.env.HISTOIRE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, { 9 | paths: [ctx.root, import.meta.url], 10 | }))})`) 11 | return `export const collectSupportPlugins = { 12 | ${plugins.join(',\n ')} 13 | }` 14 | } 15 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/resolved-theme.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | import { parseColor } from '../colors.js' 3 | 4 | export function resolvedTheme(ctx: Context) { 5 | let css = '*, ::before, ::after {' 6 | // Colors 7 | for (const color in ctx.config.theme?.colors ?? {}) { 8 | for (const key in ctx.config.theme.colors[color]) { 9 | css += `--_histoire-color-${color}-${key}: ${parseColor(ctx.config.theme.colors[color][key]).color.join(' ')};` 10 | } 11 | } 12 | css += '}' 13 | return css 14 | } 15 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/story-source.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | import fs from 'fs-extra' 3 | import { resolve } from 'pathe' 4 | 5 | export async function storySource(ctx: Context, id: string) { 6 | const storyId = id.slice('/__resolved__virtual:story-source:'.length) 7 | const storyFile = ctx.storyFiles.find(f => f.story?.id === storyId) 8 | if (storyFile) { 9 | let source: string 10 | if (storyFile.virtual) { 11 | source = storyFile.moduleCode 12 | } 13 | else { 14 | source = await fs.readFile(resolve(ctx.root, storyFile.relativePath), 'utf-8') 15 | } 16 | return `export default ${JSON.stringify(source)}` 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/story.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '../context.js' 2 | 3 | export function story(ctx: Context, id: string) { 4 | const moduleId = id.replace('\0', '') 5 | const storyFile = ctx.storyFiles.find(f => f.moduleId === moduleId && f.virtual) 6 | if (storyFile) { 7 | return storyFile.moduleCode 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/histoire/src/node/virtual/util.ts: -------------------------------------------------------------------------------- 1 | export const ID_SEPARATOR = '__-__' 2 | 3 | export const PLUGINS_HAVE_DEV = [ 4 | '@histoire/plugin-vue', 5 | ] 6 | -------------------------------------------------------------------------------- /packages/histoire/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | // Volar 5 | "jsx": "preserve", 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "baseUrl": ".", 11 | "rootDir": "src", 12 | "module": "ESNext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "types": [ 16 | "node" 17 | ], 18 | "strictBindCallApply": true, 19 | "strictFunctionTypes": true, 20 | "alwaysStrict": true, 21 | // Strict 22 | "noImplicitAny": false, 23 | "noImplicitThis": true, 24 | // Output 25 | "declaration": true, 26 | "declarationMap": true, 27 | "outDir": "dist", 28 | "removeComments": false, 29 | "sourceMap": false, 30 | "allowSyntheticDefaultImports": true, 31 | "esModuleInterop": true, 32 | "skipLibCheck": true, 33 | "preserveWatchOutput": true 34 | }, 35 | "include": [ 36 | "src" 37 | ], 38 | "exclude": [ 39 | "node_modules", 40 | "generated/**/*", 41 | "dist/**/*", 42 | "src/**/*.spec.ts" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | - 'examples/*' 4 | - docs 5 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('tailwindcss/nesting'), 5 | require('tailwindcss')('./tailwind.config.cjs'), 6 | require('autoprefixer'), 7 | ], 8 | } 9 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/histoire-dev/histoire/158e0134f40b79aaaab60b266ae0f8e8e6f500e9/screenshot.png --------------------------------------------------------------------------------