feat: switch to tailwind (#409)

* switch out theme-ui for tailwind

* rough out common components

* rough out view components

* rought out homepage

* rough out example page

* rough out account page

* temp remove style guide page

* split up components into components or elements

* bump parcel and move @tailwindcss/forms

* add form elements and components

* convert over full form

* straight convert remaining pages

they could use some extra design touch up but are fine for now

* change file

* add id to TabView

* update import page

* update tax page

* fix payback table

* update patch and minor deps

* temp remove rtype reqiurement

* spell out rtype

* add back in FlexTable feature

* lowercase yup

* pass all through to props to select

* deal with parent nesting

* fix radio select label semantics

* normalize form styles, turn off tailwind jit mode

* fix TabView casing

.changes/switch-to-tailwind.md

@@ -0,0 +1,5 @@
+---
+'finatr': minor
+---
+
+This update removes `theme-ui` and replaces it with `tailwindcss`. This improves runtime performance with the tradeoff of greater reliance on classes. While there are opinions on the verbosity of the utility class based system, most of this will be hidden away within components and elements over time.

.parcelrc

@@ -2,7 +2,8 @@
   "extends": "@parcel/config-default",
   "transformers": {
     "*.{js,jsx,ts,tsx}": [
-      "@parcel/transformer-js"
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
     ],
     "url:*": [
       "@parcel/transformer-raw"

.postcssrc

@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}

cypress/integration/accounts/account_delete.js

@@ -1,9 +1,7 @@
 describe('Transaction Delete Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#accounts')
-      .contains('Add Account')
-      .click();
+    cy.get('#accounts').contains('Add Account').click();
 
     cy.get('#accounts').within(() => {
       cy.findByLabelText('starting').type('{selectall}55');
@@ -15,6 +13,7 @@ describe('Transaction Delete Tests', () => {
   it('deletes the recently added account', () => {
     cy.get('#accounts').within(() => {
       cy.findByText('55.00')
+        .parent()
         .parent()
         .within(() => {
           cy.findByText('X').click();

cypress/integration/accounts/account_modification.js

@@ -1,9 +1,7 @@
 describe('Account Modifications Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#accounts')
-      .contains('Add Account')
-      .click();
+    cy.get('#accounts').contains('Add Account').click();
 
     cy.get('#accounts').within(() => {
       cy.findByLabelText('starting').type('{selectall}550');
@@ -14,6 +12,7 @@ describe('Account Modifications Tests', () => {
         cy
           .findByText('550.00')
           .parent()
+          .parent()
           .within(() => cy.findByText('M').click())
       );
     });

cypress/integration/debtpaybacks/debtpayback_dynamic.js

@@ -1,9 +1,7 @@
 describe('Debt Payback Form Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#accounts')
-      .contains('Add Account')
-      .click();
+    cy.get('#accounts').contains('Add Account').click();
 
     cy.get('#accounts').within(() => {
       cy.findByLabelText('name').type('Test Debt Submission');
@@ -21,7 +19,7 @@ describe('Debt Payback Form Tests', () => {
     cy.findByTestId('accounts-debt').within(() => {
       cy.findByLabelText('debt account').select('Test Debt Submission');
       cy.findByLabelText('payment account').select('account');
-      cy.findByLabelText('rtype').select('Repeat on a Day of the Week');
+      cy.findByLabelText('repeat type').select('Repeat on a Day of the Week');
       cy.findByLabelText('start').type('2019-04-28');
       cy.findByText('after Number of Occurrences').click({ force: true });
       cy.findByLabelText('occurrences').type('{selectall}8');
@@ -42,7 +40,7 @@ describe('Debt Payback Form Tests', () => {
 
       cy.findByLabelText('debt account').select('Test Debt Submission');
       cy.findByLabelText('payment account').select('account');
-      cy.findByLabelText('rtype').select('Repeat on a Day of the Week');
+      cy.findByLabelText('repeat type').select('Repeat on a Day of the Week');
       cy.findByLabelText('start').type('2019-04-28');
       cy.findByText('after Number of Occurrences').click({ force: true });
       cy.findByLabelText('occurrences').type('{selectall}8');
@@ -54,7 +52,8 @@ describe('Debt Payback Form Tests', () => {
 
       cy.findByText('reference')
         .parent()
-        .should(refSection => {
+        .parent()
+        .should((refSection) => {
           expect(refSection).to.contain('Required');
         });
     });

cypress/integration/debtpaybacks/debypayback_delete.js

@@ -1,9 +1,7 @@
 describe('Debt Payback Form Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#accounts')
-      .contains('Add Account')
-      .click();
+    cy.get('#accounts').contains('Add Account').click();
 
     cy.get('#accounts').within(() => {
       cy.findByLabelText('name').type('Test Debt Submission');
@@ -16,7 +14,7 @@ describe('Debt Payback Form Tests', () => {
 
       cy.findByLabelText('debt account').select('Test Debt Submission');
       cy.findByLabelText('payment account').select('account');
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.findByLabelText('value').type('55');
       cy.findByLabelText('start').type('2019-05-28');
       cy.findByText('after Number of Occurrences').click({ force: true });
@@ -29,6 +27,7 @@ describe('Debt Payback Form Tests', () => {
   it('deletes the recently added debt payback', () => {
     cy.findByTestId('accounts-debt').within(() => {
       cy.findByText('2019-05-28')
+        .parent()
         .parent()
         .within(() => cy.findByText('X').click());
 

cypress/integration/debtpaybacks/debypayback_modification.js

@@ -1,9 +1,7 @@
 describe('Debt Payback Form Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#accounts')
-      .contains('Add Account')
-      .click();
+    cy.get('#accounts').contains('Add Account').click();
 
     cy.get('#accounts').within(() => {
       cy.findByLabelText('name').type('Test Debt Submission');
@@ -16,7 +14,7 @@ describe('Debt Payback Form Tests', () => {
 
       cy.findByLabelText('debt account').select('Test Debt Submission');
       cy.findByLabelText('payment account').select('account');
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.findByLabelText('value').type('55');
       cy.findByLabelText('start').type('2019-05-28');
       cy.findByText('after Number of Occurrences').click({ force: true });
@@ -25,6 +23,7 @@ describe('Debt Payback Form Tests', () => {
       cy.findByTestId('accounts-debt').within(() => cy.get('form').submit());
 
       cy.findByText('55')
+        .parent()
         .parent()
         .within(() => cy.findByText('M').click());
     });

cypress/integration/debtpaybacks/form_submission.js

@@ -1,9 +1,7 @@
 describe('Debt Payback Form Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#accounts')
-      .contains('Add Account')
-      .click();
+    cy.get('#accounts').contains('Add Account').click();
 
     cy.get('#accounts').within(() => {
       cy.findByLabelText('name').type('Test Debt Submission');
@@ -28,10 +26,10 @@ describe('Debt Payback Form Tests', () => {
 
       cy.findByLabelText('debt account').select('Test Debt Submission');
       cy.findByLabelText('payment account').select('account');
-      cy.findByLabelText('rtype').select('Repeat on a Day of the Week');
+      cy.findByLabelText('repeat type').select('Repeat on a Day of the Week');
       cy.findByLabelText('value').type('{selectall}250');
       cy.findByLabelText('start').type('2019-04-28');
-      cy.findByText('after Number of Occurrences').click({ force: true });
+      cy.findByLabelText('after Number of Occurrences').check();
       cy.findByLabelText('occurrences').type('{selectall}8');
       cy.findByLabelText('cycle').type('{selectall}1');
       cy.get('form').submit();

cypress/integration/transactions/form_submission.js

@@ -1,9 +1,7 @@
 describe('Transaction Form Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#transactions')
-      .contains('Add Transaction')
-      .click();
+    cy.get('#transactions').contains('Add Transaction').click();
   });
 
   it('tab switches to the form', () => {
@@ -15,7 +13,7 @@ describe('Transaction Form Tests', () => {
   it('submits simple transaction', () => {
     cy.get('#transactions').within(() => {
       cy.findByLabelText('value').type('55');
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.get('form').submit();
 
       cy.findByTestId('transactions-all-transactions').within(() =>
@@ -31,7 +29,7 @@ describe('Transaction Form Tests', () => {
 
   it('check income is listed in income tab after submit', () => {
     cy.get('#transactions').within(() => {
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.findByLabelText('value').type('55');
       cy.get('form').submit();
 
@@ -44,11 +42,12 @@ describe('Transaction Form Tests', () => {
 
   it('check expense is listed in expense tab after submit', () => {
     cy.get('#transactions').within(() => {
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.findByLabelText('value').type('67');
       cy.findByLabelText('type').select('Expense');
       cy.get('form').submit();
 
+      cy.findByText('Expenses').click();
       cy.findByTestId('transactions-expenses').within(() =>
         // all transactions should be visible, so just check existence
         cy.findByText('67.00').should('exist')
@@ -58,11 +57,12 @@ describe('Transaction Form Tests', () => {
 
   it('check transfer is listed in transfer tab after submit', () => {
     cy.get('#transactions').within(() => {
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.findByLabelText('value').type('53');
       cy.findByLabelText('type').select('Transfer');
       cy.get('form').submit();
 
+      cy.findByText('Transfers').click();
       cy.findByTestId('transactions-transfers').within(() =>
         // all transactions should be visible, so just check existence
         cy.findByText('53.00').should('exist')

cypress/integration/transactions/transaction_delete.js

@@ -1,12 +1,10 @@
 describe('Transaction Delete Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#transactions')
-      .contains('Add Transaction')
-      .click();
+    cy.get('#transactions').contains('Add Transaction').click();
 
     cy.get('#transactions').within(() => {
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.findByLabelText('value').type('{selectall}55');
       cy.findByLabelText('description').type('test transaction');
       cy.get('form').submit();
@@ -17,6 +15,7 @@ describe('Transaction Delete Tests', () => {
     cy.get('#transactions')
       .contains('test transaction')
       .parent()
+      .parent()
       .within(() => {
         cy.contains('X').click();
       });

cypress/integration/transactions/transaction_modification.js

@@ -1,19 +1,18 @@
 describe('Transaction Modifications Tests', () => {
   beforeEach(() => {
     cy.visit('/flow');
-    cy.get('#transactions')
-      .contains('Add Transaction')
-      .click();
+    cy.get('#transactions').contains('Add Transaction').click();
 
     cy.get('#transactions').within(() => {
-      cy.findByLabelText('rtype').select('No Repeating');
+      cy.findByLabelText('repeat type').select('No Repeating');
       cy.findByLabelText('value').type('{selectall}55');
       cy.findByLabelText('description').type('test transaction');
       cy.get('form').submit();
 
       cy.findByTestId('transactions-all-transactions')
         .contains('55.00')
         .parent()
+        .parent()
         .within(() => cy.findByText('M').click());
     });
   });