nitro-web 0.0.87 → 0.0.88

package/components/billing/stripe.api.js

@@ -0,0 +1,268 @@
+// @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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,102 @@
+
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,98 @@
+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>
+  )
+}

package/components/partials/element/calendar.tsx

@@ -0,0 +1,125 @@
+import { DayPicker, getDefaultClassNames } from 'react-day-picker'
+import { isValid } from 'date-fns'
+import 'react-day-picker/style.css'
+import { IsFirstRender } from 'nitro-web'
+
+export const dayButtonClassName = 'size-[33px] text-sm'
+
+type Mode = 'single'|'multiple'|'range'
+type ModeSelection<T extends Mode> = (
+  T extends 'single' ? Date | undefined
+  : T extends 'multiple' ? Date[]
+  : { from?: Date; to?: Date }
+)
+
+export type CalendarProps = {
+  mode?: Mode
+  onChange?: (mode: Mode, value: null|number|(null|number)[]) => void
+  value?: null|number|string|(null|number|string)[]
+  numberOfMonths?: number
+  month?: number // the value may be updated from an outside source, thus the month may have changed
+  className?: string
+  preserveTime?: boolean // just for single mode
+}
+
+export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime }: CalendarProps) {
+  const isFirstRender = IsFirstRender()
+  const isRange = mode == 'range'
+
+  // Convert the value to an array of valid* dates
+  const dates = useMemo(() => {
+    const _dates = Array.isArray(value) ? value : [value]
+    return _dates.map(date => isValid(date) ? new Date(date as number) : undefined) ////change to null
+  }, [value])
+
+  // Hold the month in state to control the calendar when the input changes
+  const [month, setMonth] = useState(dates[0])
+
+  // Update the month if its changed from an outside source
+  useEffect(() => {
+    if (!isFirstRender && monthProp) setMonth(new Date(monthProp))
+  }, [monthProp])
+
+  function handleDayPickerSelect<T extends Mode>(newDate: ModeSelection<T>) {
+    switch (mode as T) {
+      case 'single': {
+        const date = newDate as ModeSelection<'single'>
+        preserveTimeFn(date)
+        onChange?.(mode, date?.getTime() ?? null)
+        break
+      }
+      case 'range': {
+        const { from, to } = (newDate ?? {}) as ModeSelection<'range'>
+        onChange?.(mode, from ? [from.getTime() || null, to?.getTime() || null] : null)
+        break
+      }
+      case 'multiple': {
+        const dates = (newDate as ModeSelection<'multiple'>)?.filter(Boolean) ?? []
+        onChange?.(mode, dates.map((d) => d.getTime()))
+        break
+      }
+    }
+  }
+
+  function preserveTimeFn(date?: Date) {      
+    // Preserve time from the original date if needed
+    if (preserveTime && dates[0] && date) {
+      const originalDate = dates[0]
+      date.setHours(
+        originalDate.getHours(),
+        originalDate.getMinutes(),
+        originalDate.getSeconds(),
+        originalDate.getMilliseconds()
+      )
+    }
+  }
+  
+  const d = getDefaultClassNames()
+  const common = {
+    month: month,
+    onMonthChange: setMonth,
+    onSelect: handleDayPickerSelect,
+    numberOfMonths: numberOfMonths || (isRange ? 2 : 1),
+    modifiersClassNames: {
+      // Add a class without _, TW seems to replace this with a space in the css definition, e.g. &:not(.range middle)
+      range_middle: `${d.range_middle} rangemiddle`,
+    },
+    classNames: {
+      root: `${d.root} flex nitro-calendar`,
+      months: `${d.months} flex-nowrap`,
+      month_caption: `${d.month_caption} text-2xs pl-2`,
+      caption_label: `${d.caption_label} z-auto`,
+      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-input-border-focus`,
+      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-input-border-focus`,
+      chevron: `${d.chevron} fill-black size-[18px]`,
+
+      // Days
+      weekday: `${d.weekday} text-[11px] font-bold uppercase`,
+      day: `${d.day} size-[33px]`,
+      day_button: `${d.day_button} ${dayButtonClassName}`,
+
+      // States
+      focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,
+      range_start: `${d.range_start} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
+      range_end: `${d.range_end} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
+      selected: `${d.selected} font-normal `
+        + '[&:not(.rangemiddle)>button]:!text-white '
+        + '[&:not(.rangemiddle)>button]:!bg-input-border-focus '
+        + '[&:not(.rangemiddle)>button]:!border-input-border-focus ',
+    },
+  }
+
+  return (
+    <div>
+      {
+        mode === 'single' ? (
+          <DayPicker mode="single" selected={dates[0]} {...common} className={className} />
+        ) : mode === 'range' ? (
+          <DayPicker mode="range" selected={{ from: dates[0], to: dates[1] }} {...common} className={className} />
+        ) : (
+          <DayPicker mode="multiple" selected={dates.filter((d) => !!d)} {...common} className={className} />
+        )
+      }
+    </div>
+  )
+}