Skip to content

Commit

Permalink
chore: update starter (#846)
Browse files Browse the repository at this point in the history
Update the code for the starter, as currently generated with nuxt init +
storybook init combo.

<!--
☝️ PR title should follow conventional commits
(https://conventionalcommits.org).
In particular, the title should start with one of the following types:

- docs: 📖 Documentation (updates to the documentation or readme)
- fix: 🐞 Bug fix (a non-breaking change that fixes an issue)
- feat: ✨ New feature/enhancement (a non-breaking change that adds
functionality or improves existing one)
- feat!/fix!: ⚠️ Breaking change (fix or feature that would cause
existing functionality to change)
- chore: 🧹 Chore (updates to the build process or auxiliary tools and
libraries)
-->

### 🔗 Linked issue

<!-- If it resolves an open issue, please link the issue here. For
example "Resolves #123" -->

### 📚 Description

<!-- Describe your changes in detail -->
<!-- Why is this change required? What problem does it solve? -->
  • Loading branch information
tobiasdiez authored Jan 16, 2025
1 parent a4ab1f1 commit 23c52c6
Show file tree
Hide file tree
Showing 20 changed files with 215 additions and 257 deletions.
2 changes: 1 addition & 1 deletion examples/starter/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,4 @@ logs
.env.*
!.env.example

*storybook.log
*storybook.log
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
/** @type { import('storybook-vue').StorybookConfig } */
const config = {
import type { StorybookConfig } from '@storybook-vue/nuxt'

const config: StorybookConfig = {
stories: [
'../components/**/*.mdx',
'../components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook-vue/nuxt',
options: {},
},
docs: {
autodocs: 'tag',
},
}
export default config
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
const preview = {
import type { Preview } from '@storybook/vue3'

const preview: Preview = {
parameters: {
controls: {
matchers: {
Expand Down
12 changes: 6 additions & 6 deletions examples/starter/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Nuxt 3 Minimal Starter
# Nuxt Minimal Starter

This example has been created based off the minimal starter template of Nuxt (`npx nuxi@latest init`), followed by running

Expand All @@ -10,11 +10,11 @@ to add Storybook to the project.

---

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:
Make sure to install dependencies:

```bash
# npm
Expand All @@ -39,7 +39,7 @@ Start the development server on `http://localhost:3000`:
npm run dev

# pnpm
pnpm run dev
pnpm dev

# yarn
yarn dev
Expand All @@ -57,7 +57,7 @@ Build the application for production:
npm run build

# pnpm
pnpm run build
pnpm build

# yarn
yarn build
Expand All @@ -73,7 +73,7 @@ Locally preview production build:
npm run preview

# pnpm
pnpm run preview
pnpm preview

# yarn
yarn preview
Expand Down
1 change: 1 addition & 0 deletions examples/starter/app.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>
20 changes: 10 additions & 10 deletions examples/starter/components/Configure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const RightArrow = () => (
<h4 className="sb-section-item-heading">Add styling and CSS</h4>
<p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
<a
href="https://storybook.js.org/docs/react/configure/styling-and-css"
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=vue"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -63,7 +63,7 @@ export const RightArrow = () => (
<h4 className="sb-section-item-heading">Provide context and mocking</h4>
<p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
<a
href="https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking"
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue#context-for-mocking"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -75,7 +75,7 @@ export const RightArrow = () => (
`staticDirs` configuration option to specify folders to load when
starting Storybook.</p>
<a
href="https://storybook.js.org/docs/react/configure/images-and-assets"
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=vue"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -98,7 +98,7 @@ export const RightArrow = () => (
<p className="sb-section-item-paragraph">Auto-generate living,
interactive reference documentation from your components and stories.</p>
<a
href="https://storybook.js.org/docs/react/writing-docs/autodocs"
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=vue"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -107,7 +107,7 @@ export const RightArrow = () => (
<h4 className="sb-section-item-heading">Publish to Chromatic</h4>
<p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
<a
href="https://storybook.js.org/docs/react/sharing/publish-storybook#publish-storybook-with-chromatic"
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=vue#publish-storybook-with-chromatic"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -117,7 +117,7 @@ export const RightArrow = () => (
<p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
implementation in one place.</p>
<a
href="https://storybook.js.org/docs/react/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=vue#embed-storybook-in-figma-with-the-plugin"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -127,7 +127,7 @@ export const RightArrow = () => (
<p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
complex.</p>
<a
href="https://storybook.js.org/docs/react/writing-tests"
href="https://storybook.js.org/docs/writing-tests/?renderer=vue"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -136,7 +136,7 @@ export const RightArrow = () => (
<h4 className="sb-section-item-heading">Accessibility</h4>
<p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
<a
href="https://storybook.js.org/docs/react/writing-tests/accessibility-testing"
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=vue"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -145,7 +145,7 @@ export const RightArrow = () => (
<h4 className="sb-section-item-heading">Theming</h4>
<p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
<a
href="https://storybook.js.org/docs/react/configure/theming"
href="https://storybook.js.org/docs/configure/theming/?renderer=vue"
target="_blank"
>Learn more<RightArrow /></a>
</div>
Expand All @@ -157,7 +157,7 @@ export const RightArrow = () => (
<h4>Addons</h4>
<p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
<a
href="https://storybook.js.org/integrations/"
href="https://storybook.js.org/addons/"
target="_blank"
>Discover all addons<RightArrow /></a>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
import type { Meta, StoryObj } from '@storybook/vue3'

import MyNuxtWelcome from './MyWelcome.vue'

// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

const meta = {
title: 'Example/NuxtWelcome',
component: MyNuxtWelcome,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
}
} satisfies Meta<typeof MyNuxtWelcome>

export default meta
type Story = StoryObj<typeof meta>

/*
*👇 Render functions are a framework specific feature
to allow you control on how the component renders.
* See https://storybook.js.org/docs/vue/api/csf
* to learn how to use render functions.
*/

export const NuxtWelcomeStory = {
export const NuxtWelcomeStory: Story = {
args: {},
}
38 changes: 37 additions & 1 deletion examples/starter/components/MyWelcome.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,40 @@
<template>
<h1>Welcome Nuxt to Storybook :</h1>
<h1>Welcome Nuxt to Storybook</h1>
<NuxtWelcome />
</template>

<style>
.readmore {
-webkit-text-size-adjust: 100%;
tab-size: 4;
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e0e0e0;
--tw-ring-inset: var(--tw-empty,);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(14, 165, 233, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
font-family:
'Nunito Sans',
-apple-system,
'.SFNSText-Regular',
'San Francisco',
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
line-height: 24px;
color: #029cfd;
text-decoration: none;
font-size: 14px;
}
</style>
6 changes: 1 addition & 5 deletions examples/starter/components/assets/accessibility.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 1 addition & 15 deletions examples/starter/components/assets/discord.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 23c52c6

Please sign in to comment.