feat: tailwind, configs, sentry

.env.example

@@ -15,3 +15,7 @@ PROJECT_SERVICES_NAMESPACE=wod
 # With custom namespace provided, it will be used to prefix all services
 # in Docker network for current project
 COMPOSE_PROJECT_NAME=nextjs-${APP_NAME}
+
+# Sentry Settings
+NEXT_SENTRY_DSN=
+NEXT_SENTRY_TRACING=

.gitignore

@@ -21,6 +21,7 @@ cypress/videos/
 out/
 build/
 local/
+dist/
 
 # next-sitemap
 public/robots.txt

.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false

.secretlintignore

@@ -0,0 +1,2 @@
+**/.next
+.next

.stylelintrc.js

@@ -9,4 +9,14 @@ module.exports = {
       extends: '@wayofdev/stylelint-config',
     },
   ],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen'],
+      },
+    ],
+    'declaration-block-trailing-semicolon': null,
+    'no-descending-specificity': null,
+  },
 }

.templatesyncignore

@@ -1 +1,2 @@
 CHANGELOG.md
+.github/workflows/codeql-analysis.yml

Makefile

@@ -116,7 +116,7 @@ purge: down
 # Docker Actions
 # ------------------------------------------------------------------------------------
 up: ## Spin up this project using docker
-	$(DOCKER_COMPOSE) up --remove-orphans -d
+	$(DOCKER_COMPOSE) up --remove-orphans
 	@echo "🚀 Started and available at https://$(APP_NAME).$(PROJECT_SERVICES_NAMESPACE).docker"
 .PHONY: up
 

apps/docs/package.json

@@ -9,10 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ui": "workspace:*",
+    "@wayofdev/ui": "workspace:*",
     "nextra": "^2.0.1",
     "nextra-theme-docs": "^2.0.1"
   },

apps/web/.gitignore

@@ -0,0 +1,2 @@
+# Sentry
+.sentryclirc

apps/web/next.config.js

@@ -1,6 +1,38 @@
-module.exports = {
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+const { withSentryConfig } = require('@sentry/nextjs')
+
+const moduleExports = {
   reactStrictMode: true,
-  experimental: {
-    transpilePackages: ['ui'],
+  // https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages
+  transpilePackages: ['@wayofdev/ui'],
+
+  sentry: {
+    // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
+    // for client-side builds. (This will be the default starting in
+    // `@sentry/nextjs` version 8.0.0.) See
+    // https://webpack.js.org/configuration/devtool/ and
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
+    // for more information.
+    hideSourceMaps: true,
   },
 }
+
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  silent: true, // Suppresses all logs
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+}
+
+// Make sure adding Sentry options is the last code to run before exporting, to
+// ensure that your source maps include changes from all other Webpack plugins
+module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions)

apps/web/package.json

@@ -6,13 +6,15 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "analyze": "BUNDLE_ANALYZE=both next build",
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^13.0.7",
+    "@wayofdev/ui": "workspace:*",
+    "next": "^13.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ui": "workspace:*"
+    "tailwindcss": "^3.2.4"
   },
   "devDependencies": {
     "@types/jest": "^29.2.4",
@@ -22,9 +24,20 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@wayofdev/browserslist-config": "^1.1.0",
+    "postcss-100vh-fix": "^1.0.2",
+    "postcss": "^8.4.20",
+    "sanitize.css": "^13.0.0",
     "eslint": "^8.30.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig-config": "workspace:*",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "autoprefixer": "^10.4.13",
+    "postcss-cli": "^10.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.8.3",
+    "postcss-reporter": "^7.0.5",
+    "browserslist": "^4.21.4",
+    "@sentry/nextjs": "^7.28.1"
   }
 }

apps/web/postcss.config.js

@@ -0,0 +1,35 @@
+// Customized postcss
+// @link https://nextjs.org/docs/advanced-features/customizing-postcss-config
+// @link https://tailwindcss.com/docs/using-with-preprocessors
+
+const isProd = process.env.NODE_ENV === 'production'
+const supportsIE11 = false
+const enableCssGrid = false
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    ...(isProd
+      ? {
+          'tailwindcss/nesting': {},
+          'postcss-100vh-fix': {},
+          'postcss-flexbugs-fixes': {},
+          'postcss-preset-env': {
+            autoprefixer: {
+              flexbox: 'no-2009',
+              // https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie
+              ...(enableCssGrid
+                ? {
+                    grid: 'autoplace',
+                  }
+                : {}),
+            },
+            stage: 3,
+            features: {
+              'custom-properties': supportsIE11,
+            },
+          },
+        }
+      : {}),
+  },
+}

