shawn-sandy/BaseTheme.js

## BaseTheme.js
// .storybook/FirstPaint.js

import { create } from '@storybook/theming'

export default create({
  base: 'light',
  brandTitle: 'FPKIT',
  brandUrl: '/',
  brandImage:
    'https://res.cloudinary.com/dqjs95c7n/image/upload/v1647385126/fp-text-logo-sm_efd59g.svg',
  // UI settings
  appBg: 'white',
  appContentBg: 'white',
  appBorderColor: 'transparent',
  colorSecondary: 'dimgray',
  // Text colors
  textColor: 'black',
  textInverseColor: 'rgba(255,255,255,0.9)',
  // Toolbar default and active colors
  barTextColor: 'sliver',
  barSelectedColor: 'dimgray',
  barBg: 'transparent',
  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,
})

## Configure.mdx

      
    Raw
  

              Configure.mdx
            
          
    import { Meta } from "@storybook/blocks";
import Image from "next/image";
export const RightArrow = () => (
<svg
viewBox="0 0 14 14"
width="8px"
height="14px"
style={{
marginLeft: "4px",
display: "inline-block",
shapeRendering: "inherit",
verticalAlign: "middle",
fill: "currentColor",
"path fill": "currentColor",
}}


<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />

  
);


    # Configure your project
Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.

  
      {/*  */}
      Add styling and CSS

      Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
      Learn more
    
    
  <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"
    target="_blank"
  >Learn more<RightArrow /></a>
</div>
<div className="sb-section-item">

  <div>
    <h4 className="sb-section-item-heading">Load assets and resources</h4>
    <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
    `staticDirs` configuration option to specify folders to load when
    starting Storybook.</p>
    <a
      href="https://storybook.js.org/docs/react/configure/images-and-assets"
      target="_blank"
    >Learn more<RightArrow /></a>
  </div>
</div>

  
    # Do more with Storybook
Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.

  
    Addons

    Integrate your tools with Storybook to connect workflows.
    Discover all addons
  

  Join our contributors building the future of UI development.

  <a
    href="https://github.com/storybookjs/storybook"
    target="_blank"
  >Star on GitHub<RightArrow /></a>
</div>
<div className="sb-section-item">

  <div>
    Get support and chat with frontend developers.

    <a
      href="https://discord.gg/storybook"
      target="_blank"
    >Join Discord server<RightArrow /></a>
  </div>
</div>
<div className="sb-section-item">

  <div>
    Watch tutorials, feature previews and interviews.

    <a
      href="https://www.youtube.com/@chromaticui"
      target="_blank"
    >Watch on YouTube<RightArrow /></a>
  </div>
</div>
<div className="sb-section-item">

  <p>Follow guided walkthroughs on for key workflows.</p>

  <a
      href="https://storybook.js.org/tutorials/"
      target="_blank"
    >Discover tutorials<RightArrow /></a>
</div>


<style>
  {`
  .sb-container {
    margin-bottom: 48px;
  }

  .sb-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  img {
    object-fit: cover;
  }

  .sb-section-title {
    margin-bottom: 32px;
  }

  .sb-section a:not(h1 a, h2 a, h3 a) {
    font-size: 14px;
  }

  .sb-section-item, .sb-grid-item {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sb-section-item-heading {
    padding-top: 20px !important;
    padding-bottom: 5px !important;
    margin: 0 !important;
  }
  .sb-section-item-paragraph {
    margin: 0;
    padding-bottom: 10px;
  }

  .sb-chevron {
    margin-left: 5px;
  }

  .sb-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px 20px;
  }

  .sb-socials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .sb-socials p {
    margin-bottom: 10px;
  }

  .sb-explore-image {
    max-height: 32px;
    align-self: flex-start;
  }

  .sb-addon {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #EEF3F8;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #EEF3F8;
    height: 180px;
    margin-bottom: 48px;
    overflow: hidden;
  }

  .sb-addon-text {
    padding-left: 48px;
    max-width: 240px;
  }

  .sb-addon-text h4 {
    padding-top: 0px;
  }

  .sb-addon-img {
    position: absolute;
    left: 345px;
    top: 0;
    height: 100%;
    width: 200%;
    overflow: hidden;
  }

  .sb-addon-img img {
    width: 650px;
    transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -72px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
    backface-visibility: hidden;
  }

  @media screen and (max-width: 800px) {
    .sb-addon-img {
      left: 300px;
    }
  }

  @media screen and (max-width: 600px) {
    .sb-section {
      flex-direction: column;
    }

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }
  }
  `}
