mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-27 22:49:56 -05:00
252918b70c
ref https://linear.app/ghost/issue/DES-1021/create-posts-app Part of establishing React patterns in Ghost is to build a well-defined and fairly self-encapsulated app through which we can test assumptions and define best practices. Our guinea pig is Post analytics for this purpose. This PR creates a new React app (posts) using Shade (the new design system).
109 lines
2 KiB
TypeScript
109 lines
2 KiB
TypeScript
import React from 'react';
|
|
|
|
import '../styles.css';
|
|
import './storybook.css';
|
|
|
|
import type { Preview } from "@storybook/react";
|
|
import ShadeProvider from '../src/providers/ShadeProvider';
|
|
import shadeTheme from './shade-theme';
|
|
|
|
// import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
|
|
|
|
const customViewports = {
|
|
sm: {
|
|
name: 'sm',
|
|
styles: {
|
|
width: '480px',
|
|
height: '801px',
|
|
},
|
|
},
|
|
md: {
|
|
name: 'md',
|
|
styles: {
|
|
width: '640px',
|
|
height: '801px',
|
|
},
|
|
},
|
|
lg: {
|
|
name: 'lg',
|
|
styles: {
|
|
width: '1024px',
|
|
height: '801px',
|
|
},
|
|
},
|
|
xl: {
|
|
name: 'xl',
|
|
styles: {
|
|
width: '1320px',
|
|
height: '801px',
|
|
},
|
|
},
|
|
tablet: {
|
|
name: 'tablet',
|
|
styles: {
|
|
width: '860px',
|
|
height: '801px',
|
|
},
|
|
},
|
|
};
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
options: {
|
|
storySort: {
|
|
method: 'alphabetical',
|
|
order: [
|
|
'Welcome', 'Adding components', 'Component usage', 'Conventions', 'Icons',
|
|
'Components', 'Layout', 'Experimental', 'Meta'],
|
|
},
|
|
},
|
|
docs: {
|
|
theme: shadeTheme,
|
|
},
|
|
viewport: {
|
|
viewports: {
|
|
...customViewports,
|
|
},
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story, context) => {
|
|
let {scheme} = context.globals;
|
|
|
|
return (
|
|
<div className={`shade ${scheme === 'dark' ? 'dark' : ''}`} style={{
|
|
// padding: '24px',
|
|
// width: 'unset',
|
|
height: 'unset',
|
|
// overflow: 'unset',
|
|
background: (scheme === 'dark' ? '#131416' : '')
|
|
}}>
|
|
{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */}
|
|
<ShadeProvider darkMode={scheme === ''}>
|
|
<Story />
|
|
</ShadeProvider>
|
|
</div>);
|
|
},
|
|
],
|
|
globalTypes: {
|
|
scheme: {
|
|
name: "Scheme",
|
|
description: "Select light or dark mode",
|
|
defaultValue: "light",
|
|
toolbar: {
|
|
icon: "mirror",
|
|
items: ["light", "dark"],
|
|
dynamicTitle: true
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
export default preview;
|