GitButler Integration Commit

This is an integration commit for the virtual branches that GitButler is tracking.

Due to GitButler managing multiple virtual branches, you cannot switch back and
forth between git branches and virtual branches easily. 

If you switch to another branch, GitButler will need to be reinitialized.
If you commit on this branch, GitButler will throw it away.

Here are the branches that are currently applied:
 - Add status component and variants (refs/gitbutler/Add-status-component-and-variants)
   - src/ui/Alert/Alert.stories.tsx
   - src/ui/Button/Button.variants.ts
   - src/shared/classes.ts
   - src/layout/Wrapper/Wrapper.variants.ts
   - src/ui/Plan/Plan.tsx
   - src/ui/Modal/Modal.variants.ts
   - src/ui/Plan/Plan.variants.ts
   - tailwind.config.ts
   - src/styles/tailwind.css
   - src/index.ts
   - src/ui/Plan/Plan.stories.tsx
   - src/ui/Alert/Alert.tsx
   - src/ui/Plan/index.ts
 - Add tailwind and Chromatic CI
 (refs/gitbutler/Add-tailwind-and-Chromatic-CI-)
   branch head: bb864771e1c4b08c39d6404ff65c64d6f0a4edaa

Your previous branch was: refs/heads/main

The sha for that commit was: 4638343

For more information about what we're doing here, check out our docs:
https://docs.gitbutler.com/features/virtual-branches/integration-branch

src/index.ts

@@ -3,6 +3,7 @@ export * from "./shared"
 // UI
 export * from "./ui/Accordion"
 export * from "./ui/Action"
+export * from "./ui/Alert"
 export * from "./ui/Avatar"
 export * from "./ui/AvatarGroup"
 export * from "./ui/Backdrop"
@@ -19,6 +20,7 @@ export * from "./ui/Dropdown"
 export * from "./ui/FeatureCard"
 export * from "./ui/MenuItem"
 export * from "./ui/Modal"
+export * from "./ui/Plan"
 export * from "./ui/Popover"
 export * from "./ui/ProgressBar"
 export * from "./ui/ProgressRing"

src/layout/Wrapper/Wrapper.variants.ts

@@ -5,5 +5,5 @@ export const wrapperVariants = cva({
 })
 
 export const wrapperContentVariants = cva({
-  base: "w-full m-2 bg-white border rounded-xl",
+  base: "w-full m-2 bg-white border rounded-2xl",
 })

src/shared/classes.ts

@@ -1,5 +1,5 @@
 export const focusClasses =
-  "focus-visible:border-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-300 focus-visible:z-10"
+  "focus-visible:border-gray-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-gray-300 focus-visible:z-10"
 
 export const focusWithinClasses =
-  "focus-within:border-gray-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-300 focus-within:z-10"
+  "focus-within:border-gray-500 focus-within:outline-none focus-within:ring-[3px] focus-within:ring-gray-300 focus-within:z-10"

src/styles/tailwind.css

@@ -24,3 +24,11 @@ svg[stroke="currentColor"]:not([class*="size"]) {
   @apply bg-gray-900;
   @apply text-white;
 }
+
+
+@supports (mask-image: paint(smooth-corners)) {
+  .squircle {
+    mask-image: paint(smooth-corners);
+    --smooth-corners: 3;
+  }
+}

src/ui/Alert/Alert.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Alert } from "./Alert"
+
+type Story = StoryObj<typeof Alert>
+
+// Meta
+export default {
+  title: "UI/Alert",
+  component: Alert,
+  args: {
+    ...Alert.defaultProps,
+  },
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
+} satisfies Story

src/ui/Alert/Alert.tsx

@@ -64,7 +64,7 @@ export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title" | "prefix"
      * This can be used to render an icon
      * or any other element prefix the description. Also accepts a string,
      * number, or any valid React element.
-     * If the `prefix` prop is omitted, the default icon will be displayed.
+     * If omitted, it will not be displayed.
      *
      * @example
      * // Display an alert with icon

src/ui/Button/Button.variants.ts

