@appcorp/shadcn 1.1.28 → 1.1.30

package/components/shadcn-example/blog-detail-page/comment-section.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface Comment {
+    authorAvatar?: string;
+    authorName: string;
+    claps: number;
+    content: string;
+    id: string;
+    publishedAt: string;
+}
+interface CommentSectionProps {
+    comments: Comment[];
+    onAddComment: (content: string) => void;
+}
+export declare const CommentSection: ({ comments, onAddComment, }: CommentSectionProps) => React.JSX.Element;
+export {};

package/components/shadcn-example/blog-detail-page/comment-section.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentSection = void 0;
+var react_1 = __importStar(require("react"));
+var button_1 = require("@/components/ui/button");
+var textarea_1 = require("@/components/ui/textarea");
+var avatar_1 = require("@/components/ui/avatar");
+var lucide_react_1 = require("lucide-react");
+var CommentSection = function (_a) {
+    var comments = _a.comments, onAddComment = _a.onAddComment;
+    var _b = (0, react_1.useState)(""), newComment = _b[0], setNewComment = _b[1];
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        if (newComment.trim()) {
+            onAddComment(newComment);
+            setNewComment("");
+        }
+    };
+    return (react_1.default.createElement("section", { className: "space-y-6" },
+        react_1.default.createElement("div", { className: "border-blog-border border-t pt-12" },
+            react_1.default.createElement("h2", { className: "text-foreground mb-8 flex items-center gap-2 text-2xl font-bold" },
+                react_1.default.createElement(lucide_react_1.MessageCircle, { className: "h-6 w-6" }),
+                "Comments (",
+                comments.length,
+                ")"),
+            react_1.default.createElement("form", { onSubmit: handleSubmit, className: "bg-card border-blog-border mb-12 rounded-xl border p-6" },
+                react_1.default.createElement("div", { className: "space-y-4" },
+                    react_1.default.createElement(textarea_1.Textarea, { placeholder: "Share your thoughts...", value: newComment, onChange: function (e) { return setNewComment(e.target.value); }, className: "border-blog-border focus:border-primary min-h-[100px] resize-none" }),
+                    react_1.default.createElement("div", { className: "flex justify-end" },
+                        react_1.default.createElement(button_1.Button, { type: "submit", className: "gap-2" },
+                            react_1.default.createElement(lucide_react_1.Send, { className: "h-4 w-4" }),
+                            "Post Comment")))),
+            react_1.default.createElement("div", { className: "space-y-6" }, comments.map(function (comment) { return (react_1.default.createElement("div", { key: comment.id, className: "bg-card border-blog-border hover:bg-blog-hover rounded-xl border p-6 transition-colors" },
+                react_1.default.createElement("div", { className: "flex items-start space-x-4" },
+                    react_1.default.createElement(avatar_1.Avatar, { className: "h-10 w-10" },
+                        react_1.default.createElement(avatar_1.AvatarImage, { src: comment.authorAvatar, alt: comment.authorName }),
+                        react_1.default.createElement(avatar_1.AvatarFallback, null, comment.authorName.charAt(0))),
+                    react_1.default.createElement("div", { className: "flex-1 space-y-3" },
+                        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("p", { className: "text-foreground font-medium" }, comment.authorName),
+                                react_1.default.createElement("p", { className: "text-blog-meta text-sm" }, comment.publishedAt))),
+                        react_1.default.createElement("p", { className: "text-blog-content leading-relaxed" }, comment.content),
+                        react_1.default.createElement("div", { className: "flex items-center gap-4" },
+                            react_1.default.createElement(button_1.Button, { variant: "ghost", size: "sm", className: "text-blog-meta hover:text-primary gap-2" },
+                                react_1.default.createElement(lucide_react_1.Heart, { className: "h-4 w-4" }),
+                                comment.claps),
+                            react_1.default.createElement(button_1.Button, { variant: "ghost", size: "sm", className: "text-blog-meta hover:text-primary" }, "Reply")))))); })))));
+};
+exports.CommentSection = CommentSection;

package/components/shadcn-example/blog-detail-page/content.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface BlogContentProps {
+    content: string[];
+    coverImage?: string;
+}
+export declare const Content: ({ content, coverImage }: BlogContentProps) => React.JSX.Element;
+export {};

