nitro-web 0.0.1 → 0.0.3

package/.eslintrc.json

@@ -8,8 +8,7 @@
   "env": {
     "browser": true,
     "es6": true,
-    "node": true,
-    "jest/globals": true
+    "node": true
   },
   "globals": {
     // Project globals
@@ -19,7 +18,6 @@
     "sharedStore": true,
     "sharedStoreCache": true,
     // Dependency globals
-    "Component": true,
     "Link": true,
     "forwardRef": true,
     "useCallback": true,
@@ -39,7 +37,6 @@
     "sourceType": "module"
   },
   "plugins": [
-    "jest",
     "react",
     "react-hooks",
     "import",
@@ -80,7 +77,7 @@
   },
   "settings": {
     "react": {
-      "version": "16.3"
+      "version": "18"
     }
   }
 }

package/_example/{.env-example → .env}

@@ -3,8 +3,8 @@ awsBucket=nitro-dev
 awsRegion=ap-southeast-2
 awsSecretAccessKey=
 awsUrl=https://s3-ap-southeast-2.amazonaws.com/
-emailFrom=Nitro<nitro@nitro.com>
-emailReplyTo=Nitro<nitro@nitro.com>
+emailFrom=Nitro<bruce@wayneenterprises.com>
+emailReplyTo=Nitro<bruce@wayneenterprises.com>
 emailTestMode=true
 googleMapsApiKey=
 mailgunDomain=mg.nitro.com
@@ -13,4 +13,4 @@ masterPassword=1234
 mongoUrl=localhost:27017/nitro-dev
 stripePublishableKey=
 stripeSecretKey=
-testEmail=
+testEmail=bruce@wayneenterprises.com

package/_example/client/config.ts

@@ -1,5 +1 @@
-declare const CONFIG: Record<string, any>
-const config = {}
-Object.assign(config, CONFIG) // Injected environment variables from webpack
-
-export default config
+export default { ...CONFIG } // Environment variables from webpack

package/_example/client/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { setupApp, onChange } from 'nitro-web'
 
