nitro-web 0.0.1

package/components/settings/settings-team.jsx

@@ -0,0 +1,76 @@
+// 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'
+
+export function SettingsTeam({ config }) {
+  const isLoading = useState('')
+  const [showModal, setShowModal] = useState()
+  const [{ user }] = sharedStore.useTracked()
+  const [state] = useState({
+    users: user?.company?.users || [],
+  })
+  
+  function addTeamMember() {
+    //... open modal
+  }
+
+  return (
+    <div>
+      <Topbar
+        title={<>Settings</>} 
+        submenu={
+          <Tabbar class="is-underline" tabs={[
+            { label: 'Business', path: '/settings/business' },
+            { label: 'Team', path: '/settings/team' },
+            { label: 'Account', path: '/settings/account' },
+          ]} />
+        }
+        btns={
+          <Button onClick={addTeamMember} color="primary-sm" IconLeft={SvgPlus} isLoading={isLoading[0]}>
+            Add Team Member
+          </Button>
+        }
+      />
+
+      <Table
+        columns={[
+          { label: 'Member\'s Name', key: 'name', width: 1 },
+          { label: 'Email', key: 'email' },
+          { label: 'Joined On', key: 'joinedOn', align: 'center' },
+          { label: 'Role', key: 'role', width: '110px' },
+        ]}
+        rowOnClick={(e, user) => setShowModal(user)}
+        rows={
+          state.users.map(user => ({
+            ...user,
+            key: user._id,
+            name: (
+              <>
+                <Avatar awsUrl={config.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>}
+              </>
+            ),
+            joinedOn: user.status == 'invited' ? <a href="#">Resend Invite</a> : util.date(user.createdAt),
+            role: util.ucFirst(user.role),
+          }))
+        }
+        actions={[
+          { label: 'Remove', onClick: (_row, _i) => console.log('remove') },
+        ]}
+        actionsAll={[
+          { label: 'Remove All', onClick: () => console.log('remove all') },
+        ]}
+      />
+
+      {/* Member modal */}
+      <SettingsTeamMember showModal={showModal} setShowModal={setShowModal} />
+    </div>
+  )
+}

package/components/settings/settings.api.js

@@ -0,0 +1,54 @@
+import db from 'monastery'
+
+export default {
+
+  routes: {
+    'put  /api/company/:cid': ['isCompanyUser', 'update'],
+    'put  /api/user/:uid': ['isUser', 'updateUser'],
+  },
+
+  update: async function(req, res) {
+    try {
+      const update = await db.company.update({
+        query: req.params.cid,
+        data: req.body,
+        files: req.query.files ? req.files : undefined,
+      })
+      if (!update) {
+        throw new Error('Coudln\'t find the company to update')
+      }
+      const company = await db.company.findOne({
+        query: req.params.cid,
+        populate: db.company.loginPopulate(),
+        _privateData: true,
+      })
+      res.json(company)
+
+    } catch (errs) {
+      res.error(errs)
+    }
+  },
+
+  updateUser: async function(req, res) {
+    try {
+      const update = await db.user.update({
+        query: req.params.uid,
+        data: req.body,
+        files: req.query.files ? req.files : undefined,
+      })
+      if (!update) {
+        throw new Error('Coudln\'t find the user to update')
+      }
+      const user = await db.user.findOne({
+        query: req.params.uid,
+        _privateData: true,
+        blacklist: ['company'], // don't return the company id
+      })
+      res.json(user)
+
+    } catch (errs) {
+      res.error(errs)
+    }
+  },
+
+}

package/package.json

