Move files in preparation for monorepo migration

libs/omorphia/docs/.vitepress/config.js

@@ -0,0 +1,125 @@
+import { resolve, basename } from 'path'
+import svgLoader from 'vite-svg-loader'
+import eslintPlugin from 'vite-plugin-eslint'
+import { icuMessages } from '@vintl/unplugin/vite'
+import virtual from '@rollup/plugin-virtual'
+import { globSync } from 'glob'
+
+/** @type {import('vitepress').SiteConfig} */
+export default {
+  title: 'Omorphia',
+  description: 'A components library used for Modrinth.',
+  head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
+  themeConfig: {
+    logo: { src: '/favicon.svg', width: 24, height: 24 },
+    socialLinks: [{ icon: 'github', link: 'https://github.com/modrinth/omorphia' }],
+    search: {
+      provider: 'local',
+    },
+    sidebar: [
+      {
+        items: [
+          { text: 'Introduction', link: '/' },
+          { text: 'Setup', link: '/setup' },
+        ],
+      },
+      {
+        text: 'Components',
+        items: [
+          { text: 'Avatar', link: '/components/avatar' },
+          { text: 'Badge', link: '/components/badge' },
+          { text: 'Button', link: '/components/button' },
+          { text: 'Card', link: '/components/card' },
+          { text: 'Checkbox', link: '/components/checkbox' },
+          { text: 'Chips', link: '/components/chips' },
+          { text: 'File Input', link: '/components/file-input' },
+          { text: 'Drop Area', link: '/components/drop-area' },
+          { text: 'Icons', link: '/components/icons' },
+          { text: 'Pagination', link: '/components/pagination' },
+          { text: 'Modal', link: '/components/modal' },
+          { text: 'Dropdown Select', link: '/components/dropdown-select' },
+          { text: 'Popout Menu', link: '/components/popout-menu' },
+          { text: 'Overflow Menu', link: '/components/overflow-menu' },
+          { text: 'Project Card', link: '/components/project-card' },
+          { text: 'Environment Indicator', link: '/components/environment-indicator' },
+          { text: 'Categories', link: '/components/categories' },
+          { text: 'Animated Logo', link: '/components/animated-logo' },
+          { text: 'Text Logo', link: '/components/text-logo' },
+          { text: 'Slider', link: '/components/slider' },
+          { text: 'Text Inputs', link: '/components/text-inputs' },
+          { text: 'Number Inputs', link: '/components/number-inputs' },
+          { text: 'Search Filter', link: '/components/search-filter' },
+          { text: 'Toggle', link: '/components/toggle' },
+          { text: 'Promotion', link: '/components/promotion' },
+          { text: 'Markdown', link: '/components/markdown' },
+          { text: 'Markdown Editor', link: '/components/markdown-editor' },
+          { text: 'Copy Code', link: '/components/copy-code' },
+          { text: 'Notifications', link: '/components/notifications' },
+          { text: 'Share Modal', link: '/components/share-modal' },
+          { text: 'Analytics', link: '/components/analytics' },
+          { text: 'Search dropdown', link: '/components/search-dropdown' },
+        ],
+      },
+    ],
+    footer: {
+      message:
+        'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">AGPLv3 License</a>.',
+      copyright: 'Copyright © 2023-present <a href="https://modrinth.com">Rinth, Inc.</a>',
+    },
+  },
+  vite: {
+    plugins: [
+      svgLoader({
+        svgoConfig: {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                },
+              },
+            },
+          ],
+        },
+      }),
+      eslintPlugin(),
+      icuMessages({
+        filter: (id) => id.endsWith('.json?messages'),
+        pluginsWrapping: true,
+      }),
+      virtual({
+        '@modrinth/omorphia-dev/locales/index.js': (() => {
+          const localeDirs = globSync('../../locales/*', { cwd: __dirname, absolute: true })
+          let output = 'export const localeDefinitions = Object.create(null);\n'
+          for (const localeDir of localeDirs) {
+            const tag = basename(localeDir)
+            output += `localeDefinitions[${JSON.stringify(tag)}] = {\n`
+            output += '\tasync importFunction() {\n'
+            output += `\t\tconst messages = Object.create(null);\n`
+            for (const filePath of globSync('*', { cwd: localeDir, absolute: true })) {
+              const fileName = basename(filePath)
+              if (fileName === 'index.json') {
+                output += `\t\tObject.assign(messages, await import(${JSON.stringify(
+                  `${filePath}?messages`
+                )}).then((mod) => mod['default']));\n`
+              }
+            }
+            output += '\t\treturn { messages }\n'
+            output += '\t},\n'
+            output += '}\n'
+          }
+          return output
+        })(),
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, '../../lib'),
+        omorphia: resolve(__dirname, '../../lib'),
+        '@formatjs/icu-messageformat-parser': '@formatjs/icu-messageformat-parser/lib/no-parser',
+      },
+      dedupe: ['vue'],
+    },
+  },
+}

