nitro-web 0.0.11 → 0.0.13

package/components/settings/{settings-team.jsx → settings-team.tsx}

@@ -1,12 +1,8 @@
+// @ts-nocheck
 // todo: finish tailwind conversion
-import * as util from '../../util.js'
-import SvgPlus from '../../client/imgs/icons/plus.svg'
-import { Button } from '../partials/element/button.jsx'
-import { Table } from '../partials/element/table.jsx'
-import { Avatar } from '../partials/element/avatar.jsx'
-import { Tabbar } from '../partials/element/tabbar.jsx'
-import { Topbar } from '../partials/element/topbar.jsx'
-import { SettingsTeamMember } from './settings-team--member.jsx'
+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'
 
 export function SettingsTeam({ config }) {
   const isLoading = useState('')

package/components/settings/settings.api.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import db from 'monastery'
 
 export default {

package/package.json

@@ -3,9 +3,8 @@
   "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.11",
-  "main": "./client/index.js",
-  "types": "./types/client/index.d.ts",
+  "version": "0.0.13",
+  "main": "./client/index.ts",
   "type": "module",
   "keywords": [
     "express",
@@ -20,35 +19,31 @@
     "_example"
   ],
   "exports": {
-    ".": {
-      "require": "./client/index.js",
-      "import": "./client/index.js",
-      "types": "./types/client/index.d.ts"
-    },
-    "./server": {
-      "require": "./server/index.js",
-      "import": "./server/index.js",
-      "types": "./types/server/index.d.ts"
-    },
+    ".": "./client/index.ts",
+    "./client/imgs/*": "./client/imgs/*",
+    "./client/globals": "./client/globals.ts",
+    "./server": "./server/index.js",
+    "./types": "./types.ts",
+    "./.eslintrc.json": "./.eslintrc.json",
+    "./tsconfig.json": "./tsconfig.json",
+    "./webpack.config.js": "./webpack.config.js",
     "./util": {
       "require": "./util.js",
       "import": "./util.js",
       "types": "./types/util.d.ts"
-    },
-    "./.eslintrc.json": "./.eslintrc.json",
-    "./webpack.config.js": "./webpack.config.js"
+    }
   },
   "scripts": {
     "dev": "npm run dev -w example",
     "dev:client": "npm run dev:client -w example",
-    "dev:client-only": "isDemo=true npm run dev:client -w example",
+    "dev:client-only": "isStatic=true npm run dev:client -w example",
     "dev:server": "npm run dev:server -w example",
-    "build": "isDemo=true npm run build -w example",
-    "major": "standard-version --release-as major && npm publish",
-    "minor": "standard-version --release-as minor && npm publish",
-    "patch": "standard-version --release-as patch && npm publish",
+    "build": "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",
     "start": "npm run start -w example",
-    "types": "tsc client/*.js components/**/*.jsx --declaration --declarationMap --allowJs --emitDeclarationOnly --jsx react-jsx --esModuleInterop --outDir types"
+    "types": "tsc util.js --declaration --declarationMap --allowJs --emitDeclarationOnly --jsx react-jsx --esModuleInterop --outDir types"
   },
   "dependencies": {
     "@uiw/color-convert": "^2.3.0",
@@ -92,15 +87,6 @@
     "tailwindcss": "^3.4.17",
     "twin.macro": "^3.4.1"
   },
-  "devDependencies": {
-    "@emotion/eslint-plugin": "^11.11.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^8.57.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "standard-version": "^9.3.2"
-  },
   "engines": {
     "node": "^18"
   },

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.11"`
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.13"`
 3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
 4. Run `npm i`
 

package/server/email/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 // import axios from '@hokify/axios'
 import nodemailer from 'nodemailer'
 import mailgun from 'nodemailer-mailgun-transport'
@@ -6,7 +7,7 @@ import inlineCss from 'inline-css'
 import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 import path from 'path'
-import { getDirectories } from '../../util.js'
+import { getDirectories } from 'nitro-web/util'
 
 let templates = {}
 let nodemailerMailgun = undefined

package/server/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export * from '../util.js'
 export * as util from '../util.js'
 

package/server/models/company.js

@@ -1,4 +1,5 @@
-import { addressSchema, fullName } from '../../util.js'
+// @ts-nocheck
+import { addressSchema, fullName } from 'nitro-web/util'
 
 export default {
 

package/server/models/user.js

@@ -1,4 +1,5 @@
-import { ucFirst, fullName } from '../../util.js'
+// @ts-nocheck
+import { ucFirst, fullName } from 'nitro-web/util'
 
 export default {
 

package/server/router.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import fs from 'fs'
 import path, { dirname } from 'path'
 import http from 'http'
@@ -8,8 +9,8 @@ import express from 'express'
 import bodyParser from 'body-parser'
 import sortRouteAddressesNodeps from 'sort-route-addresses-nodeps'
 
-import { sendEmail } from './email/index.js'
-import * as util from '../util.js'
+import { sendEmail } from 'nitro-web/server'
+import * as util from 'nitro-web/util'
 
 const _dirname = dirname(fileURLToPath(import.meta.url)) + '/'
 
@@ -43,6 +44,11 @@ export async function setupRouter (config) {
     let name = filepath.replace(/^.*[\\\/]|\.api\.js$/g, '') // eslint-disable-line
     controllers[name] = file
 
+    if (!file) {
+      console.warn(`API warning: no default export found on file ${filepath}`)
+      continue
+    }
+
     if (file.setup) file.setup(allMiddleware, config)
     if (file.routes) {
       util.each(file.routes, (_middleware, key) => {

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["es6", "dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": false,
+    "noImplicitThis": true,
+    "noStrictGenericChecks": false,
+    "outDir": "./dist",
+    "paths": {
+      "types": ["./types.ts"]
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "es6"
+  },
+  "include": [
+    "client",
+    "components/**/*.tsx",
+    "components/**/*.ts",
+    "types"
+  ]
+}

package/types/required-globals.d.ts

@@ -0,0 +1,39 @@
+// Required global types
+import 'twin.macro'
+import { css as cssImport } from '@emotion/react'
+import styledImport from '@emotion/styled'
+import { CSSInterpolation } from '@emotion/serialize'
+
+declare global {
+  /** Webpack injected config variables */
+  const INJECTED: Record<string, string|boolean|object>
+  /** Webpack svg loader */
+  module '*.svg' {
+    const content: React.FC<React.SVGProps<SVGElement>>
+    export default content
+  }
+  /** Webpack image loader */
+  module '*.jpg' {
+    const content: string
+    export default content
+  }
+}
+
+// Webpack: Twin.macro css extension
+// https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion-typescript
+declare module 'twin.macro' {
+  // The styled and css imports
+  const styled: typeof styledImport
+  const css: typeof cssImport
+}
+
+// Webpack: Twin & React-Html-Attrs babel plugins extend dom attributes
+declare module 'react' {
+  // The tw and css prop
+  interface DOMAttributes<T> { // eslint-disable-line
+    tw?: string
+    css?: CSSInterpolation
+    class?: string | undefined,
+    for?: string | undefined
+  }
+}

package/types/util.d.ts

@@ -88,7 +88,6 @@ export function getDirectories(path: any, pwd: any): {
     tmpDir: any;
 };
 export function getLink(obj: any, query: any): string;
-export function getPublicPath(env: any, homepage: any, publicPath: any): string;
 export function getStripeClientPromise(stripePublishableKey: any): any;
 export function getResponseErrors(errs: any): any;
 export function inArray(array: any, key: any, value: any): any;
@@ -134,7 +133,18 @@ export function mongoDocWithinPassedAddress(address: any, km: any, prefix: any):
 export function mongoPointDifference(point1: any, point2: any): string;
 export function objectMap(object: any, fn: any): {};
 export function omit(obj: any, fields: any): any;
-export function onChange(setState: any, event: any, beforeSetState: any): any;
+/**
+ * Updates state from an input event, you can also update deep state properties
+ * @param {Function} setState
+ * @param {Empty | Event | Array[{string}, {string|number|fn}]}
+ *   {Empty} - pass undefined to return a reusable function, e.g. const _onChange = onChange(setState)
+ *   {Event} - pass the event object,                        e.g. <input onChange={_onChange}>
+ *   {Array} - pass an array with [path, value],             e.g. <input onChange={() => _onChange(['name', 'Joe'])}>
+ * @param {Function} [beforeSetState] - optional function to run before setting the state
+ *
+ * @return {Function | Promise({state, chunks, target})}
+ */
+export function onChange(setState: Function, event: any, beforeSetState?: Function): Function | Promise<any>;
 export function pad(num: any, padLeft: any, fixedRight: any): any;
 export function pick(obj: any, keys: any): {};
 export function queryObject(search: any, assignTrue: any): any;

package/types/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BC;AAED,6DAaC;AAED,4DAQC;AAED,iFAaC;AAED,0EAIC;AAED,gDAEC;AAED,0CAEC;AAED,qFAQC;AAED,uDAIC;AAED,iEAoBC;AAED;;;;EAgIC;AAED,wCASC;AAED,mDAYC;AAED,+DAyBC;AAED,iEAeC;AAED,kFA2BC;AAED,gEAIC;AAED,6CASC;AAED,qEAsEC;AAED,8CAGC;AAED,kDAQC;AAED;;;;IAOC;AAED;;;IAOC;AAED,mFAUC;AAED;;;;;;;EAUC;AAED,sDAYC;AAED,gFAmBC;AAED,uEAEC;AAED,kDAsBC;AAED,+DAaC;AAED,0DAEC;AAED,+CAEC;AAED,kDAEC;AAED,6CAIC;AAED,kEAOC;AAED,mDAEC;AAED,6CAiBC;AAED,iDAEC;AAED,iDAGC;AAED,gDAEC;AAED,iDAEC;AAED,0CAEC;AAED,yEAWC;AAED,mFAwCC;AAED;;;;;;;;;;;;;;;;;;;;;;;;EA0CC;AAED,uEAmBC;AAED,oDAKC;AAED,iDAOC;AAED,8EAqDC;AAED,kEAQC;AAED,8CAeC;AAED,+DAiCC;AAED,8CAcC;AAED,yFAiDC;AAED,oDAYC;AAED,4EAmBC;AAED,kDAUC;AAED,mFAiDC;AAED,oEAaC;AAED,8EAIC;AAED,0DAQC;AAED,uDAMC;AAED,mFAwBC;AAED;;;;EAyBC;AAED,8CAIC;AAED,uCAGC;AAED,0CAGC;AArpCD,6BAAoC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BC;AAED,6DAaC;AAED,4DAQC;AAED,iFAaC;AAED,0EAIC;AAED,gDAEC;AAED,0CAEC;AAED,qFAQC;AAED,uDAIC;AAED,iEAoBC;AAED;;;;EAgIC;AAED,wCASC;AAED,mDAYC;AAED,+DAyBC;AAED,iEAeC;AAED,kFA2BC;AAED,gEAIC;AAED,6CASC;AAED,qEAsEC;AAED,8CAGC;AAED,kDAQC;AAED;;;;IAOC;AAED;;;IAOC;AAED,mFAUC;AAED;;;;;;;EAUC;AAED,sDAYC;AAED,uEAEC;AAED,kDAsBC;AAED,+DAaC;AAED,0DAEC;AAED,+CAEC;AAED,kDAEC;AAED,6CAIC;AAED,kEAOC;AAED,mDAEC;AAED,6CAiBC;AAED,iDAEC;AAED,iDAGC;AAED,gDAEC;AAED,iDAEC;AAED,0CAEC;AAED,yEAWC;AAED,mFAwCC;AAED;;;;;;;;;;;;;;;;;;;;;;;;EA0CC;AAED,uEAmBC;AAED,oDAKC;AAED,iDAOC;AAED;;;;;;;;;;GAUG;AAEH,qFAHY,uBAAkB,CA4C7B;AAED,kEAQC;AAED,8CAeC;AAED,+DAiCC;AAED,8CAcC;AAED,yFAiDC;AAED,oDAYC;AAED,4EAmBC;AAED,kDAUC;AAED,mFAiDC;AAED,oEAaC;AAED,8EAIC;AAED,0DAQC;AAED,uDAMC;AAED,mFAwBC;AAED;;;;EAyBC;AAED,8CAIC;AAED,uCAGC;AAED,0CAGC;AAhoCD,6BAAoC"}

package/types.ts

@@ -0,0 +1,43 @@
+// Expected config to be available
+export type Config = {
+  clientUrl: string
+  env: string
+  awsUrl?: string
+  currencies?: object
+  countries?: object
+  googleMapsApiKey?: string
+  isStatic?: boolean
+  placeholderEmail?: string
+  stripePublishableKey?: string
+  middleware?: Record<string, (route: unknown, store: Store) => undefined | { redirect: string }>
+  beforeApp?: () => Promise<object>
+  beforeStoreUpdate?: (prevStore: Store | null, newData: Store) => Store
+}
+
+export type User = {
+  _id?: string
+  firstName?: string
+  lastName?: string
+  name?: string
+  avatar?: MonasteryImage
+}
+
+export type Errors = Array<{ title: string, detail: string }> | null
+
+export type MonasteryImage = {
+  url: string
+  filename: string
+}
+
+export type MessageObject = {
+  date?: number
+  text: string | React.ReactNode
+  type?: 'error' | 'info' | 'success' | 'warning'
+  timeout?: number
+}
+
+export type Store = {
+  message?: MessageObject | string | null
+  user?: User | null,
+  apiAvailable?: boolean
+}

package/util.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import _axios from '@hokify/axios'
 import axiosRetry from 'axios-retry'
 import dateformat from 'dateformat'
@@ -59,7 +60,7 @@ export function buildUrl (url, parameters) {
    */
   const params = Object.keys(parameters).map((p) => `${encodeURIComponent(p)}=${encodeURIComponent(parameters[p])}`)
   return [url, params.join('&')].join('?')
-}
+}   
 
 export function camelCase (str, capitaliseFirst, allowNumber) {
   let regex = (capitaliseFirst ? '(?:^[a-z0-9]|' : '(?:') + '[-]+[a-z0-9])'
@@ -516,27 +517,6 @@ export function getLink (obj, query) {
   return queryString(newQueryObj) || '?'
 }
 
-export function getPublicPath(env, homepage, publicPath) {
-  /**
-   * Returns public path used for webapck (we can't use relative paths)
-   * @param {string} env - 'development', 'staging', 'production'
-   * @param {string} publicPath - proces.env.publicPath
-   * @param {string} homepage - package.json homepage
-   */
-  if (publicPath) {
-    const publicPathObj = new URL(publicPath, 'https://domain.com')
-    return publicPathObj.pathname
-
-  } else if (homepage) {
-    const homepageObj = new URL(homepage, 'https://domain.com')
-    if (env === 'development') return '/'
-    else return homepageObj.pathname
-
-  } else {
-    return '/'
-  }
-}
-
 export function getStripeClientPromise (stripePublishableKey) {
   return global.stripeClientPromise || (global.stripeClientPromise = loadStripe(stripePublishableKey))
 }
@@ -787,19 +767,19 @@ export function omit (obj, fields) {
   return shallowCopy
 }
 
+/**
+ * Updates state from an input event, you can also update deep state properties
+ * @param {Function} setState
+ * @param {Empty | Event | Array[{string}, {string|number|fn}]}
+ *   {Empty} - pass undefined to return a reusable function, e.g. const _onChange = onChange(setState)
+ *   {Event} - pass the event object,                        e.g. <input onChange={_onChange}>
+ *   {Array} - pass an array with [path, value],             e.g. <input onChange={() => _onChange(['name', 'Joe'])}>
+ * @param {Function} [beforeSetState] - optional function to run before setting the state
+ * 
+ * @return {Function | Promise({state, chunks, target})}
+ */
+/////////////////////////////////////////////////////////////////////convert to bind
 export function onChange (setState, event, beforeSetState) {
-  /**
-   * Updates state from an input event, you can also update deep state properties
-   * 
-   * @param {function} setState
-   * @param {Empty | Event | Array[{string}, {string|number|fn}]}
-   *   {Empty} - pass undefined to return a reusable function, e.g. const _onChange = onChange(setState)
-   *   {Event} - pass the event object,                        e.g. <input onChange={_onChange}>
-   *   {Array} - pass an array with [path, value],             e.g. <input onChange={() => _onChange(['name', 'Joe'])}>
-   * @param {function} beforeSetState - optional function to run before setting the state
-   * 
-   * @return {Function | Promise({state, chunks, target})}
-   */
   if (typeof event === 'undefined') {
     return onChange.bind(this, setState)
   }

package/webpack.config.js

@@ -16,7 +16,7 @@ import postcssImport from 'postcss-import'
 import postcssNested from 'postcss-nested'
 import postcssFor from 'postcss-for'
 import { createRequire } from 'module'
-import { getDirectories, getPublicPath } from './util.js'
+import { getDirectories } from 'nitro-web/util'
 
 const _require = createRequire(import.meta.url)
 const pick = (object, list) => list.reduce((o, e) => ((o[e] = object[e]), o), {})
@@ -278,10 +278,8 @@ export const getConfig = (config) => {
         ],
       }),
       new webpack.DefinePlugin({
-        CONFIG: JSON.stringify({
+        INJECTED: JSON.stringify({
           ...pick(config, config.inject ? config.inject.split(' ') : []),
-          isDemo: process.env.isDemo,
-          version: config.version,
         }),
       }),
       new ESLintPlugin({
@@ -338,4 +336,25 @@ class InterpolateHtmlPlugin {
         })
     })
   }
+}
+
+function getPublicPath(env, homepage, publicPath) {
+  /**
+   * Returns public path used for webapck (we can't use relative paths)
+   * @param {string} env - 'development', 'staging', 'production'
+   * @param {string} publicPath - proces.env.publicPath
+   * @param {string} homepage - package.json homepage
+   */
+  if (publicPath) {
+    const publicPathObj = new URL(publicPath, 'https://domain.com')
+    return publicPathObj.pathname
+
+  } else if (homepage) {
+    const homepageObj = new URL(homepage, 'https://domain.com')
+    if (env === 'development') return '/'
+    else return homepageObj.pathname
+
+  } else {
+    return '/'
+  }
 }

package/_example/types/index.d.ts

@@ -1,13 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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/client/index.js

@@ -1,44 +0,0 @@
-// export const pi = parseFloat(3.142)
-export * from './app.js'
-export * from '../util.js'
-export * as util from '../util.js'
-
-// Component Pages
-export { Signin } from '../components/auth/signin.jsx'
-export { Signup } from '../components/auth/signup.jsx'
-export { ResetInstructions, ResetPassword } from '../components/auth/reset.jsx'
-export { Dashboard } from '../components/dashboard/dashboard.jsx'
-export { NotFound } from '../components/partials/not-found.jsx'
-export { Styleguide } from '../components/partials/styleguide.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'
-
-// Component 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'
-
-// Component 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'
-
-// Component Layouts
-export { Layout1 } from '../components/partials/layout/layout1.jsx'
-export { Layout2 } from '../components/partials/layout/layout2.jsx'
-
-// Component Other
-export { IsFirstRender } from '../components/partials/is-first-render.js'

package/components/partials/element/avatar.jsx

@@ -1,31 +0,0 @@
-import { s3Image } from '../../../util.js'
-import { Initials } from './initials.jsx'
-import noImage from '../../../client/imgs/no-image.svg'
-import avatarImg from '../../../client/imgs/avatar.jpg'
-
-export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className }) {
-  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease ' + (className || '')
-
-  function getInitials(user) {
-    const text = (user.firstName ? [user.firstName, user.lastName] : user.name.split(' ')).map((o) => o.charAt(0))
-    if (text.length == 1) return text[0]
-    if (text.length > 1) return `${text[0]}${text[text.length - 1]}`
-    return ''
-  }
-
-  function getHex(user) {
-    let colors = ['#067306', '#AA33FF', '#FF54AF', '#F44336', '#c03c3c', '#7775f2', '#d88c1b']
-    let charIndex = (user.firstName||'a').toLowerCase().charCodeAt(0) - 97
-    let charIndexLimited = (charIndex < 0 || charIndex > 25) ? 25 : charIndex
-    let index = Math.round(charIndexLimited / 25 * (colors.length-1))
-    return colors[index]
-  }
-
-  return (
-    user.avatar 
-    ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small') || noImage} /> 
-    : showPlaceholderImage ? <img class={classes} src={avatarImg} width="30px" /> 
-    : <Initials class={classes} icon={{ initials: getInitials(user), hex: getHex(user) }} isRound={isRound} isMedium={true} />
-  )
-}
-

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

@@ -1,62 +0,0 @@
-export const DropHandler = ({ onDrop, children, className }) => {
-  const dropRef = useRef()
-  let dragCounter = useRef(0).current
-  const [dragging, setDragging] = useState(false)
-
-  useEffect(() => {
-    let div = dropRef.current
-    div.addEventListener('dragenter', handleDragIn)
-    div.addEventListener('dragleave', handleDragOut)
-    div.addEventListener('dragover', handleDragOver)
-    div.addEventListener('drop', handleDrop)
-    return () => {
-      div.removeEventListener('dragenter', handleDragIn)
-      div.removeEventListener('dragleave', handleDragOut)
-      div.removeEventListener('dragover', handleDragOver)
-      div.removeEventListener('drop', handleDrop)
-    }
-  }, [])
-
-  const handleDragIn = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter++
-    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
-      setDragging(true)
-    }
-  }
-
-  const handleDragOut = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter--
-    if (dragCounter === 0) {
-      setDragging(false)
-    }
-  }
-
-  const handleDragOver = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
-  const handleDrop = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setDragging(false)
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      onDrop(e.dataTransfer.files)
-      // e.dataTransfer.clearData() // causes an error in firefox
-      dragCounter = 0
-    }
-  }
-
-  return (
-    <div 
-      ref={dropRef}
-      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/form-error.jsx

@@ -1,21 +0,0 @@
-export function FormError({ state, fields, className }) {
-  /**
-   * this is a catch all error component that should be placed next to the submit button
-   * @param {object} state
-   * @param {array} <fields> - display all errors except these field titles, e.g. ['name', 'address']
-   */
-  for (let item of state.errors || []) {
-    if (!item.title || item.title.match(/^(error|invalid)$/i) || (fields && !fields.includes(item.title))) {
-      var error = item
-    }
-  }
-  return (
-    <>
-      {error ? (
-        <div class={`text-danger mt-1 text-sm ${className||''}`}>
-          {error.detail}
-        </div>
-      ) : null}
-    </>
-  )
-}