Skip to content
This repository has been archived by the owner on Jun 17, 2021. It is now read-only.

Experiment with Docz #254

Open
wants to merge 28 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
174a019
Experiment with Docz
joshwcomeau Sep 17, 2018
d347a29
Udpate scripts
joshwcomeau Sep 17, 2018
2e885af
Convert more stories to docz
joshwcomeau Sep 26, 2018
f7add04
Add Logo story, remove unused things
joshwcomeau Sep 26, 2018
a00a5a5
More Docz work
joshwcomeau Sep 27, 2018
1050c73
Add a Netlify config file
j-f1 Oct 1, 2018
ef1e3a8
Update netlify.toml
j-f1 Oct 1, 2018
0aee4a4
Add SPA support
j-f1 Oct 2, 2018
c3433e6
'single quotes'
j-f1 Oct 2, 2018
9e2caae
update to docz v1 beta
superhawk610 Mar 27, 2019
9d3c2e3
Update to docz 1.1.0
melanieseltzer May 4, 2019
2120c24
Merge branch 'master' into docz
melanieseltzer May 4, 2019
5f968b5
Fix stuff from merge
melanieseltzer May 4, 2019
1d3b19a
Fix the colors section, split into semantic/raw/gradient
melanieseltzer May 4, 2019
3ec7580
Address PR comments
melanieseltzer May 4, 2019
fbb9c16
Update netlify.toml
AWolf81 May 8, 2019
2fc65a6
Convert lingering storybook components, create docz specific componen…
melanieseltzer May 9, 2019
655ad78
Cleanup
melanieseltzer May 9, 2019
511a18b
Add index route content to start off
melanieseltzer May 9, 2019
7385fe8
Flesh out index page and add logo
melanieseltzer May 9, 2019
00d7944
Center logo and add more dev info
melanieseltzer May 9, 2019
d8f8919
Pin versions & Update flow-bin version
AWolf81 May 9, 2019
e8f51e7
Remove empty include section - try to fix flow
AWolf81 May 9, 2019
4276c31
Add flow check
AWolf81 May 9, 2019
98ba8dc
Set server to max 1 worker
AWolf81 May 9, 2019
7fdaedc
Max 4 workers should also work & is faster - fix flow error
AWolf81 May 9, 2019
fd0d19c
assert that accumulator will never be undefined
superhawk610 May 9, 2019
846b896
Change selected icon for ProjectIconSelection
melanieseltzer May 11, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,12 @@
# Maybe related to https://github.com/styled-components/styled-components/issues/302
.*/node_modules/styled-components/**/*.js

[include]

[libs]

[lints]

[options]
server.max_workers=4

[strict]

Expand Down
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ yarn-error.log*
# because we use yarn.lock
package-lock.json

# storybook
# Storybook and Docz
/storybook-static
/.docz

# coverage
coverage*
coverage*
37 changes: 37 additions & 0 deletions doczrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// @flow
import { RAW_COLORS } from './src/constants';
import { css } from 'docz-plugin-css';

export default {
title: 'Guppy',
description: 'A friendly application manager and task runner for React.js',
src: './src',
public: './public',
theme: 'docz-theme-default',
themeConfig: {
logo: {
src: '/public/icon.png',
width: 70,
},
colors: {
primary: RAW_COLORS.blue[700],
},
styles: {
melanieseltzer marked this conversation as resolved.
Show resolved Hide resolved
// docz-theme-default global body styles (specifically, line-height) is interfering with
// xsmall btn component. This is a hacky override so btns get a line-height of 1.
body: `
font-family: "Source Sans Pro", sans-serif;
font-size: 16px;
line-height: 1;
p, a, h1, h2, h3, h4, table {
line-height: 1.6;
}
.bXQPyO, .iCcihC {
Copy link
Collaborator

@melanieseltzer melanieseltzer May 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AWolf81 I'm not sure if it's too fragile to target SC classes, but I'm not sure if Docz has a setting for overriding logo styles 🤔

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think that's a bit fragile.

Maybe we can create a custom Page component and a Sidbar component to change the styling. Not sure how to do this but the following migration guide looks interesting.

But I think we can add a comment to that style and improve this later.

align-items: center;
}
`,
},
},
plugins: [css()],
menu: ['Guppy Style Guide', 'Components', 'Reusable Components', 'Colors'],
};
8 changes: 8 additions & 0 deletions netlify.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
[build]
command = 'yarn docz:build'
publish = '.docz/dist'

