refactor to components

src/App.js

@@ -7,7 +7,7 @@ import { UserContext } from "context"
 
 import { CharacterBuilder, Home, StatblockGenerator } from "views"
 
-import { TopBar } from "_globalComponents"
+import { TopBar } from "components"
 import { firebase } from "services/Firebase"
 import { RedesignAnnounceModal } from "PF2CharacterBuilder/_modals/RedesignAnnounceModal"
 

src/PF2CharacterBuilder/_components/FeatEntry.js

@@ -19,7 +19,7 @@ const FeatEntry = (props) => {
       ) : (
         <div className="grid grid-cols-8 gap 2">
           <span className="text-lg col-span-1 text-gray-400 pl-2">
-            s{props.label}
+            {props.label}
           </span>
           <span className="col-span-6">
             <p className="text-lg mb-1">{props.feat.name}</p>

src/PF2CharacterBuilder/_components/FeatsSection.js

 import React, { useState, useEffect, useContext } from "react"
 import FeatEntry from "./FeatEntry"
 import FeatSelection from "./FeatSelection"
-import { Modal } from "_globalComponents"
+import { Modal } from "components"
 import { Card } from "./Card"
 import { SubHeading } from "./SubHeading"
 import { PlaceholderText } from "./PlaceholderText"

src/PF2CharacterBuilder/_components/SubNav.js

@@ -2,7 +2,7 @@ import React from "react"
 import { toast } from "react-toastify"
 import { UserContext } from "context"
 import { firebase } from "services/Firebase"
-import { Modal, NavButton, OpenOrDeleteItem } from "_globalComponents"
+import { Modal, NavButton, OpenOrDeleteItem } from "components"
 
 class SubNav extends React.Component {
   constructor(props) {

src/PF2CharacterBuilder/_modals/NewFeatureModal.js

 import React, { useEffect, useState } from "react"
-import { Modal } from "_globalComponents"
+import { Modal } from "components"
 
 const NewFeatureModal = () => {
   const [show, setShow] = useState(false)

src/PF2CharacterBuilder/_modals/RedesignAnnounceModal.js

 import React, { useLayoutEffect, useState } from "react"
-import { Modal } from "_globalComponents"
+import { Modal } from "components"
 import cn from "classnames"
 
 export const RedesignAnnounceModal = () => {

src/StatblockGenerator/FormSections/AbilityScoresForm.js

 import React, { useContext } from "react"
-import { SelectField } from "_globalComponents"
+import { SBG_Select } from "components"
 import { StatblockContext } from "context"
 
 export const AbilityScoresForm = () => {
@@ -10,7 +10,7 @@ export const AbilityScoresForm = () => {
       {abilities.map((ability) => {
         return (
           <div className="col-span-1" key={ability}>
-            <SelectField
+            <SBG_Select
               label={ability.toUpperCase()}
               options={global.abilityScores}
               value={stats.abilities[ability]}

src/StatblockGenerator/FormSections/BasicsForm.js

 import React, { useContext } from "react"
-import { Column, Input, Row, SelectField } from "_globalComponents"
+import { SBG_Input, SBG_Select } from "components"
 import { StatblockContext } from "context"
 
 export const BasicsForm = () => {
@@ -7,7 +7,7 @@ export const BasicsForm = () => {
     useContext(StatblockContext)
   return (
     <>
-      <Input
+      <SBG_Input
         type="text"
         label={"Name"}
         placeholder={"Creature Name"}
@@ -16,27 +16,27 @@ export const BasicsForm = () => {
         onChange={updateState}
       />
 
-      <Row className="mt-2">
-        <Column className="mr-4">
-          <SelectField
+      <div className="flex mt-2">
+        <div className="flex-1 mr-4">
+          <SBG_Select
             label={"Size"}
             options={["Small", "Medium", "Large", "Huge", "Gargantuan"]}
             value={stats.size}
             fieldName="size"
             onChange={updateState}
           />
-        </Column>
-        <Column className="mr-4">
-          <SelectField
+        </div>
+        <div className="flex-1 mr-4">
+          <SBG_Select
             label={"Creature Type"}
             options={global.creatureTypes}
             value={stats.creatureType}
             onChange={updateState}
             fieldName="creatureType"
           />
-        </Column>
-        <Column>
-          <Input
+        </div>
+        <div className="flex-1">
+          <SBG_Input
             type="number"
             label={"Proficiency"}
             placeholder={""}
@@ -44,13 +44,13 @@ export const BasicsForm = () => {
             fieldName="proficiency"
             onChange={updateState}
           />
-        </Column>
-      </Row>
+        </div>
+      </div>
 
-      <Row className="mt-2">
-        <Column className="mr-4">
+      <div className="flex mt-2">
+        <div className="flex-1 mr-4">
           <h4 className="form-header mb-1 font-bold">Armor Class</h4>
-          <Input
+          <SBG_Input
             label={"Score"}
             placeholder={""}
             value={stats.ac.score}
@@ -58,7 +58,7 @@ export const BasicsForm = () => {
             onChange={updateAC}
             type="number"
           />
-          <Input
+          <SBG_Input
             type="text"
             label={"Support"}
             placeholder={""}
@@ -67,19 +67,19 @@ export const BasicsForm = () => {
             onChange={updateAC}
             className="mt-2"
           />
-        </Column>
+        </div>
 
-        <Column className="mr-4">
+        <div className="flex-1 mr-4">
           <h4 className="form-header mb-1">Hit Points</h4>
 
-          <SelectField
+          <SBG_Select
             label={"Hit Die"}
             options={[4, 6, 8, 10, 12, 20]}
             value={stats.hp.hitDie}
             fieldName="hitDie"
             onChange={updateHP}
           />
-          <Input
+          <SBG_Input
             type="number"
             label={"Number of Dice"}
             placeholder={""}
@@ -88,10 +88,10 @@ export const BasicsForm = () => {
             onChange={updateHP}
             className="mt-2"
           />
-        </Column>
-        <Column className=" flex flex-wrap">
+        </div>
+        <div className="flex-1 flex flex-wrap">
           <h4 className="form-header flex-full mb-1">Speed</h4>
-          <Input
+          <SBG_Input
             type="number"
             label={"Base Speed"}
             placeholder={""}
@@ -99,9 +99,9 @@ export const BasicsForm = () => {
             fieldName="speed"
             onChange={updateState}
           />
-          <Row>
-            <Column className="mr-4 mt-2">
-              <Input
+          <div className="flex">
+            <div className="flex-1 mr-4 mt-2">
+              <SBG_Input
                 type="number"
                 label={"Fly"}
                 placeholder={""}
@@ -109,9 +109,9 @@ export const BasicsForm = () => {
                 fieldName="flySpeed"
                 onChange={updateState}
               />
-            </Column>
-            <Column className="mt-2">
-              <Input
+            </div>
+            <div className="flex-1 mt-2">
+              <SBG_Input
                 type="number"
                 label={"Swim"}
                 placeholder={""}
@@ -119,10 +119,10 @@ export const BasicsForm = () => {
                 fieldName="swimSpeed"
                 onChange={updateState}
               />
-            </Column>
-          </Row>
-        </Column>
-      </Row>
+            </div>
+          </div>
+        </div>
+      </div>
     </>
   )
 }

src/StatblockGenerator/FormSections/FeatureForm.js

 import React, { useContext } from "react"
 import { StatblockContext } from "context"
 import { FeatureBlock } from "../_components/FeatureBlock"
-import NavButton from "_globalComponents/NavButton"
+import { NavButton } from "components"
 
 export const FeatureForm = () => {
   const { updateFeature, deleteFeature, addFeature, stats } =
@@ -18,7 +18,7 @@ export const FeatureForm = () => {
           />
         )
       })}
-      <NavButton color="red mt-2" onClick={addFeature}>
+      <NavButton color="red" onClick={addFeature}>
         <i className="fa fa-plus mr-2" />
         Feature
       </NavButton>

src/StatblockGenerator/FormSections/LegendaryActionsForm.js

 import React, { useContext } from "react"
-import { Input, NavButton } from "_globalComponents"
+import { SBG_Input, NavButton } from "components"
 import { StatblockContext } from "context"
 import { FeatureBlock } from "StatblockGenerator/_components/FeatureBlock"
 
@@ -16,11 +16,12 @@ export const LegendaryActionsForm = () => {
         >
           Legendary Actions Per Round:
         </label>
-        <Input
+        <SBG_Input
           hideLabel
           type="number"
           className="inline-block w-2/12"
           id="legendaryActPerRound"
+          fieldName="legendaryActPerRound"
           onChange={updateState}
           value={stats.legendaryActPerRound}
           name="legendaryActPerRound"

src/StatblockGenerator/StatBlockDisplay.js

 import React from "react"
 
-import { Property, PropertyBlock } from "_globalComponents"
+import { Property } from "components"
 
 class StatBlockDisplay extends React.Component {
   renderAbilities() {
@@ -27,10 +27,11 @@ class StatBlockDisplay extends React.Component {
 
     return features.map((feature) => {
       return (
-        <PropertyBlock
+        <Property
           key={feature.title}
           title={feature.title}
           content={feature.content}
+          block
         />
       )
     })
@@ -96,7 +97,8 @@ class StatBlockDisplay extends React.Component {
 
       if (!action.attack) {
         return (
-          <PropertyBlock
+          <Property
+            block
             key={i}
             title={action.title}
             content={action.content}

src/StatblockGenerator/StatBlockForm.js

 import React from "react"
 import "react-bootstrap-typeahead/css/Typeahead.css"
 import { Typeahead } from "react-bootstrap-typeahead"
-import { Accordion } from "_globalComponents"
+import { Accordion } from "components"
 import { Actions } from "./_components/index"
 import { FeatureForm } from "./FormSections/FeatureForm"
 import { LegendaryActionsForm } from "./FormSections/LegendaryActionsForm"

src/StatblockGenerator/_components/Actions.js

 import React, { useContext } from "react"
-import NavButton from "_globalComponents/NavButton"
+import { NavButton } from "components"
 
 import { StatblockContext } from "context"
 import AttackForm from "./AttackForm"

src/StatblockGenerator/_components/AttackForm.js

 import React from "react"
-import { Input, SelectField } from "_globalComponents"
+import { SBG_Input, SBG_Select } from "components"
 
 const AttackForm = (props) => {
   return (
@@ -9,21 +9,22 @@ const AttackForm = (props) => {
       }
     >
       <div className="col-span-2">
-        <Input
+        <SBG_Input
           type="text"
           label={"Title"}
           placeholder={""}
           value={props.action.title}
-          fieldName={"title-" + props.action.id}
+          fieldName={"title"}
           onChange={(e) =>
             props.updateAction(e, props.action.id, props.legendary)
           }
         />
       </div>
       <div className="col-span-2">
-        <SelectField
+        <SBG_Select
           label={"Attack"}
-          fieldName={"attack-type-" + props.action.id}
+          id={"attack-type"}
+          fieldName={"type"}
           options={["Melee", "Ranged"]}
           value={props.action.attack.type}
           onChange={(e) =>
@@ -32,9 +33,9 @@ const AttackForm = (props) => {
         />
       </div>
       <div className="col-span-1">
-        <Input
+        <SBG_Input
           label={"Targets"}
-          fieldName={"targets-" + props.action.id}
+          fieldName={"targets"}
           type="number"
           value={props.action.attack.targets}
           onChange={(e) =>
@@ -43,9 +44,9 @@ const AttackForm = (props) => {
         />
       </div>
       <div className="col-span-1">
-        <Input
+        <SBG_Input
           label={props.action.attack.type === "Ranged" ? "Range" : "Reach"}
-          fieldName={"reach-" + props.action.id}
+          fieldName={"reach"}
           type="number"
           value={props.action.attack.reach}
           onChange={(e) =>
@@ -55,10 +56,10 @@ const AttackForm = (props) => {
       </div>
 
       <div className="col-span-1">
-        <Input
+        <SBG_Input
           label={"#"}
           type="number"
-          fieldName={"dieNum-" + props.action.id}
+          fieldName={"dieNum"}
           value={props.action.attack.dieNum}
           onChange={(e) =>
             props.updateAction(e, props.action.id, props.legendary)
@@ -66,9 +67,9 @@ const AttackForm = (props) => {
         />
       </div>
       <div className="col-span-1">
-        <SelectField
+        <SBG_Select
           label={"Dmg Die"}
-          fieldName={"dmgDie-" + props.action.id}
+          fieldName={"dmgDie"}
           options={[4, 6, 8, 10, 12]}
           value={props.action.attack.dmgDie}
           onChange={(e) =>
@@ -77,9 +78,9 @@ const AttackForm = (props) => {
         />
       </div>
       <div className="col-span-2">
-        <SelectField
+        <SBG_Select
           label={"Dmg Type"}
-          fieldName={"dmgType-" + props.action.id}
+          fieldName={"dmgType"}
           options={global.damageTypes}
           value={props.action.attack.dmgType}
           onChange={(e) =>

src/StatblockGenerator/_components/FeatureBlock.js

 import React from "react"
-import { Input, Textarea } from "_globalComponents"
+import { SBG_Input, Textarea } from "components"
 import "./FeatureBlock.scss"
 
 export const FeatureBlock = ({
@@ -11,11 +11,11 @@ export const FeatureBlock = ({
   return (
     <div className="feature-block relative grid grid-rows-1 grid-cols-12 gap-2 mx-1 mb-2">
       <div className="col-span-4">
-        <Input
+        <SBG_Input
           type="text"
           label={typeText}
           value={feature.title}
-          fieldName={"title-" + feature.id}
+          fieldName={"title"}
           onChange={(e) => updateFunc(e, feature.id)}
         />
       </div>
@@ -24,7 +24,7 @@ export const FeatureBlock = ({
           type="text"
           label={"Description"}
           value={feature.content}
-          fieldName={"description-" + feature.id}
+          fieldName={"content"}
           rows={2}
           onChange={(e) => updateFunc(e, feature.id)}
         />

src/StatblockGenerator/_components/GeneratorNav.js

 import React from "react"
 import { toast } from "react-toastify"
-import { Modal, NavButton, OpenOrDeleteItem } from "_globalComponents"
+import { Modal, NavButton, OpenOrDeleteItem } from "components"
 import { UserContext } from "context"
 import { firebase } from "services/Firebase"
 

src/_globalComponents/Column.js

-import React from "react"
-
-const Column = (props) => {
-  return (
-    <div className={`flex-1 ${props.className}`}>{props.children}</div>
-  )
-}
-
-export default Column

src/_globalComponents/Property.js

-import React from "react"
-
-const Property = (props) => {
-  return (
-    <div className="statblock__property">
-      <span className="statblock__property-name">{props.title}</span>{" "}
-      {props.content}
-    </div>
-  )
-}
-
-export default Property

src/_globalComponents/PropertyBlock.js

-import React from "react"
-
-const PropertyBlock = (props) => {
-  return (
-    <div className="statblock__property statblock__property--block">
-      <span className="statblock__property-name italic">
-        {props.title}.
-      </span>{" "}
-      {props.content}
-    </div>
-  )
-}
-
-export default PropertyBlock

src/_globalComponents/Row.js

-import React from "react"
-
-const Row = (props) => {
-  return <div className={`flex ${props.className}`}>{props.children}</div>
-}
-
-export default Row