@@ -12,7 +12,7 @@ export const buttonVariants = cva({
       primary:
         "border-primary-dark/25 text-primary-dark hover:border-primary-dark/40 focus-visible:border-primary-dark/40 focus-visible:ring-primary-light",
       secondary:
-        "border-inherit text-gray-600 hover:border-gray-300 focus-visible:border-gray-3000 focus-visible:ring-gray-300",
+        "border-inherit text-gray-600 hover:border-gray-300 focus-visible:border-gray-500 focus-visible:ring-gray-300",
       positive:
         "border-green-dark/25 text-green-dark hover:border-green-dark/40 focus-visible:border-green-dark/40 focus-visible:ring-green-light",
       negative:

src/ui/Modal/Modal.variants.ts

@@ -11,6 +11,8 @@ export const modalVariants = cva({
       xl: "max-w-xl",
       "2xl": "max-w-2xl",
       "3xl": "max-w-3xl",
+      "4xl": "max-w-4xl",
+      "5xl": "max-w-5xl",
     },
     fixed: {
       true: "top-[10vh] max-h-[calc(90vh-2rem)] [[role=dialog]~&]:top-[15vh] [[role=dialog]~&]:max-h-[calc(85vh-2rem)]",

src/ui/Plan/Plan.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Plan } from "./Plan"
+
+type Story = StoryObj<typeof Plan>
+
+// Meta
+export default {
+  title: "UI/Plan",
+  component: Plan,
+  args: {
+    ...Plan.defaultProps,
+  },
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
+} satisfies Story

src/ui/Plan/Plan.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import { Slot } from "@radix-ui/react-slot"
+import { type HTMLAttributes, ReactNode, forwardRef } from "react"
+
+import { type VariantProps, cx, isReactElement } from "../../shared"
+
+import { formatIntervalAmount } from "@curiousleaf/utils"
+import { IconCheck } from "../../icons/IconCheck"
+import { IconClose } from "../../icons/IconClose"
+import { H3 } from "../../typography/Heading"
+import { Paragraph } from "../../typography/Paragraph"
+import { Card } from "../Card"
+import { Series } from "../Series"
+import { planFeatureCheckVariants, planFeatureVariants, planVariants } from "./Plan.variants"
+
+export type PlanElement = HTMLDivElement
+
+export type PlanProps = Omit<HTMLAttributes<PlanElement>, "size"> &
+  VariantProps<typeof planVariants> & {
+    /**
+     * 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
+
+    /**
+     * The price of the plan.
+     */
+    price: {
+      /**
+       * The unit amount of the price.
+       */
+      amount: number
+
+      /**
+       * The interval of the price.
+       */
+      interval: "month" | "year"
+    }
+
+    /**
+     * The name of the plan.
+     */
+    name: string
+
+    /**
+     * The description of the plan.
+     */
+    description?: string
+
+    /**
+     * The features of the plan.
+     */
+    features?: {
+      /**
+       * The text of the feature.
+       */
+      text: string
+
+      /**
+       * The footnote of the feature.
+       */
+      footnote?: ReactNode | string
+
+      /**
+       * The type of the feature.
+       */
+      type?: "positive" | "negative"
+    }[]
+  }
+
+export const Plan = forwardRef<PlanElement, PlanProps>((props, ref) => {
+  const { children, className, asChild, price, name, description, features, isFeatured, ...rest } =
+    props
+
+  const useAsChild = asChild && isReactElement(children)
+  const Component = useAsChild ? Slot : "div"
+
+  return (
+    <Card asChild>
+      <Component ref={ref} className={cx(planVariants({ isFeatured, className }))} {...rest}>
+        <div className="space-y-3">
+          <H3>{name}</H3>
+
+          {description && (
+            <Paragraph size="sm" wrap="pretty" className="text-gray-600">
+              {description}
+            </Paragraph>
+          )}
+        </div>
+
+        <div className="relative flex flex-wrap items-end gap-1 font-medium">
+          <span className="text-xl/none text-gray-400">$</span>
+
+          <span className="text-black text-4xl font-bold !leading-[0.85em]">
+            {formatIntervalAmount(price.amount, price.interval)}
+          </span>
+
+          <div className="text-xs text-gray-500">
+            /mo
+            {price.interval === "year" && <div>billed annually</div>}
+          </div>
+        </div>
+
+        {!!features?.length && (
+          <Series direction="column" className="mb-auto">
+            {features.map(({ type, text }) => (
+              <div key={text} className={cx(planFeatureVariants())}>
+                <Slot className={cx(planFeatureCheckVariants({ type }))}>
+                  {type === "negative" ? <IconClose /> : <IconCheck />}
+                </Slot>
+
+                <span className={cx(type === "negative" && "text-gray-500")}>{text}</span>
+              </div>
+            ))}
+          </Series>
+        )}
+
+        {children}
+      </Component>
+    </Card>
+  )
+})
+
+Plan.defaultProps = {
+  asChild: false,
+  isFeatured: false,
+}
+
+Plan.displayName = "Plan"

src/ui/Plan/Plan.variants.ts

@@ -0,0 +1,30 @@
+import { cva } from "../../shared"
+
+export const planVariants = cva({
+  base: "gap-8 p-4 min-w-64 md:p-6",
+
+  variants: {
+    isFeatured: {
+      true: "border-gray-400",
+    },
+  },
+
+  defaultVariants: {
+    isFeatured: false,
+  },
+})
+
+export const planFeatureVariants = cva({
+  base: "flex gap-3 text-sm",
+})
+
+export const planFeatureCheckVariants = cva({
+  base: "shrink-0 p-1 text-white rounded-smooth",
+
+  variants: {
+    type: {
+      positive: "bg-green",
+      negative: "bg-gray-400",
+    },
+  },
+})

src/ui/Plan/index.ts

@@ -0,0 +1 @@
+export * from "./Plan"

tailwind.config.ts

@@ -159,7 +159,7 @@ export default {
     require("tailwindcss-animate"),
 
     // Custom grid utilities
-    plugin(({ addUtilities, matchUtilities, theme }) => {
+    plugin(({ addUtilities, matchUtilities, addBase, theme }) => {
       matchUtilities(
         {
           "grid-auto-fill": value => ({
@@ -181,6 +181,12 @@ export default {
           },
         },
       })
+      addBase({
+        ".rounded-smooth": {
+          clipPath:
+            "polygon(100% 50%, 100% 56.6%, 100% 59.3%, 100% 61.4%, 99.9% 63.2%, 99.9% 64.8%, 99.9% 66.2%, 99.8% 67.5%, 99.8% 68.7%, 99.7% 69.8%, 99.6% 70.8%, 99.5% 71.8%, 99.5% 72.8%, 99.4% 73.7%, 99.3% 74.6%, 99.1% 75.4%, 99% 76.3%, 98.9% 77%, 98.8% 77.8%, 98.6% 78.5%, 98.5% 79.2%, 98.3% 79.9%, 98.1% 80.6%, 98% 81.3%, 97.8% 81.9%, 97.6% 82.5%, 97.4% 83.1%, 97.2% 83.7%, 97% 84.3%, 96.8% 84.8%, 96.5% 85.4%, 96.3% 85.9%, 96% 86.4%, 95.8% 86.9%, 95.5% 87.4%, 95.3% 87.9%, 95% 88.3%, 94.7% 88.8%, 94.4% 89.2%, 94.1% 89.7%, 93.8% 90.1%, 93.4% 90.5%, 93.1% 90.9%, 92.8% 91.3%, 92.4% 91.7%, 92% 92%, 91.7% 92.4%, 91.3% 92.8%, 90.9% 93.1%, 90.5% 93.4%, 90.1% 93.8%, 89.7% 94.1%, 89.2% 94.4%, 88.8% 94.7%, 88.3% 95%, 87.9% 95.3%, 87.4% 95.5%, 86.9% 95.8%, 86.4% 96%, 85.9% 96.3%, 85.4% 96.5%, 84.8% 96.8%, 84.3% 97%, 83.7% 97.2%, 83.1% 97.4%, 82.5% 97.6%, 81.9% 97.8%, 81.3% 98%, 80.6% 98.1%, 79.9% 98.3%, 79.2% 98.5%, 78.5% 98.6%, 77.8% 98.8%, 77% 98.9%, 76.3% 99%, 75.4% 99.1%, 74.6% 99.3%, 73.7% 99.4%, 72.8% 99.5%, 71.8% 99.5%, 70.8% 99.6%, 69.8% 99.7%, 68.7% 99.8%, 67.5% 99.8%, 66.2% 99.9%, 64.8% 99.9%, 63.2% 99.9%, 61.4% 100%, 59.3% 100%, 56.6% 100%, 50% 100%, 43.4% 100%, 40.7% 100%, 38.6% 100%, 36.8% 99.9%, 35.2% 99.9%, 33.8% 99.9%, 32.5% 99.8%, 31.3% 99.8%, 30.2% 99.7%, 29.2% 99.6%, 28.2% 99.5%, 27.2% 99.5%, 26.3% 99.4%, 25.4% 99.3%, 24.6% 99.1%, 23.7% 99%, 23% 98.9%, 22.2% 98.8%, 21.5% 98.6%, 20.8% 98.5%, 20.1% 98.3%, 19.4% 98.1%, 18.7% 98%, 18.1% 97.8%, 17.5% 97.6%, 16.9% 97.4%, 16.3% 97.2%, 15.7% 97%, 15.2% 96.8%, 14.6% 96.5%, 14.1% 96.3%, 13.6% 96%, 13.1% 95.8%, 12.6% 95.5%, 12.1% 95.3%, 11.7% 95%, 11.2% 94.7%, 10.8% 94.4%, 10.3% 94.1%, 9.9% 93.8%, 9.5% 93.4%, 9.1% 93.1%, 8.7% 92.8%, 8.3% 92.4%, 8% 92%, 7.6% 91.7%, 7.2% 91.3%, 6.9% 90.9%, 6.6% 90.5%, 6.2% 90.1%, 5.9% 89.7%, 5.6% 89.2%, 5.3% 88.8%, 5% 88.3%, 4.7% 87.9%, 4.5% 87.4%, 4.2% 86.9%, 4% 86.4%, 3.7% 85.9%, 3.5% 85.4%, 3.2% 84.8%, 3% 84.3%, 2.8% 83.7%, 2.6% 83.1%, 2.4% 82.5%, 2.2% 81.9%, 2% 81.3%, 1.9% 80.6%, 1.7% 79.9%, 1.5% 79.2%, 1.4% 78.5%, 1.2% 77.8%, 1.1% 77%, 1% 76.3%, 0.9% 75.4%, 0.7% 74.6%, 0.6% 73.7%, 0.5% 72.8%, 0.5% 71.8%, 0.4% 70.8%, 0.3% 69.8%, 0.2% 68.7%, 0.2% 67.5%, 0.1% 66.2%, 0.1% 64.8%, 0.1% 63.2%, 0% 61.4%, 0% 59.3%, 0% 56.6%, 0% 50%, 0% 43.4%, 0% 40.7%, 0% 38.6%, 0.1% 36.8%, 0.1% 35.2%, 0.1% 33.8%, 0.2% 32.5%, 0.2% 31.3%, 0.3% 30.2%, 0.4% 29.2%, 0.5% 28.2%, 0.5% 27.2%, 0.6% 26.3%, 0.7% 25.4%, 0.9% 24.6%, 1% 23.7%, 1.1% 23%, 1.2% 22.2%, 1.4% 21.5%, 1.5% 20.8%, 1.7% 20.1%, 1.9% 19.4%, 2% 18.7%, 2.2% 18.1%, 2.4% 17.5%, 2.6% 16.9%, 2.8% 16.3%, 3% 15.7%, 3.2% 15.2%, 3.5% 14.6%, 3.7% 14.1%, 4% 13.6%, 4.2% 13.1%, 4.5% 12.6%, 4.7% 12.1%, 5% 11.7%, 5.3% 11.2%, 5.6% 10.8%, 5.9% 10.3%, 6.2% 9.9%, 6.6% 9.5%, 6.9% 9.1%, 7.2% 8.7%, 7.6% 8.3%, 8% 8%, 8.3% 7.6%, 8.7% 7.2%, 9.1% 6.9%, 9.5% 6.6%, 9.9% 6.2%, 10.3% 5.9%, 10.8% 5.6%, 11.2% 5.3%, 11.7% 5%, 12.1% 4.7%, 12.6% 4.5%, 13.1% 4.2%, 13.6% 4%, 14.1% 3.7%, 14.6% 3.5%, 15.2% 3.2%, 15.7% 3%, 16.3% 2.8%, 16.9% 2.6%, 17.5% 2.4%, 18.1% 2.2%, 18.7% 2%, 19.4% 1.9%, 20.1% 1.7%, 20.8% 1.5%, 21.5% 1.4%, 22.2% 1.2%, 23% 1.1%, 23.7% 1%, 24.6% 0.9%, 25.4% 0.7%, 26.3% 0.6%, 27.2% 0.5%, 28.2% 0.5%, 29.2% 0.4%, 30.2% 0.3%, 31.3% 0.2%, 32.5% 0.2%, 33.8% 0.1%, 35.2% 0.1%, 36.8% 0.1%, 38.6% 0%, 40.7% 0%, 43.4% 0%, 50% 0%, 56.6% 0%, 59.3% 0%, 61.4% 0%, 63.2% 0.1%, 64.8% 0.1%, 66.2% 0.1%, 67.5% 0.2%, 68.7% 0.2%, 69.8% 0.3%, 70.8% 0.4%, 71.8% 0.5%, 72.8% 0.5%, 73.7% 0.6%, 74.6% 0.7%, 75.4% 0.9%, 76.3% 1%, 77% 1.1%, 77.8% 1.2%, 78.5% 1.4%, 79.2% 1.5%, 79.9% 1.7%, 80.6% 1.9%, 81.3% 2%, 81.9% 2.2%, 82.5% 2.4%, 83.1% 2.6%, 83.7% 2.8%, 84.3% 3%, 84.8% 3.2%, 85.4% 3.5%, 85.9% 3.7%, 86.4% 4%, 86.9% 4.2%, 87.4% 4.5%, 87.9% 4.7%, 88.3% 5%, 88.8% 5.3%, 89.2% 5.6%, 89.7% 5.9%, 90.1% 6.2%, 90.5% 6.6%, 90.9% 6.9%, 91.3% 7.2%, 91.7% 7.6%, 92% 8%, 92.4% 8.3%, 92.8% 8.7%, 93.1% 9.1%, 93.4% 9.5%, 93.8% 9.9%, 94.1% 10.3%, 94.4% 10.8%, 94.7% 11.2%, 95% 11.7%, 95.3% 12.1%, 95.5% 12.6%, 95.8% 13.1%, 96% 13.6%, 96.3% 14.1%, 96.5% 14.6%, 96.8% 15.2%, 97% 15.7%, 97.2% 16.3%, 97.4% 16.9%, 97.6% 17.5%, 97.8% 18.1%, 98% 18.7%, 98.1% 19.4%, 98.3% 20.1%, 98.5% 20.8%, 98.6% 21.5%, 98.8% 22.2%, 98.9% 23%, 99% 23.7%, 99.1% 24.6%, 99.3% 25.4%, 99.4% 26.3%, 99.5% 27.2%, 99.5% 28.2%, 99.6% 29.2%, 99.7% 30.2%, 99.8% 31.3%, 99.8% 32.5%, 99.9% 33.8%, 99.9% 35.2%, 99.9% 36.8%, 100% 38.6%, 100% 40.7%, 100% 43.4%)",
+        },
+      })
     }),
   ],
 } satisfies Config