@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/Token/styles.js

@@ -1,10 +1,10 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing } from "../utils/mixins";
-import { useInteractiveColor } from "../utils/useInteractiveColor";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {focusRing} from '../utils/mixins';
+import {useInteractiveColor} from '../utils/useInteractiveColor';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   position: relative;
@@ -14,7 +14,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   vertical-align: middle;
   outline: none;
   /* Theme Properties */
-  ${({ theme }) => css`
+  ${({theme}) => css`
     ${theme.typography[200]}
     font-family: ${theme.fontFamily};
     font-weight: ${theme.fontWeights.normal};
@@ -30,7 +30,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${focusRing}
   }
 
-  ${({ closeable, theme }) =>
+  ${({closeable, theme}) =>
     closeable &&
     css`
       cursor: pointer;
@@ -42,8 +42,8 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       }
     `}
 
-  ${({ theme, palette }) =>
-    palette === "blue" &&
+  ${({theme, palette}) =>
+    palette === 'blue' &&
     css`
       color: ${theme.colors.text.body};
       background: ${theme.colors.container.background.decorative.blue};
@@ -57,7 +57,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       }
     `}
 
-  ${({ disabled, theme }) =>
+  ${({disabled, theme}) =>
     disabled &&
     css`
       opacity: 0.4;
@@ -69,7 +69,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       }
     `}
     
-  ${({ valid, theme }) =>
+  ${({valid, theme}) =>
     !valid &&
     css`
       color: ${theme.colors.text.error};

package/__flow__/TokenInput/index.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import type { EnumIconNames } from "../EnumIconNames";
+import type {EnumIconNames} from '../EnumIconNames';
 
 export type TypeTokenSpec = {
   id: string,

package/__flow__/TokenInput/index.js

@@ -1,19 +1,19 @@
 // @flow
 
-import * as React from "react";
-import Container from "./styles";
-import { asTokenSpec, delimitersAsRegExp } from "./util";
-import { Accessory } from "../Input/styles";
-import type { EnumIconNames } from "../EnumIconNames";
-import Box from "../Box";
-import Icon from "../Icon";
-import Token from "../Token";
+import * as React from 'react';
+import Container from './styles';
+import {asTokenSpec, delimitersAsRegExp} from './util';
+import {Accessory} from '../Input/styles';
+import type {EnumIconNames} from '../EnumIconNames';
+import Box from '../Box';
+import Icon from '../Icon';
+import Token from '../Token';
 
-import type { TypeTokenSpec } from "./index.flow";
+import type {TypeTokenSpec} from './index.flow';
 
-export type { TypeTokenSpec };
+export type {TypeTokenSpec};
 
-type TypeProps = {
+export type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
   name: string,
@@ -85,7 +85,7 @@ type TypeProps = {
   /** Props to spread onto the underlying input element */
   inputProps?: any,
   /** Used to get a reference to the underlying element */
-  innerRef?: React.Ref<"input">,
+  innerRef?: React.Ref<'input'>,
   qa?: Object,
   /** Browser autocomplete support */
   autocomplete?: string,
@@ -98,16 +98,16 @@ type TypeState = {
   value: string,
 };
 
-const DefaultDelimiters = [",", "Enter"];
+const DefaultDelimiters = [',', 'Enter'];
 
-const ControlledPropNames = ["value", "hasFocus", "activeToken"];
+const ControlledPropNames = ['value', 'hasFocus', 'activeToken'];
 export default class TokenInput extends React.Component<TypeProps, TypeState> {
   delimiterMatcher: RegExp;
 
   constructor(props: TypeProps) {
     super(props);
 
-    const { hasFocus, activeToken, value, delimiters } = props;
+    const {hasFocus, activeToken, value, delimiters} = props;
 
     this.delimiterMatcher = delimitersAsRegExp(delimiters || DefaultDelimiters);
 
@@ -115,12 +115,12 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
       prevProps: props,
       hasFocus: hasFocus || false,
       activeToken: activeToken,
-      value: value || "",
+      value: value || '',
     };
   }
 
   static getDerivedStateFromProps(props: TypeProps, state: TypeState) {
-    const { prevProps } = state;
+    const {prevProps} = state;
     const modifiedState = {};
 
     ControlledPropNames.forEach((propName) => {
@@ -135,7 +135,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
   }
 
   isDelimiter(keyName: string) {
-    const { delimiters = DefaultDelimiters } = this.props;
+    const {delimiters = DefaultDelimiters} = this.props;
 
     return delimiters.includes(keyName);
   }
@@ -155,11 +155,11 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
       onChangeTokens(tokens.concat(tokenSpecs));
     }
 
-    this.setState({ value: "" });
+    this.setState({value: ''});
   }
 
   deleteToken(tokenId?: string) {
-    const { onRemoveToken, onChangeTokens, tokens = [] } = this.props;
+    const {onRemoveToken, onChangeTokens, tokens = []} = this.props;
     const count = tokens.length;
 
     if (count === 0) return;
@@ -172,32 +172,32 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
       onChangeTokens(tokens.filter((tokenSpec) => tokenSpec.id !== id));
     }
 
-    this.setState({ value: "" });
+    this.setState({value: ''});
   }
 
   handleChangeText = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const { value } = e.currentTarget;
-    const { onChange } = this.props;
+    const {value} = e.currentTarget;
+    const {onChange} = this.props;
 
-    this.setState({ value });
+    this.setState({value});
 
     onChange?.(e, value);
   };
 
   handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    const { onFocus } = this.props;
+    const {onFocus} = this.props;
 
-    this.setState({ hasFocus: true });
+    this.setState({hasFocus: true});
 
     onFocus?.(e);
   };
 
   handleBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    const { onBlur } = this.props;
+    const {onBlur} = this.props;
 
     if (onBlur) onBlur(e);
 
-    this.setState({ hasFocus: false });
+    this.setState({hasFocus: false});
   };
 
   handleKeyUp = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -205,8 +205,8 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
   };
 
   handleKeyDown = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    const { onKeyDown } = this.props;
-    const { key, currentTarget } = e;
+    const {onKeyDown} = this.props;
+    const {key, currentTarget} = e;
     const text = currentTarget.value;
 
     if (onKeyDown) onKeyDown(e, text);
@@ -219,16 +219,16 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
         this.spawnNewTokens([text]);
         e.preventDefault();
       }
-    } else if (key === "Backspace") {
-      if (text === "") {
+    } else if (key === 'Backspace') {
+      if (text === '') {
         this.deleteToken();
       }
     }
   };
 
   handlePaste = (e: SyntheticClipboardEvent<HTMLInputElement>) => {
-    const text = e.clipboardData.getData("text");
-    const { onPaste } = this.props;
+    const text = e.clipboardData.getData('text');
+    const {onPaste} = this.props;
 
     if (onPaste) onPaste(e, text);
 
@@ -245,7 +245,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
     e: SyntheticEvent<HTMLButtonElement>,
     token: TypeTokenSpec
   ) => {
-    const { onClickToken, disabled } = this.props;
+    const {onClickToken, disabled} = this.props;
 
     if (onClickToken) onClickToken(e, token.id);
 
@@ -255,9 +255,9 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
   };
 
   renderToken(token: TypeTokenSpec): React.Node {
-    const { iconName: defaultIconName, disabled } = this.props;
+    const {iconName: defaultIconName, disabled} = this.props;
     const activeId = this.state.activeToken;
-    const { id, iconName: tokenIconName, value, valid } = token;
+    const {id, iconName: tokenIconName, value, valid} = token;
     const iconName = tokenIconName || defaultIconName;
     const isActive = activeId === id;
 
@@ -319,7 +319,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
       ...rest
     } = this.props;
 
-    const { state } = this;
+    const {state} = this;
 
     return (
       <Container
@@ -357,7 +357,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
           onKeyUp={this.handleKeyUp}
           onPaste={this.handlePaste}
           ref={innerRef}
-          data-qa-input={name || ""}
+          data-qa-input={name || ''}
           data-qa-input-isdisabled={!!disabled}
           data-qa-input-isrequired={!!required}
           {...qa}

package/__flow__/TokenInput/index.stories.js

@@ -1,30 +1,29 @@
 // @flow
 
-import React, { Fragment, useState } from "react";
-import { text } from "@storybook/addon-knobs";
+import React, {Fragment, useState} from 'react';
 
-import TokenInput from "./";
-import Icon from "../Icon";
+import TokenInput, {type TypeProps} from './';
+import Icon from '../Icon';
 
-import type { Node } from "react";
-import type { TypeTokenSpec } from "./index.flow";
+import type {Node} from 'react';
+import type {TypeTokenSpec} from './index.flow';
 
-type TypeProps = {
+type TypeMinimalTypeProps = {
   value?: string,
   tokens?: TypeTokenSpec[],
   delimiters?: string[],
 };
 
-const MinimalStatefulTokenInput = (props: TypeProps): Node => {
-  const { tokens, ...rest } = props;
+const MinimalStatefulTokenInput = (props: TypeMinimalTypeProps): Node => {
+  const {tokens, ...rest} = props;
   const [tokenSpecs, setTokenSpecs] = useState(tokens || []);
 
   return (
     <Fragment>
       <TokenInput
         {...rest}
-        id={"example"}
-        name={"example"}
+        id={'example'}
+        name={'example'}
         tokens={tokenSpecs}
         onChangeTokens={setTokenSpecs}
         autocomplete="off"
@@ -34,13 +33,13 @@ const MinimalStatefulTokenInput = (props: TypeProps): Node => {
 };
 
 const MeddlingStatefulTokenInput = (props: TypeProps): Node => {
-  const { delimiters, value, tokens, ...rest } = props;
+  const {delimiters, value, tokens, ...rest} = props;
   const [tokenSpecs, setTokenSpecs] = useState(tokens || []);
   const [text, setText] = useState(value);
 
   const handleAddToken = (newToken) => {
     setTokenSpecs((tokens) => tokens.concat(newToken));
-    setText("");
+    setText('');
   };
 
   const handleRemoveToken = (id) => {
@@ -59,8 +58,8 @@ const MeddlingStatefulTokenInput = (props: TypeProps): Node => {
     <Fragment>
       <TokenInput
         {...rest}
-        id={"fine-grain"}
-        name={"fine-grain"}
+        id={'fine-grain'}
+        name={'fine-grain'}
         value={text}
         tokens={tokenSpecs}
         delimiters={delimiters}
@@ -74,176 +73,170 @@ const MeddlingStatefulTokenInput = (props: TypeProps): Node => {
 };
 
 export default {
-  title: "TokenInput",
+  title: 'Components/Form Elements/TokenInput',
+  component: TokenInput,
+  args: {
+    placeholder: 'Enter a value...',
+    ariaLabel: 'Descriptive label goes here',
+    value: '',
+    disabled: undefined,
+    isInvalid: undefined,
+  },
 };
 
-export const defaultStory = () => (
+export const defaultStory = (args: TypeProps) => (
   <Fragment>
-    <MinimalStatefulTokenInput
-      placeholder={text("placeholder", "Enter a value...")}
-      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-      value={text("text", "")}
-    />
+    <MinimalStatefulTokenInput {...args} />
   </Fragment>
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const highControlStory = () => (
+export const highControlStory = (args: TypeProps) => (
   <Fragment>
-    <MeddlingStatefulTokenInput
-      placeholder={text("placeholder", "Enter a value...")}
-      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-      value={text("text", "Lychee")}
-      tokens={[
-        { id: "0", value: "Cherries" },
-        { id: "1", value: "Mangos" },
-      ]}
-    />
+    <MeddlingStatefulTokenInput {...args} />
   </Fragment>
 );
 
+highControlStory.args = {
+  tokens: [
+    {id: '0', value: 'Cherries'},
+    {id: '1', value: 'Mangos'},
+  ],
+};
+
 highControlStory.story = {
-  name: "Fine-grained state control",
+  name: 'Fine-grained state control',
 };
 
-export const trimmedTokens = () => (
+export const trimmedTokens = (args: TypeProps) => (
   <Fragment>
-    <MinimalStatefulTokenInput
-      placeholder={text("placeholder", "Enter a value...")}
-      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-      value={text("text", "")}
-      tokenMaxLength={4}
-    />
+    <MinimalStatefulTokenInput {...args} />
   </Fragment>
 );
 
+trimmedTokens.args = {
+  tokenMaxLength: 4,
+};
+
 trimmedTokens.story = {
-  name: "Trimming tokens",
+  name: 'Trimming tokens',
 };
 
-export const withIcon = () => (
+export const withIcon = (args: TypeProps) => (
   <Fragment>
-    <MinimalStatefulTokenInput
-      placeholder={text("placeholder", "Please enter a value...")}
-      value={text("text", "")}
-      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-      iconName="lock"
-    />
+    <MinimalStatefulTokenInput {...args} />
   </Fragment>
 );
 
+withIcon.args = {
+  iconName: 'lock',
+};
+
 withIcon.story = {
-  name: "Tokens With Icon",
+  name: 'Tokens With Icon',
 };
 
-export const withIndividualIcons = () => (
+export const withIndividualIcons = (args: TypeProps) => (
   <Fragment>
-    <MeddlingStatefulTokenInput
-      placeholder={text("placeholder", "Enter a value...")}
-      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-      iconName="triangle-black"
-      value={text("text", "Lychee")}
-      tokens={[
-        { id: "0", iconName: "emoji", value: "Cherries" },
-        { id: "1", value: "Mangos" },
-      ]}
-    />
+    <MeddlingStatefulTokenInput {...args} />
   </Fragment>
 );
 
+withIndividualIcons.args = {
+  iconName: 'triangle-black',
+  tokens: [
+    {id: '0', iconName: 'emoji', value: 'Cherries'},
+    {id: '1', value: 'Mangos'},
+  ],
+};
+
 withIndividualIcons.story = {
-  name: "Tokens With Individual Icons",
-};
-
-export const disabled = () => (
-  <MinimalStatefulTokenInput
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("text", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-    tokens={[
-      { id: "0", value: "One" },
-      { id: "1", value: "Two" },
-    ]}
-    disabled={true}
-  />
+  name: 'Tokens With Individual Icons',
+};
+
+export const disabled = (args: TypeProps) => (
+  <MinimalStatefulTokenInput {...args} />
 );
 
+disabled.args = {
+  tokens: [
+    {id: '0', value: 'One'},
+    {id: '1', value: 'Two'},
+  ],
+  disabled: true,
+};
+
 disabled.story = {
-  name: "Disabled",
-};
-
-export const error = () => (
-  <MinimalStatefulTokenInput
-    value={text("text", "")}
-    isInvalid
-    placeholder={text("placeholder", "blah@something")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-    tokens={[
-      { id: "0", value: "One" },
-      { id: "1", value: "Two" },
-    ]}
-  />
+  name: 'Disabled',
+};
+
+export const error = (args: TypeProps) => (
+  <MinimalStatefulTokenInput {...args} />
 );
 
+error.args = {
+  isInvalid: true,
+  placeholder: 'blah@something',
+  tokens: [
+    {id: '0', value: 'One'},
+    {id: '1', value: 'Two'},
+  ],
+};
+
 error.story = {
-  name: "Error",
+  name: 'Error',
 };
 
-export const leftIcon = () => (
-  <MinimalStatefulTokenInput
-    value={text("text", "")}
-    elemBefore={<Icon fixedWidth name="lock" />}
-    placeholder={text("placeholder", "Password")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+export const leftIcon = (args: TypeProps) => (
+  <MinimalStatefulTokenInput {...args} />
 );
 
+leftIcon.args = {
+  elemBefore: <Icon fixedWidth name="lock" />,
+  placeholder: 'Password',
+};
+
 leftIcon.story = {
-  name: "Left Icon",
+  name: 'Left Icon',
 };
 
-export const rightIcon = () => (
-  <MinimalStatefulTokenInput
-    value={text("text", "")}
-    elemAfter={<Icon fixedWidth name="lock" />}
-    placeholder="Password"
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+export const rightIcon = (args: TypeProps) => (
+  <MinimalStatefulTokenInput {...args} />
 );
 
+rightIcon.args = {
+  elemAfter: <Icon fixedWidth name="lock" />,
+  placeholder: 'Password',
+};
+
 rightIcon.story = {
-  name: "Right Icon",
-};
-
-export const leftAndRightIcons = () => (
-  <MinimalStatefulTokenInput
-    elemBefore={<Icon fixedWidth name="search" />}
-    elemAfter={<Icon fixedWidth name="lock" />}
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text(
-      "text",
-      "this is a really long value to show what happens when you have both icons and long valuessssssss"
-    )}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+  name: 'Right Icon',
+};
+
+export const leftAndRightIcons = (args: TypeProps) => (
+  <MinimalStatefulTokenInput {...args} />
 );
 
+leftAndRightIcons.args = {
+  elemBefore: <Icon fixedWidth name="search" />,
+  elemAfter: <Icon fixedWidth name="lock" />,
+};
+
 leftAndRightIcons.story = {
-  name: "Left and right icons",
+  name: 'Left and right icons',
 };
 
-export const autofocus = () => (
-  <MinimalStatefulTokenInput
-    autoFocus
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("text", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+export const autofocus = (args: TypeProps) => (
+  <MinimalStatefulTokenInput {...args} />
 );
 
+autofocus.args = {
+  autoFocus: true,
+};
+
 autofocus.story = {
-  name: "Autofocus",
+  name: 'Autofocus',
 };

package/__flow__/TokenInput/styles.js

@@ -1,9 +1,9 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing } from "../utils/mixins";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {focusRing} from '../utils/mixins';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   box-sizing: border-box;
@@ -124,6 +124,6 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   ${COMMON}
 `;
 
-Container.displayName = "TokenInputContainer";
+Container.displayName = 'TokenInputContainer';
 
 export default Container;