package/components/shadcn-example/blog-detail-page/content.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+var react_1 = __importDefault(require("react"));
+var Content = function (_a) {
+    var content = _a.content, coverImage = _a.coverImage;
+    return (react_1.default.createElement("article", { className: "space-y-8" },
+        coverImage && (react_1.default.createElement("div", { className: "bg-muted aspect-video w-full overflow-hidden rounded-xl" },
+            react_1.default.createElement("img", { src: coverImage, alt: "Blog cover", className: "h-full w-full object-cover" }))),
+        react_1.default.createElement("div", { className: "prose prose-lg max-w-none" }, content.map(function (paragraph, index) { return (react_1.default.createElement("p", { key: index, className: "text-blog-content mb-6 leading-relaxed" }, paragraph)); }))));
+};
+exports.Content = Content;

package/components/shadcn-example/blog-detail-page/header.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface BlogHeaderProps {
+    category: string;
+    title: string;
+    authorName: string;
+    authorAvatar?: string;
+    publishedAt: string;
+    onBack: () => void;
+}
+export declare const Header: ({ category, title, authorName, authorAvatar, publishedAt, onBack, }: BlogHeaderProps) => React.JSX.Element;
+export {};

package/components/shadcn-example/blog-detail-page/header.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+var react_1 = __importDefault(require("react"));
+var lucide_react_1 = require("lucide-react");
+var button_1 = require("@/components/ui/button");
+var avatar_1 = require("@/components/ui/avatar");
+var badge_1 = require("@/components/ui/badge");
+var Header = function (_a) {
+    var category = _a.category, title = _a.title, authorName = _a.authorName, authorAvatar = _a.authorAvatar, publishedAt = _a.publishedAt, onBack = _a.onBack;
+    return (react_1.default.createElement("header", { className: "space-y-6" },
+        react_1.default.createElement(badge_1.Badge, { variant: "outline" }, category),
+        react_1.default.createElement("h1", { className: "text-foreground text-4xl leading-15 font-bold tracking-tight md:text-4xl lg:text-5xl" }, title),
+        react_1.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-4" },
+            react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                react_1.default.createElement(avatar_1.Avatar, { className: "h-12 w-12" },
+                    react_1.default.createElement(avatar_1.AvatarImage, { src: authorAvatar, alt: authorName, className: "object-cover" }),
+                    react_1.default.createElement(avatar_1.AvatarFallback, null, authorName.charAt(0))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("p", { className: "font-medium" },
+                        "by ",
+                        authorName),
+                    react_1.default.createElement("p", { className: "text-muted-foreground text-sm" }, publishedAt))),
+            react_1.default.createElement("div", { className: "flex items-center space-x-3" },
+                react_1.default.createElement("span", { className: "text-muted-foreground text-[11px] font-medium tracking-widest uppercase" }, "Share this"),
+                react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", className: "hover:bg-blog-hover h-9 w-9 rounded-full" },
+                    react_1.default.createElement(lucide_react_1.Twitter, null)),
+                react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", className: "hover:bg-blog-hover h-9 w-9 rounded-full" },
+                    react_1.default.createElement(lucide_react_1.Facebook, null)),
+                react_1.default.createElement(button_1.Button, { variant: "outline", size: "icon", className: "hover:bg-blog-hover h-9 w-9 rounded-full" },
+                    react_1.default.createElement(lucide_react_1.Linkedin, null))))));
+};
+exports.Header = Header;

package/components/shadcn-example/blog-detail-page/index.d.ts

@@ -0,0 +1,25 @@
+import { type FC } from "react";
+export type Comment = {
+    authorAvatar?: string;
+    authorName: string;
+    claps: number;
+    content: string;
+    id: string;
+    publishedAt: string;
+};
+export type BlogItem = {
+    authorAvatar?: string;
+    authorName: string;
+    category: string;
+    claps?: number;
+    content: string[];
+    publishedAt: string;
+    title: string;
+};
+type BlogDetailPageProps = {
+    blog: BlogItem;
+    recommendedPosts?: BlogItem[];
+    initialComments?: Comment[];
+};
+export declare const BlogDetailPage: FC<BlogDetailPageProps>;
+export {};

package/components/shadcn-example/blog-detail-page/index.js

