playbook_ui 2.7.2 → 2.8.1

data/components/ColorPickerInput/ColorPickerInputStory.jsx

@@ -1,37 +0,0 @@
-import React from "react"
-import ColorPickerInput from './ColorPickerInput'
-
-class Wrapper extends React.Component {
-  state = {
-    color: '#000'
-  }
-
-  handleOnChange = (color) => {
-    this.setState({color})
-  }
-
-  render() {
-    const {
-      color,
-    } = this.state
-
-    const child = React.cloneElement(this.props.children, {
-      color,
-      onChange: this.handleOnChange,
-    })
-
-    return child
-  }
-}
-
-export default function ColorPickerStory(stories) {
-  stories.add("ColorPickerInput",
-    () => {
-      return (
-        <Wrapper>
-          <ColorPickerInput/>
-        </Wrapper>
-      )
-    }
-  )
-}

data/components/ColorPickerInput/colorPickerInput.scss

@@ -1,10 +0,0 @@
-@import "base-variables/_spacing.sass";
-
-.color-picker-input {
-  position: relative;
-  bottom: 0;
-}
-
-.popover {
-  top: $space-base * 3;
-}

data/components/ColorPickerInput/colorPickerInput.scss.flow

@@ -1,6 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'color-picker-input': string;
-  +'popover': string;
-|};

data/components/DOBInput/index.jsx

@@ -1,35 +0,0 @@
-import React from "react"
-import moment from "moment"
-import classnames from "classnames"
-import { DatePicker, Props as DatePickerProps } from "../"
-
-import styles from "./styles.scss"
-
-export type Props = {
-  ...DatePickerProps,
-  preventMinor: boolean,
-}
-
-const eighteenYearsAgo = moment().subtract(18, "years")
-const isNotMinor = (currentDate, selectedDate) =>
-  currentDate.isBefore(eighteenYearsAgo)
-
-const DOBInput = ({ className, preventMinor, isValidDate, viewDate, ...props }) => {
-  className = classnames(className, styles.dob)
-
-  if (preventMinor) {
-    props.viewDate = viewDate || eighteenYearsAgo
-    props.isValidDate = isValidDate || isNotMinor
-  }
-
-  return (
-    <DatePicker {...props} className={className} />
-  )
-}
-
-DOBInput.defaultProps = {
-  value: "",
-  preventMinor: false,
-}
-
-export default DOBInput

data/components/DOBInput/story.jsx

@@ -1,20 +0,0 @@
-import React from "react"
-import moment from "moment"
-import DOBInput from "./"
-
-import { boolean, text } from "@storybook/addon-knobs"
-
-import 'react-datetime/css/react-datetime.css'
-
-export default function Story(stories) {
-  stories.add("DOBInput", () => {
-    const props = {
-      preventMinor: boolean("Prevent Minor", true),
-      viewDate: text("Default Calendar Date", moment("2000-01-01"))
-    }
-
-    return (
-      <DOBInput {...props} />
-    )
-  })
-}

data/components/DOBInput/styles.scss

@@ -1,11 +0,0 @@
-@import "base-mixins/all";
-@import "base-variables/all";
-
-.dob {
-  :global {
-    .rdtDisabled {
-      color: $gray-1 !important;
-      cursor: not-allowed !important;
-    }
-  }
-}

data/components/DOBInput/styles.scss.flow

@@ -1,7 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'dob': string;
-  +'hidden-xxs': string;
-  +'visible-xxs': string;
-|};

data/components/DatePicker/DatePicker.jsx

