@appcorp/shadcn 1.1.1 → 1.1.2

package/components/shadcn-example/authentication/index.d.ts

@@ -0,0 +1,24 @@
+import React, { FC } from "react";
+export interface AuthenticationProps {
+    avatars: {
+        image: string;
+        alt: string;
+    }[];
+    backgroundImage: string;
+    description: string;
+    email: string;
+    handleEmailOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleOnClickTopCta?: () => void;
+    handleOnSubmit?: (event: React.SyntheticEvent) => void;
+    handlePasswordOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    heading: string;
+    isLoading: boolean;
+    logo: string;
+    logoAlt: string;
+    numberOfCustomers: string;
+    password: string;
+    privacyLink: string;
+    termsLink: string;
+    topCtaLabel?: string;
+}
+export declare const Authentication: FC<AuthenticationProps>;

package/components/shadcn-example/authentication/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Authentication = void 0;
+var link_1 = __importDefault(require("next/link"));
+var utils_1 = require("../../../lib/utils");
+var button_1 = require("../../../components/ui/button");
+var user_auth_form_1 = require("./user-auth-form");
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var card_1 = require("../../../components/ui/card");
+var avatar_1 = require("../../../components/ui/avatar");
+var lucide_react_1 = require("lucide-react");
+var Authentication = function (_a) {
+    var avatars = _a.avatars, backgroundImage = _a.backgroundImage, description = _a.description, email = _a.email, handleEmailOnChange = _a.handleEmailOnChange, handleOnClickTopCta = _a.handleOnClickTopCta, handleOnSubmit = _a.handleOnSubmit, handlePasswordOnChange = _a.handlePasswordOnChange, heading = _a.heading, isLoading = _a.isLoading, logo = _a.logo, logoAlt = _a.logoAlt, numberOfCustomers = _a.numberOfCustomers, password = _a.password, privacyLink = _a.privacyLink, termsLink = _a.termsLink, topCtaLabel = _a.topCtaLabel;
+    return (react_1.default.createElement("div", { className: "relative container flex-1 shrink-0 items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0" },
+        topCtaLabel && handleOnClickTopCta && (react_1.default.createElement(button_1.Button, { onClick: handleOnClickTopCta, className: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant: "ghost" }), "absolute top-4 right-4 md:top-8 md:right-8") }, topCtaLabel)),
+        react_1.default.createElement("div", { className: "text-primary relative hidden h-full flex-col p-10 lg:flex dark:border-r" },
+            react_1.default.createElement("div", { className: "bg-primary/5 absolute inset-0", style: {
+                    backgroundImage: "url(".concat(backgroundImage, ")"),
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                } }),
+            react_1.default.createElement("div", { className: "relative z-20 flex items-center" },
+                react_1.default.createElement(image_1.default, { alt: logoAlt, className: "mr-2 h-6 w-auto", height: 24, priority: true, src: logo, width: 40 })),
+            react_1.default.createElement("div", { className: "relative z-20 mt-auto" },
+                react_1.default.createElement(card_1.Card, { className: "bg-gradient-to-br from-primary to-secondary border-none shadow-lg" },
+                    react_1.default.createElement(card_1.CardContent, { className: "p-8" },
+                        react_1.default.createElement("div", { className: "flex justify-center mb-6" }),
+                        react_1.default.createElement("h2", { className: "text-2xl font-bold text-center text-gray-900 mb-3" }, "Next Generation ERP"),
+                        react_1.default.createElement("p", { className: "text-center text-[#4a4a5e] mb-6 text-sm" }),
+                        react_1.default.createElement("div", { className: "flex items-center justify-center gap-3" },
+                            react_1.default.createElement("div", { className: "flex -space-x-2" }, avatars.map(function (avatar, index) { return (react_1.default.createElement(avatar_1.Avatar, { key: index, className: "w-8 h-8 border-2 border-white" },
+                                react_1.default.createElement(avatar_1.AvatarImage, { src: avatar.image, alt: avatar.alt }),
+                                react_1.default.createElement(avatar_1.AvatarFallback, { className: "bg-gradient-to-br from-gray-600 to-gray-800" }))); })),
+                            react_1.default.createElement("div", { className: "flex items-center gap-1.5" },
+                                new Array(5).fill(0).map(function (_, i) { return (react_1.default.createElement(lucide_react_1.Star, { key: i, className: "w-4 h-4 fill-amber-500 text-amber-500" })); }),
+                                react_1.default.createElement("span", { className: "text-sm font-medium text-gray-700" },
+                                    numberOfCustomers,
+                                    " happy customers"))))))),
+        react_1.default.createElement("div", { className: "flex items-center justify-center lg:h-screen lg:p-8" },
+            react_1.default.createElement("div", { className: "mx-auto flex w-full flex-col justify-center gap-6 sm:w-[350px]" },
+                react_1.default.createElement("div", { className: "flex flex-col gap-2 text-center" },
+                    react_1.default.createElement("h1", { className: "text-2xl font-semibold tracking-tight" }, heading),
+                    react_1.default.createElement("p", { className: "text-muted-foreground text-sm" }, description)),
+                react_1.default.createElement(user_auth_form_1.UserAuthForm, { email: email, handleEmailOnChange: handleEmailOnChange, handleOnSubmit: handleOnSubmit, handlePasswordOnChange: handlePasswordOnChange, isLoading: isLoading, password: password }),
+                react_1.default.createElement("p", { className: "text-muted-foreground px-8 text-center text-sm" },
+                    "By clicking continue, you agree to our",
+                    " ",
+                    react_1.default.createElement(link_1.default, { href: termsLink, className: "hover:text-primary underline underline-offset-4" }, "Terms of Service"),
+                    " ",
+                    "and",
+                    " ",
+                    react_1.default.createElement(link_1.default, { href: privacyLink, className: "hover:text-primary underline underline-offset-4" }, "Privacy Policy"),
+                    ".")))));
+};
+exports.Authentication = Authentication;

