@designcrowd/fe-shared-lib 1.8.8 → 1.8.9-ai-switch

package/src/atoms/components/AiSwitch/AiSwitch.stories.js

@@ -0,0 +1,31 @@
+import AiSwitch from './AiSwitch.vue';
+
+export default {
+  title: 'Components/AiSwitch',
+  component: AiSwitch,
+};
+
+export const Default = () => ({
+  components: { AiSwitch },
+  template: '<AiSwitch />',
+});
+
+export const DarkMode = () => ({
+  components: { AiSwitch },
+  template: '<AiSwitch :is-dark-mode="true" />',
+});
+DarkMode.decorators = [
+  () => ({
+    template: '<div style="background: #000; padding: 2rem;"><story /></div>',
+  }),
+];
+
+export const StarSwitch = () => ({
+  components: { AiSwitch },
+  template: '<AiSwitch :is-dark-mode="true" :show-stars="true" />',
+});
+StarSwitch.decorators = [
+  () => ({
+    template: '<div style="background: #000; padding: 2rem;"><story /></div>',
+  }),
+];

package/src/atoms/components/AiSwitch/AiSwitch.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="switch-container" :class="{ 'dark-mode': isDarkMode }">
+    <div class="switch-labels">
+      <span class="off-label">Templates</span>
+      <span class="on-label">
+        <Icon name="ai" class="tw-mr-1" style="fill: linear-gradient(180deg, #d946ef 0%, #8b5cf6 100%)" />AI Mode</span
+      >
+    </div>
+    <div class="switch-background" @click="toggleSwitch">
+      <div class="switch-block" :class="{ 'is-ai': isAi, 'star-block': showStars }"></div>
+    </div>
+    <StarIcon
+      v-for="star in stars"
+      :key="star.index"
+      class="star"
+      :class="{ 'throw-star': isAi && showStars }"
+      :style="{
+        left: `calc(19rem + ${star.x}px)`,
+        top: `calc(2.5rem + ${star.y}px)`,
+        transform: `rotate(${star.rotate}deg)`,
+        animationDelay: `0ms, ${star.fadeDelay}ms`,
+        fill: star.color,
+      }"
+    />
+    <!-- <StarIcon class="star2" /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Icon from '../Icon/Icon.vue';
+import StarIcon from './StarIcon.vue';
+
+interface Props {
+  isDarkMode: boolean;
+  showStars: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isDarkMode: false,
+  showStars: false,
+});
+
+const isAi = ref(false);
+
+const ANGLE_CONST = 25;
+const DIST_CONST = 25;
+const ANGLE_JITTER = 90;
+const DIST_JITTER = 30;
+const NUM_STARS = 5;
+const FADE_DELAY = 450;
+const FADE_JITTER = 400;
+
+const convertDegreesToRadians = (angle) => (angle * Math.PI) / 180;
+
+const convertPolarToCartesian = (angle, distance) => {
+  const angleInRadians = convertDegreesToRadians(angle);
+  const x = Math.cos(angleInRadians) * distance;
+  const y = Math.sin(angleInRadians) * distance;
+
+  return [x, y];
+};
+
+const stars = ref([
+  {
+    index: 0,
+    x: 0,
+    y: 0,
+    rotate: 0,
+    fadeDelay: 0,
+    color: '#D946EF',
+  },
+]);
+
+const randomizeStars = () => {
+  if (!isAi.value && !props.showStars) {
+    return;
+  }
+  stars.value = Array.from({ length: NUM_STARS }, (_, index) => {
+    const angle = Math.floor(
+      ANGLE_CONST - index * (ANGLE_JITTER / NUM_STARS) - Math.random() * (ANGLE_JITTER / NUM_STARS),
+    );
+    const dist = Math.floor(DIST_CONST + Math.random() * DIST_JITTER);
+    const rotate = Math.floor(180 + Math.random() * 90);
+    const fadeDelay = Math.floor(FADE_DELAY + Math.random() * FADE_JITTER);
+    const color = index % 2 === 0 ? '#D946EF' : '#8B5CF6';
+
+    const [x, y] = convertPolarToCartesian(angle, dist);
+    return { index, x, y, rotate, fadeDelay, color };
+  });
+};
+
+const toggleSwitch = () => {
+  // toggle left align class
+  // if moving right to left, play star animation after movement
+  isAi.value = !isAi.value;
+  console.log(`switch clicked, now ${isAi.value}`);
+  randomizeStars();
+};
+</script>
+
+<style scoped>
+.switch-container {
+  position: relative;
+  width: 23rem;
+  height: 6rem;
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.switch-labels {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  padding: 0 10px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  pointer-events: none;
+  > {
+    width: 8rem;
+  }
+}
+
+.switch-background {
+  position: relative;
+  width: 18rem;
+  height: 3rem;
+  background-color: bisque;
+  border-radius: 1.5rem;
+  padding: 6px;
+  z-index: 2;
+}
+
+.switch-block {
+  position: absolute;
+  height: 2.25rem;
+  width: 8.75rem;
+  border-radius: 1.125rem;
+  background-color: cornflowerblue;
+}
+
+.on-label {
+  display: flex;
+  align-items: center;
+}
+
+.switch-block.is-ai {
+  transform: translateX(97%);
+  background: linear-gradient(180deg, #d946ef 0%, #8b5cf6 100%);
+}
+
+.dark-mode {
+  @apply tw-text-grayscale-200;
+  .switch-background {
+    background-color: #3d3d3d;
+  }
+
+  .switch-block {
+    background-color: #252525;
+  }
+}
+
+.star {
+  position: absolute;
+  opacity: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+@keyframes star-spread {
+  from {
+    left: 19rem;
+    top: 2.5rem;
+    transform: rotate(0deg);
+  }
+  40% {
+    left: 19rem;
+    top: 2.5rem;
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .switch-block.is-ai.star-block {
+    transition:
+      transform 300ms
+        linear(
+          0,
+          0.371 6.2%,
+          0.652 12.9%,
+          0.85 20.3%,
+          0.922 24.4%,
+          0.977 28.8%,
+          1.027 36.1%,
+          1.045 44.8%,
+          1.006 77.3%,
+          1
+        ),
+      color 300ms;
+  }
+  .switch-block {
+    transition:
+      transform 300ms ease-in,
+      color 300ms ease-in;
+  }
+  .throw-star {
+    opacity: 1;
+    animation:
+      star-spread 450ms cubic-bezier(0.43, 1.032, 0.618, 1.003) forwards,
+      fade-out 400ms ease-out forwards;
+  }
+}
+</style>

package/src/atoms/components/AiSwitch/StarIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg class="star1" viewBox="18 23 48 48">
+    <path
+      d="M65.653886,47.229432c-13.71205,5.484135-18.128049,9.928695-23.576943,23.729431C36.62805,57.158127,32.212051,52.713567,18.5,47.229432C32.212051,41.745296,36.62805,37.300736,42.076943,23.5c5.448894,13.800736,9.864893,18.245296,23.576943,23.729432Z"
+    ></path>
+  </svg>
+</template>

package/src/atoms/components/Button/variants/ButtonDarkModePill.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="!url"
-    class="tw-rounded-full tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4"
+    class="tw-rounded-full tw-font-sans tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-grayscale-400 hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4"
     :class="[
       classes,
       {
@@ -10,7 +10,7 @@
         'tw-cursor-not-allowed': disabled,
         'tw-cursor-pointer': !disabled,
         'tw-text-secondary-600 tw-bg-white': active,
-        'tw-text-white tw-bg-transparent': !active || disabled,
+        'tw-text-grayscale-300 tw-bg-transparent': !active || disabled,
       },
     ]"
     :disabled="disabled"
@@ -23,7 +23,7 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-rounded-full tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-white hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4 tw-no-underline"
+    class="tw-rounded-full tw-font-sans tw-inline-flex tw-border tw-border-solid tw-font-bold tw-capitalize tw-transition-colors tw-duration-300 tw-border-grayscale-400 hover:tw-bg-secondary-400 tw-py-1.5 tw-px-4 tw-no-underline"
     :class="[
       classes,
       {
@@ -31,8 +31,8 @@
         'tw-text-sm': size !== 'small',
         'tw-cursor-not-allowed': disabled,
         'tw-cursor-pointer': !disabled,
-        'tw-text-secondary-600 tw-bg-white': active,
-        'tw-text-white tw-bg-transparent': !active || disabled,
+        'tw-text-secondary-600 tw-bg-grayscale-300': active,
+        'tw-text-grayscale-300 tw-bg-transparent': !active || disabled,
       },
     ]"
     :download="download"