playbook_ui 2.5.0

data/components/TimePicker/TimePickerStory.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import TimePicker from './TimePicker'
+
+import { select, boolean, number } from '@storybook/addon-knobs'
+
+export default function TimePickerStory(stories) {
+  stories.add('TimePicker',
+    () => {
+      const props = {
+        clock: select('clock', [12, 24], 12),
+        disabled: boolean('disabled', false),
+        minHour: number('minHour', 0, { range: true, min: 0, max: 24, step: 1}),
+        maxHour: number('maxHour', 24, { range: true, min: 0, max: 24, step: 1}),
+        onChange: () => {},
+        defaultValue: '',
+      }
+      return (
+        <TimePicker {...props}/>
+      )
+    }
+  )
+}

data/components/TimePicker/styles.scss

@@ -0,0 +1 @@
+.timePicker {}

data/components/TimePicker/styles.scss.flow

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

data/components/ToggleButton/ToggleButton.jsx

@@ -0,0 +1,68 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+type Props = {
+  active: boolean,
+  className?: string,
+  offLabel?: string,
+  onLabel?: string,
+  onToggle: () => mixed,
+  size?: 'small' | 'med' | 'large',
+}
+
+import styles from './toggleButton.scss'
+
+export default class ToggleButton extends Component<Props> {
+  static defaultProps = {
+    active: false,
+    size: 'med',
+    onToggle: () => {},
+  }
+
+  props: Props
+
+  handleToggle = () => {
+    this.props.onToggle(!this.props.active)
+  }
+
+  render() {
+    const {
+      active,
+      className,
+      offLabel,
+      onLabel,
+      size,
+    } = this.props
+
+    const css = [
+      styles[`toggle-button-${size}`],
+      active ? styles[`toggle-button-${size}-active`] : null,
+    ]
+
+    return (
+      <div className={classnames(className, "clearfix", styles.root)}>
+        <div
+            className={classnames(css)}
+            onClick={this.handleToggle}
+        />
+        <If condition={offLabel && onLabel}>
+          <label
+              className={classnames(styles[`toggle-button-${size}-label`], styles[`toggle-button-${size}-label-${active ? 'active' : 'inactive'}`])}
+              onClick={this.handleToggle}
+          >
+            <If condition={active}>
+              <strong>
+                {onLabel}
+              </strong>
+            <Else/>
+              {offLabel}
+            </If>
+          </label>
+        </If>
+      </div>
+
+    )
+  }
+}

data/components/ToggleButton/ToggleButtonStory.jsx

