Remove styled-components for css modules

package.json

@@ -20,8 +20,7 @@
     "react-icons": "^3.8.0",
     "react-redux": "^7.1.3",
     "redux": "^4.0.4",
-    "reselect": "^4.0.0",
+    "reselect": "^4.0.0"
-    "styled-components": "^4.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",

src/components/RsvpReader.css

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+  border: 1px solid black;
+}
+
+.mainItem {
+  composes: item;
+  flex: 2;
+}

src/components/RsvpReader.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import styled from 'styled-components'
 import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
 import { MainControl } from './MainControl'
@@ -7,30 +6,23 @@ import { RsvpSegment } from './RsvpSegment'
 import { RsvpOptions } from './RsvpOptions'
 import { RsvpPlayer } from './RsvpPlayer'
 
-const FlexRow = styled.div`
+import styles from './RsvpReader.css'
-  display: flex;
-`
-
-const FlexItem = styled.div`
-  flex: ${props => props.flex || 1};
-  border: 1px solid black;
-`
 
 export const RsvpReader = () => {
   return (
-    <FlexRow>
+    <div className={styles.container}>
-      <FlexItem>
+      <div className={styles.item}>
         <TextInput />
-      </FlexItem>
+      </div>
-      <FlexItem flex={2}>
+      <div className={styles.mainItem}>
         <RsvpSegment />
         <MainControl></MainControl>
         <RsvpOptions></RsvpOptions>
         <RsvpPlayer />
-      </FlexItem>
+      </div>
-      <FlexItem>
+      <div className={styles.item}>
         <TextOutput />
-      </FlexItem>
+      </div>
-    </FlexRow>
+    </div>
   )
 }

src/components/TextInput.js

@@ -1,20 +1,8 @@
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import styled from 'styled-components'
 
 import { setText } from '../store/actions.js'
 
-const Button = styled.button`
-  padding: 0.5em 1em;
-  border-radius: 3px;
-  background: white;
-  color: grey;
-
-  &:hover {
-    background: lightgrey;
-  }
-`
-
 const lorem =
   'Excepteur aliqua cupidatat ullamco laboris cupidatat elit sint cillum incididunt. Anim sit excepteur laboris commodo ullamco consequat tempor. Velit elit eiusmod aute aliquip amet sunt minim deserunt voluptate esse ea sint. Commodo ipsum dolor dolor Lorem et consectetur minim ut in voluptate. Nulla qui consectetur nostrud sint anim minim duis qui amet. Ipsum reprehenderit eiusmod quis Lorem. Consectetur ipsum quis incididunt proident ea sit mollit veniam in excepteur.'
 
@@ -27,7 +15,7 @@ export const TextInput = () => {
         defaultValue={text}
         onInput={e => setTextState(e.target.value)}
       ></textarea>
-      <Button onClick={() => dispatch(setText(text))}>Load</Button>
+      <button onClick={() => dispatch(setText(text))}>Load</button>
     </div>
   )
 }

src/components/TextOutput.css

@@ -0,0 +1,7 @@
+.current {
+  text-decoration: underline;
+}
+
+.sentenceBeginning {
+  color: red;
+}

src/components/TextOutput.js

@@ -1,39 +1,39 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import classNames from 'classnames'
 
+import { getNextSmallerNumber } from '../lib/array-util.js'
 import {
   selectParsedText,
   selectCurrentSegmentIndex
 } from '../store/selectors.js'
 
-const Segment = styled.span`
+import styles from './TextOutput.css'
-  color: ${props => (props.sentenceBeginning ? 'red' : 'black')};
-  font-weight: ${props => (props.current ? 'bold' : 'normal')};
-`
-
-const SelectedSegment = styled.span`
-  font-weight: ;
-`
 
 export const TextOutput = () => {
-  const parsedText = useSelector(selectParsedText)
+  const { segments, sentences, words } = useSelector(selectParsedText)
   const curSegment = useSelector(selectCurrentSegmentIndex)
-  const { segments, words, sentences } = parsedText
   return (
     <div>
       {segments.map((segment, idx) => {
-        const current = curSegment === idx
+        const isCurrent = curSegment === idx
-        const sentenceBeginning = sentences.includes(idx)
+        const isWordStart = words.includes(idx)
+        const wordBeginning = isWordStart
+          ? idx
+          : getNextSmallerNumber(idx, words)
+        const isSentenceStart = sentences.includes(wordBeginning)
 
         return (
-          <Segment
+          <span
             key={idx}
-            current={current}
+            className={classNames({
-            sentenceBeginning={sentenceBeginning}
+              [styles.current]: isCurrent,
+              [styles.sentenceBeginning]: isSentenceStart
+            })}
           >
-            {segment}{' '}
+            {isWordStart && ' '}
-          </Segment>
+            {segment}
+          </span>
         )
       })}
     </div>

src/styles/IconButton.css

@@ -0,0 +1,42 @@
+.svgButton {
+  display: inline-block;
+  border: none;
+  border-radius: 2px;
+  background: none;
+  cursor: pointer;
+  padding: 3px;
+  /* width: 1.4em; */
+  /* height: 1.4em; */
+}
+
+.svgButton svg {
+  outline: none;
+  transition: transform 0.1s linear;
+  vertical-align: middle;
+}
+
+.svgButton:focus {
+  outline: 2px dashed #17171d;
+}
+
+.svgButton:hover svg {
+  transform: scale(1.1);
+}
+
+.svgButton::-moz-focus-inner {
+  border: 0;
+}
+
+.svgButton[disabled] svg {
+  transform: scale(1.5);
+
+  color: '#c7c7c7';
+}
+
+.a11yLabel {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+}

src/styles/IconButton.js

@@ -1,57 +1,20 @@
 import React from 'react'
-import styled from 'styled-components'
 
-const SvgButton = styled.button`
+import styles from './IconButton.css'
-  display: inline-block;
-  border: none;
-  border-radius: 2px;
-  background: none;
-  cursor: pointer;
-  padding: 3px;
-  /* width: 1.4em; */
-  /* height: 1.4em; */
 
-  svg {
+const SvgButton = ({ children, ...props }) => (
-    outline: none;
+  <button className={styles.svgButton} {...props}>
-    transition: transform 0.1s linear;
+    {children}
-    vertical-align: middle;
+  </button>
-  }
+)
 
-  &:focus {
+const AccessLabel = ({ children }) => (
-    outline: 2px dashed #17171d;
+  <span className={styles.a11yLabel}>{children}</span>
-  }
+)
 
-  &:hover {
+export const IconButton = ({ Icon, title, ...props }) => {
-    svg {
-      transform: scale(1.1);
-    }
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &[disabled] {
-    color: '#c7c7c7';
-    svg {
-      transform: scale(1.5);
-
-      color: '#c7c7c7';
-    }
-  }
-`
-
-const AccessLabel = styled.span`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-`
-
-export const IconButton = ({ Icon, title, onClick, disabled }) => {
   return (
-    <SvgButton onClick={onClick} title={title} tabindex="0" disabled={disabled}>
+    <SvgButton tabIndex="0" title={title} {...props}>
       {Icon && <Icon aria-hidden="true" focusable="false" />}
       <AccessLabel>{title}</AccessLabel>
     </SvgButton>