@raclettejs/workbench 0.0.1

package/services/frontend/src/orchestrator/components/RacletteAdCorner.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="raclette-ad-corner" @click="openRacletteWebsite">
+    <!-- Main folded corner container -->
+    <div class="corner-container">
+      <!-- The "page" that's peeled -->
+      <div class="page-peel">
+        <!-- Decorative fold strip -->
+        <div class="corner-fold"></div>
+
+        <!-- Content area revealed underneath -->
+        <div class="content-area">
+          <!-- SVG triangle hover area -->
+          <svg class="hover-triangle" viewBox="0 0 280 280">
+            <polygon
+              points="280,0 280,280 0,280"
+              fill="transparent"
+              class="triangle-hover-zone"
+            />
+          </svg>
+          <div class="container-content">
+            <div class="orb orb-1"></div>
+            <span class="cheese-emoji">🧀</span>
+            <span class="brand-name">raclette</span>
+            <div class="orb orb-2"></div>
+            <div class="tagline">The framework behind this app</div>
+            <div class="orb orb-3"></div>
+            <div class="cta-text">Click to learn more →</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const openRacletteWebsite = () => {
+  window.open("https://raclettejs.com/", "_blank")
+}
+</script>
+
+<style scoped>
+.raclette-ad-corner {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 4;
+  pointer-events: none;
+}
+
+.corner-container {
+  position: relative;
+  width: 140px;
+  height: 140px;
+}
+
+.page-peel {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.corner-fold {
+  position: absolute;
+  bottom: 0;
+  right: 140px;
+  width: 400px;
+  height: 15px;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  transform: rotate(135deg);
+  transform-origin: bottom right;
+  filter: drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.3));
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 2;
+}
+
+.content-area {
+  position: absolute;
+  display: flex;
+  align-items: end;
+  justify-content: end;
+  bottom: 0;
+  right: 0;
+  width: 140px;
+  height: 140px;
+  background: linear-gradient(135deg, #2a2a2e 0%, #1b1b1f 100%);
+  border-top-left-radius: 16px;
+  padding: 16px;
+  box-shadow:
+    -4px -4px 12px rgba(0, 0, 0, 0.4),
+    inset 1px 1px 0 rgba(221, 139, 64, 0.1);
+  overflow: hidden;
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% 100%,
+    calc(100% - 140px) 100%,
+    100% calc(100% - 140px)
+  );
+  padding: 4px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 1024px) {
+  .corner-container {
+    width: 190px;
+    height: 190px;
+  }
+
+  .corner-fold {
+    right: 190px;
+    height: 20px;
+  }
+
+  .content-area {
+    width: 190px;
+    height: 190px;
+    padding: 7px;
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 100%,
+      calc(100% - 190px) 100%,
+      100% calc(100% - 190px)
+    );
+  }
+}
+
+.container-content {
+  display: flex;
+  position: relative;
+  height: fit-content;
+  justify-content: end;
+  align-items: end;
+  flex-direction: column;
+}
+
+.brand-name {
+  color: #dd8b40;
+  font-weight: 600;
+  font-size: 16px;
+  font-family: "Quicksand", sans-serif;
+}
+
+.cheese-emoji {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.tagline {
+  color: #c1c1c1;
+  font-size: 9px;
+  font-weight: 500;
+  opacity: 0.9;
+  line-height: 1.2;
+  font-family: "Roboto";
+  text-align: right;
+}
+
+.cta-text {
+  color: #dd8b40;
+  font-size: 11px;
+  font-weight: 500;
+  text-align: center;
+  opacity: 0.8;
+  margin-top: 4px;
+}
+
+@media (min-width: 1024px) {
+  .brand-name {
+    font-size: 25px;
+    margin-bottom: 16px;
+  }
+
+  .cheese-emoji {
+    font-size: 30px;
+    line-height: 20px;
+  }
+
+  .tagline {
+    font-size: 11px;
+  }
+
+  .cta-text {
+    font-size: 14px;
+  }
+}
+
+/* SVG hover triangle */
+.hover-triangle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: all;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 140px;
+  height: 140px;
+}
+
+@media (min-width: 1024px) {
+  .hover-triangle {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+.triangle-hover-zone {
+  cursor: pointer;
+}
+
+.hover-triangle:hover {
+  width: 260px;
+  height: 260px;
+}
+
+.raclette-ad-corner:has(.hover-triangle:hover) .corner-fold {
+  height: 20px;
+  right: 190px;
+}
+
+.raclette-ad-corner:has(.hover-triangle:hover) .content-area {
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% 100%,
+    calc(100% - 190px) 100%,
+    100% calc(100% - 190px)
+  );
+  width: 190px;
+  height: 190px;
+}
+
+.raclette-ad-corner:has(.hover-triangle:hover) .cheese-emoji {
+  animation: spin 0.35s ease-in-out;
+}
+
+@media (min-width: 1024px) {
+  .raclette-ad-corner:has(.hover-triangle:hover) .corner-fold {
+    height: 25px;
+    right: 240px;
+  }
+
+  .raclette-ad-corner:has(.hover-triangle:hover) .content-area {
+    box-shadow:
+      -6px -6px 16px rgba(0, 0, 0, 0.5),
+      inset 1px 1px 0 rgba(221, 139, 64, 0.2);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 100%,
+      calc(100% - 240px) 100%,
+      100% calc(100% - 240px)
+    );
+    width: 240px;
+    height: 240px;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-12px);
+  }
+}
+
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(5px);
+  animation: float 6s ease-in-out infinite;
+}
+
+.orb-1 {
+  top: 0px;
+  right: 10px;
+  width: 32px;
+  height: 32px;
+  background-color: rgba(255, 165, 0, 0.15);
+}
+
+.orb-2 {
+  bottom: 6px;
+  right: 80px;
+  width: 24px;
+  height: 24px;
+  background-color: rgba(198, 162, 43, 0.15);
+  animation-delay: 2s;
+}
+
+.orb-3 {
+  bottom: 33.333333%;
+  right: -8px;
+  width: 22px;
+  height: 22px;
+  background-color: rgba(96, 165, 250, 0.15);
+  animation-delay: 4s;
+}
+</style>