@@ -0,0 +1,74 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogDetailPage = void 0;
+var react_1 = __importStar(require("react"));
+var header_1 = require("./header");
+var content_1 = require("./content");
+var comment_section_1 = require("./comment-section");
+var BlogDetailPage = function (_a) {
+    // const navigate = useRouter();
+    var blog = _a.blog, _b = _a.initialComments, initialComments = _b === void 0 ? [] : _b;
+    var _c = (0, react_1.useState)(initialComments), comments = _c[0], setComments = _c[1];
+    var handleAddComment = function (content) {
+        var newComment = {
+            id: Date.now().toString(),
+            authorName: "You",
+            authorAvatar: "/placeholder.svg",
+            content: content,
+            publishedAt: "Just now",
+            claps: 0,
+        };
+        setComments(__spreadArray([newComment], comments, true));
+    };
+    return (react_1.default.createElement("div", { className: "bg-background min-h-screen" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-4xl px-6 py-12" },
+            react_1.default.createElement(header_1.Header, { authorAvatar: blog.authorAvatar, authorName: blog.authorName, category: blog.category, onBack: function () { return void 0; }, publishedAt: blog.publishedAt, title: blog.title }),
+            react_1.default.createElement("div", { className: "mt-16" },
+                react_1.default.createElement(content_1.Content, { content: blog.content, coverImage: "https://plus.unsplash.com/premium_photo-1683211783920-8c66ab120c09" })),
+            react_1.default.createElement("div", { className: "mt-16" },
+                react_1.default.createElement(comment_section_1.CommentSection, { comments: comments, onAddComment: handleAddComment })))));
+};
+exports.BlogDetailPage = BlogDetailPage;

package/components/shadcn-example/blog-page/blog-post-card.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface BlogPostCardProps {
+    imageSrc: string;
+    imageAlt: string;
+    title: string;
+    description: string;
+    authorName: string;
+    authorAvatarSrc: string;
+    readTime: string;
+}
+export declare const BlogPostCard: ({ authorAvatarSrc, authorName, description, imageAlt, imageSrc, readTime, title, }: BlogPostCardProps) => React.JSX.Element;
+export {};

package/components/shadcn-example/blog-page/blog-post-card.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogPostCard = void 0;
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var avatar_1 = require("../../../components/ui/avatar");
+var BlogPostCard = function (_a) {
+    var authorAvatarSrc = _a.authorAvatarSrc, authorName = _a.authorName, description = _a.description, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, readTime = _a.readTime, title = _a.title;
+    return (react_1.default.createElement("div", { className: "bg-card text-card-foreground overflow-hidden rounded-lg border" },
+        react_1.default.createElement(image_1.default, { alt: imageAlt, className: "h-48 w-full object-cover", height: 225, src: imageSrc, width: 400 }),
+        react_1.default.createElement("div", { className: "grid gap-2 p-4" },
+            react_1.default.createElement("h3", { className: "text-lg leading-tight font-semibold" }, title),
+            react_1.default.createElement("p", { className: "text-muted-foreground line-clamp-3 text-sm" }, description),
+            react_1.default.createElement("div", { className: "text-muted-foreground flex items-center gap-2 text-sm" },
+                react_1.default.createElement(avatar_1.Avatar, { className: "h-6 w-6" },
+                    react_1.default.createElement(avatar_1.AvatarImage, { src: authorAvatarSrc || "/placeholder.svg" }),
+                    react_1.default.createElement(avatar_1.AvatarFallback, null, authorName
+                        .split(" ")
+                        .map(function (n) { return n[0]; })
+                        .join(""))),
+                react_1.default.createElement("span", null, authorName),
+                react_1.default.createElement("span", null, "\u2022"),
+                react_1.default.createElement("span", null,
+                    readTime,
+                    " read")))));
+};
+exports.BlogPostCard = BlogPostCard;

package/components/shadcn-example/blog-page/featured-post-sidebar-item.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface FeaturedPostSidebarItemProps {
+    imageSrc: string;
+    imageAlt: string;
+    title: string;
+    tags: string[];
+}
+export declare const FeaturedPostSidebarItem: ({ imageSrc, imageAlt, title, tags, }: FeaturedPostSidebarItemProps) => React.JSX.Element;
+export {};

package/components/shadcn-example/blog-page/featured-post-sidebar-item.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeaturedPostSidebarItem = void 0;
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var badge_1 = require("../../ui/badge");
+var FeaturedPostSidebarItem = function (_a) {
+    var imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, title = _a.title, tags = _a.tags;
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-2" },
+        react_1.default.createElement("div", { className: "flex items-center gap-4" },
+            react_1.default.createElement(image_1.default, { alt: imageAlt, className: "aspect-square rounded-md object-cover", height: 64, src: imageSrc || "/placeholder.svg", width: 64 }),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", { className: "text-sm leading-snug font-medium" }, title),
+                react_1.default.createElement("div", { className: "flex flex-row gap-4" }, tags === null || tags === void 0 ? void 0 : tags.map(function (tag) { return (react_1.default.createElement(badge_1.Badge, { key: tag, className: "mb-2 w-fit bg-black text-white backdrop-blur-sm" }, tag)); }))))));
+};
+exports.FeaturedPostSidebarItem = FeaturedPostSidebarItem;

