159 lines
4.0 KiB
JavaScript
159 lines
4.0 KiB
JavaScript
const { NODE_ENV } = process.env;
|
||
|
||
const env = NODE_ENV === 'production' ? 'prod' : 'dev';
|
||
|
||
// const resolvePkg = require('resolve-pkg');
|
||
const webpackConfig = require(`joyent-react-scripts/config/webpack.config.${env}.js`);
|
||
const { defaultHandlers } = require('react-docgen');
|
||
const dnHandler = require('react-docgen-displayname-handler');
|
||
const path = require('path');
|
||
|
||
module.exports = {
|
||
highlightTheme: 'base16-light',
|
||
webpackConfig: Object.assign(webpackConfig, {
|
||
resolve: Object.assign(webpackConfig.resolve, {
|
||
alias: Object.assign(webpackConfig.resolve.alias, {
|
||
'rsg-components/Wrapper': path.join(__dirname, 'src/styleguide/wrapper')
|
||
})
|
||
})
|
||
}),
|
||
styleguideComponents: {
|
||
StyleGuideRenderer: path.join(__dirname, 'src/styleguide/renderer'),
|
||
TableOfContentsRenderer: path.join(__dirname, 'src/styleguide/sidebar'),
|
||
ReactComponentRenderer: path.join(__dirname, 'src/styleguide/component'),
|
||
PlaygroundRenderer: path.join(__dirname, 'src/styleguide/playground'),
|
||
TabButtonRenderer: path.join(__dirname, 'src/styleguide/tabs'),
|
||
SectionHeadingRenderer: path.join(
|
||
__dirname,
|
||
'src/styleguide/sectionHeading'
|
||
),
|
||
SectionRenderer: path.join(__dirname, 'src/styleguide/section')
|
||
},
|
||
title: 'Design System',
|
||
showCode: true,
|
||
sections: [
|
||
{
|
||
name: 'Base Language',
|
||
sections: [
|
||
{
|
||
name: 'Color Palette',
|
||
description:
|
||
'Triton’s color palette aim to accessible and clear, whilst making distinctions between elements that are alive and elements that are static. We’ve split our palette into two sections; Action colors and Greys. ',
|
||
content: 'src/theme/colors.md'
|
||
},
|
||
{
|
||
name: 'Typography',
|
||
content: 'src/text/Readme.md'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: 'Basic Components',
|
||
components: () => [
|
||
'src/button/index.js',
|
||
'src/form/input.js',
|
||
'src/form/radio.js',
|
||
'src/form/select.js',
|
||
'src/form/checkbox.js',
|
||
'src/form/toggle.js',
|
||
'src/card/card.js',
|
||
'src/tooltip/index.js',
|
||
'src/popover/index.js'
|
||
]
|
||
},
|
||
{
|
||
name: 'Compound Components',
|
||
components: () => [
|
||
'src/table/index.js',
|
||
'src/header/index.js',
|
||
'src/message/index.js',
|
||
'src/section-list/index.js',
|
||
'src/breadcrumb/index.js'
|
||
]
|
||
},
|
||
{
|
||
name: 'Assets',
|
||
sections: [
|
||
{
|
||
name: 'Section Iconography',
|
||
content: 'src/icons/section.md'
|
||
},
|
||
{
|
||
name: 'Functional Iconography',
|
||
content: 'src/icons/functional.md'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: 'Developer',
|
||
sections: [
|
||
{
|
||
name: 'Download',
|
||
content: 'src/download.md'
|
||
},
|
||
{
|
||
name: 'Contribute',
|
||
content: 'src/contribute.md'
|
||
},
|
||
{
|
||
name: 'FAQ',
|
||
content: 'src/faq.md'
|
||
}
|
||
]
|
||
}
|
||
],
|
||
theme: {
|
||
color: {
|
||
base: '#494949',
|
||
link: '#3B46CC',
|
||
linkHover: '#5a62c5',
|
||
sidebarBackground: '#1E313B'
|
||
},
|
||
fontSize: {
|
||
base: 15,
|
||
text: 15,
|
||
small: 13,
|
||
h1: 36,
|
||
h2: 30,
|
||
h3: 26,
|
||
h4: 15,
|
||
h5: 14,
|
||
h6: 12
|
||
},
|
||
fontFamily: {
|
||
base: ['"Libre Franklin", -apple-system, sans-serif'],
|
||
monospace: [
|
||
'Roboto Mono',
|
||
'Consolas',
|
||
'"Liberation Mono"',
|
||
'Menlo',
|
||
'monospace'
|
||
]
|
||
},
|
||
sidebarWidth: 300,
|
||
spaceFactor: 6
|
||
},
|
||
styles: {
|
||
Styleguide: {
|
||
sidebar: {
|
||
color: '#FFFFFF'
|
||
}
|
||
},
|
||
Logo: {
|
||
border: 'none',
|
||
logo: {
|
||
'text-indent': -999,
|
||
'background-image': 'url("./etc/joyent-white.png")',
|
||
'background-size': 'cover',
|
||
width: 180,
|
||
'background-position': 0,
|
||
height: 39,
|
||
padding: 0,
|
||
margin: '0 auto'
|
||
}
|
||
}
|
||
},
|
||
handlers: componentPath =>
|
||
defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
|
||
};
|