BUILD: Initialize demo app

.gitignore

@@ -44,4 +44,8 @@ testem.log
 Thumbs.db
 pnpm-lock-error.yaml
 
-vite.config.*.timestamp*
+vite.config.*.timestamp*
+
+# Next.js
+.next
+out

.vscode/extensions.json

@@ -11,10 +11,10 @@
         "eamodio.gitlens",
         "esbenp.prettier-vscode",
         "bradlc.vscode-tailwindcss",
-        "dbaeumer.vscode-eslint",
-        "davidanson.vscode-markdownlint",
         "ambar.bundle-size",
         "yoavbls.pretty-ts-errors",
-        "csstools.postcss"
+        "csstools.postcss",
+        "ms-playwright.playwright",
+        "firsttris.vscode-jest-runner"
     ]
 }

apps/nt-stories-e2e/playwright.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test'
+import { nxE2EPreset } from '@nx/playwright/preset'
+
+import { workspaceRoot } from '@nx/devkit'
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:3000'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    ...nxE2EPreset(__filename, { testDir: './src' }),
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        baseURL,
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        command: 'pnpm exec nx run nt-stories:serve-static',
+        url: 'http://localhost:3000',
+        reuseExistingServer: !process.env.CI,
+        cwd: workspaceRoot,
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+
+        // Uncomment for mobile browsers support
+        /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+        // Uncomment for branded browsers
+        /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+    ],
+})

apps/nt-stories-e2e/project.json

@@ -0,0 +1,10 @@
+{
+    "name": "nt-stories-e2e",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "sourceRoot": "apps/nt-stories-e2e/src",
+    "tags": [],
+    "implicitDependencies": ["nt-stories"],
+    "// targets": "to see all targets run: nx show project nt-stories-e2e --web",
+    "targets": {}
+}

apps/nt-stories-e2e/src/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('has title', async ({ page }) => {
+    await page.goto('/')
+
+    // Expect h1 to contain a substring.
+    expect(await page.locator('h1').innerText()).toContain('Welcome')
+})

apps/nt-stories-e2e/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "allowJs": true,
+        "outDir": "../../dist/out-tsc",
+        "sourceMap": false,
+        "module": "commonjs"
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.js",
+        "playwright.config.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.spec.js",
+        "src/**/*.test.ts",
+        "src/**/*.test.js",
+        "src/**/*.d.ts"
+    ]
+}

apps/nt-stories/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+    const content: any
+    export const ReactComponent: any
+    export default content
+}

apps/nt-stories/jest.config.ts

@@ -0,0 +1,14 @@
+export default {
+    displayName: 'nt-stories',
+    preset: '../../jest.preset.js',
+    transform: {
+        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':
+            '@nx/react/plugins/jest',
+        '^.+\\.[tj]sx?$': [
+            'babel-jest',
+            { presets: ['@nx/next/babel'] },
+        ],
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../coverage/apps/nt-stories',
+}

apps/nt-stories/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/nt-stories/next.config.js

@@ -0,0 +1,22 @@
+//@ts-check
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { composePlugins, withNx } = require('@nx/next')
+
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+    nx: {
+        // Set this to true if you would like to use SVGR
+        // See: https://github.com/gregberge/svgr
+        svgr: false,
+    },
+}
+
+const plugins = [
+    // Add more Next.js plugins to this list if needed.
+    withNx,
+]
+
+module.exports = composePlugins(...plugins)(nextConfig)

apps/nt-stories/postcss.config.js

@@ -0,0 +1,15 @@
+const { join } = require('path')
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+    plugins: {
+        tailwindcss: {
+            config: join(__dirname, 'tailwind.config.js'),
+        },
+        autoprefixer: {},
+    },
+}

apps/nt-stories/project.json

@@ -0,0 +1,9 @@
+{
+    "name": "nt-stories",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "apps/nt-stories",
+    "projectType": "application",
+    "tags": [],
+    "targets": {
+    }
+}

apps/nt-stories/specs/index.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Page from '../src/app/page'
+
+describe('Page', () => {
+    it('should render successfully', () => {
+        const { baseElement } = render(<Page />)
+        expect(baseElement).toBeTruthy()
+    })
+})

apps/nt-stories/src/app/api/hello/route.ts

@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+    return new Response('Hello, from API!')
+}