diff --git a/.eslintrc.json b/.eslintrc.json index 275ff33d..38d5154f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -34,6 +34,7 @@ "max-len": ["error", { "code": 120 }], "no-underscore-dangle": "off", "no-use-before-define": "off", + "import/prefer-default-export": "off", "react/default-props-match-prop-types": "off", "react/destructuring-assignment": "off", "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], diff --git a/.flowconfig b/.flowconfig index 370aa671..779cb5ea 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,4 +1,5 @@ [ignore] +/types/.* [include] diff --git a/src/common/EditContainer.js b/src/common/EditContainer.js index 09bbf2e7..028e6565 100644 --- a/src/common/EditContainer.js +++ b/src/common/EditContainer.js @@ -55,9 +55,11 @@ const useEditContainer = (WrappedComponent: ComponentType) => ( componentDidMount() { if (this.props.onInitialize && this.props.item && this.props.item.id) { this.setState({ loading: true }, () => { - this.props - .onInitialize(this.props.item.id) - .then((item) => this.setState({ item, originalItem: item, loading: false })); + if (this.props.onInitialize && this.props.item) { + this.props + .onInitialize(this.props.item.id) + .then((item) => this.setState({ item, originalItem: item, loading: false })); + } }); } } @@ -427,6 +429,7 @@ export default useEditContainer; export type EditContainerProps = { children: Element, + dirty: boolean, errors: Array, isError: (property: string) => boolean, isRequired: (property: string) => boolean, diff --git a/src/common/Keyboard.js b/src/common/Keyboard.js index c53e6daa..31a84269 100644 --- a/src/common/Keyboard.js +++ b/src/common/Keyboard.js @@ -24,9 +24,9 @@ const KeyboardSimple = (props: Props) => { const onKeyPress = (value) => { const isCaps = value === KEY_CAPS_LOCK || value === KEY_SHIFT; - if (isCaps && keyboardRef.current.options.layoutName === LAYOUT_SHIFT) { + if (isCaps && keyboardRef.current && keyboardRef.current.options.layoutName === LAYOUT_SHIFT) { keyboardRef.current.setOptions({ layoutName: LAYOUT_DEFAULT }); - } else if (isCaps && keyboardRef.current.options.layoutName !== LAYOUT_SHIFT) { + } else if (isCaps && keyboardRef.current && keyboardRef.current.options.layoutName !== LAYOUT_SHIFT) { keyboardRef.current.setOptions({ layoutName: LAYOUT_SHIFT }); } }; @@ -40,7 +40,9 @@ const KeyboardSimple = (props: Props) => { // Sets the keyboard value when the value property changes. useEffect(() => { - keyboardRef.current.setInput(props.value); + if (keyboardRef.current) { + keyboardRef.current.setInput(props.value); + } }, [props.value]); return
; diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js index af71c0fe..2d924742 100644 --- a/src/i18n/i18n.js +++ b/src/i18n/i18n.js @@ -19,6 +19,6 @@ i18n escapeValue: false, }, resources -}); + }); -export default i18n; \ No newline at end of file +export default i18n; diff --git a/src/index.js b/src/index.js index 1d6600eb..53c271bb 100644 --- a/src/index.js +++ b/src/index.js @@ -25,7 +25,7 @@ export { default as Draggable } from './semantic-ui/Draggable'; export { default as DropdownButton } from './semantic-ui/DropdownButton'; export { default as DropdownMenu } from './semantic-ui/DropdownMenu'; export { default as EditModal } from './semantic-ui/EditModal'; -export { default as EditPage, useEditPage } from './semantic-ui/EditPage'; +export { default as EditPage } from './semantic-ui/EditPage'; export { default as EmbeddedList } from './semantic-ui/EmbeddedList'; export { default as FileInputButton } from './semantic-ui/FileInputButton'; export { default as FileUpload } from './semantic-ui/FileUpload'; diff --git a/src/semantic-ui/AccordionDataList.js b/src/semantic-ui/AccordionDataList.js index 6daee807..f6fa1dff 100644 --- a/src/semantic-ui/AccordionDataList.js +++ b/src/semantic-ui/AccordionDataList.js @@ -18,7 +18,7 @@ type Sort = { key: any, value: any, text: string, - direction:? string + direction?: string }; type Props = ListProps & { diff --git a/src/semantic-ui/AccordionList.js b/src/semantic-ui/AccordionList.js index c35fdc2b..23b394a8 100644 --- a/src/semantic-ui/AccordionList.js +++ b/src/semantic-ui/AccordionList.js @@ -331,7 +331,7 @@ class AccordionList extends Component { return (
+ ); + } + + /** + * Renders the wrapped component. + * + * @returns {*} + */ + renderComponent() { + const WrappedComponent = this.props.component; + + return ( + + ); + } + + /** + * Renders the loading indicator. + * + * @returns {null|*} + */ + renderLoading() { + if (!(this.props.showLoading && this.props.loading)) { + return null; } - /** - * Renders the loading indicator. - * - * @returns {null|*} - */ - renderLoading() { - if (!(this.props.showLoading && this.props.loading)) { - return null; - } - - return ( - - - - ); + return ( + + + + ); + } + + /** + * Renders the menu (if present). + * + * @returns {null|*} + */ + renderMenu() { + if (!this.props.menu) { + return null; } - /** - * Renders the menu (if present). - * - * @returns {null|*} - */ - renderMenu() { - if (!this.props.menu) { - return null; - } - - return ( - + { this.props.menu && _.map(this.props.menu.items, (item) => ( + this.setState({ currentTab: item.key })} + /> + ))} + - { _.map(this.props.menu.items, (item) => ( - this.setState({ currentTab: item.key })} + + - ))} - - - - - - - - ); + + + + + ); + } + + /** + * Renders the toaster component. + * + * @returns {null|*} + */ + renderToaster() { + if (!this.state.showToaster) { + return null; } - /** - * Renders the toaster component. - * - * @returns {null|*} - */ - renderToaster() { - if (!this.state.showToaster) { - return null; - } - - if (!(this.props.errors && this.props.errors.length)) { - return null; - } - - return ( - this.setState({ showToaster: false })} - timeout={0} - type={Toaster.MessageTypes.negative} - > - - - - ); + if (!(this.props.errors && this.props.errors.length)) { + return null; } + + return ( + this.setState({ showToaster: false })} + timeout={0} + type={Toaster.MessageTypes.negative} + > + + + + ); } -); +} EditPage.defaultProps = { showLoading: true }; +export default useEditContainer(EditPage); + export type EditPageProps = EditContainerProps & { currentTab: string }; diff --git a/src/semantic-ui/EditProvider.css b/src/semantic-ui/EditProvider.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/semantic-ui/EmbeddedList.js b/src/semantic-ui/EmbeddedList.js index 188205cd..6e9e5310 100644 --- a/src/semantic-ui/EmbeddedList.js +++ b/src/semantic-ui/EmbeddedList.js @@ -166,6 +166,7 @@ class EmbeddedList extends Component { render() { return ( }; +type FileEvent = { + dataTransfer: HTMLInputElement, + preventDefault: () => void, + target: HTMLInputElement +}; + class FileUpload extends Component { fileInput: any; filePattern: any; @@ -26,7 +32,7 @@ class FileUpload extends Component { * * @param props */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -49,7 +55,7 @@ class FileUpload extends Component { * * @param e */ - onDropFiles(e) { + onDropFiles(e: FileEvent) { e.preventDefault(); const files = this.toArray(e.dataTransfer.files); const validFiles = this.validate(files); @@ -63,7 +69,7 @@ class FileUpload extends Component { * * @param e */ - onFilesAdded(e) { + onFilesAdded(e: FileEvent) { e.preventDefault(); const files = this.toArray(e.target.files); const validFiles = this.validate(files); @@ -128,7 +134,7 @@ class FileUpload extends Component { * * @returns {[]} */ - toArray(fileList) { + toArray(fileList: any) { const array = []; for (let i = 0; i < fileList.length; i += 1) { @@ -145,7 +151,7 @@ class FileUpload extends Component { * * @returns {[]|*} */ - validate(files) { + validate(files: Array) { if (!this.props.maxSize && !this.props.fileTypes) { return files; } diff --git a/src/semantic-ui/GoogleMap.js b/src/semantic-ui/GoogleMap.js index 2b0c95fa..aa905a42 100644 --- a/src/semantic-ui/GoogleMap.js +++ b/src/semantic-ui/GoogleMap.js @@ -53,6 +53,7 @@ const GoogleMap = (props: Props) => { // Call the onDragEnd prop, passing the new location. const onDragEnd = ({ latLng }) => { if (props.onDragEnd) { + // $FlowFixMe - Not actually fixing, we're checking for presence here. props.onDragEnd({ lat: latLng.lat(), lng: latLng.lng() diff --git a/src/semantic-ui/GooglePlacesSearch.js b/src/semantic-ui/GooglePlacesSearch.js index d3ca99c5..96dd336a 100644 --- a/src/semantic-ui/GooglePlacesSearch.js +++ b/src/semantic-ui/GooglePlacesSearch.js @@ -1,11 +1,11 @@ // @flow import { LoadScript, StandaloneSearchBox } from '@react-google-maps/api'; -import React, { Component, useCallback, useState } from 'react'; +import React, { useCallback, useState, type Element } from 'react'; import _ from 'underscore'; type Props = { - children: Component<{}>, + children: Element, googleMapsApiKey: string, onLocationSelection: ({ lat: number, lng: number }) => void } diff --git a/src/semantic-ui/ItemsToggle.js b/src/semantic-ui/ItemsToggle.js index 422424d5..2a65052b 100644 --- a/src/semantic-ui/ItemsToggle.js +++ b/src/semantic-ui/ItemsToggle.js @@ -61,7 +61,7 @@ const useItemsToggle = (WrappedComponent: ComponentType) => ( /** * Renders the sort value for the current option. * - * @returns {NodePath | void | T | T | number | undefined | *} + * @returns {*} */ getSortValue() { const sort = _.find(this.props.sort, { value: this.props.sortColumn }); diff --git a/src/semantic-ui/KeyboardField.js b/src/semantic-ui/KeyboardField.js index 6527bc20..71d9ce52 100644 --- a/src/semantic-ui/KeyboardField.js +++ b/src/semantic-ui/KeyboardField.js @@ -1,6 +1,6 @@ // @flow -import React, { Component } from 'react'; +import React, { Component, type Node } from 'react'; import { Form, Segment, Transition } from 'semantic-ui-react'; import Keyboard from '../common/Keyboard'; import i18n from '../i18n/i18n'; @@ -9,16 +9,15 @@ import './KeyboardField.css'; type Props = { autoFocus?: boolean, - children: Component, + children: Node, className?: string, error?: boolean, id?: string, label: string, layout: any, name: string, - onChange: (e: Event, { value: string }) => void, + onChange: (e: ?Event, { value: string }) => void, required: boolean, - t: (key: string) => string, value: string, visible: boolean }; @@ -28,12 +27,14 @@ type State = { }; class KeyboardField extends Component { + static defaultProps: any; + /** * Constructs a new KeyboardField component. * * @param props */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -46,7 +47,7 @@ class KeyboardField extends Component { * * @param prevProps */ - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps: Props) { if (prevProps.visible && !this.props.visible) { this.setState({ showKeyboard: false }); } @@ -58,7 +59,7 @@ class KeyboardField extends Component { * @param e * @param value */ - onInputChange(e, value) { + onInputChange(e: Event, value: any) { this.props.onChange(e, value); } @@ -67,7 +68,7 @@ class KeyboardField extends Component { * * @param value */ - onKeyboardChange(value) { + onKeyboardChange(value: any) { this.props.onChange(null, { value }); } diff --git a/src/semantic-ui/LazyDocument.js b/src/semantic-ui/LazyDocument.js index 07af12f4..2f54113c 100644 --- a/src/semantic-ui/LazyDocument.js +++ b/src/semantic-ui/LazyDocument.js @@ -1,6 +1,6 @@ // @flow -import React, { useState } from 'react'; +import React, { useState, type Node } from 'react'; import { Dimmer, Icon, @@ -15,6 +15,7 @@ import DownloadButton from './DownloadButton'; import './LazyDocument.css'; type Props = { + children?: Node, dimmable?: boolean, duration?: number, image?: any, @@ -88,7 +89,7 @@ const LazyDocument = (props: Props) => { content={i18n.t('LazyDocument.buttons.download')} icon='cloud download' primary - url={props.src} + url={props.src || ''} /> )} { props.children } diff --git a/src/semantic-ui/LazyImage.js b/src/semantic-ui/LazyImage.js index c8752f34..1a85c954 100644 --- a/src/semantic-ui/LazyImage.js +++ b/src/semantic-ui/LazyImage.js @@ -101,7 +101,7 @@ const LazyImage = (props: Props) => { setModal(false)} open={modal} size='large' diff --git a/src/semantic-ui/List.js b/src/semantic-ui/List.js index 477d313d..51252cfd 100644 --- a/src/semantic-ui/List.js +++ b/src/semantic-ui/List.js @@ -93,6 +93,7 @@ type State = { modalDeleteAll: boolean, modalEdit: boolean, modalFilter: boolean, + selectedItem: any }; const BUTTON_KEY_ADD = 'add'; @@ -146,7 +147,8 @@ const useList = (WrappedComponent: ComponentType) => ( modalDelete: false, modalDeleteAll: false, modalEdit: false, - modalFilter: false + modalFilter: false, + selectedItem: null }; } diff --git a/src/semantic-ui/LoginModal.js b/src/semantic-ui/LoginModal.js index c61c9ed6..729efc94 100644 --- a/src/semantic-ui/LoginModal.js +++ b/src/semantic-ui/LoginModal.js @@ -1,6 +1,6 @@ // @flow -import React, { Component } from 'react'; +import React, { type Element } from 'react'; import { Button, Form, @@ -22,7 +22,7 @@ type Props = { onPasswordChange: () => void, onUsernameChange: () => void, open: boolean, - trigger: () => Component, + trigger?: () => Element, placeholder: string }; @@ -97,6 +97,6 @@ const LoginModal = (props: Props) => ( LoginModal.defaultProps = { placeholder: i18n.t('LoginModal.email') -} +}; export default LoginModal; diff --git a/src/semantic-ui/NestedAccordion.js b/src/semantic-ui/NestedAccordion.js index a93a4e6a..1c3d45c4 100644 --- a/src/semantic-ui/NestedAccordion.js +++ b/src/semantic-ui/NestedAccordion.js @@ -53,15 +53,14 @@ class NestedAccordion extends Component { if (prevProps.defaultActive !== this.props.defaultActive && this.props.defaultActive && this.props.defaultActive.length) { - if (this.props.multipleItemTypes - && !this.props.defaultActive.some(active => - typeof active !== 'object' || !_.has(active, 'id') || !_.has(active, 'type') - ) - ) { - this.setState({ activeItems: this.props.defaultActive }); - } else { - this.setState({ activeItems: _.map(this.props.defaultActive, (id) => ({ id })) }); - } + const isActive = this.props.defaultActive.some( + (active) => typeof active !== 'object' || !_.has(active, 'id') || !_.has(active, 'type') + ); + if (this.props.multipleItemTypes && !isActive) { + this.setState({ activeItems: this.props.defaultActive }); + } else { + this.setState({ activeItems: _.map(this.props.defaultActive, (id) => ({ id })) }); + } } } @@ -253,11 +252,11 @@ class NestedAccordion extends Component { this.setState((state) => ({ activeItems: this.isActive(item) ? _.filter(state.activeItems, (i) => { - if (this.props.multipleItemTypes && _.has(item, 'type') && _.has(i, 'type')) { - return i.id !== item.id || i.type !== item.type; - } - return i.id !== item.id; - }) + if (this.props.multipleItemTypes && _.has(item, 'type') && _.has(i, 'type')) { + return i.id !== item.id || i.type !== item.type; + } + return i.id !== item.id; + }) : [...state.activeItems, item] })); } diff --git a/src/semantic-ui/Selectize.js b/src/semantic-ui/Selectize.js index fc0f2abd..7e06801c 100644 --- a/src/semantic-ui/Selectize.js +++ b/src/semantic-ui/Selectize.js @@ -1,10 +1,11 @@ // @flow import React, { + useCallback, useEffect, useState, - type Component, - type Element, useCallback + type ComponentType, + type Element } from 'react'; import { Button, @@ -25,10 +26,10 @@ type Props = { centered?: boolean, collectionName: string, filters?: { - component: Component<{}>, + component: ComponentType, defaults: any, props: any, - onChange: (filter: any) => Promise + onChange?: (filter: any) => Promise }, modal?: { onSave: (item: any) => Promise diff --git a/src/semantic-ui/TagsList.js b/src/semantic-ui/TagsList.js index 3b0d8e51..5fcb9eef 100644 --- a/src/semantic-ui/TagsList.js +++ b/src/semantic-ui/TagsList.js @@ -12,7 +12,7 @@ type Props = { color: string } }, - onDelete: (tag: string) => void, + onDelete?: (tag: string) => void, tags: Array }; diff --git a/src/utils/Calendar.js b/src/utils/Calendar.js index f249b467..e6db6af3 100644 --- a/src/utils/Calendar.js +++ b/src/utils/Calendar.js @@ -119,7 +119,7 @@ class Calendar { * * @returns {*} */ - format(date: moment, format: number) { + format(date: moment, format: number = Calendar.DateFormats.gregorian) { return this.moment(date).format(Calendar.DateFormats[this.name][format]); } @@ -177,7 +177,6 @@ class Calendar { moment(date: ?any = null) { const m = date ? moment(date) : moment(); m.locale(this.locale); - return m; } diff --git a/src/utils/Timer.js b/src/utils/Timer.js index 8ea59a70..c6f0d25c 100644 --- a/src/utils/Timer.js +++ b/src/utils/Timer.js @@ -7,6 +7,8 @@ const DEFAULT_TIMEOUT = 500; * keydown/keyup events when we only want to perform an action after the user has finished typing. */ class Timer { + timeout: TimeoutID | null; + constructor() { this.timeout = null; } @@ -21,7 +23,7 @@ class Timer { /** * Sets the search timer. */ - setSearchTimer(onTimeout) { + setSearchTimer(onTimeout: () => void) { clearTimeout(this.timeout); this.timeout = setTimeout(onTimeout, DEFAULT_TIMEOUT); } diff --git a/stories/components/AddModal.js b/stories/components/AddModal.js index 56883cfa..03092320 100644 --- a/stories/components/AddModal.js +++ b/stories/components/AddModal.js @@ -1,7 +1,13 @@ -import React from 'react'; +// @flow + +import React, { type Node } from 'react'; import { Modal } from 'semantic-ui-react'; -const AddModal = (props) => ( +type Props = { + children: Node +}; + +const AddModal = (props: Props) => ( @@ -11,4 +17,4 @@ const AddModal = (props) => ( ); -export default AddModal; \ No newline at end of file +export default AddModal; diff --git a/stories/components/FilterModal.js b/stories/components/FilterModal.js index dbd6ce4f..7b111b7e 100644 --- a/stories/components/FilterModal.js +++ b/stories/components/FilterModal.js @@ -2,6 +2,7 @@ import React from 'react'; import { Form, Modal } from 'semantic-ui-react'; +import useEditContainer from '../../src/common/EditContainer'; import type { EditContainerProps } from '../../src'; type Props = EditContainerProps & { @@ -27,4 +28,4 @@ const FilterModal = (props: Props) => ( ); -export default FilterModal; +export default useEditContainer(FilterModal); diff --git a/stories/components/Welcome.js b/stories/components/Welcome.js index c3b47c89..0e2f6b1d 100644 --- a/stories/components/Welcome.js +++ b/stories/components/Welcome.js @@ -1,16 +1,35 @@ +// @flow + import React from 'react'; const Welcome = () => (

Welcome to Storybook

-

This library is designed to showcase the available components for building a React application. Components are organized by style package so that you can find components to fit the style of your project.

+

+ This library is designed to showcase the available components for building a React application. + Components are organized by style package so that you can find components to fit the style of your project. +

Addons

-

Storybook provides a variety of addons to aid in testing, inspection, and documentation. Each of the addons will display as a tab below the component preview. The addons used by this project include:

+

+ Storybook provides a variety of + <> + addons + <> + to aid + in testing, inspection, and documentation. Each of the addons will display as a tab below the component preview. + The addons used by this project include: +

    -
  • Actions: Used to capture mouse and keyboard events
    • -
  • Knobs: Allows the viewer to change props on the fly to view variations of the component
    • +
  • + Actions: + Used to capture mouse and keyboard events +
    • +
  • + Knobs: + Allows the viewer to change props on the fly to view variations of the component +
); -export default Welcome; \ No newline at end of file +export default Welcome; diff --git a/stories/components/Welcome.stories.js b/stories/components/Welcome.stories.js index eef38623..77d6781c 100644 --- a/stories/components/Welcome.stories.js +++ b/stories/components/Welcome.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import Welcome from './Welcome'; @@ -6,4 +8,4 @@ export default { component: Welcome, }; -export const Introduction = () => ; \ No newline at end of file +export const Introduction = () => ; diff --git a/stories/components/common/InfiniteScroll.stories.js b/stories/components/common/InfiniteScroll.stories.js index a2296c83..b8319452 100644 --- a/stories/components/common/InfiniteScroll.stories.js +++ b/stories/components/common/InfiniteScroll.stories.js @@ -36,8 +36,9 @@ export const Default = useDragDrop(() => { onBottomReached={() => setPage((prevPage) => prevPage + 1)} > - { _.map(items, (item) => ( + { _.map(items, (item, index) => ( { }); export const EmptyList = useDragDrop(() => { - const [items, setItems] = useState([]); - const [page, setPage] = useState(1); + const items = []; return ( setPage((prevPage) => prevPage + 1)} + onBottomReached={() => {}} > - { _.map(items, (item) => ( + { _.map(items, (item, index) => ( ( ); @@ -28,6 +29,7 @@ export const Arabic = () => ( ); @@ -35,6 +37,7 @@ export const Chinese = () => ( ); @@ -42,5 +45,6 @@ export const Japanese = () => ( ); diff --git a/stories/components/semantic-ui/AccordionDataList.stories.js b/stories/components/semantic-ui/AccordionDataList.stories.js index 73e64b93..a451a0c7 100644 --- a/stories/components/semantic-ui/AccordionDataList.stories.js +++ b/stories/components/semantic-ui/AccordionDataList.stories.js @@ -179,8 +179,6 @@ export const Selectable = () => ( export const SelectableControlled = () => { const [selected, setSelected] = useState([]); - console.log(selected); - return ( ( ); diff --git a/stories/components/semantic-ui/AssociatedDropdown.stories.js b/stories/components/semantic-ui/AssociatedDropdown.stories.js index 38b2b56b..bf6ca54f 100644 --- a/stories/components/semantic-ui/AssociatedDropdown.stories.js +++ b/stories/components/semantic-ui/AssociatedDropdown.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; diff --git a/stories/components/semantic-ui/BooleanIcon.stories.js b/stories/components/semantic-ui/BooleanIcon.stories.js index eff5d8d1..f378abdf 100644 --- a/stories/components/semantic-ui/BooleanIcon.stories.js +++ b/stories/components/semantic-ui/BooleanIcon.stories.js @@ -1,11 +1,13 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; -import { withKnobs, boolean } from "@storybook/addon-knobs"; -import BooleanIcon from '../../../src/semantic-ui/BooleanIcon.js'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; +import BooleanIcon from '../../../src/semantic-ui/BooleanIcon'; export default { title: 'Components/Semantic UI/BooleanIcon', decorators: [withA11y, withKnobs] }; -export const Default = () => ; \ No newline at end of file +export const Default = () => ; diff --git a/stories/components/semantic-ui/ColorButton.stories.js b/stories/components/semantic-ui/ColorButton.stories.js index d079bb4c..5bbbaec6 100644 --- a/stories/components/semantic-ui/ColorButton.stories.js +++ b/stories/components/semantic-ui/ColorButton.stories.js @@ -1,13 +1,15 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; -import { withKnobs, color, number } from "@storybook/addon-knobs"; +import { withKnobs, color, number } from '@storybook/addon-knobs'; import ColorButton from '../../../src/semantic-ui/ColorButton'; export default { title: 'Components/Semantic UI/ColorButton', decorators: [withA11y, withKnobs] -} +}; export const Default = () => ( ( onClick={action('click')} width={number('Width', 50)} /> -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/ColorPickerModal.stories.js b/stories/components/semantic-ui/ColorPickerModal.stories.js index 89a5fb49..352eb192 100644 --- a/stories/components/semantic-ui/ColorPickerModal.stories.js +++ b/stories/components/semantic-ui/ColorPickerModal.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; -import { withKnobs, boolean, color } from "@storybook/addon-knobs"; +import { withKnobs, boolean, color } from '@storybook/addon-knobs'; import ColorPickerModal from '../../../src/semantic-ui/ColorPickerModal'; export default { @@ -17,4 +17,4 @@ export const Default = () => ( color={color('Color', '#d62c29')} t={() => {}} /> -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/DataTable.stories.js b/stories/components/semantic-ui/DataTable.stories.js index 853b0b8a..a0edf75e 100644 --- a/stories/components/semantic-ui/DataTable.stories.js +++ b/stories/components/semantic-ui/DataTable.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; @@ -23,19 +25,24 @@ const actions = [{ const columns = [{ name: 'last_name', - label: 'Last name' + label: 'Last name', + sortable: false }, { name: 'first_name', - label: 'First name' + label: 'First name', + sortable: false }, { name: 'email', - label: 'Email' + label: 'Email', + sortable: false }, { name: 'ip_address', - label: 'IP address' + label: 'IP address', + sortable: false }, { name: 'country', - label: 'Country' + label: 'Country', + sortable: false }]; const items = [{ diff --git a/stories/components/semantic-ui/DescriptorField.stories.js b/stories/components/semantic-ui/DescriptorField.stories.js index 7c342ac8..f1008827 100644 --- a/stories/components/semantic-ui/DescriptorField.stories.js +++ b/stories/components/semantic-ui/DescriptorField.stories.js @@ -1,6 +1,8 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; -import { withKnobs, number, text } from "@storybook/addon-knobs"; +import { withKnobs, number, text } from '@storybook/addon-knobs'; import DescriptorField from '../../../src/semantic-ui/DescriptorField'; export default { @@ -11,7 +13,9 @@ export default { export const Default = () => ( -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/DownloadButton.stories.js b/stories/components/semantic-ui/DownloadButton.stories.js index 942c0f4e..a514d147 100644 --- a/stories/components/semantic-ui/DownloadButton.stories.js +++ b/stories/components/semantic-ui/DownloadButton.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import DownloadButton from '../../../src/semantic-ui/DownloadButton'; diff --git a/stories/components/semantic-ui/EditModal.stories.js b/stories/components/semantic-ui/EditModal.stories.js index 8e7cb603..cb940715 100644 --- a/stories/components/semantic-ui/EditModal.stories.js +++ b/stories/components/semantic-ui/EditModal.stories.js @@ -4,21 +4,35 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { withA11y } from '@storybook/addon-a11y'; import { boolean, withKnobs } from '@storybook/addon-knobs'; -import { Form, Grid, Icon, Message, Modal } from 'semantic-ui-react'; +import { + Form, + Icon, + Message, + Modal +} from 'semantic-ui-react'; import _ from 'underscore'; import EditModal from '../../../src/semantic-ui/EditModal'; import AssociatedDropdown from '../../../src/semantic-ui/AssociatedDropdown'; import AddModal from '../AddModal'; import Api from '../../services/Api'; +import type { EditContainerProps } from '../../../src/common/EditContainer'; + export default { title: 'Components/Semantic UI/EditModal', decorators: [withA11y, withKnobs] }; +const onClose = action('close'); + +const onSave = () => { + action('save')(); + return Promise.resolve(); +}; + export const Default = () => ( ( + component={(props: EditContainerProps) => ( ( { props.children } )} - onClose={action('close')} - onSave={action('save')} + onClose={onClose} + onSave={onSave} /> ); const items = [{ - "id": 1, - "company": "Bradtke LLC", - "email": "smccunn0@symantec.com", - "card": "4913389273457809", - "country": "China" + id: 1, + company: 'Bradtke LLC', + email: 'smccunn0@symantec.com', + card: '4913389273457809', + country: 'China' }, { - "id": 2, - "company": "Jacobi Inc", - "email": "rrivard1@abc.net.au", - "card": "30460843005398", - "country": "Zimbabwe" + id: 2, + company: 'Jacobi Inc', + email: 'rrivard1@abc.net.au', + card: '30460843005398', + country: 'Zimbabwe' }, { - "id": 3, - "company": "Mraz, Blanda and Hettinger", - "email": "rrummins2@fastcompany.com", - "card": "6709016072353592810", - "country": "Iran" + id: 3, + company: 'Mraz, Blanda and Hettinger', + email: 'rrummins2@fastcompany.com', + card: '6709016072353592810', + country: 'Iran' }, { - "id": 4, - "company": "Rutherford, King and Bergstrom", - "email": "dkrauss3@mit.edu", - "card": "374288311284433", - "country": "Bosnia and Herzegovina" + id: 4, + company: 'Rutherford, King and Bergstrom', + email: 'dkrauss3@mit.edu', + card: '374288311284433', + country: 'Bosnia and Herzegovina' }]; export const WithToaster = () => ( ( + component={(props: EditContainerProps) => ( ( { props.children } )} - onClose={action('close')} - onSave={action('save')} + onClose={onClose} + onSave={onSave} /> ); export const WithSaveError = () => ( ( + component={(props: EditContainerProps) => ( ( { props.children } )} - onClose={action('close')} - onSave={() => { - action('save')(); - return Promise.resolve(); - }} + onClose={onClose} + onSave={onSave} required={['phone', 'name', 'address']} /> ); export const WithLoading = () => ( ( + component={(props: EditContainerProps) => ( ( )} item={{ id: 1 }} - onClose={action('close')} + onClose={onClose} onInitialize={() => new Promise((resolve) => { - _.delay(resolve.bind(this), 5000); + _.delay(resolve.bind(this, {}), 5000); })} - onSave={action('save')} + onSave={onSave} /> ); export const WithUnsavedChanged = () => ( ( + component={(props: EditContainerProps) => ( ( address: '123 Main St', phone: null }} - onClose={action('close')} - onSave={action('save')} + onClose={onClose} + onSave={onSave} /> ); diff --git a/stories/components/semantic-ui/EditPage.stories.js b/stories/components/semantic-ui/EditPage.stories.js index cbeeb100..66d83719 100644 --- a/stories/components/semantic-ui/EditPage.stories.js +++ b/stories/components/semantic-ui/EditPage.stories.js @@ -6,16 +6,25 @@ import { withA11y } from '@storybook/addon-a11y'; import { boolean, withKnobs } from '@storybook/addon-knobs'; import { Form } from 'semantic-ui-react'; import _ from 'underscore'; -import EditPage from '../../../src/semantic-ui/EditPage'; import AssociatedDropdown from '../../../src/semantic-ui/AssociatedDropdown'; import AddModal from '../AddModal'; import Api from '../../services/Api'; +import EditPage from '../../../src/semantic-ui/EditPage'; + +import type { EditContainerProps } from '../../../src/common/EditContainer'; export default { title: 'Components/Semantic UI/EditPage', decorators: [withA11y, withKnobs] }; +const onClose = action('close'); + +const onSave = () => { + action('save')(); + return Promise.resolve(); +}; + const TestForm = () => (
( export const Default = () => ( ); @@ -53,35 +62,35 @@ export const WithMenu = () => ( key: 'other' }] }} - onClose={action('close')} - onSave={action('save')} + onClose={onClose} + onSave={onSave} /> ); const items = [{ - "id": 1, - "company": "Bradtke LLC", - "email": "smccunn0@symantec.com", - "card": "4913389273457809", - "country": "China" + id: 1, + company: 'Bradtke LLC', + email: 'smccunn0@symantec.com', + card: '4913389273457809', + country: 'China' }, { - "id": 2, - "company": "Jacobi Inc", - "email": "rrivard1@abc.net.au", - "card": "30460843005398", - "country": "Zimbabwe" + id: 2, + company: 'Jacobi Inc', + email: 'rrivard1@abc.net.au', + card: '30460843005398', + country: 'Zimbabwe' }, { - "id": 3, - "company": "Mraz, Blanda and Hettinger", - "email": "rrummins2@fastcompany.com", - "card": "6709016072353592810", - "country": "Iran" + id: 3, + company: 'Mraz, Blanda and Hettinger', + email: 'rrummins2@fastcompany.com', + card: '6709016072353592810', + country: 'Iran' }, { - "id": 4, - "company": "Rutherford, King and Bergstrom", - "email": "dkrauss3@mit.edu", - "card": "374288311284433", - "country": "Bosnia and Herzegovina" + id: 4, + company: 'Rutherford, King and Bergstrom', + email: 'dkrauss3@mit.edu', + card: '374288311284433', + country: 'Bosnia and Herzegovina' }]; const ToasterForm = () => ( @@ -137,14 +146,14 @@ export const WithToaster = () => ( key: 'other' }] }} - onClose={action('close')} - onSave={action('save')} + onClose={onClose} + onSave={onSave} /> ); export const WithSaveError = () => ( ( + component={(props: EditContainerProps) => ( <> ( /> )} - onClose={action('close')} - onSave={() => { - action('save')(); - return Promise.resolve(); - }} + onClose={onClose} + onSave={onSave} required={['name', 'address', 'phone']} /> ); @@ -179,10 +185,10 @@ export const WithLoading = () => ( new Promise((resolve) => { - _.delay(resolve.bind(this), 5000); + _.delay(resolve.bind(this, { id: 1 }), 5000); })} - onSave={action('save')} + onSave={onSave} /> ); diff --git a/stories/components/semantic-ui/EmbeddedList.stories.js b/stories/components/semantic-ui/EmbeddedList.stories.js index f69bafd4..39429cf7 100644 --- a/stories/components/semantic-ui/EmbeddedList.stories.js +++ b/stories/components/semantic-ui/EmbeddedList.stories.js @@ -1,3 +1,5 @@ +// @flow + import React, { useState } from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; @@ -5,7 +7,7 @@ import { withKnobs, optionsKnob as options } from '@storybook/addon-knobs'; import { Button, Container, Icon } from 'semantic-ui-react'; import _ from 'underscore'; import AddModal from '../AddModal'; -import Colors from '../../services/Colors'; +import { SemanticColors } from '../../services/Colors'; import EmbeddedList from '../../../src/semantic-ui/EmbeddedList'; import EditModal from '../../../src/semantic-ui/EditModal'; import TabbedModal from '../../../src/semantic-ui/TabbedModal'; @@ -135,6 +137,7 @@ export const WithRecordCount = useDragDrop(() => ( export const Selectable = useDragDrop(() => ( false} onRowSelect={action('row selected')} selectedRows={[{ id: 5 }, { id: 6 }, { id: 7 }]} actions={actions} @@ -158,7 +161,7 @@ export const AddButton = useDragDrop(() => ( actions={actions} addButton={{ location: options('Location', { Bottom: 'bottom', Top: 'top' }, 'top', { display: 'inline-radio' }), - color: options('Colors', Colors.SemanticColors, 'gray', { display: 'inline-radio' }) + color: options('Colors', SemanticColors, 'gray', { display: 'inline-radio' }) }} onDelete={action('delete')} columns={columns} @@ -174,7 +177,7 @@ export const EmptyAddButton = useDragDrop(() => ( actions={actions} addButton={{ location: options('Location', { Bottom: 'bottom', Top: 'top' }, 'top', { display: 'inline-radio' }), - color: options('Colors', Colors.SemanticColors, 'gray', { display: 'inline-radio' }) + color: options('Colors', SemanticColors, 'gray', { display: 'inline-radio' }) }} onDelete={action('delete')} columns={columns} @@ -217,7 +220,12 @@ export const DragAndDropRows = useDragDrop(() => { ); }); -const EmbeddedListModal = (props) => ( +type EmbeddedListModalProps = { + open: boolean, + children: Node +}; + +const EmbeddedListModal = (props: EmbeddedListModalProps) => ( ( actions={actions} addButton={{ location: options('Location', { Bottom: 'bottom', Top: 'top' }, 'top', { display: 'inline-radio' }), - color: options('Colors', Colors.SemanticColors, 'gray', { display: 'inline-radio' }) + color: options('Colors', SemanticColors, 'gray', { display: 'inline-radio' }) }} onDelete={action('delete')} columns={columns} @@ -266,7 +274,7 @@ export const TabbedModalConfig = useDragDrop(() => { new Promise((resolve) => resolve(setShowModal(false)))} + onClose={() => setShowModal(false)} onSave={() => new Promise((resolve) => resolve(setShowModal(false)))} /> diff --git a/stories/components/semantic-ui/FileUpload.stories.js b/stories/components/semantic-ui/FileUpload.stories.js index 36b47cd8..78dc0d22 100644 --- a/stories/components/semantic-ui/FileUpload.stories.js +++ b/stories/components/semantic-ui/FileUpload.stories.js @@ -1,7 +1,9 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; -import { withKnobs, array, number } from "@storybook/addon-knobs"; +import { withKnobs, array, number } from '@storybook/addon-knobs'; import FileUpload from '../../../src/semantic-ui/FileUpload'; export default { @@ -23,4 +25,4 @@ export const Default = () => ( maxSize={number('Max size (bytes)', maxFileSize)} onFilesAdded={action('files-added')} /> -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/FileUploadModal.stories.js b/stories/components/semantic-ui/FileUploadModal.stories.js index 589affea..4b9c2b8c 100644 --- a/stories/components/semantic-ui/FileUploadModal.stories.js +++ b/stories/components/semantic-ui/FileUploadModal.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; diff --git a/stories/components/semantic-ui/FuzzyDate.stories.js b/stories/components/semantic-ui/FuzzyDate.stories.js index a1a20873..4b5f9817 100644 --- a/stories/components/semantic-ui/FuzzyDate.stories.js +++ b/stories/components/semantic-ui/FuzzyDate.stories.js @@ -1,3 +1,5 @@ +// @flow + import React, { useState } from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; @@ -17,7 +19,12 @@ export default { decorators: [withA11y, withKnobs] }; -export const Default = () => ; +export const Default = () => ( + +); export const AsForm = () => (
@@ -175,4 +182,4 @@ export const DateConversion = () => {
); -} \ No newline at end of file +}; diff --git a/stories/components/semantic-ui/GooglePlacesSearch.stories.js b/stories/components/semantic-ui/GooglePlacesSearch.stories.js index cd2b75d0..bfb38d7c 100644 --- a/stories/components/semantic-ui/GooglePlacesSearch.stories.js +++ b/stories/components/semantic-ui/GooglePlacesSearch.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; @@ -11,18 +13,26 @@ export default { export const Default = () => ( - + ); export const CustomInput = () => ( - + ); diff --git a/stories/components/semantic-ui/ItemList.stories.js b/stories/components/semantic-ui/ItemList.stories.js index e803ab1c..a67e7a46 100644 --- a/stories/components/semantic-ui/ItemList.stories.js +++ b/stories/components/semantic-ui/ItemList.stories.js @@ -511,10 +511,7 @@ export const WithFilters = useDragDrop(() => ( actions={actions} collectionName='items' filters={{ - component: FilterModal, - props: { - test: '' - } + component: FilterModal }} modal={{ component: AddModal diff --git a/stories/components/semantic-ui/Items.stories.js b/stories/components/semantic-ui/Items.stories.js index 4820d88c..ef69aed1 100644 --- a/stories/components/semantic-ui/Items.stories.js +++ b/stories/components/semantic-ui/Items.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { action } from '@storybook/addon-actions'; import { withA11y } from '@storybook/addon-a11y'; diff --git a/stories/components/semantic-ui/KeyboardField.stories.js b/stories/components/semantic-ui/KeyboardField.stories.js index 44f57000..602b8419 100644 --- a/stories/components/semantic-ui/KeyboardField.stories.js +++ b/stories/components/semantic-ui/KeyboardField.stories.js @@ -1,3 +1,5 @@ +// @flow + import React, { useState } from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { withKnobs, boolean, text } from '@storybook/addon-knobs'; @@ -20,7 +22,7 @@ export const Default = () => { label={text('Field name', 'Field')} layout={English} name='test-field' - onChange={(e, { value }) => setValue(value)} + onChange={(e, data) => setValue(data.value)} required={boolean('Required', false)} value={value} > @@ -43,7 +45,7 @@ export const MultipleOnOneForm = () => { label={text('Field name', 'Field')} layout={English} name='test-field' - onChange={(e, { value }) => setValue(value)} + onChange={(e, data) => setValue(data.value)} required={boolean('Required', false)} value={value} > @@ -56,7 +58,7 @@ export const MultipleOnOneForm = () => { label={text('Field name', 'Field')} layout={Arabic} name='test-field-2' - onChange={(e, { value }) => setValue2(value)} + onChange={(e, data) => setValue2(data.value)} required={boolean('Required', false)} value={value2} > @@ -124,7 +126,7 @@ export const WithAlternativeCharacters = () => { label={text('Field name', 'Field')} layout={exampleTransliterationLayout} name='test-field' - onChange={(e, { value }) => setValue(value)} + onChange={(e, data) => setValue(data.value)} required={boolean('Required', false)} value={value} > diff --git a/stories/components/semantic-ui/LazyDocument.stories.js b/stories/components/semantic-ui/LazyDocument.stories.js index 65c5025a..fcb57892 100644 --- a/stories/components/semantic-ui/LazyDocument.stories.js +++ b/stories/components/semantic-ui/LazyDocument.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { Item } from 'semantic-ui-react'; diff --git a/stories/components/semantic-ui/LinkButton.stories.js b/stories/components/semantic-ui/LinkButton.stories.js index 99177186..8a4c8703 100644 --- a/stories/components/semantic-ui/LinkButton.stories.js +++ b/stories/components/semantic-ui/LinkButton.stories.js @@ -1,7 +1,9 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; -import { withKnobs, text } from "@storybook/addon-knobs"; +import { withKnobs, text } from '@storybook/addon-knobs'; import LinkButton from '../../../src/semantic-ui/LinkButton'; export default { @@ -14,4 +16,4 @@ export const Default = () => ( content={text('Text', 'This is a link button')} onClick={action('onclick')} /> -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/LinkLabel.stories.js b/stories/components/semantic-ui/LinkLabel.stories.js index 76079b36..37f2fbaf 100644 --- a/stories/components/semantic-ui/LinkLabel.stories.js +++ b/stories/components/semantic-ui/LinkLabel.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; @@ -8,7 +10,7 @@ import LinkLabel from '../../../src/semantic-ui/LinkLabel'; export default { title: 'Components/Semantic UI/LinkLabel', decorators: [withA11y, withKnobs] -} +}; export const Default = () => (
@@ -27,4 +29,4 @@ export const Default = () => ( )} />
-); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/LoginModal.stories.js b/stories/components/semantic-ui/LoginModal.stories.js index 7a02f2ab..048186f0 100644 --- a/stories/components/semantic-ui/LoginModal.stories.js +++ b/stories/components/semantic-ui/LoginModal.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; @@ -19,4 +21,4 @@ export const Default = () => ( onUsernameChange={action('username-change')} open={boolean('Open', true)} /> -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/NestedAccordion.stories.js b/stories/components/semantic-ui/NestedAccordion.stories.js index fe58792a..66cb75f1 100644 --- a/stories/components/semantic-ui/NestedAccordion.stories.js +++ b/stories/components/semantic-ui/NestedAccordion.stories.js @@ -1,6 +1,6 @@ // @flow -import React, { useState } from 'react'; +import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; import _ from 'underscore'; diff --git a/stories/components/semantic-ui/PhotoViewer.stories.js b/stories/components/semantic-ui/PhotoViewer.stories.js index d4c0da85..4a17630e 100644 --- a/stories/components/semantic-ui/PhotoViewer.stories.js +++ b/stories/components/semantic-ui/PhotoViewer.stories.js @@ -1,7 +1,9 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; -import { withKnobs, files } from "@storybook/addon-knobs"; +import { withKnobs, files } from '@storybook/addon-knobs'; import PhotoViewer from '../../../src/semantic-ui/PhotoViewer'; import image from '../../assets/test-image.jpg'; @@ -16,4 +18,4 @@ export const Default = () => ( onClose={action('close')} open /> -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/RemoteDropdown.stories.js b/stories/components/semantic-ui/RemoteDropdown.stories.js index d5070259..437beadd 100644 --- a/stories/components/semantic-ui/RemoteDropdown.stories.js +++ b/stories/components/semantic-ui/RemoteDropdown.stories.js @@ -24,7 +24,9 @@ const renderOption = (item) => ({ const colors = [{ value: 'Red', - description: 'Duis adipisicing ullamco aliqua dolore officiaDuis adipisicing ullamco aliqua dolore officiaDuis adipisicing ullamco aliqua dolore officiaDuis adipisicing ullamco aliqua dolore officiaDuis adipisicing ullamco aliqua dolore officia.' + description: 'Duis adipisicing ullamco aliqua dolore officiaDuis adipisicing ullamco aliqua dolore officiaDuis ' + + 'adipisicing ullamco aliqua dolore officiaDuis adipisicing ullamco aliqua dolore officiaDuis adipisicing ' + + 'ullamco aliqua dolore officia.' }, { value: 'Blue', description: 'Duis adipisicing ullamco aliqua dolore officia.' diff --git a/stories/components/semantic-ui/TabbedModal.stories.js b/stories/components/semantic-ui/TabbedModal.stories.js index 3135b92d..c7f6228e 100644 --- a/stories/components/semantic-ui/TabbedModal.stories.js +++ b/stories/components/semantic-ui/TabbedModal.stories.js @@ -72,4 +72,4 @@ export const NamedTabs = () => (
Tab 2 content
 -); \ No newline at end of file +); diff --git a/stories/components/semantic-ui/TagsList.stories.js b/stories/components/semantic-ui/TagsList.stories.js index ea251d2a..94eb8cb7 100644 --- a/stories/components/semantic-ui/TagsList.stories.js +++ b/stories/components/semantic-ui/TagsList.stories.js @@ -1,3 +1,5 @@ +// @flow + import React from 'react'; import { withKnobs, array } from '@storybook/addon-knobs'; import TagsList from '../../../src/semantic-ui/TagsList'; diff --git a/stories/components/semantic-ui/VideoPlayer.stories.js b/stories/components/semantic-ui/VideoPlayer.stories.js index 2c066edf..57e5babd 100644 --- a/stories/components/semantic-ui/VideoPlayer.stories.js +++ b/stories/components/semantic-ui/VideoPlayer.stories.js @@ -3,9 +3,9 @@ import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { action } from '@storybook/addon-actions'; +import { Button } from 'semantic-ui-react'; import VideoPlayer from '../../../src/semantic-ui/VideoPlayer'; import video from '../../assets/SampleVideo.mp4'; -import { Button, Icon } from 'semantic-ui-react'; export default { title: 'Components/Semantic UI/VideoPlayer', @@ -86,4 +86,3 @@ export const EmbeddedAutoPlay = () => ( video='https://www.youtube.com/embed/YXiZ8OsS3kk' /> ); - diff --git a/stories/components/semantic-ui/ViewXML.stories.js b/stories/components/semantic-ui/ViewXML.stories.js index 78044e2a..6d13af3d 100644 --- a/stories/components/semantic-ui/ViewXML.stories.js +++ b/stories/components/semantic-ui/ViewXML.stories.js @@ -1,11 +1,131 @@ +// @flow + import React from 'react'; import { withA11y } from '@storybook/addon-a11y'; import { withKnobs } from '@storybook/addon-knobs'; import ViewXML from '../../../src/semantic-ui/ViewXML'; -// eslint-disable-next-line import/no-unresolved,import/no-webpack-loader-syntax -import xml from '!!raw-loader!../../assets/books.xml'; import LinkButton from '../../../src/semantic-ui/LinkButton'; +const xml = '\n' + + '\n' + + ' \n' + + ' Gambardella, Matthew\n' + + ' XML Developer\'s Guide\n' + + ' Computer\n' + + ' 44.95\n' + + ' 2000-10-01\n' + + ' An in-depth look at creating applications\n' + + ' with XML.\n' + + ' \n' + + ' \n' + + ' Ralls, Kim\n' + + ' Midnight Rain\n' + + ' Fantasy\n' + + ' 5.95\n' + + ' 2000-12-16\n' + + ' A former architect battles corporate zombies,\n' + + ' an evil sorceress, and her own childhood to become queen\n' + + ' of the world.\n' + + ' \n' + + ' \n' + + ' Corets, Eva\n' + + ' Maeve Ascendant\n' + + ' Fantasy\n' + + ' 5.95\n' + + ' 2000-11-17\n' + + ' After the collapse of a nanotechnology\n' + + ' society in England, the young survivors lay the\n' + + ' foundation for a new society.\n' + + ' \n' + + ' \n' + + ' Corets, Eva\n' + + ' Oberon\'s Legacy\n' + + ' Fantasy\n' + + ' 5.95\n' + + ' 2001-03-10\n' + + ' In post-apocalypse England, the mysterious\n' + + ' agent known only as Oberon helps to create a new life\n' + + ' for the inhabitants of London. Sequel to Maeve\n' + + ' Ascendant.\n' + + ' \n' + + ' \n' + + ' Corets, Eva\n' + + ' The Sundered Grail\n' + + ' Fantasy\n' + + ' 5.95\n' + + ' 2001-09-10\n' + + ' The two daughters of Maeve, half-sisters,\n' + + ' battle one another for control of England. Sequel to\n' + + ' Oberon\'s Legacy.\n' + + ' \n' + + ' \n' + + ' Randall, Cynthia\n' + + ' Lover Birds\n' + + ' Romance\n' + + ' 4.95\n' + + ' 2000-09-02\n' + + ' When Carla meets Paul at an ornithology\n' + + ' conference, tempers fly as feathers get ruffled.\n' + + ' \n' + + ' \n' + + ' Thurman, Paula\n' + + ' Splish Splash\n' + + ' Romance\n' + + ' 4.95\n' + + ' 2000-11-02\n' + + ' A deep sea diver finds true love twenty\n' + + ' thousand leagues beneath the sea.\n' + + ' \n' + + ' \n' + + ' Knorr, Stefan\n' + + ' Creepy Crawlies\n' + + ' Horror\n' + + ' 4.95\n' + + ' 2000-12-06\n' + + ' An anthology of horror stories about roaches,\n' + + ' centipedes, scorpions and other insects.\n' + + ' \n' + + ' \n' + + ' Kress, Peter\n' + + ' Paradox Lost\n' + + ' Science Fiction\n' + + ' 6.95\n' + + ' 2000-11-02\n' + + ' After an inadvertant trip through a Heisenberg\n' + + ' Uncertainty Device, James Salway discovers the problems\n' + + ' of being quantum.\n' + + ' \n' + + ' \n' + + ' O\'Brien, Tim\n' + + ' Microsoft .NET: The Programming Bible\n' + + ' Computer\n' + + ' 36.95\n' + + ' 2000-12-09\n' + + ' Microsoft\'s .NET initiative is explored in\n' + + ' detail in this deep programmer\'s reference.\n' + + ' \n' + + ' \n' + + ' O\'Brien, Tim\n' + + ' MSXML3: A Comprehensive Guide\n' + + ' Computer\n' + + ' 36.95\n' + + ' 2000-12-01\n' + + ' The Microsoft MSXML3 parser is covered in\n' + + ' detail, with attention to XML DOM interfaces, XSLT processing,\n' + + ' SAX and more.\n' + + ' \n' + + ' \n' + + ' Galos, Mike\n' + + ' Visual Studio 7: A Comprehensive Guide\n' + + ' Computer\n' + + ' 49.95\n' + + ' 2001-04-16\n' + + ' Microsoft Visual Studio 7 is explored in depth,\n' + + ' looking at how Visual Basic, Visual C++, C#, and ASP+ are\n' + + ' integrated into a comprehensive development\n' + + ' environment.\n' + + ' \n' + + ''; export default { title: 'Components/Semantic UI/ViewXML', decorators: [withA11y, withKnobs] diff --git a/stories/services/Api.js b/stories/services/Api.js index e7a4ce32..581eece8 100644 --- a/stories/services/Api.js +++ b/stories/services/Api.js @@ -2,6 +2,22 @@ import _ from 'underscore'; +type OnLoadType = { + items: Array, + page?: number, + per_page?: number, + search?: string, + sort_by?: string, + sort_direction?: string +}; + +type OnNestedLoadType = { + items: Array, + parentId: number, + parentKey: string, + search: string +}; + const SORT_DESCENDING = 'descending'; /** @@ -9,14 +25,21 @@ const SORT_DESCENDING = 'descending'; * * @param items * @param page + * @param per_page * @param search - * @param sort_by - * @param sort_direction - * @param perPage + * @param sortBy + * @param sortDirection * * @returns {Promise} */ -const onLoad = ({ items, page, per_page = 10, search, sort_by, sort_direction }) => { +const onLoad = ({ + items, + page, + per_page: perPage = 10, + search, + sort_by: sortBy, + sort_direction: sortDirection +}: OnLoadType) => { let payload = [...items]; // Apply search filter @@ -35,10 +58,10 @@ const onLoad = ({ items, page, per_page = 10, search, sort_by, sort_direction }) } // Apply sort - if (sort_by && sort_by.length) { - payload = _.sortBy(payload, (item) => item[sort_by]); + if (sortBy && sortBy.length) { + payload = _.sortBy(payload, (item) => item[sortBy]); - if (sort_direction && sort_direction === SORT_DESCENDING) { + if (sortDirection && sortDirection === SORT_DESCENDING) { payload = payload.reverse(); } } @@ -46,11 +69,11 @@ const onLoad = ({ items, page, per_page = 10, search, sort_by, sort_direction }) // Apply pagination let pages = 0; - if (page && per_page) { - pages = Math.floor((payload.length / per_page) || 1); + if (page && perPage) { + pages = Math.floor((payload.length / perPage) || 1); - const startIndex = (page - 1) * per_page; - const endIndex = startIndex + (per_page - 1); + const startIndex = (page - 1) * perPage; + const endIndex = startIndex + (perPage - 1); payload = payload.slice(startIndex, endIndex); } @@ -65,7 +88,7 @@ const onLoad = ({ items, page, per_page = 10, search, sort_by, sort_direction }) } }; - return new Promise((resolve) => resolve(response)); + return new Promise((resolve) => resolve(response)); }; /** @@ -75,7 +98,7 @@ const onLoad = ({ items, page, per_page = 10, search, sort_by, sort_direction }) */ const onLoadEmpty = () => { const response = { data: { items: [], list: { pages: 1 } } }; - return new Promise((resolve) => resolve(response)); + return new Promise((resolve) => resolve(response)); }; /** @@ -88,7 +111,12 @@ const onLoadEmpty = () => { * * @returns {Promise} */ -const onNestedLoad = ({ items, parentId, parentKey, search }) => { +const onNestedLoad = ({ + items, + parentId, + parentKey, + search +}: OnNestedLoadType) => { let payload = [...items]; if (parentId) { @@ -119,10 +147,10 @@ const onNestedLoad = ({ items, parentId, parentKey, search }) => { } }; - return new Promise((resolve) => resolve(response)); + return new Promise((resolve) => resolve(response)); }; -const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); +const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export default { onLoad, diff --git a/stories/services/Colors.js b/stories/services/Colors.js index 67b51d04..b81dbf4c 100644 --- a/stories/services/Colors.js +++ b/stories/services/Colors.js @@ -23,4 +23,4 @@ export const SemanticColors = { export default { SemanticColors -}; \ No newline at end of file +};