Commit 60125410 authored by Sam Gluck's avatar Sam Gluck
Browse files

Get React styleguidist working;

parent 6c269cdf
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const jest = require('jest');
let argv = process.argv.slice(2);
// Watch unless on CI or in coverage mode
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
argv.push('--watch');
}
jest.run(argv);
App example:
```js
<App />
```
Menu example:
```jsx
<Menu />
```
Button example:
```js
<MoodleButton>Hello world</MoodleButton>
<Button>Hello world</Button>
```
import * as React from 'react';
import styled from '../../../themes/styled';
import { moodlenet } from '../../../themes/themes';
import H4 from '../../typography/H4/H4';
import Button from '../Button/Button';
......@@ -15,12 +14,6 @@ export const StyledCard = styled.div`
border-top: 1px solid ${props => props.theme.styles.colour.primary};
`;
StyledCard.defaultProps = {
theme: {
styles: moodlenet
}
};
export type CardProps = {
title: string;
};
......
import * as React from 'react';
import { moodlenet } from '../themes/themes';
const { ThemeProvider } = require('@zendeskgarden/react-theming');
export default class Wrapper extends React.Component {
render() {
return (
<ThemeProvider theme={moodlenet}>{this.props.children}</ThemeProvider>
);
}
}
......@@ -12,6 +12,7 @@ export const vars = {
base5: '#c9c9c9',
base6: '#ffffff'
},
fontFamily: '"Open Sans", sans-serif',
fontWeight: {
light: 300,
regular: 400,
......@@ -33,28 +34,35 @@ export const theme = {
...vars,
// zendesk garden
'chrome.chrome': {
fontFamily: '"Open Sans", sans-serif'
fontFamily: vars.fontFamily
},
'typography.xxxl': {
fontFamily: vars.fontFamily,
fontSize: vars.fontSize.h1
},
'typography.xxl': {
fontFamily: vars.fontFamily,
fontSize: vars.fontSize.h2
},
'typography.xl': {
fontFamily: vars.fontFamily,
fontSize: vars.fontSize.h3
},
'typography.lg': {
fontFamily: vars.fontFamily,
fontSize: vars.fontSize.h4
},
'typography.md': {
fontFamily: vars.fontFamily,
fontSize: vars.fontSize.h5
},
'typography.sm': {
fontFamily: vars.fontFamily,
fontSize: vars.fontSize.h6
},
'buttons.button': `
&& {
font-family: ${vars.fontFamily};
background-color: ${vars.colour.primary};
color: ${vars.colour.base6};
border: 2px solid ${vars.colour.primary};
......
const path = require('path')
const webpackConfig = require('./config/webpack.config.dev.js')
// these are plugins we don't need for generation of the style guide
// and may even cause generation to fail if included
const removePlugins = [
'HtmlWebpackPlugin',
'InterpolateHtmlPlugin',
]
webpackConfig.plugins = webpackConfig.plugins.filter(plugin => {
return !removePlugins.includes(plugin.constructor.name)
})
module.exports = {
components: 'src/components/**/*.tsx',
propsParser:
require('react-docgen-typescript')
.withCustomConfig('./tsconfig.json')
.parse,
styleguideComponents: {
Wrapper: path.join(__dirname, 'src/styleguide/Wrapper.tsx')
},
template: {
head: {
links: [
{
rel: 'stylesheet',
// this should be the same as the link element in `public/index.html`
href: 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'
}
]
}
},
theme: {
fontFamily: {
base: '"Open Sans", sans-serif'
}
},
webpackConfig
}
......@@ -6947,6 +6947,10 @@ react-docgen-displayname-handler@^2.1.0:
dependencies:
ast-types "0.11.5"
react-docgen-typescript@1.10.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.10.0.tgz#a0bdfdf95e05b7426499eba230dcbbafbc546fb4"
react-docgen@3.0.0-beta12:
version "3.0.0-beta12"
resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-beta12.tgz#1285839296d6b616715b75c9d57f08d17c500be9"
......@@ -7020,9 +7024,9 @@ react-portal@^4.1.2, react-portal@^4.1.4:
dependencies:
prop-types "^15.5.8"
react-styleguidist@7.3.8:
version "7.3.8"
resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-7.3.8.tgz#d319ca71bd794390edfd7834d30e013e929fbe45"
react-styleguidist@7.3.10:
version "7.3.10"
resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-7.3.10.tgz#fa062fe7b994d7da6c5fce014fbc3189586f1c04"
dependencies:
"@vxna/mini-html-webpack-template" "^0.1.7"
acorn "^5.7.1"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment