@hanzo/ui 3.7.0 → 3.7.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.7.0",
+  "version": "3.7.22",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -39,7 +39,8 @@
     "./style/": "./style/*",
     "./tailwind": "./tailwind/index.ts",
     "./types": "./types/index.ts",
-    "./util": "./util/index.ts"
+    "./util": "./util/index.ts",
+    "./util-client": "./util/index-client.ts"
   },
   "dependencies": {
     "@next/third-parties": "^14.1.0",
@@ -82,19 +83,20 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-interaction-media": "^0.1.0",
-    "vaul": "^0.9.0"
+    "@hanzo/react-drawer": "0.9.1"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.3.2",
     "embla-carousel": "^8.0.2",
     "lucide-react": "^0.344.0",
+    "mobx": "^6.12.0",
     "next": "14.1.3",
     "next-themes": "^0.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
     "validator": "^13.11.0",
-    "zod": "3.21.4"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@mdx-js/loader": "^3.0.0",
@@ -103,8 +105,8 @@
     "@types/gtag.js": "^0.0.19",
     "@types/lodash.merge": "^4.6.9",
     "@types/mdx": "^2.0.13",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "embla-carousel": "^8.0.2",
     "tailwindcss": "^3.4.3",
     "typescript": "5.3.3"

package/primitives/drawer.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { Drawer as DrawerPrimitive } from 'vaul'
+import { Drawer as DrawerPrimitive, useDrawerContext } from '@hanzo/react-drawer'
 
 import { cn } from '../util'
 
@@ -18,6 +18,7 @@ Drawer.displayName = 'Drawer'
 
 const DrawerTrigger = DrawerPrimitive.Trigger
 const DrawerPortal = DrawerPrimitive.Portal
+const DrawerHandle = DrawerPrimitive.Handle
 const DrawerClose = DrawerPrimitive.Close
 
 const DrawerOverlay = React.forwardRef<
@@ -36,12 +37,16 @@ const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
     overlayClx?: string
-      // Redundancy of 'modal' sent to Root, since we have no access to that.
-      // Hack that avoids forking their code.
-    modal?: boolean 
+    defaultHandle?: boolean
   }
->(({ className, children, overlayClx='', modal=true, ...props }, ref) => {
-  
+>(({
+  className,
+  children,
+  overlayClx='',
+  defaultHandle=true,
+  ...props
+ }, ref) => {
+
   return (
     <DrawerPortal>
       {/* If no or same z index, overlay should precede content */}
@@ -50,15 +55,14 @@ const DrawerContent = React.forwardRef<
         ref={ref}
         className={cn('fixed left-0 right-0 bottom-0 z-modal',
           'mt-24 flex flex-col rounded-t-[10px] pt-6 border bg-background',
-          // 'h-[80%]' 
+          // 'h-[80%]'
           className
         )}
-          // A bug / omission in Vaul
-        onFocusOutside={(e) => { if (!modal) { e.preventDefault(); return } }}
-        onEscapeKeyDown={(e) => { if (!modal) { e.preventDefault(); return } }}
         {...props}
       >
-        <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-3 shrink-0' />
+        {defaultHandle && (
+          <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-3 shrink-0' />
+        )}
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -126,8 +130,10 @@ export {
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
+  DrawerHandle,
   DrawerHeader,
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  useDrawerContext
 }

package/primitives/index.ts

@@ -66,10 +66,12 @@ export {
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
+  DrawerHandle,
   DrawerHeader,
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  useDrawerContext
 } from './drawer'
 
 export {

package/style/drawer.css

@@ -0,0 +1,163 @@
+/*  This is a copy of vaul/src/style.css */
+
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
+  overflow-y: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
+  overflow-x: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
+  overflow-x: hidden !important;
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-overlay][vaul-drawer-visible='true'] {
+  opacity: 1;
+}
+
+[vaul-drawer]::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+
+[vaul-drawer][vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-handle] {
+  display: block;
+  position: relative;
+  opacity: 0.8;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 56px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+  cursor: grab;
+}
+
+[vaul-handle]:hover,
+[vaul-handle]:active {
+  opacity: 1;
+}
+
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); /* 44px */
+  height: max(100%, 2.75rem); /* 44px */
+  touch-action: inherit;
+}
+
+[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
+  opacity: 0;
+}
+
+[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
+  opacity: 1;
+}
+
+/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}
+

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.hanzo-modules.base.json",
+  "extends": "../tsconfig.hanzo.base.json",
   "include": [
     "**/*.ts",
     "**/*.tsx",

package/util/index-client.ts

@@ -0,0 +1,3 @@
+export * from './index'
+// Must be imported from 'use client'
+export * from './step-animation'

package/util/index.ts

@@ -74,4 +74,6 @@ export const capitalize = (str: string): string => (
 )
 
 export { default as spreadToTransform } from './spread-to-transform'
+// Must be imported from 'use client'
+// export * from './step-animation'
 

package/util/step-animation.ts

@@ -0,0 +1,90 @@
+import { useEffect, useRef } from 'react'
+import { makeObservable, reaction, computed, type IReactionDisposer, observable, action } from 'mobx'
+
+interface StepAnimation {
+  notPast(step: number): boolean
+}
+
+class MyStepAnimation implements StepAnimation {
+
+  _step: number = -1
+  _reactionDisposer: IReactionDisposer | undefined = undefined
+
+  _initialStep: () => boolean
+  _intervals: number[]
+
+    /**  initialStep: false -> true: step 0
+                      true -> false: step 1
+         after intervals[0] : step 2
+         after intervals[1] : step 3
+
+        initialStep must contain at least one mobx observable and return boolean 
+        see: https://mobx.js.org/reactions.html#reaction
+    */
+  constructor(initialStep: () => boolean, intervals: number[]) {
+
+    this._initialStep = initialStep
+    this._intervals = intervals
+
+    makeObservable(this, {
+      _step: observable,
+      _setStep: action
+    })
+  }
+
+    // This is separated out because reactions have to be created
+    // once we have a valid doc / window etc. (mobx internals)
+    // Can't just do it in constructor and assign to ref
+  initialize = () => {
+    
+    const fireNext = () => {
+      this._setStep(this._step + 1)
+      if (this._step <= this._intervals.length) {
+          // No need to call clearTimeout(): https://stackoverflow.com/a/7391588/11645689
+        setTimeout(() => { fireNext() }, this._intervals[this._step - 1]) 
+      }
+    }
+
+    this._reactionDisposer = reaction(
+      this._initialStep,
+      (triggered: boolean) => {
+        if (triggered && this._step === -1) { 
+          this._setStep(0)
+        }
+          // extra safe
+        else if (this._step === 0) { 
+          fireNext()  
+        }
+      }
+    )
+  }
+
+  _setStep = (v: number): void => {this._step = v}
+
+  dispose = () => {
+    if (this._reactionDisposer) {
+      this._reactionDisposer()
+    }
+  }
+
+    // https://mobx.js.org/computeds-with-args.html#2-close-over-the-arguments
+  notPast = (step: number): boolean => (
+    computed(() => (this._step > -1 && this._step <= step)).get()
+  )
+}
+
+const useStepAnimation = (initialStep: () => boolean, intervals: number[]): StepAnimation => {
+
+  const animRef = useRef<MyStepAnimation>(new MyStepAnimation(initialStep, intervals))
+  useEffect(() => {
+    animRef.current.initialize()
+    return animRef.current.dispose 
+  }, [])
+
+  return animRef.current
+}
+
+export {
+  type StepAnimation, 
+  useStepAnimation
+}