apps/web/sentry.client.config.ts

@@ -0,0 +1,32 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import { init as sentryInit } from '@sentry/nextjs'
+
+sentryInit({
+  dsn: process.env.NEXT_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  // @see https://develop.sentry.dev/sdk/performance/
+  tracesSampleRate: ['false', '0'].includes(process.env.NEXT_SENTRY_TRACING ?? '') ? undefined : 1,
+
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+  beforeSend: async (event, hint) => {
+    if (process.env.NODE_ENV === 'development') {
+      console.log('Sentry event', event)
+      console.log('Sentry hint', hint)
+    }
+    return event
+  },
+  ignoreErrors: [
+    /**
+     * @link https://github.com/WICG/ResizeObserver/issues/38#issuecomment-422126006,
+     * @link https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/50387233#50387233
+     */
+    'ResizeObserver loop limit exceeded',
+  ],
+})

apps/web/sentry.server.config.ts

@@ -0,0 +1,27 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import { init as sentryInit } from '@sentry/nextjs'
+
+sentryInit({
+  dsn: process.env.SENTRY_DSN || process.env.NEXT_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  // @see https://develop.sentry.dev/sdk/performance/
+  // To turn it off, remove the line
+  // @see https://github.com/getsentry/sentry-javascript/discussions/4503#discussioncomment-2143116
+  tracesSampleRate: 1,
+
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+  beforeSend: async (event, hint) => {
+    if (process.env.NODE_ENV === 'development') {
+      console.log('Sentry event', event)
+      console.log('Sentry hint', hint)
+    }
+    return event
+  },
+})

apps/web/src/pages/index.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@wayofdev/ui'
+import * as React from 'react'
+
+export default function Web() {
+  return (
+    <>
+      <h1 className="text-3xl font-bold underline">Hello world!</h1>
+      <div>
+        <h1>Web</h1>
+        <Button />
+      </div>
+      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        Boop
+      </button>
+    </>
+  )
+}

apps/web/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

apps/web/tsconfig.json

@@ -1,15 +1,22 @@
 {
   "extends": "tsconfig-config/next.json",
   "exclude": ["node_modules", "dist", "coverage"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "outDir": "dist",
-    "baseUrl": "./",
-    //    "paths": {
-    //      "@/*": [
-    //        "src/*"
-    //      ]
-    //    }
-    "moduleResolution": "node"
+    "target": "esnext",
+    "baseUrl": "./src",
+    "allowJs": true,
+    "moduleResolution": "node",
+
+    "noEmit": true,
+    "module": "esnext",
+
+    "jsx": "preserve",
+    "paths": {
+      "@/pages/*": ["./pages/*"],
+      "@/public/*": ["../public/*"],
+      "@wayofdev/ui/*": ["../../../packages/ui/src/*"],
+      "@wayofdev/ui": ["../../../packages/ui/src/index"]
+    }
   }
 }

docker-compose.yaml

@@ -3,7 +3,7 @@ version: '3.9'
 
 services:
   app:
-    image: wayofdev/node:19-alpine-1.3
+    image: wayofdev/node:19-alpine-1.4
     container_name: ${APP_NAME}_app
     restart: on-failure
     networks:

package.json

@@ -60,13 +60,13 @@
     "prettier": "^2.8.1",
     "prettier-plugin-tailwindcss": "^0.2.1",
     "secretlint": "^5.3.0",
-    "stylelint": "^14.16.0",
+    "stylelint": "^14.16.1",
     "stylelint-a11y": "^1.2.3",
-    "turbo": "latest",
+    "turbo": "^1.6.3",
     "typescript": "^4.9.4"
   },
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "pnpm@7.18.2"
+  "packageManager": "pnpm@7.21.0"
 }

packages/ui/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "root": true,
+  "extends": "custom",
+  "plugins": ["import"],
+  "rules": {
+    "import/extensions": "off",
+    "unicorn/prevent-abbreviations": [
+      "error",
+      {
+        "replacements": {
+          "env": {
+            "environment": false
+          }
+        }
+      }
+    ]
+  },
+  "ignorePatterns": ["dist/**", ".next/**"],
+  "parserOptions": {
+    "project": ["tsconfig.json"]
+  }
+}