feat: new styles working, but not optimally

Makefile

@@ -42,11 +42,11 @@ check_js: format_js
 
 .PHONY: run_dev_ui
 run_dev_ui: 
-	npm run parcel-watch
+	npm run webpack-dev
 
 .PHONY: build_js
 build_js: check_js
-	npm run parcel-build
+	npm run webpack-prod
 
 # UNIVERSAL TARGETS
 

examples/calculate/calculate.sh

@@ -0,0 +1,7 @@
+echo -----
+curl --header "Content-Type: application/json" \
+  --request POST \
+  --data '{ "numA": 10, "numB": 10 }' \
+  http://localhost:5050/api/v1/calculate/add
+
+

package.json

@@ -4,25 +4,35 @@
   "description": "## What is this",
   "browser": "utilities_for_me/web_app/static/index-bundle.js",
   "scripts": {
-    "parcel-watch": "parcel watch utilities_for_me/web_app/client/react/index.js --out-dir utilities_for_me/web_app/static --out-file utilities_for_me/web_app/static/index-bundle.js",
-    "parcel-build": "parcel build utilities_for_me/web_app/client/react/index.js --out-dir utilities_for_me/web_app/static --out-file utilities_for_me/web_app/static/index-bundle.js",
+    "webpack-dev": "webpack --mode development --watch",
+    "webpack-prod": "webpack --mode production",
     "test": "jest",
-    "standard": "standard --fix",
-    "create": "webpack"
+    "standard": "standard --fix"
   },
+  "default": "utilities_for_me/web_app/static/index-bundle.js",
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "autoprefixer": "^9.8.6",
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.14.0",
+    "@babel/preset-env": "^7.14.1",
+    "@babel/preset-react": "^7.13.13",
+    "autoprefixer": "^10.2.5",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.2.4",
+    "html-webpack-plugin": "^5.3.1",
     "jest": "^26.6.3",
-    "parcel-bundler": "^1.12.5",
-    "postcss": "^7.0.35",
+    "mini-css-extract-plugin": "^1.6.0",
+    "postcss": "^8.2.14",
+    "postcss-cli": "^8.3.1",
+    "postcss-loader": "^5.2.0",
     "standard": "^16.0.3",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2"
+    "style-loader": "^2.0.0",
+    "tailwindcss": "^2.1.2",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "js-beautify": "^1.13.1",

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    }
-  }
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

tailwind.config.js

@@ -1,14 +1,16 @@
 module.exports = {
-  purge: [],
+  purge: [
+    './src/**/*.js'
+  ],
   darkMode: false, // or 'media' or 'class'
   theme: {
     container: {
-      center: true,
+      center: true
     },
-    extend: {},
+    extend: {}
   },
   variants: {
-    extend: {},
+    extend: {}
   },
-  plugins: [],
+  plugins: []
 }

utilities_for_me/utilities/_calculate/calculate.py

@@ -0,0 +1,2 @@
+def add(num_a, num_b):
+    return num_a + num_b

utilities_for_me/utilities/_calculate/test_calculate.py

@@ -0,0 +1,6 @@
+from . import calculate
+
+
+def test_calculate_percent_of_correctly_calculates_percent():
+    # TODO
+    pass

utilities_for_me/web_app/blueprints/api/calculate/bp.py

@@ -0,0 +1,16 @@
+from typing import Dict
+from flask import Blueprint, request
+
+from utilities_for_me.utilities._calculate.calculate import add
+
+bp = Blueprint("calculate", __name__, url_prefix="/api/v1/calculate")
+
+
+@bp.route("/add", methods=["POST"])
+def handle_add() -> Dict:
+    num_a = request.get_json(silent=True).get("numA", 0)
+    num_b = request.get_json(silent=True).get("numB", 0)
+
+    sum = add(num_a, num_b)
+    data = {"sum": sum}
+    return data

utilities_for_me/web_app/client/react/App.js

@@ -23,13 +23,12 @@ import Timer from './TimerTailwind'
 // import CountdownClock from './CountdownClock'
 import CountdownClock from './CountdownClockTailwind'
 
