Add Sidebar component

package.json

@@ -35,6 +35,7 @@
     "@babel/preset-env": "7.23.7",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@curiousleaf/utils": "^1.0.12",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",

src/ui/AvatarGroup/AvatarGroup.tsx

@@ -35,13 +35,6 @@ export type AvatarGroupProps = HTMLAttributes<AvatarGroupElement> &
     previousOnTop?: boolean
   }
 
-type AvatarGroupLabelProps = ComponentPropsWithoutRef<typeof Avatar> & {
-  /**
-   * The label to display.
-   */
-  label?: ReactNode
-}
-
 export const AvatarGroupRoot = forwardRef<AvatarGroupElement, AvatarGroupProps>((props, ref) => {
   const { children, className, size, ...rest } = props
 
@@ -52,6 +45,13 @@ export const AvatarGroupRoot = forwardRef<AvatarGroupElement, AvatarGroupProps>(
   )
 })
 
+type AvatarGroupLabelProps = ComponentPropsWithoutRef<typeof Avatar> & {
+  /**
+   * The label to display.
+   */
+  label?: ReactNode
+}
+
 const AvatarGroupLabel = forwardRef<AvatarElement, AvatarGroupLabelProps>(
   ({ children, className, label, ...rest }, ref) => {
     return (

src/ui/FeatureCard/FeatureCard.tsx

@@ -4,7 +4,7 @@ import { forwardRef, isValidElement } from "react"
 import type { ButtonHTMLAttributes, HTMLAttributes } from "react"
 
 import { useTheme } from "~/providers"
-import { type VariantProps } from "~/shared/cva"
+import { cx, type VariantProps } from "~/shared/cva"
 import { Slottable } from "~/utils/Slottable"
 
 import { featureCardCloserVariants, featureCardVariants } from "./FeatureCard.variants"
@@ -25,15 +25,6 @@ export type FeatureCardProps = HTMLAttributes<FeatureCardElement> &
     closer?: boolean
   }
 
-type FeatureCardCloserProps = ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof featureCardCloserVariants> & {
-    /**
-     * If set to `true`, the button will be rendered as a child within the component.
-     * This child component must be a valid React component.
-     */
-    asChild?: boolean
-  }
-
 const FeatureCardRoot = forwardRef<FeatureCardElement, FeatureCardProps>((props, ref) => {
   const { className, asChild, theme: propTheme, variant, ...rest } = props
 
@@ -44,18 +35,31 @@ const FeatureCardRoot = forwardRef<FeatureCardElement, FeatureCardProps>((props,
   const Component = useAsChild ? Slot : "div"
 
   return (
-    <Component className={featureCardVariants({ theme, variant, className })} ref={ref} {...rest} />
+    <Component
+      className={cx(featureCardVariants({ theme, variant, className }))}
+      ref={ref}
+      {...rest}
+    />
   )
 })
 
+type FeatureCardCloserProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof featureCardCloserVariants> & {
+    /**
+     * If set to `true`, the button will be rendered as a child within the component.
+     * This child component must be a valid React component.
+     */
+    asChild?: boolean
+  }
+
 const FeatureCardCloser = forwardRef<HTMLButtonElement, FeatureCardCloserProps>((props, ref) => {
   const { children, className, asChild, ...rest } = props
 
   const useAsChild = asChild && isValidElement(children)
   const Component = useAsChild ? Slot : "button"
 
   return (
-    <Component ref={ref} className={featureCardCloserVariants({ className })} {...rest}>
+    <Component ref={ref} className={cx(featureCardCloserVariants({ className }))} {...rest}>
       {useAsChild ? children : <IconX />}
     </Component>
   )

src/ui/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { FeatureCard } from "~/ui/FeatureCard"
+import { default as FeatureCardDefault } from "~/ui/FeatureCard/FeatureCard.stories"
+
+import { Sidebar } from "./Sidebar"
+
+type Story = StoryObj<typeof Sidebar>
+
+// Meta
+export default {
+  title: "UI/Sidebar",
+  component: Sidebar,
+  args: {
+    ...Sidebar.defaultProps,
+    children: (
+      <>
+        Witam
+        <Sidebar.Separator />
+        <div className="flex-1" />
+        <FeatureCard theme="gray" variant="outline" closer>
+          {FeatureCardDefault.args.children}
+        </FeatureCard>
+        <Sidebar.Separator />
+        Żegnam
+      </>
+    ),
+  },
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
+} satisfies Story

src/ui/Sidebar/Sidebar.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react"
+import type { HTMLAttributes } from "react"
+
+import { cx, type VariantProps } from "~/shared/cva"
+
+import { sidebarSeparatorVariants, sidebarVariants } from "./Sidebar.variants"
+
+export type SidebarElement = HTMLDivElement
+
+export type SidebarProps = HTMLAttributes<SidebarElement> & VariantProps<typeof sidebarVariants>
+
+const SidebarBase = forwardRef<SidebarElement, SidebarProps>((props, ref) => {
+  const { className, ...rest } = props
+
+  return <div className={cx(sidebarVariants({ className }))} ref={ref} {...rest} />
+})
+
+const SidebarSeparator = forwardRef<HTMLHRElement, HTMLAttributes<HTMLHRElement>>((props, ref) => {
+  const { className, ...rest } = props
+
+  return <hr className={cx(sidebarSeparatorVariants({ className }))} ref={ref} {...rest} />
+})
+
+export const Sidebar = Object.assign(SidebarBase, {
+  Separator: SidebarSeparator,
+})
+
+Sidebar.defaultProps = {}
+
+Sidebar.displayName = "Sidebar"

src/ui/Sidebar/Sidebar.variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "~/shared/cva"
+
+export const sidebarVariants = cva({
+  base: "sticky top-0 z-40 flex h-screen w-72 shrink-0 flex-col gap-y-5 overflow-y-scroll border-r p-5",
+
+  variants: {
+    theme: {
+      blue: "",
+      orange: "",
+      red: "",
+      yellow: "",
+      green: "",
+      purple: "",
+      pink: "",
+      teal: "",
+      gray: "",
+    },
+    variant: {
+      solid: "",
+      soft: "",
+      outline: "border-gray-200",
+    },
+  },
+
+  defaultVariants: {
+    theme: "gray",
+    variant: "soft",
+  },
+})
+
+export const sidebarSeparatorVariants = cva({
+  base: "-mx-5",
+})

src/ui/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from "./Sidebar"
+export type { SidebarProps, SidebarElement } from "./Sidebar"