Merge pull request #3 from thewca/development

Version 0.5: RegistrationsTable and EventSelector as Controlled Component

Author: FinnIckler

README.md

@@ -18,6 +18,6 @@ When you are transitioning a Rails Component to React or you are building a new
 3. Write your component and provide type information for its props
    1. If your component has a state that would make sense to communicate to a parent component make sure to provide callback functions that are triggered on state changes
 4. Write tests for your components using jest  
-   1. You can also add a Story to your component using Storybook to more easily visualize how arguments affect your component and how to interact with it. See an example in [EventSelector.stories.ts](src%2Fcomponents%2FEventSelector%2FEventSelector.stories.ts) 
+   1. You can also add a Story to your component using Storybook to more easily visualize how arguments affect your component and how to interact with it. See an example in [EventSelector.stories.tsx](src%2Fcomponents%2FEventSelector%2FEventSelector.stories.ts) 
 5. Create an index.ts in your directory to export your component and add its desired exported name to [src/components/index.ts](src%2Fcomponents%2Findex.ts)
 6. Create a PR with your changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewca/wca-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The WCA React Component Library",
   "repository": {
     "type": "git",

src/components/CubingIcon/CubingIcon.tsx

@@ -1,6 +1,7 @@
 import './cubingicon.scss'
-import { EventId } from '@wca/helpers'
+import { EventId, getEventName } from '@wca/helpers'
 import React from 'react'
+import { Popup } from 'semantic-ui-react'
 
 export type IconSize = '1x' | '2x' | '3x' | '4x' | '5x'
 
@@ -16,10 +17,17 @@ export default function CubingIcon({
   size = '1x',
 }: CubingIconProps) {
   return (
-    <i
-      className={`icon cubing-icon event-${event} cubing-icon-${size} ${
-        selected ? 'cubing-icon-selected' : 'cubing-icon-unselected'
-      }`}
-    />
+    <Popup
+      inverted
+      trigger={
+        <i
+          className={`icon cubing-icon event-${event} cubing-icon-${size} ${
+            selected ? 'cubing-icon-selected' : 'cubing-icon-unselected'
+          }`}
+        />
+      }
+    >
+      {getEventName(event)}
+    </Popup>
   )
 }

src/components/EventSelector/EventSelector.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { EventId } from '@wca/helpers'
+import React, { useState } from 'react'
+import EventSelector from './EventSelector'
+
+const meta: Meta<typeof EventSelector> = {
+  title: 'WCA-Components/EventSelector',
+  component: EventSelector,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+}
+export default meta
+
+type Story = StoryObj<typeof EventSelector>
+
+export const AllEvents: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    selected: [],
+    events: [
+      '333',
+      '222',
+      '444',
+      '555',
+      '666',
+      '777',
+      '333bf',
+      '333fm',
+      '333oh',
+      'clock',
+      'minx',
+      'pyram',
+      'skewb',
+      'sq1',
+      '444bf',
+      '555bf',
+      '333mbf',
+    ],
+  },
+  decorators: [
+    (DecoratedStory) => {
+      const [selected, setSelected] = useState<EventId[]>([])
+      return (
+        <DecoratedStory
+          args={{
+            selected,
+            handleEventSelection: setSelected,
+            events: [
+              '333',
+              '222',
+              '444',
+              '555',
+              '666',
+              '777',
+              '333bf',
+              '333fm',
+              '333oh',
+              'clock',
+              'minx',
+              'pyram',
+              'skewb',
+              'sq1',
+              '444bf',
+              '555bf',
+              '333mbf',
+            ],
+          }}
+        />
+      )
+    },
+  ],
+}
+
+export const SomePreSelected: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    selected: ['333'],
+    events: ['333', '444', '555'],
+  },
+  decorators: [
+    (DecoratedStory) => {
+      const [selected, setSelected] = useState<EventId[]>(['333'])
+      return (
+        <DecoratedStory
+          args={{
+            selected,
+            handleEventSelection: setSelected,
+            events: ['333', '444', '555'],
+          }}
+        />
+      )
+    },
+  ],
+}

