nitro-web 0.0.11 → 0.0.13

package/.eslintrc.json

@@ -11,24 +11,7 @@
     "node": true
   },
   "globals": {
-    // Project globals
-    "CONFIG": true,
-    "cssVar": true,
-    "onChange": true,
-    "sharedStore": true,
-    "sharedStoreCache": true,
-    // Dependency globals
-    "Link": true,
-    "forwardRef": true,
-    "useCallback": true,
-    "useEffect": true,
-    "useLocation": true,
-    "useNavigate": true,
-    "useImperativeHandle": true,
-    "useMemo": true,
-    "useParams": true,
-    "useState": true,
-    "useRef": true
+    "Link": true
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -58,10 +41,12 @@
       "allowObject": true 
     }],
     "max-len": ["error", { "code": 140, "ignorePattern": "^\\s*(<(rect|path|line)\\s|class=|className=|'|`)" }],
+    "no-var": "off",
     "no-prototype-builtins": "off",
     "@typescript-eslint/no-this-alias": "off",
-
+    "@typescript-eslint/ban-ts-comment": "off",
     "no-unused-vars": "off",
+    "@typescript-eslint/no-unsafe-function-type": "off",
     "@typescript-eslint/no-unused-vars": ["error", { 
       "argsIgnorePattern": "^_", 
       "varsIgnorePattern": "^_", 

package/_example/.env

@@ -11,6 +11,6 @@ mailgunDomain=mg.nitro.com
 mailgunKey=
 masterPassword=1234
 mongoUrl=localhost:27017/nitro-dev
+placeholderEmail=bruce@wayneenterprises.com
 stripePublishableKey=
 stripeSecretKey=
-testEmail=bruce@wayneenterprises.com

package/_example/client/config.ts

@@ -1 +1,2 @@
-export default { ...CONFIG } // Environment variables from webpack
+export type Config = import('nitro-web/types').Config & {}
+export default { ...INJECTED } as Config

package/_example/client/index.ts

@@ -1,29 +1,11 @@
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { setupApp, onChange } from 'nitro-web'
 
-import config from './config'
+import 'nitro-web/client/globals'
+import { setupApp } from 'nitro-web'
+
 import './css/index.css'
+import config from './config'
 import { Layout1, Layout2 } from '../components/partials/layouts'
 
-Object.assign(window, {
-  // application globals
-  onChange: onChange,
-  sharedStore: undefined, // defined in setupApp
-  sharedStoreCache: undefined, // defined in setupApp
-
-  // dependency globals
-  Link: Link,
-  useCallback: useCallback,
-  useEffect: useEffect,
-  useLocation: useLocation,
-  useNavigate: useNavigate,
-  useImperativeHandle: useImperativeHandle,
-  useMemo: useMemo,
-  useParams: useParams,
-  useRef: useRef,
-  useState: useState,
-})
-
-// Fetch state and start app
+// Auto-import page components, initilize app, and run config.beforeApp
 setupApp(config, [Layout1, Layout2])
+

package/_example/components/index.tsx

@@ -3,6 +3,7 @@
  * will be automatically imported and setup by the client router, we're just listing them all here for the sake of example.
  */
 import { css, theme } from 'twin.macro'
+import config from '../client/config'
 import { 
   Signin, 
   Signup, 
@@ -16,7 +17,6 @@ import {
   // SettingsTeam, 
 } from 'nitro-web'
 
-import config from '../client/config'
 
 // Signin page (can be saved onto a seperate .jsx/.tsx file under the components folder)
 export const SigninPage = () => <Signin config={config} />

package/_example/package.json

@@ -9,6 +9,7 @@
     "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:client-only": "isStatic=true npm run dev:client",
     "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",
@@ -48,7 +49,6 @@
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
     "autoprefixer": "^9.8.8",
-    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-react-html-attrs": "^2.1.0",

package/_example/server/config.js

@@ -5,17 +5,21 @@ const env = process.env.env || (process.env.NODE_ENV !== 'production' ? 'develop
 const pwd = process.env.PWD + '/'
 
 export default {
-  inject: 'awsUrl clientUrl currencies countries env googleMapsApiKey stripePublishableKey testEmail',
+  inject: 'awsUrl clientUrl currencies countries env googleMapsApiKey isStatic placeholderEmail stripePublishableKey version',
 
   clientUrl: process.env.originUrl || 'http://localhost:3000',
   emailFrom: process.env.emailFrom,
   emailReplyTo: process.env.emailReplyTo,
   emailTestMode: process.env.emailTestMode,
   env: env,
+  homepage: _require(pwd + 'package.json').homepage,
+  isStatic: process.env.isStatic,
   masterPassword: process.env.masterPassword,
   mongoUrl: process.env.mongoUrl,
+  placeholderEmail: process.env.placeholderEmail,
   publicPath: process.env.publicPath,
-  testEmail: process.env.testEmail,
+  pwd: pwd, // change to rootDir
+  version: _require(pwd + 'package.json').version,
 
   awsUrl: process.env.awsUrl,
   googleMapsApiKey: process.env.googleMapsApiKey,
@@ -120,9 +124,4 @@ export default {
       else res.unauthorized('Please sign in first.')
     },
   },
-
-  pwd: pwd,
-  homepage: _require(pwd + 'package.json').homepage,
-  repository: _require(pwd + 'package.json').repository,
-  version: _require(pwd + 'package.json').version,
 }

package/_example/tailwind.config.js

@@ -11,7 +11,7 @@ export default {
     relative: true,
     files: [
       './components/**/*.{ts,tsx}',
-      path.join(nitroDir, '../components/**/*.{js,jsx}'),
+      path.join(nitroDir, '../components/**/*.{ts,tsx}'),
     ],
   },
   experimental: {

package/_example/tsconfig.json

@@ -17,11 +17,19 @@
     "noImplicitThis": true,
     "noStrictGenericChecks": false,
     "outDir": "./dist",
+    "paths": {
+      "types": ["./types.ts"]
+    },
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es6",
+    "target": "es6"
   },
-  "include": ["client", "components", "types"],
+  "include": [
+    "client",
+    "components/**/*.tsx",
+    "components/**/*.ts",
+    "types"
+  ]
 }

package/_example/types.ts

@@ -0,0 +1 @@
+export type { Config, Errors, User } from 'nitro-web/types'

package/client/{app.js → app.tsx}

@@ -1,28 +1,47 @@
 import { createBrowserRouter, createHashRouter, redirect, useParams, RouterProvider } from 'react-router-dom' 
+import { Fragment, ReactNode } from 'react'
 import ReactDOM from 'react-dom/client'
-import { createContainer } from 'react-tracked'
-import { axios, camelCase, pick, toArray, setTimeoutPromise } from '../util.js'
+import { AxiosRequestConfig } from '@hokify/axios'
+import { beforeCreate, Provider, exposedData } from './store'
+import { axios, camelCase, pick, toArray, setTimeoutPromise } from 'nitro-web/util'
+import { Config, Store } from 'types'
 
-export async function setupApp(config, layouts) {
+type Settings = {
+  afterApp?: () => void
+  middleware: Record<string, (route: unknown, store: Store) => undefined | { redirect: string }>
+  beforeApp: (config: Config) => Promise<object>
+  beforeStoreUpdate: (prevStore: Store | null, newData: Store) => Store
+  isStatic?: boolean
+  layouts: React.FC[]
+}
+
+type Route = {
+  component: React.FC<{ route?: Route; params?: object; location?: object }>
+  meta?: { title?: string }
+  middleware: string[]
+  name: string
+  path: string
+  redirect?: string
+}
+
+export async function setupApp(config: Config, layouts: React.FC[]) {
   // Fetch state and init app
-  const settings = {
+  const settings: Settings = {
     middleware: Object.assign(defaultMiddleware, config.middleware || {}),
-    beforeApp: (config.beforeApp || defaultBeforeApp).bind(null, config),
-    beforeStoreUpdate: config.beforeStoreUpdate || defaultBeforeStoreUpdate,
-    isDemo: config.isDemo,
+    beforeApp: config.beforeApp || beforeApp,
+    beforeStoreUpdate: config.beforeStoreUpdate || beforeStoreUpdate,
+    isStatic: config.isStatic,
     layouts: layouts,
   }
   if (!settings.layouts) throw new Error('layouts are required')
-  const data = (await settings.beforeApp()) || {}
-  window.sharedStore = createStore(data, settings.beforeStoreUpdate)
+  const initData = (await settings.beforeApp(config)) || {}
+  beforeCreate(initData, settings.beforeStoreUpdate)
 
-  const root = ReactDOM.createRoot(document.getElementById('app'))
+  const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement)
   root.render(<App settings={settings} />)
 }
 
-function App({ settings }) {
-  // Should only render once
-  const Provider = window.sharedStore.Provider
+function App({ settings }: { settings: Settings }): ReactNode {
   // const themeNormalised = theme
   const router = getRouter(settings)
   // const theme = pick(themeNormalised, []) // e.g. 'topPanelHeight'
@@ -39,67 +58,42 @@ function App({ settings }) {
      * 'idle' event is fired, after route/layout change.
      */
     const sessionHistory = JSON.parse(sessionStorage.getItem('sessionHistory') || '{}')
-    router.subscribe((state, a, b) => { // eslint-disable-line
+    router?.subscribe((state) => {
       // @param state.historyAction - 'POP', 'PUSH', 'REPLACE'
       // @param state.navigation.state - 'loading', 'idle' (after navigation)
       if (state.navigation.state === 'idle') return
-      sessionHistory[state.location.key] = scrollbarElement().scrollTop // 100k pages == 1.6MB (we're good, lol)
+      sessionHistory[state.location.key] = scrollbarElement()?.scrollTop // 100k pages == 1.6MB (we're good, lol)
       sessionStorage.setItem('sessionHistory', JSON.stringify(sessionHistory))
     })
-  }, [])
+  }, [!!router])
 
   return (
     <Provider>
       {/* <ThemeProvider theme={themeNormalised}> */}
-        <RouterProvider router={router} />
+        { router && <RouterProvider router={router} /> }
         <AfterApp settings={settings} />
       {/* </ThemeProvider> */}
     </Provider>
   )
 }
 
-function AfterApp(settings) {
+function AfterApp({ settings }: { settings: Settings }) {
   if (settings.afterApp) settings.afterApp()
   return (null)
 }
 
-function createStore(newStoreData, beforeStoreUpdate) {
-  // @param {object} newStoreData - normally provided from a /login or /state request data
-  return createContainer(() => {
-    // Normally only setup once
-    // Fast reload - rebuilds <Root/>, and then createContainer() without providing the initialState
-    // Hot reload - rebuilds the whole app
-    let [store, setStore] = useState(() => beforeStoreUpdate(null, newStoreData || window.sharedStoreCache || {})) // runs only once
-
-    // Wrap the setState function to always run beforeStoreUpdate
-    const wrappedSetStore = (updater) => {
-      if (typeof updater === 'function') {
-        setStore((prevStore) => {
-          const nextState = updater(prevStore)
-          return beforeStoreUpdate(prevStore, nextState)
-        })
-      } else {
-        setStore((prevStore) => beforeStoreUpdate(prevStore, updater))
-      }
-    }
-    
-    window.sharedStoreCache = store
-    newStoreData = null
-    return [store, wrappedSetStore]
-  })
-}
-
-function getRouter(settings) {
+function getRouter(settings: Settings) {
   /**
    * Get all routes from components folder
    * @return {array} routes for for creatingBrowserRouter
+   * 
+   * During build time, webpack returns `require` function, which also contains all matching files 
+   * https://webpack.js.org/guides/dependency-management/#requirecontext
    */
-  // During build time, webpack returns `require` function, which also contains all matching files 
-  // https://webpack.js.org/guides/dependency-management/#requirecontext
-
   let requireContext
   try {
-    requireContext = import.meta.webpackContext('componentsDir', { // components is the alias in webpack.config.js
+    // @ts-expect-error
+    requireContext = import.meta.webpackContext('componentsDir', {
       recursive: true,
       regExp: /(?<!\.api)\.(j|t)sx$/,
     })
@@ -110,7 +104,7 @@ function getRouter(settings) {
   }
   // Loop files
   // const components = {}
-  const layouts = []
+  const layouts: Route[][] = []
 
   for (const filename of requireContext.keys()) {
     const file = requireContext(filename) // require
@@ -120,7 +114,7 @@ function getRouter(settings) {
       const isReactFnComponentOrFnRef = typeof file[key] === 'function' || !!file[key]?.render
       if (!file.hasOwnProperty(key) || key.match(/route/i) || !isReactFnComponentOrFnRef) continue
       const componentRoutes = toArray(file[key].route || file.route || file.Route)
-      const componentName = key || camelCase(key.replace(/^.*[\\\/]|\.jsx$/g, '')) // eslint-disable-line
+      const componentName = key || camelCase(key.replace(/^.*[\\\/]|\.jsx$/g, '')) as string // eslint-disable-line
       // console.log(file)
       // Todo: need to retrieve the original function name for default exports during minification.
       // console.log(1, file[key].name, key, componentName, file[key])
@@ -136,12 +130,14 @@ function getRouter(settings) {
         
         for (const routePath of routePaths) {
           const layoutNum = (route.meta?.layout || 1) - 1
+
           // get the routes middleware
           const middleware = toArray(route[routePath]).filter(o => {
             if (o === true) return // ignore true
             else if (settings.middleware[o]) return true
             else console.error(`No middleware named '${o}' defined under config.middleware, skipping..`)
           })
+
           // Push route to layout
           if (!layouts[layoutNum]) layouts[layoutNum] = []
           layouts[layoutNum].push({
@@ -161,26 +157,30 @@ function getRouter(settings) {
   }
 
   // Generate createBrowserRouter array
-  let nonce
-  const createRouterArray = layouts.map((routes, i) => {
-    if (!routes) return
+  let nonce: boolean
+  const createRouterArray = layouts.map((layout, i) => {
+    if (!layout) return
     const Layout = settings.layouts[i]
     if (!Layout) throw new Error(`Please pass Layout${i+1 || ''} to appSetup()`)
     return {
       // path: '/', // (disbaled: page component with path:'/' doesnt work)
-      element: <> 
-        <Layout />
-        <RestoreScroll />
-      </>,
-      children: routes.map((route) => {
+      element: (
+        <Fragment> 
+          <Layout />
+          <RestoreScroll />
+        </Fragment>
+      ),
+      children: layout.map((route) => {
         return {
-          element: <RouteComponent route={route} />,
+          element: (
+            <RouteComponent route={route} />
+          ),
           path: route.path,
-          loader: async (/*{ request }*/) => {
-            // wait for sharedStore/sharedStoreCache to be setup
+          loader: async () => { // request
+            // wait for container/exposedData to be setup
             if (!nonce) nonce = true && await setTimeoutPromise(() => {}, 0) // eslint-disable-line
-            for (let key of route.middleware) {
-              let error = settings.middleware[key](route, window.sharedStoreCache||{})
+            for (const key of route.middleware) {
+              const error = settings.middleware[key](route, exposedData || {})
               if (error && error.redirect) {
                 return redirect(error.redirect)
               }
@@ -190,13 +190,13 @@ function getRouter(settings) {
         }
       }),
     }
-  }).filter(o => o)
+  }).filter(o => !!o)
 
   // console.log(createRouterArray) ////////////////////////
 
   // Create Browser/HashRouter (if there is no error above otheriwse router will be empty)
   if (createRouterArray.length) {
-    if (settings.isDemo) return createHashRouter(createRouterArray) // Use HashRouter for demo
+    if (settings.isStatic) return createHashRouter(createRouterArray) // Use HashRouter for demo
     else return createBrowserRouter(createRouterArray) // Use BrowserRouter otherwise
   }
 }
@@ -210,8 +210,8 @@ function RestoreScroll() {
     const previousScrollY = sessionHistory[location.key] || 0
     // console.log(3, previousScrollY, window.history.state)
     const attemptScroll = (attempts = 0) => {
-      if (scrollbarElement().scrollTop !== previousScrollY && attempts < 100) {
-        scrollbarElement().scrollTo(0, previousScrollY)
+      if (scrollbarElement()?.scrollTop !== previousScrollY && attempts < 100) {
+        scrollbarElement()?.scrollTo(0, previousScrollY)
         setTimeout(() => attemptScroll(attempts + 1), 10)
       }
     }
@@ -221,11 +221,14 @@ function RestoreScroll() {
   return (null)
 }
 
-function RouteComponent({ route }) {
+function RouteComponent({ route }: { route: Route }) {
+  const Component = route.component
   const params = useParams()
   const location = useLocation()
-  document.title = route.meta.title
-  return <route.component route={route} params={params} location={location} />
+  document.title = route.meta?.title || ''
+  return (
+    <Component route={route} params={params} location={location} />
+  )
 }
 
 function scrollbarElement() {
@@ -236,45 +239,44 @@ function scrollbarElement() {
 
 // ---- Overridable defaults ------------
 
-async function defaultBeforeApp(config) {
+async function beforeApp(config: Config) {
   /**
    * Gets called once before React is initialised
-   * @return {promise} - newStoreData which is used for window.store, later merged with the config.store() defaults
+   * @return {promise} - newStoreData which is used for sharedStore, later merged with the config.store() defaults
    */
   let apiAvailable
-  let newStoreData
+  let stateData
   try {
     // Unload prehot data
-    if (window.prehot) {
-      window.sharedStoreCache = window.prehot.sharedStoreCache
-      delete window.prehot
-    }
-    if (!window.sharedStoreCache && !config.isDemo) {
-      newStoreData = (await axios().get('/api/state', { 'axios-retry': { retries: 3 }, timeout: 4000 })).data
+    // if (window.prehot) {
+    //   sharedStoreCache = window.prehot.sharedStoreCache
+    //   delete window.prehot
+    // }
+    if (!exposedData && !config.isStatic) {
+      stateData = (await axios().get('/api/state', { 'axios-retry': { retries: 3 }, timeout: 4000 } as AxiosRequestConfig)).data
       apiAvailable = true
     }
   } catch (err) {
     console.error('We had trouble connecting to the API, please refresh')
     console.log(err)
   }
-  return { ...(newStoreData || window.sharedStoreCache), apiAvailable }
+  return { ...(stateData || exposedData), apiAvailable }
 }
 
-function defaultBeforeStoreUpdate(store, newStoreData) {
+function beforeStoreUpdate(prevStore: Store | null, newData: Store) {
   /**
    * Get store object (called on signup/signin/signout/state)
    * @param {object} store - existing store
    * @param {object} <newStoreData> - pass to override store with /login or /state request data
    * @return {object} store
    */
-  if (!newStoreData) return newStoreData
-  store = {
-    ...(store || {
-      message: null,
-      stripeProducts: [],
-      user: null, // defined if user is signed in
+  if (!newData) return newData
+  const store = {
+    ...(prevStore || {
+      message: undefined,
+      user: undefined, // defined if user is signed in
     }),
-    ...(newStoreData || {}),
+    ...(newData || {}),
   }
 
   // Used to verify if the current cookie belongs to this user
@@ -285,20 +287,20 @@ function defaultBeforeStoreUpdate(store, newStoreData) {
 
 const defaultMiddleware = {
   // Global middleware that can referenced from component routes
-  isAdmin: (route, store) => {
-    let user = store.user || { type: 'visitor' }
-    if (user.type.match(/admin/)) return
-    else if (user.type && user.type !== 'visitor') return { redirect: '/signin?unauth' }
+  isAdmin: (route: unknown, store: { user?: { type?: string } }) => {
+    const user = store.user || { type: 'visitor' }
+    if (user?.type?.match(/admin/)) return
+    else if (user?.type && user?.type !== 'visitor') return { redirect: '/signin?unauth' }
     else return { redirect: '/signin?signin' }
   },
-  isSubscribed: (route, store) => {
-    let user = store.user || { type: 'visitor', company: {} }
-    if (!user.company.currentSubscription) return
+  isSubscribed: (route: unknown, store: { user?: { company?: { currentSubscription?: string } } }) => {
+    const user = store?.user || { type: 'visitor', company: { currentSubscription: '' } }
+    if (!user?.company?.currentSubscription) return
     else return { redirect: '/plans/subscribe' }
   },
-  isUser: (route, store) => {
-    let user = store.user || { type: 'visitor' }
-    if (user.type !== 'visitor') return
+  isUser: (route: unknown, store: { user?: { type?: string } }) => {
+    const user = store.user || { type: 'visitor' }
+    if (user?.type !== 'visitor') return
     else return { redirect: '/signin?signin' }
   },
 }

package/client/globals.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { onChange } from 'nitro-web'
+import { useTracked } from './store'
+
+declare global {
+  // Common application globals
+  const onChange: typeof import('nitro-web').onChange
+  /** Global shared store, a react-tracked container initialized in `setupApp()` */
+  let useTracked: typeof import('./store').useTracked
+
+  // Common aependency globals
+  /** The public API for rendering a history-aware `<a>`. */
+  const Link: typeof import('react-router-dom').Link
+  const useCallback: typeof import('react').useCallback
+  const useEffect: typeof import('react').useEffect
+  const useImperativeHandle: typeof import('react').useImperativeHandle
+  const useLocation: typeof import('react-router-dom').useLocation
+  const useMemo: typeof import('react').useMemo
+  const useNavigate: typeof import('react-router-dom').useNavigate
+  const useParams: typeof import('react-router-dom').useParams
+  const useRef: typeof import('react').useRef
+  const useState: typeof import('react').useState
+}
+
+Object.assign(window, {
+  // application globals
+  onChange: onChange,
+  useTracked: useTracked,
+
+  // dependency globals
+  Link: Link,
+  useCallback: useCallback,
+  useEffect: useEffect,
+  useImperativeHandle: useImperativeHandle,
+  useLocation: useLocation,
+  useMemo: useMemo,
+  useNavigate: useNavigate,
+  useParams: useParams,
+  useRef: useRef,
+  useState: useState,
+})

package/client/index.ts

@@ -0,0 +1,52 @@
+// Required Global Types
+import '../types/required-globals.d.ts'
+
+// export const pi = parseFloat(3.142)
+export * from './app'
+export * from '../util.js'
+export * as util from '../util.js'
+
+// Component Pages
+export { Signin } from '../components/auth/signin'
+export { Signup } from '../components/auth/signup'
+export { ResetInstructions, ResetPassword } from '../components/auth/reset'
+export { Dashboard } from '../components/dashboard/dashboard'
+export { NotFound } from '../components/partials/not-found'
+export { Styleguide } from '../components/partials/styleguide'
+// export { SettingsAccount } from '../components/settings/settings-account'
+// export { SettingsBusiness } from '../components/settings/settings-business'
+// export { SettingsTeamMember } from '../components/settings/settings-team--member'
+// export { SettingsTeam } from '../components/settings/settings-team'
+
+// Component Elements
+export { Accordion } from '../components/partials/element/accordion'
+export { Avatar } from '../components/partials/element/avatar'
+export { Button } from '../components/partials/element/button'
+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 { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
+export { Tooltip } from '../components/partials/element/tooltip'
+export { Topbar } from '../components/partials/element/topbar'
+
+// Component Form
+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 { Location } from '../components/partials/form/location'
+export { Select, getSelectStyle } from '../components/partials/form/select'
+export { Toggle } from '../components/partials/form/toggle'
+
+// Component Layouts
+export { Layout1 } from '../components/partials/layout/layout1'
+export { Layout2 } from '../components/partials/layout/layout2'
+
+// Component Other
+export { IsFirstRender } from '../components/partials/is-first-render'