🔖 Update version to 0.0.16

.drone.yml

@@ -6,7 +6,6 @@ name: components
 steps:
   - name: npm_auth
     image: robertstettner/drone-npm-auth
-    environment:
     settings:
       registry: npm.pkg.github.com
       token:
@@ -29,7 +28,6 @@ steps:
 
   - name: code-analysis
     image: committed/drone-sonarqube-node
-    detach: true
     environment:
       SONAR_HOST:
         from_secret: sonar_host
@@ -40,6 +38,9 @@ steps:
     when:
       branch:
         - master
+      event:
+        exclude:
+          - pull_request
 
   - name: slack
     image: plugins/slack
@@ -51,5 +52,18 @@ steps:
         from_secret: slack_template
     when:
       status:
-        - success
         - failure
+
+  - name: announce
+    image: plugins/slack
+    settings:
+      channel: group-dev
+      webhook:
+        from_secret: slack_webhook
+      template: >
+        :tada: New version ${DRONE_TAG} of `@commitd/components` available
+    when:
+      ref:
+        - refs/tags/v*
+      status:
+        - success

.storybook/addons.js

@@ -2,18 +2,14 @@ import '@storybook/addon-docs/register'
 import '@storybook/addon-actions/register'
 import '@storybook/addon-links/register'
 import '@storybook/addon-a11y/register'
-import { STORY_CHANGED } from '@storybook/core-events'
+import { STORIES_CONFIGURED } from '@storybook/core-events'
 
 import addonAPI from '@storybook/addons'
 
-let firstLoad = true
 addonAPI.register('committed/components', storybookAPI => {
-  // This doesn't currently work due to a bug in storybook
-  // storybookAPI.on(STORY_CHANGED, (kind, story) => {
-  //   console.log('called')
-  //   if (firstLoad) {
-  //     firstLoad = false // make sure to set this flag to false, otherwise you will never be able to look at another story.
-  //     storybookAPI.selectStory('Design System', 'Introduction')
-  //   }
-  // })
+  storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
+    if (storybookAPI.getUrlState().path === '/story/*') {
+      storybookAPI.selectStory('Design System', 'Introduction')
+    }
+  })
 })

.storybook/config.tsx

@@ -32,4 +32,4 @@ addParameters({
   }
 })
 
-configure(require.context('../src/stories', true, /\.(tsx|mdx)$/), module)
+configure(require.context('../src', true, /\.stories\.(tsx|mdx)$/), module)

README.md

@@ -1,5 +1,6 @@
 # Committed Components
 
