https://github.com/hacknlove/storybook-addon-next-auth0
https://github.com/hacknlove/storybook-addon-next-auth0
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/hacknlove/storybook-addon-next-auth0
- Owner: hacknlove
- License: mit
- Created: 2021-08-06T06:58:32.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-08T10:41:10.000Z (almost 5 years ago)
- Last Synced: 2025-01-08T20:51:11.625Z (over 1 year ago)
- Language: TypeScript
- Size: 88.9 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# storybook-addon-next-auth0
Allows you to use [`useUser`](https://auth0.github.io/nextjs-auth0/modules/frontend_use_user.html) from [`@auth0/nextjs-auth0`](https://github.com/auth0/nextjs-auth0)
It decores your stories with a mocked [`UserProvider`](https://auth0.github.io/nextjs-auth0/modules/frontend_use_user.html#userprovider) that you can control on a storybook panel.
## Install
```
npm i -d storybook-addon-next-auth0
```
## configuration
add "storybook-addon-next-auth0" to you `.storybook/main.js` addons
That's all.
### example
```js
module.exports = {
const path = require("path");
module.exports = {
"stories": [
"../components/**/*.stories.@(js|jsx)",
"../pageStories/**/*.stories.@(js|jsx)",
],
"addons": [
'storybook-addon-next-auth0',
"@storybook/addon-links",
"@storybook/addon-essentials",
],
}
```
## Stories
You can pass the initial useUser value to any story though story's parameters
### example
[stories/Example.stories.js](stories/Example.stories.js)
```js
import React from "react";
import { UserPrint } from "./Example";
export default {
title: "Example/User",
component: UserPrint,
parameters: {
initialUser: {
isLoading: true,
}
}
};
export const Loading = () =>
export const Logged = () =>
Logged.parameters = {
initialUser: {
isLoading: false,
user: {
email: 'john@doe.com',
email_verified: true,
nickname: 'Joe',
picture: 'https://picsum.photos/200',
sub: 'mock:johndoe',
updated_at: '2021-04-02T12:42:42.042Z',
}
}
}
export const ErrorStory = () =>
ErrorStory.parameters = {
initialUser: {
isLoading: false,
error: 'Something went wrong'
}
}
```