@soubiran/ui 0.3.1 → 0.5.0

package/dist/components/Container.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import { computed } from 'vue'
+
+const container = tv({
+  slots: {
+    base: 'px-4 sm:px-6 lg:px-8',
+    inner: 'w-full max-w-7xl mx-auto',
+  },
+})
+
+export interface ContainerProps {
+  class?: any
+  ui?: Partial<typeof container.slots>
+}
+export interface ContainerEmits {}
+export interface ContainerSlots {
+  default: (props: any) => any
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<ContainerProps>()
+defineEmits<ContainerEmits>()
+defineSlots<ContainerSlots>()
+
+const ui = computed(() => container())
+</script>
+
+<template>
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <div :class="ui.inner({ class: props.ui?.inner })">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/components/Feedback.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import UButton from '@nuxt/ui/components/Button.vue'
+import UPopover from '@nuxt/ui/components/Popover.vue'
+import { tv } from 'tailwind-variants'
+import { computed, ref } from 'vue'
+import thumbsUp from '~icons/ph/thumbs-up'
+import useUmami from '../composables/useUmami'
+import FeedbackCard from './FeedbackCard.vue'
+
+const feedback = tv({
+  slots: {
+    base: 'px-0 py-1 text-dimmed text-sm',
+  },
+})
+
+export interface FeedbackProps {
+  id: string
+  class?: any
+  ui?: Partial<typeof feedback.slots>
+}
+export interface FeedbackEmits {}
+export interface FeedbackSlots {}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<FeedbackProps>()
+defineEmits<FeedbackEmits>()
+defineSlots<FeedbackSlots>()
+
+const { track } = useUmami()
+function onClick() {
+  track('feedback_click')
+}
+
+const content = ref('')
+const rating = ref('')
+
+function onSuccess() {
+  content.value = ''
+  rating.value = ''
+}
+
+const ui = computed(() => feedback())
+</script>
+
+<template>
+  <UPopover :ui="{ content: 'ring-0 data-[state=open]:animate-[scale-up_100ms_ease-out]' }">
+    <UButton
+      variant="link"
+      color="neutral"
+      label="Give feedback"
+      size="sm"
+      :icon="thumbsUp"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      @click="onClick"
+    />
+
+    <template #content>
+      <FeedbackCard
+        :id="props.id"
+        v-model:rating="rating"
+        v-model:content="content"
+        @success="onSuccess"
+      />
+    </template>
+  </UPopover>
+</template>

package/dist/components/FeedbackCard.vue

@@ -0,0 +1,174 @@
+<script lang="ts">
+import UButton from '@nuxt/ui/components/Button.vue'
+import UCard from '@nuxt/ui/components/Card.vue'
+import UFormField from '@nuxt/ui/components/FormField.vue'
+import UIcon from '@nuxt/ui/components/Icon.vue'
+import UTextarea from '@nuxt/ui/components/Textarea.vue'
+import UTooltip from '@nuxt/ui/components/Tooltip.vue'
+import { useMutation } from '@pinia/colada'
+import { motion } from 'motion-v'
+import { ofetch } from 'ofetch'
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+import { tv } from 'tailwind-variants'
+import { computed, ref } from 'vue'
+import checkCircle from '~icons/ph/check-circle'
+import useUmami from '../composables/useUmami'
+
+const feedbackCard = tv({
+  slots: {
+    base: 'relative w-64',
+    successfullySentOverlay: 'absolute z-10 inset-0 bg-default',
+    successfullySentContent: 'absolute z-20 inset-0 flex flex-col justify-center items-center text-muted text-xs',
+    successfullySentIcon: 'size-5',
+    input: 'w-full',
+    radioGroup: 'flex flex-row gap-2 text-lg',
+    radioGroupItem: 'peer',
+    radioGroupLabel: 'grayscale-100 hover:grayscale-0 peer-data-[state=checked]:grayscale-0',
+  },
+})
+
+export interface FeedbackCardProps {
+  id: string
+  class?: any
+  ui?: Partial<typeof feedbackCard.slots>
+}
+export interface FeedbackCardEmits {
+  success: [void]
+}
+export interface FeedbackCardSlots {}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<FeedbackCardProps>()
+const emits = defineEmits<FeedbackCardEmits>()
+defineSlots<FeedbackCardSlots>()
+
+const content = defineModel<string>('content', { required: true })
+const rating = defineModel<string>('rating', { required: true })
+
+const ratings = [
+  {
+    label: '😭',
+    value: 'Hate it',
+  },
+  {
+    label: '🙁',
+    value: 'Not great',
+  },
+  {
+    label: '🙂',
+    value: 'It\'s ok',
+  },
+  {
+    label: '🤩',
+    value: 'Love it',
+  },
+]
+
+const successfullySent = ref(false)
+
+const { track } = useUmami()
+const { mutate, isLoading, error } = useMutation<
+  void,
+  { rating: string, content: string },
+  { status: number, data: { errors?: { content?: string[], rating?: string[] } } }
+>({
+  mutation: ({ rating, content }) => ofetch(`/api/posts/${props.id}/feedback`, {
+    method: 'POST',
+    body: { rating, content },
+    baseURL: import.meta.env.VITE_API_BASE_URL,
+  }),
+  onSuccess: () => {
+    successfullySent.value = true
+
+    track('feedback_submit')
+
+    // Wait for the animation to finish
+    setTimeout(emits, 200, 'success')
+  },
+})
+
+function sendFeedback() {
+  mutate({ rating: rating.value, content: content.value })
+}
+
+const formattedError = computed<string | undefined>(() => {
+  if (!error.value)
+    return undefined
+
+  if (error.value.data?.errors) {
+    return error.value.data.errors.content?.[0] || error.value.data.errors.rating?.[0]
+  }
+
+  if (error.value.status === 404)
+    return 'Page not found. Cannot send feedback. It\'s us, not you!'
+
+  if (error.value.status === 503)
+    return 'Service is currently unavailable. Please try again later.'
+
+  return 'An unexpected error occurred.'
+})
+
+const ui = computed(() => feedbackCard())
+</script>
+
+<template>
+  <UCard :class="ui.base({ class: [props.ui?.base, props.class] })" :ui="{ body: 'p-2 sm:p-2', footer: 'p-2 sm:p-2 flex items-center justify-between' }">
+    <template v-if="successfullySent">
+      <motion.div
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1, transition: { duration: 0.2 } }"
+        :class="ui.successfullySentOverlay({ class: props.ui?.successfullySentOverlay })"
+      />
+      <div :class="ui.successfullySentContent({ class: props.ui?.successfullySentContent })">
+        <motion.div
+          :initial="{ opacity: 0, transform: 'translateY(4px)' }"
+          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { delay: 0.1, duration: 0.3 } }"
+        >
+          <UIcon :name="checkCircle" :class="ui.successfullySentIcon({ class: props.ui?.successfullySentIcon })" />
+        </motion.div>
+        <motion.p
+          :initial="{ opacity: 0, transform: 'translateY(4px)' }"
+          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { delay: 0.2, duration: 0.3 } }"
+          class="mt-3"
+        >
+          Your feedback has been received.
+        </motion.p>
+        <motion.p
+          :initial="{ opacity: 0, transform: 'translateY(4px)' }"
+          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { delay: 0.3, duration: 0.3 } }"
+          class="mt-1"
+        >
+          Thanks for your help!
+        </motion.p>
+      </div>
+    </template>
+
+    <UFormField :error="formattedError">
+      <UTextarea v-model="content" placeholder="Your feedback..." variant="soft" :class="ui.input({ class: props.ui?.input })" />
+      <template #error="{ error: formFieldError }">
+        <motion.div
+          v-if="formFieldError"
+          :initial="{ height: 0 }"
+          :animate="{ height: 'auto' }"
+          class="text-sm"
+        >
+          {{ formFieldError }}
+        </motion.div>
+      </template>
+    </UFormField>
+    <template #footer>
+      <RadioGroupRoot v-model="rating" :class="ui.radioGroup({ class: props.ui?.radioGroup })">
+        <div v-for="item in ratings" :key="item.value">
+          <RadioGroupItem :id="item.value" :value="item.value" :class="ui.radioGroupItem({ class: props.ui?.radioGroupItem })">
+            <RadioGroupIndicator />
+          </RadioGroupItem>
+          <UTooltip :text="item.value">
+            <label :for="item.value" :class="ui.radioGroupLabel({ class: props.ui?.radioGroupLabel })">{{ item.label }}</label>
+          </UTooltip>
+        </div>
+      </RadioGroupRoot>
+      <UButton size="sm" label="Send" :loading="isLoading" @click="sendFeedback" />
+    </template>
+  </UCard>
+</template>

