Implement new billing-gateway and update related services

Created a new package named billing-gateway which implements interfaces for different billing providers and provides a centralized service for payments. This will potentially help to maintain cleaner code by reducing direct dependencies on specific payment providers in the core application code. Additionally, made adjustments in existing services, like Stripe, to comply with this change. The relevant interfaces and types have been exported and imported accordingly.

packages/ui/README.md

@@ -5,4 +5,20 @@ This package is responsible for managing the UI components and styles across the
 This package define two sets of components:
 
 - `shadn-ui`: A set of UI components that can be used across the app using shadn UI
-- `makerkit`: Components specific to MakerKit
+- `makerkit`: Components specific to MakerKit
+
+## Installing a Shadcn UI component
+
+To install a Shadcn UI component, you can use the following command in the root of the repository:
+
+```bash
+npx shadcn-ui@latest add <component> --path=packages/ui/src/shadcn
+```
+
+For example, to install the `Button` component, you can use the following command:
+
+```bash
+npx shadcn-ui@latest add button --path=packages/ui/src/shadcn
+```
+
+We pass the `--path` flag to specify the path where the component should be installed.

packages/ui/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-separator": "^1.0.3",
     "class-variance-authority": "^0.7.0",
     "react-top-loading-bar": "2.3.1",
     "clsx": "^2.1.0",
@@ -91,6 +92,8 @@
     "./heading": "./src/shadcn/heading.tsx",
     "./alert": "./src/shadcn/alert.tsx",
     "./badge": "./src/shadcn/badge.tsx",
+    "./radio-group": "./src/shadcn/radio-group.tsx",
+    "./separator": "./src/shadcn/separator.tsx",
     "./utils": "./src/utils/index.ts",
     "./if": "./src/makerkit/if.tsx",
     "./trans": "./src/makerkit/trans.tsx",

packages/ui/src/shadcn/radio-group.tsx

@@ -42,4 +42,24 @@ const RadioGroupItem = React.forwardRef<
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem };
+const RadioGroupItemLabel = (
+  props: React.PropsWithChildren<{
+    className?: string;
+  }>,
+) => {
+  return (
+    <label
+      className={cn(
+        props.className,
+        'flex cursor-pointer rounded-md' +
+          ' items-center space-x-4 border border-input hover:bg-muted' +
+          ' transition-duration-500 p-4 text-sm transition-colors focus-within:border-primary',
+      )}
+    >
+      {props.children}
+    </label>
+  );
+};
+RadioGroupItemLabel.displayName = 'RadioGroupItemLabel';
+
+export { RadioGroup, RadioGroupItem, RadioGroupItemLabel };

packages/ui/src/shadcn/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@kit/ui/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }