try park ui

web/package.json

@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@pandacss/dev": "^0.15.5",
+    "@park-ui/presets": "^0.17.0",
     "@simplewebauthn/typescript-types": "^8.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/node": "^20.5.9",
@@ -60,4 +61,4 @@
   "resolutions": {
     "@ark-ui/react": "^0.15.0"
   }
-}
+}

web/panda.config.ts

@@ -1,22 +1,12 @@
 import { defineConfig } from "@pandacss/dev";
+import pandaPreset from "@pandacss/preset-panda";
 
 export default defineConfig({
-  // Whether to use css reset
   preflight: true,
-
-  // Where to look for your css declarations
+  presets: ["@pandacss/preset-base", pandaPreset, "@park-ui/presets"],
   include: ["./src/**/*.tsx"],
-
   jsxFramework: "react",
-
-  // Files to exclude
   exclude: [],
-
-  // Useful for theme customization
-  theme: {
-    extend: {},
-  },
-
-  // The output directory for your css system
+  theme: { extend: {} },
   outdir: "styled-system",
 });

web/src/components/content/CollectionMenu/CollectionMenu.tsx

@@ -1,17 +1,23 @@
+import { Portal } from "@ark-ui/react";
+import { Box, Checkbox } from "@chakra-ui/react";
+import { MinusIcon, PlusIcon } from "@heroicons/react/24/solid";
+
 import {
-  Box,
-  Checkbox,
   Menu,
-  MenuButton,
-  MenuDivider,
-  MenuGroup,
+  MenuContent,
   MenuItem,
-  MenuList,
-} from "@chakra-ui/react";
-import { MinusIcon, PlusIcon } from "@heroicons/react/24/solid";
+  MenuItemGroup,
+  MenuItemGroupLabel,
+  MenuPositioner,
+  MenuSeparator,
+  MenuTrigger,
+} from "src/components/ui/menu";
+import { CollectionCreate } from "src/screens/profile/components/CollectionList/CollectionCreate/CollectionCreate";
 
 import { Bookmark, BookmarkSolid } from "../../site/Action/Action";
 
+import { HStack } from "@/styled-system/jsx";
+
 import { Props, useCollectionMenu } from "./useCollectionMenu";
 
 export function CollectionMenu(props: Props) {
@@ -36,44 +42,50 @@ export function CollectionMenu(props: Props) {
         onOpen={onOpen}
         onClose={onClose}
         closeOnSelect={!multiSelect}
-        preventOverflow={true}
-        modifiers={[
-          {
-            name: "preventOverflow",
-            options: {
-              altAxis: true,
-              offset: { bottom: 82 },
-              padding: { bottom: 82 },
-            },
-          },
-        ]}
       >
-        <MenuButton
-          title="Add to collections"
-          as={isAlreadySaved ? BookmarkSolid : Bookmark}
-        />
-        <MenuList>
-          <MenuGroup title="Add to collections">
-            <MenuDivider />
-            {collections.map((c) => (
-              <MenuItem
-                key={c.id}
-                icon={
-                  multiSelect ? (
-                    <Checkbox isChecked={c.hasPost} width="1.4em" />
-                  ) : c.hasPost ? (
-                    <MinusIcon width="1.4em" />
-                  ) : (
-                    <PlusIcon width="1.4em" />
-                  )
-                }
-                onClick={onSelect(c)}
-              >
-                {c.name}
-              </MenuItem>
-            ))}
-          </MenuGroup>
-        </MenuList>
+        <MenuTrigger title="Add to collections" asChild>
+          {isAlreadySaved ? <BookmarkSolid /> : <Bookmark />}
+        </MenuTrigger>
+
+        <Portal>
+          <MenuPositioner>
+            <MenuContent>
+              <MenuItemGroup id="collections">
+                <MenuItemGroupLabel htmlFor="collections">
+                  Add to collections
+                </MenuItemGroupLabel>
+
+                <MenuSeparator />
+
+                {collections.map((c) => (
+                  <MenuItem
+                    id={c.id}
+                    key={c.id}
+                    onClick={onSelect(c)}
+                    title={
+                      c.hasPost ? `Remove from ${c.name}` : `Add to ${c.name}`
+                    }
+                  >
+                    <HStack>
+                      {multiSelect ? (
+                        <Checkbox isChecked={c.hasPost} width="1.4em" />
+                      ) : c.hasPost ? (
+                        <MinusIcon width="1.4em" />
+                      ) : (
+                        <PlusIcon width="1.4em" />
+                      )}
+                      {c.name}
+                    </HStack>
+                  </MenuItem>
+                ))}
+              </MenuItemGroup>
+
+              <MenuItemGroup id="collections">
+                <CollectionCreate />
+              </MenuItemGroup>
+            </MenuContent>
+          </MenuPositioner>
+        </Portal>
       </Menu>
     </Box>
   );

web/src/components/content/CollectionMenu/useCollectionMenu.ts

@@ -41,7 +41,7 @@ export function useCollectionMenu(props: Props) {
 
   const postCollections = new Set(props.thread.collections.map((c) => c.id));
   const isAlreadySaved = Boolean(
-    props.thread.collections.filter((c) => c.owner.id === account?.id).length
+    props.thread.collections.filter((c) => c.owner.id === account?.id).length,
   );
 
   const collections: CollectionState[] =
@@ -51,21 +51,20 @@ export function useCollectionMenu(props: Props) {
       hasPost: postCollections.has(c.id),
     })) ?? [];
 
