Ft/fix nx builds

.github/workflows/pr-test.yml

@@ -41,18 +41,12 @@ jobs:
       - name: Install
         run: |
           yarn
-      #    yarn prepare:front
-
-      # - name: Format
-      #   run: yarn format:check
 
       - name: Lint
         run: yarn lint
 
-      # - name: Test
-      #   run: yarn test
-
+      - name: Test
+        run: yarn test --passWithNoTests
 
-      #  TODO: fix storybook builds
-      # - name: Build
-      #   run: yarn build
+      - name: Build
+        run: yarn build

.gitignore

@@ -37,7 +37,7 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-/libs/ui-kit/storybook-static/
+/libs/ui-kit-vue/storybook-static/
 apps/frontend-vue/.env
 infrastructure/.env
 .nx-cache
@@ -47,4 +47,4 @@ apps/api/src/generated
 
 # Next.js
 .next
-out
+out

.tailwind/tailwind.theme.js

@@ -14,5 +14,6 @@ export const tailwindTheme = {
     'primary-600': '#1C64F2',
     'primary-700': '#1A56DB',
     'primary-800': '#1E429F',
+    secondary: '#FFD04D',
   },
 }

README.md

@@ -21,13 +21,13 @@
 apps/
 
 - frontend-vue - vue
-- frontend-react - react
+- frontend-next - react
 - api - graphQL, postgress
 - api-mongo - node, mongoDB
 
 libs/
 
-- ui-kit
+- ui-kit-vue
 
 infrastructure/
 

apps/frontend-next/eslint.config.js

@@ -9,27 +9,21 @@ const compat = new FlatCompat({
 
 module.exports = [
   ...compat.extends(
-    'plugin:@nx/react-typescript',
-    'next',
-    'next/core-web-vitals'
+    'plugin:@nx/react-typescript'
+    // 'next',
+    // 'next/core-web-vitals'
   ),
   ...baseConfig,
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
     rules: {
-      '@next/next/no-html-link-for-pages': [
-        'error',
-        'apps/frontend-next/pages',
-      ],
+      '@typescript-eslint/no-require-imports': 'off',
+      'import/extensions': 'off',
+      'import/no-unresolved': 'off',
+    },
+    languageOptions: {
+      parserOptions: { project: ['apps/frontend-next/tsconfig.json'] },
     },
-  },
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {},
-  },
-  {
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {},
   },
   ...compat.config({ env: { jest: true } }).map((config) => ({
     ...config,
@@ -38,5 +32,5 @@ module.exports = [
       ...config.rules,
     },
   })),
-  { ignores: ['.next/**/*'] },
+  { ignores: ['!**/*', '**/.next/*', '**/jest.config.ts'] },
 ]

apps/frontend-next/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@nx-vite-infra/frontend-next"
+}

apps/frontend-next/pages/index.tsx

@@ -10,7 +10,7 @@ export function Index() {
         <div className="container">
           <div id="welcome">
             <h1>
-              <span> Hello there, </span>
+              <span className="text-secondary"> Hello there, </span>
               Welcome frontend-next 👋
             </h1>
           </div>

apps/frontend-next/postcss.config.js

@@ -1,11 +1,13 @@
 const { join } = require('path')
+const baseConfig = require('../../.tailwind/postcss.config')
 
 // 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 = {
+  ...baseConfig,
   plugins: {
     tailwindcss: {
       config: join(__dirname, 'tailwind.config.js'),

apps/frontend-next/project.json

@@ -5,12 +5,27 @@
   "projectType": "application",
   "tags": [],
   "targets": {
+    "build": {
+      "executor": "@nx/next:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/frontend-next"
+      }
+    },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "apps/frontend-next/jest.config.ts"
       }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/frontend-next/**/*.{ts,js,tsx,jsx}"]
+      }
     }
   }
 }

apps/frontend-next/tailwind.config.js

@@ -1,15 +1,19 @@
 const { createGlobPatternsForDependencies } = require('@nx/react/tailwind')
 const { join } = require('path')
 
+const baseConfig = require('../../.tailwind/tailwind.config')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     join(
       __dirname,
       '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+      // TODO: add ui-kit-react
     ),
     ...createGlobPatternsForDependencies(__dirname),
   ],
+  presets: [baseConfig],
   theme: {
     extend: {},
   },

apps/frontend-vue/eslint.config.js

