nitro-web 0.0.10 → 0.0.12

package/components/partials/form/{select.jsx → select.tsx}

@@ -1,166 +1,102 @@
-/*eslint-disable*/
 import { css } from 'twin.macro'
 import { twMerge } from 'tailwind-merge'
-import ReactSelect, { components, createFilter } from 'react-select'
+import ReactSelect, { components, ControlProps, createFilter, OptionProps, SingleValueProps } from 'react-select'
+import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select'
 import { ChevronDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import * as util from '../../../util.js'
+import { util } from 'nitro-web'
+import { Errors } from 'types'
+
 const filterFn = createFilter()
 
-const selectStyles = {
-  // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
-  // Input container
-  control: {
-    base: `rounded-md bg-white hover:cursor-pointer text-sm sm:text-sm/6 outline outline-1 -outline-offset-1 outline-input-border`,
-    focus: `outline-2 -outline-offset-2 outline-primary`,
-    error: `outline-danger`,
-  },
-  valueContainer: 'py-2 px-3 gap-1',
-  // Input container objects
-  input: {
-    base: 'text-input',
-    error: 'text-red-900',
-  },
-  multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
-  multiValueLabel: '',
-  multiValueRemove: `border border-primary-dark bg-white rounded-md text-dark hover:bg-red-50`,
-  placeholder: 'text-input-placeholder',
-  singleValue: {
-    base: 'text-input',
-    error: 'text-red-900',
-  },
-  // Icon indicators
-  clearIndicator: 'text-gray-500 p-1 rounded-md hover:bg-red-50 hover:text-red-800',
-  dropdownIndicator: 'p-1 hover:bg-gray-100 text-gray-500 rounded-md hover:text-black',
-  indicatorsContainer: 'p-1 px-2 gap-1',
-  indicatorSeparator: 'py-0.5 before:content-[""] before:block before:bg-gray-100 before:w-px before:h-full',
-  // Dropdown menu
-  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-sm overflow-hidden shadow-dropdown-ul',
-  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-sm',
-  noOptionsMessage: 'm-1 text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm',
-  option: {
-    base: 'relative px-3 py-2 !flex items-center gap-2 cursor-default',
-    hover: 'bg-gray-50',
-    selected: '!bg-gray-100 text-primary-dark',
-  }
+type GetSelectStyle = {
+  name: string
+  isFocused?: boolean
+  isSelected?: boolean
+  hasError?: boolean
+  usePrefixes?: boolean
 }
 
-export function getSelectStyle({ name, isFocused, isSelected, hasError, usePrefixes }) {
-  // Returns a class list that conditionally includes hover/focus modifier classes, or uses CSS modifiers, e.g. hover:, focus:
-  const obj = selectStyles[name]
-  let output = obj?.base
-  if (typeof obj == 'string') return obj // no modifiers
-
-  if (usePrefixes) {
-    if (obj.focus) output += ' ' + obj.focus.split(' ').map(part => `focus:${part}`).join(' ')
-    if (obj.hover) output += ' ' + obj.hover.split(' ').map(part => `hover:${part}`).join(' ')
-  } else {
-    if (obj.focus && isFocused) output += ` ${obj.focus}`
-    if (obj.hover && isFocused) output += ` ${obj.hover}`
-  }
-  if (obj.error && hasError) output += ` ${obj.error}`
-  if (obj.selected && isSelected) output += ` ${obj.selected}`
-  
-  return twMerge(output)
+/** Select (all other props are passed to react-select) **/
+type SelectProps = {
+  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
+  name: string
+  /** name used if not provided **/
+  inputId?: string
+  /** The minimum width of the dropdown menu **/
+  minMenuWidth?: number
+  /** The prefix to add to the input **/
+  prefix?: string
+  /** The onChange handler **/
+  onChange?: (event: { target: { id: string, value: unknown } }) => void
+  /** The options to display in the dropdown **/
+  options: { value: unknown, label: string | React.ReactNode, fixed?: boolean, [key: string]: unknown }[]
+  /** The state object to get the value and check errors from **/
+  state?: { errors: Errors, [key: string]: unknown }
+  /** Select variations **/
+  type?: 'country'|'customer'|''
+  /** All other props are passed to react-select **/
+  [key: string]: unknown
 }
 
-/**
- * @param {string} name - field name or path on state (used to match errors), e.g. 'date', 'company.email'
- * @param {string} [minMenuWidth] - width of the dropdown menu
- * @param {string} [inputId] - name used if not provided
- * @param {function} [onChange] - e.g. (event) => onInputChange(event)
- * @param {object} [state] - object to get value from, and check errors against
- * @param {string} [type] - speical types: 'country', 'customer', 'customer-big'
- * 
- * react-select prop quick reference (https://react-select.com/props#api):
- *   isDisabled={false}
- *   isMulti={false}
- *   isSearchable={true}
- *   options={[{ value: 'chocolate', label: 'Chocolate' }]}
- *   placeholder="Select a color"
- *   value={options.find(o => o.code == state.color)} // to clear you need to set to null, not undefined
- *   isClearable={false}
- *   menuIsOpen={false}
- */
-export function Select({ inputId, minMenuWidth, name, prefix='', onChange, options, state, type, ...props }) {
+export function Select({ inputId, minMenuWidth, name, prefix='', onChange, options, state, type='', ...props }: SelectProps) {
+  let value: unknown
+  let hasError: { title: string, detail: string } | null = null
   if (!name) throw new Error('Select component requires a `name` and `options` prop')
 
   // Input is always controlled if state is passed in
   if (props.value) {
-    var value = props.value
+    value = props.value
   } else if (typeof state == 'object') {
     value = options.find(o => o.value == util.deepFind(state, name))
     if (typeof value == 'undefined') value = ''
   }
   
   // An error matches this input path
-  for (let item of (state?.errors || [])) {
-    if (util.isRegex(name) && (item.title||'').match(name)) var hasError = item
+  for (const item of (state?.errors || [])) {
+    if (util.isRegex(name) && (item.title||'').match(name)) hasError = item
     else if (item.title == name) hasError = item
   }
 
-
-  // classNames={{
-  //   // *Same classes as input.jsx*
-  //   // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
-  //   //
-  //   // Input container
-  //   control: ({ isFocused }) => `rounded-md bg-white hover:cursor-pointer text-sm sm:text-sm/6 
-  //     ${isFocused 
-  //       ? `outline outline-2 -outline-offset-2 ${error ? 'outline-danger' : 'outline-primary'}` 
-  //       : `outline outline-1 -outline-offset-1 ${error ? 'outline-danger' : 'outline-input-border'}`}`,
-  //   valueContainer: () => 'py-2 px-3 gap-1',
-  //   // Input container objects
-  //   input: () => `${error ? 'text-red-900' : 'text-input'}`,
-  //   multiValue: () => 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
-  //   multiValueLabel: () => '',
-  //   multiValueRemove: () => `border border-primary-dark bg-white rounded-md text-dark hover:bg-red-50`,
-  //   placeholder: () => 'text-input-placeholder',
-  //   singleValue: () => `${error ? 'text-red-900' : 'text-input'}`,
-  //   // Indicators
-  //   clearIndicator: () =>'text-gray-500 p-1 rounded-md hover:bg-red-50 hover:text-red-800',
-  //   dropdownIndicator: () => 'p-1 hover:bg-gray-100 text-gray-500 rounded-md hover:text-black',
-  //   indicatorsContainer: () => 'p-1 px-2 gap-1',
-  //   indicatorSeparator: () => 'py-0.5 before:content-[""] before:block before:bg-gray-100 before:w-px before:h-full',
-  //   // Dropmenu
-  //   menu: () => 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-sm overflow-hidden shadow-dropdown-ul',
-  //   groupHeading: () => 'ml-3 mt-2 mb-1 text-gray-500 text-sm',
-  //   noOptionsMessage: () => 'm-1 text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm',
-  //   option: ({ isFocused, isSelected }) => `hover:cursor-pointer px-3 py-2 !flex items-center gap-2
-  //     ${isFocused ? 'bg-gray-50 active:bg-gray-200' : ''} 
-  //     ${isSelected ? 'bg-gray-100 text-primary-dark' : ''}`,
-  // }}
-
-
   return (
     <div css={style} class="mt-input-before mb-input-after">
       <ReactSelect
+        /**
+         * react-select prop quick reference (https://react-select.com/props#api):
+         *   isDisabled={false}
+         *   isMulti={false}
+         *   isSearchable={true}
+         *   options={[{ value: 'chocolate', label: 'Chocolate' }]}
+         *   placeholder="Select a color"
+         *   value={options.find(o => o.code == state.color)} // to clear you need to set to null, not undefined
+         *   isClearable={false}
+         *   menuIsOpen={false}
+         */
         {...props}
-        _prefix={prefix}
-        _type={type||''}
-        _error={hasError}
-        key={value}
+        // @ts-expect-error
+        _nitro={{ prefix, type }}
+        key={value as string}
         unstyled={true}
         inputId={inputId || name}
         filterOption={(option, searchText) => {
-          if (option.data?.fixed) return true
+          if ((option.data as {fixed?: boolean}).fixed) return true
           return filterFn(option, searchText)
         }}
         menuPlacement="auto"
         minMenuHeight={250}
-        onChange={!onChange ? undefined : (o) => onChange({ target: { id: inputId || name, value: o?.value || o }})}
+        onChange={!onChange ? undefined : (o) => onChange({ target: { id: inputId || name, value: (o as {value?: unknown})?.value || o }})}
         options={options}
         value={value}
         classNames={{
           // Input container
-          control: (p) => getSelectStyle({ name: 'control', hasError, ...p }),
+          control: (p) => getSelectStyle({ name: 'control', hasError: !!hasError, ...p }),
           valueContainer: () => getSelectStyle({ name: 'valueContainer' }),
           // Input container objects
-          input: () => getSelectStyle({ name: 'input', hasError }),
+          input: () => getSelectStyle({ name: 'input', hasError: !!hasError }),
           multiValue: () => getSelectStyle({ name: 'multiValue' }),
           multiValueLabel: () => '',
           multiValueRemove: () => getSelectStyle({ name: 'multiValueRemove' }),
           placeholder: () => getSelectStyle({ name: 'placeholder' }),
-          singleValue: () => getSelectStyle({ name: 'singleValue', hasError }),
+          singleValue: () => getSelectStyle({ name: 'singleValue', hasError: !!hasError }),
           // Indicators
           clearIndicator: () => getSelectStyle({ name: 'clearIndicator' }),
           dropdownIndicator: () => getSelectStyle({ name: 'dropdownIndicator' }),
@@ -176,23 +112,25 @@ export function Select({ inputId, minMenuWidth, name, prefix='', onChange, optio
           Control, 
           SingleValue, 
           Option,
-          DropdownIndicator, ClearIndicator, MultiValueRemove,
+          DropdownIndicator, 
+          ClearIndicator, 
+          MultiValueRemove,
         }}
         styles={{
           menu: (base) => ({ 
-            ...base, minWidth: minMenuWidth
+            ...base, minWidth: minMenuWidth,
           }),
           // On mobile, the label will truncate automatically, so we want to
           // override that behaviour.
           multiValueLabel: (base) => ({
             ...base,
-            whiteSpace: "normal",
-            overflow: "visible",
+            whiteSpace: 'normal',
+            overflow: 'visible',
           }),
           control: (base) => ({
             ...base,
             outline: undefined,
-            transition: "none",
+            transition: 'none',
           }),
         }}
         // menuIsOpen={true}
@@ -207,25 +145,27 @@ export function Select({ inputId, minMenuWidth, name, prefix='', onChange, optio
   )
 }
 
-function Control({ children, ...props }) {
+function Control({ children, ...props }: ControlProps) {
   // Add flag and prefix to the input (control)
   // todo: check that the flag/prefix looks okay
-  const selectedOption = props.getValue()[0] || {}
+  const selectedOption = props.getValue()[0]
+  const optionFlag = (selectedOption as { flag?: string })?.flag
+  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, type?: string } })?._nitro
   return (
     <components.Control {...props}>
       {
         (() => {
-          if (props.selectProps._prefix) {
+          if (_nitro?.prefix) {
             return (
               <>
-                <span class="relative right-[2px]">{props.selectProps._prefix}</span>
+                <span class="relative right-[2px]">{_nitro?.prefix}</span>
                 {children}
               </>
             )
-          } else if (props.selectProps._type == 'country') {
+          } else if (_nitro?.type == 'country') {
             return (
               <>
-                <Flag flag={selectedOption.flag} />
+                { optionFlag && <Flag flag={optionFlag} /> }
                 {children}
               </>
             )
@@ -238,27 +178,29 @@ function Control({ children, ...props }) {
   )
 }
 
-function SingleValue(props) {
-  const selectedOption = props.getValue()[0] || {}
+function SingleValue(props: SingleValueProps) {
+  const selectedOption = props.getValue()[0] as { labelControl?: string }
   return (
     <components.SingleValue {...props}>
-      <>{selectedOption.labelControl || props.children}</>
+      <>{selectedOption?.labelControl || props.children}</>
     </components.SingleValue>
   )
 }
 
-function Option(props) {
+function Option(props: OptionProps) {
   // todo: check that the flag looks okay
+  const data = props.data as { className?: string, flag?: string }
+  const _nitro = (props.selectProps as { _nitro?: { type?: string } })?._nitro
   return (
-    <components.Option className={props.data.className} {...props}>
-      { props.selectProps._type == 'country' && <Flag flag={props.data.flag} /> }
+    <components.Option className={data.className} {...props}>
+      { _nitro?.type == 'country' && <Flag flag={data.flag} /> }
       <span class="flex-auto">{props.label}</span>
       {props.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-1" />}
     </components.Option>
   )
 }
 
-const DropdownIndicator = (props) => {
+const DropdownIndicator = (props: DropdownIndicatorProps) => {
   return (
     <components.DropdownIndicator {...props}>
       <ChevronDownIcon className="size-6 -my-0.5 -mx-1" />
@@ -266,7 +208,7 @@ const DropdownIndicator = (props) => {
   )
 }
 
-const ClearIndicator = (props) => {
+const ClearIndicator = (props: ClearIndicatorProps) => {
   return (
     <components.ClearIndicator {...props}>
       <XMarkIcon className="size-4 my-0.5" />
@@ -274,7 +216,7 @@ const ClearIndicator = (props) => {
   )
 }
 
-const MultiValueRemove = (props) => {
+const MultiValueRemove = (props: MultiValueRemoveProps) => {
   return (
     <components.MultiValueRemove {...props}>
       <XMarkIcon className="size-4 p-[1px]" />
@@ -282,8 +224,7 @@ const MultiValueRemove = (props) => {
   )
 }
 
-
-function Flag({ flag }) {
+function Flag({ flag }: { flag?: string }) {
   if (!flag) return null
   // todo: public needs to come from webpack
   const publicPath = '/'
@@ -292,7 +233,65 @@ function Flag({ flag }) {
   )
 }
 
-const style = () => css`
+const selectStyles = {
+  // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
+  // Input container
+  control: {
+    base: 'rounded-md bg-white hover:cursor-pointer text-sm sm:text-sm/6 outline outline-1 -outline-offset-1 outline-input-border',
+    focus: 'outline-2 -outline-offset-2 outline-primary',
+    error: 'outline-danger',
+  },
+  valueContainer: 'py-2 px-3 gap-1',
+  // Input container objects
+  input: {
+    base: 'text-input',
+    error: 'text-red-900',
+  },
+  multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
+  multiValueLabel: '',
+  multiValueRemove: 'border border-primary-dark bg-white rounded-md text-dark hover:bg-red-50',
+  placeholder: 'text-input-placeholder',
+  singleValue: {
+    base: 'text-input',
+    error: 'text-red-900',
+  },
+  // Icon indicators
+  clearIndicator: 'text-gray-500 p-1 rounded-md hover:bg-red-50 hover:text-red-800',
+  dropdownIndicator: 'p-1 hover:bg-gray-100 text-gray-500 rounded-md hover:text-black',
+  indicatorsContainer: 'p-1 px-2 gap-1',
+  indicatorSeparator: 'py-0.5 before:content-[""] before:block before:bg-gray-100 before:w-px before:h-full',
+  // Dropdown menu
+  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-sm overflow-hidden shadow-dropdown-ul',
+  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-sm',
+  noOptionsMessage: 'm-1 text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm',
+  option: {
+    base: 'relative px-3 py-2 !flex items-center gap-2 cursor-default',
+    hover: 'bg-gray-50',
+    selected: '!bg-gray-100 text-primary-dark',
+  },
+}
+
+export function getSelectStyle({ name, isFocused, isSelected, hasError, usePrefixes }: GetSelectStyle) {
+  // Returns a class list that conditionally includes hover/focus modifier classes, or uses CSS modifiers, e.g. hover:, focus:
+  // @ts-expect-error
+  const obj = selectStyles[name]
+  let output = obj?.base
+  if (typeof obj == 'string') return obj // no modifiers
+
+  if (usePrefixes) {
+    if (obj.focus) output += ' ' + obj.focus.split(' ').map((part: string) => `focus:${part}`).join(' ')
+    if (obj.hover) output += ' ' + obj.hover.split(' ').map((part: string) => `hover:${part}`).join(' ')
+  } else {
+    if (obj.focus && isFocused) output += ` ${obj.focus}`
+    if (obj.hover && isFocused) output += ` ${obj.hover}`
+  }
+  if (obj.error && hasError) output += ` ${obj.error}`
+  if (obj.selected && isSelected) output += ` ${obj.selected}`
+  
+  return twMerge(output)
+}
+
+const style = css`
   /*
   todo: add these as tailwind classes
 

package/components/partials/form/{toggle.jsx → toggle.tsx}

@@ -1,5 +1,13 @@
-export function Toggle({ name, id, subtext, text, type = 'checkbox', ...props }) {
-  if (!name) throw new Error('Toggle requires a `name` prop')
+type ToggleProps = {
+  className?: string
+  id?: string
+  name: string
+  subtext?: string
+  text?: string
+  type?: 'checkbox'
+}
+
+export function Toggle({ name, id, subtext, text, type='checkbox', ...props }: ToggleProps) {
   id = id || name
   // https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
   return (

package/components/partials/{is-first-render.js → is-first-render.ts}

@@ -1,8 +1,7 @@
-export function IsFirstRender(delay) {
+export function IsFirstRender(delay?: number) {
   /*
    * Checks if the current render of a react component is the first
    * E.g. const isFirst = isFirstRender()
-   * @param {boolean} delay
    * @link https://stackoverflow.com/a/56267719/1900648
    * @return boolean
    */

package/components/partials/layout/layout1.tsx

@@ -0,0 +1,29 @@
+import { css } from 'twin.macro'
+import { Outlet } from 'react-router-dom'
+import { Message, Sidebar, SidebarProps } from 'nitro-web'
+
+export function Layout1({ Logo, menu, links }: SidebarProps) {
+  // Dashboard, app screens (only the <Outlet/> receives `params` and `location`)
+  return (
+    <div css={style} class="bg-[#F3F3F3]">
+      <Message />
+      <div class="flex-1">
+        <div class="wrapper lg:flex min-h-[100%] w-[100%] bg-[#FDFDFD] shadow-[0_0_40px_0_rgb(237_237_237)]">
+          <Sidebar Logo={Logo} menu={menu} links={links} />
+          <div class="py-10 px-14 flex-1">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const style = css`
+  .wrapper {
+    position: relative;
+    max-width: 1800px;
+    margin: 0 auto;
+  }
+`
+

package/components/partials/layout/{layout2.jsx → layout2.tsx}

@@ -1,9 +1,9 @@
 import { css } from 'twin.macro'
 import { Outlet } from 'react-router-dom'
-import { Message } from '../element/message.jsx'
+import { Message } from 'nitro-web'
 
 // Signin, reset password, etc
-export function Layout2({ Logo }) {
+export function Layout2({ Logo }: { Logo: React.ComponentType<{ alt: string; width: string }> }) {
   return (
     <div css={style} class="bg-[#F3F3F3]">
       <Message />
@@ -33,7 +33,7 @@ export function Layout2({ Logo }) {
   )
 }
 
-const style = () => css`
+const style = css`
   .wrapper {
     position: relative;
     max-width: 1800px;

package/components/partials/{styleguide.jsx → styleguide.tsx}

@@ -1,14 +1,9 @@
-import { getCountryOptions, getCurrencyOptions, ucFirst } from '../../util.js'
+import { Drop, Dropdown, Input, Select, Button, Checkbox, GithubLink } from 'nitro-web'
+import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 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'
-import { GithubLink } from './element/github-link.jsx'
+import { Config } from 'types'
 
-export function Styleguide({ config }) {
+export function Styleguide({ config }: { config: Config }) {
   const [customerSearch, setCustomerSearch] = useState('')
   const [state, setState] = useState({
     address: '',
@@ -41,7 +36,7 @@ export function Styleguide({ config }) {
     { label: 'Delete' },
   ]
 
-  function onInputChange (e) {
+  function onInputChange (e: { target: { id: string, value: unknown } }) {
     if ((e.target.id == 'customer' || e.target.id == 'customer2') && e.target.value == '') {
       setCustomerSearch('')
       e.target.value = null // clear the selected value
@@ -49,7 +44,7 @@ export function Styleguide({ config }) {
     setState(s => ({ ...s, [e.target.id]: e.target.value }))
   }
 
-  function onCustomerSearch (search) {
+  function onCustomerSearch (search: string) {
     setCustomerSearch(search || '')
   }
 
@@ -114,10 +109,10 @@ export function Styleguide({ config }) {
         <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 color="primary" size="xs">*-xs button</Button></div>
+        <div><Button color="primary" size="sm">*-sm button</Button></div>
+        <div><Button color="primary">*-md (default)</Button></div>
+        <div><Button color="primary" size="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=&quot;v&quot;</Button></div>
         <div><Button IconRight2="v" className="w-[200px]">IconRight2=&quot;v&quot;</Button></div>
@@ -176,10 +171,12 @@ export function Styleguide({ config }) {
                 className: 'bb', 
                 fixed: true,
                 value: '', 
-                label: <>
-                  <b>New Customer</b>
-                  {customerSearch ? <> / Add <b>{ucFirst(customerSearch)}</b></> : ''}
-                </>, 
+                label: (
+                  <>
+                    <b>New Customer</b>
+                    {customerSearch ? <> / Add <b>{ucFirst(customerSearch)}</b></> : ''}
+                  </>
+                ), 
               },
               { value: '1', label: 'Iron Man Industries' },
               { value: '2', label: 'Captain America' },

package/components/settings/{settings-account.jsx → settings-account.tsx}

@@ -1,18 +1,14 @@
+// @ts-nocheck
 // 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'
+import * as util from 'nitro-web/util'
+import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
+import { Button, FormError, Input, Modal, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsAccount() {
-  let isLoading = useState('')
-  let [removeModal, setRemoveModal] = useState()
-  let [{user}, setStore] = sharedStore.useTracked()
-  let [state, setState] = useState({
+  const isLoading = useState('')
+  const [removeModal, setRemoveModal] = useState()
+  const [{user}, setStore] = sharedStore.useTracked()
+  const [state, setState] = useState({
     avatar: user.avatar || '',
     email: user.email || '',
     firstName: user.firstName || '',
@@ -131,7 +127,7 @@ export function RemoveModal ({ show, setShow }) {
 }
 
 import { css } from 'twin.macro'
-const style = (_theme) => css`
+const style = css`
   /* input[type='file'] {
     padding: 8px 18px;
     font-size: 12px;

package/components/settings/{settings-business.jsx → settings-business.tsx}

@@ -1,11 +1,10 @@
-// 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'
+// @ts-nocheck
+// todo: finish tailwind conversio
+
+////// look at the select type error below
+import * as util from 'nitro-web/util'
+import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
+import { Button, Input, Select, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsBusiness({ config }) {
   const isLoading = useState('')

package/components/settings/{settings-team--member.jsx → settings-team--member.tsx}

@@ -1,11 +1,7 @@
+// @ts-nocheck
 // todo: finish tailwind conversion
-import { css } from 'twin.macro'
-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'
+import { Button, FormError, Input, Modal, Select } from 'nitro-web'
+import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
 
 export function SettingsTeamMember ({ showModal, setShowModal }) {
   // @param {object} showModal - user
@@ -29,7 +25,7 @@ export function SettingsTeamMember ({ showModal, setShowModal }) {
   }
 
   return (
-    <Modal show={showModal} setShow={setShowModal} css={style} class="p-modal">
+    <Modal show={showModal} setShow={setShowModal} 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>
@@ -103,6 +99,3 @@ export function SettingsTeamMember ({ showModal, setShowModal }) {
     </Modal>
   )
 }
-
-const style = (_theme) => css`
-`