@@ -0,0 +1,175 @@
+{
+  "name": "nitro-web",
+  "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
+  "repository": "github:boycce/nitro-web",
+  "version": "0.0.1",
+  "main": "client.js",
+  "type": "module",
+  "keywords": [
+    "express",
+    "javascript",
+    "monastery",
+    "mongodb",
+    "react",
+    "tailwind",
+    "webpack"
+  ],
+  "imports": {
+    "#nitro-web/*": { "default": "./*" }
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "emotion",
+      "config": "./_example/tailwind.config.js"
+    }
+  },
+  "scripts": {
+    "build": "NODE_ENV=production webpack --target=web",
+    "dev": "clear  && npm run dev:server:lint --silent & npm run dev:server --silent & npm run dev:client --silent",
+    "dev:client": "NITRO=true webpack serve --progress --config ./_example/webpack.config.js",
+    "dev:server": "NITRO=true nodemon ./_example/server -q -w ./_example/server/ -w ./_example/components/ -w ./server/ -w ./components/ -e js",
+    "dev:server:lint": "eslint ./_example/components ./_example/server ./components/ ./server/",
+    "major": "standard-version --release-as major && npm publish",
+    "minor": "standard-version --release-as minor && npm publish",
+    "patch": "standard-version --release-as patch && npm publish",
+    "start": "node ./_example/server",
+    "stripe": "stripe listen --forward-to localhost:3001/api/stripe/webhook"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "@hokify/axios": "^0.19.1",
+    "@stripe/react-stripe-js": "^1.9.0",
+    "@stripe/stripe-js": "^1.34.0",
+    "@uiw/color-convert": "^2.3.0",
+    "@uiw/react-color-hue": "^2.3.0",
+    "@uiw/react-color-saturation": "^2.3.0",
+    "axios-retry": "^3.3.1",
+    "bcrypt": "^5.0.0",
+    "body-parser": "^1.19.0",
+    "chart.js": "^4.4.3",
+    "compression": "^1.7.4",
+    "connect-mongo": "^5.1.0",
+    "date-fns": "^3.6.0",
+    "dateformat": "^3.0.3",
+    "dotenv": "^14.3.2",
+    "express": "^4.17.1",
+    "express-fileupload": "^1.1.6",
+    "express-session": "^1.17.0",
+    "inline-css": "^4.0.2",
+    "monastery": "~3.5.1",
+    "nanoid": "^4.0.0",
+    "nodemailer": "^6.5.0",
+    "nodemailer-mailgun-transport": "^2.0.2",
+    "nunjucks": "^3.2.2",
+    "passport": "^0.4.1",
+    "passport-jwt": "^4.0.0",
+    "passport-local": "^1.0.0",
+    "pdf-to-img": "^4.1.0",
+    "pdfmake": "0.2.7",
+    "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-currency-input-field": "^3.8.0",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-number-format": "^5.4.0",
+    "react-router-dom": "6.24.1",
+    "react-select": "^5.9.0",
+    "react-tracked": "^1.3.0",
+    "sort-route-addresses-nodeps": "0.0.4",
+    "stripe": "^9.16.0"
+  },
+  "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",
+    "@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-eslint": "^10.0.3",
+    "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-jest": "^28.9.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",
+    "jest": "^29.7.0",
+    "migrate-mongo": "^10.0.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-import-resolver": "^2.0.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",
+    "super-nunjucks-loader": "^2.0.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "twin.macro": "^3.4.1",
+    "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"
+  },
+  "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
+    }
+  },
+  "prettier": {
+    "printWidth": 140,
+    "quoteProps": "consistent",
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "transform": {}
+  },
+  "author": "",
+  "license": "ISC"
+}

package/readme.md

