Merge pull request #1 from jsrepl/nextjs

Migrate from Nuxt.js to Next.js

Author: al3xnag

.prettierrc

@@ -4,7 +4,16 @@
   "trailingComma": "es5",
   "printWidth": 100,
 
-  "importOrder": ["^node:", "<THIRD_PARTY_MODULES>", "^[./]"],
+  "importOrder": [
+    "^node:",
+    "^react",
+    "^next",
+    "<THIRD_PARTY_MODULES>",
+    "^\\~icons/",
+    "^\\@/",
+    "^\\.\\./",
+    "^\\./"
+  ],
   "importOrderSortSpecifiers": true,
 
   "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],

package.json

@@ -38,10 +38,5 @@
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=18"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "[email protected]": "patches/[email protected]"
-    }
   }
 }

packages/jsrepl/.env.example

@@ -1,5 +1,2 @@
-SUPABASE_URL=
-SUPABASE_KEY=
-SUPABASE_SERVICE_KEY=
-JSREPL_PREVIEW_URL=http://localhost:5199
-JSREPL_CUSTOM_APP_VERSION=
+NEXT_PUBLIC_PREVIEW_URL=http://localhost:5199
+NEXT_PUBLIC_APP_VERSION=

packages/jsrepl/.env.test

@@ -1,5 +1,2 @@
-SUPABASE_URL=http://127.0.0.1:54321
-SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
-SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
-JSREPL_PREVIEW_URL=http://localhost:5199
-JSREPL_CUSTOM_APP_VERSION=9.9.9
+NEXT_PUBLIC_PREVIEW_URL=http://localhost:5199
+NEXT_PUBLIC_APP_VERSION=9.9.9

packages/jsrepl/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "plugin:storybook/recommended"],
+  "ignorePatterns": ["public/e.js"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

packages/jsrepl/.gitignore

@@ -1,3 +1,46 @@
-public/e.js
-test-results/
-playwright-report/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+*storybook.log
+
+public/e.js

packages/jsrepl/.lintstagedrc.js

@@ -1,6 +1,11 @@
+import path from 'path'
 import baseConfig from '../../.lintstagedrc.js'
 
+// https://nextjs.org/docs/app/building-your-application/configuring/eslint#lint-staged
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`
+
 export default {
   ...baseConfig,
-  '**/*': 'eslint --fix',
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
 }

packages/jsrepl/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+import { dirname, join } from 'path'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-themes'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {},
+  },
+}
+export default config

packages/jsrepl/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
+import type { Preview, ReactRenderer } from '@storybook/react'
+import '../src/app/globals.css'
+import { Themes } from '../src/lib/themes'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    withThemeByDataAttribute<ReactRenderer>({
+      themes: Themes.reduce(
+        (acc, theme) => {
+          acc[theme.id] = theme.id
+          return acc
+        },
+        {} as Record<string, string>
+      ),
+      defaultTheme: Themes[0].id,
+      attributeName: 'data-theme',
+    }),
+  ],
+}
+
+export default preview

packages/jsrepl/README.md

@@ -0,0 +1,45 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with
+[`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the
+file.
+
+This project uses
+[`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to
+automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback
+and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the
+[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
+
+Check out our
+[Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying)
+for more details.