</style>

  
## custom-docs.tsx

import * as React from 'react'
import * as DocBlock from '@storybook/blocks'

export const CustomDocs = () => (
  <>
    <DocBlock.Title />
    <DocBlock.Subtitle />
    <DocBlock.Description />
    <DocBlock.Primary />
    <DocBlock.Controls />
    <DocBlock.Source />
    <DocBlock.Stories />
  </>
)

export default CustomDocs

## main.js
const path = require('path')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const path = require('path')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
module.exports = {
  stories: [
    '../libs/react/guides/**/*.stories.mdx',
    '../libs/react/**/*.stories.mdx',
    '../libs/react/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    '@geometricpanda/storybook-addon-badges',
    '@storybook/addon-storysource',
    '@storybook/addon-coverage',
    '@storybook/addon-mdx-gfm',
    '@storybook/addon-coverage',
    '@chromaui/addon-visual-tests',
    '@storybook/addon-mdx-gfm',
    '@chromaui/addon-visual-tests',
  ],
  features: {
    interactionsDebugger: true, // 👈 Enable playback controls
  },

  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: true,
    defaultName: 'Interactive Guide',
  },
}

## main.ts
import type { StorybookConfig } from "@storybook/nextjs";
import * as React from "react";

import CustomDocs from "./templates/custom-docs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-a11y",
    "@chromaui/addon-visual-tests",
  ],
  framework: {
    name: "@storybook/nextjs", // 👈 you can change the framework name/type
    options: {},
  },
  docs: {
    autodocs: true,
    defaultName: "Interactive Guide",
  },
};
export default config;

## manager-head.html
<style>
#root {
  font-family: 'Roboto', sans-serif !important;
}
</style>

## manager.js
// .storybook/manager.js

import { addons } from '@storybook/addons'
import { themes } from '@storybook/theming'
import BaseTheme from './BaseTheme'

addons.setConfig({
  isFullscreen: false,
  showNav: true,
  showPanel: true,
  enableShortcuts: true,
  isToolshown: true,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  theme: BaseTheme,
  sidebar: {
    showRoots: true,
    collapsedRoots: ['other'],
  },
  toolbar: {
    title: { hidden: false },
    zoom: { hidden: true },
    eject: { hidden: false },
    copy: { hidden: false },
    fullscreen: { hidden: true },
  },
})

## preview.head.html
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shawnsandy/first-paint@latest/dist/css/libs/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shawnsandy/first-paint@latest/dist/css/components/input.min.css" />

## preview.tsx
import './style.css'
import '@shawnsandy/first-paint/dist/css/libs/all.min.css'

