refactor: move all core components to widgets

This introduces the new separation of what is a core component (style +
structure) and what is a widget (behavior). The idea is to keep core
components very stable and generic over time, and instead using the
concept of "widges" to mean things that are fully formed and usable
directly in an application.

This stability means that it becomes easier and safer to build new
components by composing core components. It also provides a clear
distinction between what is a core component and what is a widget.

BREAKING CHANGE: All @dhis2/ui-core exports have been migrated to
@dhis2/ui-widgets.

.gitignore

@@ -37,3 +37,4 @@ cypress.env.json
 # d2
 .d2/
 locales/
+packages/forms/i18n/

packages/core/src/ButtonBase/ButtonBase.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import cx from 'classnames'
+
+import propTypes from '@dhis2/prop-types'
+
+import styles from './ButtonBase.styles.js'
+
+/**
+ * @module
+ * @param {ButtonBase.PropTypes} props
+ * @returns {React.Component}
+ */
+export const ButtonBase = ({
+    children,
+    className,
+    primary,
+    secondary,
+    destructive,
+    small,
+    large,
+    disabled,
+    ...props
+}) => (
+    <button
+        {...props}
+        className={cx(className, {
+            primary,
+            secondary,
+            destructive,
+            small,
+            large,
+        })}
+        disabled={disabled}
+    >
+        {children}
+        <style jsx>{styles}</style>
+    </button>
+)
+
+/**
+ * @typedef {Object} PropTypes
+ * @static
+ * @prop {Node} [children]
+ * @prop {string} [className]
+ * @prop {boolean} [small]
+ * @prop {boolean} [large]
+ * @prop {boolean } [primary]
+ * @prop {boolean } [secondary]
+ * @prop {boolean } [destructive]
+ * @prop {boolean} [disabled]
+ */
+ButtonBase.propTypes = {
+    children: propTypes.node,
+    className: propTypes.string,
+    destructive: propTypes.bool,
+    disabled: propTypes.bool,
+    large: propTypes.bool,
+    primary: propTypes.bool,
+    secondary: propTypes.bool,
+    small: propTypes.bool,
+}

packages/core/src/ButtonBase/ButtonBase.stories.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { ButtonBase } from './ButtonBase.js'
+
+export default {
+    title: 'Component/Core/ButtonBase',
+    component: ButtonBase,
+}
+
+export const Default = () => <ButtonBase>Default button</ButtonBase>
+export const Primary = () => <ButtonBase primary>Default button</ButtonBase>
+export const Secondary = () => <ButtonBase secondary>Default button</ButtonBase>
+export const Destructive = () => (
+    <ButtonBase destructive>Default button</ButtonBase>
+)
+export const Small = () => <ButtonBase small>Default button</ButtonBase>
+export const Large = () => <ButtonBase large>Default button</ButtonBase>
+export const Disabled = () => <ButtonBase disabled>Default button</ButtonBase>

packages/core/src/Button/Button.styles.js → packages/core/src/ButtonBase/ButtonBase.styles.js

@@ -89,14 +89,6 @@ export default css`
         fill: ${theme.disabled};
     }
 
-    button.icon {
-        padding-left: ${spacers.dp12};
-    }
-
-    button.icon-only.icon {
-        padding-left: 6px;
-    }
-
     .small {
         height: 28px;
         padding: 0 8px;
@@ -112,14 +104,6 @@ export default css`
         line-height: 19px;
     }
 
