From 019a1e2c42392d8d70847df1578e662254c21268 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Mon, 27 Feb 2023 22:01:52 +0000 Subject: [PATCH] :fire: remove unused component library code (#704) --- packages/loot-design/manifest.json | 17 -- packages/loot-design/public/favicon.ico | Bin 24838 -> 0 bytes packages/loot-design/public/img/logo.svg | 56 ---- packages/loot-design/public/index.html | 71 ----- .../src/components/Autocomplete.usage.js | 55 ---- .../src/components/DateSelect.usage.js | 17 -- .../RecurringSchedulePicker.usage.js | 29 -- .../src/components/budget/index.usage.js | 261 ------------------ .../src/components/common.usage.js | 75 ----- .../loot-design/src/components/icons.usage.js | 58 ---- .../components/manager/BudgetList.usage.js | 33 --- .../components/manager/DeleteFile.usage.js | 26 -- .../src/components/manager/Import.usage.js | 21 -- .../components/modals/CloseAccount.usage.js | 51 ---- .../modals/ConfigureLinkedAccounts.usage.js | 58 ---- .../modals/CreateLocalAccount.usage.js | 16 -- .../modals/ImportTransactions.usage.js | 40 --- .../src/components/modals/LoadBackup.usage.js | 26 -- .../modals/PlaidExternalMsg.usage.js | 21 -- .../modals/SelectLinkedAccounts.usage.js | 58 ---- .../src/components/payees.usage.js | 132 --------- .../src/components/sidebar.usage.js | 60 ---- .../loot-design/src/components/table.usage.js | 164 ----------- packages/loot-design/src/guide/components.js | 161 ----------- packages/loot-design/src/guide/document.js | 133 --------- packages/loot-design/src/index.js | 7 - 26 files changed, 1646 deletions(-) delete mode 100644 packages/loot-design/manifest.json delete mode 100644 packages/loot-design/public/favicon.ico delete mode 100644 packages/loot-design/public/img/logo.svg delete mode 100644 packages/loot-design/public/index.html delete mode 100644 packages/loot-design/src/components/Autocomplete.usage.js delete mode 100644 packages/loot-design/src/components/DateSelect.usage.js delete mode 100644 packages/loot-design/src/components/RecurringSchedulePicker.usage.js delete mode 100644 packages/loot-design/src/components/budget/index.usage.js delete mode 100644 packages/loot-design/src/components/common.usage.js delete mode 100644 packages/loot-design/src/components/icons.usage.js delete mode 100644 packages/loot-design/src/components/manager/BudgetList.usage.js delete mode 100644 packages/loot-design/src/components/manager/DeleteFile.usage.js delete mode 100644 packages/loot-design/src/components/manager/Import.usage.js delete mode 100644 packages/loot-design/src/components/modals/CloseAccount.usage.js delete mode 100644 packages/loot-design/src/components/modals/ConfigureLinkedAccounts.usage.js delete mode 100644 packages/loot-design/src/components/modals/CreateLocalAccount.usage.js delete mode 100644 packages/loot-design/src/components/modals/ImportTransactions.usage.js delete mode 100644 packages/loot-design/src/components/modals/LoadBackup.usage.js delete mode 100644 packages/loot-design/src/components/modals/PlaidExternalMsg.usage.js delete mode 100644 packages/loot-design/src/components/modals/SelectLinkedAccounts.usage.js delete mode 100644 packages/loot-design/src/components/payees.usage.js delete mode 100644 packages/loot-design/src/components/sidebar.usage.js delete mode 100644 packages/loot-design/src/components/table.usage.js delete mode 100644 packages/loot-design/src/guide/components.js delete mode 100644 packages/loot-design/src/guide/document.js delete mode 100644 packages/loot-design/src/index.js diff --git a/packages/loot-design/manifest.json b/packages/loot-design/manifest.json deleted file mode 100644 index f35a885ed5..0000000000 --- a/packages/loot-design/manifest.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "compatibleVersion": 3, - "bundleVersion": 1, - "commands": [ - { - "name": "Loot", - "identifier": "main", - "script": "./src/sketch.js" - } - ], - "menu": { - "isRoot": true, - "items": [ - "main" - ] - } -} diff --git a/packages/loot-design/public/favicon.ico b/packages/loot-design/public/favicon.ico deleted file mode 100644 index 5c125de5d897c1ff5692a656485b3216123dcd89..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24838 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 - - - - - - - - - diff --git a/packages/loot-design/public/index.html b/packages/loot-design/public/index.html deleted file mode 100644 index acef06a156..0000000000 --- a/packages/loot-design/public/index.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - - React App - - - -
- - diff --git a/packages/loot-design/src/components/Autocomplete.usage.js b/packages/loot-design/src/components/Autocomplete.usage.js deleted file mode 100644 index 5a30440314..0000000000 --- a/packages/loot-design/src/components/Autocomplete.usage.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import Component from '@reactions/component'; - -import { Section } from '../guide/components'; - -import Autocomplete, { MultiAutocomplete } from './Autocomplete'; - -let items = [ - { id: 'one', name: 'James' }, - { id: 'two', name: 'Sarah' }, - { id: 'three', name: 'Evelina' }, - { id: 'four', name: 'Georgia' }, - { id: 'five', name: 'Charlotte' }, - { id: 'six', name: 'Fannie' }, - { id: 'seven', name: 'Lily' }, - { id: 'eight', name: 'Gray' }, -]; - -export default () => ( -
- Autocomplete - {}} - containerProps={{ style: { width: 300 } }} - /> - Multi Autocomplete - - {({ state, setState }) => ( - setState({ items })} - containerProps={{ style: { width: 300 } }} - /> - )} - - Multi Autocomplete (strict) - - {({ state, setState }) => ( - setState({ ids })} - containerProps={{ style: { width: 300 } }} - /> - )} - -
-); diff --git a/packages/loot-design/src/components/DateSelect.usage.js b/packages/loot-design/src/components/DateSelect.usage.js deleted file mode 100644 index a5e4959718..0000000000 --- a/packages/loot-design/src/components/DateSelect.usage.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Section } from '../guide/components'; - -import DateSelect from './DateSelect'; - -export default () => ( -
- Date Select - {}} - isOpen={true} - dateFormat="MM/dd/yyyy" - containerProps={{ style: { width: 300 } }} - /> -
-); diff --git a/packages/loot-design/src/components/RecurringSchedulePicker.usage.js b/packages/loot-design/src/components/RecurringSchedulePicker.usage.js deleted file mode 100644 index 89718e09d2..0000000000 --- a/packages/loot-design/src/components/RecurringSchedulePicker.usage.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -import { Section } from '../guide/components'; - -import { Button, View } from './common'; -import RecurringSchedulePicker from './RecurringSchedulePicker'; -import { useTooltip } from './tooltips'; - -export default () => { - const { isOpen, close, getOpenEvents } = useTooltip(); - const onChange = config => {}; - return ( -
- Default - - - {isOpen && ( - - )} - -
- ); -}; diff --git a/packages/loot-design/src/components/budget/index.usage.js b/packages/loot-design/src/components/budget/index.usage.js deleted file mode 100644 index 81942ee6ea..0000000000 --- a/packages/loot-design/src/components/budget/index.usage.js +++ /dev/null @@ -1,261 +0,0 @@ -import React from 'react'; -import { DndProvider } from 'react-dnd'; -import Backend from 'react-dnd-html5-backend'; - -import { generateCategoryGroups } from 'loot-core/src/mocks'; -import makeSpreadsheet from 'loot-core/src/mocks/spreadsheet'; -import * as monthUtils from 'loot-core/src/shared/months'; - -import { Section } from '../../guide/components'; -import { colors } from '../../style'; -import { View } from '../common'; -import SpreadsheetContext from '../spreadsheet/SpreadsheetContext'; - -import { BudgetMonthCountContext } from './BudgetMonthCountContext'; -import DynamicBudgetTable from './DynamicBudgetTable'; -import * as rollover from './rollover/rollover-components'; -import { RolloverContext } from './rollover/RolloverContext'; - -const categoryGroups = generateCategoryGroups([ - { - name: 'Investments and Savings', - categories: [ - { name: 'food' }, - { name: 'beer' }, - { name: 'home' }, - { name: 'general' }, - { name: 'bills' }, - ], - }, - { - name: 'other stuff', - categories: [ - { name: 'big projects' }, - { name: 'beer' }, - { name: 'home' }, - { name: 'general' }, - { name: 'bills' }, - { name: 'beer' }, - { name: 'home' }, - ], - }, - { - name: 'yet more stuff', - categories: [{ name: 'general' }, { name: 'bills' }], - }, - { - name: 'Income', - is_income: true, - categories: [ - { name: 'income', is_income: true }, - { name: 'salary', is_income: true }, - ], - }, -]); - -function makeLoadedSpreadsheet() { - let spreadsheet = makeSpreadsheet(); - let months = monthUtils.rangeInclusive( - monthUtils.subMonths('2017-01', 3), - '2017-10', - ); - - // Something random - let currentNumber = 2400; - - for (let month of months) { - // eslint-disable-next-line - function value(name, v) { - spreadsheet.set( - monthUtils.sheetForMonth(month), - name, - v || currentNumber++, - ); - } - - let values = [ - value('available-funds'), - value('last-month-overspent'), - value('buffered'), - value('total-budgeted'), - value('to-budget'), - - value('from-last-month'), - value('total-income'), - value('total-spent'), - value('total-leftover'), - ]; - - for (let group of categoryGroups) { - if (group.is_income) { - values.push(value('total-income')); - - for (let cat of group.categories) { - values.push(value(`sum-amount-${cat.id}`)); - } - } else { - values = values.concat([ - value(`group-budget-${group.id}`), - value(`group-sum-amount-${group.id}`), - value(`group-leftover-${group.id}`), - ]); - - for (let cat of group.categories) { - let carryover = Math.random() < 0.2 ? true : false; - values = values.concat([ - value(`budget-${cat.id}`), - value(`sum-amount-${cat.id}`), - value(`leftover-${cat.id}`, carryover ? -currentNumber : null), - value(`carryover-${cat.id}`, carryover), - ]); - } - } - } - } - - return spreadsheet; -} - -export class LiveBudgetPage extends React.Component { - state = { - startMonth: '2017-01', - categoryGroups, - collapsed: [], - newCategoryForGroup: false, - }; - - render() { - let { maxMonths } = this.props; - let { startMonth, categoryGroups, collapsed, newCategoryForGroup } = - this.state; - - let rolloverComponents = { - SummaryComponent: rollover.BudgetSummary, - ExpenseCategoryComponent: rollover.ExpenseCategoryMonth, - ExpenseGroupComponent: rollover.ExpenseGroupMonth, - IncomeCategoryComponent: rollover.IncomeCategoryMonth, - IncomeGroupComponent: rollover.IncomeGroupMonth, - BudgetTotalsComponent: rollover.BudgetTotalsMonth, - IncomeHeaderComponent: rollover.IncomeHeaderMonth, - }; - - return ( - - - - { - this.setState({ startMonth: month }); - }} - categoryGroups={categoryGroups} - collapsed={collapsed} - setCollapsed={collapsed => { - this.setState({ collapsed }); - }} - newCategoryForGroup={newCategoryForGroup} - dataComponents={rolloverComponents} - // onAddCategory={groupId => {}} - onSavePrefs={() => {}} - onShowNewCategory={groupId => { - this.setState({ - newCategoryForGroup: groupId, - collapsed: collapsed.filter(c => c !== groupId), - }); - }} - onHideNewCategory={() => { - this.setState({ newCategoryForGroup: null }); - }} - onSaveCategory={cat => { - if (cat.id === 'new') { - cat.id = Math.random().toString(); - - this.setState({ - categoryGroups: categoryGroups.map(group => { - if (group.id === cat.cat_group) { - return { - ...group, - categories: group.categories.concat([cat]), - }; - } - return group; - }), - newCategoryForGroup: null, - }); - } else { - this.setState({ - categoryGroups: categoryGroups.map(group => { - if (group.id === cat.cat_group) { - return { - ...group, - categories: group.categories.map(c => - c.id === cat.id ? cat : c, - ), - }; - } - return group; - }), - }); - } - }} - onSaveGroup={group => { - this.setState({ - categoryGroups: categoryGroups.map(g => - g.id === group.id ? group : g, - ), - }); - }} - onDeleteCategory={id => { - this.setState({ - categoryGroups: categoryGroups.map(group => { - return { - ...group, - categories: group.categories.filter(c => c.id !== id), - }; - }), - }); - }} - onDeleteGroup={id => - this.setState({ - categoryGroups: categoryGroups.filter(g => g.id !== id), - }) - } - onReorderCategory={sortInfo => {}} - onReorderGroup={sortInfo => {}} - /> - - - - ); - } -} - -export default () => ( - {} }}> - -
- Budget Table - -
- {/*
- Budget Table (2 months) - -
*/} - - -); diff --git a/packages/loot-design/src/components/common.usage.js b/packages/loot-design/src/components/common.usage.js deleted file mode 100644 index 6df1b9b9f6..0000000000 --- a/packages/loot-design/src/components/common.usage.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; - -import Component from '@reactions/component'; - -import { Section, TestModal } from '../guide/components'; - -import { Input, Modal, View, Button, Stack } from './common'; - -export default () => { - return ( -
- Input - alert(e.target.value)} /> - Buttons - - - - - - Modal - - {({ state, setState }) => { - return ( - - {node => { - let modals = []; - - for (let i = 0; i < state.modalCount; i++) { - let modalProps = { - onClose: () => - setState({ modalCount: state.modalCount - 1 }), - isCurrent: i === state.modalCount - 1, - stackIndex: i, - parent: node, - }; - - modals.push( - - - Pushin' and poppin' - - - - , - ); - } - - return modals; - }} - - ); - }} - -
- ); -}; diff --git a/packages/loot-design/src/components/icons.usage.js b/packages/loot-design/src/components/icons.usage.js deleted file mode 100644 index 4425f4580b..0000000000 --- a/packages/loot-design/src/components/icons.usage.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useState } from 'react'; - -import { Section } from '../guide/components'; - -import { View, Button } from './common'; - -const context = require.context('../svg/v1', false, /\.js$/); -const modules = {}; -context.keys().forEach(function (key) { - var module = context(key); - modules[key] = module; -}); - -function pathToName(path) { - const name = path.match(/^\.\/(.*)\.js$/)[1]; - return name[0].toUpperCase() + name.slice(1); -} - -export default () => { - let [show, setShow] = useState(false); - - return ( -
- {!show ? ( - - ) : ( - - {Object.keys(modules).map(path => { - const Component = modules[path].default; - return ( -
- {pathToName(path)} -
- -
-
- ); - })} - - )} -
- ); -}; diff --git a/packages/loot-design/src/components/manager/BudgetList.usage.js b/packages/loot-design/src/components/manager/BudgetList.usage.js deleted file mode 100644 index 1f7cac0b73..0000000000 --- a/packages/loot-design/src/components/manager/BudgetList.usage.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; -import { colors } from '../../style'; - -import BudgetList from './BudgetList'; - -const files = [ - { name: 'Finances 2', id: '1', state: 'local' }, - { name: 'James', id: '2', state: 'detached' }, - { name: 'Sarah', id: '3', state: 'broken' }, - { name: 'Finances', id: '4', state: 'broken' }, - { name: 'Finances 2', id: '5', state: 'synced' }, - { name: 'Finances 2', id: '6', state: 'remote' }, - { name: 'Shift Reset LLC', id: '7' }, - { name: 'Shift Reset LLC', id: '8', state: 'unknown' }, -]; - -export default () => ( -
- Budget List Modal - - {node => ( - - )} - -
-); diff --git a/packages/loot-design/src/components/manager/DeleteFile.usage.js b/packages/loot-design/src/components/manager/DeleteFile.usage.js deleted file mode 100644 index f8c18a73e4..0000000000 --- a/packages/loot-design/src/components/manager/DeleteFile.usage.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; -import { colors } from '../../style'; - -import DeleteFile from './DeleteFile'; - -export default () => ( -
- Budget List Modal - - {node => ( - - )} - -
-); diff --git a/packages/loot-design/src/components/manager/Import.usage.js b/packages/loot-design/src/components/manager/Import.usage.js deleted file mode 100644 index f2dc140894..0000000000 --- a/packages/loot-design/src/components/manager/Import.usage.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; -import { colors } from '../../style'; - -import Import from './Import'; - -export default () => ( -
- Import - - {node => ( - [] }} - /> - )} - -
-); diff --git a/packages/loot-design/src/components/modals/CloseAccount.usage.js b/packages/loot-design/src/components/modals/CloseAccount.usage.js deleted file mode 100644 index 84cc67e703..0000000000 --- a/packages/loot-design/src/components/modals/CloseAccount.usage.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { MemoryRouter as Router } from 'react-router-dom'; - -import { generateAccount, generateCategoryGroups } from 'loot-core/src/mocks'; - -import { Section, TestModal } from '../../guide/components'; - -import CloseAccount from './CloseAccount'; - -const accounts = [ - generateAccount('Bank of America', null, null, false), - generateAccount('Wells Fargo', null, null, false), - generateAccount('Ally', null, null, false), - generateAccount('Savings', null, null, true), - generateAccount('Another', null, null, true), -]; - -const categoryGroups = generateCategoryGroups([ - { - name: 'Investments and Savings', - categories: [{ name: 'Savings' }], - }, - { - name: 'Usual Expenses', - categories: [{ name: 'Food' }, { name: 'General' }, { name: 'Home' }], - }, - { - name: 'Projects', - categories: [{ name: 'Big Projects' }, { name: 'Shed' }], - }, -]); - -export default () => ( - -
- Close Account Modal - - {node => ( - - )} - -
- -); diff --git a/packages/loot-design/src/components/modals/ConfigureLinkedAccounts.usage.js b/packages/loot-design/src/components/modals/ConfigureLinkedAccounts.usage.js deleted file mode 100644 index 8788ffdfee..0000000000 --- a/packages/loot-design/src/components/modals/ConfigureLinkedAccounts.usage.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; - -import ConfigureLinkedAccounts from './ConfigureLinkedAccounts'; - -export default () => ( -
- Link Account Modal - - {node => ( - - )} - -
-); diff --git a/packages/loot-design/src/components/modals/CreateLocalAccount.usage.js b/packages/loot-design/src/components/modals/CreateLocalAccount.usage.js deleted file mode 100644 index 9ff51648a8..0000000000 --- a/packages/loot-design/src/components/modals/CreateLocalAccount.usage.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; - -import CreateLocalAccount from './CreateLocalAccount'; - -export default () => ( -
- Create Account Modal - - {node => ( - - )} - -
-); diff --git a/packages/loot-design/src/components/modals/ImportTransactions.usage.js b/packages/loot-design/src/components/modals/ImportTransactions.usage.js deleted file mode 100644 index c928e14112..0000000000 --- a/packages/loot-design/src/components/modals/ImportTransactions.usage.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; - -import { generateTransactions } from 'loot-core/src/mocks'; -import { TestProvider } from 'loot-core/src/mocks/redux'; - -import { Section, TestModal } from '../../guide/components'; - -import { ImportTransactions } from './ImportTransactions'; - -let transactions = generateTransactions(20, 'acct', 'group'); -// The mocks generate "internal" transactions... but we need the -// "public" shape. Will reconcile this difference over time. -transactions = transactions.map(trans => ({ - amount: trans.amount, - date: trans.date, - payee: trans.description, - imported_payee: trans.description, - notes: trans.notes, -})); - -export default () => ( -
- Import Transactions Modal - - - {node => ( - ({ - errors: [], - transactions, - })} - prefs={{}} - /> - )} - - -
-); diff --git a/packages/loot-design/src/components/modals/LoadBackup.usage.js b/packages/loot-design/src/components/modals/LoadBackup.usage.js deleted file mode 100644 index 911fef1b7b..0000000000 --- a/packages/loot-design/src/components/modals/LoadBackup.usage.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; -import { colors } from '../../style'; - -import LoadBackup from './LoadBackup'; - -const backups = [ - { date: 'December 23, 2017 4:08 PM', id: 'sdflkj23' }, - { date: 'January 21, 2018 4:20 PM', id: 'ds10dsm23rlk' }, - { date: 'February 22, 2018 3:54 PM', id: 'k3dsjndlwe' }, -]; - -export default () => ( -
- Backup List Modal - - {node => ( - - )} - -
-); diff --git a/packages/loot-design/src/components/modals/PlaidExternalMsg.usage.js b/packages/loot-design/src/components/modals/PlaidExternalMsg.usage.js deleted file mode 100644 index a288ff677d..0000000000 --- a/packages/loot-design/src/components/modals/PlaidExternalMsg.usage.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; - -import PlaidExternalMsg from './PlaidExternalMsg'; - -export default () => ( -
- Plaid External Msg Modal - - {node => ( - - )} - -
-); diff --git a/packages/loot-design/src/components/modals/SelectLinkedAccounts.usage.js b/packages/loot-design/src/components/modals/SelectLinkedAccounts.usage.js deleted file mode 100644 index 2e56a6cd44..0000000000 --- a/packages/loot-design/src/components/modals/SelectLinkedAccounts.usage.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; - -import { Section, TestModal } from '../../guide/components'; - -import SelectLinkedAccounts from './SelectLinkedAccounts'; - -export default () => ( -
- Link Account Modal - - {node => ( - - )} - -
-); diff --git a/packages/loot-design/src/components/payees.usage.js b/packages/loot-design/src/components/payees.usage.js deleted file mode 100644 index 6489f44173..0000000000 --- a/packages/loot-design/src/components/payees.usage.js +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react'; - -import Component from '@reactions/component'; - -import { TestProvider } from 'loot-core/src/mocks/redux'; -import { applyChanges } from 'loot-core/src/shared/util'; - -import { Section, TestModal } from '../guide/components'; - -import { ManagePayees } from './payees'; - -let categoryGroups = [ - { - id: 'foo', - name: 'Investments and Savings', - is_income: 0, - sort_order: 1, - categories: [{ id: 'savings', name: 'Savings' }], - }, - { - id: 'usual', - name: 'Usual Expenses', - is_income: 0, - sort_order: 2, - categories: [ - { id: 'food', name: 'Food' }, - { id: 'general', name: 'General' }, - { id: 'home', name: 'Home' }, - ], - }, - { - id: 'projects', - name: 'Projects', - categories: [ - { id: 'big', name: 'Big Projects' }, - { id: 'shed', name: 'Shed' }, - ], - }, -]; - -let payees = [ - { id: 'one', name: 'Kroger', ruleCount: 1 }, - { - id: 'two', - name: 'Lowes', - category: categoryGroups[1].categories[1].id, - ruleCount: 1, - }, - { id: 'three', name: 'Publix', ruleCount: 1 }, - { id: 'four', name: 'Verizon', ruleCount: 3 }, - { id: 'eight', name: 'Aldi', ruleCount: 3 }, - { id: 'nine', name: 'T-Mobile', ruleCount: 2 }, - { id: 'ten', name: 'Google', ruleCount: 1 }, - { id: 'el', name: 'Sentry', ruleCount: 1 }, - { id: 'tw', name: 'Aldi', ruleCount: 2 }, - { id: 'th', name: 'T-Mobile', ruleCount: 3 }, - { id: 'fou', name: 'Google', ruleCount: 1 }, - { id: 'fifff', name: 'Sentry', ruleCount: 2 }, - { id: 'sixxx', name: 'Aldi', ruleCount: 1 }, - { id: 'nine1', name: 'T-Mobile', ruleCount: 2 }, - { id: 'ten1', name: 'Google', ruleCount: 1 }, - { id: 'el1', name: 'Sentry', ruleCount: 1 }, - { id: 'tw1', name: 'Aldi', ruleCount: 2 }, - { id: 'th1', name: 'T-Mobile', ruleCount: 3 }, - { id: 'fou1', name: 'Google', ruleCount: 1 }, - { id: 'fifff1', name: 'Sentry', ruleCount: 2 }, - { id: 'sixxx1', name: 'Aldi', ruleCount: 1 }, - { id: 'five', name: 'T-Mobile', transfer_acct: 'one', ruleCount: 5 }, - { id: 'six', name: 'Google', transfer_acct: 'one', ruleCount: 1 }, - { id: 'seven', name: 'Sentry', transfer_acct: 'one', ruleCount: 1 }, -]; - -for (let i = 0; i < 4; i++) { - payees = payees.concat(payees.map(p => ({ ...p, id: p.id + i }))); -} - -let defaultRules = [ - { id: '1', type: 'equals', value: 'target' }, - { id: '2', type: 'contains', value: 'targ#' }, -]; - -export default () => ( -
- Manage Payees - - - {node => ( - - {({ state, setState }) => { - let onViewRules = () => setState({ isCurrent: false }); - - return ( - setState({ isCurrent: true }), - }} - payees={state.payees} - ruleCounts={ - new Map([ - ['three', 1], - ['tw', 3], - ]) - } - categoryGroups={categoryGroups} - onBatchChange={changes => { - setState({ payees: applyChanges(changes, state.payees) }); - }} - onViewRules={onViewRules} - initialSelectedIds={new Set([])} - ruleActions={{ - loadRules: () => - new Promise(resolve => resolve(state.rules)), - deleteRule: id => {}, - saveRule: rule => {}, - addRule: rule => { - return { ...rule, id: Math.random().toString() }; - }, - listenForUndo: () => {}, - }} - /> - ); - }} - - )} - - -
-); diff --git a/packages/loot-design/src/components/sidebar.usage.js b/packages/loot-design/src/components/sidebar.usage.js deleted file mode 100644 index 5f813390b7..0000000000 --- a/packages/loot-design/src/components/sidebar.usage.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import { DndProvider } from 'react-dnd'; -import Backend from 'react-dnd-html5-backend'; -import { MemoryRouter as Router } from 'react-router-dom'; - -import lively from '@jlongster/lively'; - -import { generateAccount } from 'loot-core/src/mocks'; -import makeSpreadsheet from 'loot-core/src/mocks/spreadsheet'; - -import { Section } from '../guide/components'; - -import { Sidebar } from './sidebar'; -import SpreadsheetContext from './spreadsheet/SpreadsheetContext'; - -function withState(state, render) { - const Component = lively(render, { getInitialState: () => state }); - return ; -} - -const accounts = [ - generateAccount('Bank of America', true), - generateAccount('Wells Fargo', true), - generateAccount('Ally'), - { ...generateAccount('401k'), closed: 1 }, - { ...generateAccount('Old Savings'), closed: 1 }, -]; - -function makeSidebar(selected) { - return withState({ selected }, ({ state: { selected }, setState }) => { - return ( - - - ({ expr: 10000 })} - getOnBudgetBalance={() => ({ expr: 30000 })} - getOffBudgetBalance={() => ({ expr: 10000 })} - showClosedAccounts={true} - style={{ paddingBottom: 100 }} - /> - - - ); - }); -} - -export default () => ( - -
- Sidebar - {makeSidebar('/budget')} - Sidebar Sidebar with Accounts Selected - {makeSidebar('/accounts')} - Sidebar Sidebar with One Account Selected - {makeSidebar('/accounts/' + accounts[1].id)} -
- -); diff --git a/packages/loot-design/src/components/table.usage.js b/packages/loot-design/src/components/table.usage.js deleted file mode 100644 index bea61a3f51..0000000000 --- a/packages/loot-design/src/components/table.usage.js +++ /dev/null @@ -1,164 +0,0 @@ -import React, { useState } from 'react'; - -import { Section, Component } from '../guide/components'; - -import { View, Text } from './common'; -import { - TableWithNavigator as Table, - Row, - Cell, - InputCell, - useTableNavigator, -} from './table'; - -let uuid = require('loot-core/src/platform/uuid'); - -function PersonRow({ person, editing, focusedField, onEdit, onUpdate }) { - let { id } = person; - return ( - - onUpdate(id, 'name', value)} - onExpose={() => onEdit(id, 'name')} - /> - {person.poop ? ( - onUpdate(id, 'poop', value)} - onExpose={() => onEdit(id, 'poop')} - /> - ) : ( - - )} - onUpdate(id, 'age', value)} - onExpose={() => onEdit(id, 'age')} - /> - onUpdate(id, 'height', value)} - onExpose={() => onEdit(id, 'height')} - /> - - ); -} - -let people = [ - { id: 1, name: 'James', age: 34, height: 6 }, - { id: 2, name: 'Sarah', poop: 1, age: 33, height: 5.6 }, - { id: 3, name: 'Evy', age: 4, height: 3 }, - { id: 4, name: 'Georgia', poop: 2, age: 3, height: 2.5 }, - { id: 5, name: 'Charlotte', age: 0, height: 1.2 }, -]; - -let getFields = item => - item.poop ? ['name', 'poop', 'age', 'height'] : ['name', 'age', 'height']; - -export default () => ( -
- Input Cell Example - - {() => { - let [value, setValue] = useState('hello'); - let [exposed, setExposed] = useState(false); - - return ( - - setValue(value)} - onExpose={() => setExposed(true)} - onBlur={() => setExposed(false)} - style={{ height: 30 }} - /> - {value} - - ); - }} - - Multiple Cells - - {() => { - let [items, setItems] = useState(() => { - return [...people]; - }); - let { onEdit, editingId, focusedField, getNavigatorProps } = - useTableNavigator(items, getFields); - - function onUpdate(id, name, value) { - let idx = items.findIndex(item => item.id === id); - items[idx] = { ...items[idx], [name]: value }; - setItems(items); - } - - return ( - - {items.map(item => { - let editing = editingId === item.id; - return ( - - ); - })} - - ); - }} - - Using Table - - {() => { - let [items, setItems] = useState(() => { - let lots = []; - for (let i = 0; i < 100; i++) { - lots = lots.concat( - people.map(person => ({ ...person, id: uuid.v4Sync() })), - ); - } - return lots; - }); - - function onUpdate(id, name, value) { - let idx = items.findIndex(item => item.id === id); - items[idx] = { ...items[idx], [name]: value }; - setItems(items); - } - - return ( - ( - - )} - /> - ); - }} - - -); diff --git a/packages/loot-design/src/guide/components.js b/packages/loot-design/src/guide/components.js deleted file mode 100644 index cf7e50d48a..0000000000 --- a/packages/loot-design/src/guide/components.js +++ /dev/null @@ -1,161 +0,0 @@ -import React from 'react'; - -import { css } from 'glamor'; - -export function Section({ - children, - style, - contentStyle, - direction = 'vertical', -}) { - const arr = React.Children.toArray(children); - - const items = []; - let i = 0; - while (i < arr.length) { - if (typeof arr[i] !== 'string') { - items.push(arr[i]); - i++; - } else { - items.push([arr[i], arr[i + 1]]); - i += 2; - } - } - - const margin = direction === 'horizontal' ? '0 15px' : '15px 0'; - - return ( -
- {items.map((item, i) => { - return Array.isArray(item) ? ( -
-
- {item[0]} -
- -
{item[1]}
-
- ) : ( -
- {item} -
- ); - })} -
- ); -} - -export function MobileSection({ style, headerComponent, children }) { - return ( -
- {children} -
- ); -} - -export function WithHeader({ title, style, children }) { - return ( -
-
- {title} -
- {children} -
- ); -} - -export function MobileScreen({ children }) { - return ( -
- {children} -
- ); -} - -export function Note({ top, left, width, children }) { - return ( -
- {children} -
- ); -} - -export class TestModal extends React.Component { - state = { parentNode: null }; - - componentDidMount() { - this.setState({ parentNode: this.parent }); - } - - render() { - const { children, backgroundColor, width = 800, height = 500 } = this.props; - const { parentNode } = this.state; - - return [ -
(this.parent = el)} - style={{ - width, - height, - position: 'relative', - backgroundColor: backgroundColor || '#f0f0f0', - }} - />, - parentNode && children(parentNode), - ]; - } -} - -export function Component({ children }) { - return children(); -} diff --git a/packages/loot-design/src/guide/document.js b/packages/loot-design/src/guide/document.js deleted file mode 100644 index 2c34d0102b..0000000000 --- a/packages/loot-design/src/guide/document.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Text, View, render as renderReactNative } from 'react-native'; - -import Platform from 'loot-core/src/client/platform'; -import { TestProvider } from 'loot-core/src/mocks/redux'; - -global.IS_DESIGN_MODE = true; -window.Actual = { - IS_FAKE_WEB: true, -}; - -const modules = {}; - -function pathToName(path) { - const name = path.match('./(.*).usage.js', '')[1]; - return name[0].toUpperCase() + name.slice(1); -} - -function Usage({ name, render }) { - return ( - -
-

{name}

- {render()} -
- - ); -} - -async function installPolyfills() { - if ('ResizeObserver' in window === false) { - const module = await import('@juggle/resize-observer'); - window.ResizeObserver = module.ResizeObserver; - } -} - -export default async function render(rootNode) { - await installPolyfills(); - - let filterMatch = window.location.search.match(/f=(.*)/); - let filter = filterMatch ? filterMatch[1] : ''; - - const guides = Object.keys(modules) - .map(path => { - // Do I need key??? - return { - path, - name: pathToName(path), - key: path, - }; - }) - .filter(guide => guide.path.toLowerCase().includes(filter.toLowerCase())) - .sort(); - - guides.forEach(({ path, name, key }) => { - const isMobileComponent = path.includes('/mobile'); - - if (Platform.isReactNativeWeb !== isMobileComponent) { - // Skip if the component is not for this environment - return; - } - - const mount = document.createElement('div'); - mount.id = path; - rootNode.appendChild(mount); - - if (Platform.isReactNativeWeb) { - mount.style.float = 'left'; - - renderReactNative( - - - {name} - - {modules[key].default()} - , - mount, - ); - } else { - ReactDOM.render( - , - mount, - ); - } - }); -} - -// Hot modules - -var context = require.context('../components', true, /\.usage.js$/); - -context.keys().forEach(function (key) { - var module = context(key); - modules[key] = module; -}); - -if (module.hot) { - module.hot.accept(context.id, function () { - var reloadedContext = require.context('../components', true, /\.usage.js$/); - var changedModules = reloadedContext - .keys() - .map(function (key) { - return [key, reloadedContext(key)]; - }) - .filter(function (reloadedModule) { - return modules[reloadedModule[0]] !== reloadedModule[1]; - }); - changedModules.forEach(function (module) { - modules[module[0]] = module[1]; - reloadUsage(module[0], module[1]); - }); - }); -} - -function reloadUsage(path, module) { - try { - const scrollTop = document.documentElement.scrollTop; - const mount = document.getElementById(path); - ReactDOM.unmountComponentAtNode(mount); - ReactDOM.render( - , - mount, - ); - document.documentElement.scrollTop = scrollTop; - } catch (e) { - console.log(e); - } -} diff --git a/packages/loot-design/src/index.js b/packages/loot-design/src/index.js deleted file mode 100644 index 00d88e3f54..0000000000 --- a/packages/loot-design/src/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import { plugins } from 'glamor'; - -import renderDocument from './guide/document'; - -plugins.clear(); - -renderDocument(document.getElementById('root'));