Merge pull request #5 from dhis2/refactor/structure-style

refactor: move all core components to widgets

.gitignore

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

packages/core/src/ButtonBase/ButtonBase.js

@@ -0,0 +1,69 @@
+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}
+ */
+function ButtonBase(
+    {
+        children,
+        className,
+        primary,
+        secondary,
+        destructive,
+        small,
+        large,
+        disabled,
+        ...props
+    },
+    ref
+) {
+    return (
+        <button
+            {...props}
+            className={cx(className, {
+                primary,
+                secondary,
+                destructive,
+                small,
+                large,
+            })}
+            disabled={disabled}
+            ref={ref}
+        >
+            {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,
+}
+
+export default React.forwardRef(ButtonBase)

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 { default as 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