@layerfi/components 0.1.1 → 0.1.3

package/dist/index.esm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Hello/Hello.tsx", "../src/components/Transactions/Transactions.tsx", "../src/contexts/LayerContext/LayerContext.tsx", "../src/components/RadioButtonGroup/RadioButtonGroup.tsx", "../src/components/RadioButtonGroup/RadioButton.tsx", "../src/components/Transactions/TransactionRow.tsx", "../src/models/Money.ts", "../src/components/CategoryMenu/CategoryMenu.tsx", "../src/components/CategoryMenu/CategoryMenuItem.tsx", "../src/providers/LayerProvider/LayerProvider.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport './Hello.css'\nimport useSWR from 'swr'\n\ntype Props = {\n  user?: string | undefined\n}\n\nconst fetcher = url => fetch(url).then(res => res.json())\n\nexport const Hello = ({ user }: Props) => {\n  const { data, isLoading } = useSWR(\n    `https://api.github.com/users/${user || 'jyurek'}`,\n    fetcher,\n  )\n  const name = (isLoading ? '...' : data?.name) || 'User'\n  return (\n    <>\n      <div className=\"hello\">Hello, {name}!</div>\n    </>\n  )\n}\n", "import React, { useState, useContext } from 'react'\nimport { LayerContext } from '../../contexts/LayerContext'\nimport { Transaction, CategorizationStatus } from '../../types'\nimport { RadioButtonGroup } from '../RadioButtonGroup'\nimport { TransactionRow } from './TransactionRow'\nimport './Transactions.css'\nimport useSWR from 'swr'\n\nconst dateFormat = 'MM/dd/yyyy'\n\nconst fetchTransactions = (accessToken: string) => (url: string) =>\n  fetch(url, {\n    headers: {\n      Authorization: 'Bearer ' + accessToken,\n      'Content-Type': 'application/json',\n    },\n    method: 'GET',\n  }).then(res => res.json())\n\nconst filterVisibility = (display: Display) => (transaction: Transaction) => {\n  const categorized = [\n    CategorizationStatus.CATEGORIZED,\n    CategorizationStatus.JOURNALING,\n    CategorizationStatus.SPLIT,\n  ].includes(transaction.categorization_status)\n  const inReview = [\n    CategorizationStatus.READY_FOR_INPUT,\n    CategorizationStatus.LAYER_REVIEW,\n  ].includes(transaction.categorization_status)\n  return (\n    (display === 'review' && inReview) ||\n    (display === 'categorized' && categorized)\n  )\n}\n\ntype Props = {}\n\nexport const Transactions = (props: Props) => {\n  const { auth, businessId } = useContext(LayerContext)\n  const [display, setDisplay] = useState<'review' | 'categorized'>('review')\n  const { data, isLoading } = useSWR(\n    auth?.access_token &&\n      `https://sandbox.layerfi.com/v1/businesses/${businessId}/bank-transactions`,\n    fetchTransactions(auth?.access_token),\n  )\n  const transactions = ((!isLoading && data?.data) || []).filter(\n    filterVisibility(display),\n  )\n  const onCategorizationDisplayChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => setDisplay(event.target.value)\n  const [openRows, setOpenRows] = useState<Record<string, boolean>>({})\n  const toggleOpen = (id: string) =>\n    setOpenRows({ ...openRows, [id]: !openRows[id] })\n  return (\n    <div className=\"transactions\" data-display={display}>\n      <header>\n        <h1>Transactions</h1>\n        <RadioButtonGroup\n          name=\"transaction-display\"\n          buttons={[\n            { label: 'To Review', value: 'review' },\n            { label: 'Categorized', value: 'categorized' },\n          ]}\n          selected={display}\n          onChange={onCategorizationDisplayChange}\n        />\n      </header>\n      <div className=\"transaction-table\">\n        <div className=\"header\">\n          <input type=\"checkbox\" />\n        </div>\n        <div className=\"header\">Date</div>\n        <div className=\"header\">Transaction</div>\n        <div className=\"header\">Account</div>\n        <div className=\"header\">Amount</div>\n        <div className=\"header\">Category</div>\n        <div className=\"header\">Action</div>\n        <div className=\"header\"></div>\n        {transactions.map(transaction => (\n          <TransactionRow\n            key={transaction.id}\n            dateFormat={dateFormat}\n            transaction={transaction}\n            isOpen={openRows[transaction.id]}\n            toggleOpen={toggleOpen}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n", "import { createContext } from 'react'\nimport { LayerExecutionContext } from '../../types'\n\nexport const LayerContext = createContext<LayerExecutionContext>({\n  auth: undefined,\n  businessId: '',\n  categories: [],\n})\n", "import React, { useState } from 'react'\nimport { RadioButton } from './RadioButton'\n\nexport type RadioButtonLabel = {\n  label: string\n  value: string\n}\n\ntype Props = {\n  name: string\n  buttons: RadioButtonLabel[]\n  selected?: Pick<RadioButtonLabel, 'value'>\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const RadioButtonGroup = ({\n  name,\n  buttons,\n  onChange,\n  selected,\n}: Props) => {\n  const selectedValue = selected || buttons[0].value\n  return (\n    <div className=\"radio-group\">\n      {buttons.map(button => (\n        <RadioButton\n          {...button}\n          key={button.value}\n          name={name}\n          checked={selectedValue === button.value}\n          onChange={onChange}\n        />\n      ))}\n    </div>\n  )\n}\n", "import React from 'react'\n\ntype Props = {\n  checked: boolean\n  label: string\n  name: string\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  value: string\n}\n\nexport const RadioButton = ({\n  checked,\n  label,\n  name,\n  onChange,\n  value,\n}: Props) => {\n  return (\n    <label>\n      <input\n        type=\"radio\"\n        checked={checked}\n        name={name}\n        onChange={onChange}\n        value={value}\n      />\n      <div>{label}</div>\n    </label>\n  )\n}\n", "import React from 'react'\nimport { Money } from '../../models/Money'\nimport { Transaction } from '../../types'\nimport { CategoryMenu } from '../CategoryMenu'\nimport { parseISO, format as formatTime } from 'date-fns'\n\ntype Props = {\n  dateFormat: string\n  transaction: Transaction\n  isOpen: boolean\n  toggleOpen: (id: string) => void\n}\n\nexport const TransactionRow = ({\n  dateFormat,\n  transaction,\n  isOpen,\n  toggleOpen,\n}: Props) => (\n  <>\n    <div>\n      <input type=\"checkbox\" />\n    </div>\n    <div>{formatTime(parseISO(transaction.date), dateFormat)}</div>\n    <div>{Money.format(transaction)}</div>\n    <div>Business Checking</div>\n    <div>{transaction.counterparty_name}</div>\n    <div data-selected={transaction?.category?.category}>\n      <CategoryMenu selectedCategory={transaction?.category?.category} />\n    </div>\n    <div></div>\n    <div\n      onClick={() => toggleOpen(transaction.id)}\n      style={{ cursor: 'pointer' }}\n    >\n      &#x1F3AF;\n    </div>\n    {isOpen && (\n      <div className=\"expand-area\">\n        <div className=\"expand-content\">Hello!</div>\n      </div>\n    )}\n  </>\n)\n", "import { Transaction } from '../types'\n\ntype FormatParameters = Pick<Transaction, 'amount'> &\n  Pick<Partial<Transaction>, 'direction'>\nconst format = ({ amount, direction }: FormatParameters) =>\n  (direction === 'CREDIT' ? '+' : '-') +\n  Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(\n    amount / 100,\n  )\n\nexport const Money = {\n  format,\n}\n", "import React, { useContext } from 'react'\nimport { LayerContext } from '../../contexts/LayerContext'\nimport { CategoryMenuItem } from './CategoryMenuItem'\n\ntype Props = {\n  selectedCategory: string\n}\n\nexport const CategoryMenu = ({ selectedCategory }: Props) => {\n  const { categories } = useContext(LayerContext)\n  return (\n    <select>\n      {categories.map(category => (\n        <CategoryMenuItem\n          category={category}\n          selectedCategory={selectedCategory}\n        />\n      ))}\n    </select>\n  )\n}\n", "import React, { useContext } from 'react'\nimport { Category } from '../../types'\n\ntype Props = {\n  selectedCategory: string\n  category: Category\n  maxDepth?: number\n}\n\nexport const CategoryMenuItem = ({\n  selectedCategory,\n  category,\n  maxDepth = 1,\n}: Props) => {\n  if (category.hasOwnProperty('subCategories') && maxDepth > 0) {\n    return (\n      <optgroup label={category.display_name}>\n        {category.subCategories.map(category => (\n          <CategoryMenuItem\n            category={category}\n            selectedCategory={selectedCategory}\n            maxDepth={maxDepth - 1}\n          />\n        ))}\n      </optgroup>\n    )\n  } else {\n    return (\n      <option\n        key={category.category}\n        value={category.category}\n        selected={selectedCategory === category.category}\n      >\n        {category.display_name}\n      </option>\n    )\n  }\n}\n", "import React, { PropsWithChildren } from 'react'\nimport { LayerContext } from '../../contexts/LayerContext'\nimport { LayerExecutionContext } from '../../types'\nimport useSWR from 'swr'\n\nconst appId = '1pskub33qd9qt19406hi4d1j6f'\nconst appSecret = '1k7up1ia2m0ino8el6md2l1isq3t7fdj1eq6firmkui8757lk6r6'\n\nexport async function getAccessToken(): Promise<OAuthResponse> {\n  var details = {\n    grant_type: 'client_credentials',\n    scope: 'https://sandbox.layerfi.com/sandbox',\n    client_id: 'canaryAppId',\n  }\n\n  const formBody = Object.entries(details)\n    .map(key => encodeURIComponent(key[0]) + '=' + encodeURIComponent(key[1]))\n    .join('&')\n  const authRequest = fetch('https://auth.layerfi.com/oauth2/token', {\n    method: 'POST',\n    headers: {\n      Authorization: 'Basic ' + btoa(appId + ':' + appSecret),\n      'Content-Type': 'application/x-www-form-urlencoded',\n    },\n    body: formBody,\n  })\n  return (await (await authRequest).json()) as OAuthResponse\n}\n\nconst getCategories = (accessToken: string) => (url: string) =>\n  fetch(url, {\n    headers: {\n      Authorization: 'Bearer ' + accessToken,\n      'Content-Type': 'application/json',\n    },\n    method: 'GET',\n  }).then(res => res.json())\n\ntype Props = {\n  businessId: string\n}\n\nexport const LayerProvider = ({\n  businessId,\n  children,\n}: PropsWithChildren<Props>) => {\n  const { data: auth } = useSWR(\n    'https://auth.layerfi.com/oauth2/token',\n    getAccessToken,\n  )\n  const { data: categories } = useSWR(\n    businessId &&\n      auth?.access_token &&\n      `https://sandbox.layerfi.com/v1/businesses/${businessId}/categories`,\n    getCategories(auth?.access_token),\n  )\n  const value: LayerExecutionContext = {\n    auth,\n    businessId,\n    categories: categories?.data?.categories || [],\n  }\n  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>\n}\n"],
+  "mappings": "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",
+  "names": ["React", "useState", "useContext", "React", "React", "React", "React", "React", "useContext", "React", "category", "useContext", "React", "dateFormat", "React", "useSWR", "useContext", "useState", "React", "React", "useSWR", "React"]
+}