nitro-web 0.0.1

package/_example/components/index.tsx

@@ -0,0 +1,225 @@
+/*
+ * Any component with a .route property is called a page component. Any page component found under /components 
+ * will be automatically imported and setup by the client router, we're just listing them all here for the sake of example.
+ */
+import { 
+  Signin, 
+  Signup, 
+  ResetInstructions, 
+  ResetPassword, 
+  // SettingsAccount, 
+  // SettingsBusiness, 
+  // SettingsTeam, 
+  Styleguide, 
+  NotFound,
+} from 'nitro-web'
+import config from '../client/config'
+
+// Signin page (can be saved onto a seperate file under the components folder)
+export const SigninPage = () => <Signin config={config} />
+SigninPage.route = {
+  '/signin': true,
+  '/signout': true,
+  'meta': { 'title': 'Sign In - Nitro', layout: 2 },
+}
+
+// Signup page
+export const SignupPage = () => <Signup config={config} />
+SignupPage.route = {
+  '/signup': true,
+  'meta': { 'title': 'Sign Up - Nitro', layout: 2 },
+}
+
+// Reset instructions page
+export const ResetInstructionsPage = () => <ResetInstructions />
+ResetInstructionsPage.route = {
+  '/reset': true,
+  'meta': { 'title': 'Reset password - Nitro', layout: 2 },
+}
+
+// Reset password page
+export const ResetPasswordPage = () => <ResetPassword />
+ResetPasswordPage.route = {
+  '/reset/:token': true,
+  'meta': { 'title': 'Reset password - Nitro', layout: 2 },
+}
+
+// // Settings Account page
+// export const SettingsAccountPage = () => <SettingsAccount />
+// SettingsAccountPage.route = {
+//   '/settings/account': ['isUser'],
+//   'meta': { 'title': 'Account Settings - Nitro', layout: 1 },
+// }
+
+// // Settings Business page
+// export const SettingsBusinessPage = () => <SettingsBusiness config={config} />
+// SettingsBusinessPage.route = {
+//   '/settings/business': ['isUser'],
+//   'meta': { 'title': 'Business Settings - Nitro', layout: 1 },
+// }
+
+// // Settings Team page
+// export const SettingsTeamPage = () => <SettingsTeam config={config} />
+// SettingsTeamPage.route = {
+//   '/settings/team': ['isUser'],
+//   'meta': { 'title': 'Team Settings - Nitro', layout: 1 },
+// }
+
+// Dashboard page
+export function DashboardPage() {
+  return (
+    <div>
+      <h1 className="h1 mb-8">Dashboard</h1>
+      <p className="text-gray-700">
+        Welcome to Nitro, a modular React/Express base project, styled using Tailwind 🚀.
+      </p>
+    </div>
+  )
+}
+DashboardPage.route = {
+  '/': true,
+  'meta': { 'title': 'Dashboard - Nitro', layout: 1 },
+}
+
+// Styleguide page
+export const StyleguidePage = () => <Styleguide config={config} />
+StyleguidePage.route = {
+  '/styleguide': true,
+  'meta': { title: 'Style Guide - Nitro', layout: 1 },
+}
+
+// Not found page
+export const NotFoundPage = () => <NotFound />
+NotFoundPage.route = {
+  '*': true,
+  'meta': { 'title': 'Nothing found - Nitro', layout: 1 },
+}
+
+// Tailwind UI pricing page example
+export function PricingPage() {
+  const tiers = [
+    {
+      name: 'Hobby',
+      id: 'tier-hobby',
+      href: '#',
+      priceMonthly: '$29',
+      description: 'The perfect plan if you\'re just getting started with our product.',
+      features: ['25 products', 'Up to 10,000 subscribers', 'Advanced analytics', '24-hour support response time'],
+      featured: false,
+    },
+    {
+      name: 'Enterprise',
+      id: 'tier-enterprise',
+      href: '#',
+      priceMonthly: '$99',
+      description: 'Dedicated support and infrastructure for your company.',
+      features: [
+        'Unlimited products',
+        'Unlimited subscribers',
+        'Advanced analytics',
+        'Dedicated support representative',
+        'Marketing automations',
+        'Custom integrations',
+      ],
+      featured: true,
+    },
+  ]
+  function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+  }
+  return (
+    <div className="relative isolate bg-white py-12 md:py-16 px-6">
+      <div aria-hidden="true" className="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl">
+        <div
+          style={{
+            clipPath:
+              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%,'
+              +' 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+          }}
+          className="mx-auto aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
+        />
+      </div>
+      <div className="mx-auto max-w-4xl text-center">
+        <h2 className="text-base/7 font-semibold text-indigo-600">Pricing</h2>
+        <p className="mt-2 text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+          Choose the right plan for you
+        </p>
+      </div>
+      <p className="mx-auto mt-6 max-w-2xl text-pretty text-center text-lg font-medium text-gray-600 sm:text-xl/8">
+        Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer
+        loyalty, and driving sales.
+      </p>
+      <div className="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
+        {tiers.map((tier, tierIdx) => (
+          <div
+            key={tier.id}
+            className={classNames(
+              tier.featured ? 'relative bg-gray-900 shadow-2xl' : 'bg-white/60 sm:mx-8 lg:mx-0',
+              tier.featured
+                ? ''
+                : tierIdx === 0
+                  ? 'rounded-t-3xl sm:rounded-b-none lg:rounded-bl-3xl lg:rounded-tr-none'
+                  : 'sm:rounded-t-none lg:rounded-bl-none lg:rounded-tr-3xl',
+              'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10'
+            )}
+          >
+            <h3
+              id={tier.id}
+              className={classNames(tier.featured ? 'text-indigo-400' : 'text-indigo-600', 'text-base/7 font-semibold')}
+            >
+              {tier.name}
+            </h3>
+            <p className="mt-4 flex items-baseline gap-x-2">
+              <span
+                className={classNames(
+                  tier.featured ? 'text-white' : 'text-gray-900',
+                  'text-5xl font-semibold tracking-tight'
+                )}
+              >
+                {tier.priceMonthly}
+              </span>
+              <span className={classNames(tier.featured ? 'text-gray-400' : 'text-gray-500', 'text-base')}>/month</span>
+            </p>
+            <p className={classNames(tier.featured ? 'text-gray-300' : 'text-gray-600', 'mt-6 text-base/7')}>
+              {tier.description}
+            </p>
+            <ul
+              role="list"
+              className={classNames(
+                tier.featured ? 'text-gray-300' : 'text-gray-600',
+                'mt-8 space-y-3 text-sm/6 sm:mt-10'
+              )}
+            >
+              {tier.features.map((feature) => (
+                <li key={feature} className="flex gap-x-3">
+                  {/* <CheckIcon
+                    aria-hidden="true"
+                    className={classNames(tier.featured ? 'text-indigo-400' : 'text-indigo-600', 'h-6 w-5 flex-none')}
+                  /> */}
+                  {feature}
+                </li>
+              ))}
+            </ul>
+            <a
+              href={tier.href}
+              aria-describedby={tier.id}
+              className={classNames(
+                tier.featured
+                  ? 'bg-indigo-500 text-white shadow-sm hover:bg-indigo-400 focus-visible:outline-indigo-500'
+                  : 'text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline-indigo-600',
+                'mt-8 block rounded-md px-3.5 py-2.5 text-center text-sm font-semibold focus-visible:outline '
+                + 'focus-visible:outline-2 focus-visible:outline-offset-2 sm:mt-10'
+              )}
+            >
+              Get started today
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+PricingPage.route = {
+  '/pricing': true,
+  'meta': { 'title': 'Pricing - Nitro', layout: 1 },
+}

package/_example/components/partials/layouts.tsx

@@ -0,0 +1,5 @@
+import { Layout1 as L1, Layout2 as L2 } from 'nitro-web'
+import Logo from '../../client/imgs/logo/logo.svg'
+
+export const Layout1 = () => { return <L1 Logo={Logo} /> }
+export const Layout2 = () => { return <L2 Logo={Logo} /> }

package/_example/components/settings.api.js

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

package/_example/server/config.js

@@ -0,0 +1,120 @@
+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
+
+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,
+  emailTestMode: process.env.emailTestMode,
+  env: env,
+  masterPassword: process.env.masterPassword,
+  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,
+  mailgunKey: process.env.mailgunKey,
+  stripePublishableKey: process.env.stripePublishableKey,
+  stripeSecretKey: process.env.stripeSecretKey,
+  stripeWebhookSecret: process.env.stripeWebhookSecret,
+
+  monasteryOptions: {
+    noDefaults: true,
+    nullObjects: true,
+    useMilliseconds: true,
+    imagePlugin: process.env.awsSecretAccessKey
+      ? {
+          awsBucket: process.env.awsBucket,
+          awsRegion: process.env.awsRegion,
+          awsAccessKeyId: process.env.awsAccessKeyId,
+          awsSecretAccessKey: process.env.awsSecretAccessKey,
+          formats: ['png', 'jpg', 'jpeg', 'bmp', 'tiff', 'gif', 'webp'],
+        }
+      : undefined,
+    // show mongod selection error faster in development
+    serverSelectionTimeoutMS: env == 'development' ? 3000 : undefined,
+  },
+
+  countries: {
+    nz: {
+      currency: 'nzd',
+      name: 'New Zealand',
+      numberFormats: {
+        currency: '¤#,##0.00',
+        percentage: '¤#,##0.00%',
+      },
+      dateFormats: {
+        full: 'dddd, D MMMM YYYY',
+        long: 'D MMMM YYYY',
+        medium: 'D/MM/YYYY',
+        short: 'D/MM/YY',
+      },
+    },
+  },
+
+  currencies: {
+    nzd: {
+      name: 'New Zealand Dollar',
+      symbol: '$',
+    },
+  },
+
+  middleware: {
+    isAdmin: (req, res, next) => {
+      // Still need to remove cookie matching in favour of uid..
+      // E.g. Cookie matching handy for rare issues, e.g. signout > signin (to a different user on another tab)
+      let cookieMatch = req.user && (!req.headers.userid || req.user._id.toString() == req.headers.userid)
+      if (cookieMatch && req.user.type.match(/admin/)) next()
+      else if (req.user && req.user.type.match(/admin/)) res.unauthorized('Invalid cookie, please refresh your browser')
+      else if (req.user) res.unauthorized('You are not authorised to make this request.')
+      else res.unauthorized('Please sign in first.')
+    },
+    isCompanyOwner: (req, res, next) => {
+      let user = req.user || { companies: [] }
+      let cid = req.params.cid
+      let company = user.companies.find((o) => o._id.toString() == cid)
+      let companyUser = company?.users?.find((o) => o._id.toString() == user._id.toString())
+      if (!user._id) return res.unauthorized('Please sign in first.')
+      else if (!company || !companyUser) res.unauthorized('You are not authorised to make this request.')
+      else if (companyUser.type != 'owner') res.unauthorized('Only owners can make this request.')
+      else next()
+    },
+    isCompanyUser: (req, res, next) => {
+      let user = req.user || { companies: [] }
+      let cid = req.params.cid
+      let company = user.companies.find((o) => o._id.toString() == cid)
+      if (!user._id) return res.unauthorized('Please sign in first.')
+      else if (!company) res.unauthorized('You are not authorised to make this request.')
+      else next()
+    },
+    isUser: (req, res, next) => {
+      // todo: need to double check that uid is always defined
+      let uid = req.params.uid
+      if (req.user && (typeof uid == 'undefined' || req.user._id.toString() == uid)) next()
+      else if (req.user) res.unauthorized('You are not authorised to make this request.')
+      else res.unauthorized('Please sign in first.')
+    },
+  },
+
+  version: _require(projectDir + (isNitro ? '../' : '') + 'package.json').version,
+  isNitro: isNitro,
+}

package/_example/server/email/welcome.html

@@ -0,0 +1,27 @@
+<!-- You can view templates at http://localhost:3001/email/welcome -->
+<!-- To modify the css, add your own /server/email/partials/email.css file -->
+
+<!-- extends references the default nitro layout file -->
+{% extends "partials/layout1.swig" %}
+
+<!-- block content is the content of the email -->
+{% block content %}
+
+  [[ subject = Welcome to Nitro ]]
+  <b>%recipient.greet%</b>,<br/>
+  <br/>
+  Thanks for trying out Nitro (the example)! <br/>
+  <br/>
+  If you have any feature requests, feedback or questions, please don't hesitate to reach out to us at <a href="mailto:%recipient.replyToEmail%">%recipient.replyToEmail%</a>.<br/>
+  <br/>
+  <br/>
+  <span mc:edit="button">
+    <a class="button" href="%recipient.domain%/signin?email=%recipient.email%" target="_blank">
+      Account Sign In
+    </a>
+  </span><br/>
+  <br/>
+  Thanks,<br/>
+  <b>The Nitro Team</b>
+
+{% endblock %}

package/_example/server/index.js

@@ -0,0 +1,32 @@
+import 'dotenv/config'
+import db from 'monastery'
+import config from './config.js'
+import { setupRouter, setupDefaultModels } from '#nitro-web/server.js'
+
+// Setup monastery models
+db.manager(config.mongoUrl, config.monasteryOptions)
+await db.models(config.modelsDir)
+await setupDefaultModels(db)
+
+// Catch mongod not running
+if (config.env === 'development') {
+  db.onError((err) => console.log(err))
+}
+
+// Setup router
+const server = await setupRouter(config)
+
+// Start express
+server.listen(process.env.PORT || 3001, '0.0.0.0', async () => {
+  // ...success
+})
+
+// You can send emails like this:
+// const html = await sendEmail({
+//   config: config,
+//   data: { name: 'Test' },
+//   template: 'welcome',
+//   test: true,
+//   to: 'test@test.com',
+// })
+// console.log(html)

package/_example/tailwind.config.js

@@ -0,0 +1,84 @@
+/** @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 Color from 'color'
+const lighten = (clr, val) => Color(clr).lighten(val).rgb().string()
+
+export default {
+  content: {
+    relative: true,
+    files: [
+      './components/**/*.{ts,tsx}',
+      nitroDir + 'components/**/*.{js,jsx}',
+    ],
+  },
+  experimental: {
+    optimizeUniversalDefaults: true, // remove unneeded varables from universal selectors
+  },
+  theme: {
+    extend: {
+      // Nitro theme variables
+      boxShadow: {
+        'dropdown-ul': '0 2px 8px 0 rgba(0, 0, 0, 0.05)',
+      },
+      colors: {
+        // Main colors
+        'primary': colors.indigo[500],
+        'primary-dark': colors.indigo[600],
+        'primary-light': colors.indigo[400],
+        'primary-hover': lighten(colors.indigo[500], 0.05),
+        'secondary': colors.green[500],
+        'secondary-dark': colors.green[600],
+        'secondary-light': colors.green[400],
+        'secondary-hover': lighten(colors.green[500], 0.05),
+        'label': colors.gray[900],
+        'link': colors.black,
+        'link-hover': colors.blue[200],
+        'link-focus': colors.blue[200],
+        'light': colors.gray[100],
+        'dark': colors.gray[900],
+        // Alert colors
+        'danger': '#ff0000',
+        'danger-dark': colors.red[800],
+        'info': colors.blue[500],
+        'success': colors.green[500],
+        // Element colors
+        'input': colors.gray[900],
+        'input-placeholder': colors.gray[400],
+        'input-border': colors.gray[300],
+        'dropdown-ul-border': colors.gray[200],
+      },
+      fontFamily: {
+        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
+      },
+      spacing: {
+        'input-before': '0.625rem',
+        'input-after': '1.5rem',
+      },
+    },
+  },
+  plugins: [],
+}
+

package/_example/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "allowJs": 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": {
+      "nitro-web": [
+        "../client.js"
+      ],
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "es6",
+  },
+  "include": ["client", "components", "types.d.ts"],
+}

package/_example/types.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  const content: string | React.FC<React.SVGProps<SVGElement>>
+  export default content
+}
+declare global {
+  const sharedStore: any
+}

package/_example/webpack.config.js

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