Create TidCarouselV2 demo

.storybook/utils.js

@@ -1,5 +1,6 @@
 import * as globals from "../codebases/compdem/client-report/src/components/globals";
 import participationData from './data/3ntrtcehas-participation-init.json'
+import commentsData from './data/3ntrtcehas-comments.json'
 
 export const getMath = () => {
   return JSON.parse(participationData.pca)
@@ -20,6 +21,10 @@ export const getConversation = () => {
   return participationData.conversation
 }
 
+export const getComments = () => {
+  return commentsData
+}
+
 export const getVoteColors = () => ({
   agree: globals.brandColors.agree,
   disagree: globals.brandColors.disagree,

package.json

@@ -34,11 +34,13 @@
     "storybook-branch-switcher": "github:patcon/storybook-branch-switcher#patcon/dev"
   },
   "dependencies": {
+    "@react-spring/web": "^9.7.4",
     "color": "~4.2.3",
     "d3-force": "~1.2.1",
     "hull.js": "^0.2.11",
     "radium": "^0.26.2",
     "react-easy-emoji": "^1.8.1",
+    "react-use-measure": "^2.1.1",
     "theme-ui": "^0.3.5",
     "victory-core": "~36.6.8"
   }

stories/OurComponents.mdx

@@ -0,0 +1,19 @@
+import LinkTo from '@storybook/addon-links/react';
+import { Meta } from '@storybook/blocks';
+
+<Meta title="2. Our Components" />
+
+# Our Custom Components
+
+The vast majority of the components in this Storybook are unmodified from either:
+1. the upstream Polis codebase maintained by Computational Democracy Project, or
+2. the forked Polis codebases maintained by others.
+
+As a helpful resource, these are the components (each a **clickable `Link`**) that we ourselves have modified or experimented with:
+
+- <LinkTo kind="compdem/client-participation/CurateV2" story="Interactive">`CurateV2`</LinkTo>
+  (Replaces <LinkTo kind="compdem/client-participation/Curate" story="Interactive">`Curate`</LinkTo>)
+- <LinkTo kind="compdem/client-participation/TidCarouselV2" story="Interactive">`TidCarouselV2`</LinkTo>
+  (Replaces <LinkTo kind="compdem/client-participation/TidCarousel" story="Interactive">`TidCarousel`</LinkTo>)
+- <LinkTo kind="compdem/client-participation/SelectionWidgetV2" story="Interactive">`SelectionWidgetV2`</LinkTo>
+  (Replaces no single component)

stories/Overview.mdx

@@ -1,3 +1,7 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="1. Overview" />
+
 # Overview: Polis-Storybook
 
 🚧 This overview page is considered a work-in-progress until this line is removed

stories/compdem/client-participation/CurateV2.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import * as globals from '../../../codebases/compdem/client-participation/vis2/components/globals'
+
+export const CurateV2Button = ({isSelected, onCurateButtonClick, style, children}) => {
+  const colors = {
+    polisBlue: "#03a9f4",
+    darkGray: "rgb(100,100,100)",
+    lightGray: "rgb(235,235,235)",
+  }
+  const buttonStyle = {
+    ...style,
+    border: 0,
+    cursor: "pointer",
+    borderRadius: 4,
+    fontSize: 14,
+    padding: "6px 12px",
+    letterSpacing: 0.75,
+    // fontWeight: isSelected ? 700 : 500,
+    textShadow: isSelected ? "0 0 .65px #fff" : null,
+    backgroundColor: isSelected ? colors.polisBlue : colors.lightGray,
+    color: isSelected ? "white" : colors.darkGray,
+  }
+  return (
+    <button style={buttonStyle} role="tab" aria-selected={isSelected} onClick={onCurateButtonClick}>
+      {children}
+    </button>
+  )
+}
+
+const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math}) => {
+  const GROUP_COUNT = math["group-clusters"].length
+  const styles = {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      rowGap: 5,
+    },
+    groupContainer: {
+      display: "flex",
+      gap: 5,
+    },
+    groupButton: {
+      flex: 1,
+    },
+    majorityButton: {
+      width: "100%",
+    },
+  }
+  const groups = ['A', 'B', 'C', 'D', 'E']
+
+  return(
+    <div style={styles.container} role="tablist">
+      <div style={styles.groupContainer}>
+        {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => (
+          <CurateV2Button
+            key={groupLabel}
+            onCurateButtonClick={() => handleCurateButtonClick(index)}
+            isSelected={selectedTidCuration === index}
+            style={styles.groupButton}
+          >
+            {groupLabel}
+          </CurateV2Button>
+        ))}
+      </div>
+      <CurateV2Button
+        onCurateButtonClick={() => handleCurateButtonClick(globals.tidCuration.majority)}
+        isSelected={selectedTidCuration === globals.tidCuration.majority}
+        style={styles.majorityButton}
+      >
+        Diverse Majority Opinion
+      </CurateV2Button>
+    </div>
+  )
+}
+
+export default CurateV2

stories/compdem/client-participation/CurateV2.stories.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { action } from '@storybook/addon-actions'
+import * as globals from '../../../codebases/compdem/client-participation/vis2/components/globals'
+import Strings from '../../../codebases/compdem/client-participation/js/strings/en_us'
+import CurateV2 from './CurateV2'
+import { getMath } from '../../../.storybook/utils'
+
+const mathResults = getMath()
+
+export default {
+  component: CurateV2,
+  argTypes: {
+    groupCount: {
+      options: [2, 3, 4],
+      control: { type: 'inline-radio' },
+    }
+  }
+}
+
+const Template = ({ groupCount, ...args }) => {
+  args.math["group-clusters"] = mathResults["group-clusters"].slice(0, groupCount)
+  const [selectedTidCuration, setSelectedTidCuration] = useState(globals.tidCuration.majority)
+  const handleCurateButtonClick = (tidCuration) => {
+    action("Clicked")(tidCuration)
+    setSelectedTidCuration(tidCuration)
+  }
+  return <CurateV2 {...{selectedTidCuration, handleCurateButtonClick}} {...args} />
+}
+
+export const Interactive = Template.bind({})
+Interactive.args = {
+  groupCount: 4,
+  Strings: {
+    majorityOpinion: Strings.majorityOpinion,
+    group_123: Strings.group_123
+  },
+  math: mathResults,
+}
+
+export const Unselected = Template.bind({})
+Unselected.args = {
+  selectedTidCuration: null,
+  Strings: {
+    majorityOpinion: Strings.majorityOpinion,
+    group_123: Strings.group_123
+  },
+  handleCurateButtonClick: action('Clicked'),
+  math: mathResults,
+}
+
+export const MajoritySelected = Template.bind({})
+MajoritySelected.args = {
+  ...Unselected.args,
+  selectedTidCuration: globals.tidCuration.majority
+}
+
+export const GroupSelected = Template.bind({})
+GroupSelected.args = {
+  ...Unselected.args,
+  selectedTidCuration: 1
+}

stories/compdem/client-participation/Graph.stories.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import Graph from '../../../codebases/compdem/client-participation/vis2/components/graph'
-import { getMath } from '../../../.storybook/utils'
+import { getComments, getMath } from '../../../.storybook/utils'
 import Strings from '../../../codebases/compdem/client-participation/js/strings/en_us'
-import commentsData from '../../../.storybook/data/3ntrtcehas-comments.json'
 import { action } from '@storybook/addon-actions'
 
+const commentsData = getComments()
 const mathResult = getMath()
 
 export default {