@@ -1,156 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import Icon from '../Icon/Icon'
-import {
-  FormControl,
-  ControlLabel,
-  FormGroup,
-  InputGroup,
-  HelpBlock,
-} from 'react-bootstrap'
-
-import moment from 'moment'
-require('moment-timezone')
-
-import Datetime from 'react-datetime'
-
-import style from './styles.scss'
-
-export type Props = {
-  className: string,
-  errorMessage?: ?string,
-  inputProps: Object<{ type: "text" }>,
-  isValidDate: () => boolean,
-  labelInside: boolean,
-  labelText: string,
-  multiInput: boolean,
-  onChange: (any) => void,
-  dateFormat: string,
-  timeFormat: string,
-  closeOnSelect: boolean,
-  timeZone: string,
-  required: boolean,
-  floatAbove: boolean,
-  value: string,
-};
-
-export default class DatePicker extends React.Component<Props> {
-
-  static defaultProps = {
-    className: "",
-    errorMessage: null,
-    inputProps: {
-      type: "text",
-    },
-    onChange: function() {},
-    labelInside: true,
-    multiInput: false,
-    dateFormat: "MM/DD/YYYY",
-    closeOnSelect: true,
-    timeZone: null,
-  }
-
-  state = {
-    valid: true,
-  }
-  props: Props
-
-  fieldFormat = () => {
-    const { timeFormat, dateFormat } = this.props
-    return timeFormat && timeFormat !== "" ? "YYYY-MM-DDTHH:mm:00Z" : dateFormat
-  }
-
-  handleOnChange = (dateTime) => {
-    const { timeZone, onChange } = this.props
-
-    if(dateTime.isValid()) {
-      this.setState({ valid: true })
-      const date = timeZone ? moment.tz(dateTime) : dateTime
-      onChange(date.format(this.fieldFormat()))
-    } else {
-      this.setState({ valid: false })
-      onChange("")
-    }
-  }
-
-  renderInput = (inputProps, openCalendar) => {
-    const {
-      labelText,
-      required,
-      labelInside,
-      errorMessage,
-      multiInput,
-    } = this.props
-
-    return (
-      <FormGroup
-          className={classnames({ 'label-inside': labelInside })}
-          validationState={!this.state.valid || errorMessage ? 'error' : undefined}
-      >
-        <ControlLabel>
-          <If condition={required}>{`* `}</If>
-          {labelText}
-        </ControlLabel>
-        <InputGroup>
-          <FormControl {...inputProps}/>
-          <span
-              className={classnames('input-group-addon', { multi: multiInput })}
-              onClick={openCalendar}
-          >
-            <Icon name="calendar"/>
-          </span>
-        </InputGroup>
-        <If condition={errorMessage}>
-          <HelpBlock>{errorMessage}</HelpBlock>
-        </If>
-      </FormGroup>
-    )
-  }
-
-  dateTimeProps = () => {
-    const {
-      className,
-      dateFormat,
-      timeFormat,
-      closeOnSelect,
-      timeZone,
-      required,
-      multiInput,
-      floatAbove,
-      ...props
-    } = this.props
-
-    const inputProps = this.props.inputProps
-    if (required) inputProps.required = "required"
-
-    return {
-      className: classnames(
-        className, "react-datetime",
-         { 'multi-input-group-item': multiInput, [style.above]: floatAbove }
-      ),
-      closeOnSelect,
-      dateFormat,
-      inputProps,
-      onChange: this.handleOnChange,
-      renderInput: this.renderInput,
-      timeFormat,
-      timeZone,
-      value: this.formattedValue(),
-      ...props,
-    }
-  }
-
-  formattedValue = () => {
-    const { value } = this.props
-    if (!value) {
-      return ''
-    }
-    return moment(value).format(this.fieldFormat())
-  }
-
-  render() {
-    return (
-      <Datetime {...this.dateTimeProps()}/>
-    )
-  }
-}

data/components/DatePicker/DatePickerStory.jsx

@@ -1,22 +0,0 @@
-import React from "react"
-import DatePicker from "./DatePicker"
-
-import { text, boolean } from "@storybook/addon-knobs"
-
-export default function DatePickerStory(stories) {
-  stories.add("DatePicker",
-    () => {
-      const props = {
-        labelText: text("Label", "Date"),
-        disabled: boolean("Disabled", false),
-        floatAbove: boolean("Float Above", false),
-        timeFormat: text("Time Format", undefined),
-        errorMessage: text("Error Message", undefined),
-        onChange: () => {},
-      }
-      return (
-        <DatePicker {...props}/>
-      )
-    }
-  )
-}

data/components/DatePicker/styles.scss

