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({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}); });
const props = defineProps<{ const props = defineProps<{
src?: string; src?: string;
alt?: string; alt?: string;

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

@ -1,13 +1,14 @@
<template> <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"> <ButtonBase class="enabled:hover:bg-white/20 !rounded-sm !ring-0 !p-4 sm:!p-2 !justify-start">
<iconify-icon :icon="icon" width="none" class="text-gray-200 size-5" aria-hidden="true" /> <Icon :icon="icon" />
<slot /> <slot />
</ButtonBase> </ButtonBase>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue"; 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 {} interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}

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

@ -1,13 +1,12 @@
<template> <template>
<ButtonBase <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" /> <iconify-icon :icon="icon" class="size-6" width="none" />
<span class="text-xs hidden md:inline">{{ text }}</span>
</ButtonBase> </ButtonBase>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ButtonBase from "./button-base.vue"; import ButtonBase from "~/packages/ui/components/buttons/button.vue";
defineProps<{ defineProps<{
icon: string; icon: string;

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

@ -1,5 +1,5 @@
<template> <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" 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"> v-bind="$props">
<slot /> <slot />
@ -8,7 +8,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue"; 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 {} interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}

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

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

52
components/sidebars/navigation.vue
View file

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

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

@ -16,8 +16,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Tabs } from "@ark-ui/vue"; import { Tabs } from "@ark-ui/vue";
import ButtonBase from "~/packages/ui/components/buttons/button.vue";
import { SettingPages } from "~/settings"; import { SettingPages } from "~/settings";
import ButtonBase from "../buttons/button-base.vue";
const tab = ref<SettingPages>( const tab = ref<SettingPages>(
(window.location.hash.slice(1) as SettingPages) || SettingPages.Account, (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], plugins: [forms, typography],
content: [], content: ["packages/**/*.{vue,js,ts}"],
}); });