Merge pull request #7 from ObservedObserver/dev

feat: badges

pages/Badges.py

@@ -0,0 +1,8 @@
+import streamlit as st
+
+import streamlit_shadcn_ui as ui
+
+st.header("Badges")
+
+ui.badges(badge_list=[("default", "default"), ("secondary", "secondary"), ("outline", "outline"), ("Hello", "destructive"), ("World", "destructive")], class_name="flex gap-2", key="badges1")
+

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "streamlit-shadcn-ui"
-version = "0.1.8"
+version = "0.1.9"
 readme = "README.md"
 keywords = ["streamlit", "shadcn", "ui", "components"]
 description = "Using shadcn components in Streamlit"

streamlit_shadcn_ui/components/packages/frontend/src/App.tsx

@@ -23,10 +23,11 @@ import { StRadioGroup } from "./components/streamlit/radioGroup"
 import { StTextarea } from "./components/streamlit/textarea";
 import { StInput } from "./components/streamlit/input";
 import { StSwitch } from "./components/streamlit/switch";
-import { StHoverCardContent } from "./components/hoverCard/hoverCardContent";
-import { StHoverCardTrigger } from "./components/hoverCard/hoverCardTrigger";
+import { StHoverCardContent } from "./components/streamlit/hoverCard/hoverCardContent";
+import { StHoverCardTrigger } from "./components/streamlit/hoverCard/hoverCardTrigger";
 import { StAlertDialog } from "./components/streamlit/alertDialog";
 import { StLinkButton } from "./components/streamlit/linkButton";
+import { StBadges } from "./components/streamlit/badge";
 
 const crouter = new ComponentRouter();
 crouter.declare("button", StButton);
@@ -49,6 +50,7 @@ crouter.declare("hover_card_content", StHoverCardContent);
 crouter.declare("hover_card_trigger", StHoverCardTrigger);
 crouter.declare("alert_dialog", StAlertDialog);
 crouter.declare("link_button", StLinkButton);
+crouter.declare("badges", StBadges);
 
 function App(props: ComponentProps<{comp: string; props: any; [key: string]: any}>) {
     const { args, width, disabled, theme } = props;
@@ -63,5 +65,4 @@ function App(props: ComponentProps<{comp: string; props: any; [key: string]: any
     return crouter.render(args.comp, container, args.props);
 }
 
-const WP = withStreamlitConnection(App);
-export default WP;
+export const StApp = withStreamlitConnection(App);

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/badge.tsx

@@ -0,0 +1,17 @@
+import { Badge, BadgeProps } from "@/components/ui/badge";
+import { forwardRef } from "react";
+
+interface StBadgesProps {
+    badges: { text: string; variant: BadgeProps['variant'] }[];
+    className?: string;
+}
+export const StBadges = forwardRef<HTMLDivElement, StBadgesProps>((props, ref) => {
+    const { badges, className } = props;
+    return <div className={className}  ref={ref}>
+        {
+            badges.map((badge, index) => {
+                return <Badge key={`${badge}-${index}`} variant={badge.variant}>{badge.text}</Badge>
+            })
+        }
+    </div>
+})

streamlit_shadcn_ui/components/packages/frontend/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

streamlit_shadcn_ui/components/packages/frontend/src/main.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import { StApp } from "./App.tsx";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
+ReactDOM.createRoot(document.getElementById("root")!).render(<StApp />);

streamlit_shadcn_ui/py_components/__init__.py

@@ -13,4 +13,5 @@
 from .radio_group import radio_group
 from .hover_card import hover_card
 from .alert_dialog import alert_dialog
-from .link_button import link_button
+from .link_button import link_button
+from .badges import badges

streamlit_shadcn_ui/py_components/badges.py

@@ -0,0 +1,12 @@
+from .utils import declare_component
+from typing import Tuple
+
+_RELEASE = True
+
+_component_func = declare_component("badges", release=_RELEASE)
+
+def badges(badge_list: list[Tuple[str, str]], class_name: str = None, key = None):
+    bl = [{"text": b[0], "variant": b[1] } for b in badge_list]
+    props = {"badges":bl , "className": class_name}
+    clicked = _component_func(comp="badges", props=props, key=key, default=False)
+    return clicked