@@ -0,0 +1,43 @@
+# Nitro
+
+[![NPM](https://img.shields.io/npm/v/nitro-web.svg)](https://www.npmjs.com/package/nitro-web) [![Build Status](https://travis-ci.com/boycce/nitro-web.svg?branch=master)](https://app.travis-ci.com/github/boycce/nitro-web)
+
+Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀
+
+### Install
+
+```bash
+npm i nitro-web
+```
+
+### Setup
+
+1. Copy the `./_example` folder to your project
+2. Copy over `./package.json`
+4. In `./package.json`, search and replace `/_example` with `./`
+5. In `./package.json`, replace `{ "default": "./*" }` with `{ "default": "nitro-web/*" }`
+6. `npm i`
+
+### Running in development
+
+```bash
+npm run dev:server # run and watch the nodemon server
+npm run dev:client # run and watch the webpack dev server
+npm run dev # or, run and watch both server and client
+```
+
+### Building for production
+
+```bash
+npm run build
+npm run start
+```
+
+### Versions
+
+- Express `^4.17`
+- Monastery `~3.5.1`
+- Node `^18`
+- React `^18.3`
+- Tailwind `^3.4`
+- Webpack `^5.92`

package/server/email/index.js

@@ -0,0 +1,192 @@
+// import axios from '@hokify/axios'
+import nodemailer from 'nodemailer'
+import mailgun from 'nodemailer-mailgun-transport'
+import nunjucks from 'nunjucks'
+import inlineCss from 'inline-css'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
+let templates = {}
+let nodemailerMailgun = undefined
+const _dirname = dirname(fileURLToPath(import.meta.url)) + '/'
+
+
+export async function sendEmail({ template, to, bcc, data={}, from, replyTo, recipientVariables, subject, test, skipCssInline, config }) {
+  /**
+   * Email recipient a predefined template with data and/or recipientVariables
+   *
+   * @param {string} template = e.g. 'reset-password' or html
+   * @param {string} to - e.g. "Bruce Lee<bruce@gmail.com>, ..."
+   * @param {object} config - e.g. { mailgunKey, mailgunDomain, emailFrom, clientUrl }
+   * @param {string} <bcc> - e.g. "Chuck Norris<chuck@gmail.com>" (not sent in development)
+   * @param {object} <data> - recipientVariables[to] shorthand
+   * @param {string} <from> - e.g. "Chuck Norris<chuck@gmail.com>"
+   * @param {string} <replyTo> - e.g. "Chuck Norris<chuck@gmail.com>"
+   * @param {object} <recipientVariables> - mailgun recipient-variables for batch sending
+   * @param {string} <subject> - subject, this can also be defined in the template
+   * @param {boolean} <skipCssInline> - skip inlining css
+   * @param {boolean} <test> - subject, this can also be defined in the template
+   * @return Promise([mailgunErr, mailgunInfo])
+   */
+  if (!config) {
+    throw new Error('sendEmail: `config` missing')
+  } else if (!config.emailFrom || !config.clientUrl) {
+    throw new Error('sendEmail: `config.emailFrom` or `config.clientUrl` is missing')
+  } else if (!test && (!config.mailgunKey || !config.mailgunDomain)) {
+    throw new Error('sendEmail: `config.mailgunKey` or `config.mailgunDomain` is missing')
+  } else if (!template) {
+    throw new Error('sendEmail: `template` missing')
+  } else if (!to) {
+    throw new Error('sendEmail: `to` missing')
+  }
+
+  // Setup nodemailer once
+  if (!nodemailerMailgun && !test) {
+    nodemailerMailgun = nodemailer.createTransport(
+      mailgun({ auth: { api_key: config.mailgunKey, domain: config.mailgunDomain }})
+    )
+  }
+
+  // From, replayTo
+  from = from || config.emailFrom
+  replyTo = replyTo || config.emailReplyTo || from
+
+  // Data is recipientVariables[to] shorthand
+  if (data) {
+    recipientVariables = { [getNameEmail(to)[1]]: data }
+  }
+
+  // Add default recipientVariables
+  for (let toEmail in recipientVariables) {
+    recipientVariables[toEmail] = {
+      domain: config.clientUrl,
+      email: toEmail,
+      greet: data.name || getNameEmail(to)[0]? 'Hi ' + (data.name || getNameEmail(to)[0]) : 'Hello',
+      name: getNameEmail(to)[0],
+      replyToEmail: getNameEmail(replyTo)[1],
+      replyToName: getNameEmail(replyTo)[0],
+      ...recipientVariables[toEmail],
+    }
+  }
+
+  let settings = {
+    bcc: bcc,
+    from: from,
+    isDev: config.clientUrl.match(/:/),
+    recipientVariables: recipientVariables,
+    replyTo: replyTo,
+    skipCssInline: skipCssInline,
+    subject: subject,
+    template: template,
+    test: config.emailTestMode || test,
+    to: to,
+    url: config.clientUrl,
+  }
+
+  // Grab html and send
+  let html = template.match('<') ? template : await getTemplate(settings, config)
+  if (!html) throw new Error('Sendmail: No template returned from getTemplate(..)')
+  return await sendWithMailgun(settings, html) // note, mailgun errors are resolved
+}
+
+async function getTemplate(settings, config) {
+  try {
+    var templateName = settings.template
+    if (!templates[templateName] || settings.isDev) {
+      nunjucks.configure({ noCache: config.env === 'development' })
+      // Setup the nunjucks environment
+      let env = new nunjucks.Environment([
+        new nunjucks.FileSystemLoader(`${config.emailTemplateDir}`), // user templates take precedence
+        new nunjucks.FileSystemLoader(`${_dirname}`), // then fallback to nitro default templates
+      ])
+      // Get the template
+      let template = env.getTemplate(templateName + '.html', true)
+      // Render the template
+      let html = template.render({})
+      if (settings.skipCssInline && settings.test) {
+        templates[templateName] = html
+      } else {
+        try { 
+          // First try to inline the CSS from the user templates directory (config.emailTemplateDir)
+          templates[templateName] = await inlineCssForPath(html, config.emailTemplateDir)
+        } catch (e) {
+          // If the CSS is not found, use default nitro CSS file
+          if (templateName == 'reset-password' || templateName == 'welcome') {
+            templates[templateName] = await inlineCssForPath(html, `${_dirname}`)
+          } else {
+            throw e
+          }
+        }
+      }
+      return templates[templateName]
+    } else {
+      return templates[templateName]
+    }
+  } catch (e) {
+    console.error(`Sendmail: issue retrieving the email template "${templateName}.html"`)
+    console.error(e)
+    throw e
+  }
+}
+
+async function inlineCssForPath(html, path) {
+  const url = join('file://', path)
+  return await inlineCss(html, { url })
+}
+
+function getNameEmail(nameEmail) {
+  // Splits 'Bruce<bruce@gmail.com>' into [name, email]
+  nameEmail = nameEmail.split(',')[0]
+  var name = nameEmail.match('<')? nameEmail.split('<')[0] : ''
+  var email = nameEmail.match('<')? nameEmail.split(/<|>/g)[1] : nameEmail
+  return [name, email]
+}
+
+function processTemplate(settings, html) {
+  // If sending to only one email, replace mailgun placeholders before they reach mailgun (handy for testing templates)
+  if (!settings.to.match(/,/) && Object.keys(settings.recipientVariables).length) {
+    const recipientVariables = settings.recipientVariables[Object.keys(settings.recipientVariables)[0]]
+    for (let key in recipientVariables) {
+      html = html.replace(new RegExp('%recipient\\.' + key + '%', 'g'), recipientVariables[key])
+    }
+  }
+  // Extract the subject from the template
+  let foundSubject = html.match(new RegExp('\\[\\[\\s*subject\\s*=\\s*(.*?)\\s*\\]\\]'))
+  html = html.replace(new RegExp('\\[\\[\\s*subject\\s*=.*?\\]\\]'), '')
+  // Save subject (if called from an instance)
+  if (!settings.subject) {
+    if (foundSubject) settings.subject = foundSubject[1]
+    else throw new Error('Sendmail: please pass `subject` or set it in the template')
+  }
+  return html
+}
+
+async function sendWithMailgun(settings, html) {
+  // Supports batch sending via recipientVariables, limit 1000 emails
+  // https://documentation.mailgun.com/en/latest/user_manual.html?highlight=batch%20sending#batch-sending
+  let processedhtml = await processTemplate(settings, html)
+  if (settings.test) return processedhtml
+
+  return new Promise((resolve, reject) => {
+    nodemailerMailgun.sendMail({
+      ...(settings.bcc && !settings.isDev? { bcc: settings.bcc } : {}),
+      from: settings.from,
+      html: processedhtml,
+      'h:Reply-To': settings.replyTo,
+      subject: settings.subject,
+      to: settings.to,
+      ...(!settings.recipientVariables? {} : {
+        'recipient-variables': typeof settings.recipientVariables == 'string'
+          ? settings.recipientVariables
+          : JSON.stringify(settings.recipientVariables),
+      }),
+    }, function(err, info) {
+      if (err) {
+        console.error('SendEmail mailgun error')
+        reject(err)
+      } else {
+        resolve(info)
+      }
+    })
+  })
+}

package/server/email/partials/email.css

@@ -0,0 +1,153 @@
+/* Reset */
+
+div,
+p {
+  margin: 0!important;
+}
+table {
+  border-collapse: collapse;
+}
+td[class=textBox] {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+ul {
+  margin: 11px 0 0 28px;
+  text-align: left;
+}
+
+/* Layout */
+
+.email-body {
+  width: 100%;
+  background-color: #ffffff;
+  margin: 0;
+  padding: 0;
+  font-family: Inter, 'Arial', 'Open Sans', Helvetica, Arial;
+}
+.table-header {
+  background-color: #000000;
+}
+.table-header td td:first-child {
+  padding-left: 40px;
+}
+.table-header td td:last-child {
+  padding-right: 40px;
+}
+.table-header img {
+  vertical-align: top;
+}
+.table-body {
+  border: 1px solid #f2f2f2;
+}
+.table-content {
+  width: 100%;
+}
+
+/* Content */
+
+.content {
+  font-size: 15.5px;
+  /* font-size: 16px; */
+  font-style: normal;
+  font-weight: 400;
+  color: #111;
+  line-height: 1.7;
+  mso-line-height-rule: exactly;
+}
+.content a {
+  color: #000;
+  text-decoration: underline;
+  font-style: normal;
+}
+.content a:hover {
+  text-decoration: underline;
+  font-style: normal;
+}
+.content a.button {
+  color: #fff;
+  font-weight: 600;
+  line-height: 22px;
+  font-size: 13px;
+  text-decoration: none;
+  background-color: #3a3942;
+  border-top: 11px solid #3a3942;
+  border-bottom: 11px solid #3a3942;
+  border-left: 50px solid #3a3942;
+  border-right: 50px solid #3a3942;
+  border-radius: 5px;
+  text-align: center;
+  display: inline-block;
+}
+.content b {
+  color: #000000;
+  font-weight: 600;
+}
+.small {
+  color: #8e8e8e;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+/* Responsive layout */
+
+@media (min-resolution: 144dpi),
+(-webkit-min-device-pixel-ratio: 1.5),
+(min--moz-device-pixel-ratio: 1.5),
+(-o-min-device-pixel-ratio: 1.5/1),
+(min-device-pixel-ratio: 1.5),
+(min-resolution: 1.5dppx) {}
+@media only screen and (max-width:640px) {
+  /*table table,
+    td[class=full_width] {
+      width:100%!important;
+    }*/
+  div[class=div-scale],
+  table[class=table-scale],
+  td[class=td-scale] {
+    width: 440px!important;
+    margin: 0 auto!important;
+  }
+  img[class=img-scale] {
+    width: 100%!important;
+    height: auto!important;
+  }
+  table[class=spacer],
+  td[class=spacer] {}
+  td[class=center] {
+    text-align: center!important;
+  }
+  table[class=full] {
+    width: 400px!important;
+    margin-left: 20px!important;
+    margin-right: 20px!important;
+  }
+}
+@media only screen and (max-width:479px) {
+  div[class=div-scale],
+  table[class=table-scale],
+  td[class=td-scale] {
+    width: 320px!important;
+    margin: 0 auto!important;
+  }
+  img[class=img-scale] {
+    width: 100%!important;
+    height: auto!important;
+  }
+  table[class=spacer],
+  td[class=spacer] {
+    display: none!important;
+  }
+  td[class=center] {
+    text-align: center!important;
+  }
+  td[class=textBox] {
+    padding-left: 10px!important;
+    padding-right: 10px!important;
+  }
+  table[class=full] {
+    width: 320px!important;
+    margin-left: 20px!important;
+    margin-right: 20px!important;
+  }
+}