@@ -1,6 +0,0 @@
-.above {
-  :global .rdtPicker {
-      top: auto;
-      bottom: 100%;
-  }
-}

data/components/DatePicker/styles.scss.flow

@@ -1,5 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'above': string;
-|};

data/components/DateTimePicker/DateTimePicker.jsx

@@ -1,109 +0,0 @@
-import React from "react"
-import classnames from "classnames"
-import moment from "moment"
-
-import DatePicker from "../DatePicker/DatePicker"
-import TimePicker from "../TimePicker/TimePicker"
-
-import styles from './styles.scss'
-
-type Props = {
-  className: string,
-  datePickerProps: Object<{
-    disabled: boolean | "disabled",
-    dateFormat: string,
-    timeFormat: string,
-  }>,
-  defaultValue: string | Object,
-  onChange: () => mixed,
-  timePickerProps: Object<{
-    clock: 12 | 24,
-    disabled: boolean | "disabled",
-    multiGroup: boolean,
-    labelInside: boolean,
-  }>
-}
-
-export default class DateTimePicker extends React.Component<Props> {
-
-  static defaultProps = {
-    className: "",
-    datePickerProps: {
-      disabled: false,
-      dateFormat: "MM/DD/YYYY",
-      timeFormat: "",
-    },
-    defaultValue: null,
-    timePickerProps: {
-      clock: 12,
-      disabled: false,
-      multiGroup: true,
-      labelInside: true,
-    }
-  }
-
-  state = {
-    date: null,
-    time: null,
-  }
-
-  props: Props
-
-  formatDateTime = (date, time) => (
-    `${date.format(this.props.datePickerProps.dateFormat || "MM/DD/YYYY")} ${time}`
-  )
-
-  handleOnDateChanged = (date) => {
-    const {time} = this.state
-    this.setState({date})
-    if(!time) return
-    this.props.onChange(this.formatDateTime(date, time))
-  }
-
-  handleOnTimeChanged = (time) => {
-    const {date} = this.state
-    this.setState({time})
-    if(!date) return
-    this.props.onChange(this.formatDateTime(date, time))
-  }
-
-  render() {
-    const {
-      className,
-      datePickerProps,
-      defaultValue,
-      timePickerProps,
-    } = this.props
-
-    const defaultDate = moment(defaultValue)
-    let defaultDateValue
-    if (defaultValue) {
-      defaultDateValue = defaultDate.isValid() ? defaultDate.format(datePickerProps.dateFormat || "MM/DD/YYYY") : null
-    }
-
-    const css = [
-      className,
-      styles.dateTimePicker,
-    ]
-
-    return (
-      <div className={classnames(css)}>
-        <div className="multi-input-group full form-group">
-          <DatePicker
-              defaultValue={defaultDateValue}
-              multiInput
-              onChange={this.handleOnDateChanged}
-              {...datePickerProps}
-          />
-          <div className="form-group multi-input-group-item">
-            <TimePicker
-                defaultValue={defaultValue}
-                onChange={this.handleOnTimeChanged}
-                {...timePickerProps}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}

data/components/DateTimePicker/DateTimePickerStory.jsx

@@ -1,31 +0,0 @@
-import React from "react"
-import DateTimePicker from "./DateTimePicker"
-
-import { select, boolean, number } from "@storybook/addon-knobs"
-
-import styles from './story-styles.scss'
-
-export default function DateTimePickerStory(stories) {
-  stories.add("DateTimePicker",
-    () => {
-      const props = {
-        datePickerProps: {
-          labelText: "Date",
-          disabled: boolean("datePickerProps.disabled", false),
-          timeFormat: ""
-        },
-        timePickerProps: {
-          clock: select("timePickerProps.clock", [12, 24], 12),
-          disabled: boolean("timePickerProps.disabled", false),
-          minHour: number('timePickerProps.minHour', 0, { range: true, min: 0, max: 24, step: 1}),
-          maxHour: number('timePickerProps.maxHour', 24, { range: true, min: 0, max: 24, step: 1}),
-        },
-        onChange: () => {},
-        className: styles.root,
-      }
-      return (
-        <DateTimePicker {...props}/>
-      )
-    }
-  )
-}