nitro-web 0.0.15 → 0.0.17

package/components/partials/element/modal.tsx

@@ -1,111 +1,84 @@
-// @ts-nocheck
-// todo: finish tailwind conversion
-import { css } from 'twin.macro'
 import { IsFirstRender } from 'nitro-web'
 import SvgX1 from 'nitro-web/client/imgs/icons/x1.svg'
 
-export function Modal({ show, setShow, children, className, maxWidth, minHeight, dismissable = true }) {
-  const [state, setState] = useState()
-  const containerEl = useRef()
+type ModalProps = {
+  show: boolean
+  setShow: (show: boolean) => void
+  children: React.ReactNode
+  maxWidth?: string
+  minHeight?: string
+  dismissable?: boolean
+  [key: string]: unknown
+}
+
+export function Modal({ show, setShow, children, maxWidth, minHeight, dismissable = true, ...props }: ModalProps) {
+  const [state, setState] = useState(show ? 'open' : 'close')
+  const containerEl = useRef<HTMLDivElement>(null)
   const isFirst = IsFirstRender()
 
-  useEffect(() => {
-    createScrollbarClasses()
-    return () => {
-      elementWithScrollbar().classList.remove('scrollbarPadding')
-    } // cleanup
-  }, [])
+  const states = {
+    'close': { 
+      root: 'left-[-100vw] transition-[left] duration-0 delay-200',
+      bg: 'opacity-0',
+      container: 'opacity-0 scale-[0.97]',
+    },
+    'close-now': { 
+      root: '',
+      bg: '',
+      container: 'opacity-0 !transition-none',
+    },
+    'open': { 
+      root: 'left-0 transition-none model-open',
+      bg: 'opacity-100 duration-200',
+      container: 'opacity-100 scale-[1] duration-200',
+    },
+  }
+  const _state = states[state as keyof typeof states]
+
 
   useEffect(() => {
+    if (isFirst) return
     if (show) {
-      elementWithScrollbar().classList.add('scrollbarPadding')
-      setState('modal-open')
-    } else if (!isFirst) {
-      // Dont close if first render (forgot what use case this was needed for)
+      setState('open')
+    } else {
       setTimeout(() => {
         // If another modal is being opened, force close the container for a smoother transition
         if (document.getElementsByClassName('modal-open').length > 1) {
-          setState('modal-close-immediately')
+          setState('close-now')
         } else {
-          setState('')
-          elementWithScrollbar().classList.remove('scrollbarPadding')
+          setState('close')
         }
       }, 10)
     }
   // There is a bug during hot-reloading where the modal does't open if we don't ensure 
   // the same truthy/falsey type is used.
   }, [!!show])
-
-  function elementWithScrollbar() {
-    // this needs to be non-body element otherwise the Modal.jsx doesn't open/close smoothly
-    //document.getElementsByTagName('body')[0] // document.getElementsByClassName('page')[0]
-    return document.getElementById('app')
-  }
   
-  function onClick(e) {
-    let clickedOnContainer = containerEl.current && containerEl.current.contains(e.target)
-    if (!clickedOnContainer && dismissable) {
+  function onClick(e: React.MouseEvent) {
+    const clickedOnModal = containerEl.current && containerEl.current.contains(e.target as Node)
+    if (!clickedOnModal && dismissable) {
       setShow(false)
     }
   }
 
-  function createScrollbarClasses() {
-    /**
-     *  Creates reusable margin and padding classes containing the scrollbar width and
-     *  sets window.scrollbarWidth
-     *  @return width
-     */
-    if (typeof window.scrollbarWidth !== 'undefined') return
-
-    var outer = document.createElement('div')
-    outer.style.visibility = 'hidden'
-    outer.style.width = '100px'
-    outer.style.margin = '0px'
-    outer.style.padding = '0px'
-    outer.style.border = '0'
-    document.body.appendChild(outer)
-
-    var widthNoScroll = outer.offsetWidth
-    // force scrollbars
-    outer.style.overflow = 'scroll'
-
-    // add innerdiv
-    var inner = document.createElement('div')
-    inner.style.width = '100%'
-    outer.appendChild(inner)
-
-    var widthWithScroll = inner.offsetWidth
-
-    // Remove divs
-    outer.parentNode.removeChild(outer)
-    let width = (window.scrollbarWidth = widthNoScroll - widthWithScroll)
-
-    // Create new inline stylesheet and append to the head
-    let style = document.createElement('style')
-    let css = (
-      '.scrollbarPadding {padding-right:' + width + 'px !important; overflow:hidden !important;}' +
-      '.scrollbarMargin {margin-right:' + width + 'px !important; overflow:hidden !important;}'
-    )
-    style.type = 'text/css'
-    if (style.styleSheet) style.styleSheet.cssText = css //<=IE8
-    else style.appendChild(document.createTextNode(css))
-    document.getElementsByTagName('head')[0].appendChild(style)
-
-    return width
-  }
-
   return (
-    <div css={style} class={`${state}`} onClick={(e) => e.stopPropagation()}>
-      <div class="modal-bg wrapper scrollbarPadding"></div>
-      <div class="modal-container">
-        {/* we also need to be able to scroll without closing */}
-        <div onMouseDown={onClick}> 
+    <div 
+      onClick={(e) => e.stopPropagation()} 
+      class={`fixed top-0 w-[100vw] h-[100vh] z-[700] ${_state.root}`}
+    >
+      <div class={`!absolute inset-0 box-content bg-gray-500/70 transition-opacity ${_state.bg}`}></div>
+      <div class={`relative h-[100vh] overflow-y-auto transition-[opacity,transform] ${_state.container}`}>
+        <div class="flex items-center justify-center min-h-full" onMouseDown={onClick}> 
           <div 
             ref={containerEl} 
-            style={{ maxWidth: maxWidth || '740px', minHeight: typeof minHeight == 'undefined' ? '487px' : minHeight }} 
-            class={`modal1 ${className}`}
+            style={{ maxWidth: maxWidth || '550px', minHeight: minHeight }} 
+            class={`relative w-full mx-6 mt-4 mb-8 bg-white rounded-lg shadow-lg ${props.className}`}
           >
-            <div class="modal-close" onClick={() => { if (dismissable) { setShow(false) }}}><SvgX1 /></div>
+            <div 
+              class="absolute top-0 right-0 p-3 m-1 cursor-pointer" 
+              onClick={() => { if (dismissable) { setShow(false) }}}>
+                <SvgX1 />
+            </div>
             {children}
           </div>
         </div>
@@ -113,118 +86,3 @@ export function Modal({ show, setShow, children, className, maxWidth, minHeight,
     </div>
   )
 }
-
-const style = css`
-  /* Modal structure */
-  & {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    height: calc(100vh);
-    z-index: 699;
-    .modal-bg {
-      position: absolute !important;
-      display: flex;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      box-sizing: content-box;
-      &:before {
-        content: '';
-        display: block;
-        flex: 1;
-        background: rgba(255, 255, 255, 0.82);
-        /* backdrop-filter: blur(1px);
-        -webkit-backdrop-filter: blur(1px); */
-      }
-    }
-    .modal-container {
-      position: relative;
-      height: calc(100vh);
-      // horisontal centering
-      > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100%;
-        // vertical centering
-        > div {
-          margin: 30px 20px 90px;
-          width: 100%;
-        }
-      }
-    }
-    &.modal-close-immediately {
-      .modal-container > div > div {
-        transition: none !important;
-      }
-    }
-  }
-
-  /* Animation */
-
-  & {
-    left: -100%;
-    transition: left 0s 0.2s;
-  }
-  .modal-bg {
-    opacity: 0;
-    transition: opacity 0.15s ease, transform 0.15s ease;
-  }
-  .modal-container {
-    /*overflow: hidden;*/
-    overflow-y: scroll;
-    overflow-x: auto;
-  }
-  .modal-container > div > div {
-    opacity: 0;
-    transform: scale(0.97);
-    transition: opacity 0.15s ease, transform 0.15s ease;
-  }
-  &.modal-open {
-    left: 0;
-    transition: none;
-    .modal-bg {
-      opacity: 1;
-      transition: opacity 0.2s ease, transform 0.2s ease;
-    }
-    .modal-container {
-      overflow-y: scroll;
-      overflow-x: auto;
-    }
-    .modal-container > div > div {
-      opacity: 1;
-      transform: scale(1);
-      transition: opacity 0.2s ease, transform 0.2s ease;
-    }
-  }
-
-  /* Modal customisations */
-
-  .modal1 {
-    background: white;
-    border: 2px solid #27242C;
-    box-shadow: 0px 1px 29px rgba(31, 29, 36, 0.07);
-    border-radius: 8px;
-    .subtitle {
-      margin-bottom: 34px; // same as form pages
-    }
-    .modal-close {
-      position: absolute;
-      margin: 10px;
-      padding: 15px 20px;
-      top: 0;
-      right: 0;
-      cursor: pointer;
-      line {
-        transition: all 0.1s;
-      }
-      &:hover {
-        line {
-          /* stroke: theme'colors.primary-dark'; */
-        }
-      }
-    }
-  }
-`

package/components/partials/element/sidebar.tsx

@@ -1,6 +1,7 @@
 // Component: https://tailwindui.com/components/application-ui/application-shells/sidebar#component-a69d85b6237ea2ad506c00ef1cd39a38
 import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
 import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
+import { isDemo } from 'nitro-web'
 import {
   Bars3Icon,
   HomeIcon,
@@ -84,8 +85,8 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
 
   const _menu = menu || [
     { name: 'Dashboard', to: '/', Icon: HomeIcon },
-    { name: 'Styleguide', to: '/styleguide', Icon: PaintBrushIcon },
-    { name: 'Pricing (example)', to: '/pricing', Icon: UsersIcon },
+    { name: isDemo ? 'Design System' : 'Style Guide', to: '/styleguide', Icon: PaintBrushIcon }, 
+    { name: 'Pricing', to: '/pricing', Icon: UsersIcon },
     { name: 'Signout', to: '/signout', Icon: ArrowLeftCircleIcon },
   ]
 
@@ -114,7 +115,7 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
                       isActive(item.to)
                         ? 'bg-gray-50 text-indigo-600'
                         : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600',
-                      'group flex gap-x-3 items-center rounded-md p-2 text-sm/6 font-semibold'
+                      'group flex gap-x-3 items-center rounded-md p-2 text-md/6 font-semibold'
                     )}
                   >
                     { item.Icon && 
@@ -142,7 +143,7 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
                       isActive(team.to)
                         ? 'bg-gray-50 text-indigo-600'
                         : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600',
-                      'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold'
+                      'group flex gap-x-3 rounded-md p-2 text-md/6 font-semibold'
                     )}
                   >
                     <span

package/components/partials/form/checkbox.tsx

@@ -95,7 +95,7 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
         }
       </div>
       {text && 
-        <label for={id} className="self-center text-sm-label select-none">
+        <label for={id} className="self-center text-sm select-none">
           <span className="text-gray-900">{text}</span>
           <span className="ml-2 text-gray-500">{subtext}</span>
         </label>

package/components/partials/form/input-color.tsx

@@ -3,21 +3,21 @@ import Saturation from '@uiw/react-color-saturation'
 import Hue from '@uiw/react-color-hue'
 import { Dropdown, util } from 'nitro-web'
 
-type InputColorProps = {
-  className?: string
+export type FieldColorProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  name: string
+  id?: string 
   defaultColor?: string
-  iconEl?: React.ReactNode
-  id?: string
-  onChange?: (e: { target: { id: string, value: string } }) => void
-  value?: string
-  [key: string]: unknown
+  Icon?: React.ReactNode
+  onChange?: (event: { target: { id: string, value: string|null } }) => void
+  value?: string|null
 }
 
-export function InputColor({ className, defaultColor='#333', iconEl, id, onChange, value, ...props }: InputColorProps) {
+export function FieldColor({ defaultColor='#333', Icon, onChange, value, ...props }: FieldColorProps) {
   const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
-  const isInvalid = className?.includes('is-invalid') ? 'is-invalid' : ''
+  const isInvalid = props.className?.includes('is-invalid') ? 'is-invalid' : ''
+  const id = props.id || props.name
 
-  function onInputChange(e: { target: { id: string, value: string } }) {
+  function onInputChange(e: { target: { id: string, value: string|null } }) {
     setLastChanged(`ic-${Date.now()}`)
     if (onChange) onChange(e)
   }
@@ -27,26 +27,27 @@ export function InputColor({ className, defaultColor='#333', iconEl, id, onChang
       dir="bottom-left"
       menuToggles={false}
       menuChildren={
-        <ColorPicker key={lastChanged} defaultColor={defaultColor} id={id} value={value} onChange={onChange} />
+        <ColorPicker key={lastChanged} defaultColor={defaultColor} id={id} name={props.name} value={value} onChange={onChange} />
       }
     >
       <div className="grid grid-cols-1">
-        {iconEl}
-        <input 
-          {...props} 
-          className={className + ' ' + isInvalid} 
-          id={id} 
-          value={value} 
+        {Icon}
+        <input
+          {...props}
+          className={(props.className || '') + ' ' + isInvalid}
+          id={id}
+          value={value}
           onChange={onInputChange}
-          onBlur={() => !validHex(value||'') && onInputChange({ target: { id: id || '', value: '' }})}
-          autoComplete="off" 
+          onBlur={() => !validHex(value||'') && onInputChange({ target: { id: id, value: '' }})}
+          autoComplete="off"
+          type="text"
         />
       </div>
     </Dropdown>
   )
 }
 
-function ColorPicker({ id='', onChange, value='', defaultColor='' }: InputColorProps) {
+function ColorPicker({ id='', onChange, value='', defaultColor='' }: FieldColorProps) {
   const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultColor))
   const [debounce] = useState(() => util.throttle(callOnChange, 50))
 

package/components/partials/form/input-currency.tsx

@@ -1,36 +1,43 @@
-// @ts-nocheck
 import { NumericFormat } from 'react-number-format'
-import { getCurrencyPrefixWidth } from 'nitro-web/util'
+import { getPrefixWidth } from 'nitro-web/util'
 
-type InputCurrencyProps = {
-  /** field name or path on state */
-  id: string
-  /** e.g. { currencies: { nzd: { symbol: '$', digits: 2 } } } */
+// Declaring the type here because typescript fails to infer type when referencing NumericFormatProps from react-number-format
+type NumericFormatProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  thousandSeparator?: boolean | string;
+  decimalSeparator?: string;
+  allowedDecimalSeparators?: Array<string>;
+  thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+  decimalScale?: number;
+  fixedDecimalScale?: boolean;
+  allowNegative?: boolean;
+  allowLeadingZeros?: boolean;
+  suffix?: string;
+  prefix?: string;
+}
+
+export type FieldCurrencyProps = NumericFormatProps & {
+  name: string
+  id?: string 
+  /** e.g. { currencies: { nzd: { symbol: '$', digits: 2 } } } (check out the nitro example for more info) */
   config: {
     currencies: { [key: string]: { symbol: string, digits: number } }, 
     countries: { [key: string]: { numberFormats: { currency: string } } } 
   }
-  className: string
-  /** currency iso */
+  /** currency iso, e.g. 'nzd' */
   currency: string
-  onChange: (event: { target: { id: string, value: string } }) => void
-  /** e.g. 'Amount' */
-  placeholder: string
-  /** e.g. 123 (input is always controlled if state is passed in) */
-  value: number
+  onChange?: (event: { target: { id: string, value: string|number|null } }) => void
+  /** value should be in cents */
+  value?: string|number|null
+  defaultValue?: number | string | null
 }
 
-export function InputCurrency({ id, config, className, currency='nzd', onChange, placeholder, value }: InputCurrencyProps) {
-  if (!config?.currencies || !config?.countries) {
-    throw new Error(
-      'InputCurrency: `config.currencies` and `config.countries` is required, check out the nitro example for more info.'
-    )
-  }
-  const [dontFix, setDontFix] = useState()
+export function FieldCurrency({ config, currency='nzd', onChange, value, defaultValue, ...props }: FieldCurrencyProps) {
+  const [dontFix, setDontFix] = useState(false)
   const [settings, setSettings] = useState(() => getCurrencySettings(currency))
   const [dollars, setDollars] = useState(() => toDollars(value, true, settings))
-  const [prefixWidth, setPrefixWidth] = useState()
+  const [prefixWidth, setPrefixWidth] = useState(0)
   const ref = useRef({ settings, dontFix }) // was null
+  const id = props.id || props.name
   ref.current = { settings, dontFix }
 
   useEffect(() => {
@@ -53,21 +60,27 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
 
   useEffect(() => {
     // Get the prefix content width
-    setPrefixWidth(settings.prefix == '$' ? getCurrencyPrefixWidth(settings.prefix, 1) : 0)
+    setPrefixWidth(settings.prefix == '$' ? getPrefixWidth(settings.prefix, 1) : 0)
   }, [settings.prefix])
 
-  function toCents(num: number) {
-    if (!num && num !== 0) return null
-    const value = Math.round(num * Math.pow(10, ref.current.settings.maxDecimals)) // e.g. 1.23 => 123
-    // console.log('toCents', num, value)
-    return value
+  function toCents(value?: string|number|null) {
+    const maxDecimals = ref.current.settings.maxDecimals
+    const parsed = parseFloat(value + '')
+    if (!parsed && parsed !== 0) return null
+    if (!maxDecimals) return parsed
+    const value2 = Math.round(parsed * Math.pow(10, maxDecimals)) // e.g. 1.23 => 123
+    // console.log('toCents', parsed, value2)
+    return value2
   }
 
-  function toDollars(num: string|number, toFixed: boolean, settings: { maxDecimals: number }) {
-    if (!num && num !== 0) return null
-    const value = num / Math.pow(10, (settings || ref.current.settings).maxDecimals) // e.g. 1.23 => 123
-    // console.log('toDollars', num, value)
-    return toFixed ? value.toFixed((settings || ref.current.settings).maxDecimals) : value
+  function toDollars(value?: string|number|null, toFixed?: boolean, settings?: { maxDecimals?: number }) {
+    const maxDecimals = (settings || ref.current.settings).maxDecimals
+    const parsed = parseFloat(value + '')
+    if (!parsed && parsed !== 0) return null
+    if (!maxDecimals) return parsed
+    const value2 = parsed / Math.pow(10, maxDecimals) // e.g. 1.23 => 123
+    // console.log('toDollars', value, value2)
+    return toFixed ? value2.toFixed(maxDecimals) : value2
   }
 
   function getCurrencySettings(currency: string) {
@@ -116,8 +129,9 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
   return (
     <div className="relative">
       <NumericFormat
-        id={id}
-        className={className}
+        {...props}
+        id={id} 
+        name={props.name}
         decimalSeparator={settings.decimalSeparator}
         thousandSeparator={settings.thousandSeparator}
         decimalScale={settings.maxDecimals}
@@ -127,9 +141,11 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
           onChange({ target: { id: id, value: toCents(floatValue) }})
         }}
         onBlur={() => { setDollars(toDollars(value, true))}}
-        placeholder={placeholder || '0.00'}
+        placeholder={props.placeholder || '0.00'}
         value={dollars}
         style={{ textIndent: `${prefixWidth}px` }}
+        type="text"
+        defaultValue={defaultValue}
       />
       <span
         class={`absolute top-[1px] bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-sm sm:text-sm/6 ${dollars !== null && settings.prefix == '$' ? 'text-dark' : ''}`}