nitro-web 0.0.85 → 0.0.87

package/components/auth/signup.tsx

@@ -1,62 +0,0 @@
-import { Button, Field, FormError, Topbar, request, injectedConfig } from 'nitro-web'
-import { Errors } from 'nitro-web/types'
-
-export function Signup() {
-  const navigate = useNavigate()
-  const isLoading = useState(false)
-  const [, setStore] = useTracked()
-  const [state, setState] = useState({
-    email: injectedConfig.env === 'development' ? (injectedConfig.placeholderEmail || '') : '',
-    name: injectedConfig.env === 'development' ? 'Bruce Wayne' : '',
-    business: { name: injectedConfig.env === 'development' ? 'Wayne Enterprises' : '' },
-    password: injectedConfig.env === 'development' ? '1234' : '',
-    errors: [] as Errors,
-  })
-
-  async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
-    try {
-      const data = await request('post /api/signup', state, e, isLoading, setState)
-      setStore((prev) => ({ ...prev, ...data }))
-      setTimeout(() => navigate('/'), 0) // wait for setStore
-    } catch (e) {
-      setState((prev) => ({ ...prev, errors: e as Errors }))
-    }
-  }
-  
-  return (
-    <div class="">
-      <Topbar title={<>Start your 21 day Free Trial</>} />
-
-      <form onSubmit={onSubmit}>
-        <div class="grid grid-cols-2 gap-6">  
-          <div>
-            <label for="name">Your Name</label>
-            <Field name="name" placeholder="E.g. Bruce Wayne" state={state} 
-              onChange={(e) => onChange(setState, e)} 
-              errorTitle={/^(name|firstName|lastName)$/} // if different from `name`
-            />
-          </div>
-          <div>
-            <label for="business.name">Company Name</label>
-            <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={(e) => onChange(setState, e)} />
-          </div>
-        </div>
-        <div>
-          <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)} placeholder="Your email address..." />
-        </div>
-        <div>
-          <label for="password">Password</label>
-          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)}/>
-        </div>
-        
-        <div class="mb-14">
-          Already have an account? You can <Link to="/signin" class="underline2 is-active">sign in here</Link>.
-          <FormError state={state} className="pt-2" />
-        </div>
-
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Create Account</Button>
-      </form>
-    </div>
-  )
-}

package/components/billing/stripe.api.js