package/services/frontend/src/orchestrator/components/layout/AppButton.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- TODO: font Noto Sans -->
+  <v-btn
+    class="tw:border tw:border-solid tw:rounded-[5px] tw:text-black tw:border-black tw:text-center tw:w-fit tw:normal-case tw:font-normal tw:h-fit tw:block"
+    :color="variant === 'primary' ? '#FFEEDE' : 'white'"
+    :class="{
+      'tw:bg-[#FFEEDE]': variant === 'primary',
+      'tw:bg-white': variant === 'secondary',
+      'tw:px-3 tw:py-[6px]': size === 'default',
+      'tw:px-3 tw:py-[4px]': size === 'sm',
+      'tw:px-4 tw:py-[10px]': size === 'lg',
+    }"
+  >
+    <div
+      class="tw:flex tw:items-center tw:tracking-[.5px]"
+      :class="{
+        'tw:text-lg tw:leading-5 tw:gap-2': size === 'default' || size === 'sm',
+        'tw:text-2xl tw:leading-6 tw:gap-3': size === 'lg',
+      }"
+    >
+      <slot name="prepend-icon" />
+
+      <div
+        v-if="prepend"
+        :class="{
+          'tw:size-5': size === 'default',
+          'tw:size-[18px]': size === 'sm',
+          'tw:size-6': size === 'lg',
+        }"
+      >
+        <SvgButtonArrow
+          :class="{
+            'tw:size-[13.333px]': size === 'default',
+            'tw:size-3': size === 'sm',
+          }"
+        />
+      </div>
+
+      <div>
+        <slot />
+      </div>
+
+      <slot name="append-icon" />
+
+      <div v-if="append">
+        <SvgButtonArrow
+          :class="{
+            'tw:size-[13.333px]': size === 'default',
+            'tw:size-3': size === 'sm',
+          }"
+        />
+      </div>
+    </div>
+  </v-btn>
+
+  <!-- <button
+    class="tw:border tw:border-solid tw:rounded-[5px] tw:tracking-[.5px] tw:text-black tw:border-black tw:text-center tw:flex tw:items-center"
+    :class="{
+      'tw:bg-[#FFEEDE]': variant === 'primary',
+      'tw:bg-white': variant === 'secondary',
+      'tw:text-lg tw:leading-5 tw:px-3 tw:py-[6px] tw:gap-2':
+        size === 'default',
+      'tw:text-lg tw:leading-5 tw:px-3 tw:py-[4px] tw:gap-2': size === 'sm',
+      'tw:text-2xl tw:leading-6 tw:px-4 tw:py-[10px] tw:gap-3': size === 'lg',
+    }"
+  >
+    <div
+      v-if="prepend"
+      :class="{
+        'tw:size-5': size === 'default',
+        'tw:size-[18px]': size === 'sm',
+        'tw:size-6': size === 'lg',
+      }"
+    >
+      <SvgButtonArrow
+        :class="{
+          'tw:size-[13.333px]': size === 'default',
+          'tw:size-3': size === 'sm',
+        }"
+      />
+    </div>
+
+    <slot />
+
+    <div v-if="append">
+      <SvgButtonArrow
+        :class="{
+          'tw:size-[13.333px]': size === 'default',
+          'tw:size-3': size === 'sm',
+        }"
+      />
+    </div>
+  </button> -->
+</template>
+
+<script setup lang="ts">
+import { PropType } from "vue"
+import SvgButtonArrow from "./SvgButtonArrow.vue"
+
+withDefaults(
+  defineProps<{
+    variant?: "primary" | "secondary"
+    size?: "sm" | "default" | "lg"
+    append?: boolean
+    prepend?: boolean
+  }>(),
+  { variant: "primary", size: "default" },
+)
+</script>