-    .icon-only {
-        padding: 0;
-    }
-    .icon-only i {
-        margin-right: 0;
-        margin-left: 0;
-    }
-
     .primary {
         border-color: ${theme.primary800};
         background: linear-gradient(180deg, #1565c0 0%, #0650a3 100%);
@@ -236,13 +220,4 @@ export default css`
         fill: ${colors.white};
         opacity: 0.33;
     }
-
-    .button-icon {
-        margin-right: 6px;
-        color: inherit;
-        fill: inherit;
-        font-size: 26px;
-        vertical-align: middle;
-        pointer-events: none;
-    }
 `

packages/core/src/index.js

@@ -2,67 +2,4 @@
 export { CssReset } from './CssReset/CssReset.js'
 export { CssVariables } from './CssVariables/CssVariables.js'
 
-export { AlertBar } from './AlertBar/AlertBar.js'
-export { AlertStack } from './AlertStack/AlertStack.js'
-export { Box } from './Box/Box.js'
-export { Button } from './Button/Button.js'
-export { ButtonStrip } from './ButtonStrip/ButtonStrip.js'
-export { Card } from './Card/Card.js'
-export { Checkbox } from './Checkbox/Checkbox.js'
-export { Chip } from './Chip/Chip.js'
-export { CircularLoader } from './CircularLoader/CircularLoader.js'
-export { ComponentCover } from './ComponentCover/ComponentCover.js'
-export { Divider } from './Divider/Divider.js'
-export { DropdownButton } from './DropdownButton/DropdownButton.js'
-export { Field } from './Field/Field.js'
-export { FieldSet } from './FieldSet/FieldSet.js'
-export { FileInput } from './FileInput/FileInput.js'
-export { FileList } from './FileList/FileList.js'
-export { FileListItem } from './FileListItem/FileListItem.js'
-export { FileListPlaceholder } from './FileListPlaceholder/FileListPlaceholder.js'
-export { Help } from './Help/Help.js'
-export { Input } from './Input/Input.js'
-export { Label } from './Label/Label.js'
-export { Legend } from './Legend/Legend.js'
-export { LinearLoader } from './LinearLoader/LinearLoader.js'
-export { Logo, LogoIcon, LogoIconWhite, LogoWhite } from './Logo/Logo.js'
-export { Menu } from './Menu/Menu.js'
-export { MenuItem } from './MenuItem/MenuItem.js'
-export { MenuList } from './MenuList/MenuList.js'
-export { Modal } from './Modal/Modal.js'
-export { ModalActions } from './ModalActions/ModalActions.js'
-export { ModalContent } from './ModalContent/ModalContent.js'
-export { ModalTitle } from './ModalTitle/ModalTitle.js'
-export { MultiSelect } from './MultiSelect/MultiSelect.js'
-export { MultiSelectOption } from './MultiSelectOption/MultiSelectOption.js'
-export { Node } from './Node/Node.js'
-export { Popover } from './Popover/Popover.js'
-export { Popper } from './Popper/Popper.js'
-export { Radio } from './Radio/Radio.js'
-export { Required } from './Required/Required.js'
-export { ScreenCover } from './ScreenCover/ScreenCover.js'
-export { SingleSelect } from './SingleSelect/SingleSelect.js'
-export { SingleSelectOption } from './SingleSelectOption/SingleSelectOption.js'
-export { StackedTable } from './StackedTable/StackedTable.js'
-export { StackedTableBody } from './StackedTable/StackedTableBody.js'
-export { StackedTableCell } from './StackedTable/StackedTableCell.js'
-export { StackedTableCellHead } from './StackedTable/StackedTableCellHead.js'
-export { StackedTableFoot } from './StackedTable/StackedTableFoot.js'
-export { StackedTableHead } from './StackedTable/StackedTableHead.js'
-export { StackedTableRow } from './StackedTable/StackedTableRow.js'
-export { StackedTableRowHead } from './StackedTable/StackedTableRowHead.js'
-export { SplitButton } from './SplitButton/SplitButton.js'
-export { Switch } from './Switch/Switch.js'
-export { Tab } from './Tab/Tab.js'
-export { TabBar } from './TabBar/TabBar.js'
-export { Table } from './Table/Table.js'
-export { TableBody } from './Table/TableBody.js'
-export { TableCell } from './Table/TableCell.js'
-export { TableCellHead } from './Table/TableCellHead.js'
-export { TableFoot } from './Table/TableFoot.js'
-export { TableHead } from './Table/TableHead.js'
-export { TableRow } from './Table/TableRow.js'
-export { TableRowHead } from './Table/TableRowHead.js'
-export { Tag } from './Tag/Tag.js'
-export { TextArea } from './TextArea/TextArea.js'
-export { ToggleGroup } from './ToggleGroup/ToggleGroup.js'
+export { ButtonBase } from './ButtonBase/ButtonBase.js'

packages/forms/src/CheckboxGroupControl/CheckboxGroupControl.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
-import { Checkbox } from '@dhis2/ui-core'
+import { Checkbox } from '@dhis2/ui-widgets'
 import { ToggleGroupField } from '@dhis2/ui-widgets'
 
 import {

packages/forms/src/FileInputControl/FileInputControl.js

@@ -2,7 +2,7 @@ import React from 'react'
 import propTypes from '@dhis2/prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { FileInputField } from '@dhis2/ui-widgets'
-import { FileListItem } from '@dhis2/ui-core'
+import { FileListItem } from '@dhis2/ui-widgets'
 
 import { hasError, isValid, getValidationText } from '../shared/helpers.js'
 import { inputPropType, metaPropType } from '../shared/propTypes.js'

packages/forms/src/MultiSelectControl/MultiSelectControl.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 import { MultiSelectField } from '@dhis2/ui-widgets'
-import { MultiSelectOption } from '@dhis2/ui-core'
+import { MultiSelectOption } from '@dhis2/ui-widgets'
 
 import {
     createSelectChangeHandler,

packages/forms/src/RadioGroupControl/RadioGroupControl.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
-import { Radio } from '@dhis2/ui-core'
+import { Radio } from '@dhis2/ui-widgets'
 import { ToggleGroupField } from '@dhis2/ui-widgets'
 
 import {

packages/forms/src/SingleSelectControl/SingleSelectControl.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 import { SingleSelectField } from '@dhis2/ui-widgets'
-import { SingleSelectOption } from '@dhis2/ui-core'
+import { SingleSelectOption } from '@dhis2/ui-widgets'
 
 import {
     createSelectChangeHandler,

packages/forms/src/formDecorator.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
-import { Button } from '@dhis2/ui-core'
+import { Button } from '@dhis2/ui-widgets'
 
 import { FormControl } from './index.js'
 import { FormSpy } from './FormSpy.js'

packages/core/src/AlertBar/AlertBar.stories.js → packages/widgets/src/AlertBar/AlertBar.stories.js

@@ -18,7 +18,7 @@ const Wrapper = fn => (
     </div>
 )
 
-storiesOf('Component/Core/AlertBar', module)
+storiesOf('Component/Widget/AlertBar', module)
     .addDecorator(Wrapper)
     .add('Default', () => <AlertBar>Default - I will autohide</AlertBar>)
     .add('States', () => (

packages/core/src/AlertStack/AlertStack.stories.js → packages/widgets/src/AlertStack/AlertStack.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'
 import { AlertStack } from './AlertStack.js'
 import { AlertBar } from '../index.js'
 
-storiesOf('Component/Core/AlertStack', module).add('Default', () => (
+storiesOf('Component/Widget/AlertStack', module).add('Default', () => (
     <AlertStack>
         <AlertBar permanent>First notification - I am at the bottom</AlertBar>
         <AlertBar permanent critical>

packages/core/src/Box/Box.stories.js → packages/widgets/src/Box/Box.stories.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Box } from './Box.js'
 
 export default {
-    title: 'Component/Core/Box',
+    title: 'Component/Widget/Box',
     component: Box,
 }
 

packages/core/src/Button/Button.js → packages/widgets/src/Button/Button.js

@@ -3,6 +3,8 @@ import propTypes from '@dhis2/prop-types'
 import React, { Component, createRef } from 'react'
 
 import { sharedPropTypes } from '@dhis2/ui-constants'
+import { ButtonBase } from '@dhis2/ui-core'
+
 import styles from './Button.styles.js'
 
 /**
@@ -68,16 +70,15 @@ export class Button extends Component {
         } = this.props
 
         return (
-            <button
+            <ButtonBase
                 className={cx(className, {
-                    primary,
-                    secondary,
-                    destructive,
-                    small,
-                    large,
                     'icon-only': icon && !children,
-                    icon,
                 })}
+                primary={primary}
+                secondary={secondary}
+                destructive={destructive}
+                small={small}
+                large={large}
                 data-test={dataTest}
                 disabled={disabled}
                 name={name}
@@ -91,9 +92,8 @@ export class Button extends Component {
             >
                 {icon && <span className="button-icon">{icon}</span>}
                 {children}
-
                 <style jsx>{styles}</style>
-            </button>
+            </ButtonBase>
         )
     }
 }

packages/core/src/Button/Button.stories.js → packages/widgets/src/Button/Button.stories.js

@@ -4,7 +4,7 @@ import Button from './Button.js'
 const logger = ({ name, value }) => console.info(`${name}: ${value}`)
 
 export default {
-    title: 'Component/Core/Button',
+    title: 'Component/Widget/Button',
     component: Button,
 }
 

packages/widgets/src/Button/Button.styles.js

@@ -0,0 +1,31 @@
+import css from 'styled-jsx/css'
+
+import { spacers } from '@dhis2/ui-constants'
+
+export default css`
+    .icon {
+        padding-left: ${spacers.dp12};
+    }
+
+    .icon-only.icon {
+        padding-left: 6px;
+    }
+
+    .icon-only {
+        padding: 0;
+    }
+
+    .icon-only i {
+        margin-right: 0;
+        margin-left: 0;
+    }
+
+    .button-icon {
+        margin-right: 6px;
+        color: inherit;
+        fill: inherit;
+        font-size: 26px;
+        vertical-align: middle;
+        pointer-events: none;
+    }
+`

packages/core/src/ButtonStrip/ButtonStrip.stories.js → packages/widgets/src/ButtonStrip/ButtonStrip.stories.js

@@ -15,7 +15,7 @@ const Wrapper = fn => (
     </div>
 )
 
-storiesOf('Component/Core/ButtonStrip', module)
+storiesOf('Component/Widget/ButtonStrip', module)
     .addDecorator(Wrapper)
     .add('Default', () => (
         <ButtonStrip>

packages/core/src/Card/Card.stories.js → packages/widgets/src/Card/Card.stories.js

@@ -6,6 +6,6 @@ const Wrapper = fn => (
     <div style={{ width: '358px', height: '358px' }}>{fn()}</div>
 )
 
-storiesOf('Component/Core/Card', module)
+storiesOf('Component/Widget/Card', module)
     .addDecorator(Wrapper)
     .add('Default', () => <Card />)

packages/core/src/Checkbox/Checkbox.stories.js → packages/widgets/src/Checkbox/Checkbox.stories.js

@@ -22,7 +22,7 @@ const onChange = (...args) => window.onChange(...args)
 const onFocus = (...args) => window.onFocus(...args)
 const onBlur = (...args) => window.onBlur(...args)
 
-storiesOf('Component/Core/Checkbox', module)
+storiesOf('Component/Widget/Checkbox', module)
     // Regular
     .add('Default', () => (
         <Checkbox

packages/widgets/src/CheckboxField/CheckboxField.js

@@ -2,7 +2,7 @@ import React from 'react'
 import propTypes from '@dhis2/prop-types'
 
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import { Field, Help, Checkbox, Required } from '@dhis2/ui-core'
+import { Field, Help, Checkbox, Required } from '../index.js'
 
 const AddRequired = ({ label, required, dataTest }) => (
     <React.Fragment>