nitro-web 0.0.1

package/components/partials/styleguide.jsx

@@ -0,0 +1,252 @@
+/*eslint-disable*/
+import { getCountryOptions, getCurrencyOptions, ucFirst } from '../../util.js'
+import { CheckIcon } from '@heroicons/react/20/solid'
+import { Input } from './form/input.jsx'
+import { Drop } from './form/drop.jsx'
+import { Select } from './form/select.jsx'
+import { Dropdown } from './element/dropdown.jsx'
+import { Button } from './element/button.jsx'
+import { Checkbox } from './form/checkbox.jsx'
+
+export function Styleguide({ config }) {
+  const [customerSearch, setCustomerSearch] = useState('')
+  const [state, setState] = useState({
+    address: '',
+    country: 'us',
+    currency: 'nzd', // can be commented too
+    // amount: 100,
+    // brandColor: '#F3CA5F',
+    firstName: 'Tony',
+    date: Date.now(),
+    errors: [
+      { title: 'address', detail: 'Address is required' },
+      { title: 'currency', detail: 'Currency is required' },
+      // { title: 'brandColor', detail: 'Color is required' },
+    ],
+  })
+
+  // Example of updating state
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     setState({ ...state, amount: 123456, currency: 'usd', brandColor: '#8656ED' })
+  //   }, 2000)
+  // }, [])
+
+  const options = [
+    { label: 'Open customer preview' },
+    { label: 'Add a payment', isSelected: true },
+    { label: 'Email invoice' },
+    { label: 'Download' },
+    { label: 'Edit' },
+    { label: 'Copy' },
+    { label: 'Delete' },
+  ]
+
+  function onInputChange (e) {
+    if ((e.target.id == 'customer' || e.target.id == 'customer2') && e.target.value == '') {
+      setCustomerSearch('')
+      e.target.value = null // clear the selected value
+    }
+    setState(s => ({ ...s, [e.target.id]: e.target.value }))
+  }
+
+  function onCustomerSearch (search) {
+    setCustomerSearch(search || '')
+  }
+
+  return (
+    <div class="mb-10 text-left max-w-[1100px]">
+      <div class="mb-7">
+        <h1 class="h1 m-0">Styleguide</h1>
+      </div>
+
+      <h2 class="h3">Links</h2>
+      <div class="mb-8">
+        <a class="mr-2" href="#">Default</a>
+        <a class="underline1 is-active mr-2" href="#">Underline1</a>
+        <a class="underline2 is-active mr-2" href="#">Underline2</a>
+      </div>
+
+      <h2 class="h3">Checkboxes</h2>
+      <div class="grid grid-cols-3 gap-x-6">
+        <div>
+          <label for="input0">Label</label>
+          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here." defaultChecked />
+        </div>
+        <div>
+          <label for="input1">Label</label>
+          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0" defaultChecked />
+          <Checkbox name="input1" type="radio" text="Radio 2" subtext="some additional text here 2." id="input1-2" class="!mt-0" />
+        </div>
+        <div>
+          <label for="input2">Label</label>
+          <Checkbox name="input2" type="toggle" text="Toggle" subtext="some additional text here." defaultChecked />
+        </div>
+      </div>
+
+      <h2 class="h3">Dropdowns</h2>
+      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-8">
+        <div>
+          <Dropdown options={options} minWidth="250px">
+            <Button IconRight2="v" class="gap-x-3">Dropdown</Button>
+          </Dropdown>
+        </div>
+        <div>
+          <Dropdown 
+            // menuIsOpen={true}
+            dir="bottom-right"
+            minWidth="330px" 
+            options={[{ label: <><b>New Customer</b> / Add <b>Bruce Lee</b></>, className: 'border-bottom-with-space' }, ...options]}
+          >
+            <Button type="white" IconRight2="v" class="gap-x-3">Dropdown bottom-right</Button>
+          </Dropdown>
+        </div>
+        <div>
+          <Dropdown options={options} dir="top-left" minWidth="250px">
+            <Button type="white" IconRight2="v" class="gap-x-3">Dropdown top-left</Button>
+          </Dropdown>
+        </div>
+      </div>
+
+      <h2 class="h3">Buttons</h2>
+      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-8">
+        <div><Button color="primary">primary (default)</Button></div>
+        <div><Button color="secondary">secondary button</Button></div>
+        <div><Button color="white">white button</Button></div>
+        <div><Button color="primary-xs">*-xs button</Button></div>
+        <div><Button color="primary-sm">*-sm button</Button></div>
+        <div><Button color="primary-md">*-md (default)</Button></div>
+        <div><Button color="primary-lg">*-lg button</Button></div>
+        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />}>IconLeft=Element</Button></div>
+        <div><Button IconRight="v">IconRight="v"</Button></div>
+        <div><Button IconRight2="v" className="w-[200px]">IconRight2="v"</Button></div>
+        <div><Button color="primary" isLoading>primary isLoading</Button></div>
+      </div>
+
+      <h2 class="h3">Selects</h2>
+      <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6">
+        <div>
+          <label for="action">Default</label>
+          <Select 
+            // menuIsOpen={true}
+            name="action"
+            isSearchable={false}
+            options={[
+              { value: 'edit', label: 'Edit' },
+              { value: 'delete', label: 'Delete' },
+            ]}
+          />
+        </div>
+        <div>
+          <label for="multi">Mutli Select</label>
+          <Select 
+            name="multi"
+            isMulti={true}
+            options={[
+              { value: 'edit', label: 'Edit' },
+              { value: 'delete', label: 'Delete' },
+            ]}
+          />
+        </div>
+        <div>
+          <label for="country">Countries</label>
+          <Select
+            // https://github.com/lipis/flag-icons
+            name="country" 
+            type="country" 
+            state={state} 
+            options={useMemo(() => getCountryOptions(config.countries), [])} 
+            onChange={onInputChange}
+          />
+        </div>
+        <div>
+          <label for="customer">List Item with Action</label>
+          <Select
+            // menuIsOpen={true}
+            placeholder="Select or add customer..."
+            name="customer" 
+            type="customer"
+            state={state}
+            onChange={onInputChange}
+            onInputChange={onCustomerSearch}
+            options={[ 
+              { 
+                className: 'bb', 
+                fixed: true,
+                value: '', 
+                label: <>
+                  <b>New Customer</b>
+                  {customerSearch ? <> / Add <b>{ucFirst(customerSearch)}</b></> : ''}
+                </>, 
+              },
+              { value: '1', label: 'Iron Man Industries' },
+              { value: '2', label: 'Captain America' },
+              { value: '3', label: 'Thor Limited' },
+            ]} 
+          />
+        </div>
+        <div>
+          <label for="currency">Currencies (Error)</label>
+          <Select 
+            name="currency"
+            state={state} 
+            options={useMemo(() => getCurrencyOptions(config.currencies), [])} 
+            onChange={onInputChange}
+          />
+        </div>
+      </div>
+
+      <h2 class="h3">Inputs</h2>
+      <div class="grid grid-cols-3 gap-x-6 mb-4">
+        <div>
+          <label for="firstName">First Name</label>
+          <Input name="firstName" state={state} onChange={onInputChange} />
+        </div>
+        <div>
+          <label for="email">Email Address</label>
+          <Input name="email" type="email" placeholder="Your email address..."/>
+        </div>
+        <div>
+          <div class="flex justify-between"> 
+            <label for="password">Password</label>
+            <a href="#" class="label">Forgot?</a>
+          </div>
+          <Input name="password" type="password"/>
+        </div>
+        <div>
+          <label for="search">Search</label>
+          <Input name="search" type="search" placeholder="Search..."/>
+        </div>
+        <div>
+          <label for="filter">Filter</label>
+          <Input name="filter" type="filter" />
+        </div>
+        <div>
+          <label for="address">Input Error</label>
+          <Input name="address" type="address" placeholder="Address..." state={state} onChange={onInputChange} />
+        </div>
+        {/* <div>
+          <label for="date">Date</label>
+          <Input name="date" type="date" prefix="Date:" state={state} onChange={onInputChange} />
+        </div> */}
+        <div>
+          <label for="brandColor">Brand Color</label>
+          <Input name="brandColor" type="color" state={state} onChange={onInputChange} />
+        </div>
+        <div>
+          <label for="description">Description</label>
+          <Input name="description" type="textarea" />
+        </div>
+        <div>
+          <label for="amount">Amount ({state.amount})</label>
+          <Input name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+        </div>
+        <div>
+          <label for="avatar">Avatar</label>
+          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={config.awsUrl} />
+        </div>
+      </div>
+
+    </div>
+  )
+}