@@ -0,0 +1,46 @@
+import React from "react"
+import ToggleButton from "./ToggleButton"
+
+import { text, select } from "@storybook/addon-knobs"
+
+class Wrapper extends React.Component {
+  state = {
+    active: false,
+  }
+  handleOnChange = (active) => {
+    this.setState({active})
+  }
+  render() {
+    const {children} = this.props
+    return (
+      <div className="container my-5">
+        <div className="col-sm-6">
+          {
+            React.cloneElement(children, {
+              onToggle: this.handleOnChange,
+              active: this.state.active,
+            })
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default function ToggleButtonStory(stories) {
+  stories.add("ToggleButton",
+    () => {
+      let props = {
+        className: text("className", ""),
+        offLabel: text("offLabel", "Deactivated"),
+        onLabel: text("onLabel", "Activated"),
+        size: select("size", ["small", "med", "large"]),
+      }
+      return (
+        <Wrapper>
+          <ToggleButton {...props}/>
+        </Wrapper>
+      )
+    }
+  )
+}

data/components/ToggleButton/toggleButton.scss

@@ -0,0 +1,70 @@
+@import "base-variables/_colors.scss";
+@import "base-variables/_spacing.sass";
+@import "base-variables/_typography.sass";
+
+.root {
+  cursor: pointer;
+}
+
+.toggle-button {
+
+  @mixin toggle-btn($radius) {
+    $inactive: $gray-2;
+    $active: $power-green;
+    $offset: $radius / ($radius / 2);
+    border: 1px solid $inactive;
+    border-radius: $radius;
+    background: $inactive;
+    float: left;
+    margin-right: $space-base;
+    padding: $radius / 2;
+    position: relative;
+    width: $radius * 2;
+    transition-property: background border;
+    transition-duration: 0.5s;
+    &::before {
+      content: ' ';
+      cursor: pointer;
+      border-radius: $radius;
+      background: $white;
+      padding: ($radius / 2) - $offset;
+      position: absolute;
+      left: $offset + 0px;
+      top: $offset + 0px;
+      transition-property: all;
+      transition-duration: 0.5s;
+    }
+    &-active {
+      background: $active;
+      border: 1px solid $active;
+      &::before {
+        left: $radius;
+      }
+    }
+  }
+
+  $radius: 30px;
+
+  &-small {
+    @include toggle-btn($radius / 2);
+    &-label {
+      cursor: pointer;
+      font-size: $font-smaller;
+    }
+  }
+  &-med {
+    @include toggle-btn($radius);
+    &-label {
+      cursor: pointer;
+      margin-top: 5px;
+    }
+  }
+  &-large {
+    @include toggle-btn($radius * 2);
+    &-label {
+      cursor: pointer;
+      margin-top: 5px;
+      font-size: $font-larger;
+    }
+  }
+}

data/components/ToggleButton/toggleButton.scss.flow

@@ -0,0 +1,14 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'root': string;
+  +'toggle-button-large': string;
+  +'toggle-button-large-active': string;
+  +'toggle-button-large-label': string;
+  +'toggle-button-med': string;
+  +'toggle-button-med-active': string;
+  +'toggle-button-med-label': string;
+  +'toggle-button-small': string;
+  +'toggle-button-small-active': string;
+  +'toggle-button-small-label': string;
+|};

data/components/UserStamp/UserStamp.jsx

@@ -0,0 +1,40 @@
+/* @flow */
+
+import React from 'react'
+
+import moment from 'moment'
+import classnames from 'classnames'
+
+import Avatar from '../Avatar/Avatar'
+import Text from '../Text/Text'
+
+import styles from './styles.scss'
+
+type UserStampProps = {|
+  action: string,
+  date: string,
+  name: string,
+  thumbUrl: string,
+|}
+
+const DateFormat = 'MMM Do, YYYY'
+
+const UserStamp = ({ thumbUrl, name, action, date }: UserStampProps) => (
+  <div className={classnames(styles['user-stamp'], 'mt-2')}>
+    <Avatar
+        size="smaller"
+        thumb={thumbUrl}
+        url={thumbUrl}
+    />
+    <div>
+       <p className={'m-0 ml-2 text-smaller text-meta-bold'}>
+        <Text color={'ink'}>{action} {moment(date).format(DateFormat)}</Text>
+      </p>
+      <p className='m-0 ml-2 text-smaller'>
+        <Text color={'ink-lighter'}>{`by ${name}`}</Text>
+      </p>
+    </div>
+  </div>
+)
+
+export default UserStamp

data/components/UserStamp/UserStampStory.jsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+import UserStamp from "./UserStamp"
+
+import { text } from "@storybook/addon-knobs"
+
+export default function UserStampStory(stories) {
+  stories.add("User Stamp",
+    () => {
+      let props = {
+        thumbUrl: text('thumbUrl', 'http://i.pravatar.cc/46'),
+        name: text('name', 'John Galt'),
+        date: text('date', 'Nov 28, 2017'),
+      }
+      return (
+        <div className="container">
+          <UserStamp {...props} />
+        </div>
+      )
+    }
+  )
+}

data/components/UserStamp/styles.scss

@@ -0,0 +1,6 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+.user-stamp {
+  display: flex;
+}

data/components/UserStamp/styles.scss.flow

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

data/components/Wip/Wip.jsx

@@ -0,0 +1,34 @@
+/* @flow */
+
+import React from 'react'
+
+type Props = {
+  branch: string,
+  children: Array<React.Component>,
+  prNumber: number,
+}
+
+export default class Wip extends React.Component<Props> {
+  props: Props
+  render() {
+    const {
+      branch,
+      children,
+      prNumber,
+    } = this.props
+
+    return (
+      <div>
+        <div className="alert alert-warning">
+          {`W.I.P. see `}
+          <a
+              href={`https://github.com/powerhome/nitro-storybook/pull/${prNumber}`}
+          >
+              {branch}
+          </a>
+        </div>
+        {children}
+      </div>
+    )
+  }
+}

data/components/index.js

@@ -0,0 +1,33 @@
+export Avatar from './Avatar/Avatar'
+export Badge from './Badge/Badge'
+export Banner from './Banner/Banner'
+export Button from './Button/Button'
+export DatePicker from './DatePicker/DatePicker'
+export DateTimePicker from './DateTimePicker/DateTimePicker'
+export DOBInput from './DOBInput'
+export Errors from './Errors/Errors'
+export Icon from './Icon/Icon'
+export Milestones from './Milestones/Milestones'
+export Panel from './Panel/Panel'
+export PanelGroup from './PanelGroup/PanelGroup'
+export SearchCollectionSelect from './SearchCollectionSelect/SearchCollectionSelect'
+export Tab from './Tab/Tab.jsx'
+export TabList from './TabList/TabList.jsx'
+export Text from './Text/Text.jsx'
+export TextInput from './TextInput/TextInput.jsx'
+export ToggleButton from './ToggleButton/ToggleButton.jsx'
+export Grade from './Grade/Grade.jsx'
+export StepMeter from './StepMeter/StepMeter.jsx'
+export Survey from './Survey/Survey.jsx'
+export MonogramAvatar from './MonogramAvatar/MonogramAvatar'
+export FileCard from './FileCard/FileCard.jsx'
+export FlyoutPanel from './FlyoutPanel/FlyoutPanel'
+export Spinner from './Spinner/Spinner'
+export TimePicker from './TimePicker/TimePicker'
+export UserStamp from './UserStamp/UserStamp'
+export Flip from './Flip/Flip'
+export Highlight from './Highlight/Highlight'
+export Card from './Card/Card.jsx'
+export CollapsibleCard from './CollapsibleCard/CollapsibleCard.jsx'
+export IconToggle from './IconToggle/IconToggle.jsx'
+export CircleButton from './CircleButton/CircleButton.jsx'

data/components/types.js

@@ -0,0 +1,21 @@
+/* @flow */
+
+export type SurveyQuestions = [
+  {
+    question: string,
+    answers: [{
+      label: string,
+      value: string | number | Object,
+    }],
+  }
+]
+
+export type IconType = {
+  className: string,
+  name: string,
+  label: string,
+  onClick: () => mixed,
+  size: string,
+  spin: boolean,
+  title: string,
+}

data/db/migrate/20171025045845_devise_create_users.rb

@@ -0,0 +1,42 @@
+class DeviseCreateUsers < ActiveRecord::Migration[5.1]
+  def change
+    create_table :users do |t|
+      ## Database authenticatable
+      t.string :email,              null: false, default: ""
+      t.string :encrypted_password, null: false, default: ""
+
+      ## Recoverable
+      t.string   :reset_password_token
+      t.datetime :reset_password_sent_at
+
+      ## Rememberable
+      t.datetime :remember_created_at
+
+      ## Trackable
+      t.integer  :sign_in_count, default: 0, null: false
+      t.datetime :current_sign_in_at
+      t.datetime :last_sign_in_at
+      t.inet     :current_sign_in_ip
+      t.inet     :last_sign_in_ip
+
+      ## Confirmable
+      # t.string   :confirmation_token
+      # t.datetime :confirmed_at
+      # t.datetime :confirmation_sent_at
+      # t.string   :unconfirmed_email # Only if using reconfirmable
+
+      ## Lockable
+      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
+      # t.string   :unlock_token # Only if unlock strategy is :email or :both
+      # t.datetime :locked_at
+
+
+      t.timestamps null: false
+    end
+
+    add_index :users, :email,                unique: true
+    add_index :users, :reset_password_token, unique: true
+    # add_index :users, :confirmation_token,   unique: true
+    # add_index :users, :unlock_token,         unique: true
+  end
+end