nitro-web 0.0.15 → 0.0.17

package/_example/client/css/index.css

@@ -26,7 +26,7 @@
     @apply text-dark mb-2 text-sm font-bold;
   }
   label, .label {
-    @apply text-sm-label font-medium;
+    @apply text-sm font-medium;
   }
 }
 

package/_example/client/index.ts

@@ -1,4 +1,3 @@
-
 import 'nitro-web/client/globals'
 import { setupApp } from 'nitro-web'
 
@@ -6,6 +5,5 @@ import './css/index.css'
 import config from './config'
 import { Layout1, Layout2 } from '../components/partials/layouts'
 
-// Auto-import page components, initilize app, and run config.beforeApp
+// Auto-import page components, initialise app, and run config.beforeApp
 setupApp(config, [Layout1, Layout2])
-

package/_example/components/index.tsx

@@ -4,6 +4,7 @@
  */
 import { css, theme } from 'twin.macro'
 import config from '../client/config'
+import { isDemo } from 'nitro-web'
 import { 
   Signin, 
   Signup, 
@@ -79,7 +80,7 @@ DashboardPage.route = {
 export const StyleguidePage = () => <Styleguide config={config} />
 StyleguidePage.route = {
   '/styleguide': true,
-  'meta': { title: 'Style Guide - Nitro', layout: 1 },
+  'meta': { title: `${isDemo ? 'Design System' : 'Style Guide'} - Nitro`, layout: 1 },
 }
 
 // Not found page
@@ -139,9 +140,14 @@ export function PricingPage() {
           Choose the right plan for you
         </p>
       </div>
-      <p className="mx-auto mt-6 max-w-2xl text-pretty text-center text-lg font-medium text-gray-600 sm:text-xl/8">
-        Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer
-        loyalty, and driving sales.
+      <p className="mx-auto mt-6 max-w-3xl text-pretty text-center text-lg font-medium text-gray-600 sm:text-xl/8">
+        This is a&nbsp;
+        <a class="underline" href="https://tailwindui.com/components/marketing/sections/pricing" target="_blank" rel="noreferrer">
+          pricing page
+        </a> example using one of the&nbsp;
+        <a class="underline" href="https://tailwindui.com/components" target="_blank" rel="noreferrer">
+          Tailwind UI
+        </a> components. With minor composition changes, it&apos;s almost copy/paste.
       </p>
       <div className="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
         {tiers.map((tier, tierIdx) => (

package/_example/tailwind.config.js

@@ -1,9 +1,10 @@
-// https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L889
 import defaultTheme from 'tailwindcss/defaultTheme'
 import colors from 'tailwindcss/colors'
 import path from 'path'
 import Color from 'color'
+
 const lighten = (clr, val) => Color(clr).lighten(val).rgb().string()
+const darken = (clr, val) => Color(clr).darken(val).rgb().string()
 const nitroDir = path.dirname(require.resolve('nitro-web'))
 
 export default {
@@ -15,23 +16,21 @@ export default {
     ],
   },
   experimental: {
-    optimizeUniversalDefaults: true, // remove unneeded varables from universal selectors
+    optimizeUniversalDefaults: true, // remove undesired variables from universal selectors
   },
   theme: {
+    // Full list: https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L889
     extend: {
-      // Nitro theme variables
       boxShadow: {
         'dropdown-ul': '0 2px 8px 0 rgba(0, 0, 0, 0.05)',
       },
       colors: {
         // Main colors
-        'primary': colors.indigo[500],
-        'primary-dark': colors.indigo[600],
-        'primary-light': colors.indigo[400],
-        'primary-hover': lighten(colors.indigo[500], 0.05),
+        'primary': '#4c50f9',
+        'primary-dark': darken('#4c50f9', 0.05),
+        'primary-hover': lighten('#4c50f9', 0.05),
         'secondary': colors.green[500],
         'secondary-dark': colors.green[600],
-        'secondary-light': colors.green[400],
         'secondary-hover': lighten(colors.green[500], 0.05),
         'label': colors.gray[900],
         'link': colors.black,
@@ -40,6 +39,7 @@ export default {
         'light': colors.gray[100],
         'dark': colors.gray[900],
         // Alert colors
+        'critical': '#ff0000',
         'danger': '#ff0000',
         'danger-dark': colors.red[800],
         'info': colors.blue[500],
@@ -54,15 +54,15 @@ export default {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
       },
       fontSize: {
-        '2xs': ['0.77rem', { lineHeight: '1.5' }],
-        'xs': ['0.83rem', { lineHeight: '1.5' }],
-        'sm-label': ['0.87rem', { lineHeight: '1.5' }],
-        'sm': ['0.90rem', { lineHeight: '1.5' }],
-        'base': ['1rem', { lineHeight: '1.5' }],
-        'lg': ['1.16rem', { lineHeight: '1.75' }],
-        'xl': ['1.29rem', { lineHeight: '1.75' }],
-        '2xl': ['1.45rem', { lineHeight: '1.75' }],
-        '3xl': ['1.94rem', { lineHeight: '1.75' }],
+        '2xs': ['12px', { lineHeight: '1.5' }],
+        'xs': ['13px', { lineHeight: '1.5' }],
+        'sm': ['13.5px', { lineHeight: '1.5' }],
+        'md': ['14px', { lineHeight: '1.5' }],
+        'base': ['15.5px', { lineHeight: '1.5' }],
+        'lg': ['18px', { lineHeight: '1.75' }],
+        'xl': ['20px', { lineHeight: '1.75' }],
+        '2xl': ['22.5px', { lineHeight: '1.75' }],
+        '3xl': ['30px', { lineHeight: '1.75' }],
       },
       spacing: {
         'input-before': '0.625rem',

package/client/index.ts

@@ -22,11 +22,12 @@ export { Styleguide } from '../components/partials/styleguide'
 export { Accordion } from '../components/partials/element/accordion'
 export { Avatar } from '../components/partials/element/avatar'
 export { Button } from '../components/partials/element/button'
+export { Calendar, type CalendarProps } from '../components/partials/element/calendar'
 export { Dropdown } from '../components/partials/element/dropdown'
 export { GithubLink } from '../components/partials/element/github-link'
 export { Initials } from '../components/partials/element/initials'
 export { Message } from '../components/partials/element/message'
-// export { Modal } from '../components/partials/element/modal'
+export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
@@ -36,10 +37,10 @@ export { Checkbox } from '../components/partials/form/checkbox'
 export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
-export { Input } from '../components/partials/form/input'
-export { InputColor } from '../components/partials/form/input-color'
-export { InputCurrency } from '../components/partials/form/input-currency'
-// export { InputDate } from '../components/partials/form/input-date'
+export { Field } from '../components/partials/form/input'
+export { FieldColor, type FieldColorProps } from '../components/partials/form/input-color'
+export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/input-currency'
+export { FieldDate, type FieldDateProps } from '../components/partials/form/input-date'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle } from '../components/partials/form/select'
 export { Toggle } from '../components/partials/form/toggle'
@@ -50,3 +51,6 @@ export { Layout2 } from '../components/partials/layout/layout2'
 
 // Component Other
 export { IsFirstRender } from '../components/partials/is-first-render'
+
+// IsDemo environment variable
+export const isDemo = ISDEMO

package/components/auth/reset.tsx

@@ -1,4 +1,4 @@
-import { Topbar, Input, FormError, Button, util } from 'nitro-web'
+import { Topbar, Field, FormError, Button, util } from 'nitro-web'
 import { Errors } from 'types'
 
 export function ResetInstructions() {
@@ -24,7 +24,7 @@ export function ResetInstructions() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         
         <div class="mb-14">
@@ -67,11 +67,11 @@ export function ResetPassword() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="password">Your New Password</label>
-          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)} />
+          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)} />
         </div>
         <div>
           <label for="password2">Repeat Your New Password</label>
-          <Input name="password2" type="password" state={state} onChange={onChange.bind(setState)} />
+          <Field name="password2" type="password" state={state} onChange={onChange.bind(setState)} />
         </div>
 
         <div class="mb-14">

package/components/auth/signin.tsx

@@ -1,4 +1,4 @@
-import { Topbar, Input, Button, FormError, util } from 'nitro-web'
+import { Topbar, Field, Button, FormError, util } from 'nitro-web'
 import { Config, Errors } from 'types'
 
 export function Signin({ config }: { config: Config }) {
@@ -50,14 +50,14 @@ export function Signin({ config }: { config: Config }) {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         <div>
           <div class="flex justify-between"> 
             <label for="password">Password</label>
             <Link to="/reset" class="label underline2">Forgot?</Link>
           </div>
-          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
+          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
         </div>
         
         <div class="mb-14">

package/components/auth/signup.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, FormError, Topbar, util } from 'nitro-web'
+import { Button, Field, FormError, Topbar, util } from 'nitro-web'
 import { Config, Errors } from 'types'
 
 export function Signup({ config }: { config: Config}) {
@@ -32,20 +32,20 @@ export function Signup({ config }: { config: Config}) {
         <div class="grid grid-cols-2 gap-6">  
           <div>
             <label for="name">Your Name</label>
-            <Input name="name" placeholder="E.g. Bruce Wayne" state={state} onChange={onChange.bind(setState)} />
+            <Field name="name" placeholder="E.g. Bruce Wayne" state={state} onChange={onChange.bind(setState)} />
           </div>
           <div>
             <label for="business.name">Company Name</label>
-            <Input name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
+            <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
           </div>
         </div>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         <div>
           <label for="password">Password</label>
-          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
+          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
         </div>
         
         <div class="mb-14">

package/components/dashboard/dashboard.tsx

@@ -2,9 +2,9 @@ import { css, theme } from 'twin.macro'
 
 export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
   const [store] = useTracked()
-  const textColor = store.apiAvailable ? 'text-green-700' : 'text-pink-700'
-  const fillColor = store.apiAvailable ? 'fill-green-500' : 'fill-pink-500'
-  const bgColor = store.apiAvailable ? 'bg-green-100' : 'bg-pink-100'
+  const textColor = store.apiAvailable ? 'text-green-700' : config.isStatic ? 'text-gray-700' : 'text-pink-700'
+  const fillColor = store.apiAvailable ? 'fill-green-500' : config.isStatic ? 'fill-gray-500' : 'fill-pink-500'
+  const bgColor = store.apiAvailable ? 'bg-green-100' : config.isStatic ? 'bg-[#eeeeee]' : 'bg-pink-100'
 
   return (
     <div css={style}>

package/components/partials/element/button.tsx

@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
 
 type Props = {
   color?: 'primary'|'secondary'|'white'
@@ -16,7 +16,7 @@ type Props = {
 export function Button({ color='primary', size='md', className, isLoading, IconLeft, IconRight, IconRight2, children, ...props }: Props) {
   // const size = (color.match(/xs|sm|md|lg/)?.[0] || 'md') as 'xs'|'sm'|'md'|'lg'
   const iconPosition = IconLeft ? 'left' : IconRight ? 'right' : IconRight2 ? 'right2' : 'none'
-  const base = 'relative inline-block font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+  const base = 'relative inline-block font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
 
   // Button types
   const primary = 'bg-primary text-white shadow-sm hover:bg-primary-hover focus-visible:outline-primary'
@@ -48,7 +48,8 @@ export function Button({ color='primary', size='md', className, isLoading, IconL
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
 
   function getIcon(Icon: React.ReactNode | 'v') {
-    if (Icon == 'v') return <ChevronDownIcon className="size-6 -my-6 -mx-1" />
+    if (Icon == 'v' || Icon == 'down') return <ChevronDownIcon className="size-5 -my-6 -mx-1" />
+    if (Icon == '^' || Icon == 'up') return <ChevronUpIcon className="size-5 -my-6 -mx-1" />
     else return Icon
   }
   

package/components/partials/element/calendar.tsx

@@ -0,0 +1,108 @@
+import { DayPicker, getDefaultClassNames } from 'react-day-picker'
+import { isValid } from 'date-fns'
+import 'react-day-picker/style.css'
+import { IsFirstRender } from 'nitro-web'
+
+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
+}
+
+export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className }: 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'>
+        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
+      }
+    }
+  }
+  
+  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`,
+      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-primary-dark`,
+      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-primary-dark`,
+      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} size-[33px] text-sm`,
+
+      // States
+      focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,
+      range_start: `${d.range_start} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
+      range_end: `${d.range_end} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
+      selected: `${d.selected} font-normal `
+        + '[&:not(.rangemiddle)>button]:!text-white '
+        + '[&:not(.rangemiddle)>button]:!bg-primary-dark '
+        + '[&:not(.rangemiddle)>button]:!border-primary-dark ',
+    },
+  }
+
+  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>
+  )
+}