@@ -1,268 +0,0 @@
-// @ts-nocheck
-import Stripe from 'stripe'
-import db from 'monastery'
-import * as util from 'nitro-web/util'
-
-let stripe = undefined
-let stripeProducts = []
-let config = {}
-
-export const routes = {
-  // Routes
-  'post   /api/stripe/webhook': [stripeWebhook],
-  'post   /api/stripe/create-billing-portal-session': [billingPortalSessionCreate],
-  'get    /api/stripe/upcoming-invoices': [upcomingInvoicesFind],
-
-  // Overridable helpers
-  setup: setup,
-}
-
-function setup(middleware, _config) {
-  // Set config values
-  config = {
-    env: _config.env,
-    clientUrl: _config.clientUrl,
-    stripeSecretKey: _config.stripeSecretKey,
-    stripeWebhookSecret: _config.stripeWebhookSecret,
-  }
-  for (let key in config) {
-    if (!config[key]) {
-      throw new Error(`Missing config value for stripe.api.js: ${key}`)
-    }
-  }
-  stripe = new Stripe(config.stripeSecretKey)
-}
-
-async function stripeWebhook(req, res) {
-  try {
-    var event = config.env == 'development' ? req.body : stripe.webhooks.constructEvent(
-      req.rawBody,
-      req.rawHeaders['stripe-signature'],
-      config.stripeWebhookSecret
-    )
-  } catch (err) {
-    if (err && err.message) console.log(err.message)
-    else console.log(err)
-    return res.error(err)
-  }
-
-  if (!event.data || !event.data.object) {
-    return res.status(400).send(`Missing webhook data: ${event}.`)
-  }
-
-  // useful for cleaning failed webhooks
-  if (req.query.success) return true
-  // console.log('event.type: ', event.type)
-
-  // Stripe cannot guarantee event order
-  switch (event.type) {
-    case 'customer.subscription.created':
-    case 'customer.subscription.updated':
-    case 'customer.subscription.deleted':
-      // Subscriptions can be renewed which resurrects cancelled subscriptions.. ignore this
-      console.log('Event: ' + event.type)
-      webhookSubUpdated(req, res, event)
-      break
-    case 'customer.created': // customer created by subscribing
-    case 'customer.updated': // payment method changes
-      console.log('Event: ' + event.type)
-      webhookCustomerCreatedUpdated(req, res, event)
-      break
-    default:
-      res.status(400).send(`Unsupported type: ${event}.`)
-      break
-  }
-}
-
-async function billingPortalSessionCreate(req, res) {
-  try {
-    if (!req.user.stripeCustomer?.id) {
-      throw new Error('No stripe customer found for the user')
-    }
-    const session = await stripe.billingPortal.sessions.create({
-      customer: req.user.stripeCustomer.id,
-      return_url: config.clientUrl + '/subscriptions',
-    })
-    res.json(session.url)
-  } catch (err) {
-    error(req, res, err)
-  }
-}
-
-async function upcomingInvoicesFind(req, res) {
-  try {
-    if (!req.user.stripeCustomer?.id) return res.json({})
-    const nextInvoice = await stripe.invoices.retrieveUpcoming({
-      customer: req.user.stripeCustomer.id,
-    })
-    res.json(nextInvoice)
-  } catch (err) {
-    if (err.code == 'invoice_upcoming_none') return res.json({})
-    error(req, res, err)
-  }
-}
-
-/* ---- Overridable helpers ------------------ */
-
-async function error(req, res, err) {
-  if (err && err.response && err.response.body) console.log(err.response.body)
-  if (util.isString(err) && err.match(/Cannot find company with id/)) {
-    res.json({ user: 'no company found' })
-  } else res.error(err)
-}
-
-export async function getProducts() {
-  /**
-   * Returns all products and caches it on the app
-   * @returns {Array} products
-   */
-  try {
-    if (stripeProducts) return stripeProducts
-    if (!config.stripeSecretKey) {
-      stripeProducts = []
-      throw new Error('Missing process.env.stripeSecretKey for retrieving products')
-    }
-
-    let products = (await stripe.products.list({ limit: 100, active: true })).data
-    let prices = (await stripe.prices.list({ limit: 100, active: true, expand: ['data.tiers'] })).data
-
-    return (stripeProducts = products.map((product) => ({
-      // remove default_price when new pricing is ready
-      ...util.pick(product, ['id', 'created', 'default_price', 'description', 'name', 'metadata']),
-      type: product.name.match(/housing/i) ? 'project' : 'subscription', // overwriting, was 'service'
-      prices: prices
-        .filter((price) => price.product == product.id)
-        .map((price) => ({
-          ...util.pick(price, ['id', 'product', 'nickname', 'recurring', 'unit_amount', 'tiers', 'tiers_mode']),
-          interval: price.recurring?.interval, // 'year', 'month', undefined
-        })),
-    })))
-  } catch (err) {
-    console.error(new Error(err)) // when stripe throws errors, the callstack is missing.
-    return []
-  }
-}
-
-async function getUserFromEvent(event) {
-  // User retreived from the event's customer. 
-  // The customer is created before the paymentIntent and subscriptionIntent is set up
-  let object = event.data.object
-  let customerId = object.object == 'customer'? object.id : object.customer
-  if (customerId) {
-    var user = await db.user.findOne({
-      query: { 'stripeCustomer.id': customerId },
-      populate: db.user.populate({}),
-      blacklist: false, // ['-company.users.inviteToken'],
-    })
-  }
-  if (!user) {
-    await db.log.insert({ data: {
-      date: Date.now(),
-      event: event.type,
-      message: `Cannot find user with id: ${customerId}.`,
-    }})
-    throw new Error(`Cannot find user with id: ${customerId}.`)
-  }
-  // populate company owner with user data (handy for _addSubscriptionBillingChange)
-  if (user.company?.users) {
-    user.company.users = user.company.users.map(o => {
-      if (o.role == 'owner' && o._id.toString() == user._id.toString()) {
-        o.firstName = user.firstName
-        o.name = user.name
-        o.email = user.email
-      }
-      return o
-    })
-  }
-  return user
-}
-
-async function webhookCustomerCreatedUpdated(req, res, event) {
-  try {
-    const customer = event.data.object
-    const user = await getUserFromEvent(event)
-    const customerExpanded = await stripe.customers.retrieve(
-      customer.id,
-      { expand: ['invoice_settings.default_payment_method'] }
-    )
-    await db.user.update({
-      query: user._id,
-      data: { stripeCustomer: customerExpanded },
-      blacklist: ['-stripeCustomer'],
-    })
-    res.json({})
-  } catch (err) {
-    console.log(err)
-    error(req, res, err)
-  }
-}
-
-async function webhookSubUpdated(req, res, event) {
-  // Update the subscription on the company
-  try {
-    const subData = event.data.object
-    // webhook from deleting a company?
-    if (subData.cancellation_details.comment == 'company deleted') {
-      return res.json({})
-    }
-
-    const user = await getUserFromEvent(event)
-    if (!user.company) {
-      throw new Error(`Subscription user has no company to update the subscription (${subData.id}) onto`)
-    }
-
-    // Ignoring incomplete subscriptions
-    if (subData.status.match(/incomplete/)) {
-      return res.json({})
-    // Ignoring subscriptions without companyId (e.g. manual subscriptions)
-    } else if (!subData.metadata.companyId) {
-      return res.json({ ignoringManualSubscriptions: true })
-    // Ignoring old subscriptions
-    } else if (subData.created < (user.company.stripeSubscription?.created || 0)) {
-      return res.json({ ignoringOldSubscriptions: true })
-    }
-    
-    // Update company with the updated subscription and users
-    const sub = await stripe.subscriptions.retrieve(
-      subData.id,
-      { expand: ['latest_invoice.payment_intent'] }
-    )
-    await db.company.update({
-      query: user.company._id,
-      data: { stripeSubscription: sub, users: user.company.users },
-      blacklist: ['-stripeSubscription', '-users'],
-    })
-    
-    res.json({})
-  } catch (err) {
-    console.error(err)
-    error(req, res, err)
-  }
-}
-
-// async function createOrUpdateCustomer(user, paymentMethod=null) {
-//   /**
-//    * Creates or updates a stripe customer and saves it to the user
-//    * @param {Object} user - user
-//    * @param {String} paymentMethod - stripe payment method id to save to the customer
-//    * @called before paymentIntent and subscriptionIntent, and after completion with paymentMethod
-//    * @returns mutates user
-//    */
-//   const data = {
-//     email: user.email,
-//     name: user.name,
-//     address: { country: 'NZ' },
-//     ...(!paymentMethod ? {} : { invoice_settings: { default_payment_method: paymentMethod }}),
-//     expand: ['invoice_settings.default_payment_method', 'tax'], // expands card object
-//   }
-  
-//   if (user.stripeCustomer) var customer = await stripe.customers.update(user.stripeCustomer.id, data)
-//   else customer = await stripe.customers.create({ ...data })
-
-//   user.stripeCustomer = customer
-//   await db.user.update({
-//     query: user._id,
-//     data: { stripeCustomer: customer },
-//     blacklist: ['-stripeCustomer'],
-//   })
-// }

