Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexgorbatchev/storybook-addon-localstorage
A Storybook v8 addon and decorator for mocking and displaying current values of the `localStorage` in a Storybook panel
https://github.com/alexgorbatchev/storybook-addon-localstorage
addon localstorage storybook
Last synced: 25 days ago
JSON representation
A Storybook v8 addon and decorator for mocking and displaying current values of the `localStorage` in a Storybook panel
- Host: GitHub
- URL: https://github.com/alexgorbatchev/storybook-addon-localstorage
- Owner: alexgorbatchev
- License: mit
- Created: 2023-11-28T23:24:37.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-13T23:46:42.000Z (8 months ago)
- Last Synced: 2025-01-11T10:18:26.092Z (27 days ago)
- Topics: addon, localstorage, storybook
- Language: TypeScript
- Homepage:
- Size: 336 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook LocalStorage Addon
A [Storybook](https://storybook.js.org/) v8 addon and decorator for mocking and displaying current values of the [`window.localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) in a Storybook panel
If you want to setup `parameters` to be strongly typed, see [@alexgorbatchev/storybook-parameters](https://github.com/alexgorbatchev/storybook-parameters).
## Install
```sh
npm i --save-dev @alexgorbatchev/storybook-addon-localstorage
```
Register the addon in `.storybook/main.js`
```ts
export default {
stories: ['../stories/**/*.stories.tsx'],
addons: ['@alexgorbatchev/storybook-addon-localstorage'],
};
```
## Important
- If `parameters.localStorage` is set, `localStorage.clear()` will be called before
populating the values.
- The values passed into `parameters.localStorage` **must be strings** because `localStorage`
only works with strings. You can use `JSON.stringify` or there's a helper function provided by the addon
called `localStorageForStorybook`.
- Finally, it's important to note that the addon works by polling and diffing mocked values
in `localStorage` every 100ms.
## Usage
Given a simple component:
```tsx
export const Header = () => {
const [user, setUser, { removeItem }] = useLocalStorage<{ name: string }>('user');
return (
{user ? (
{`Logged in as ${user.name}`}
removeItem()} />
) : (
No one is signed in
setUser({ name: 'John' })} />
)}
);
};
```
You can write a story as
```tsx
import { localStorageForStorybook } from '@alexgorbatchev/storybook-addon-localstorage';
import { Meta, StoryObj } from '@storybook/react';
import { Header } from './Header';
const meta: Meta = {
title: 'Example/Header',
component: Header,
};
export default meta;
type Story = StoryObj;
export const JohnLoggedIn: Story = {
parameters: {
// this helper automatically stringifies the values using `JSON.stringify`
localStorage: localStorageForStorybook({
value: 123,
user: { name: 'John' },
}),
},
};
export const JaneLoggedIn: Story = {
parameters: {
// if you have own serialzer, you can use it as well
localStorage: {
value: '123',
user: JSON.stringify({ name: 'Jane' }),
},
},
};
```
Strongly typed example:
```tsx
import { Meta, StoryObj } from '@alexgorbatchev/storybook-parameters';
import { LocalStorageParameters } from '@alexgorbatchev/storybook-addon-localstorage';
interface StoryParameters extends LocalStorageParameters {}
const meta: Meta = {
title: 'Header',
component: Header,
};
export default meta;
type Story = StoryObj;
export const JohnLoggedIn: Story = {
parameters: {
// `localStorage` will show up in `Parameters`
localStorage: {
key: 'value',
},
},
};
```
## Development Scripts
- `npm run storybook` starts Storybook
- `tsup` build `./dist`