From d68f1f3acc9080e5a741e820db20e88ae516b014 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Sat, 20 Oct 2018 10:02:44 +0200 Subject: [PATCH 1/3] refactor: use named exports for UI components --- .storybook/config.js | 3 +-- app/components/Activity/Activity.js | 2 +- .../Activity/InvoiceModal/InvoiceModal.js | 2 +- .../Activity/PaymentModal/PaymentModal.js | 2 +- .../TransactionModal/TransactionModal.js | 5 +--- .../Contacts/AddChannel/AddChannel.js | 2 +- .../ConnectManually/ConnectManually.js | 2 +- .../SubmitChannelForm/SubmitChannelForm.js | 7 +---- app/components/Form/Pay/Pay.js | 8 ++---- app/components/Form/Request/Request.js | 9 ++----- app/components/GlobalError/GlobalError.js | 2 +- .../Onboarding/FormContainer/FormContainer.js | 2 +- app/components/Onboarding/Login/Login.js | 2 +- app/components/UI/Input.js | 2 +- app/components/UI/MainContent.js | 2 +- app/components/UI/Modal.js | 4 +-- app/components/UI/Select.js | 2 +- app/components/UI/Sidebar.js | 2 +- app/components/UI/TextArea.js | 2 +- app/components/UI/index.js | 26 +++++++++++++++++++ app/components/Wallet/Wallet.js | 5 +--- app/containers/Root.js | 5 +--- stories/components/background.stories.js | 4 +-- stories/components/bar.stories.js | 2 +- stories/components/button.stories.js | 2 +- stories/components/dropdown.stories.js | 2 +- stories/components/form.stories.js | 20 +++++++------- stories/components/menu.stories.js | 4 +-- stories/components/modal.stories.js | 2 +- stories/components/notification.stories.js | 2 +- stories/components/page-elements.stories.js | 4 +-- stories/components/spinner.stories.js | 2 +- stories/components/typography.stories.js | 3 +-- .../unit/components/UI/BackgroundDark.spec.js | 2 +- .../components/UI/BackgroundLight.spec.js | 2 +- .../components/UI/BackgroundLightest.spec.js | 2 +- test/unit/components/UI/Bar.spec.js | 2 +- test/unit/components/UI/Button.spec.js | 2 +- test/unit/components/UI/Dropdown.spec.js | 2 +- test/unit/components/UI/Heading.spec.js | 2 +- test/unit/components/UI/Input.spec.js | 2 +- test/unit/components/UI/MainContent.spec.js | 2 +- test/unit/components/UI/Menu.spec.js | 4 +-- test/unit/components/UI/Modal.spec.js | 2 +- test/unit/components/UI/Notification.spec.js | 3 +-- test/unit/components/UI/Page.spec.js | 2 +- test/unit/components/UI/Range.spec.js | 2 +- test/unit/components/UI/Select.spec.js | 2 +- test/unit/components/UI/Sidebar.spec.js | 2 +- test/unit/components/UI/Spinner.spec.js | 2 +- test/unit/components/UI/Text.spec.js | 2 +- test/unit/components/UI/TextArea.spec.js | 2 +- test/unit/components/UI/Toggle.spec.js | 2 +- .../UI/__snapshots__/Input.spec.js.snap | 20 +++++++------- .../UI/__snapshots__/Select.spec.js.snap | 20 +++++++------- .../UI/__snapshots__/TextArea.spec.js.snap | 20 +++++++------- 56 files changed, 120 insertions(+), 128 deletions(-) create mode 100644 app/components/UI/index.js diff --git a/.storybook/config.js b/.storybook/config.js index 42040678..70210600 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -12,8 +12,7 @@ import { setIntlConfig, withIntl } from 'storybook-addon-intl' import StoryRouter from 'storybook-react-router' import { dark, light } from 'themes' import { getDefaultLocale, locales } from 'lib/i18n' -import BackgroundDark from 'components/UI/BackgroundDark' -import GlobalStyle from 'components/UI/GlobalStyle' +import { BackgroundDark GlobalStyle } from 'components/UI' // Register supported locales. import '../app/lib/i18n/locale' diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js index 8690434a..f1eac664 100644 --- a/app/components/Activity/Activity.js +++ b/app/components/Activity/Activity.js @@ -6,7 +6,7 @@ import FaRepeat from 'react-icons/lib/fa/repeat' import { FormattedMessage, injectIntl } from 'react-intl' import { Flex } from 'rebass' -import Button from 'components/UI/Button' +import { Button } from 'components/UI' import Wallet from 'components/Wallet' import Invoice from './Invoice' import Payment from './Payment' diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.js b/app/components/Activity/InvoiceModal/InvoiceModal.js index 354aa276..35a162ec 100644 --- a/app/components/Activity/InvoiceModal/InvoiceModal.js +++ b/app/components/Activity/InvoiceModal/InvoiceModal.js @@ -4,7 +4,7 @@ import QRCode from 'qrcode.react' import copy from 'copy-to-clipboard' import { showNotification } from 'lib/utils/notifications' import Value from 'components/Value' -import Dropdown from 'components/UI/Dropdown' +import { Dropdown } from 'components/UI' import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' import Countdown from '../Countdown' import messages from './messages' diff --git a/app/components/Activity/PaymentModal/PaymentModal.js b/app/components/Activity/PaymentModal/PaymentModal.js index 3f214056..072a8a9b 100644 --- a/app/components/Activity/PaymentModal/PaymentModal.js +++ b/app/components/Activity/PaymentModal/PaymentModal.js @@ -1,8 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' -import Dropdown from 'components/UI/Dropdown' import PaperPlane from 'components/Icon/PaperPlane' import Zap from 'components/Icon/Zap' +import { Dropdown } from 'components/UI' import Value from 'components/Value' import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' import messages from './messages' diff --git a/app/components/Activity/TransactionModal/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js index 70f10274..71bd0c93 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.js +++ b/app/components/Activity/TransactionModal/TransactionModal.js @@ -1,16 +1,13 @@ import React from 'react' import PropTypes from 'prop-types' -import Dropdown from 'components/UI/Dropdown' import PaperPlane from 'components/Icon/PaperPlane' import Hand from 'components/Icon/Hand' import ChainLink from 'components/Icon/ChainLink' +import { Dropdown } from 'components/UI' import { blockExplorer } from 'lib/utils' - import Value from 'components/Value' - import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl' import messages from './messages' - import styles from './TransactionModal.scss' const TransactionModal = ({ diff --git a/app/components/Contacts/AddChannel/AddChannel.js b/app/components/Contacts/AddChannel/AddChannel.js index 18b7ab31..c8a7fd63 100644 --- a/app/components/Contacts/AddChannel/AddChannel.js +++ b/app/components/Contacts/AddChannel/AddChannel.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import X from 'components/Icon/X' import { FormattedMessage } from 'react-intl' -import Button from 'components/UI/Button' +import { Button } from 'components/UI' import messages from './messages' import styles from './AddChannel.scss' diff --git a/app/components/Contacts/ConnectManually/ConnectManually.js b/app/components/Contacts/ConnectManually/ConnectManually.js index 1352ca49..76bed320 100644 --- a/app/components/Contacts/ConnectManually/ConnectManually.js +++ b/app/components/Contacts/ConnectManually/ConnectManually.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { FormattedMessage, injectIntl } from 'react-intl' -import Button from 'components/UI/Button' +import { Button } from 'components/UI' import messages from './messages' import styles from './ConnectManually.scss' diff --git a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js index c35fabb2..a3bc7da4 100644 --- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js +++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js @@ -1,15 +1,10 @@ import React from 'react' import PropTypes from 'prop-types' - import FaExclamationCircle from 'react-icons/lib/fa/exclamation-circle' - import AmountInput from 'components/AmountInput' -import Button from 'components/UI/Button' -import Dropdown from 'components/UI/Dropdown' - +import { Button, Dropdown } from 'components/UI' import { FormattedNumber, FormattedMessage } from 'react-intl' import messages from './messages' - import styles from './SubmitChannelForm.scss' class SubmitChannelForm extends React.Component { diff --git a/app/components/Form/Pay/Pay.js b/app/components/Form/Pay/Pay.js index fca63e4f..cf3013b6 100644 --- a/app/components/Form/Pay/Pay.js +++ b/app/components/Form/Pay/Pay.js @@ -1,14 +1,10 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' - +import { btc } from 'lib/utils' import PaperPlane from 'components/Icon/PaperPlane' import ChainLink from 'components/Icon/ChainLink' - -import { btc } from 'lib/utils' import AmountInput from 'components/AmountInput' -import Button from 'components/UI/Button' -import Dropdown from 'components/UI/Dropdown' - +import { Button, Dropdown } from 'components/UI' import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' diff --git a/app/components/Form/Request/Request.js b/app/components/Form/Request/Request.js index 71c1fc06..93501d7a 100644 --- a/app/components/Form/Request/Request.js +++ b/app/components/Form/Request/Request.js @@ -1,16 +1,11 @@ import React from 'react' import PropTypes from 'prop-types' - -import Hand from 'components/Icon/Hand' - import { btc } from 'lib/utils' +import Hand from 'components/Icon/Hand' import AmountInput from 'components/AmountInput' -import Button from 'components/UI/Button' -import Dropdown from 'components/UI/Dropdown' - +import { Button, Dropdown } from 'components/UI' import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' - import styles from './Request.scss' const Request = ({ diff --git a/app/components/GlobalError/GlobalError.js b/app/components/GlobalError/GlobalError.js index 185d9eac..e49c8a9e 100644 --- a/app/components/GlobalError/GlobalError.js +++ b/app/components/GlobalError/GlobalError.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { animated, Transition } from 'react-spring' import { Box } from 'rebass' import errorToUserFriendly from 'lib/utils/userFriendlyErrors' -import Notification from 'components/UI/Notification' +import { Notification } from 'components/UI' class GlobalError extends React.Component { static propTypes = { diff --git a/app/components/Onboarding/FormContainer/FormContainer.js b/app/components/Onboarding/FormContainer/FormContainer.js index baf89a95..f37c672f 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.js +++ b/app/components/Onboarding/FormContainer/FormContainer.js @@ -6,7 +6,7 @@ import FaAngleLeft from 'react-icons/lib/fa/angle-left' import FaAngleRight from 'react-icons/lib/fa/angle-right' import ZapLogo from 'components/Icon/ZapLogo' import ZapLogoBlack from 'components/Icon/ZapLogoBlack' -import Button from 'components/UI/Button' +import { Button } from 'components/UI' import messages from './messages' import styles from './FormContainer.scss' diff --git a/app/components/Onboarding/Login/Login.js b/app/components/Onboarding/Login/Login.js index 4461064f..db1c13b6 100644 --- a/app/components/Onboarding/Login/Login.js +++ b/app/components/Onboarding/Login/Login.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { FormattedMessage, injectIntl } from 'react-intl' -import Button from 'components/UI/Button' +import { Button } from 'components/UI' import messages from './messages' import styles from './Login.scss' diff --git a/app/components/UI/Input.js b/app/components/UI/Input.js index 003cbc61..1aad907a 100644 --- a/app/components/UI/Input.js +++ b/app/components/UI/Input.js @@ -3,7 +3,7 @@ import { asField } from 'informed' import { Input as Base } from 'styled-system-html' import { withTheme } from 'styled-components' import { Flex } from 'rebass' -import FormFieldMessage from 'components/UI/FormFieldMessage' +import { FormFieldMessage } from 'components/UI' /** * @render react diff --git a/app/components/UI/MainContent.js b/app/components/UI/MainContent.js index 10734d72..4350c57f 100644 --- a/app/components/UI/MainContent.js +++ b/app/components/UI/MainContent.js @@ -1,5 +1,5 @@ import React from 'react' -import BackgroundDark from 'components/UI/BackgroundDark' +import { BackgroundDark } from 'components/UI' /** * @render react diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js index 7726c312..16de8f6b 100644 --- a/app/components/UI/Modal.js +++ b/app/components/UI/Modal.js @@ -1,9 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' - import { Box, Flex } from 'rebass' - -import BackgroundDark from 'components/UI/BackgroundDark' +import { BackgroundDark } from 'components/UI' import X from 'components/Icon/X' /** diff --git a/app/components/UI/Select.js b/app/components/UI/Select.js index 7dcdeefd..c0f8f577 100644 --- a/app/components/UI/Select.js +++ b/app/components/UI/Select.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { asField } from 'informed' -import Input from 'components/UI/Input' +import { Input } from 'components/UI' import styled, { withTheme } from 'styled-components' import Downshift from 'downshift' import { Box } from 'rebass' diff --git a/app/components/UI/Sidebar.js b/app/components/UI/Sidebar.js index 737730f3..7abe9278 100644 --- a/app/components/UI/Sidebar.js +++ b/app/components/UI/Sidebar.js @@ -1,5 +1,5 @@ import React from 'react' -import BackgroundLightest from 'components/UI/BackgroundLightest' +import { BackgroundLightest } from 'components/UI' /** * @render react diff --git a/app/components/UI/TextArea.js b/app/components/UI/TextArea.js index 4b1686d7..1bdba2e8 100644 --- a/app/components/UI/TextArea.js +++ b/app/components/UI/TextArea.js @@ -3,7 +3,7 @@ import { asField } from 'informed' import { TextArea as Base } from 'styled-system-html' import { withTheme } from 'styled-components' import { Flex } from 'rebass' -import FormFieldMessage from 'components/UI/FormFieldMessage' +import { FormFieldMessage } from 'components/UI' /** * @render react diff --git a/app/components/UI/index.js b/app/components/UI/index.js new file mode 100644 index 00000000..5184347e --- /dev/null +++ b/app/components/UI/index.js @@ -0,0 +1,26 @@ +export BackgroundDark from './BackgroundDark' +export BackgroundLight from './BackgroundLight' +export BackgroundLightest from './BackgroundLightest' +export Bar from './Bar' +export Button from './Button' +export Dropdown from './Dropdown' +export FormFieldMessage from './FormFieldMessage' +export GlobalStyle from './GlobalStyle' +export Heading from './Heading' +export Input from './Input' +export Label from './Label' +export MainContent from './MainContent' +export Menu from './Menu' +export MenuItem from './MenuItem' +export MenuItemGroup from './MenuItemGroup' +export Modal from './Modal' +export Notification from './Notification' +export Page from './Page' +export Range from './Range' +export Select from './Select' +export Sidebar from './Sidebar' +export Spinner from './Spinner' +export Text from './Text' +export TextArea from './TextArea' +export Titlebar from './Titlebar' +export Toggle from './Toggle' diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 37ad0d8f..f5aa3402 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -6,10 +6,7 @@ import { Box, Flex } from 'rebass' import { btc, blockExplorer } from 'lib/utils' import Value from 'components/Value' import Settings from 'components/Settings' -import Button from 'components/UI/Button' -import Text from 'components/UI/Text' -import Dropdown from 'components/UI/Dropdown' - +import { Button, Dropdown, Text } from 'components/UI' import CheckAnimated from 'components/Icon/CheckAnimated' import ZapLogo from 'components/Icon/ZapLogo' import ZapLogoBlack from 'components/Icon/ZapLogoBlack' diff --git a/app/containers/Root.js b/app/containers/Root.js index 3429d789..f33fad03 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -10,12 +10,9 @@ import { loadingSelectors, setLoading, setMounted } from 'reducers/loading' import { initCurrency, initLocale } from 'reducers/locale' import { initTheme, themeSelectors } from 'reducers/theme' -import Page from 'components/UI/Page' -import Titlebar from 'components/UI/Titlebar' +import { Page, Titlebar, GlobalStyle } from 'components/UI' import GlobalError from 'components/GlobalError' -import GlobalStyle from 'components/UI/GlobalStyle' import withLoading from 'components/withLoading' - import Onboarding from './Onboarding' import Syncing from './Syncing' import App from './App' diff --git a/stories/components/background.stories.js b/stories/components/background.stories.js index edc940a9..283e03dd 100644 --- a/stories/components/background.stories.js +++ b/stories/components/background.stories.js @@ -1,8 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import BackgroundDark from 'components/UI/BackgroundDark' -import BackgroundLight from 'components/UI/BackgroundLight' -import BackgroundLightest from 'components/UI/BackgroundLightest' +import { BackgroundDark, BackgroundLight, BackgroundLightest } from 'components/UI' storiesOf('Components.Background', module) .add('dark', () => ( diff --git a/stories/components/bar.stories.js b/stories/components/bar.stories.js index 07f240d9..2563d543 100644 --- a/stories/components/bar.stories.js +++ b/stories/components/bar.stories.js @@ -1,5 +1,5 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import Bar from 'components/UI/Bar' +import { Bar } from 'components/UI' storiesOf('Components.Bar', module).add('bar', () => ) diff --git a/stories/components/button.stories.js b/stories/components/button.stories.js index e2d4ba8d..01b262e5 100644 --- a/stories/components/button.stories.js +++ b/stories/components/button.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' -import Button from 'components/UI/Button' +import { Button } from 'components/UI' import SystemNavPrevious from 'components/Icon/SystemNavPrevious' import SystemNavNext from 'components/Icon/SystemNavNext' diff --git a/stories/components/dropdown.stories.js b/stories/components/dropdown.stories.js index e30c0ce9..86b76f27 100644 --- a/stories/components/dropdown.stories.js +++ b/stories/components/dropdown.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { StateDecorator, Store } from '@sambego/storybook-state' -import Dropdown from 'components/UI/Dropdown' +import { Dropdown } from 'components/UI' const store = new Store({ crypto: 'btc', diff --git a/stories/components/form.stories.js b/stories/components/form.stories.js index 325299dd..a401d77f 100644 --- a/stories/components/form.stories.js +++ b/stories/components/form.stories.js @@ -2,16 +2,18 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Box } from 'rebass' -import Page from 'components/UI/Page' -import MainContent from 'components/UI/MainContent' -import Input from 'components/UI/Input' -import Label from 'components/UI/Label' -import Select from 'components/UI/Select' -import TextArea from 'components/UI/TextArea' -import Button from 'components/UI/Button' -import Toggle from 'components/UI/Toggle' -import Range from 'components/UI/Range' import { Form } from 'informed' +import { + Page, + MainContent, + Input, + Label, + Select, + TextArea, + Button, + Toggle, + Range +} from 'components/UI' const validate = value => { return !value || value.length < 5 ? 'Field must be at least five characters' : null diff --git a/stories/components/menu.stories.js b/stories/components/menu.stories.js index b9eb6f62..4ff08eb1 100644 --- a/stories/components/menu.stories.js +++ b/stories/components/menu.stories.js @@ -1,9 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' -import Menu from 'components/UI/Menu' -import MenuItem from 'components/UI/MenuItem' -import MenuItemGroup from 'components/UI/MenuItemGroup' +import { Menu, MenuItem, MenuItemGroup } from 'components/UI' storiesOf('Components.Menu', module).add('Menu', () => ( diff --git a/stories/components/modal.stories.js b/stories/components/modal.stories.js index f190eeeb..743d0a76 100644 --- a/stories/components/modal.stories.js +++ b/stories/components/modal.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import Modal from 'components/UI/Modal' +import { Modal } from 'components/UI' storiesOf('Components.Modal', module).add('Modal', () => ( diff --git a/stories/components/notification.stories.js b/stories/components/notification.stories.js index e8e9cebe..4c6f7a04 100644 --- a/stories/components/notification.stories.js +++ b/stories/components/notification.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import Notification from 'components/UI/Notification' +import { Notification } from 'components/UI' storiesOf('Components.Notification', module) .add('Success', () => Success message) diff --git a/stories/components/page-elements.stories.js b/stories/components/page-elements.stories.js index e82b1c78..e7b4fb58 100644 --- a/stories/components/page-elements.stories.js +++ b/stories/components/page-elements.stories.js @@ -1,8 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import Page from 'components/UI/Page' -import MainContent from 'components/UI/MainContent' -import Sidebar from 'components/UI/Sidebar' +import { Page, MainContent, Sidebar } from 'components/UI' storiesOf('Components.Layouts', module) .add('MainContent', () => Main content) diff --git a/stories/components/spinner.stories.js b/stories/components/spinner.stories.js index 64934702..c3a99846 100644 --- a/stories/components/spinner.stories.js +++ b/stories/components/spinner.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import Spinner from 'components/UI/Spinner' +import { Spinner } from 'components/UI' storiesOf('Components.Spinners', module).add('circle', () => ) diff --git a/stories/components/typography.stories.js b/stories/components/typography.stories.js index c950d9e3..275b57d9 100644 --- a/stories/components/typography.stories.js +++ b/stories/components/typography.stories.js @@ -1,7 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import Heading from 'components/UI/Heading' -import Text from 'components/UI/Text' +import { Heading, Text } from 'components/UI' storiesOf('Components.Typography', module) .add('heading', () => ( diff --git a/test/unit/components/UI/BackgroundDark.spec.js b/test/unit/components/UI/BackgroundDark.spec.js index e7e155d2..fbc82e96 100644 --- a/test/unit/components/UI/BackgroundDark.spec.js +++ b/test/unit/components/UI/BackgroundDark.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import BackgroundDark from 'components/UI/BackgroundDark' import renderer from 'react-test-renderer' +import { BackgroundDark } from 'components/UI' describe('component.UI.BackgroundDark', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/BackgroundLight.spec.js b/test/unit/components/UI/BackgroundLight.spec.js index 0fa8912f..02d54478 100644 --- a/test/unit/components/UI/BackgroundLight.spec.js +++ b/test/unit/components/UI/BackgroundLight.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import BackgroundLight from 'components/UI/BackgroundLight' import renderer from 'react-test-renderer' +import { BackgroundLight } from 'components/UI' describe('component.UI.BackgroundLight', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/BackgroundLightest.spec.js b/test/unit/components/UI/BackgroundLightest.spec.js index 8a02aa65..05cd111b 100644 --- a/test/unit/components/UI/BackgroundLightest.spec.js +++ b/test/unit/components/UI/BackgroundLightest.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import BackgroundLightest from 'components/UI/BackgroundLightest' import renderer from 'react-test-renderer' +import { BackgroundLightest } from 'components/UI' describe('component.UI.BackgroundLightest', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Bar.spec.js b/test/unit/components/UI/Bar.spec.js index 41b35bfd..acd4a6a2 100644 --- a/test/unit/components/UI/Bar.spec.js +++ b/test/unit/components/UI/Bar.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import Bar from 'components/UI/Bar' import renderer from 'react-test-renderer' +import { Bar } from 'components/UI' describe('component.UI.Bar', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Button.spec.js b/test/unit/components/UI/Button.spec.js index feac8b98..acb5ef7b 100644 --- a/test/unit/components/UI/Button.spec.js +++ b/test/unit/components/UI/Button.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import Button from 'components/UI/Button' import renderer from 'react-test-renderer' +import { Button } from 'components/UI' describe('component.UI.Button', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Dropdown.spec.js b/test/unit/components/UI/Dropdown.spec.js index 00acac78..9cdce999 100644 --- a/test/unit/components/UI/Dropdown.spec.js +++ b/test/unit/components/UI/Dropdown.spec.js @@ -1,5 +1,5 @@ import React from 'react' -import Dropdown from 'components/UI/Dropdown' +import { Dropdown } from 'components/UI' import renderer from 'react-test-renderer' import { dark } from 'themes' diff --git a/test/unit/components/UI/Heading.spec.js b/test/unit/components/UI/Heading.spec.js index 6366182c..bfa14b14 100644 --- a/test/unit/components/UI/Heading.spec.js +++ b/test/unit/components/UI/Heading.spec.js @@ -1,8 +1,8 @@ import React from 'react' -import Heading from 'components/UI/Heading' import renderer from 'react-test-renderer' import { configure, mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' +import { Heading } from 'components/UI' configure({ adapter: new Adapter() }) diff --git a/test/unit/components/UI/Input.spec.js b/test/unit/components/UI/Input.spec.js index 34eea09e..65e4e37a 100644 --- a/test/unit/components/UI/Input.spec.js +++ b/test/unit/components/UI/Input.spec.js @@ -1,9 +1,9 @@ import React from 'react' import { Form } from 'informed' -import Input from 'components/UI/Input' import renderer from 'react-test-renderer' import { dark } from 'themes' import { ThemeProvider } from 'styled-components' +import { Input } from 'components/UI' describe('component.UI.Input', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/MainContent.spec.js b/test/unit/components/UI/MainContent.spec.js index fabe7fad..050eca00 100644 --- a/test/unit/components/UI/MainContent.spec.js +++ b/test/unit/components/UI/MainContent.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import MainContent from 'components/UI/MainContent' import renderer from 'react-test-renderer' +import { MainContent } from 'components/UI' describe('component.UI.MainContent', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Menu.spec.js b/test/unit/components/UI/Menu.spec.js index 2a184948..66572fd5 100644 --- a/test/unit/components/UI/Menu.spec.js +++ b/test/unit/components/UI/Menu.spec.js @@ -1,10 +1,8 @@ import React from 'react' -import Menu from 'components/UI/Menu' -import MenuItem from 'components/UI/MenuItem' -import MenuItemGroup from 'components/UI/MenuItemGroup' import renderer from 'react-test-renderer' import { dark } from 'themes' import { ThemeProvider } from 'styled-components' +import { Menu, MenuItem, MenuItemGroup } from 'components/UI' describe('component.UI.Menu', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Modal.spec.js b/test/unit/components/UI/Modal.spec.js index c23efb7a..10cd86d7 100644 --- a/test/unit/components/UI/Modal.spec.js +++ b/test/unit/components/UI/Modal.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import Modal from 'components/UI/Modal' import renderer from 'react-test-renderer' +import { Modal } from 'components/UI' describe('component.UI.Modal', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Notification.spec.js b/test/unit/components/UI/Notification.spec.js index 117f1b51..dbd4442a 100644 --- a/test/unit/components/UI/Notification.spec.js +++ b/test/unit/components/UI/Notification.spec.js @@ -1,12 +1,11 @@ import React from 'react' -import Notification from 'components/UI/Notification' import renderer from 'react-test-renderer' import { configure, shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import SystemSuccess from 'components/Icon/SystemSuccess' import SystemWarning from 'components/Icon/SystemWarning' import SystemError from 'components/Icon/SystemError' -import Spinner from 'components/UI/Spinner' +import { Notification, Spinner } from 'components/UI' configure({ adapter: new Adapter() }) diff --git a/test/unit/components/UI/Page.spec.js b/test/unit/components/UI/Page.spec.js index 8fdf6afb..57b172f9 100644 --- a/test/unit/components/UI/Page.spec.js +++ b/test/unit/components/UI/Page.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import Page from 'components/UI/Page' import renderer from 'react-test-renderer' +import { Page } from 'components/UI' describe('component.UI.Page', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Range.spec.js b/test/unit/components/UI/Range.spec.js index 64597330..b55fde81 100644 --- a/test/unit/components/UI/Range.spec.js +++ b/test/unit/components/UI/Range.spec.js @@ -1,9 +1,9 @@ import React from 'react' import { Form } from 'informed' -import Range from 'components/UI/Range' import renderer from 'react-test-renderer' import { dark } from 'themes' import { ThemeProvider } from 'styled-components' +import { Range } from 'components/UI' describe('component.UI.Range', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Select.spec.js b/test/unit/components/UI/Select.spec.js index 9d0120ab..7ad8e6c5 100644 --- a/test/unit/components/UI/Select.spec.js +++ b/test/unit/components/UI/Select.spec.js @@ -1,9 +1,9 @@ import React from 'react' import { Form } from 'informed' -import Select from 'components/UI/Select' import renderer from 'react-test-renderer' import { dark } from 'themes' import { ThemeProvider } from 'styled-components' +import { Select } from 'components/UI' describe('component.UI.Toggle', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Sidebar.spec.js b/test/unit/components/UI/Sidebar.spec.js index fe524267..d063280c 100644 --- a/test/unit/components/UI/Sidebar.spec.js +++ b/test/unit/components/UI/Sidebar.spec.js @@ -1,8 +1,8 @@ import React from 'react' -import Sidebar from 'components/UI/Sidebar' import renderer from 'react-test-renderer' import { configure, mount } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' +import { Sidebar } from 'components/UI' configure({ adapter: new Adapter() }) diff --git a/test/unit/components/UI/Spinner.spec.js b/test/unit/components/UI/Spinner.spec.js index 8b7c28ba..2a51ed00 100644 --- a/test/unit/components/UI/Spinner.spec.js +++ b/test/unit/components/UI/Spinner.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import Spinner from 'components/UI/Spinner' import renderer from 'react-test-renderer' +import { Spinner } from 'components/UI' describe('component.UI.Spinner', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Text.spec.js b/test/unit/components/UI/Text.spec.js index b2ed09c8..8f79cf5c 100644 --- a/test/unit/components/UI/Text.spec.js +++ b/test/unit/components/UI/Text.spec.js @@ -1,6 +1,6 @@ import React from 'react' -import Text from 'components/UI/Text' import renderer from 'react-test-renderer' +import { Text } from 'components/UI' describe('component.UI.Text', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/TextArea.spec.js b/test/unit/components/UI/TextArea.spec.js index f21f095d..e41ad29b 100644 --- a/test/unit/components/UI/TextArea.spec.js +++ b/test/unit/components/UI/TextArea.spec.js @@ -1,9 +1,9 @@ import React from 'react' import { Form } from 'informed' -import Input from 'components/UI/Input' import renderer from 'react-test-renderer' import { dark } from 'themes' import { ThemeProvider } from 'styled-components' +import { Input } from 'components/UI' describe('component.UI.Input', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/Toggle.spec.js b/test/unit/components/UI/Toggle.spec.js index a8e1143c..bf446236 100644 --- a/test/unit/components/UI/Toggle.spec.js +++ b/test/unit/components/UI/Toggle.spec.js @@ -1,9 +1,9 @@ import React from 'react' import { Form } from 'informed' -import Toggle from 'components/UI/Toggle' import renderer from 'react-test-renderer' import { dark } from 'themes' import { ThemeProvider } from 'styled-components' +import { Toggle } from 'components/UI' describe('component.UI.Toggle', () => { it('should render correctly', () => { diff --git a/test/unit/components/UI/__snapshots__/Input.spec.js.snap b/test/unit/components/UI/__snapshots__/Input.spec.js.snap index 86784e7a..630d79e5 100644 --- a/test/unit/components/UI/__snapshots__/Input.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Input.spec.js.snap @@ -1,6 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`component.UI.Input should render correctly 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .c1 { padding: 16px; width: 100%; @@ -20,16 +30,6 @@ exports[`component.UI.Input should render correctly 1`] = ` border: 1px solid #fd9800; } -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -
Date: Sat, 20 Oct 2018 11:44:23 +0200 Subject: [PATCH 2/3] style: minor style fixes --- app/components/UI/GlobalStyle.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/UI/GlobalStyle.js b/app/components/UI/GlobalStyle.js index 1e67fdd4..e38da917 100644 --- a/app/components/UI/GlobalStyle.js +++ b/app/components/UI/GlobalStyle.js @@ -9,7 +9,6 @@ const GlobalStyle = createGlobalStyle` } body { position: relative; - box-sizing: border-box; overflow-y: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); From e64314ca972f13a0780ebf932b6de5d747d80559 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Mon, 8 Oct 2018 13:34:50 +0200 Subject: [PATCH 3/3] feat(ui): add LightningInvoiceInput component --- .storybook/config.js | 2 +- app/components/UI/Input.js | 107 +++++++++++++----- app/components/UI/Label.js | 24 +++- app/components/UI/LightningInvoiceInput.js | 71 ++++++++++++ app/components/UI/TextArea.js | 97 ++++++++++++---- app/components/UI/index.js | 1 + app/lib/utils/crypto.js | 73 ++++++++++++ package.json | 1 - stories/components/form.stories.js | 74 +++++++++++- .../UI/LightningInvoiceInput.spec.js | 21 ++++ .../UI/__snapshots__/Input.spec.js.snap | 25 ++-- .../LightningInvoiceInput.spec.js.snap | 60 ++++++++++ .../UI/__snapshots__/Select.spec.js.snap | 24 ++-- .../UI/__snapshots__/TextArea.spec.js.snap | 25 ++-- test/unit/utils/crypto.spec.js | 100 ++++++++++++++++ yarn.lock | 47 ++------ 16 files changed, 618 insertions(+), 134 deletions(-) create mode 100644 app/components/UI/LightningInvoiceInput.js create mode 100644 app/lib/utils/crypto.js create mode 100644 test/unit/components/UI/LightningInvoiceInput.spec.js create mode 100644 test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap create mode 100644 test/unit/utils/crypto.spec.js diff --git a/.storybook/config.js b/.storybook/config.js index 70210600..8f23abf6 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -12,7 +12,7 @@ import { setIntlConfig, withIntl } from 'storybook-addon-intl' import StoryRouter from 'storybook-react-router' import { dark, light } from 'themes' import { getDefaultLocale, locales } from 'lib/i18n' -import { BackgroundDark GlobalStyle } from 'components/UI' +import { BackgroundDark, GlobalStyle } from 'components/UI' // Register supported locales. import '../app/lib/i18n/locale' diff --git a/app/components/UI/Input.js b/app/components/UI/Input.js index 1aad907a..8321e282 100644 --- a/app/components/UI/Input.js +++ b/app/components/UI/Input.js @@ -1,25 +1,55 @@ import React from 'react' import { asField } from 'informed' -import { Input as Base } from 'styled-system-html' import { withTheme } from 'styled-components' +import system from '@rebass/components' +import { styles } from 'styled-system' import { Flex } from 'rebass' import { FormFieldMessage } from 'components/UI' +// Create an html input element that accepts all style props from styled-system. +const SystemInput = system( + { + as: 'input', + border: 1, + borderColor: 'gray', + borderRadius: 5, + bg: 'transparent', + color: 'primaryText', + fontFamily: 'sans', + fontSize: 'm', + fontWeight: 'light', + p: 3, + width: 1 + }, + ...Object.keys(styles) +) + /** * @render react * @name Input * @example * */ -class Input extends React.PureComponent { +class Input extends React.Component { static displayName = 'Input' + state = { + hasFocus: false + } + + constructor(props) { + super(props) + const { forwardedRef } = this.props + this.inputRef = forwardedRef || React.createRef() + } + render() { const { + css, onChange, onBlur, + onFocus, initialValue, - field, forwardedRef, theme, fieldApi, @@ -27,42 +57,40 @@ class Input extends React.PureComponent { justifyContent, ...rest } = this.props + const { readOnly } = this.props + const { hasFocus } = this.state const { setValue, setTouched } = fieldApi const { value } = fieldState + const isValid = value && !fieldState.error + // Calculate the border color based on the current field state. let borderColor - - if (fieldState.touched) { - if (fieldState.error) { - borderColor = theme.colors.superRed - } else if (value && !fieldState.error) { - borderColor = theme.colors.superGreen - } + if (readOnly) { + borderColor = theme.colors.gray + } else if (fieldState.error) { + borderColor = theme.colors.superRed + } else if (value && !fieldState.error) { + borderColor = theme.colors.superGreen } return ( - { setValue(e.target.value) if (onChange) { @@ -71,14 +99,33 @@ class Input extends React.PureComponent { }} onBlur={e => { setTouched() + // Make the state aware that the element is now focused. + const newHasFocus = document.activeElement === this.inputRef.current + if (hasFocus !== newHasFocus) { + this.setState({ hasFocus: newHasFocus }) + } if (onBlur) { onBlur(e) } }} + onFocus={e => { + // Make the state aware that the element is no longer focused. + const newHasFocus = document.activeElement === this.inputRef.current + if (hasFocus !== newHasFocus) { + this.setState({ hasFocus: newHasFocus }) + } + if (onFocus) { + onFocus(e) + } + }} error={fieldState.error} /> {fieldState.error && ( - + {fieldState.error} )} diff --git a/app/components/UI/Label.js b/app/components/UI/Label.js index 33f8c999..a375a24e 100644 --- a/app/components/UI/Label.js +++ b/app/components/UI/Label.js @@ -1,5 +1,20 @@ import React from 'react' -import { Label as Base } from 'styled-system-html' +import system from '@rebass/components' +import { styles } from 'styled-system' + +// Create an html input element that accepts all style props from styled-system. +const SystemLabel = system( + { + as: 'label', + display: 'block', + color: 'primaryText', + fontSize: 'm', + fontWeight: 'normal', + width: 1, + mb: 1 + }, + ...Object.keys(styles) +) /** * @render react @@ -7,13 +22,12 @@ import { Label as Base } from 'styled-system-html' * @example *