Add Header component and update TS and Rollup config

.prettierignore

@@ -0,0 +1 @@
+tsconfig.json

package.json

@@ -30,11 +30,7 @@
     "build-storybook": "storybook build --test",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
-  "devDependencies": {
-    "@babel/core": "7.23.7",
-    "@babel/preset-env": "7.23.7",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+  "dependencies": {
     "@curiousleaf/utils": "^1.0.12",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -50,6 +46,16 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tabler/icons-react": "^2.45.0",
+    "clsx": "^2.1.0",
+    "cva": "^1.0.0-beta.1",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.23.7",
+    "@babel/preset-env": "7.23.7",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
@@ -66,7 +72,6 @@
     "@storybook/react-vite": "^7.6.8",
     "@storybook/test": "^7.6.8",
     "@storybook/theming": "^7.6.8",
-    "@tabler/icons-react": "^2.45.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/react": "^18.2.47",
@@ -76,8 +81,6 @@
     "auto": "10.46.0",
     "autoprefixer": "^10.4.16",
     "chromatic": "^10.2.0",
-    "clsx": "^2.1.0",
-    "cva": "^1.0.0-beta.1",
     "dedent": "^0.7.0",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
@@ -99,7 +102,6 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.6.8",
-    "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.8",

rollup.config.mjs

@@ -1,7 +1,7 @@
-import { babel } from "@rollup/plugin-babel"
+// import { babel } from "@rollup/plugin-babel"
 import commonjs from "@rollup/plugin-commonjs"
 import { nodeResolve } from "@rollup/plugin-node-resolve"
-import terser from "@rollup/plugin-terser"
+// import terser from "@rollup/plugin-terser"
 import typescript from "@rollup/plugin-typescript"
 import { createRequire } from "node:module"
 import { dts } from "rollup-plugin-dts"
@@ -31,7 +31,7 @@ export default [
       {
         file: packageJson.module,
         format: "esm",
-        exports: "named",
+        // exports: "named",
         sourcemap: true,
       },
     ],
@@ -40,12 +40,12 @@ export default [
       typescript(),
       nodeResolve(),
       commonjs(),
-      terser(),
-      babel({
-        babelHelpers: "bundled",
-        extensions: [".ts", ".tsx"],
-        exclude: "node_modules/**",
-      }),
+      // terser(),
+      // babel({
+      //   babelHelpers: "bundled",
+      //   extensions: [".ts", ".tsx"],
+      //   exclude: "node_modules/**",
+      // }),
     ],
     external: ["react", "react-dom"],
   },

src/index.ts

@@ -24,6 +24,7 @@ export * from "./typography/Subheading"
 
 // Layout
 export * from "./layout/Container"
+export * from "./layout/Header"
 export * from "./layout/Sidebar"
 
 // Utils

src/layout/Container/Container.stories.tsx

@@ -9,7 +9,7 @@ export default {
   title: "Layout/Container",
   component: Container,
   parameters: {
-    layout: "fullscreen",
+    layout: "padded",
   },
   args: {
     ...Container.defaultProps,

src/layout/Container/Container.variants.ts

@@ -1,5 +1,5 @@
 import { cva } from "~/shared/cva"
 
 export const containerVariants = cva({
-  base: "container mx-auto px-8",
+  base: "container mx-auto w-full px-8",
 })

src/layout/Header/Header.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { IconBellRinging, IconCalendar, IconPlus, IconSearch, IconTable } from "@tabler/icons-react"
+
+import { Button } from "~/ui/Button"
+
+import { Header } from "./Header"
+
+type Story = StoryObj<typeof Header>
+
+// Meta
+export default {
+  title: "Layout/Header",
+  component: Header,
+  parameters: {
+    layout: "padded",
+  },
+  args: {
+    ...Header.defaultProps,
+    size: "lg",
+    avatar: {
+      children: <IconTable />,
+      variant: "outline",
+      theme: "gray",
+    },
+    title: "Insert page title here",
+    description: "Insert page description here",
+    children: (
+      <div className="flex items-center gap-3">
+        <Button theme="gray" variant="ghost" prefix={<IconSearch />} />
+        <Button theme="gray" variant="ghost" prefix={<IconBellRinging />} />
+        <Button theme="gray" variant="outline" prefix={<IconCalendar />}>
+          Schedule
+        </Button>
+        <Button prefix={<IconPlus />}>Create Request</Button>
+      </div>
+    ),
+  },
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
+} satisfies Story

src/layout/Header/Header.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from "react"
+import type { HTMLAttributes } from "react"
+
+import { cx, type VariantProps } from "~/shared/cva"
+import { Blurb, type BlurbProps } from "~/ui/Blurb"
+
+import { headerBlurbVariants, headerVariants } from "./Header.variants"
+
+export type HeaderElement = HTMLDivElement
+
+export type HeaderProps = HTMLAttributes<HeaderElement> &
+  BlurbProps &
+  VariantProps<typeof headerVariants>
+
+export const Header = forwardRef<HeaderElement, HeaderProps>((props, ref) => {
+  const { className, ...rest } = props
+
+  return (
+    <div ref={ref} className={cx(headerVariants({ className }))} {...rest}>
+      <Blurb className={cx(headerBlurbVariants())} {...rest} />
+    </div>
+  )
+})
+
+Header.defaultProps = {}
+
+Header.displayName = "Header"

src/layout/Header/Header.variants.ts

@@ -0,0 +1,9 @@
+import { cva } from "~/shared/cva"
+
+export const headerVariants = cva({
+  base: "flex flex-wrap items-center gap-y-2 gap-x-6 lg:gap-x-12",
+})
+
+export const headerBlurbVariants = cva({
+  base: "flex-1",
+})

src/layout/Header/index.ts

@@ -0,0 +1,2 @@
+export { Header } from "./Header"
+export type { HeaderProps, HeaderElement } from "./Header"

src/ui/Avatar/Avatar.variants.ts

@@ -13,7 +13,7 @@ export const avatarVariants = cva({
       purple: "from-purple-lighter to-purple-light text-purple-dark",
       pink: "from-pink-lighter to-pink-light text-pink-dark",
       teal: "from-teal-lighter to-teal-light text-teal-dark",
-      gray: "from-gray-100 to-gray-200 text-gray-700",
+      gray: "from-gray-100 to-gray-200 text-gray-600",
     },
     variant: {
       soft: "bg-gradient-to-b",
@@ -60,5 +60,5 @@ export const avatarImageVariants = cva({
 })
 
 export const avatarFallbackVariants = cva({
-  base: "font-medium whitespace-nowrap rounded-[inherit]",
+  base: "font-medium whitespace-nowrap",
 })

src/ui/AvatarGroup/AvatarGroup.tsx

@@ -13,10 +13,10 @@ export type AvatarGroupElement = HTMLDivElement
 
 type AvatarGroupAvatarProps = Omit<AvatarProps, "size" | "asChild">
 
-export type AvatarGroupProps = HTMLAttributes<AvatarGroupElement> &
+export type AvatarGroupRootProps = HTMLAttributes<AvatarGroupElement> &
   VariantProps<typeof avatarGroupVariants>
 
-export type AvatarGroupBaseProps = AvatarGroupProps &
+export type AvatarGroupProps = AvatarGroupRootProps &
   VariantProps<typeof avatarVariants> & {
     /**
      * The items to display in the group.
@@ -35,15 +35,17 @@ export type AvatarGroupBaseProps = AvatarGroupProps &
     previousOnTop?: boolean
   }
 
-export const AvatarGroupRoot = forwardRef<AvatarGroupElement, AvatarGroupProps>((props, ref) => {
-  const { children, className, size, ...rest } = props
+export const AvatarGroupRoot = forwardRef<AvatarGroupElement, AvatarGroupRootProps>(
+  (props, ref) => {
+    const { children, className, size, ...rest } = props
 
-  return (
-    <div ref={ref} className={cx(avatarGroupVariants({ size, className }))} {...rest}>
-      {children}
-    </div>
-  )
-})
+    return (
+      <div ref={ref} className={cx(avatarGroupVariants({ size, className }))} {...rest}>
+        {children}
+      </div>
+    )
+  },
+)
 
 type AvatarGroupLabelProps = ComponentPropsWithoutRef<typeof Avatar> & {
   /**
@@ -83,7 +85,7 @@ const AvatarGroupItem = forwardRef<AvatarElement, ComponentPropsWithoutRef<typeo
   },
 )
 
-const AvatarGroupBase = forwardRef<AvatarGroupElement, AvatarGroupBaseProps>((props, ref) => {
+const AvatarGroupBase = forwardRef<AvatarGroupElement, AvatarGroupProps>((props, ref) => {
   const { children, items, theme, size, shape, previousOnTop, label, ...rest } = props
   const avatarProps = { theme, size, shape }
 

src/ui/Blurb/Blurb.tsx

@@ -16,7 +16,7 @@ import {
 
 export type BlurbElement = HTMLDivElement
 
-type BlurbProps = ComponentPropsWithoutRef<"div"> &
+type BlurbRootProps = ComponentPropsWithoutRef<"div"> &
   VariantProps<typeof blurbVariants> & {
     /**
      * If set to `true`, the button will be rendered as a child within the component.
@@ -25,7 +25,7 @@ type BlurbProps = ComponentPropsWithoutRef<"div"> &
     asChild?: boolean
   }
 
-export type BlurbBaseProps = BlurbProps & {
+export type BlurbProps = BlurbRootProps & {
   /**
    * Represents the avatar displayed on the Blurb.
    */
@@ -47,12 +47,14 @@ export type BlurbBaseProps = BlurbProps & {
   size?: "sm" | "md" | "lg"
 }
 
-const BlurbRoot = forwardRef<BlurbElement, BlurbProps>(({ className, asChild, ...props }, ref) => {
-  const useAsChild = asChild && isValidElement(props.children)
-  const Component = useAsChild ? Slot : "div"
+const BlurbRoot = forwardRef<BlurbElement, BlurbRootProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const useAsChild = asChild && isValidElement(props.children)
+    const Component = useAsChild ? Slot : "div"
 
-  return <Component ref={ref} className={cx(blurbVariants({ className }))} {...props} />
-})
+    return <Component ref={ref} className={cx(blurbVariants({ className }))} {...props} />
+  },
+)
 
 const BlurbAvatar = forwardRef<AvatarElement, AvatarProps>(({ size = "lg", ...props }, ref) => {
   return <Avatar ref={ref} size={size} {...props} />
@@ -106,7 +108,7 @@ const BlurbDescription = forwardRef<
   )
 })
 
-const BlurbBase = forwardRef<BlurbElement, BlurbBaseProps>((props, ref) => {
+const BlurbBase = forwardRef<BlurbElement, BlurbProps>((props, ref) => {
   const { children, avatar, title, description, size, ...rest } = props
 
   return (

src/ui/FeatureCard/FeatureCard.tsx

@@ -11,7 +11,7 @@ import { featureCardCloserVariants, featureCardVariants } from "./FeatureCard.va
 
 export type FeatureCardElement = HTMLDivElement
 
-export type FeatureCardProps = HTMLAttributes<FeatureCardElement> &
+export type FeatureCardRootProps = HTMLAttributes<FeatureCardElement> &
   VariantProps<typeof featureCardVariants> & {
     /**
      * If set to `true`, the button will be rendered as a child within the component.
@@ -20,7 +20,7 @@ export type FeatureCardProps = HTMLAttributes<FeatureCardElement> &
     asChild?: boolean
   }
 
-export type FeatureCardBaseProps = FeatureCardProps & {
+export type FeatureCardProps = FeatureCardRootProps & {
   /**
    * If set to `true`, it'll render a closer button.
    */
@@ -36,7 +36,7 @@ type FeatureCardCloserProps = ButtonHTMLAttributes<HTMLButtonElement> &
     asChild?: boolean
   }
 
-const FeatureCardRoot = forwardRef<FeatureCardElement, FeatureCardProps>((props, ref) => {
+const FeatureCardRoot = forwardRef<FeatureCardElement, FeatureCardRootProps>((props, ref) => {
   const { className, asChild, theme: propTheme, variant, ...rest } = props
 
   const globalTheme = useTheme()
@@ -67,24 +67,22 @@ const FeatureCardCloser = forwardRef<HTMLButtonElement, FeatureCardCloserProps>(
   )
 })
 
-export const FeatureCardBase = forwardRef<FeatureCardElement, FeatureCardBaseProps>(
-  (props, ref) => {
-    const { children, asChild, closer, ...rest } = props
-
-    return (
-      <FeatureCardRoot ref={ref} asChild={asChild} {...rest}>
-        <Slottable child={children} asChild={asChild}>
-          {(child) => (
-            <>
-              {child}
-              {closer && <FeatureCardCloser />}
-            </>
-          )}
-        </Slottable>
-      </FeatureCardRoot>
-    )
-  },
-)
+export const FeatureCardBase = forwardRef<FeatureCardElement, FeatureCardProps>((props, ref) => {
+  const { children, asChild, closer, ...rest } = props
+
+  return (
+    <FeatureCardRoot ref={ref} asChild={asChild} {...rest}>
+      <Slottable child={children} asChild={asChild}>
+        {(child) => (
+          <>
+            {child}
+            {closer && <FeatureCardCloser />}
+          </>
+        )}
+      </Slottable>
+    </FeatureCardRoot>
+  )
+})
 
 export const FeatureCard = Object.assign(FeatureCardBase, {
   Root: FeatureCardRoot,