package/components/dashboard/dashboard.tsx

@@ -1,32 +0,0 @@
-import { css, theme } from 'twin.macro'
-import { injectedConfig } from 'nitro-web'
-
-export function Dashboard() {
-  const [store] = useTracked()
-  const textColor = store.apiAvailable ? 'text-green-700' : injectedConfig.isStatic ? 'text-gray-700' : 'text-pink-700'
-  const fillColor = store.apiAvailable ? 'fill-green-500' : injectedConfig.isStatic ? 'fill-gray-500' : 'fill-pink-500'
-  const bgColor = store.apiAvailable ? 'bg-green-100' : injectedConfig.isStatic ? 'bg-[#eeeeee]' : 'bg-pink-100'
-
-  return (
-    <div css={style}>
-      <h1 className="h1 mb-8">Dashboard</h1>
-      <p className="mb-4">
-        Welcome to Nitro, a modular React/Express base project, styled using Tailwind 🚀.
-      </p>
-      <p className="text-gray-700">
-        <span className={`inline-flex items-center gap-x-1.5 rounded-md ${bgColor} px-1.5 py-0.5 text-xs font-medium ${textColor}`}>
-          <svg viewBox="0 0 6 6" aria-hidden="true" className={`size-1.5 ${fillColor}`}>
-            <circle r={3} cx={3} cy={3} />
-          </svg>
-          { store.apiAvailable ? 'API Available' : `API Unavailable${injectedConfig.isStatic ? ' (Static Example)' : ''}` }
-        </span>
-      </p>
-    </div>
-  )
-}
-
-const style = css`
-  .example-usage-of-tailwind-variable {
-    color: ${theme('colors.primary')};
-  }
-`

package/components/partials/element/accordion.tsx