package/components/settings/settings-account.jsx

@@ -0,0 +1,143 @@
+// todo: finish tailwind conversion
+import * as util from '../../util.js'
+import SvgTick from '../../client/imgs/icons/tick.svg'
+import { Button } from '../partials/element/button.jsx'
+import { FormError } from '../partials/form/form-error.jsx'
+import { Input } from '../partials/form/input.jsx'
+import { Modal } from '../partials/element/modal.jsx'
+import { Topbar } from '../partials/element/topbar.jsx'
+import { Tabbar } from '../partials/element/tabbar.jsx'
+
+export function SettingsAccount() {
+  let isLoading = useState('')
+  let [removeModal, setRemoveModal] = useState()
+  let [{user}, setStore] = sharedStore.useTracked()
+  let [state, setState] = useState({
+    avatar: user.avatar || '',
+    email: user.email || '',
+    firstName: user.firstName || '',
+    lastName: user.lastName || '',
+  })
+
+  async function onSubmit (e) {
+    try {
+      const res = await util.request(e, `put /api/user/${user._id}?files=true`, state, isLoading)
+      setStore((s) => ({ ...s, user: { ...s.user, ...res }, message: 'Saved successfully 👍️' }))
+    } catch (errors) {
+      return setState({ ...state, errors })
+    }
+  }
+
+  return (
+    <div css={style}>
+      <Topbar 
+        title={<>Settings</>} 
+        submenu={
+          <Tabbar class="is-underline"tabs={[
+            { label: 'Business', path: '/settings/business' },
+            { label: 'Team', path: '/settings/team' },
+            { label: 'Account', path: '/settings/account' },
+          ]} />
+        }
+        btns={
+          <Button onClick={onSubmit} color="primary-sm" size="wide" IconLeft={SvgTick} isLoading={isLoading[0]}>
+            Save Settings
+          </Button>
+        }
+      />
+      <div class="box p-box">
+        <h3 class="h3">Account Info</h3>
+
+        <form class="form" onSubmit={onSubmit}>
+          <div class="cols cols-6 cols-gap-3">
+            <div class="col">
+              <label for="firstName">First Name(s)</label>
+              <Input name="firstName" placeholder="E.g. Tony" state={state} onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <label for="lastName">Last Name</label>
+              <Input name="lastName" placeholder="E.g. Stark" state={state} onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <label for="email">Email Address</label>
+              <Input name="email" type="email" placeholder="Your email address..." state={state} 
+                onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <Link to="/reset" class="label-right link2 underline2 is-active">Reset Password?</Link>
+              <label for="password">Password</label>
+              <Input name="password" placeholder="•••••••••••" disabled={true} />
+            </div>
+          </div>
+          
+          <div class="py-0-5 mb-12">
+            Warning: to remove all your data and delete your
+            account, <a href="#" onClick={() => setRemoveModal(user)} class="link2 underline2 is-active">click here</a>.
+            <FormError state={state} class="pt-2" />
+          </div>
+        </form>
+      </div>
+
+      <RemoveModal show={removeModal} setShow={setRemoveModal} />
+    </div>
+  )
+}
+
+export function RemoveModal ({ show, setShow }) {
+  // @param {object} showModal - user
+  const navigate = useNavigate()
+  const isLoading = useState(false)
+  const [, setStore] = sharedStore.useTracked()
+  const [state, setState] = useState({})
+
+  useEffect(() => {
+    if (show?._id) setState({ _id: show._id })
+  }, [show?._id])
+
+  async function onSubmit (e) {
+    try {
+      await util.request(e, `delete /api/account/${state._id}`, null, isLoading)
+      close()
+      setStore(o => ({ ...o, message: 'Data deleted successfully, Goodbye 👋...' }))
+      setTimeout(() => navigate('/signout'), 6000) // wait for setStore
+    } catch (errors) {
+      return setState({ ...state, errors })
+    }
+  }
+
+  function close() {
+    setShow(false)
+    setTimeout(() => setState(false), 300)
+  }
+
+  return (
+    <Modal show={show} setShow={close} css={style} class="p-modal-small" maxWidth={560} minHeight={0}>
+      <h2 class="h2"><em>Delete</em> Your Account?</h2>
+      <p class="text-paragraph py-2">
+        This will remove all the data against your account and including all companies owned by you.<br/>
+        <br/>
+        <b>Warning:</b> This cannot be undone.
+      </p>
+      <form class="form" onSubmit={onSubmit}>
+        <div class="py-0-5 mb-4">
+          <FormError state={state} class="pt-2" />
+        </div>
+        <Button onClick={onSubmit} color="secondary-sm" isLoading={isLoading[0]}>
+          Delete Account
+        </Button>
+      </form>
+    </Modal>
+  )
+}
+
+import { css } from '@emotion/react'
+const style = (_theme) => css`
+  /* input[type='file'] {
+    padding: 8px 18px;
+    font-size: 12px;
+  }
+  .avatar {
+    width: 38px;
+    height: 38px;
+  } */
+ `