src/components/EventSelector/EventSelector.stories.tsx

@@ -9,7 +9,7 @@ describe('EventSelector', () => {
         handleEventSelection={() => {}}
         events={['333']}
         size="2x"
-        initialSelected={[]}
+        selected={[]}
       />
     )
   })

src/components/EventSelector/EventSelector.test.tsx

@@ -1,55 +1,48 @@
 import './eventselector.scss'
 import { EventId } from '@wca/helpers'
-import React, { useState } from 'react'
+import React from 'react'
 import CubingIcon from '../CubingIcon'
 import { IconSize } from '../CubingIcon/CubingIcon'
 
 type HandleEventSelectionCallback = (events: EventId[]) => void
 
 interface EventSelectorProps {
   handleEventSelection: HandleEventSelectionCallback
-  initialSelected: EventId[]
+  selected: EventId[]
   events: EventId[]
   size: IconSize
 }
 
 export default function EventSelector({
   handleEventSelection,
+  selected,
   events,
-  initialSelected,
   size = '2x',
 }: EventSelectorProps) {
-  const [selectedEvents, setSelectedEvents] =
-    useState<EventId[]>(initialSelected)
-
   const handleEventToggle = (event: EventId) => {
-    if (selectedEvents.includes(event)) {
-      const newEvents = selectedEvents.filter(
+    if (selected.includes(event)) {
+      const newEvents = selected.filter(
         (selectedEvent) => selectedEvent !== event
       )
-      setSelectedEvents(newEvents)
       handleEventSelection(newEvents)
     } else {
-      const newEvents = [...selectedEvents, event]
-      setSelectedEvents(newEvents)
+      const newEvents = [...selected, event]
       handleEventSelection(newEvents)
     }
   }
 
   const setAllEvents = () => {
-    setSelectedEvents(events)
     handleEventSelection(events)
   }
 
   const clearAllEvents = () => {
-    setSelectedEvents([])
     handleEventSelection([])
   }
 
   return (
     <div className="event-selection-container">
       <div className="side-bar">
-        Events ({selectedEvents.length}) <br />
+        Events ({selected.length}) <br />
         <button className="all-button" onClick={setAllEvents}>
           {' '}
           All{' '}
@@ -64,7 +57,7 @@ export default function EventSelector({
           <label key={wcaEvent} className="event-label">
             <CubingIcon
               event={wcaEvent}
-              selected={selectedEvents.includes(wcaEvent)}
+              selected={selected.includes(wcaEvent)}
               size={size}
             />
             <input

src/components/EventSelector/EventSelector.tsx

@@ -1,42 +0,0 @@
-.floatThead-container{
-  overflow-x: hidden;
-  width: 100%;
-}
-.floatThead-table{
-  border-collapse: collapse;
-  border: 0 none rgba(0, 0, 0, 0.87);
-  display: table;
-  margin: 0;
-  table-layout: fixed;
-}
-.floatThead-col{
-  width: auto;
-}
-.table-condensed > thead > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > tfoot > tr > td {
-  padding: 5px;
-}
-.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
-  padding: 8px;
-  line-height: 1.428571429;
-  vertical-align: top;
-  border-top: 1px solid #ddd;
-}
-.table th {
-  text-align:left;
-}
-
-table.table tfoot {
-  font-weight: bold;
-}
-table.table-greedy-last-column,
-#person table.table-greedy-last-column {
-  white-space:nowrap
-}
-table.table-greedy-last-column>thead>tr>th:last-child,
-#person table.table-greedy-last-column>thead>tr>th:last-child {
-  width:100%
-}
-table.table-greedy-last-column>tbody>tr>td:last-child,
-#person table.table-greedy-last-column>tbody>tr>td:last-child {
-  width:100%
-}