feat: wip

latitude-dev · Jul 23, 2024 · 5cca57d · 5cca57d
1 parent a4d0dc6
commit 5cca57d
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 70 deletions.
diff --git a/packages/web-ui/src/ds/atoms/DropdownMenu/Primitives/index.tsx b/packages/web-ui/src/ds/atoms/DropdownMenu/Primitives/index.tsx
@@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -182,6 +182,7 @@ const DropdownMenuShortcut = ({
 }
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 
+type ContentProps = DropdownMenuPrimitive.DropdownMenuContentProps
 export {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -198,4 +199,5 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
+  type ContentProps
 }
diff --git a/packages/web-ui/src/ds/atoms/DropdownMenu/index.tsx b/packages/web-ui/src/ds/atoms/DropdownMenu/index.tsx
@@ -12,6 +12,7 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
   DropdownMenu as Root,
+  type ContentProps,
 } from './Primitives'
 
 export type TriggerButtonProps = Omit<ButtonProps, 'children'> & {
@@ -24,8 +25,14 @@ const TriggerButton = ({
   ...buttonProps
 }: TriggerButtonProps) => {
   return (
-    <DropdownMenuTrigger className='flex focus:outline-none'>
-      <Button asChild size='small' variant={variant} icon={icon} {...buttonProps}>
+    <DropdownMenuTrigger asChild className='flex focus:outline-none'>
+      <Button
+        asChild
+        size='small'
+        variant={variant}
+        icon={icon}
+        {...buttonProps}
+      >
         <div>{label ? label : null}</div>
       </Button>
     </DropdownMenuTrigger>
@@ -53,11 +60,9 @@ function DropdownItem({
     onClick()
   }, [disabled, onClick])
   return (
-    <DropdownMenuItem onSelect={onSelect}>
+    <DropdownMenuItem onSelect={onSelect} disabled={disabled}>
       {icon}
-      <Text.H5M
-        color={type === 'destructive' ? 'destructiveForeground' : 'foreground'}
-      >
+      <Text.H5M color={type === 'destructive' ? 'destructive' : 'foreground'}>
         {label}
       </Text.H5M>
       {shortcut && <DropdownMenuShortcut>{shortcut}</DropdownMenuShortcut>}
@@ -67,7 +72,7 @@ function DropdownItem({
 
 type RenderTriggerProps = { open: boolean }
 type TriggerButtonPropsFn = (open: boolean) => TriggerButtonProps
-type Props = {
+type Props = ContentProps & {
   triggerButtonProps?: TriggerButtonProps | TriggerButtonPropsFn
   trigger?: (renderTriggerProps: RenderTriggerProps) => ReactNode
   title?: string
@@ -79,6 +84,10 @@ export function DropdownMenu({
   triggerButtonProps,
   trigger,
   title,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
   options,
   onOpenChange,
   controlledOpen,
@@ -103,18 +112,22 @@ export function DropdownMenu({
         <TriggerButton />
       )}
       <DropdownMenuPortal>
-        <DropdownMenuContent className='w-56'>
+        <DropdownMenuContent
+          side={side}
+          sideOffset={sideOffset}
+          align={align}
+          alignOffset={alignOffset}
+          className='w-52'
+        >
           {title && (
             <>
               <DropdownMenuLabel>{title}</DropdownMenuLabel>
               <DropdownMenuSeparator />
             </>
           )}
-          <DropdownMenuPortal>
-            {options.map((option, index) => (
-              <DropdownItem key={index} {...option} />
-            ))}
-          </DropdownMenuPortal>
+          {options.map((option, index) => (
+            <DropdownItem key={index} {...option} />
+          ))}
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </Root>

diff --git a/packages/web-ui/src/ds/atoms/Input/index.tsx b/packages/web-ui/src/ds/atoms/Input/index.tsx
@@ -1,28 +1,45 @@
 import { forwardRef, InputHTMLAttributes } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 import { FormField, type FormFieldProps } from '$ui/ds/atoms/FormField'
 import { font } from '$ui/ds/tokens'
 import { cn } from '$ui/lib/utils'
 
-export type InputProps = InputHTMLAttributes<HTMLInputElement> &
+const inputVariants = cva(
+  cn(
+    'flex w-full border border-input bg-background ring-offset-background',
+    'file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    font.size.h5,
+  ),
+  {
+    variants: {
+      size: {
+        normal: 'h-8 px-2 py-1 rounded-md',
+        small: 'rounded-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'normal',
+    },
+  },
+)
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> &
+  VariantProps<typeof inputVariants> &
   Omit<FormFieldProps, 'children'>
 const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { className, label, errors, description, type, ...props },
+  { className, label, errors, description, type, size, ...props },
   ref,
 ) {
   return (
     <FormField label={label} description={description} errors={errors}>
       <input
         ref={ref}
         type={type}
-        className={cn(
-          'flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          font.size.h5,
-          className,
-          {
-            'border-red-500 focus-visible:ring-red-500': errors,
-          },
-        )}
+        className={cn(inputVariants({ size }), className, {
+          'border-red-500 focus-visible:ring-red-500': errors,
+        })}
         {...props}
       />
     </FormField>

diff --git a/packages/web-ui/src/sections/Document/Sidebar/Files/FilesProvider/index.tsx b/packages/web-ui/src/sections/Document/Sidebar/Files/FilesProvider/index.tsx
@@ -0,0 +1,43 @@
+import { createContext, ReactNode, useContext } from 'react'
+
+type IFilesContext = {
+  currentPath?: string
+  onCreateFile: (path: string) => void
+  onDeleteFile: (documentUuid: string) => void
+  onDeleteFolder: (path: string) => void
+  onNavigateToDocument: (documentUuid: string) => void
+}
+const FileTreeContext = createContext({} as IFilesContext)
+
+const FileTreeProvider = ({
+  children,
+  currentPath,
+  onCreateFile,
+  onDeleteFile,
+  onDeleteFolder,
+  onNavigateToDocument,
+}: { children: ReactNode } & IFilesContext) => {
+  return (
+    <FileTreeContext.Provider
+      value={{
+        currentPath,
+        onCreateFile,
+        onDeleteFile,
+        onDeleteFolder,
+        onNavigateToDocument,
+      }}
+    >
+      {children}
+    </FileTreeContext.Provider>
+  )
+}
+
+const useFileTreeContext = () => {
+  const fileTreeContext = useContext(FileTreeContext)
+  if (!fileTreeContext) {
+    throw new Error('useFileTreeContext must be used within a FileTreeProvider')
+  }
+  return fileTreeContext
+}
+
+export { FileTreeProvider, useFileTreeContext }