package/services/frontend/src/orchestrator/components/layout/AppHeadline.vue

@@ -0,0 +1,46 @@
+<template>
+  <component :is="tag" class="tw:font-medium tw:tracking-[.5px] tw:text-center">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  }>(),
+  { tag: "h1" },
+)
+</script>
+
+<style scoped>
+@reference "@raclettejs/core/orchestrator/assets/styles/tailwindStyles.css";
+
+h1 {
+  @apply tw:text-[32px];
+  @apply tw:leading-10;
+}
+
+h2 {
+  @apply tw:text-[28px];
+  @apply tw:leading-9;
+}
+
+h3 {
+  @apply tw:text-2xl;
+}
+
+h4 {
+  @apply tw:text-xl;
+}
+
+h5 {
+  @apply tw:text-lg;
+  @apply tw:leading-6;
+}
+
+h6 {
+  @apply tw:text-base;
+  @apply tw:leading-[22px];
+}
+</style>

package/services/frontend/src/orchestrator/components/layout/AppLabelledInput.vue

@@ -0,0 +1,94 @@
+<template>
+  <!-- TODO: font Noto Sans -->
+  <div
+    class="tw:flex"
+    :class="{
+      'tw:gap-11': !fullWidth,
+      'tw:flex-col tw:gap-4': fullWidth,
+    }"
+  >
+    <label
+      :for="inputId"
+      class="tw:flex tw:flex-col tw:gap-1"
+      :class="{
+        'tw:w-1/2': !fullWidth,
+        'tw:w-full': fullWidth,
+      }"
+    >
+      <span
+        class="tw:font-semibold tw:text-base tw:leading-[22px] tw:tracking-[.5%]"
+      >
+        {{ inputLabel }}
+      </span>
+      <span
+        v-if="description"
+        class="tw:text-sm tw:leading-[100%] tw:tracking-[.5px] tw:text-[#595959]"
+      >
+        {{ description }}
+      </span>
+    </label>
+
+    <v-text-field
+      v-bind="$attrs"
+      v-model="model"
+      :hide-details="hideDetails"
+      variant="outlined"
+      :class="{
+        'tw:w-1/2': !fullWidth,
+        'tw:w-full': fullWidth,
+      }"
+      :id="inputId"
+      :rules="activeRules"
+      :type="
+        $attrs.type === 'password'
+          ? showPasswordText
+            ? 'text'
+            : 'password'
+          : $attrs.type
+      "
+      :append-icon="
+        $attrs.type === 'password'
+          ? showPasswordText
+            ? 'mdi-eye'
+            : 'mdi-eye-off'
+          : undefined
+      "
+      @click:append="showPasswordText = !showPasswordText"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId } from "vue"
+
+const RULES = {
+  required: (value) => !!value || "Required.",
+  email: (value) => {
+    const pattern =
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    return pattern.test(value) || "Invalid e-mail."
+  },
+  min8: (v) => v.length >= 8 || "Min 8 characters",
+  repeat: (value: string) => value === props.toRepeat || "Passwords must match",
+}
+
+// prevents attributes from being applied to the outer <div>
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  fullWidth?: boolean
+  inputLabel: string
+  description?: string
+  hideDetails?: boolean
+  rules?: Array<keyof typeof RULES>
+  toRepeat?: string
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const showPasswordText = ref(false)
+
+const inputId = computed(() => `labelled-input_${useId()}`)
+
+const activeRules = computed(() => props.rules?.map((rule) => RULES[rule]))
+</script>

package/services/frontend/src/orchestrator/components/layout/AppModal.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="tw:h-full tw:flex-1 tw:flex tw:items-center tw:justify-center tw:px-6 tw:py-12"
+  >
+    <div class="tw:max-w-2xl tw:w-full">
+      <!-- Main Headline -->
+      <div class="tw:text-center tw:mb-12">
+        <slot name="header">
+          <h1
+            class="tw:text-4xl tw:font-bold tw:text-gray-800 tw:mb-4"
+            v-html="title"
+          ></h1>
+        </slot>
+      </div>
+
+      <!-- Content -->
+      <v-card class="tw:rounded-xl! tw:shadow-lg!">
+        <v-card-text class="tw:p-8!">
+          <slot />
+        </v-card-text>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title?: string }>()
+</script>

package/services/frontend/src/orchestrator/components/layout/SvgButtonArrow.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z"
+      fill="black"
+    />
+  </svg>
+</template>

package/services/frontend/src/orchestrator/composables/useWelcomeScreen.ts

@@ -0,0 +1,19 @@
+import { $api } from "@raclettejs/core/frontend"
+
+type InitProjectPayload = {
+  title: string
+  user: {
+    email: string
+    password: string
+    firstname: string
+    lastname?: string
+  }
+}
+
+export default () => {
+  const initProject = async (payload: InitProjectPayload) => {
+    return await $api.axios.post("pacifico__core/init-project", payload)
+  }
+
+  return { initProject }
+}