@@ -1,102 +0,0 @@
-
-import { css } from 'twin.macro'
-import { IsFirstRender } from 'nitro-web'
-
-type AccordionProps = {
-  ariaControls?: string // pass to add aria-controls attribute to the accordion
-  children: React.ReactNode // first child is the header, second child is the contents
-  className?: string
-  classNameWhenExpanded?: string // handy for group styling
-  expanded?: boolean // initial value (or controlled value if onChange is passed)
-  onChange?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void 
-    // called when the header is clicked
-}
-
-export function Accordion({ ariaControls, children, className, classNameWhenExpanded, expanded, onChange }: AccordionProps) {
-  const [preState, setPreState] = useState(expanded)
-  const [state, setState] = useState(expanded)
-  const [height, setHeight] = useState('auto')
-  const isFirst = IsFirstRender()
-  const el = useRef<HTMLDivElement>(null)
-  const style = css`
-    &>:last-child {
-      height: 0;
-      overflow: hidden;
-      transition: height ease 0.2s;
-      a, button {
-        visibility: hidden;   /* removes from tab order */
-        transition: visibility 0s 0.2s;
-      }
-    }
-    &.is-expanded > *:last-child {
-      height: ${height.replace('-', '')};
-      a, button {
-        visibility: visible;
-        transition: visibility 0s;
-      }
-    }
-  `
-
-  useEffect(() => {
-    // Overrite local state
-    setPreState(expanded)
-  }, [expanded])
-
-  useEffect(() => {
-    // Calulcate height first before opening and closing
-    if (!isFirst) {
-      setHeight((_o) => el.current?.children[1].scrollHeight + 'px' + (preState ? '-' : ''))
-    }
-  }, [preState])
-
-  useEffect(() => {
-    // Open and close
-    if (height == 'auto') return
-    if (preState) var timeout = setTimeout(() => setHeight('auto'), 200)
-    // Wait for dom reflow after 2 frames
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        if (preState) setState(true)
-        else setState(false)
-      })
-    })
-    return () => timeout && clearTimeout(timeout)
-  }, [height])
-
-  const onClick = function(e: React.MouseEvent<HTMLDivElement>|React.KeyboardEvent<HTMLDivElement>) {
-    // Click came from inside the accordion header/summary
-    if (e.currentTarget.children[0].contains(e.target as HTMLElement) || e.currentTarget.children[0] == e.target) {
-      if (onChange) {
-        onChange(e, getElementIndex(e.currentTarget))
-      } else {
-        setPreState(o => !o)
-      }
-    }
-  }
-
-  const getElementIndex = function(node: HTMLElement) {
-    let index = 0
-    while ((node = node.previousElementSibling as HTMLElement)) index++
-    return index
-  }
-
-  const onKeyDown = function(e: React.KeyboardEvent<HTMLDivElement>) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      onClick(e)
-    }
-  }
-
-  return (
-    <div
-      ref={el}
-      aria-controls={ariaControls}
-      aria-expanded={ariaControls ? state : undefined}
-      class={['accordion', className, state ? `is-expanded ${classNameWhenExpanded}` : '', 'nitro-accordion'].filter(o => o).join(' ')}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      css={style}
-    >
-      {children}
-    </div>
-  )
-}

package/components/partials/element/avatar.tsx

@@ -1,40 +0,0 @@
-import { Initials } from 'nitro-web'
-import { s3Image } from 'nitro-web/util'
-import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
-import { User } from 'nitro-web/types'
-
-type AvatarProps = {
-  awsUrl: string
-  isRound?: boolean
-  user: User,
-  showPlaceholderImage?: boolean
-  className?: string
-}
-
-export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className }: AvatarProps) {
-  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease nitro-avatar ' + (className || '')
-
-  function getInitials(user: User) {
-    const text = (user.firstName ? [user.firstName, user.lastName] : (user?.name||'').split(' ')).map((o) => o?.charAt(0))
-    if (text.length == 1) return text[0] || ''
-    if (text.length > 1) return `${text[0]}${text[text.length - 1]}`
-    return ''
-  }
-
-  function getHex(user: User) {
-    const colors = ['#067306', '#AA33FF', '#FF54AF', '#F44336', '#c03c3c', '#7775f2', '#d88c1b']
-    const charIndex = (user.firstName||'a').toLowerCase().charCodeAt(0) - 97
-    const charIndexLimited = (charIndex < 0 || charIndex > 25) ? 25 : charIndex
-    const index = Math.round(charIndexLimited / 25 * (colors.length-1))
-    return colors[index]
-  }
-
-  return (
-    user.avatar 
-      ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small')} /> 
-      : showPlaceholderImage 
-        ? <img class={classes} src={avatarImg} width="30px" /> 
-        : <Initials className={classes} icon={{ initials: getInitials(user), hex: getHex(user) }} isRound={isRound} isMedium={true} />
-  )
-}
-

package/components/partials/element/button.tsx

