Merge pull request #70 from bywhitebird/46-initialize-alakazam

46 initialize alakazam

apps/alakazam/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  extends: ['plugin:vue/vue3-recommended'],
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}

apps/alakazam/.gitignore

@@ -0,0 +1,28 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Panda
+styled-system
+styled-system-static

apps/alakazam/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

apps/alakazam/README.md

@@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

apps/alakazam/nuxt.config.ts

@@ -0,0 +1,41 @@
+import { createResolver } from '@nuxt/kit'
+
+const { resolve } = createResolver(import.meta.url)
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+
+  srcDir: 'src',
+
+  modules: [
+    'nuxt-typed-router',
+  ],
+
+  alias: {
+    'styled-system': resolve('./styled-system'),
+  },
+
+  css: [
+    '@/assets/css/global.css',
+  ],
+
+  postcss: {
+    plugins: {
+      '@pandacss/dev/postcss': {},
+    },
+  },
+
+  imports: {
+    presets: [
+      {
+        from: '~/styled-system/css',
+        imports: ['css'],
+      },
+    ],
+  },
+
+  build: {
+    transpile: ['fsevents'],
+  },
+})

apps/alakazam/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "alakazam",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "prepare": "panda codegen"
+  },
+  "dependencies": {
+    "@whitebird/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@pandacss/dev": "^0.14.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "glob": "^10.3.4",
+    "nuxt": "^3.7.1",
+    "nuxt-typed-router": "^3.3.1"
+  }
+}

apps/alakazam/panda.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from '@pandacss/dev'
+import { whitebirdPreset } from '@whitebird/ui/panda-preset'
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
+
+  // Files to exclude
+  exclude: [],
+
+  presets: [whitebirdPreset],
+
+  // The output directory for your css system
+  outdir: './src/styled-system',
+
+  // Generate JSX components
+  jsxFramework: 'vue',
+})

apps/alakazam/src/assets/css/global.css

@@ -0,0 +1,4 @@
+@import '@whitebird/ui/css';
+@import '@whitebird/ui/css/fonts';
+
+@layer reset, base, tokens, recipes, utilities;

apps/alakazam/src/features/welcome/components/welcome.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { data } = await useAsyncData(async () => 3)
+</script>
+
+<template>
+  <div :class="css({ fontSize: 'sm', fontWeight: 'bolder' })">
+    Hello 🐼! {{ data }}
+  </div>
+  <Box
+    margin="1"
+    bg="primary"
+    text-align="center"
+    font-size="md"
+  >
+    Bonjour 🐼!
+  </Box>
+</template>

apps/alakazam/src/features/welcome/pages/welcome.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import Button from "@whitebird/ui/vue/button"
+</script>
+
+<template>
+  <div
+    :class="css({
+      bg: 'appBackground',
+      color: 'highContrastForeground',
+      height: '100dvh',
+      width: '100dvw',
+    })"
+  >
+    test
+    <Welcome />
+    <NuxtLink :to="{ name: 'welcome-page' }">
+      TEST 43
+    </NuxtLink>
+    <Button
+      text="THIS IS A BUTTON"
+      variant="secondary"
+      icon-name="square"
+      @click="() => console.log('BUTTON CLICKED')"
+    />
+  </div>
+</template>

apps/alakazam/src/features/welcome/routes.ts

@@ -0,0 +1,9 @@
+import { defineNuxtRoutes } from "~/shared/utils/define-nuxt-routes";
+
+export default defineNuxtRoutes(__dirname, [
+  {
+    name: 'welcome-page',
+    path: '/',
+    file: './pages/welcome.vue',
+  },
+])

apps/alakazam/src/modules/panda.ts

@@ -0,0 +1,25 @@
+import {
+  addComponent, createResolver,
+  defineNuxtModule, resolveFiles,
+} from '@nuxt/kit'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtModule({
+  async setup() {
+    const componentsPath = resolve(__dirname, '../styled-system/jsx')
+
+    const componentFiles = await resolveFiles(__dirname, `${componentsPath}/*.mjs`)
+
+    for (const file of componentFiles) {
+      const componentName = file.split('/').pop()?.replace(/\.mjs$/, '')
+      const exportedComponentName = await import(/* @vite-ignore */ file).then(m => Object.keys(m)[0])
+
+      addComponent({
+        name: exportedComponentName,
+        export: exportedComponentName,
+        filePath: resolve(`${componentsPath}/${componentName}.mjs`),
+      })
+    }
+  },
+})

apps/alakazam/src/modules/register-features.ts

@@ -0,0 +1,37 @@
+import {
+  addComponentsDir, addImportsDir, defineNuxtModule, extendPages,
+  createResolver, loadNuxtConfig, resolveFiles,
+} from '@nuxt/kit'
+import type { NuxtPage } from '@nuxt/schema'
+import jiti from 'jiti'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtModule({
+  async setup() {
+    const getRoutes = jiti(__filename, {
+      alias: await loadNuxtConfig({}).then(c => c.alias),
+    })
+
+    const featurePaths = await resolveFiles(__dirname, '../features/**/routes.ts')
+
+    for (const file of featurePaths) {
+      const routes = getRoutes(file).default
+      defineNuxtFeature(resolve(file, '..'), routes)
+    }
+  },
+})
+
+function defineNuxtFeature(dirname: string, routes: NuxtPage[]) {
+  const { resolve } = createResolver(dirname)
+
+  addComponentsDir({
+    path: resolve('components'),
+  })
+
+  addImportsDir(resolve('./composables'))
+
+  extendPages((pages) => {
+    pages.push(...routes)
+  })
+}

apps/alakazam/src/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

apps/alakazam/src/shared/utils/define-nuxt-routes.ts

@@ -0,0 +1,16 @@
+import { createResolver } from '@nuxt/kit'
+
+import type { NuxtPage } from 'nuxt/schema'
+
+export const defineNuxtRoutes = (dirname: string, routes: {
+  name: string,
+  path: `/${string}`,
+  file: `./pages/${string}.vue`,
+}[]): NuxtPage[] => {
+  const { resolve } = createResolver(dirname)
+
+  return routes.map(route => ({
+    ...route,
+    file: resolve(dirname, route.file),
+  }))
+}

apps/alakazam/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}