I'm working in storybook on Vite, and running in a problem where the sidebar in the build looks way different from the one I'm seeing when I start the storybook server locally.
We don't need to see every story individualy, so we want it to be like how it is in the local environment.
main.js:
const { resolve } = require('path');
module.exports = {
stories: ['../src/**/!(Template).stories.@(tsx|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-links',
'storybook-addon-react-docgen',
],
core: {
builder: 'storybook-builder-vite',
},
// customize the Vite config here
async viteFinal(config, { configType }) {
return {
...config,
base: './',
resolve: {
alias: {
index: resolve(__dirname, '../', 'src', 'index'),
Utils: resolve(__dirname, '../', 'src', 'Utils'),
Context: resolve(__dirname, '../', 'src', 'Context'),
Components: resolve(__dirname, '../', 'src', 'Components'),
Tokens: resolve(__dirname, '../', 'src', 'Tokens'),
Hooks: resolve(__dirname, '../', 'src', 'Hooks'),
},
},
define: configType === 'DEVELOPMENT' && {
'process.env': {},
global: {},
},
plugins: config.plugins.filter((plugin) =>
configType === 'DEVELOPMENT'
? plugin.name !== 'react-refresh'
: plugin.name !== 'mock-core-js'
),
};
},
};
manager.js:
import { addons } from '@storybook/addons';
import theme from './theme';
addons.setConfig({
theme: theme,
isFullscreen: false,
showNav: true,
showPanel: false,
panelPosition: 'bottom',
enableShortcuts: false,
isToolshown: false,
selectedPanel: 'Overview', // Id to select an addon panel
initialActive: 'sidebar', // Select the default active tab on Mobile
// Sidebar options, see below
sidebar: {
showRoots: true,
collapsedRoots: ['utils', 'experimental'],
},
// Modify the tools in the toolbar using the addon id
toolbar: {
title: { hidden: true },
zoom: { hidden: true },
eject: { hidden: true },
copy: { hidden: true },
fullscreen: { hidden: true },
},
});
Preview.js:
import 'react-toastify/dist/ReactToastify.min.css';
import 'rc-collapse/assets/index.css';
import '../styles/cogs.less';
export const parameters = {
viewMode: 'docs',
backgrounds: {
default: 'white',
values: [
{ name: 'white', value: '#fff' },
{ name: 'black', value: '#000' },
],
},
controls: { expanded: false },
options: {
storySort: {
order: [
'Overview',
'About Cogs.js',
'Getting started',
'How to contribute',
'Design',
'Tokens',
'Components',
'Patterns',
'Layout',
'Utils',
'*',
],
},
},
};
Many thanks!