nitro-web 0.0.30 → 0.0.31

package/components/dashboard/dashboard.tsx

@@ -1,10 +1,11 @@
 import { css, theme } from 'twin.macro'
+import { injectedConfig } from 'nitro-web'
 
-export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
+export function Dashboard() {
   const [store] = useTracked()
-  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'
+  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}>
@@ -17,7 +18,7 @@ export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
           <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${config.isStatic ? ' (Static Example)' : ''}` }
+          { store.apiAvailable ? 'API Available' : `API Unavailable${injectedConfig.isStatic ? ' (Static Example)' : ''}` }
         </span>
       </p>
     </div>

package/components/partials/styleguide.tsx

@@ -1,9 +1,8 @@
 import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { CheckIcon } from '@heroicons/react/20/solid'
-import { Config } from 'nitro-web/types'
 
-export function Styleguide({ config }: { config: Config }) {
+export function Styleguide() {
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
@@ -167,7 +166,7 @@ export function Styleguide({ config }: { config: Config }) {
             name="country" 
             type="country" 
             state={state} 
-            options={useMemo(() => getCountryOptions(config.countries), [])} 
+            options={useMemo(() => getCountryOptions(injectedConfig.countries), [])} 
             onChange={onInputChange}
           />
         </div>
@@ -204,7 +203,7 @@ export function Styleguide({ config }: { config: Config }) {
           <Select 
             name="currency"
             state={state} 
-            options={useMemo(() => getCurrencyOptions(config.currencies), [])} 
+            options={useMemo(() => getCurrencyOptions(injectedConfig.currencies), [])} 
             onChange={onInputChange}
           />
         </div>
@@ -249,7 +248,8 @@ export function Styleguide({ config }: { config: Config }) {
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
-          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} 
+            config={injectedConfig} />
         </div>
       </div>
 
@@ -273,7 +273,7 @@ export function Styleguide({ config }: { config: Config }) {
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="avatar">Avatar</label>
-          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={config.awsUrl} />
+          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={injectedConfig.awsUrl} />
         </div>
         <div>
           <label for="calendar">Calendar</label>

package/components/settings/settings-business.tsx

@@ -4,9 +4,9 @@
 ////// 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, Field, Select, Topbar, Tabbar } from 'nitro-web'
+import { Button, Field, Select, Topbar, Tabbar, injectedConfig } from 'nitro-web'
 
-export function SettingsBusiness({ config }) {
+export function SettingsBusiness() {
   const isLoading = useState(false)
   const [{ user }, setStore] = sharedStore.useTracked()
   const [state, setState] = useState(() => {
@@ -64,7 +64,7 @@ export function SettingsBusiness({ config }) {
                 name="business.country" 
                 type="country" 
                 state={state} 
-                options={useMemo(() => util.getCountryOptions(config.countries), [])} 
+                options={useMemo(() => util.getCountryOptions(injectedConfig.countries), [])} 
                 onChange={onChange.bind(setState)}
               />
             </div>
@@ -74,7 +74,7 @@ export function SettingsBusiness({ config }) {
                 name="business.currency" 
                 type="country" 
                 state={state} 
-                options={useMemo(() => util.getCurrencyOptions(config.currencies), [])}
+                options={useMemo(() => util.getCurrencyOptions(injectedConfig.currencies), [])}
                 onChange={onChange.bind(setState)}
               />
             </div>

package/components/settings/settings-team--member.tsx

@@ -1,16 +1,14 @@
 // @ts-nocheck
 // todo: finish tailwind conversion
-import { Button, FormError, Field, Modal, Select } from 'nitro-web'
+import { Button, FormError, Field, Modal, Select, injectedConfig } from 'nitro-web'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Config } from 'nitro-web/types'
 
 type SettingsTeamMemberProps = {
   showModal: boolean
   setShowModal: (showModal: boolean) => void
-  config?: Config
 }
 
-export function SettingsTeamMember ({ showModal, setShowModal, config }: SettingsTeamMemberProps) {
+export function SettingsTeamMember ({ showModal, setShowModal }: SettingsTeamMemberProps) {
   // @param {object} showModal - user
   const [{ user }] = sharedStore.useTracked()
   const [isLoading] = useState(false)
@@ -34,7 +32,7 @@ export function SettingsTeamMember ({ showModal, setShowModal, config }: Setting
     <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 {config?.name || 'Nitro'}.</p>
+      <p class="subtitle">Invite a new team member to collaborate with you on {injectedConfig?.name || 'Nitro'}.</p>
       
       <form class="form" onSubmit={onSubmit}>
         <div class="cols cols-6 cols-gap-2-5">
@@ -89,7 +87,7 @@ export function SettingsTeamMember ({ showModal, setShowModal, config }: Setting
             <Field 
               name="message" 
               type="textarea" 
-              placeholder={`${user.firstName} is inviting you to collaborate on ${config?.name || 'Nitro'}.`} 
+              placeholder={`${user.firstName} is inviting you to collaborate on ${injectedConfig?.name || 'Nitro'}.`} 
               state={state} onChange={onChange.bind(setState)} 
             />
           </div>

package/components/settings/settings-team.tsx

@@ -2,9 +2,9 @@
 // todo: finish tailwind conversion
 import * as util from 'nitro-web/util'
 import SvgPlus from 'nitro-web/client/imgs/icons/plus.svg'
-import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember } from 'nitro-web'
+import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember, injectedConfig } from 'nitro-web'
 
-export function SettingsTeam({ config }) {
+export function SettingsTeam() {
   const isLoading = useState(false)
   const [showModal, setShowModal] = useState()
   const [{ user }] = sharedStore.useTracked()
@@ -48,7 +48,7 @@ export function SettingsTeam({ config }) {
             key: user._id,
             name: (
               <>
-                <Avatar awsUrl={config.awsUrl} user={user} isRound={true} class="mt--1 mb--1" />
+                <Avatar awsUrl={injectedConfig.awsUrl} user={user} isRound={true} class="mt--1 mb--1" />
                 <b>{util.ucFirst(user.name)}</b>
                 {user.status != 'invited' && <span class="text-grey">(Invitation pending)</span>}
               </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",