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",
-    "styled-components": "^4.4.1"
+    "reselect": "^4.0.0"
   },
   "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`
-  display: flex;
-`
-
-const FlexItem = styled.div`
-  flex: ${props => props.flex || 1};
-  border: 1px solid black;
-`
+import styles from './RsvpReader.css'
 
 export const RsvpReader = () => {
   return (
-    <FlexRow>
-      <FlexItem>
+    <div className={styles.container}>
+      <div className={styles.item}>
         <TextInput />
-      </FlexItem>
-      <FlexItem flex={2}>
+      </div>
+      <div className={styles.mainItem}>
         <RsvpSegment />
         <MainControl></MainControl>
         <RsvpOptions></RsvpOptions>
         <RsvpPlayer />
-      </FlexItem>
-      <FlexItem>
+      </div>
+      <div className={styles.item}>
         <TextOutput />
-      </FlexItem>
-    </FlexRow>
+      </div>
+    </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`
-  color: ${props => (props.sentenceBeginning ? 'red' : 'black')};
-  font-weight: ${props => (props.current ? 'bold' : 'normal')};
-`
-
-const SelectedSegment = styled.span`
-  font-weight: ;
-`
+import styles from './TextOutput.css'
 
 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 sentenceBeginning = sentences.includes(idx)
+        const isCurrent = curSegment === 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}
-            sentenceBeginning={sentenceBeginning}
+            className={classNames({
+              [styles.current]: isCurrent,
+              [styles.sentenceBeginning]: isSentenceStart
+            })}
           >
-            {segment}{' '}
-          </Segment>
+            {isWordStart && ' '}
+            {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`
-  display: inline-block;
-  border: none;
-  border-radius: 2px;
-  background: none;
-  cursor: pointer;
-  padding: 3px;
-  /* width: 1.4em; */
-  /* height: 1.4em; */
+import styles from './IconButton.css'
 
-  svg {
-    outline: none;
-    transition: transform 0.1s linear;
-    vertical-align: middle;
-  }
+const SvgButton = ({ children, ...props }) => (
+  <button className={styles.svgButton} {...props}>
+    {children}
+  </button>
+)
 
-  &:focus {
-    outline: 2px dashed #17171d;
-  }
+const AccessLabel = ({ children }) => (
+  <span className={styles.a11yLabel}>{children}</span>
+)
 
-  &:hover {
-    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 }) => {
+export const IconButton = ({ Icon, title, ...props }) => {
   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>