+[![Committed Badge](https://img.shields.io/endpoint?url=https%3A%2F%2Fcommitted.software%2Fbadge)](https://committed/software)
 [![Build Status](https://drone.committed.software/api/badges/commitd/components/status.svg)](https://drone.committed.software/commitd/components)
 
 For documentation see https://committed.software/components

example/index.tsx

@@ -50,7 +50,7 @@ const Content = () => (
         'Rejux',
         'Baleen'
       ].map((name, index) => (
-        <Post name={name} index={index} />
+        <Post key={name} name={name} index={index} />
       ))}
     </C.Flex>
     <C.Box mb={5}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commitd/components",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Committed Component Library",
   "author": "Committed",
   "license": "UNLICENSED",
@@ -83,7 +83,7 @@
     "pretty-quick": "^1.11.1",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
-    "react-docgen-typescript-loader": "^3.1.1",
+    "react-docgen-typescript-loader": "^3.3.0",
     "react-dom": "^16.9.0",
     "react-scripts-ts": "^2.16.0",
     "rollup": "^0.62.0",

src/components/appbar/AppBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { ComponentType, FC } from 'react'
 import { styled } from '@material-ui/styles'
 import { fonts, Theme } from '../../theme'
 import MaterialAppBar, {
@@ -7,11 +7,17 @@ import MaterialAppBar, {
 
 export type AppBarProps = MaterialAppBarProps
 
-export const AppBar = styled<React.ComponentType<AppBarProps>>(MaterialAppBar)(
+export const AppBar: ComponentType<AppBarProps> = styled(MaterialAppBar)(
   ({ theme }: { theme: Theme }) => ({
     '& h1, h2, h3, h4, h5, h6': {
       fontSize: fonts.sizes[1],
       fontWeight: theme.typography.fontWeightMedium
     }
   })
 )
+
+// For documentation only
+export type BaseAppBarProps = Pick<AppBarProps, 'position' | 'color'>
+export type RestAppBarProps = Omit<AppBarProps, keyof BaseAppBarProps>
+export const BaseAppBarDocs: FC<BaseAppBarProps> = () => null
+export const RestAppBarDocs: FC<RestAppBarProps> = () => null

src/stories/components/appBar.mdx → src/components/appbar/appBar.stories.mdx

@@ -1,10 +1,15 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
 import { AppBar, Box, Heading, Button, Toolbar } from '../../'
+import { BaseAppBarDocs, RestAppBarDocs } from './AppBar'
 
 <Meta title="components|AppBar" component={AppBar} />
 
 # AppBar
 
+Extends [Material UI AppBar](https://material-ui.com/components/app-bar/).
+
+The App Bar should the used for information and actions on the current screen.
+
 <Preview>
   <Story name="simple">
     <AppBar position="relative">
@@ -20,4 +25,12 @@ import { AppBar, Box, Heading, Button, Toolbar } from '../../'
   </Story>
 </Preview>
 
-<Props of={AppBar} />
+# Props
+
+## Main props
+
+<Props of={BaseAppBarDocs} />
+
+## Other props
+
+<Props of={RestAppBarDocs} />

src/components/box/Box.tsx

@@ -3,20 +3,18 @@ import MaterialBox, {
   BoxProps as MaterialBoxProps
 } from '@material-ui/core/Box'
 
+export type BoxRef = HTMLDivElement
+
 export type BoxProps = MaterialBoxProps & {
   /** The background colour */
   bg?: string
 }
 
-export type BoxRef = HTMLDivElement
-
-export const Box: React.FC<BoxProps> = React.forwardRef<BoxRef, BoxProps>(
-  (props, ref) => (
-    // @ts-ignore due to ref forward
-    <MaterialBox
-      {...props}
-      bgcolor={props.bg ? props.bg : props.bgcolor}
-      ref={ref}
-    />
-  )
-)
+export const Box = React.forwardRef<BoxRef, BoxProps>((props, ref) => (
+  // @ts-ignore due to ref forward
+  <MaterialBox
+    {...props}
+    bgcolor={props.bg ? props.bg : props.bgcolor}
+    ref={ref}
+  />
+))

src/components/card/Card.tsx

@@ -44,7 +44,7 @@ export const CardHeader: React.ComponentType<CardHeaderProps> = ({
   children,
   ...others
 }: CardHeaderProps) => {
-  if (typeof (children && children) === 'string') {
+  if (typeof children === 'string') {
     return <StyledCardHeader {...others} title={children} />
   }
   return <StyledCardHeader {...others}>{children}</StyledCardHeader>

src/components/flex/Flex.tsx

@@ -2,7 +2,23 @@ import * as React from 'react'
 import { BoxProps, Box } from '../box/Box'
 
 export type FlexProps = Omit<BoxProps, 'display'>
+export type RowProps = Omit<FlexProps, 'flexDirection'>
+export type ColumnProps = Omit<FlexProps, 'flexDirection'>
 
-export const Flex: React.FC<FlexProps> = (props: FlexProps) => (
-  <Box {...props} display="flex" />
+export type FlexRef = HTMLDivElement
+
+export const Flex = React.forwardRef<FlexRef, FlexProps>(
+  (props: FlexProps, ref) => <Box ref={ref} {...props} display="flex" />
+)
+
+export const Row = React.forwardRef<FlexRef, RowProps>(
+  (props: FlexProps, ref) => (
+    <Box ref={ref} {...props} display="flex" flexDirection="row" />
+  )
+)
+
+export const Column = React.forwardRef<FlexRef, ColumnProps>(
+  (props: FlexProps, ref) => (
+    <Box ref={ref} {...props} display="flex" flexDirection="column" />
+  )
 )

src/components/index.ts

@@ -43,6 +43,9 @@ export type CheckboxProps = CheckboxProps
 export { Chip } from './chip/Chip'
 import { ChipProps } from './chip/Chip'
 export type ChipProps = ChipProps
+export { Column } from './flex/Flex'
+import { ColumnProps } from './flex/Flex'
+export type ColumnProps = ColumnProps
 export { Container } from './container/Container'
 import { ContainerProps } from './container/Container'
 export type ContainerProps = ContainerProps
@@ -100,6 +103,9 @@ export type RadioProps = RadioProps
 export { RadioGroup } from './radio/RadioGroup'
 import { RadioGroupProps } from './radio/RadioGroup'
 export type RadioGroupProps = RadioGroupProps
+export { Row } from './flex/Flex'
+import { RowProps } from './flex/Flex'
+export type RowProps = RowProps
 export { Select } from './select/Select'
 import { SelectProps } from './select/Select'
 export type SelectProps = SelectProps

src/stories/components/radio.mdx → src/components/radio/radio.stories.mdx

@@ -23,7 +23,7 @@ use radio when one option of more then two choices; [further info](https://www.n
 Radios should always be used with a `RadioGroup` to handle the state control and layout.
 
 <Preview>
-  <Story name="example">
+  <Story name="default">
     {React.createElement(() => {
       const [value, setValue] = React.useState('female')
       function handleChange(event /*: React.ChangeEvent<HTMLInputElement> */) {

src/stories/components/slider.mdx → src/components/slider/slider.stories.mdx

@@ -9,7 +9,7 @@ import { action } from '@storybook/addon-actions'
 Allows for selection from a (numeric) range of values.
 
 <Preview>
-  <Story name="examples">
+  <Story name="default">
     {React.createElement(() => {
       const marks = [
         {

src/stories/colour.mdx → src/stories/colour.stories.mdx

@@ -6,6 +6,9 @@ import { ThemeProvider, theme, colors, Flex } from '../'
 
 ## Main Light
 
+The main light theme colours. They can be refered to in palette based props using the key with main, light or dark. e.g. `primary.main`, `secondary.dark`.
+We use the brand colour for accents and highlights, not as the primary colour.
+
 <ThemeProvider>
   <Flex flexWrap="wrap">
     <Palette key="brand" name="brand" width={1} />
@@ -21,6 +24,8 @@ import { ThemeProvider, theme, colors, Flex } from '../'
 
 ## Palettes
 
+Full palletes back the main colours and are keyed with `50, 100, 200, 300, 400, 500, 600, 700, 800, 900`.
+
 Click to copy color to clipboard.
 
 <Colors name="brand" colors={theme.palettes.brand} />
@@ -34,6 +39,9 @@ Click to copy color to clipboard.
 
 ## Colours
 
+Don't refer to hex values in your code, like `#FFBB00` but instead use the theme colours above or you can also import
+`colors` directly and select from a wider set for, say charts and graphs that require more colours.
+
 <Colors name="red" colors={colors.red} />
 <Colors name="redVivid" colors={colors.redVivid} />
 <Colors name="orange" colors={colors.orange} />

src/stories/components/list.mdx → src/stories/components/list.stories.mdx

@@ -25,7 +25,7 @@ Listes can be used as toggle actions or as part of input forms.
 Use when single select/deselect option, use radio when one option of more then two choices; [further info](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/).
 
 <Preview>
-  <Story name="simple">
+  <Story name="default">
     <Flex justifyContent="center" bg="background.default">
       <Box minWidth={500} m={3} bg="background.paper">
         <List component="nav" aria-label="main mailbox folders">

src/stories/components/menu.mdx → src/stories/components/menu.stories.mdx

@@ -8,7 +8,7 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
 # Menu
 
 <Preview>
-  <Story name="with state">
+  <Story name="default">
     {React.createElement(() => {
       const [anchorEl, setAnchorEl] = React.useState(null)
       const click = action('clicked')

src/stories/components/table.mdx → src/stories/components/table.stories.mdx

@@ -14,7 +14,7 @@ import {
 # Table
 
 <Preview>
-  <Story name="simple">
+  <Story name="default">
     {React.createElement(() => {
       function createData(name, calories, fat, carbs, protein) {
         return { name, calories, fat, carbs, protein }