-  const onSelect =
-    (c: CollectionState) => async (e: MouseEvent<HTMLButtonElement>) => {
-      if (e.shiftKey) {
-        setMultiSelect(true);
-      }
+  const onSelect = (c: CollectionState) => async (e: MouseEvent) => {
+    if (e.shiftKey) {
+      setMultiSelect(true);
+    }
 
-      if (postCollections.has(c.id)) {
-        await collectionRemovePost(c.id, props.thread.id);
-      } else {
-        await collectionAddPost(c.id, props.thread.id);
-      }
-      await mutate(getThreadListKey({}));
+    if (postCollections.has(c.id)) {
+      await collectionRemovePost(c.id, props.thread.id);
+    } else {
+      await collectionAddPost(c.id, props.thread.id);
+    }
+    await mutate(getThreadListKey({}));
 
-      setSelected(selected + 1);
-    };
+    setSelected(selected + 1);
+  };
 
   const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (e.shiftKey) setMultiSelect(true);

web/src/components/ui/accordion.tsx

@@ -0,0 +1,28 @@
+import * as Ark from "@ark-ui/react/accordion";
+import { styled } from "styled-system/jsx";
+import { type AccordionVariantProps, accordion } from "styled-system/recipes";
+
+import { createStyleContext } from "src/lib/create-style-context";
+
+const { withProvider, withContext } = createStyleContext(accordion);
+
+export * from "@ark-ui/react/accordion";
+export type AccordionProps = Ark.AccordionProps & AccordionVariantProps;
+
+const AccordionRoot = withProvider(styled(Ark.Accordion.Root), "root");
+export const AccordionContent = withContext(
+  styled(Ark.Accordion.Content),
+  "content",
+);
+export const AccordionItem = withContext(styled(Ark.Accordion.Item), "item");
+export const AccordionTrigger = withContext(
+  styled(Ark.Accordion.Trigger),
+  "trigger",
+);
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Root: AccordionRoot,
+  Content: AccordionContent,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+});

web/src/components/ui/alert.tsx

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { styled } from "styled-system/jsx";
+import { type AlertVariantProps, alert } from "styled-system/recipes";
+
+export type AlertProps = AlertVariantProps & ComponentPropsWithoutRef<"div">;
+export const Alert = styled("div", alert);

web/src/components/ui/avatar.tsx

@@ -0,0 +1,23 @@
+import * as Ark from "@ark-ui/react/avatar";
+import { styled } from "styled-system/jsx";
+import { type AvatarVariantProps, avatar } from "styled-system/recipes";
+
+import { createStyleContext } from "src/lib/create-style-context";
+
+const { withProvider, withContext } = createStyleContext(avatar);
+
+export * from "@ark-ui/react/avatar";
+export type AvatarProps = Ark.AvatarProps & AvatarVariantProps;
+
+const AvatarRoot = withProvider(styled(Ark.Avatar.Root), "root");
+export const AvatarFallback = withContext(
+  styled(Ark.Avatar.Fallback),
+  "fallback",
+);
+export const AvatarImage = withContext(styled(Ark.Avatar.Image), "image");
+
+export const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Fallback: AvatarFallback,
+  Image: AvatarImage,
+});