@@ -19,7 +19,9 @@ module.exports = [
       vue: eslintPluginVue,
     },
   },
-  { ignores: ['!**/*'] },
+  {
+    ignores: ['!**/*', '**/dist/*', '**/node_modules', '**/vite.config.ts'],
+  },
   {
     languageOptions: {
       parser: vueEslintParser,

apps/frontend-vue/package.json

@@ -1,3 +1,3 @@
 {
-  "name": "frontend-vue"
+  "name": "@nx-vite-infra/frontend-vue"
 }

apps/frontend-vue/project.json

@@ -6,44 +6,21 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nxext/vite:build",
-      "outputs": ["{options.outputPath}"],
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/apps/frontend-vue/"],
       "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/apps/frontend-vue",
-        "baseHref": "/",
-        "configFile": "apps/frontend-vue/vite.config.ts",
-        "postcssConfig": "apps/frontend-vue/postcss.config.js"
+        "commands": [
+          "mkdir -p dist/apps/frontend-vue",
+          "cp -r apps/frontend-vue/dist/** dist/apps/frontend-vue/"
+        ],
+        "parallel": false
       },
-      "configurations": {
-        "production": {
-          "fileReplacements": [
-            {
-              "replace": "apps/frontend-vue/src/environments/environment.ts",
-              "with": "apps/frontend-vue/src/environments/environment.prod.ts"
-            }
-          ]
+      "dependsOn": [
+        {
+          "target": "vite:build"
         }
-      }
-    },
-    "serve": {
-      "executor": "@nxext/vite:dev",
-      "options": {
-        "outputPath": "dist/apps/frontend-vue",
-        "baseHref": "/",
-        "configFile": "apps/frontend-vue/vite.config.ts",
-        "postcssConfig": "apps/frontend-vue/postcss.config.js"
-      },
-      "configurations": {
-        "production": {
-          "fileReplacements": [
-            {
-              "replace": "apps/frontend-vue/src/environments/environment.ts",
-              "with": "apps/frontend-vue/src/environments/environment.prod.ts"
-            }
-          ]
-        }
-      }
+      ]
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
@@ -53,7 +30,7 @@
       }
     },
     "test": {
-      "executor": "@nxext/vitest:vitest",
+      "executor": "@nx/vite:test",
       "options": {
         "vitestConfig": "apps/frontend-vue/vitest.config.ts"
       }

apps/frontend-vue/src/components/Register.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { FormInput } from "@nx-vite-vue/ui-kit"
-import CustomButton from "../../../../libs/ui-kit/src/lib/components/CustomButton/CustomButton.vue"
+import { FormInput, CustomButton } from '@nx-vite-infra/ui-kit-vue'
 </script>
 <template>
   <!-- component -->

apps/frontend-vue/tailwind.config.js

@@ -1,14 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 
-const { join } = require("path")
-const baseConfig = require("../../.tailwind/tailwind.config")
+const { join } = require('path')
+const baseConfig = require('../../.tailwind/tailwind.config')
 
 module.exports = {
   content: [
-    join(__dirname, "./src/**/!(*.stories|*.spec).{ts,js,html,vue}"),
+    join(__dirname, './src/**/!(*.stories|*.spec).{ts,js,html,vue}'),
     join(
       __dirname,
-      "../../../libs/ui-kit/src/**/!(*.stories|*.spec).{ts,js,vue,html}"
+      '../../../libs/ui-kit-vue/src/**/!(*.stories|*.spec).{ts,js,vue,html}'
     ),
   ],
   presets: [baseConfig],

apps/frontend-vue/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), nxViteTsPaths()],
 })

libs/ui-kit-vue/.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
+import { mergeConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [vue(), nxViteTsPaths()],
+    }),
+}
+
+export default config
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

libs/ui-kit-vue/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import '../../../.tailwind/tailwind.base.css'
+
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-mode',
+  }),
+]

libs/ui-kit-vue/README.md

@@ -0,0 +1,19 @@
+# ui-kit-vue
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running storybook
+
+Run `nx storybook ui-kit-vue`
+
+## Building storybook
+
+Run `nx build ui-kit-vue`
+
+## Running unit tests
+
+Run `nx test ui-kit-vue` to execute the unit tests via [Jest](https://jestjs.io).
+
+## Running lint
+
+Run `nx lint ui-kit-vue` to execute the lint via [ESLint](https://eslint.org/).