Merge pull request #760 from neontribe/styleguide

feat: add styleguide

package.json

@@ -14,7 +14,8 @@
     "build:testable": "CI= REACT_APP_MOCKS=true yarn build",
     "migrate": "migrate-mongo up",
     "generate": "node -r dotenv/config ./src/api/db/manage/generate/index.js --confirm",
-    "areas": "node -r dotenv/config ./src/api/db/manage/areaToDatabase/index.js"
+    "areas": "node -r dotenv/config ./src/api/db/manage/areaToDatabase/index.js",
+    "styleguide": "styleguidist server"
   },
   "repository": {
     "type": "git",
@@ -108,6 +109,7 @@
     "puppeteer": "3.3.0",
     "react-app-rewired": "2.1.6",
     "react-scripts": "3.4.1",
+    "react-styleguidist": "11.0.8",
     "serve": "11.3.1",
     "source-map-explorer": "2.4.2",
     "stylelint": "13.6.0",

src/components/Box.js → src/components/Box/Box.js

@@ -27,4 +27,5 @@ Box.propTypes = {
   ...createPropTypes(border.propNames),
 };
 
+/** @component */
 export default Box;

src/components/Box/Box.md

@@ -0,0 +1,19 @@
+### Implements
+
+* [space](https://styled-system.com/api#space)
+* [color](https://styled-system.com/api#color)
+* [layout](https://styled-system.com/api#layout)
+* [flexbox](https://styled-system.com/api#flexbox)
+* [position](https://styled-system.com/api#position)
+* [border](https://styled-system.com/api#border)
+
+### Usage
+
+```jsx
+<Box
+  width={[1, 1 / 2]}
+  p={3}
+  borderWidth={2}
+  borderStyle="solid"
+>Content here!</Box>
+```

src/components/Box/index.js

@@ -0,0 +1,3 @@
+import Box from './Box';
+
+export default Box;

src/components/Button.js → src/components/Button/Button.js

@@ -2,8 +2,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { variant } from 'styled-system';
 
-import Box from './Box';
-import Text from './Text';
+import Box from '../Box';
+import Text from '../Text';
 
 const BUTTON_HEIGHT = 34;
 
@@ -88,4 +88,5 @@ Button.defaultProps = {
   as: 'button',
 };
 
+/** @component */
 export default Button;

src/components/Button/Button.md

@@ -0,0 +1,19 @@
+### Primary
+
+```jsx
+<Button>Click me!</Button>
+```
+
+### Seconary
+
+```jsx
+<Button variant="secondary">Click me!</Button>
+```
+
+### Link
+
+The most common use can would be combine the `link` variant with `as="a"` to render the component as an anchor element.
+
+```jsx
+<Button as="a" href="" variant="link">Click me!</Button>
+```

src/components/Button/index.js

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;

src/components/ConditionalWrap/ConditionalWrap.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/** @visibleName Conditional Wrap */
+const ConditionalWrap = ({ condition, children, wrap }) =>
+  condition ? React.cloneElement(wrap(children)) : children;
+
+ConditionalWrap.propTypes = {
+  /** The condition to pass for `children` to be wrappe */
+  condition: PropTypes.bool.isRequired,
+  /** ender prop with `children` as the only argument. Invoked when the `condition` is true */
+  wrap: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+/** @component */
+export default ConditionalWrap;

src/components/ConditionalWrap/ConditionalWrap.md

@@ -0,0 +1,15 @@
+An abstraction which makes it simple to conditionally wrap content, whilst avoiding a duplicated definition of the content.
+
+### Usage
+
+In this scenario the content would be wrapped inside a modal, but only for mobile devices.
+
+```jsx static
+<ConditionalWrap
+  condition={isMobile}
+  wrap={children => <Modal>{children}</Modal>}
+  children={
+    <p>Content here!</p>
+  }
+/>
+```

src/components/ConditionalWrap/index.js

@@ -0,0 +1,3 @@
+import ConditionalWrap from './ConditionalWrap';
+
+export default ConditionalWrap;

src/components/Divider.js → src/components/Divider/Divider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Box from './Box';
+import Box from '../Box';
 
 const Divider = (props) => (
   <Box
@@ -15,4 +15,5 @@ const Divider = (props) => (
   />
 );
 
+/** @component */
 export default Divider;

src/components/Divider/Divider.md

@@ -0,0 +1,3 @@
+```jsx
+<Divider />
+```

src/components/Divider/index.js

@@ -0,0 +1,3 @@
+import Divider from './Divider';
+
+export default Divider;

src/components/Drawer.js → src/components/Drawer/Drawer.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { motion } from 'framer-motion';
 
-import Box from './Box';
-import Portal from './Portal';
+import Box from '../Box';
+import Portal from '../Portal';
 
 const MENU_HEIGHT = 60; // px
 
@@ -54,12 +54,15 @@ const Drawer = ({ visible, animateFrom, ...props }) => {
 };
 
 Drawer.propTypes = {
+  /** Determines whether the drawer is on screen */
   visible: PropTypes.bool,
+  /** Direction to animate from */
   animateFrom: PropTypes.oneOf(['left', 'right']),
 };
 
 Drawer.defaultProps = {
   animateFrom: 'right',
 };
 
+/** @component */
 export default Drawer;

src/components/Drawer/Drawer.md

@@ -0,0 +1,20 @@
+```jsx
+import Button from '../Button';
+import Spacer from '../Spacer';
+
+const [isVisible, setIsVisible] = React.useState(false);
+
+<>
+  <Button onClick={() => setIsVisible(true)}>Open drawer</Button>
+  <Drawer
+    visible={isVisible}
+    animateFrom="right"
+  >
+    <p>Drawer content here!</p>
+
+    <Spacer mt={3} />
+
+    <Button onClick={() => setIsVisible(false)}>Close drawer</Button>
+  </Drawer>
+</>
+```

src/components/Drawer/index.js

@@ -0,0 +1,3 @@
+import Drawer from './Drawer';
+
+export default Drawer;

src/components/Icon.js → src/components/Icon/Icon.js

@@ -3,10 +3,13 @@ import styled from '@emotion/styled';
 import { color } from 'styled-system';
 import { createPropTypes } from '@styled-system/prop-types';
 
-const Icon = styled(FontAwesomeIcon)(color);
+const Icon = styled(FontAwesomeIcon)`
+  ${color}
+`;
 
 Icon.propTypes = {
   ...createPropTypes(color.propNames),
 };
 
+/** @component */
 export default Icon;

src/components/Icon/Icon.md

@@ -0,0 +1,7 @@
+Implements [FontAwesomeIcon](https://github.com/FortAwesome/react-fontawesome).
+
+```jsx
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+
+<Icon icon={faBars} size="2x" />
+```

src/components/Icon/index.js

@@ -0,0 +1,3 @@
+import Icon from './Icon';
+
+export default Icon;

src/components/Logo/Logo.md

@@ -0,0 +1,3 @@
+```jsx
+<Logo />
+```

src/components/Notification.js → src/components/Notification/Notification.js

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
-import Box from './Box';
-import Text from './Text';
-import Icon from './Icon';
-import Spacer from './Spacer';
+import Box from '../Box';
+import Text from '../Text';
+import Icon from '../Icon';
+import Spacer from '../Spacer';
 
 const Notification = ({ allowClose, children }) => {
   const [isVisible, setIsVisible] = useState(true);
@@ -47,7 +47,11 @@ const Notification = ({ allowClose, children }) => {
 };
 
 Notification.propTypes = {
+  /** Allow the notification to be closed */
   allowClose: PropTypes.bool,
+  /** The notification message */
+  children: PropTypes.node,
 };
 
+/** @component */
 export default Notification;

src/components/Notification/Notification.md

@@ -0,0 +1,13 @@
+```jsx
+<Notification>
+  Please wait whilst we fetch some data&hellip;
+</Notification>
+```
+
+### Allow close
+
+```jsx
+<Notification allowClose>
+  Please wait whilst we fetch some data&hellip;
+</Notification>
+```

src/components/Notification/index.js

@@ -0,0 +1,3 @@
+import Notification from './Notification';
+
+export default Notification;