package/components/settings/settings-business.jsx

@@ -0,0 +1,121 @@
+// todo: finish tailwind conversion
+import * as util from '../../util.js'
+import SvgTick from '../../client/imgs/icons/tick.svg'
+import { Button } from '../partials/element/button.jsx'
+import { Input } from '../partials/form/input.jsx'
+import { Select } from '../partials/form/select.jsx'
+import { Topbar } from '../partials/element/topbar.jsx'
+import { Tabbar } from '../partials/element/tabbar.jsx'
+
+export function SettingsBusiness({ config }) {
+  const isLoading = useState('')
+  const [{ user }, setStore] = sharedStore.useTracked()
+  const [state, setState] = useState(() => {
+    const company = user.company
+    return {
+      business: {
+        address: company.business.address?.full || '',
+        country: company.business.country || 'nz',
+        currency: company.business.currency || 'nzd',
+        name: company.business.name || '',
+        number: company.business.number || '',
+        phone: company.business.phone || '',
+        website: company.business.website || '',
+      },
+    }
+  })
+
+  async function onSubmit (e) {
+    try {
+      const company = await util.request(e, `put /api/company/${user.company._id}`, state, isLoading)
+      setStore((s) => ({ ...s, user: { ...s.user, company }, message: 'Saved successfully 👍️' }))
+    } catch (errors) {
+      console.log(errors)
+      return setState({ ...state, errors })
+    }
+  }
+
+  return (
+    <div css={style}>
+      <Topbar 
+        title={<>Settings</>} 
+        submenu={
+          <Tabbar class="is-underline" tabs={[
+            { label: 'Business', path: '/settings/business' },
+            { label: 'Team', path: '/settings/team' },
+            { label: 'Account', path: '/settings/account' },
+          ]} />
+        }
+        btns={
+          <Button onClick={onSubmit} color="primary-sm" size="wide" IconLeft={SvgTick} isLoading={isLoading[0]}>
+            Save Settings
+          </Button>
+        }
+      />
+
+      <div class="box p-box">
+        <h3 class="h3">Business Settings</h3>
+
+        <form class="form" onSubmit={onSubmit}>
+          <div class="cols cols-6 cols-gap-3">
+            <div class="col">
+              <label for="business.country">Country</label>
+              <Select
+                // https://github.com/lipis/flag-icons
+                name="business.country" 
+                type="country" 
+                state={state} 
+                options={useMemo(() => util.getCountryOptions(config.countries), [])} 
+                onChange={onChange(setState)}
+              />
+            </div>
+            <div class="col">
+              <label for="business.currency">Currency</label>
+              <Select 
+                name="business.currency" 
+                type="country" 
+                state={state} 
+                options={useMemo(() => util.getCurrencyOptions(config.currencies), [])}
+                onChange={onChange(setState)}
+              />
+            </div>
+            <div class="col">
+              <label for="business.name">Trading Name</label>
+              <Input name="business.name" placeholder="E.g. Stark Industries" state={state} onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <Link to="#" class="label-right link2 underline2 is-active">Custom Address</Link>
+              <label for="business.address">Address (Start Typing...)</label>
+              <Input name="business.address.full" placeholder="" state={state} onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <label for="business.website">Website</label>
+              <Input name="business.website" placeholder="https://" state={state} onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <label for="business.phone">Mobile Number</label>
+              <Input name="business.phone" placeholder="" state={state} onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <Link to="#" class="label-right link2 underline2 is-active">What&apos;s this for?</Link>
+              <label for="tax.number">GST Number</label>
+              <Input class="mb-0" name="tax.number" placeholder="Appears on your documents" state={state} 
+                onChange={onChange(setState)} />
+            </div>
+            <div class="col">
+              <Link to="#" class="label-right link2 underline2 is-active">What&apos;s this for?</Link>
+              <label for="business.number">NZBN</label>
+              <Input class="mb-0" name="business.number" placeholder="Appears on your documents" state={state} 
+                onChange={onChange(setState)} />
+            </div>
+          </div>
+        </form>
+      </div>
+
+    </div>
+  )
+}
+
+import { css } from '@emotion/react'
+const style = (_theme) => css`
+`