libs/omorphia/docs/.vitepress/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+declare module '@modrinth/omorphia-dev/locales/index.js' {
+  interface LocaleExport {
+    messages: Record<string, any[]>
+  }
+
+  interface LocaleDefinition {
+    importFunction(): Promise<LocaleExport>
+  }
+
+  const localeDefinitions: Partial<Record<string, LocaleDefinition>>
+
+  export { localeDefinitions }
+}

libs/omorphia/docs/.vitepress/theme/DemoContainer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="demo"><slot /></div>
+</template>
+
+<style lang="scss" scoped>
+.demo {
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-button-bg);
+  display: flex;
+  padding: var(--gap-md);
+  gap: var(--gap-md);
+  align-items: center;
+  flex-wrap: wrap;
+  border-radius: var(--radius-lg);
+}
+</style>

libs/omorphia/docs/.vitepress/theme/LanguageSwitcher.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useVIntl } from '@vintl/vintl'
+import { DropdownSelect } from 'omorphia'
+import { computed, ref } from 'vue'
+
+const { $locales, $config, changeLocale } = useVIntl()
+
+const getLocaleDisplayName = (() => {
+  const cache = new Map<string, Intl.DisplayNames>()
+
+  return function getLocaleDisplayName(locale: string) {
+    let displayNames = cache.get(locale)
+    if (displayNames == null) {
+      displayNames = new Intl.DisplayNames(locale, {
+        type: 'language',
+        languageDisplay: 'standard',
+      })
+      cache.set(locale, displayNames)
+    }
+    return displayNames.of(locale)
+  }
+})()
+
+const isChanging = ref(false)
+
+const currentLocale = computed({
+  get() {
+    return $config.locale
+  },
+  async set(value) {
+    if (isChanging.value) return
+
+    try {
+      isChanging.value = true
+      await changeLocale(value)
+    } finally {
+      isChanging.value = false
+    }
+  },
+})
+</script>
+<template>
+  <div class="LanguageSwitcher">
+    <h2 class="title">Playground language</h2>
+
+    <DropdownSelect
+      class="locale-dropdown"
+      name="locale"
+      v-model="currentLocale"
+      placeholder="Change language"
+      :disabled="isChanging"
+      :options="Array.from($locales).map(([{ tag }]) => tag)"
+      :display-name="(locale: string) => getLocaleDisplayName(locale)"
+    />
+  </div>
+</template>
+<style scoped>
+.LanguageSwitcher {
+  padding-block: 18px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.LanguageSwitcher .title {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.LanguageSwitcher .locale-dropdown {
+  width: 200px;
+  font-size: 14px;
+}
+</style>

libs/omorphia/docs/.vitepress/theme/compat.scss

@@ -0,0 +1,24 @@
+.VPLink,
+.title,
+.pager-link,
+.link,
+.header-anchor {
+  color: inherit;
+  transition: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:active:not(&:disabled) {
+    scale: 1;
+  }
+}
+
+.content-container {
+  max-width: 100% !important;
+}
+
+body {
+  background-color: var(--vp-c-bg);
+}

libs/omorphia/docs/.vitepress/theme/index.js

@@ -0,0 +1,50 @@
+import { localeDefinitions } from '@modrinth/omorphia-dev/locales/index.js'
+import { createPlugin } from '@vintl/vintl/plugin'
+import { plugin as Omorphia } from 'omorphia'
+import DefaultTheme from 'vitepress/theme'
+import { createVNode } from 'vue'
+import DemoContainer from './DemoContainer.vue'
+import LanguageSwitcher from './LanguageSwitcher.vue'
+
+import './compat.scss'
+import './style.scss'
+
+/** @type {import('vitepress').Theme} */
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    ctx.app.use(Omorphia)
+    ctx.app.component('DemoContainer', DemoContainer)
+    ctx.app.use(
+      createPlugin({
+        controllerOpts: {
+          locales: Object.keys(localeDefinitions).map((tag) => ({ tag })),
+          listen: {
+            async localeload(event) {
+              const locale = event.locale.tag
+              if (!Object.hasOwn(localeDefinitions, locale)) {
+                throw new Error(`Unknown locale: ${locale}`)
+              }
+
+              try {
+                const { messages } = await localeDefinitions[locale].importFunction()
+                event.addMessages(messages)
+              } catch (err) {
+                console.error(`Failed to load locale: ${locale}`, err)
+              }
+            },
+          },
+          defaultMessageOrder: ['locale', 'descriptor'],
+        },
+        globalMixin: false,
+      })
+    )
+  },
+  Layout() {
+    return createVNode(DefaultTheme.Layout, null, {
+      'sidebar-nav-before'() {
+        return createVNode(LanguageSwitcher)
+      },
+    })
+  },
+}

libs/omorphia/docs/.vitepress/theme/style.scss

@@ -0,0 +1,130 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-green-1);
+  --vp-c-brand-2: var(--vp-c-green-2);
+  --vp-c-brand-3: var(--vp-c-green-3);
+  --vp-c-brand-soft: var(--vp-c-green-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}