Merge storybook-prep improvements

client-admin/src/components/conversation-admin/comment-moderation/comment.js

@@ -5,11 +5,6 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Flex, Box, Text, Button, Card, Link } from 'theme-ui'
 
-@connect((state) => {
-  return {
-    conversation: state.zid_metadata.zid_metadata
-  }
-})
 class Comment extends React.Component {
   onAcceptClicked() {
     this.props.acceptClickHandler(this.props.comment)
@@ -90,4 +85,4 @@ Comment.propTypes = {
   })
 }
 
-export default Comment
+export default connect((state) => ({ conversation: state.zid_metadata.zid_metadata }))(Comment)

client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-accepted.js

@@ -9,7 +9,6 @@ import {
 } from '../../../actions'
 import Comment from './comment'
 
-@connect((state) => state.mod_comments_accepted)
 class ModerateCommentsAccepted extends React.Component {
   onCommentRejected(comment) {
     this.props.dispatch(changeCommentStatusToRejected(comment))
@@ -52,4 +51,4 @@ ModerateCommentsAccepted.propTypes = {
   accepted_comments: PropTypes.arrayOf(PropTypes.object)
 }
 
-export default ModerateCommentsAccepted
+export default connect((state) => state.mod_comments_accepted)(ModerateCommentsAccepted)

client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-rejected.js

@@ -9,7 +9,6 @@ import {
 import { connect } from 'react-redux'
 import Comment from './comment'
 
-@connect((state) => state.mod_comments_rejected)
 class ModerateCommentsRejected extends React.Component {
   onCommentAccepted(comment) {
     this.props.dispatch(changeCommentStatusToAccepted(comment))
@@ -52,4 +51,4 @@ ModerateCommentsRejected.propTypes = {
   rejected_comments: PropTypes.arrayOf(PropTypes.object)
 }
 
-export default ModerateCommentsRejected
+export default connect((state) => state.mod_comments_rejected)(ModerateCommentsRejected)

client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-todo.js

@@ -10,7 +10,6 @@ import {
 } from '../../../actions'
 import Comment from './comment'
 
-@connect((state) => state.mod_comments_unmoderated)
 class ModerateCommentsTodo extends React.Component {
   onCommentAccepted(comment) {
     this.props.dispatch(changeCommentStatusToAccepted(comment))
@@ -65,4 +64,4 @@ ModerateCommentsTodo.propTypes = {
   unmoderated_comments: PropTypes.arrayOf(PropTypes.object)
 }
 
-export default ModerateCommentsTodo
+export default connect((state) => state.mod_comments_unmoderated)(ModerateCommentsTodo)

client-admin/src/components/conversation-admin/seed-tweet.js

@@ -22,7 +22,6 @@ const styles = {
 }
 
 @connect((state) => state.seed_comments_tweet)
-@Radium
 class ModerateCommentsSeed extends React.Component {
   constructor(props) {
     super(props)
@@ -134,6 +133,7 @@ ModerateCommentsSeed.propTypes = {
   })
 }
 
+ModerateCommentsSeed = Radium(ModerateCommentsSeed)
 export default ModerateCommentsSeed
 
 /*

client-admin/src/components/landers/createuser.js

@@ -12,7 +12,7 @@ import strings from '../../strings/strings'
 
 const fbAppId = process.env.FB_APP_ID
 
-@connect((state) => state.signin)
+// @connect((state) => state.signin)
 class Createuser extends React.Component {
   getDest() {
     return this.props.location.pathname.slice('/createuser'.length)
@@ -220,5 +220,6 @@ class Createuser extends React.Component {
     )
   }
 }
+Createuser = connect((state) => state.signin)(Createuser)
 
 export default Createuser

client-admin/src/components/landers/signin.js

@@ -12,7 +12,7 @@ import strings from '../../strings/strings'
 
 const fbAppId = process.env.FB_APP_ID
 
-@connect((state) => state.signin)
+//@connect((state) => state.signin)
 class SignIn extends React.Component {
   // eslint-disable-next-line node/handle-callback-err
   static getDerivedStateFromError(error) {
@@ -184,5 +184,5 @@ class SignIn extends React.Component {
     )
   }
 }
-
+SignIn = connect((state) => state.signin)(SignIn)
 export default SignIn

client-admin/src/components/landers/signout.js

@@ -8,7 +8,7 @@ import { Heading } from 'theme-ui'
 
 import { doSignout } from '../../actions'
 
-@connect((state) => state.signout)
+// @connect((state) => state.signout)
 class SignOut extends React.Component {
   componentDidMount() {
     this.props.dispatch(doSignout('/home'))
@@ -29,4 +29,5 @@ SignOut.propTypes = {
   dispatch: PropTypes.func
 }
 
+SignOut = connect((state) => state.signout)(SignOut)
 export default SignOut

client-participation/vis2/components/curate.js

@@ -2,7 +2,7 @@ import _ from "lodash";
 import React from "react";
 import * as globals from "./globals";
 
-class Button extends React.Component {
+export class Button extends React.Component {
 
   handleClick() {
     this.props.handleCurateButtonClick(this.props.identifier)
@@ -29,7 +29,7 @@ class Button extends React.Component {
   }
 }
 
-class Curate extends React.Component {
+export class Curate extends React.Component {
 
   constructor(props) {
     super(props);

client-participation/vis2/components/exploreTid.js

@@ -6,7 +6,7 @@ import BarChart from "./barChart";
 const checkmark = "M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z";
 const ban = "M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z";
 
-const DataSentence = ({math, selectedTidCuration, selectedComment, repfulFor, Strings}) => {
+export const DataSentence = ({math, selectedTidCuration, selectedComment, repfulFor, Strings}) => {
 
   let markup = null;
 
@@ -93,7 +93,7 @@ const DataSentence = ({math, selectedTidCuration, selectedComment, repfulFor, St
   return markup;
 }
 
-class ExploreTid extends React.Component {
+export class ExploreTid extends React.Component {
 
   handleAgree() {
     this.props.onVoteClicked({

client-participation/vis2/components/graphComments.js

@@ -4,7 +4,7 @@ import * as globals from "./globals";
 
 /* https://bl.ocks.org/mbostock/2206590 */
 
-class GraphComment extends React.Component {
+export class GraphComment extends React.Component {
   getRectX() {
     let x = -7;
 
@@ -54,7 +54,7 @@ class GraphComment extends React.Component {
   }
 }
 
-class GraphComments extends React.Component {
+export class GraphComments extends React.Component {
 
   drawComments() {
     let shouldShowOnlyOneGroup = _.isNumber(this.props.showOnlyGroup);

client-participation/vis2/components/graphParticipants.js

@@ -3,7 +3,7 @@ import _ from "lodash";
 import * as globals from "./globals";
 import {VictoryAnimation} from "victory-core";
 
-const Participant = ({ptpt, tweenX, tweenY}) => {
+export const Participant = ({ptpt, tweenX, tweenY}) => {
   let picSize = ptpt.picture_size;
   return (
     <g
@@ -33,7 +33,7 @@ const Participant = ({ptpt, tweenX, tweenY}) => {
   );
 }
 
-const Bucket = ({pt}) => {
+export const Bucket = ({pt}) => {
   return <circle
     r={0}
     fill={/* globals.groupColor(pt.gid)*/ "rgb(180,180,180)"}

client-participation/vis2/components/hull.js

@@ -3,7 +3,7 @@ import * as globals from "./globals";
 import {VictoryAnimation} from "victory-core";
 import * as d3 from "../../js/3rdparty/d3.v4.min.js";
 
-class Hull extends React.Component {
+export class Hull extends React.Component {
   render () {
     return (
       <g>
@@ -19,7 +19,7 @@ class Hull extends React.Component {
   }
 };
 
-class Hulls extends React.Component {
+export class Hulls extends React.Component {
   render () {
     const line = d3.line(); // .curve(d3.curveBasis);
     return (

client-participation/vis2/components/hullLabels.js

@@ -11,7 +11,7 @@ const getBackgroundRectWidth = (ptptCount) =>  {
   return width;
 }
 
-const Users = ({selectedGroup}) => {
+export const Users = ({selectedGroup}) => {
   return (
     <g width={7} fill={selectedGroup ? "white" : "black"} transform={`translate(0,-9)`}>
       <ellipse cx="1.99335548" cy="1.42348754" rx="1.32890365" ry="1.42348754"></ellipse>
@@ -24,7 +24,7 @@ const Users = ({selectedGroup}) => {
   )
 }
 
-const Label = ({ptptCount, centroid, gid, selectedGroup, handleClick}) => {
+export const Label = ({ptptCount, centroid, gid, selectedGroup, handleClick}) => {
   return (
     <g
       transform={`translate(${centroid.x},${centroid.y})`}
@@ -63,7 +63,7 @@ const Label = ({ptptCount, centroid, gid, selectedGroup, handleClick}) => {
   )
 }
 
-const HullLabels = ({groups, centroids, selectedGroup, handleClick}) => {
+export const HullLabels = ({groups, centroids, selectedGroup, handleClick}) => {
 
   if (!centroids || !groups) { return null }
 

client-participation/vis2/components/tidCarousel.js

@@ -2,7 +2,7 @@ import React from "react";
 import * as globals from "./globals";
 import _ from "lodash";
 
-class PaginateButton extends React.Component {
+export class PaginateButton extends React.Component {
 
   render() {
     return (
@@ -27,7 +27,7 @@ class PaginateButton extends React.Component {
 }
 
 
-class TidCarousel extends React.Component {
+export class TidCarousel extends React.Component {
 
   constructor(props) {
     super(props);

client-participation/vis2/vis2.js

@@ -22,7 +22,7 @@ import ReactDOM from 'react-dom';
 
 
 
-class Root extends React.Component {
+export class Root extends React.Component {
   render() {
 
     let comments = this.props.comments;

client-report/src/COMPONENT_TEMPLATE.js

@@ -12,7 +12,6 @@ import PropTypes from "prop-types";
 // @connect(state => {
 //   return state.FOO;
 // })
-@Radium
 class ComponentName extends React.Component {
   constructor(props) {
     super(props);
@@ -52,6 +51,7 @@ class ComponentName extends React.Component {
   }
 }
 
+ComponentName = Radium(ComponentName);
 export default ComponentName;
 
 /*

client-report/src/components/comment.js

@@ -8,7 +8,6 @@ import Flex from "./flex";
 import * as globals from "./globals";
 import BarChart from "./barChart";
 
-@Radium
 class Comment extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func,
@@ -74,6 +73,7 @@ class Comment extends React.Component {
     }
   }
 
+  Comment = Radium(Comment);
   export default Comment;
 
   // <p>{this.props.comment.demographics.gender}</p>

client-report/src/components/framework/checkbox.js

@@ -5,8 +5,7 @@ import Radium from "radium";
 import Color from "color";
 import settings from "../../settings";
 
-@Radium
-export default class Checkbox extends React.Component {
+class Checkbox extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -129,3 +128,5 @@ export default class Checkbox extends React.Component {
     );
   }
 }
+Checkbox = Radium(Checkbox);
+export default Checkbox;

client-report/src/components/lists/commentList.js

@@ -4,7 +4,7 @@ import React from "react";
 import _ from "lodash";
 import * as globals from "../globals";
 
-const BarChartCompact = ({ comment, voteCounts, nMembers, voteColors }) => {
+export const BarChartCompact = ({ comment, voteCounts, nMembers, voteColors }) => {
   if (!comment) return null;
 
   let w = 100;
@@ -77,7 +77,7 @@ const BarChartCompact = ({ comment, voteCounts, nMembers, voteColors }) => {
   );
 };
 
-const CommentRow = ({ comment, groups, voteColors }) => {
+export const CommentRow = ({ comment, groups, voteColors }) => {
   if (!comment) {
     console.error("WHY IS THERE NO COMMENT 3452354235", comment);
     return null;