-
 function App () {
   return (
     <main>
       <Navbar />
       {/* Tailwind on NON-SUFFIXED component */}
-      <div className='container mx-auto'> 
+      <div className='container mx-auto'>
         <Switch>
           <Route exact path='/' component={Home} />
           <Route path='/echo' component={Echo} />

utilities_for_me/web_app/client/react/CalculatePercentTailwind.js

@@ -3,7 +3,6 @@
 import React, { useState } from 'react'
 import Button from './common/Button'
 
-
 const PERCENT_OF = 'percentOf'
 const NUM_IS_WHAT_PERCENT_OF = 'numIsWhatPercentOf'
 
@@ -41,7 +40,7 @@ const sendRequest = (command, data) => {
 const CalculatePercentHeader = () => {
   return (
     <section className='p-2'>
-      <h1 className="text-5xl font-light mb-3">Calculate Percent</h1>
+      <h1 className='text-5xl font-light mb-3'>Calculate Percent</h1>
       <p>The <i>Calculate Percent</i> utility contains utilities related to calculating percents... duh!</p>
     </section>
   )
@@ -58,15 +57,15 @@ const PercentOf = ({
 
   return (
     <section className='my-3 p-2 flex flex-col md:flex-row items-center text-xl'>
-      <div className="font-semibold mr-3">What is X percent of Y?</div>
+      <div className='font-semibold mr-3'>What is X percent of Y?</div>
       <div>What is</div>
-        <input
-          type='number'
-          className='w-24 p-2 m-3 border-2 rounded border-gray-700'
-          name='percent'
-          value={percentOf_Percent}
-          onChange={handlePercentOfChange}
-        />
+      <input
+        type='number'
+        className='w-24 p-2 m-3 border-2 rounded border-gray-700'
+        name='percent'
+        value={percentOf_Percent}
+        onChange={handlePercentOfChange}
+      />
       <div>% of</div>
       <div>
         <input
@@ -77,8 +76,8 @@ const PercentOf = ({
           onChange={handlePercentOfChange}
         />
       </div>
-      <Button color="green" label="?" handleClick={handlePercentOfSubmit} />
-      <div className="font-semibold">{percentOfResult}</div>
+      <Button color='green' label='?' handleClick={handlePercentOfSubmit} />
+      <div className='font-semibold'>{percentOfResult}</div>
     </section>
   )
 }
@@ -93,25 +92,25 @@ const NumIsWhatPercentOf = ({
   const numIsWhatPercentOf_Of = numIsWhatPercentOf.of
 
   return (
-      <section className='my-4 p-2 flex flex-col md:flex-row items-center text-xl'>
-        <div className="font-semibold mr-3">X is what percent of Y?</div>
-        <input
-          type='number'
-          className='w-24 m-3 p-2 border-2 rounded border-gray-700'
-          name='num'
-          value={numIsWhatPercentOf_Num}
-          onChange={handleNumIsWhatPercentOfChange}
-        />
-        <div>is what percent of</div>
-        <input
-          type='number'
-          className='w-24 m-3 p-2 border-2 rounded border-gray-700'
-          name='of'
-          value={numIsWhatPercentOf_Of}
-          onChange={handleNumIsWhatPercentOfChange}
-        />
-        <Button color="green" label="?" handleClick={handleNumIsWhatPercentOfSubmit} />
-        <div>{numIsWhatPercentOfResult}</div>
+    <section className='my-4 p-2 flex flex-col md:flex-row items-center text-xl'>
+      <div className='font-semibold mr-3'>X is what percent of Y?</div>
+      <input
+        type='number'
+        className='w-24 m-3 p-2 border-2 rounded border-gray-700'
+        name='num'
+        value={numIsWhatPercentOf_Num}
+        onChange={handleNumIsWhatPercentOfChange}
+      />
+      <div>is what percent of</div>
+      <input
+        type='number'
+        className='w-24 m-3 p-2 border-2 rounded border-gray-700'
+        name='of'
+        value={numIsWhatPercentOf_Of}
+        onChange={handleNumIsWhatPercentOfChange}
+      />
+      <Button color='green' label='?' handleClick={handleNumIsWhatPercentOfSubmit} />
+      <div>{numIsWhatPercentOfResult}</div>
     </section>
   )
 }
@@ -196,7 +195,7 @@ function CalculatePercent () {
   }
 
   return (
-    <div className="mt-6">
+    <div className='mt-6'>
       <CalculatePercentHeader />
       <hr />
       <CalculatePercentBody

utilities_for_me/web_app/client/react/CaseTransform.js

@@ -29,11 +29,10 @@ const sendRequest = ({ fromCase, toCase, contents }) => {
   return window.fetch(url, args).then(res => res.json())
 }
 
-
 const CaseTransformHeader = () => {
   return (
     <section className='p-2'>
-      <h1 className="text-5xl font-light mb-3">Case Transform</h1>
+      <h1 className='text-5xl font-light mb-3'>Case Transform</h1>
       <p>The <i>Case Transform</i> utility allows you to transform code in one casing (camel, snake, etc...) to another case.</p>
     </section>
   )
@@ -70,43 +69,42 @@ const CaseTransformBody = ({
 }) => {
   return (
     <section>
-        <div className='p-2'>
-          <h3>Text To Transform</h3>
-          <Textarea 
-            placeholder='Contents here...' 
-            value={contents} 
-            handleChange={handleContentsChange}
-          />
-        </div>
-        <div className='p-2'>
-          <ButtonSection 
-            title='From' 
-            currentSelection={currentFromSelection} 
-            handleChange={handleFromChange} 
-          />
-          <ButtonSection 
-            title='To' 
-            currentSelection={currentToSelection} 
-            handleChange={handleToChange} 
-          />
-        </div>
-        <div className='p-2'>
-          <Button handleClick={handleSubmit} label="Submit" color="green" />
-        </div>
+      <div className='p-2'>
+        <h3>Text To Transform</h3>
+        <Textarea
+          placeholder='Contents here...'
+          value={contents}
+          handleChange={handleContentsChange}
+        />
+      </div>
+      <div className='p-2'>
+        <ButtonSection
+          title='From'
+          currentSelection={currentFromSelection}
+          handleChange={handleFromChange}
+        />
+        <ButtonSection
+          title='To'
+          currentSelection={currentToSelection}
+          handleChange={handleToChange}
+        />
+      </div>
+      <div className='p-2'>
+        <Button handleClick={handleSubmit} label='Submit' color='green' />
+      </div>
     </section>
   )
 }
 
 const CaseTransformResult = ({ result, setResult }) => {
   return (
 
-
     <section>
       <div className='p-2'>
         <h3>Result</h3>
-        <Textarea 
-          placeholder='Results will go here...' 
-          value={result} 
+        <Textarea
+          placeholder='Results will go here...'
+          value={result}
           handleChange={(e) => setResult(e.target.value)}
         />
       </div>
@@ -133,7 +131,7 @@ function CaseTransform () {
   }
 
   return (
-    <div className="mt-6">
+    <div className='mt-6'>
       <CaseTransformHeader />
       <hr />
       <CaseTransformBody

utilities_for_me/web_app/client/react/CountdownClockTailwind.js

@@ -67,7 +67,7 @@ const getDateUIData = (label) => {
 const CountdownClockHeader = () => {
   return (
     <section className='p-2'>
-      <h1 className="text-5xl font-light mb-3">Countdown Clock</h1>
+      <h1 className='text-5xl font-light mb-3'>Countdown Clock</h1>
       <p>The <i>Countdown Clock</i> will display the amount of days, hours, minutes and seconds until the next annual instance of a date. Like Christmas, Thanksgiving or Boxing Day.</p>
     </section>
   )
@@ -88,7 +88,7 @@ const CountdownClockDisplay = ({ displayTime, holiday = 'Your custom date', _dat
 const CountdownClockSelectorButton = ({ title, label, chooseDate }) => {
   const uiData = getDateUIData(label)
   return (
-    <Button 
+    <Button
       color={uiData.classColorName}
       handleClick={chooseDate}
       value={label}
@@ -112,7 +112,7 @@ const CountdownClockSelectorButtons = ({ presetDates, chooseDate }) => {
   })
 
   return (
-    <div className="flex flex-row flex-wrap justify-center mt-8 mb-6">{dateButtons}</div>
+    <div className='flex flex-row flex-wrap justify-center mt-8 mb-6'>{dateButtons}</div>
   )
 }