versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ♻️ Begin refactoring code to use new custom UI library

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-27 03:03:03 -10:00
parent 2e1cc99de4
commit 13faf840dd
No known key found for this signature in database
13 changed files with 196 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/avatars/avatar.vue
View file

@ -12,6 +12,7 @@ import Skeleton from "../skeleton/Skeleton.vue";
defineOptions({
inheritAttrs: false,
});
const props = defineProps<{
src?: string;
alt?: string;

7
components/buttons/button-dropdown.vue
View file

@ -1,13 +1,14 @@
<template>
<ButtonBase class="enabled:hover:bg-white/20 !rounded-sm !text-left flex flex-row gap-x-3 !ring-0 !p-4 sm:!p-2">
<iconify-icon :icon="icon" width="none" class="text-gray-200 size-5" aria-hidden="true" />
<ButtonBase class="enabled:hover:bg-white/20 !rounded-sm !ring-0 !p-4 sm:!p-2 !justify-start">
<Icon :icon="icon" />
<slot />
</ButtonBase>
</template>
<script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue";
import ButtonBase from "./button-base.vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
import Icon from "~/packages/ui/components/icons/icon.vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}

5
components/buttons/button-mobile-navbar.vue
View file

@ -1,13 +1,12 @@
<template>
<ButtonBase
class="hover:bg-white/5 text-xs max-w-full w-full gap-1 h-full !px-0 flex flex-col items-center justify-center">
class="hover:bg-white/5 text-xs max-w-full w-full h-full !p-0">
<iconify-icon :icon="icon" class="size-6" width="none" />
<span class="text-xs hidden md:inline">{{ text }}</span>
</ButtonBase>
</template>
<script lang="ts" setup>
import ButtonBase from "./button-base.vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
defineProps<{
icon: string;

5
components/buttons/button-primary.vue
View file

@ -1,5 +1,5 @@
<template>
<ButtonBase :loading="loading"
<ButtonBase
class="[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.primary.400)] active:[--btn-icon:theme(colors.primary.300)] hover:[--btn-icon:theme(colors.primary.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
v-bind="$props">
<slot />
@ -8,7 +8,8 @@
<script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue";
import ButtonBase from "./button-base.vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
// import ButtonBase from "./button-base.vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}

54
components/sidebars/account-picker.vue
View file

@ -20,10 +20,9 @@
</span>
</div>
</div>
<ButtonBase v-else class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10
overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:login" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Sign In</span>
<ButtonBase theme="secondary" v-else class="w-full !justify-start">
<Icon icon="tabler:login" class="!size-6" />
<span class="shrink-0 line-clamp-1">Sign In</span>
</ButtonBase>
</slot>
</template>
@ -62,44 +61,24 @@
</Menu.Item>
<Menu.Item value="" v-if="currentIdentity">
<NuxtLink href="/settings" class="w-full">
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
<div
class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
<iconify-icon icon="tabler:adjustments" class="size-6 text-gray-200" width="none" />
</div>
<div
class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
Settings
</div>
</div>
<ButtonBase theme="secondary" class="w-full !justify-start">
<Icon icon="tabler:adjustments" class="!size-6" />
<span class="shrink-0 line-clamp-1">Settings</span>
</ButtonBase>
</NuxtLink>
</Menu.Item>
<Menu.Item value="">
<button @click="$emit('signIn')" class="w-full">
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
<div
class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
<iconify-icon icon="tabler:user-plus" class="size-6 text-gray-200" width="none" />
</div>
<div
class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
Add new account
</div>
</div>
</button>
<ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start">
<Icon icon="tabler:user-plus" class="!size-6" />
<span class="shrink-0 line-clamp-1">Add new account</span>
</ButtonBase>
</Menu.Item>
<Menu.Item value="" v-if="!currentIdentity">
<NuxtLink href="/register" class="w-full">
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
<div
class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
<iconify-icon icon="tabler:certificate" class="size-6 text-gray-200" width="none" />
</div>
<div
class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
Create new account
</div>
</div>
<ButtonBase theme="secondary" class="w-full !justify-start">
<Icon icon="tabler:certificate" class="!size-6" />
<span class="shrink-0 line-clamp-1">Create new account</span>
</ButtonBase>
</NuxtLink>
</Menu.Item>
</div>
@ -109,8 +88,9 @@
<script lang="ts" setup>
import { Menu } from "@ark-ui/vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
import Icon from "~/packages/ui/components/icons/icon.vue";
import Avatar from "../avatars/avatar.vue";
import ButtonBase from "../buttons/button-base.vue";
import AdaptiveDropdown from "../dropdowns/AdaptiveDropdown.vue";
const identities = useIdentities();

52
components/sidebars/navigation.vue
View file

@ -1,6 +1,6 @@
<template>
<aside
class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group ring-1 ring-dark-500"
class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
aria-label="Navigation" role="complementary">
<NuxtLink href="/">
<img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
@ -12,10 +12,9 @@
Timelines</h3>
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
<ButtonBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
<ButtonBase theme="secondary" class="w-full !justify-start">
<Icon :icon="timeline.icon" class="!size-6" />
<span class="shrink-0 line-clamp-1">{{ timeline.name }}</span>
</ButtonBase>
</NuxtLink>
@ -28,43 +27,32 @@
<AccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
@sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
<NuxtLink href="/register" v-if="!identity">
<ButtonBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Register</span>
<ButtonBase theme="secondary" class="w-full !justify-start">
<Icon icon="tabler:certificate" class="!size-6" />
<span class="shrink-0 line-clamp-1">Register</span>
</ButtonBase>
</NuxtLink>
<NuxtLink href="/settings" v-if="identity">
<button @click="$emit('signIn')" class="w-full overflow-hidden">
<div class="rounded text-left flex flex-row items-center gap-x-2 hover:scale-[95%]">
<div
class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
<iconify-icon icon="tabler:adjustments" class="size-6 text-gray-200" width="none" />
</div>
<span
class="line-clamp-1 font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
Settings
</span>
</div>
</button>
<ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start">
<Icon icon="tabler:adjustments" class="!size-6" />
<span class="shrink-0 line-clamp-1">Settings</span>
</ButtonBase>
</NuxtLink>
<h3 v-if="identity"
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Posts</h3>
<ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Compose</span>
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
<ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient" class="!justify-start">
<Icon icon="tabler:writing" class="!size-6" />
<span class="shrink-0 line-clamp-1">Compose</span>
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row ml-auto">
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
aria-hidden="true" />
</kbd>
</ButtonBase>
<ButtonBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-primary-600 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Update</span>
<ButtonBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker" theme="primary" class="w-full !justify-start">
<Icon icon="tabler:refresh" class="!size-6" />
<span class="shrink-0 line-clamp-1">Update</span>
</ButtonBase>
</div>
@ -107,9 +95,11 @@
<script lang="ts" setup>
import { Menu } from "@ark-ui/vue";
import ButtonBase from "../buttons/button-base.vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
import Icon from "~/packages/ui/components/icons/icon.vue";
import ButtonDropdown from "../buttons/button-dropdown.vue";
import ButtonMobileNavbar from "../buttons/button-mobile-navbar.vue";
import Button from "../composer/button.vue";
import AdaptiveDropdown from "../dropdowns/AdaptiveDropdown.vue";
import AccountPicker from "./account-picker.vue";
const { $pwa } = useNuxtApp();

2
components/sidebars/settings-sidebar.vue
View file

@ -16,8 +16,8 @@
<script lang="ts" setup>
import { Tabs } from "@ark-ui/vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
import { SettingPages } from "~/settings";
import ButtonBase from "../buttons/button-base.vue";
const tab = ref<SettingPages>(
(window.location.hash.slice(1) as SettingPages) || SettingPages.Account,

39
packages/ui/components/buttons/button.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<button v-bind="$attrs" type="button" :disabled="loading"
:class="['relative isolate text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] overflow-hidden before:shadow before:hidden after:absolute after:-z-10 after:-inset-px after:rounded-md before:disabled:shadow-none after:disabled:shadow-none text-white cursor-default rounded-md duration-200 hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed shadow-sm bg-[--btn-bg] before:bg-[--btn-bg] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 inline-flex items-center justify-center gap-x-3', theme && themes[theme]]">
<div data-spinner v-if="loading" class="absolute inset-0 bg-[--btn-bg] flex items-center justify-center">
<iconify-icon icon="tabler:loader-2" height="none" class="animate-spin size-5" />
</div>
<slot />
</button>
</template>
<script lang="ts" setup>
import "iconify-icon";
import type { ButtonHTMLAttributes } from "vue";
const themes = {
primary:
"[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/30%)] [--btn-icon:theme(colors.primary.200)] active:[--btn-icon:theme(colors.primary.100)] hover:[--btn-icon:theme(colors.primary.100)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5",
secondary:
"[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:theme(colors.zinc.800)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5",
// Gradient: bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400
gradient:
"bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.gray.100)] active:[--btn-icon:theme(colors.gray.50)] hover:[--btn-icon:theme(colors.gray.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
};
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
defineProps<
Props & {
loading?: boolean;
theme?: keyof typeof themes;
}
>();
defineOptions({
inheritAttrs: false,
});
</script>
<style></style>

11
packages/ui/components/icons/icon.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<iconify-icon data-slot="icon" :icon="icon" width="none" />
</template>
<script lang="ts" setup>
import "iconify-icon";
const props = defineProps<{
icon: string;
}>();
</script>

33
packages/ui/demo/buttons-demo.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<div class="flex flex-col max-w-72 mx-auto gap-4">
<Button>Click me</Button>
<Button theme="primary">Click me</Button>
<Button theme="secondary">Click me</Button>
<Button theme="gradient">Click me</Button>
<Button loading>Click me</Button>
<Button theme="primary" loading>Click me</Button>
<Button theme="secondary" loading>Click me</Button>
<Button theme="gradient" loading>Click me</Button>
<Button><Icon icon="tabler:certificate" />Gamer</Button>
<Button theme="primary"><Icon icon="tabler:certificate" />Gamer</Button>
<Button theme="secondary"><Icon icon="tabler:certificate" />Gamer</Button>
<Button theme="gradient"><Icon icon="tabler:certificate" />Gamer</Button>
<Button><Icon icon="tabler:certificate" /></Button>
<Button theme="primary"><Icon icon="tabler:certificate" /></Button>
<Button theme="secondary"><Icon icon="tabler:certificate" /></Button>
<Button theme="gradient"><Icon icon="tabler:certificate" /></Button>
<Button>Gamer<Icon icon="tabler:certificate" /></Button>
<Button theme="primary">Gamer<Icon icon="tabler:certificate" /></Button>
<Button theme="secondary">Gamer<Icon icon="tabler:certificate" /></Button>
<Button theme="gradient">Gamer<Icon icon="tabler:certificate" /></Button>
</div>
</template>
<script setup lang="ts">
import Button from "../components/buttons/button.vue";
import Icon from "../components/icons/icon.vue";
</script>

52
packages/ui/package.json Normal file
View file

@ -0,0 +1,52 @@
{
"name": "@cpluspatch/ui",
"displayName": "CPlusPatch UI",
"version": "0.0.0",
"author": {
"email": "jesse.wierzbinski@cpluspatch.com",
"name": "Jesse Wierzbinski (CPlusPatch)",
"url": "https://cpluspatch.com"
},
"readme": "README.md",
"repository": {
"type": "git",
"url": "https://github.com/lysand-org/lysand-fe.git",
"directory": "packages/ui"
},
"bugs": {
"url": "https://github.com/lysand-org/lysand-fe/issues"
},
"license": "MIT",
"contributors": [
{
"email": "jesse.wierzbinski@cpluspatch.com",
"name": "Jesse Wierzbinski (CPlusPatch)",
"url": "https://cpluspatch.com"
}
],
"maintainers": [
{
"email": "jesse.wierzbinski@cpluspatch.com",
"name": "Jesse Wierzbinski (CPlusPatch)",
"url": "https://cpluspatch.com"
}
],
"description": "UI library for my apps",
"categories": ["Other"],
"type": "module",
"engines": {
"bun": ">=1.1.17"
},
"exports": {
".": {
"import": "./index.ts",
"default": "./index.ts"
},
"./types": {
"import": "./types.ts",
"default": "./types.ts"
}
},
"keywords": ["typescript", "vue", "tailwindcss"],
"packageManager": "bun@1.1.17"
}

11
pages/_test/demo.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<ButtonsDemo />
</template>
<script setup lang="ts">
import ButtonsDemo from "~/packages/ui/demo/buttons-demo.vue";
definePageMeta({
layout: "app",
});
</script>

2
tailwind.config.ts
View file

@ -42,5 +42,5 @@ export default (<Config>{
},
},
plugins: [forms, typography],
content: [],
content: ["packages/**/*.{vue,js,ts}"],
});