package/dist/components/Header.vue

@@ -0,0 +1,135 @@
+<script lang="ts">
+import type { FunctionalComponent, SVGAttributes } from 'vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+import USeparator from '@nuxt/ui/components/Separator.vue'
+import UTooltip from '@nuxt/ui/components/Tooltip.vue'
+import { tv } from 'tailwind-variants'
+import { computed } from 'vue'
+import discord from '~icons/simple-icons/discord'
+import github from '~icons/simple-icons/github'
+import linkedin from '~icons/simple-icons/linkedin'
+import twitch from '~icons/simple-icons/twitch'
+import x from '~icons/simple-icons/x'
+import useUmami from '../composables/useUmami'
+import Container from './Container.vue'
+
+const header = tv({
+  slots: {
+    base: 'h-(--ui-header-height) flex flex-row gap-4 items-center justify-end',
+    link: 'p-0 text-dimmed',
+  },
+})
+
+export interface HeaderProps {
+  links: {
+    icon: FunctionalComponent<SVGAttributes>
+    label: string
+    to: string
+  }[]
+  class?: any
+  ui?: Partial<typeof header.slots>
+}
+export interface HeaderEmits {}
+export interface HeaderSlots {}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<HeaderProps>()
+defineEmits<HeaderEmits>()
+defineSlots<HeaderSlots>()
+
+const { track } = useUmami()
+function trackClick(label: string) {
+  track('header_click', { label })
+}
+
+const ui = computed(() => header())
+</script>
+
+<template>
+  <Container :ui="{ inner: 'max-w-5xl' }">
+    <header :class="ui.base({ class: [props.ui?.base, props.class] })">
+      <UTooltip
+        v-for="link of props.links"
+        :key="link.label"
+        :text="link.label"
+      >
+        <UButton
+          variant="link"
+          color="neutral"
+          :to="link.to"
+          :aria-label="link.label"
+          :icon="link.icon"
+          :class="ui.link({ class: props.ui?.link })"
+          @click="trackClick(link.label)"
+        />
+      </UTooltip>
+      <USeparator orientation="vertical" class="h-5" />
+      <UTooltip text="LinkedIn">
+        <UButton
+          href="https://www.linkedin.com/in/esteban25/"
+          target="_blank"
+          variant="link"
+          color="neutral"
+          aria-label="LinkedIn"
+          :icon="linkedin"
+          :class="ui.link({ class: props.ui?.link })"
+          :ui="{ leadingIcon: 'size-4' }"
+          @click="trackClick('LinkedIn')"
+        />
+      </UTooltip>
+      <UTooltip text="X">
+        <UButton
+          href="https://x.com/soubiran_"
+          target="_blank"
+          variant="link"
+          color="neutral"
+          aria-label="X"
+          :icon="x"
+          :class="ui.link({ class: props.ui?.link })"
+          :ui="{ leadingIcon: 'size-4' }"
+          @click="trackClick('X')"
+        />
+      </UTooltip>
+      <UTooltip text="Twitch">
+        <UButton
+          href="https://www.twitch.tv/barbapapazes"
+          target="_blank"
+          variant="link"
+          color="neutral"
+          aria-label="Twitch"
+          :icon="twitch"
+          :class="ui.link({ class: props.ui?.link })"
+          :ui="{ leadingIcon: 'size-4' }"
+          @click="trackClick('Twitch')"
+        />
+      </UTooltip>
+      <UTooltip text="GitHub">
+        <UButton
+          href="https://github.com/barbapapazes"
+          target="_blank"
+          variant="link"
+          color="neutral"
+          aria-label="GitHub"
+          :icon="github"
+          :class="ui.link({ class: props.ui?.link })"
+          :ui="{ leadingIcon: 'size-4' }"
+          @click="trackClick('GitHub')"
+        />
+      </UTooltip>
+      <UTooltip text="Discord">
+        <UButton
+          href="https://discord.gg/q2ghCGUuFR"
+          target="_blank"
+          variant="link"
+          color="neutral"
+          aria-label="Discord"
+          :icon="discord"
+          :class="ui.link({ class: props.ui?.link })"
+          :ui="{ leadingIcon: 'size-4' }"
+          @click="trackClick('Discord')"
+        />
+      </UTooltip>
+    </header>
+  </Container>
+</template>

