Setup components (#8)

* Setup components as monorepo

* Setup components boilerplate

* Add missing config files

* Install website-components into website

* Remove srcDir

components/histoire.config.ts

@@ -0,0 +1,7 @@
+import { HstVue } from '@histoire/plugin-vue';
+import { defineConfig } from 'histoire';
+
+export default defineConfig({
+	plugins: [HstVue()],
+	setupFile: './histoire.setup.ts',
+});

components/histoire.setup.ts

@@ -0,0 +1,14 @@
+import { defineSetupVue3 } from '@histoire/plugin-vue';
+import { createI18n } from 'vue-i18n';
+import { createMemoryHistory, createRouter } from 'vue-router';
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+	app.use(
+		createRouter({
+			history: createMemoryHistory(),
+			routes: [{ path: '/:catchAll(.*)', name: 'all', component: { render: () => null } }],
+		})
+	);
+
+	app.use(createI18n({}));
+});

components/package.json

@@ -0,0 +1,53 @@
+{
+	"name": "@directus/website-components",
+	"version": "0.0.1",
+	"description": "Self-Referential Responsive Components",
+	"homepage": "https://directus.io",
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/directus/website.git",
+		"directory": "components"
+	},
+	"license": "MIT",
+	"author": "Rijk van Zanten <[email protected]>",
+	"type": "module",
+	"exports": {
+		".": "./dist/index.js",
+		"./package.json": "./package.json"
+	},
+	"main": "dist/index.js",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite",
+		"test": "vitest --watch=false",
+		"story:dev": "histoire dev",
+		"story:build": "histoire build",
+		"story:preview": "histoire preview",
+		"typecheck": "vue-tsc --noEmit"
+	},
+	"devDependencies": {
+		"@directus/tsconfig": "0.0.7",
+		"@histoire/plugin-vue": "0.16.1",
+		"@histoire/shared": "0.16.1",
+		"@rollup/plugin-node-resolve": "15.0.2",
+		"@vitejs/plugin-vue": "4.2.3",
+		"@vitest/coverage-c8": "0.31.1",
+		"histoire": "0.16.1",
+		"rollup-plugin-node-externals": "6.1.1",
+		"typescript": "5.0.4",
+		"vite": "4.3.7",
+		"vite-plugin-dts": "2.3.0",
+		"vitest": "0.31.1",
+		"vue-tsc": "1.8.0"
+	},
+	"dependencies": {
+		"pinia": "2.1.1",
+		"vue": "3.3.4",
+		"vue-i18n": "9.2.2",
+		"vue-router": "4.2.0"
+	}
+}

components/src/base-grid/base-grid.story.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import BaseGrid from './base-grid.vue';
+</script>
+
+<template>
+	<Story>
+		<BaseGrid />
+	</Story>
+</template>

components/src/base-grid/base-grid.vue

@@ -0,0 +1,3 @@
+<template>
+	<div>Grid!</div>
+</template>

components/src/index.ts

@@ -0,0 +1 @@
+export { default as BaseGrid } from './base-grid/base-grid.vue';

components/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<object, object, any>;
+	export default component;
+}

components/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "@directus/tsconfig/node18-esm.json",
+	"compilerOptions": {
+		"outDir": "dist"
+	},
+	"include": ["src"]
+}

components/vite.config.ts

@@ -0,0 +1,16 @@
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'node:path';
+import { nodeExternals } from 'rollup-plugin-node-externals';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+	plugins: [{ ...nodeExternals(), enforce: 'pre' }, vue(), dts()],
+	build: {
+		lib: {
+			entry: resolve(__dirname, 'src/index.ts'),
+			fileName: 'index',
+			formats: ['es'],
+		},
+	},
+});

package.json

@@ -1,29 +1,19 @@
 {
-	"name": "@directus/website",
+	"name": "website-monorepo",
 	"private": true,
 	"scripts": {
-		"build": "nuxt build",
-		"dev": "nuxt dev",
-		"generate": "nuxt generate",
-		"preview": "nuxt preview",
-		"postinstall": "nuxt prepare",
 		"lint": "eslint .",
-		"typecheck": "nuxt typecheck",
+		"typecheck": "pnpm run --recursive typecheck",
 		"format": "prettier --write \"**/*.{md,y?(a)ml,json,vue}\""
 	},
 	"devDependencies": {
-		"@nuxt/devtools": "latest",
-		"@types/node": "20.2.5",
 		"@typescript-eslint/eslint-plugin": "5.59.9",
 		"@typescript-eslint/parser": "5.59.9",
 		"eslint": "8.42.0",
 		"eslint-config-prettier": "8.8.0",
 		"eslint-plugin-prettier": "4.2.1",
 		"eslint-plugin-vue": "9.14.1",
-		"nuxt": "3.5.2",
-		"prettier": "2.8.8",
-		"typescript": "5.1.3",
-		"vue-tsc": "1.8.0"
+		"prettier": "2.8.8"
 	},
 	"packageManager": "[email protected]",
 	"engines": {