nitro-web 0.0.14 → 0.0.16

package/_example/client/index.ts

@@ -8,4 +8,3 @@ import { Layout1, Layout2 } from '../components/partials/layouts'
 
 // Auto-import page components, initilize 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,8 +1,8 @@
-// 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 nitroDir = path.dirname(require.resolve('nitro-web'))
 
@@ -15,11 +15,11 @@ 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)',
       },

package/client/index.ts

@@ -50,3 +50,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/signup.tsx

@@ -32,11 +32,11 @@ 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. Tony Stark" state={state} onChange={onChange.bind(setState)} />
+            <Input 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. Stark Industries" state={state} onChange={onChange.bind(setState)} />
+            <Input name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
           </div>
         </div>
         <div>

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/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 },
   ]
 

package/components/partials/styleguide.tsx

@@ -1,4 +1,4 @@
-import { Drop, Dropdown, Input, Select, Button, Checkbox, GithubLink } from 'nitro-web'
+import { Drop, Dropdown, Input, Select, Button, Checkbox, GithubLink, isDemo } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { CheckIcon } from '@heroicons/react/20/solid'
 import { Config } from 'types'
@@ -11,7 +11,7 @@ export function Styleguide({ config }: { config: Config }) {
     currency: 'nzd', // can be commented too
     amount: 100,
     brandColor: '#F3CA5F',
-    firstName: 'Tony',
+    firstName: 'Bruce',
     date: Date.now(),
     errors: [
       { title: 'address', detail: 'Address is required' },
@@ -52,7 +52,7 @@ export function Styleguide({ config }: { config: Config }) {
     <div class="mb-10 text-left max-w-[1100px]">
       <GithubLink filename={__filename} />
       <div class="mb-7">
-        <h1 class="h1">Styleguide</h1>
+        <h1 class="h1">{isDemo ? 'Design System' : 'Style Guide'}</h1>
         <p>
           Components are styled using&nbsp;
           <a href="https://v3.tailwindcss.com/docs/configuration" class="underline" target="_blank" rel="noreferrer">TailwindCSS</a>. 

package/components/settings/settings-account.tsx

@@ -48,11 +48,11 @@ export function SettingsAccount() {
           <div class="cols cols-6 cols-gap-3">
             <div class="col">
               <label for="firstName">First Name(s)</label>
-              <Input name="firstName" placeholder="E.g. Tony" state={state} onChange={onChange(setState)} />
+              <Input name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange(setState)} />
             </div>
             <div class="col">
               <label for="lastName">Last Name</label>
-              <Input name="lastName" placeholder="E.g. Stark" state={state} onChange={onChange(setState)} />
+              <Input name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange(setState)} />
             </div>
             <div class="col">
               <label for="email">Email Address</label>

package/components/settings/settings-business.tsx

@@ -80,7 +80,7 @@ export function SettingsBusiness({ config }) {
             </div>
             <div class="col">
               <label for="business.name">Trading Name</label>
-              <Input name="business.name" placeholder="E.g. Stark Industries" state={state} onChange={onChange(setState)} />
+              <Input name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange(setState)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">Custom Address</Link>

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

@@ -72,11 +72,11 @@ export function SettingsTeamMember ({ showModal, setShowModal }) {
           </div>
           <div class="col">
             <label for="firstName">First Name</label>
-            <Input name="firstName" placeholder="E.g. Tony" state={state} onChange={onChange(setState)} />
+            <Input name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange(setState)} />
           </div>
           <div class="col">
             <label for="lastName">Last Name</label>
-            <Input name="lastName" placeholder="E.g. Stark" state={state} onChange={onChange(setState)} />
+            <Input name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange(setState)} />
           </div>
           <div class="col-12">
             <label for="message">Invitation Message</label>

package/package.json

@@ -3,7 +3,7 @@
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "main": "./client/index.ts",
   "type": "module",
   "keywords": [
@@ -35,10 +35,10 @@
   },
   "scripts": {
     "dev": "npm run dev -w example",
-    "dev:client": "npm run dev:client -w example",
-    "dev:client-only": "isStatic=true npm run dev:client -w example",
+    "dev:client": "isDemo=true npm run dev:client -w example",
+    "dev:client-only": "isDemo=true isStatic=true npm run dev:client -w example",
     "dev:server": "npm run dev:server -w example",
-    "build": "isStatic=true npm run build -w example",
+    "build": "isDemo=true isStatic=true npm run build -w example",
     "major": "npm run types && standard-version --release-as major && npm publish",
     "minor": "npm run types && standard-version --release-as minor && npm publish",
     "patch": "npm run types && standard-version --release-as patch && npm publish",

package/readme.md

@@ -11,7 +11,7 @@ npm i nitro-web
 ### Install
 
 1. Copy ./_example into your project
-2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.14"`
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.16"`
 3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
 4. Run `npm i`
 

package/types/required-globals.d.ts

@@ -7,6 +7,7 @@ import { CSSInterpolation } from '@emotion/serialize'
 declare global {
   /** Webpack injected config variables */
   const INJECTED: Record<string, string|boolean|object>
+  const ISDEMO: boolean
   /** Webpack svg loader */
   module '*.svg' {
     const content: React.FC<React.SVGProps<SVGElement>>

package/webpack.config.js

@@ -161,11 +161,6 @@ export const getConfig = (config) => {
             replace: 'if (false && unsafePseudoClasses',
           },
         },
-        {
-          test: /styleguide\.html$/i,
-          exclude: [/\/server\/email/],
-          loader: 'html-loader',
-        },
         {
           test: /\.csv$/,
           use: [
@@ -278,6 +273,7 @@ export const getConfig = (config) => {
         ],
       }),
       new webpack.DefinePlugin({
+        ISDEMO: !!process.env.isDemo,
         INJECTED: JSON.stringify({
           ...pick(config, config.inject ? config.inject.split(' ') : []),
         }),