Updates

storybookjs · May 22, 2024 · 6278efa · 6278efa
1 parent ef65f26
commit 6278efa
Show file tree

Hide file tree

Showing 10 changed files with 327 additions and 82 deletions.
diff --git a/apps/frontpage/components/home/hero/index.tsx b/apps/frontpage/components/home/hero/index.tsx
@@ -73,7 +73,7 @@ export function Hero({
 
     intervalId.current = window.setInterval(() => {
       setSlide((s) => (s === 4 ? 1 : s + 1));
-    }, 3000);
+    }, 5000);
   };
 
   useEffect(() => {

diff --git a/apps/frontpage/components/home/hero/manager/canvas.tsx b/apps/frontpage/components/home/hero/manager/canvas.tsx
@@ -1,8 +1,8 @@
 import { motion } from 'framer-motion';
 import { cn } from '@repo/utils';
 import Image from 'next/image';
-import component from './component-large.svg';
 import componentSmall from './component-small.svg';
+import { Component } from './component';
 
 export const Canvas = () => {
   return (
@@ -14,11 +14,7 @@ export const Canvas = () => {
       exit={{ opacity: 0 }}
       initial={{ opacity: 0 }}
     >
-      <Image
-        alt="Component"
-        className="max-h-full hidden sm:block"
-        src={component}
-      />
+      <Component />
       <Image
         alt="Component"
         className="max-h-full sm:hidden"

diff --git a/apps/frontpage/components/home/hero/manager/component-image.tsx b/apps/frontpage/components/home/hero/manager/component-image.tsx
diff --git a/apps/frontpage/components/home/hero/manager/component.tsx b/apps/frontpage/components/home/hero/manager/component.tsx
diff --git a/apps/frontpage/components/home/hero/manager/controls.tsx b/apps/frontpage/components/home/hero/manager/controls.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@repo/utils';
 import type { FC, ReactNode } from 'react';
+import { motion } from 'framer-motion';
 
 export const Controls: FC<{ isPanel?: boolean }> = ({ isPanel = false }) => {
   return (
@@ -20,13 +21,55 @@ export const Controls: FC<{ isPanel?: boolean }> = ({ isPanel = false }) => {
         required
       />
       <Line
-        control={<Boolean value />}
+        control={
+          <div className="relative flex items-center h-8 px-0.5 rounded-full bg-slate-200">
+            <div className="relative z-10 flex items-center justify-center h-full w-14">
+              False
+            </div>
+            <div className="relative z-10 flex items-center justify-center h-full w-14">
+              True
+            </div>
+            <motion.div
+              animate={{ x: isPanel ? 0 : 56 }}
+              className="absolute bg-white rounded-full w-14 h-7"
+              initial={{ x: 56 }}
+              transition={{ duration: 0.2, delay: 1.2 }}
+            />
+          </div>
+        }
         description="Disable the component"
         isPanel={isPanel}
         label="inStock"
       />
       <Line
-        control={<Color value="#D8DDDD" />}
+        control={
+          <div className="border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2 justify-between">
+            <div className="flex items-center gap-2">
+              <motion.div
+                animate={{ backgroundColor: '#485353' }}
+                className="w-4 h-4 rounded border border-[#D9E0E6]"
+                initial={{ backgroundColor: '#D8DDDD' }}
+                transition={{ duration: 0.2, delay: 2.7 }}
+              />
+              #D8DDDD
+            </div>
+            <svg
+              fill="none"
+              height="12"
+              width="12"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clipPath="url(#a)" fill="#73828C">
+                <path d="M7.7 1.399a.429.429 0 0 0-.828-.226l-2.571 9.429a.429.429 0 0 0 .827.225L7.699 1.4ZM2.846 3.1a.429.429 0 0 1 .055.603L.986 6l1.915 2.297a.429.429 0 0 1-.659.549L.1 6.274a.429.429 0 0 1 0-.548l2.143-2.572a.429.429 0 0 1 .604-.055ZM9.154 3.1a.429.429 0 0 0-.055.603L11.014 6 9.099 8.297a.429.429 0 0 0 .659.549L11.9 6.274a.429.429 0 0 0 0-.548L9.758 3.154a.429.429 0 0 0-.604-.055Z" />
+              </g>
+              <defs>
+                <clipPath id="a">
+                  <path d="M0 0h12v12H0z" fill="#fff" />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        }
         description="Card background color"
         isPanel={isPanel}
         label="backgroundColor"
@@ -127,66 +170,6 @@ const Input = ({
   );
 };
 
-const Boolean = ({ value }: { value: boolean }) => {
-  return (
-    <div className="relative flex items-center h-8 px-0.5 rounded-full bg-slate-200">
-      <div className="relative z-10 flex items-center justify-center h-full w-14">
-        False
-      </div>
-      <div className="relative z-10 flex items-center justify-center h-full w-14">
-        True
-      </div>
-      <div
-        className={cn(
-          'absolute bg-white rounded-full w-14 h-7',
-          value && 'left-[58px]',
-          !value && 'left-0',
-        )}
-      />
-    </div>
-  );
-};
-
-const Color = ({
-  value,
-  muted = false,
-}: {
-  value: string;
-  muted?: boolean;
-}) => {
-  return (
-    <div
-      className={cn(
-        'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2 justify-between',
-        muted && 'text-[#73828C]',
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <div
-          className="w-4 h-4 rounded border border-[#D9E0E6]"
-          style={{ backgroundColor: value }}
-        />
-        {value}
-      </div>
-      <svg
-        fill="none"
-        height="12"
-        width="12"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g clipPath="url(#a)" fill="#73828C">
-          <path d="M7.7 1.399a.429.429 0 0 0-.828-.226l-2.571 9.429a.429.429 0 0 0 .827.225L7.699 1.4ZM2.846 3.1a.429.429 0 0 1 .055.603L.986 6l1.915 2.297a.429.429 0 0 1-.659.549L.1 6.274a.429.429 0 0 1 0-.548l2.143-2.572a.429.429 0 0 1 .604-.055ZM9.154 3.1a.429.429 0 0 0-.055.603L11.014 6 9.099 8.297a.429.429 0 0 0 .659.549L11.9 6.274a.429.429 0 0 0 0-.548L9.758 3.154a.429.429 0 0 0-.604-.055Z" />
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path d="M0 0h12v12H0z" fill="#fff" />
-          </clipPath>
-        </defs>
-      </svg>
-    </div>
-  );
-};
-
 const Range = ({ value }: { value: number }) => {
   return (
     <div className={cn('w-full flex items-center gap-2')}>

diff --git a/apps/frontpage/components/home/hero/manager/hand.svg b/apps/frontpage/components/home/hero/manager/hand.svg
diff --git a/apps/frontpage/components/home/hero/manager/panel-controls.tsx b/apps/frontpage/components/home/hero/manager/panel-controls.tsx
@@ -1,17 +1,61 @@
-import type { FC } from 'react';
-import { motion } from 'framer-motion';
+import { useEffect, type FC } from 'react';
+import { motion, useAnimate } from 'framer-motion';
 import { UndoIcon } from '@storybook/icons';
+import Image from 'next/image';
 import { Tabs } from './tabs';
 import { Controls } from './controls';
+import hand from './hand.svg';
 
 export const PanelControls: FC = () => {
+  const [scope, animate] = useAnimate();
+
+  useEffect(() => {
+    void (async () => {
+      await animate(scope.current, { y: 280 });
+      await animate(
+        scope.current,
+        {
+          x: 210,
+          y: 200,
+          opacity: 1,
+        },
+        { duration: 0.4 },
+      );
+      await animate(
+        scope.current,
+        { scale: 0.8 },
+        { duration: 0.1, delay: 0.2 },
+      );
+      await animate(scope.current, { scale: 1 }, { duration: 0.1 });
+      await animate(
+        scope.current,
+        { x: 240, y: 256 },
+        { duration: 0.1, delay: 1 },
+      );
+      await animate(
+        scope.current,
+        { scale: 0.8 },
+        { duration: 0.1, delay: 0.2 },
+      );
+      await animate(scope.current, { scale: 1 }, { duration: 0.1 });
+    })();
+  });
+
   return (
     <motion.div
       animate={{ y: 0, opacity: 1 }}
       className="absolute bottom-0 left-0 w-full h-[55%] sm:h-[40%] lg:bottom-auto lg:left-auto lg:top-0 lg:right-0 lg:h-full lg:w-[400px] border-t border-t-[#D9E0E6] lg:border-t-0 lg:border-l lg:border-l-[#D9E0E6] flex flex-col text-black"
       exit={{ y: 40, opacity: 0 }}
       initial={{ y: 40, opacity: 0 }}
     >
+      <Image
+        alt="Hand"
+        className="absolute top-0 z-20 opacity-0"
+        height={48}
+        ref={scope}
+        src={hand}
+        width={48}
+      />
       <Tabs active={0} />
       <div className="flex h-10 flex-shrink-0 items-center border-b border-b-[#D9E0E6]">
         <div className="text-[13px] w-1/2 md:w-1/2 flex-shrink-0 pl-4">

diff --git a/apps/frontpage/components/home/hero/manager/sidebar.tsx b/apps/frontpage/components/home/hero/manager/sidebar.tsx
@@ -57,10 +57,10 @@ export const Sidebar: FC<{ slide: number }> = ({ slide }) => {
       <SidebarLine
         active={slide === 1 || slide === 3 || slide === 4}
         ic="story"
-        label="Space Grey"
+        label="Expanded"
         lvl={2}
       />
-      <SidebarLine ic="story" label="Liked" lvl={2} />
+      <SidebarLine ic="story" label="Added to cart" lvl={2} />
       <SidebarLine ar="right" ic="component" label="Dashboard" lvl={1} />
       <SidebarLine ar="right" ic="component" label="Homepage" lvl={1} />
       <SidebarLine ar="right" ic="component" label="User Profile" lvl={1} />

diff --git a/apps/frontpage/package.json b/apps/frontpage/package.json
@@ -31,7 +31,7 @@
     "date-fns": "^2.0.0",
     "date-fns-tz": "^2.0.0",
     "extract-md-headings": "^0.2.7",
-    "framer-motion": "^10.16.14",
+    "framer-motion": "^11.2.6",
     "fs-extra": "^11.2.0",
     "gray-matter": "^4.0.3",
     "he": "^1.2.0",

diff --git a/package-lock.json b/package-lock.json