package/components/shadcn-example/blog-page/index.d.ts

@@ -0,0 +1,19 @@
+import { FC } from "react";
+export type BlogItem = {
+    authorAvatarSrc: string;
+    authorName: string;
+    description: string;
+    imageAlt?: string;
+    imageSrc: string;
+    isFeatured: boolean;
+    link: string;
+    readTime: string;
+    tags: string[];
+    title: string;
+};
+type BlogPageProps = {
+    items: BlogItem[];
+    recommendedPosts: BlogItem[];
+};
+export declare const BlogPage: FC<BlogPageProps>;
+export {};

package/components/shadcn-example/blog-page/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogPage = void 0;
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var image_1 = __importDefault(require("next/image"));
+var badge_1 = require("../../../components/ui/badge");
+var button_1 = require("../../../components/ui/button");
+var blog_post_card_1 = require("./blog-post-card");
+var featured_post_sidebar_item_1 = require("./featured-post-sidebar-item");
+var BlogPage = function (_a) {
+    var _b;
+    var items = _a.items, recommendedPosts = _a.recommendedPosts;
+    var featuredPost = items.find(function (item) { return item.isFeatured; });
+    var otherPosts = items.filter(function (item) { return !item.isFeatured; });
+    return (react_1.default.createElement("div", { className: "container mx-auto px-4 py-8 md:px-6 lg:px-8" },
+        react_1.default.createElement("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-3" },
+            react_1.default.createElement("div", { className: "relative h-[400px] overflow-hidden rounded-lg shadow-lg md:h-[500px] lg:col-span-2" },
+                (featuredPost === null || featuredPost === void 0 ? void 0 : featuredPost.imageSrc) && (react_1.default.createElement(image_1.default, { alt: featuredPost.imageAlt, className: "w-full object-cover", fill: true, height: 0, sizes: "70vw", src: featuredPost.imageSrc, width: 0 })),
+                react_1.default.createElement("div", { className: "absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 to-transparent p-6 text-white" },
+                    react_1.default.createElement("div", { className: "flex flex-row gap-4" }, (_b = featuredPost === null || featuredPost === void 0 ? void 0 : featuredPost.tags) === null || _b === void 0 ? void 0 : _b.map(function (tag) { return (react_1.default.createElement(badge_1.Badge, { key: tag, className: "mb-2 w-fit bg-white/20 text-white backdrop-blur-sm" }, tag)); })),
+                    react_1.default.createElement("h2", { className: "text-2xl leading-tight font-bold md:text-3xl" }, featuredPost === null || featuredPost === void 0 ? void 0 : featuredPost.title))),
+            react_1.default.createElement("div", { className: "bg-card text-card-foreground space-y-6 rounded-lg border p-6 lg:col-span-1" },
+                react_1.default.createElement("h3", { className: "text-xl font-semibold" }, "Other posts"),
+                react_1.default.createElement("div", { className: "space-y-4" }, otherPosts.map(function (item) { return (react_1.default.createElement(featured_post_sidebar_item_1.FeaturedPostSidebarItem, { imageAlt: item.imageAlt, imageSrc: item.imageSrc, key: item.title, tags: item.tags, title: item.title })); })))),
+        react_1.default.createElement("div", { className: "mt-12" },
+            react_1.default.createElement("div", { className: "mb-6 flex items-center justify-between" },
+                react_1.default.createElement("h2", { className: "text-2xl font-bold" }, "Recommended Posts"),
+                react_1.default.createElement(button_1.Button, { variant: "outline", asChild: true },
+                    react_1.default.createElement(link_1.default, { href: "#" }, "All Posts"))),
+            react_1.default.createElement("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" }, recommendedPosts.map(function (p) { return (react_1.default.createElement(blog_post_card_1.BlogPostCard, { authorAvatarSrc: p.authorAvatarSrc, authorName: p.authorName, description: p.description, imageAlt: p.imageAlt, imageSrc: p.imageSrc, key: p.title, readTime: p.readTime, title: p.title })); })))));
+};
+exports.BlogPage = BlogPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",