https://github.com/hashrock/fresh-stories

Fresh storybook alternative
https://github.com/hashrock/fresh-stories

Last synced: 3 months ago
JSON representation

Fresh storybook alternative

• Host: GitHub
• URL: https://github.com/hashrock/fresh-stories
• Owner: hashrock
• Created: 2023-11-24T17:57:21.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-10T11:19:58.000Z (11 months ago)
• Last Synced: 2024-08-16T15:35:55.412Z (5 months ago)
• Language: TypeScript
• Homepage: https://fresh-stories.deno.dev/stories
• Size: 114 KB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fresh stories

Storybook alternative for Fresh



# Usage

1. import plugin

```ts

// fresh.config.ts

import { defineConfig } from "$fresh/server.ts";

import tailwind from "$fresh/plugins/tailwind.ts";

+ import storiesPlugin from "https://deno.land/x/[email protected]/stories-plugin.ts";

export default defineConfig({

+  plugins: [tailwind(), storiesPlugin()],

});

```

2. Create story file

```tsx

// islands/stories/Button.story.tsx

import { Button } from "../../components/Button.tsx";

export default function Stories() {

  return (

    


      

        MyButton

      

    

  );

}

```


3. Open http://localhost:8000/stories

# Story files

The Story file is a simple tsx file summarizing the usage of components.

- Story files need to be created with the name `*.story.tsx`.

- Story files need to be placed inside the islands folder.

# Example

https://github.com/hashrock/fresh-stories-example