@@ -1,98 +0,0 @@
-import { twMerge } from 'nitro-web'
-import { ChevronDown, ChevronUp } from 'lucide-react'
-
-interface Button extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  color?: 'primary'|'secondary'|'black'|'dark'|'white'|'clear'|'custom'
-  size?: 'xs'|'sm'|'md'|'lg'|'custom'
-  customColor?: string
-  customSize?: string
-  className?: string
-  isLoading?: boolean
-  IconLeft?: React.ReactNode|'v'
-  IconLeftEnd?: React.ReactNode|'v'
-  IconRight?: React.ReactNode|'v'
-  IconRightEnd?: React.ReactNode|'v'
-  IconCenter?: React.ReactNode|'v'
-  children?: React.ReactNode|'v'
-}
-
-export function Button({
-  size='md', 
-  color='primary',
-  customColor,
-  customSize,
-  className, 
-  isLoading, 
-  IconLeft, 
-  IconLeftEnd, 
-  IconRight, 
-  IconRightEnd,
-  IconCenter,
-  children,
-  type='button',
-  ...props 
-}: Button) {
-  // const size = (color.match(/xs|sm|md|lg/)?.[0] || 'md') as 'xs'|'sm'|'md'|'lg'
-  const iconPosition = 
-    IconLeft ? 'left' : IconLeftEnd ? 'leftEnd' : IconRight ? 'right' : IconRightEnd ? 'rightEnd' : IconCenter ? 'center' : 'none'
-  const base = 
-    'relative inline-flex items-center justify-center text-center font-medium shadow-sm focus-visible:outline ' +
-    'focus-visible:outline-2 focus-visible:outline-offset-2 ring-inset ring-1' + (children ? '' : ' aspect-square')
-
-  // Button colors, you can use custom colors by using className instead
-  const colors = {
-    'primary': 'bg-primary hover:bg-primary-hover ring-transparent text-white [&>.loader]:border-white',
-    'secondary': 'bg-secondary hover:bg-secondary-hover ring-transparent text-white [&>.loader]:border-white',
-    'black': 'bg-black hover:bg-gray-800 ring-transparent text-white [&>.loader]:border-white',
-    'dark': 'bg-gray-800 hover:bg-gray-700 ring-transparent text-white [&>.loader]:border-white',
-    'white': 'bg-white hover:bg-gray-50 ring-gray-300 text-gray-900 [&>.loader]:border-black', // maybe change to text-foreground
-    'clear': 'hover:bg-gray-50 ring-gray-300 text-foreground [&>.loader]:border-foreground !shadow-none',
-  }
-  
-  // Button sizes (px is better for height consistency)
-  const sizes = {
-    'xs': 'px-[6px]  h-[25px] text-xs !text-button-xs rounded',
-    'sm': 'px-[10px] h-[32px] text-md text-button-base rounded-md',
-    'md': 'px-[12px] h-[38px] text-md text-button-base rounded-md', // default
-    'lg': 'px-[18px] h-[42px] text-md text-button-base rounded-md',
-  }
-  
-  const appliedColor = color === 'custom' ? customColor : colors[color]
-  const appliedSize = size === 'custom' ? customSize : sizes[size]
-  const contentLayout = `gap-x-1.5 ${iconPosition == 'none' ? '' : ''}`
-  const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
-
-  function getIcon(Icon: React.ReactNode | 'v') {
-    if (Icon == 'v' || Icon == 'down') return <ChevronDown size={16.5} className="mt-[-1.4rem] mb-[-1.5rem]" />
-    if (Icon == '^' || Icon == 'up') return <ChevronUp size={16.5} className="mt-[-1.4rem] mb-[-1.5rem]" />
-    else return Icon
-  }
-  
-  return (
-    <button
-      type={type} 
-      class={twMerge(`${base} ${appliedSize} ${appliedColor} ${contentLayout} ${loading} nitro-button ${className||''}`)} 
-      {...props}
-    >
-      {
-        IconCenter && 
-        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          {getIcon(IconCenter)}
-        </span>
-      }
-      {(IconLeft || IconLeftEnd) && getIcon(IconLeft || IconLeftEnd)}
-      <span class={`flex items-center ${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1 justify-center' : ''}`}>
-        <span className="w-0">&nbsp;</span> {/* for min-height */}
-        {children}
-      </span>
-      {(IconRight || IconRightEnd) && getIcon(IconRight || IconRightEnd)}
-      {
-        isLoading &&
-        <span className={
-          'loader !opacity-100 absolute top-[50%] left-[50%] w-[1rem] h-[1rem] ml-[-0.5rem] mt-[-0.5rem] ' +
-          'rounded-full animate-spin border-2 !border-t-transparent'
-        } />
-      }
-    </button>
-  )
-}