package/components/settings/settings-team--member.jsx

@@ -0,0 +1,108 @@
+// todo: finish tailwind conversion
+import { css } from '@emotion/react'
+import { Button } from '../partials/element/button.jsx'
+import { Modal } from '../partials/element/modal.jsx'
+import { FormError } from '../partials/form/form-error.jsx'
+import { Input } from '../partials/form/input.jsx'
+import { Select } from '../partials/form/select.jsx'
+import SvgTick from '../../client/imgs/icons/tick.svg'
+
+export function SettingsTeamMember ({ showModal, setShowModal }) {
+  // @param {object} showModal - user
+  const [{ user }] = sharedStore.useTracked()
+  const [isLoading] = useState('')
+  const [state, setState] = useState({
+    business: {
+      name: '',
+      address: '',
+      website: '',
+      phone: '',
+    },
+  })
+
+
+  // permit polit changes
+  // typescripty, 
+
+  function onSubmit(_e) {
+    //... save
+  }
+
+  return (
+    <Modal show={showModal} setShow={setShowModal} css={style} class="p-modal">
+
+      <h2 class="h2"><em>Add</em> Team Member</h2>
+      <p class="subtitle">Invite a new team member to collaborate with you on Nitro.</p>
+      
+      <form class="form" onSubmit={onSubmit}>
+        <div class="cols cols-6 cols-gap-2-5">
+          <div class="col">
+            <label for="role">Member Role</label>
+            <Select 
+              name="role"
+              isSearchable={false}
+              placeholder="Select a role"
+              onChange={onChange(setState)} 
+              state={state}
+              minMenuWidth={460}
+              options={[
+                { 
+                  className: 'bb',
+                  value: 'owner', 
+                  labelControl: 'Owner',
+                  label: <>
+                    <div class="mb-0-5"><b>Owner</b></div>
+                    <div>Full access.</div>
+                  </>,
+                },
+                { 
+                  className: 'bb',
+                  value: 'manager', 
+                  labelControl: 'Manager',
+                  label: <>
+                    <div class="mb-0-5"><b>Manager</b></div>
+                    <div>No access to billing or the ability to remove your account.</div>
+                  </>,
+                },
+              ]}
+            />
+          </div>
+          <div class="col">
+            <label for="email">Email Address</label>
+            <Input 
+              name="email" type="email" placeholder="Your email address..." state={state} 
+              onChange={onChange(setState)} 
+            />
+          </div>
+          <div class="col">
+            <label for="firstName">First Name</label>
+            <Input name="firstName" placeholder="E.g. Tony" state={state} onChange={onChange(setState)} />
+          </div>
+          <div class="col">
+            <label for="lastName">Last Name</label>
+            <Input name="lastName" placeholder="E.g. Stark" state={state} onChange={onChange(setState)} />
+          </div>
+          <div class="col-12">
+            <label for="message">Invitation Message</label>
+            <Input 
+              name="message" 
+              type="textarea" 
+              placeholder={`${user.firstName} is inviting you to collaborate on Nitro.`} 
+              state={state} onChange={onChange(setState)} 
+            />
+          </div>
+        </div>
+        
+        <div class="py-0-5 mb-4">
+          <FormError state={state} class="pt-2" />
+        </div>
+        <Button onClick={onSubmit} color="primary-sm" IconLeft={SvgTick} isLoading={isLoading[0]}>
+          Send Invitation
+        </Button>
+      </form>
+    </Modal>
+  )
+}
+
+const style = (_theme) => css`
+`