import * as React from 'react'
import * as DocBlock from '@storybook/blocks'
import CustomDocs from './templates/custom-docs'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  // viewMode: 'docs',
  // previewTabs: { 'storybook/docs/panel': { index: -1 } },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  options: {
    sort: {
      method: 'alphabetical',
    },
  },
  docs: {
    page: CustomDocs,
    toc: true, // 👈 Enables the table of contents
  },
  layout: 'centered',
  // @geometricpanda/storybook-addon-badges
  badgesConfig: {
    beta: {
      styles: {
        backgroundColor: '#FFF',
        borderColor: '#018786',
        color: '#018786',
      },
      title: 'Beta',
    },
    deprecated: {
      styles: {
        backgroundColor: '#FFF',
        borderColor: '#6200EE',
        color: '#6200EE',
      },
      title: 'Deprecated',
    },
  },
}
	// .storybook/FirstPaint.js

	import { create } from '@storybook/theming'

	export default create({
	base: 'light',
	brandTitle: 'FPKIT',
	brandUrl: '/',
	brandImage:
	'https://res.cloudinary.com/dqjs95c7n/image/upload/v1647385126/fp-text-logo-sm_efd59g.svg',
	// UI settings
	appBg: 'white',
	appContentBg: 'white',
	appBorderColor: 'transparent',
	colorSecondary: 'dimgray',
	// Text colors
	textColor: 'black',
	textInverseColor: 'rgba(255,255,255,0.9)',
	// Toolbar default and active colors
	barTextColor: 'sliver',
	barSelectedColor: 'dimgray',
	barBg: 'transparent',
	// Form colors
	inputBg: 'white',
	inputBorder: 'silver',
	inputTextColor: 'black',
	inputBorderRadius: 4,
	})

	import * as React from 'react'
	import * as DocBlock from '@storybook/blocks'

	export const CustomDocs = () => (
	<>
	<DocBlock.Title />
	<DocBlock.Subtitle />
	<DocBlock.Description />
	<DocBlock.Primary />
	<DocBlock.Controls />
	<DocBlock.Source />
	<DocBlock.Stories />
	</>
	)

	export default CustomDocs
	const path = require('path')
	const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
	const path = require('path')
	const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
	module.exports = {
	stories: [
	'../libs/react/guides/*/.stories.mdx',
	'../libs/react/*/.stories.mdx',
	'../libs/react/*/.stories.@(js\|jsx\|ts\|tsx)',
	],
	addons: [
	'@storybook/addon-links',
	'@storybook/addon-essentials',
	'@storybook/addon-a11y',
	'@storybook/addon-interactions',
	'@geometricpanda/storybook-addon-badges',
	'@storybook/addon-storysource',
	'@storybook/addon-coverage',
	'@storybook/addon-mdx-gfm',
	'@storybook/addon-coverage',
	'@chromaui/addon-visual-tests',
	'@storybook/addon-mdx-gfm',
	'@chromaui/addon-visual-tests',
	],
	features: {
	interactionsDebugger: true, // 👈 Enable playback controls
	},

	framework: {
	name: '@storybook/react-vite',
	options: {},
	},
	docs: {
	autodocs: true,
	defaultName: 'Interactive Guide',
	},
	}
	import type { StorybookConfig } from "@storybook/nextjs";
	import * as React from "react";

	import CustomDocs from "./templates/custom-docs";

	const config: StorybookConfig = {
	stories: ["../src/*/.mdx", "../src/*/.stories.@(js\|jsx\|mjs\|ts\|tsx)"],
	addons: [
	"@storybook/addon-links",
	"@storybook/addon-essentials",
	"@storybook/addon-onboarding",
	"@storybook/addon-interactions",
	"@storybook/addon-a11y",
	"@chromaui/addon-visual-tests",
	],
	framework: {
	name: "@storybook/nextjs", // 👈 you can change the framework name/type
	options: {},
	},
	docs: {
	autodocs: true,
	defaultName: "Interactive Guide",
	},
	};
	export default config;
	<style>
	#root {
	font-family: 'Roboto', sans-serif !important;
	}
	</style>
	// .storybook/manager.js

	import { addons } from '@storybook/addons'
	import { themes } from '@storybook/theming'
	import BaseTheme from './BaseTheme'

	addons.setConfig({
	isFullscreen: false,
	showNav: true,
	showPanel: true,
	enableShortcuts: true,
	isToolshown: true,
	selectedPanel: undefined,
	initialActive: 'sidebar',
	theme: BaseTheme,
	sidebar: {
	showRoots: true,
	collapsedRoots: ['other'],
	},
	toolbar: {
	title: { hidden: false },
	zoom: { hidden: true },
	eject: { hidden: false },
	copy: { hidden: false },
	fullscreen: { hidden: true },
	},
	})
	<link rel="stylesheet" href="./style.css" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shawnsandy/first-paint@latest/dist/css/libs/all.min.css" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shawnsandy/first-paint@latest/dist/css/components/input.min.css" />
	import './style.css'
	import '@shawnsandy/first-paint/dist/css/libs/all.min.css'

	import * as React from 'react'
	import * as DocBlock from '@storybook/blocks'
	import CustomDocs from './templates/custom-docs'

	export const parameters = {
	actions: { argTypesRegex: '^on[A-Z].*' },
	// viewMode: 'docs',
	// previewTabs: { 'storybook/docs/panel': { index: -1 } },
	controls: {
	matchers: {
	color: /(background\|color)$/i,
	date: /Date$/,
	},
	},
	options: {
	sort: {
	method: 'alphabetical',
	},
	},
	docs: {
	page: CustomDocs,
	toc: true, // 👈 Enables the table of contents
	},
	layout: 'centered',
	// @geometricpanda/storybook-addon-badges
	badgesConfig: {
	beta: {
	styles: {
	backgroundColor: '#FFF',
	borderColor: '#018786',
	color: '#018786',
	},
	title: 'Beta',
	},
	deprecated: {
	styles: {
	backgroundColor: '#FFF',
	borderColor: '#6200EE',
	color: '#6200EE',
	},
	title: 'Deprecated',
	},
	},
	}