package/components/shadcn-example/authentication/user-auth-form.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface UserAuthFormProps {
+    className?: string;
+    email: string;
+    handleEmailOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleOnSubmit?: (event: React.SyntheticEvent) => void;
+    handlePasswordOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    isLoading?: boolean;
+    password: string;
+}
+export declare const UserAuthForm: React.FC<UserAuthFormProps>;

package/components/shadcn-example/authentication/user-auth-form.js

@@ -0,0 +1,54 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAuthForm = void 0;
+var React = __importStar(require("react"));
+var utils_1 = require("../../../lib/utils");
+var button_1 = require("../../../components/ui/button");
+var lucide_react_1 = require("lucide-react");
+var enhanced_input_1 = require("../../../components/enhanced-input");
+var UserAuthForm = function (_a) {
+    var className = _a.className, email = _a.email, handleEmailOnChange = _a.handleEmailOnChange, handleOnSubmit = _a.handleOnSubmit, handlePasswordOnChange = _a.handlePasswordOnChange, isLoading = _a.isLoading, password = _a.password;
+    return (React.createElement("div", { className: (0, utils_1.cn)("grid gap-6", className) },
+        React.createElement("div", { className: "grid gap-2" },
+            React.createElement("div", { className: "grid gap-4" },
+                React.createElement(enhanced_input_1.EnhancedInput, { autoCapitalize: "none", autoComplete: "email", autoCorrect: "off", disabled: isLoading, id: "email", label: "Email", placeholder: "name@example.com", type: "email", onChange: handleEmailOnChange, required: true, value: email }),
+                React.createElement(enhanced_input_1.EnhancedInput, { autoCapitalize: "none", autoCorrect: "off", disabled: isLoading, id: "password", label: "Password", placeholder: "********", type: "password", required: true, onChange: handlePasswordOnChange, value: password })),
+            React.createElement(button_1.Button, { disabled: isLoading, onSubmit: handleOnSubmit },
+                isLoading && React.createElement(lucide_react_1.LoaderIcon, { className: "animate-spin" }),
+                "Sign In with Email"))));
+};
+exports.UserAuthForm = UserAuthForm;

package/components/shadcn-example/coming-soon/index.js

@@ -14,7 +14,6 @@ var image_1 = __importDefault(require("next/image"));
 var react_1 = __importDefault(require("react"));
 var ComingSoon = function (_a) {
     var backgroundImage = _a.backgroundImage, footerLinks = _a.footerLinks, logo = _a.logo;
-    console.log("Background Image:", backgroundImage);
     return (react_1.default.createElement("div", { className: "grid min-h-screen lg:grid-cols-2" },
         react_1.default.createElement("div", { className: "posi relative flex flex-1 flex-col items-center justify-between bg-top p-8 lg:p-12", style: {
                 background: "url(".concat(backgroundImage, ")"),

package/package.json

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