package/dist/components/Page.vue

@@ -0,0 +1,63 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import { computed } from 'vue'
+import Container from './Container.vue'
+
+const page = tv({
+  slots: {
+    base: 'py-12',
+    header: 'max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px]',
+    headerInner: 'xl:col-start-2',
+    content: 'mt-6 max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px] xl:mx-auto',
+    contentInner: 'xl:col-start-2',
+    right: 'hidden xl:block xl:col-start-3 xl:pl-8 xl:h-full',
+    rightInner: 'sticky top-4',
+  },
+})
+
+export interface PageProps {
+  class?: any
+  ui?: Partial<typeof page.slots>
+}
+export interface PageEmits {}
+export interface PageSlots {
+  default: (props: any) => any
+  header: (props: any) => any
+  right: (props: any) => any
+  bottom: (props: any) => any
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<PageProps>()
+defineEmits<PageEmits>()
+defineSlots<PageSlots>()
+
+const ui = computed(() => page())
+</script>
+
+<template>
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <Container>
+      <div :class="ui.header({ class: props.ui?.header })">
+        <div :class="ui.headerInner({ class: props.ui?.headerInner })">
+          <slot name="header" />
+        </div>
+      </div>
+
+      <div :class="ui.content({ class: props.ui?.content })">
+        <div :class="ui.contentInner({ class: props.ui?.contentInner })">
+          <slot />
+        </div>
+
+        <div :class="ui.right({ class: props.ui?.right })">
+          <div :class="ui.rightInner({ class: props.ui?.rightInner })">
+            <slot name="right" />
+          </div>
+        </div>
+      </div>
+    </Container>
+
+    <slot name="bottom" />
+  </div>
+</template>

package/dist/components/PageHeader.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import { computed } from 'vue'
+import PageTitle from './PageTitle.vue'
+
+const pageHeader = tv({
+  slots: {
+    base: '',
+  },
+})
+
+export interface PageHeaderProps {
+  title: string
+  class?: any
+  ui?: Partial<typeof pageHeader.slots>
+}
+export interface PageHeaderEmits {}
+export interface PageHeaderSlots {
+  after: (props: any) => any
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<PageHeaderProps>()
+defineEmits<PageHeaderEmits>()
+defineSlots<PageHeaderSlots>()
+
+const ui = computed(() => pageHeader())
+</script>
+
+<template>
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <PageTitle :title="props.title" />
+    <slot name="after" />
+  </div>
+</template>

package/dist/components/PageTitle.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import { computed } from 'vue'
+
+const pageTitle = tv({
+  slots: {
+    base: 'text-xl font-bold text-highlighted',
+  },
+})
+
+export interface PageTitleProps {
+  title: string
+  class?: any
+  ui?: Partial<typeof pageTitle.slots>
+}
+export interface PageTitleEmits {}
+export interface PageTitleSlots {}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<PageTitleProps>()
+defineEmits<PageTitleEmits>()
+defineSlots<PageTitleSlots>()
+
+const ui = computed(() => pageTitle())
+</script>
+
+<template>
+  <h1 :class="ui.base({ class: [props.ui?.base, props.class] })">
+    {{ title }}
+  </h1>
+</template>

package/dist/components/Socials.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+import UIcon from '@nuxt/ui/components/Icon.vue'
+import { tv } from 'tailwind-variants'
+import { computed } from 'vue'
+import github from '~icons/simple-icons/github'
+import linkedin from '~icons/simple-icons/linkedin'
+import twitch from '~icons/simple-icons/twitch'
+import x from '~icons/simple-icons/x'
+import youtube from '~icons/simple-icons/youtube'
+
+const socials = tv({
+  slots: {
+    base: 'flex flex-wrap gap-2',
+    link: 'flex items-center gap-1',
+    icon: 'size-4',
+  },
+})
+
+export interface SocialsProps {
+  class?: any
+  ui?: Partial<typeof socials.slots>
+}
+export interface SocialsEmits {}
+export interface SocialsSlots {}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<SocialsProps>()
+defineEmits<SocialsEmits>()
+defineSlots<SocialsSlots>()
+
+const ui = computed(() => socials())
+</script>
+
+<template>
+  <p :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <a
+      href="https://www.linkedin.com/in/esteban25/"
+      rel="noopener noreferrer"
+      target="_blank"
+      :class="ui.link({ class: props.ui?.link })"
+    >
+      <UIcon :name="linkedin" :class="ui.icon({ class: props.ui?.icon })" />
+      <span>LinkedIn</span>
+    </a>
+    <a
+      href="https://x.com/soubiran_"
+      rel="noopener noreferrer"
+      target="_blank"
+      :class="ui.link({ class: props.ui?.link })"
+    >
+      <UIcon :name="x" :class="ui.icon({ class: props.ui?.icon })" />
+      <span>X (Twitter)</span>
+    </a>
+    <a
+      href="https://github.com/barbapapazes"
+      rel="noopener noreferrer"
+      target="_blank"
+      :class="ui.link({ class: props.ui?.link })"
+    >
+      <UIcon :name="github" :class="ui.icon({ class: props.ui?.icon })" />
+      <span>GitHub</span>
+    </a>
+    <a
+      href="https://www.twitch.tv/barbapapazes"
+      rel="noopener noreferrer"
+      target="_blank"
+      :class="ui.link({ class: props.ui?.link })"
+    >
+      <UIcon :name="twitch" :class="ui.icon({ class: props.ui?.icon })" />
+      <span>Twitch</span>
+    </a>
+    <a
+      href="https://www.youtube.com/@barbapapazes"
+      target="_blank"
+      rel="noopener noreferrer"
+      :class="ui.link({ class: props.ui?.link })"
+    >
+      <UIcon :name="youtube" :class="ui.icon({ class: props.ui?.icon })" />
+      <span>YouTube</span>
+    </a>
+  </p>
+</template>

package/dist/components/Sponsors.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import { computed } from 'vue'
+
+const sponsors = tv({
+  slots: {
+    base: 'not-prose',
+    img: 'border-0',
+  },
+})
+
+export interface SponsorsProps {
+  class?: any
+  ui?: Partial<typeof sponsors.slots>
+}
+export interface SponsorsEmits {}
+export interface SponsorsSlots {}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<SponsorsProps>()
+defineEmits<SponsorsEmits>()
+defineSlots<SponsorsSlots>()
+
+const ui = computed(() => sponsors())
+</script>
+
+<template>
+  <p :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <a href="https://soubiran.dev/sponsorship?utm_source=infra.soubiran.dev&utm_medium=link" target="_blank">
+      <img src="https://raw.githubusercontent.com/Barbapapazes/static/refs/heads/main/sponsors.svg" alt="Sponsors" :class="ui.img({ class: props.ui?.img })">
+    </a>
+  </p>
+</template>