[[redirects]]
from = '/*'
to = '/index.html'
status = 200
16 changes: 11 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,16 @@
"test:dev": "yarn test --verbose=false",
"test:coverage": "yarn test --coverage",
"test:report-coverage": "yarn test:coverage && codecov",
"flow": "flow",
"flow": "flow check",
"lint": "eslint src/**/*.js src/**/*.snap config/**/*.js",
"prettier": "prettier --write",
"detect-port": "cross-env ./node_modules/detect-port-alt/bin/detect-port 3000",
"precommit": "lint-staged",
"prepush": "yarn run flow",
"build-storybook": "build-storybook -c .storybook -o storybook-static",
"storybook": "start-storybook -p 9001 -c .storybook"
"storybook": "start-storybook -p 9001 -c .storybook",
"docz:dev": "docz dev",
"docz:build": "docz build"
},
"lint-staged": {
"linters": {
Expand Down Expand Up @@ -88,6 +90,9 @@
"color": "3.0.0",
"cross-env": "5.2.0",
"css-loader": "0.28.9",
"docz": "1.1.0",
"docz-plugin-css": "0.11.0",
"docz-theme-default": "1.1.0",
"dotenv": "5.0.0",
"dotenv-expand": "4.2.0",
"electron": "4.0.0",
Expand All @@ -107,7 +112,7 @@
"eslint-plugin-react": "7.11.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"flow-bin": "0.83.0",
"flow-bin": "0.98.1",
"foreman": "2.0.0",
"fs-extra": "5.0.0",
"graphql": "0.12.3",
Expand All @@ -133,10 +138,11 @@
"prettier": "1.13.7",
"raf": "3.4.0",
"random-seed": "0.3.0",
"react": "16.3.2",
"react": "16.8.5",
"react-dev-utils": "6.0.0-next.66cc7a90",
"react-docgen": "2.21.0",
"react-dom": "16.3.2",
"react-dom": "16.8.5",
"react-hot-loader": "4.8.4",
melanieseltzer marked this conversation as resolved.
Show resolved Hide resolved
"react-icons-kit": "1.1.5",
"react-instantsearch": "5.1.0",
"react-motion": "0.5.2",
Expand Down
20 changes: 20 additions & 0 deletions src/components/Button/ButtonBase.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
name: ButtonBase
menu: Reusable Components
---

import { Playground, Props } from 'docz';
import ButtonBase from './ButtonBase';

# ButtonBase

> Note: You probably don't want to use this component directly. It's just the
> underlying shared bit of code between FillButton and StrokeButton.

<Props of={ButtonBase} />

## Basic usage

<Playground>
<ButtonBase>Default</ButtonBase>
</Playground>
64 changes: 0 additions & 64 deletions src/components/Button/ButtonBase.stories.js

This file was deleted.

73 changes: 73 additions & 0 deletions src/components/Button/FillButton.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
name: FillButton
menu: Reusable Components
---

import { Playground, Props } from 'docz';

import { RAW_COLORS } from '../../constants';
import FillButton from './FillButton';

# FillButton

<Props of={FillButton} />

## Basic usage

<Playground>
<FillButton>Default</FillButton>
</Playground>

## Sizes

<Playground>
<FillButton size="xsmall">
Extra-small button
</FillButton>
</Playground>

<Playground>
<FillButton size="small">
Small button
</FillButton>
</Playground>

<Playground>
<FillButton size="medium">
Medium button
</FillButton>
</Playground>

<Playground>
<FillButton size="large">
Large button
</FillButton>
</Playground>

## Colors

<Playground>
<FillButton colors={[RAW_COLORS.green[500], RAW_COLORS.green[500]]}>
Solid green
</FillButton>
</Playground>

<Playground>
<FillButton colors={[RAW_COLORS.orange[500], RAW_COLORS.pink[300]]}>
Orange to pink
</FillButton>
</Playground>

<Playground>
<FillButton colors={[RAW_COLORS.teal[700], RAW_COLORS.lime[500]]}>
Teal to lime
</FillButton>
</Playground>

## Disabled

<Playground>
<FillButton disabled>
FillButton
</FillButton>
</Playground>
40 changes: 0 additions & 40 deletions src/components/Button/FillButton.stories.js

This file was deleted.

Loading