@@ -14,7 +14,6 @@ Object.assign(window, {
   sharedStoreCache: undefined, // defined in setupApp
 
   // dependency globals
-  Component: Component,
   Link: Link,
   useCallback: useCallback,
   useEffect: useEffect,
@@ -29,19 +28,3 @@ Object.assign(window, {
 
 // Fetch state and start app
 setupApp(config, [Layout1, Layout2])
-
-// Hot reload fallback if fast reload didn't work
-// if ((import.meta as any).webpackHot) {
-//   (import.meta as any).webpackHot.accept()
-//   (import.meta as any).webpackHot.dispose((data: any) => {
-//     (window as any).prehot = { sharedStoreCache: (window as any).sharedStoreCache }
-//   })
-// }
-
-// Hot reload fallback if fast reload didn't work
-// if ((module as any).hot) {
-//   (module as any).hot.accept()
-//   ;(module as any).hot.dispose(() => {
-//     (window as any).prehot = { sharedStoreCache: (window as any).sharedStoreCache }
-//   })
-// }

package/_example/components/auth.api.js

@@ -1 +1 @@
-export { auth as default } from '#nitro-web/server.js'
+export { auth as default } from 'nitro-web/server'

package/_example/components/index.tsx

@@ -15,7 +15,7 @@ import {
 } from 'nitro-web'
 import config from '../client/config'
 
-// Signin page (can be saved onto a seperate file under the components folder)
+// Signin page (can be saved onto a seperate .jsx/.tsx file under the components folder)
 export const SigninPage = () => <Signin config={config} />
 SigninPage.route = {
   '/signin': true,
@@ -66,9 +66,11 @@ ResetPasswordPage.route = {
 // }
 
 // Dashboard page
+import { css, theme } from 'twin.macro'
+
 export function DashboardPage() {
   return (
-    <div>
+    <div css={style}>
       <h1 className="h1 mb-8">Dashboard</h1>
       <p className="text-gray-700">
         Welcome to Nitro, a modular React/Express base project, styled using Tailwind 🚀.
@@ -76,6 +78,11 @@ export function DashboardPage() {
     </div>
   )
 }
+const style = css`
+  p,.example-usage-of-tailwind-variable {
+    color: ${theme('colors.dark')};
+  }
+`
 DashboardPage.route = {
   '/': true,
   'meta': { 'title': 'Dashboard - Nitro', layout: 1 },
@@ -222,4 +229,5 @@ export function PricingPage() {
 PricingPage.route = {
   '/pricing': true,
   'meta': { 'title': 'Pricing - Nitro', layout: 1 },
-}
+}
+

package/_example/components/settings.api.js

@@ -1 +1 @@
-export { settings as default } from '#nitro-web/server.js'
+export { settings as default } from 'nitro-web/server'

package/_example/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.1",
+  "main": "webpack.config.js",
+  "type": "module",
+  "scripts": {
+    "build": "NODE_ENV=production webpack --target=web",
+    "dev": "clear && npm run dev:lint --silent & npm run dev:server --silent & npm run dev:client --silent",
+    "dev:client": "webpack serve --progress --config ./webpack.config.js",
+    "dev:server": "nodemon ./server -q -w ./server/ -w ./components/ -e js",
+    "dev:lint": "eslint ./components ./server/",
+    "minor": "standard-version --release-as minor && git push staging",
+    "patch": "standard-version --release-as patch && git push staging",
+    "start": "node ./server",
+    "stripe": "stripe listen --forward-to localhost:3001/api/stripe/webhook"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "@hokify/axios": "^0.19.1",
+    "@stripe/stripe-js": "^1.34.0",
+    "axios-retry": "^3.3.1",
+    "monastery": "~3.5.2",
+    "nitro-web": "file:..",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "stripe": "^9.16.0",
+    "twin.macro": "^3.4.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.8.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.24.7",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/eslint-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@svgr/webpack": "^8.1.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "autoprefixer": "^9.8.8",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-react-html-attrs": "^2.1.0",
+    "clean-terminal-webpack-plugin": "https://github.com/boycce/clean-terminal-webpack-plugin.git",
+    "color": "^4.2.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "core-js": "^3.12.1",
+    "css-loader": "^3.6.0",
+    "csv-loader": "^3.0.5",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-webpack-plugin": "^2.7.0",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.9.0",
+    "nodemon": "^2.0.1",
+    "postcss": "^8.4.49",
+    "postcss-for": "^2.1.1",
+    "postcss-import": "^16.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-nested": "^7.0.2",
+    "react-refresh": "^0.14.2",
+    "standard-version": "^9.3.2",
+    "string-replace-loader": "^3.1.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.5.2",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "eslintConfig": {
+    "extends": "../.eslintrc.json"
+  },
+  "engines": {
+    "node": "^18"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
+  "nodemonConfig": {
+    "events": {
+      "restart": "echo \"\\033[0;35mExpress restarting..\\033[0m\""
+    }
+  },
+  "standard-version": {
+    "releaseCommitMessageFormat": "{{currentTag}}",
+    "sign": true,
+    "skip": {
+      "changelog": true,
+      "tag": true
+    }
+  },
+  "author": "",
+  "license": "ISC"
+}

package/_example/server/config.js

@@ -1,16 +1,12 @@
 import 'dotenv/config'
-import { dirname, resolve } from 'path'
-import { fileURLToPath } from 'url'
 import { createRequire } from 'module'
 const _require = createRequire(import.meta.url)
-const projectDir = resolve(dirname(fileURLToPath(import.meta.url)) + '/../') + '/'
 const env = process.env.env || (process.env.NODE_ENV !== 'production' ? 'development' : process.env.NODE_ENV)
-const isNitro = process.env.NITRO
+const pwd = process.env.PWD + '/'
 
 export default {
   inject: 'awsUrl clientUrl currencies countries env googleMapsApiKey stripePublishableKey testEmail',
 
-  // apiUrl: process.env.originUrl || 'http://localhost:3001',
   clientUrl: process.env.originUrl || 'http://localhost:3000',
   emailFrom: process.env.emailFrom,
   emailReplyTo: process.env.emailReplyTo,
@@ -20,15 +16,6 @@ export default {
   mongoUrl: process.env.mongoUrl,
   testEmail: process.env.testEmail,
 
-  clientDir: projectDir + 'client/',
-  componentsDir: projectDir + 'components/',
-  distDir: projectDir + 'client/dist/',
-  emailTemplateDir: projectDir + 'server/email/',
-  modelsDir: projectDir + 'server/models/',
-  projectDir: projectDir,
-  tmpDir: projectDir + 'tmp/',
-  nitroDir: resolve(isNitro ? projectDir + '../' : projectDir + 'node_modules/nitro-web/') + '/',
-
   awsUrl: process.env.awsUrl,
   googleMapsApiKey: process.env.googleMapsApiKey,
   mailgunDomain: process.env.mailgunDomain,
@@ -115,6 +102,6 @@ export default {
     },
   },
 
-  version: _require(projectDir + (isNitro ? '../' : '') + 'package.json').version,
-  isNitro: isNitro,
+  pwd: pwd,
+  version: _require(pwd + 'package.json').version,
 }

package/_example/server/index.js

@@ -1,11 +1,11 @@
 import 'dotenv/config'
 import db from 'monastery'
 import config from './config.js'
-import { setupRouter, setupDefaultModels } from '#nitro-web/server.js'
+import { setupRouter, setupDefaultModels } from 'nitro-web/server'
 
 // Setup monastery models
 db.manager(config.mongoUrl, config.monasteryOptions)
-await db.models(config.modelsDir)
+await db.models(config.pwd + 'server/models')
 await setupDefaultModels(db)
 
 // Catch mongod not running
@@ -21,7 +21,8 @@ server.listen(process.env.PORT || 3001, '0.0.0.0', async () => {
   // ...success
 })
 
-// You can send emails like this:
+// You can send transactional Mailgun emails like so:
+// import { sendEmail } from '#nitro-web/server.js'
 // const html = await sendEmail({
 //   config: config,
 //   data: { name: 'Test' },

package/_example/tailwind.config.js

@@ -1,17 +1,17 @@
-/** @type {import('tailwindcss').Config} */
 // https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js#L889
 import defaultTheme from 'tailwindcss/defaultTheme'
 import colors from 'tailwindcss/colors'
-import { nitroDir } from './server/config'
+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'))
 
 export default {
   content: {
     relative: true,
     files: [
       './components/**/*.{ts,tsx}',
-      nitroDir + 'components/**/*.{js,jsx}',
+      path.join(nitroDir, '../components/**/*.{js,jsx}'),
     ],
   },
   experimental: {
@@ -54,24 +54,15 @@ export default {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
       },
       fontSize: {
-        // '2xs': ['0.75rem', { lineHeight: '1.5' }],
-        // 'xs': ['0.81rem', { lineHeight: '1.5' }],
-        // 'sm': ['0.875rem', { lineHeight: '1.5' }],
-        // 'base': ['1rem', { lineHeight: '1.5' }],
-        // 'lg': ['1.125rem', { lineHeight: '1.75' }],
-        // 'xl': ['1.25rem', { lineHeight: '1.75' }],
-        // '2xl': ['1.4rem', { lineHeight: '1.75' }],
-        // '3xl': ['1.875rem', { lineHeight: '1.75' }],
-
-        '2xs': ['0.77rem', { lineHeight: '1.5' }],  // ~12px
-        'xs': ['0.83rem', { lineHeight: '1.5' }],   // ~13px
-        'sm-label': ['0.87rem', { lineHeight: '1.5' }], // ~13.5px
-        'sm': ['0.90rem', { lineHeight: '1.5' }],   // ~14px
-        'base': ['1rem', { lineHeight: '1.5' }],    // 15.5px
-        'lg': ['1.16rem', { lineHeight: '1.75' }],  // ~18px
-        'xl': ['1.29rem', { lineHeight: '1.75' }],  // ~20px
-        '2xl': ['1.45rem', { lineHeight: '1.75' }], // ~22.4px
-        '3xl': ['1.94rem', { lineHeight: '1.75' }], // ~30px
+        '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' }],
       },
       spacing: {
         'input-before': '0.625rem',

package/_example/tsconfig.json

@@ -19,7 +19,7 @@
     "outDir": "./dist",
     "paths": {
       "nitro-web": [
-        "../client.js"
+        "../client/index.js",
       ],
     },
     "resolveJsonModule": true,
@@ -28,5 +28,5 @@
     "strict": true,
     "target": "es6",
   },
-  "include": ["client", "components", "types.d.ts"],
+  "include": ["client", "components", "types"],
 }

package/_example/types/index.d.ts

@@ -0,0 +1,13 @@
+// Shared store
+declare global {
+  const sharedStore: Record<string, unknown>
+}
+
+// Svgs
+declare module '*.svg' {
+  const content: string | React.FC<React.SVGProps<SVGElement>>
+  export default content
+}
+
+// Webpack config
+declare const CONFIG: Record<string, string>

package/_example/types/twin.d.ts

@@ -0,0 +1,19 @@
+// Twin.macro - https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion-typescript
+import 'twin.macro'
+import { css as cssImport } from '@emotion/react'
+import styledImport from '@emotion/styled'
+import { CSSInterpolation } from '@emotion/serialize'
+
+declare module 'twin.macro' {
+  // The styled and css imports
+  const styled: typeof styledImport
+  const css: typeof cssImport
+}
+
+declare module 'react' {
+  // The tw and css prop
+  interface DOMAttributes<T> {
+    tw?: string
+    css?: CSSInterpolation
+  }
+}

package/_example/webpack.config.js

@@ -1,4 +1,3 @@
 import config from './server/config.js'
-import { getWebpackConfig } from '#nitro-web/webpack.config.js'
-
-export default getWebpackConfig(config)
+import { getConfig } from 'nitro-web/webpack.config.js'
+export default getConfig(config)

package/client/index.js

@@ -0,0 +1,42 @@
+export * from './app.js'
+export * from '../util.js'
+export * as util from '../util.js'
+
+// Components: Pages
+export { Signin } from '../components/auth/signin.jsx'
+export { Signup } from '../components/auth/signup.jsx'
+export { ResetInstructions, ResetPassword } from '../components/auth/reset.jsx'
+// export { SettingsAccount } from '../components/settings/settings-account.jsx'
+// export { SettingsBusiness } from '../components/settings/settings-business.jsx'
+// export { SettingsTeamMember } from '../components/settings/settings-team--member.jsx'
+// export { SettingsTeam } from '../components/settings/settings-team.jsx'
+
+// Components: partials: elements
+export { Accordion } from '../components/partials/element/accordion.jsx'
+export { Avatar } from '../components/partials/element/avatar.jsx'
+export { Button } from '../components/partials/element/button.jsx'
+export { Dropdown } from '../components/partials/element/dropdown.jsx'
+export { Initials } from '../components/partials/element/initials.jsx'
+export { Message } from '../components/partials/element/message.jsx'
+// export { Modal } from '../components/partials/element/modal.jsx'
+export { Sidebar } from '../components/partials/element/sidebar.jsx'
+export { Tooltip } from '../components/partials/element/tooltip.jsx'
+export { Topbar } from '../components/partials/element/topbar.jsx'
+
+// Components: partials: form
+export { Checkbox } from '../components/partials/form/checkbox.jsx'
+export { Drop } from '../components/partials/form/drop.jsx'
+export { FormError } from '../components/partials/form/form-error.jsx'
+export { Input } from '../components/partials/form/input.jsx'
+export { Location } from '../components/partials/form/location.jsx'
+export { Select } from '../components/partials/form/select.jsx'
+export { Toggle } from '../components/partials/form/toggle.jsx'
+
+// Components: partials: layouts
+export { Layout1 } from '../components/partials/layout/layout1.jsx'
+export { Layout2 } from '../components/partials/layout/layout2.jsx'
+
+// Components: partials: other
+export { IsFirstRender } from '../components/partials/is-first-render.js'
+export { NotFound } from '../components/partials/not-found.jsx'
+export { Styleguide } from '../components/partials/styleguide.jsx'

package/components/auth/signin.jsx

@@ -1,3 +1,4 @@
+import { css, theme } from 'twin.macro'
 import * as util from '../../util.js'
 import { Topbar } from '../partials/element/topbar.jsx'
 import { Input } from '../partials/form/input.jsx'
@@ -46,7 +47,8 @@ export function Signin({ config }) {
   }
 
   return (
-    <div>
+    <div css={style}>
+    {/* <div> */}
       <Topbar title={<>Sign in to your Account</>} />
 
       <form onSubmit={onSubmit}>
@@ -72,3 +74,9 @@ export function Signin({ config }) {
     </div>
   )
 }
+
+const style = css`
+  .example-usage-of-tailwind-variable {
+    color: ${theme('colors.primary')};
+  }
+`

package/components/partials/element/modal.jsx

@@ -221,7 +221,7 @@ const style = () => css`
       }
       &:hover {
         line {
-          stroke: ${theme('colors.primary-dark')};
+          /* stroke: theme'colors.primary-dark'; */
         }
       }
     }

package/components/partials/form/drop-handler.jsx

@@ -54,7 +54,7 @@ export const DropHandler = ({ onDrop, children, className }) => {
   return (
     <div 
       ref={dropRef}
-      class={`${className} relative w-full p-[20px] border border-dashed border-input-border border-2 rounded-md ${dragging ? 'border-primary before:content-[""] before:absolute before:inset-0 before:bg-primary before:opacity-5' : ''}`}
+      class={`${className} relative w-full p-[20px] border-2 border-dashed border-input-border rounded-md ${dragging ? 'border-primary before:content-[""] before:absolute before:inset-0 before:bg-primary before:opacity-5' : ''}`}
     >
       {children}
     </div>

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

@@ -11,6 +11,11 @@ import { getCurrencyPrefixWidth } from '../../../util.js'
  * @param {cents} [value] - e.g. 123 (input is always controlled if state is passed in)
  */
 export function InputCurrency({ id, config, className, currency='nzd', onChange, placeholder, value }) {
+  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 ref = useRef()
   const [dontFix, setDontFix] = useState()
   const [settings, setSettings] = useState(() => getCurrencySettings(currency))
@@ -18,8 +23,6 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
   const [prefixWidth, setPrefixWidth] = useState()
   ref.current = { settings, dontFix }
 
-  if (!config) throw new Error('InputCurrency: `config` is required')
-
   useEffect(() => {
     if (settings.currency !== currency) {
       const settings = getCurrencySettings(currency)

package/components/partials/form/input-date.jsx

@@ -1,5 +1,5 @@
 // todo: finish tailwind conversion
-import { css, theme } from 'twin.macro'
+import { css } from 'twin.macro'
 import { DayPicker } from 'react-day-picker'
 import { format, isValid, parse } from 'date-fns'
 import { getCurrencyPrefixWidth } from '../../../util.js'
@@ -124,7 +124,7 @@ const style = () => css`
   .rdp {
     --rdp-cell-size: 34px;
     --rdp-caption-font-size: 12px;
-    --rdp-accent-color: ${theme('colors.primary')};
+    --rdp-accent-color: blue; /* theme('colors.primary') */
     font-size: 13px;
     margin: 0 12px 11px;
     svg {
@@ -179,7 +179,7 @@ const style = () => css`
             &:active {
               color: white;
               &:before {
-                background-color: ${theme('colors.primary')};
+                background-color: blue; /* theme('colors.primary') */
               }
             }
           }
@@ -188,15 +188,15 @@ const style = () => css`
           color: white;
           :before {
             border-radius: 50%;
-            background-color: ${theme('colors.primary')};
+            background-color: blue; /* theme('colors.primary') */
           }
         }
         .rdp-day_range_middle {
-          color: ${theme('colors.dark')};
+          color: black; /* theme('colors.dark') */
           :before {
             border-radius: 0;
             border: 1px solid rgb(151 133 185);
-            background-color: ${theme('colors.primary-light')};
+            background-color:  blue; /* theme('colors.primary-light') */
           }
         }
         .rdp-day_range_start,

package/components/partials/form/input.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable brace-style */
-import { css } from '@emotion/react'
+import { css } from 'twin.macro'
 import * as util from '../../../util.js'
 import { InputCurrency } from './input-currency.jsx'
 import { InputColor } from './input-color.jsx'
@@ -67,6 +66,9 @@ export function Input({ name='', state, id, type='text', ...props }) {
     InputEl = InputCurrency
   }
 
+  // Icon
+  const iconEl = <IconEl iconDir={iconDir} IconSvg={IconSvg} onClick={onClick} type={type} />
+
   // Create base props object
   const inputProps = {
     ...props,
@@ -74,6 +76,7 @@ export function Input({ name='', state, id, type='text', ...props }) {
     id: id || name,
     type: inputType,
     value: value,
+    iconEl: iconEl,
     className: 
       'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 text-sm outline outline-1 -outline-offset-1 ' +
       'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 ' +
@@ -83,16 +86,12 @@ export function Input({ name='', state, id, type='text', ...props }) {
   }
 
   // Only add iconEl prop for custom components
-  const showIconElHere = !['color', 'date'].includes(type)
-  const iconEl = <IconEl iconDir={iconDir} IconSvg={IconSvg} onClick={onClick} type={type} />
-  if (!showIconElHere) {
-    inputProps.iconEl = iconEl
-  }
+  if (!['color', 'date'].includes(type)) delete inputProps.iconEl
 
   return (
     // https://tailwindui.com/components/application-ui/forms/input-groups#component-474bd025b849b44eb3c46df09a496b7a
     <div css={style} className={`mt-input-before mb-input-after grid grid-cols-1 ${props?.className || ''}`}>
-      { showIconElHere && iconEl }
+      { !inputProps.iconEl && iconEl }
       <InputEl {...inputProps} />
       {error && <div class="mt-1.5 text-xs text-danger">{error.detail}</div>}
     </div>
@@ -104,7 +103,7 @@ function IconEl({ iconDir, IconSvg, onClick, type }) {
   return (
     !!IconSvg && 
     <div 
-      className={`col-start-1 row-start-1 ${iconSize} self-center text-gray-400 select-none relative z-[1] ` +
+      className={`col-start-1 row-start-1 ${iconSize} self-center text-[#c6c8ce] select-none relative z-[1] ` +
         `pointer-events-${type == 'password' ? 'auto' : 'none'} ` +
         (iconDir == 'right' ? 'justify-self-end mr-3' : 'justify-self-start ml-3')
       }
@@ -121,6 +120,7 @@ function ColorIcon({ hex }) {
 
 const style = () => css`
   input {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
   input::-webkit-outer-spin-button,