web/src/components/ui/badge.tsx

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from 'react'
+import { styled } from 'styled-system/jsx'
+import { badge, type BadgeVariantProps } from 'styled-system/recipes'
+
+export type BadgeProps = BadgeVariantProps & ComponentPropsWithoutRef<'div'>
+export const Badge = styled('div', badge)

web/src/components/ui/button.tsx

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from 'react'
+import { styled } from 'styled-system/jsx'
+import { button, type ButtonVariantProps } from 'styled-system/recipes'
+
+export type ButtonProps = ButtonVariantProps & ComponentPropsWithoutRef<'button'>
+export const Button = styled('button', button)

web/src/components/ui/carousel.tsx

@@ -0,0 +1,53 @@
+import * as Ark from "@ark-ui/react/carousel";
+import { styled } from "styled-system/jsx";
+import { type CarouselVariantProps, carousel } from "styled-system/recipes";
+
+import { createStyleContext } from "src/lib/create-style-context";
+
+const { withProvider, withContext } = createStyleContext(carousel);
+
+export * from "@ark-ui/react/carousel";
+export type CarouselProps = Ark.CarouselProps & CarouselVariantProps;
+
+const CarouselRoot = withProvider(styled(Ark.Carousel.Root), "root");
+export const CarouselControl = withContext(
+  styled(Ark.Carousel.Control),
+  "control",
+);
+export const CarouselIndicator = withContext(
+  styled(Ark.Carousel.Indicator),
+  "indicator",
+);
+export const CarouselIndicatorGroup = withContext(
+  styled(Ark.Carousel.IndicatorGroup),
+  "indicatorGroup",
+);
+export const CarouselNextSlideTrigger = withContext(
+  styled(Ark.Carousel.NextSlideTrigger),
+  "nextSlideTrigger",
+);
+export const CarouselPrevSlideTrigger = withContext(
+  styled(Ark.Carousel.PrevSlideTrigger),
+  "prevSlideTrigger",
+);
+export const CarouselSlide = withContext(styled(Ark.Carousel.Slide), "slide");
+export const CarouselSlideGroup = withContext(
+  styled(Ark.Carousel.SlideGroup),
+  "slideGroup",
+);
+export const CarouselViewport = withContext(
+  styled(Ark.Carousel.Viewport),
+  "viewport",
+);
+
+export const Carousel = Object.assign(CarouselRoot, {
+  Root: CarouselRoot,
+  Control: CarouselControl,
+  Indicator: CarouselIndicator,
+  IndicatorGroup: CarouselIndicatorGroup,
+  NextSlideTrigger: CarouselNextSlideTrigger,
+  PrevSlideTrigger: CarouselPrevSlideTrigger,
+  Slide: CarouselSlide,
+  SlideGroup: CarouselSlideGroup,
+  Viewport: CarouselViewport,
+});

web/src/components/ui/checkbox.tsx

@@ -0,0 +1,23 @@
+import * as Ark from "@ark-ui/react/checkbox";
+import { styled } from "styled-system/jsx";
+import { type CheckboxVariantProps, checkbox } from "styled-system/recipes";
+
+import { createStyleContext } from "src/lib/create-style-context";
+
+const { withProvider, withContext } = createStyleContext(checkbox);
+
+export * from "@ark-ui/react/checkbox";
+export type CheckboxProps = Ark.CheckboxProps & CheckboxVariantProps;
+
+const CheckboxRoot = withProvider(styled(Ark.Checkbox.Root), "root");
+export const CheckboxControl = withContext(
+  styled(Ark.Checkbox.Control),
+  "control",
+);
+export const CheckboxLabel = withContext(styled(Ark.Checkbox.Label), "label");
+
+export const Checkbox = Object.assign(CheckboxRoot, {
+  Root: CheckboxRoot,
+  Control: CheckboxControl,
+  Label: CheckboxLabel,
+});