Initial commit. It's working!

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

.env.sample

@@ -0,0 +1 @@
+NODE_PATH=/

.eslintrc.js

@@ -0,0 +1,96 @@
+const eslint = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'airbnb',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+  ],
+  rules: {
+    semi: 2,
+    'max-len': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-no-bind': 'off',
+    'react/jsx-one-expression-per-line': 'off',
+    'react/destructuring-assignment': 'off',
+    'react/forbid-prop-types': 'off',
+    'react/prefer-stateless-function': 'off',
+    'react/no-danger': 'off',
+    'no-console': 'off',
+    'no-param-reassign': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'implicit-arrow-linebreak': 'off',
+    'object-curly-newline': 'off',
+    'react/jsx-closing-tag-location': 'off',
+    'no-restricted-syntax': 'off',
+    'operator-linebreak': 'off',
+    'arrow-body-style': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'react/jsx-filename-extension': [
+      1,
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    ],
+    'no-underscore-dangle': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'jsx-a11y/html-has-lang': 'off',
+    'spaced-comment': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    'react/no-array-index-key': 'off',
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'import/first': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'no-await-in-loop': 'off',
+    'react/no-did-update-set-state': 'off',
+    'no-continue': 'off',
+    'react/no-unescaped-entities': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'react/require-default-props': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'function-paren-newline': 'off',
+    'no-confusing-arrow': 'off',
+    'react/jsx-curly-newline': 'off',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    useJSXTextNode: true,
+    extraFileExtensions: ['.ts', '.tsx'],
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['.'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  plugins: ['react', '@typescript-eslint'],
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+};
+
+module.exports = eslint;

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [BrunoBernardino]
+custom: ["https://paypal.me/brunobernardino", "https://gist.github.com/BrunoBernardino/ff5b54c13dd96ac7f9fee6fbfd825b09"]

.github/workflows/ci.yml

@@ -0,0 +1,18 @@
+name: Run Tests
+
+on: [push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+      - run: |
+          make install
+      - run: |
+          make test/ci
+        env:
+          CI: true

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+*.log
+.env
+.next
+.env.build
+.vercel

.nvmrc

@@ -0,0 +1 @@
+v12.16.1

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+package-lock.json
+.vercel

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  singleQuote: true,
+  arrowParens: 'always',
+};

.vercelignore

@@ -0,0 +1,11 @@
+.git
+.github
+.next
+node_modules
+*.log
+README.md
+Makefile
+*.test.js
+*.test.jsx
+*.test.ts
+*.test.tsx

Makefile

@@ -0,0 +1,39 @@
+.PHONY: install
+install:
+	-cp -n .env.sample .env
+	npm install
+
+.PHONY: start
+start:
+	npm run dev
+
+.PHONY: test
+test:
+	make lint
+	npm run test
+
+.PHONY: test/update
+test/update:
+	make lint
+	npm run test -- -u
+
+.PHONY: test/pretty
+test/pretty:
+	npm run pretty/test
+
+.PHONY: test/ci
+test/ci:
+	make test/pretty
+	make test
+
+.PHONY: lint
+lint:
+	npm run lint
+
+.PHONY: pretty
+pretty:
+	npm run pretty
+
+.PHONY: deploy
+deploy:
+	vercel --prod

README.md

@@ -0,0 +1,26 @@
+# Budget Zen - App
+
+[![](https://github.com/BrunoBernardino/budgetzen-app/workflows/Run%20Tests/badge.svg)](https://github.com/BrunoBernardino/budgetzen-app/actions?workflow=Run+Tests)
+
+This is the web app for the [Budget Zen app](https://budgetzen.net), built with Next.js and deployed with Vercel.
+
+It runs completely in the browser, using `localStorage` and `IndexedDB`.
+
+It's not thoroughly tested just yet, so it's available but not announced.
+
+## Development
+
+```bash
+make install  # installs dependencies
+make start  # starts the app
+make pretty  # prettifies the code
+make test  # runs linting and tests
+make deploy  # deploys to app.budgetzen.net (requires `vercel` to be installed globally)
+```
+
+## TODOs
+
+- [ ] Improve initial screen
+- [ ] Improve UI/UX in general
+- [ ] Improve dark/light mode
+- [ ] Improve mobile view (collapse panels and show tab bar to navigate between them?)

components/Budget/index.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { formatNumber } from 'lib/utils';
+import { colors, fontSizes } from 'lib/constants';
+
+import * as T from 'lib/types';
+
+interface BudgetProps extends T.Budget {
+  currency: T.Currency;
+  onClick: () => void;
+  expensesCost: number;
+}
+
+type ContainerProps = {
+  isTotal: boolean;
+};
+
+const Container = styled.section<ContainerProps>`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 14px 16px;
+  border-radius: 12px;
+  box-shadow: 0px 0px 4px
+    rgba(0, 0, 0, ${({ isTotal }) => (isTotal ? '0.2' : '0.1')});
+  background-color: ${({ isTotal }) =>
+    isTotal ? colors().secondaryBackground : colors().background};
+  margin: 8px;
+  cursor: pointer;
+  min-width: 200px;
+  &:hover {
+    box-shadow: 0px 0px 4px
+      rgba(0, 0, 0, ${({ isTotal }) => (isTotal ? '0.5' : '0.3')});
+  }
+`;
+
+const LeftColumn = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+
+const Cost = styled.span`
+  color: ${colors().text};
+  font-size: ${fontSizes.label}px;
+  font-weight: bold;
+  text-align: left;
+`;
+
+const Name = styled.span`
+  color: ${colors().text};
+  font-size: ${fontSizes.text}px;
+  font-weight: normal;
+  text-align: left;
+  margin-top: 6px;
+`;
+
+const BudgetMissing = styled.div`
+  color: ${colors().secondaryText};
+  font-size: ${fontSizes.largeText}px;
+  font-weight: normal;
+  text-align: right;
+`;
+
+const Budget = (props: BudgetProps) => {
+  const budgetMissing = props.value - props.expensesCost;
+  return (
+    <Container isTotal={props.name === 'Total'} onClick={props.onClick}>
+      <LeftColumn>
+        <Cost>
+          {formatNumber(props.currency, props.expensesCost)} of{' '}
+          {formatNumber(props.currency, props.value)}
+        </Cost>
+        <Name>{props.name}</Name>
+      </LeftColumn>
+      <BudgetMissing>
+        {formatNumber(props.currency, budgetMissing)}
+      </BudgetMissing>
+    </Container>
+  );
+};
+
+export default Budget;