@academy-sdk/sdk 0.1.1 → 0.2.0

package/package.json

@@ -1,67 +1,58 @@
 {
   "name": "@academy-sdk/sdk",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "SDK for building custom learner templates for the Academy platform",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
     },
     "./types": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/types/index.js",
-      "require": "./dist/types/index.cjs"
+      "types": "./src/types/index.ts",
+      "default": "./src/types/index.ts"
     },
     "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/hooks/index.js",
-      "require": "./dist/hooks/index.cjs"
+      "types": "./src/hooks/index.ts",
+      "default": "./src/hooks/index.ts"
     },
     "./contracts": {
-      "types": "./dist/contracts/index.d.ts",
-      "import": "./dist/contracts/index.js",
-      "require": "./dist/contracts/index.cjs"
+      "types": "./src/contracts/index.ts",
+      "default": "./src/contracts/index.ts"
     },
     "./utils": {
-      "types": "./dist/utils/index.d.ts",
-      "import": "./dist/utils/index.js",
-      "require": "./dist/utils/index.cjs"
+      "types": "./src/utils/index.ts",
+      "default": "./src/utils/index.ts"
     },
     "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js",
-      "require": "./dist/components/index.cjs"
+      "types": "./src/components/index.ts",
+      "default": "./src/components/index.ts"
     },
     "./components/atoms": {
-      "types": "./dist/components/atoms/index.d.ts",
-      "import": "./dist/components/atoms/index.js",
-      "require": "./dist/components/atoms/index.cjs"
+      "types": "./src/components/atoms/index.ts",
+      "default": "./src/components/atoms/index.ts"
     },
     "./components/molecules": {
-      "types": "./dist/components/molecules/index.d.ts",
-      "import": "./dist/components/molecules/index.js",
-      "require": "./dist/components/molecules/index.cjs"
+      "types": "./src/components/molecules/index.ts",
+      "default": "./src/components/molecules/index.ts"
     },
     "./components/organisms": {
-      "types": "./dist/components/organisms/index.d.ts",
-      "import": "./dist/components/organisms/index.js",
-      "require": "./dist/components/organisms/index.cjs"
+      "types": "./src/components/organisms/index.ts",
+      "default": "./src/components/organisms/index.ts"
     },
     "./components/pages": {
-      "types": "./dist/components/pages/index.d.ts",
-      "import": "./dist/components/pages/index.js",
-      "require": "./dist/components/pages/index.cjs"
-    }
+      "types": "./src/components/pages/index.ts",
+      "default": "./src/components/pages/index.ts"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./template": "./dist/bundle.js",
+    "./manifest": "./dist/manifest.json"
   },
   "scripts": {
     "build": "node build.mjs",
@@ -69,23 +60,26 @@
     "preview": "node preview.mjs"
   },
   "peerDependencies": {
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.0.0",
+    "lucide-react": ">=0.300.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "clsx": ">=2.0.0",
-    "tailwind-merge": ">=2.0.0",
-    "class-variance-authority": ">=0.7.0",
-    "lucide-react": ">=0.300.0"
+    "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
-    "esbuild": "0.25.5",
-    "typescript": "5.9.3",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "@tailwindcss/postcss": "^4.2.1",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
+    "esbuild": "0.25.5",
+    "lucide-react": "0.555.0",
+    "postcss": "^8.5.8",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tailwind-merge": "3.4.0",
-    "class-variance-authority": "0.7.1",
-    "lucide-react": "0.555.0"
+    "tailwindcss": "^4.2.1",
+    "typescript": "5.9.3"
   }
 }

package/src/components/atoms/Avatar.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { cn } from '../utils';
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+}
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, src, alt, fallback, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+          className
+        )}
+        {...props}
+      >
+        {src ? (
+          <img
+            src={src}
+            alt={alt || 'Avatar'}
+            className="aspect-square h-full w-full object-cover"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-gray-200 text-gray-600 text-sm font-medium">
+            {fallback || '?'}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Avatar.displayName = 'Avatar';
+
+export { Avatar };

package/src/components/atoms/Badge.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-theme-accent-primary text-white',
+        secondary: 'bg-theme-bg-tertiary text-theme-text-primary',
+        success: 'border-transparent bg-green-600 text-white',
+        warning: 'border-transparent bg-yellow-500 text-white',
+        destructive: 'border-transparent bg-red-600 text-white',
+        outline: 'text-theme-text-primary border-theme-border-primary',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { badgeVariants };

package/src/components/atoms/Button.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
+  {
+    variants: {
+      variant: {
+        default: 'bg-theme-accent-primary text-white hover:opacity-90',
+        destructive: 'bg-red-600 text-white hover:bg-red-700',
+        outline: 'border border-theme-border-primary bg-theme-bg-secondary hover:bg-theme-bg-tertiary text-theme-text-primary',
+        secondary: 'bg-theme-bg-tertiary text-theme-text-primary hover:opacity-80',
+        ghost: 'hover:bg-theme-bg-tertiary text-theme-text-primary',
+        link: 'text-[rgb(var(--accent-primary))] underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/atoms/Card.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { cn } from '../utils';
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Card({ className, ...props }: CardProps) {
+  return (
+    <div
+      className={cn('rounded-lg border border-theme-border-primary bg-theme-bg-primary shadow-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('text-sm text-theme-text-secondary', className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-6 pt-0', className)} {...props} />;
+}
+
+export function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex items-center p-6 pt-0', className)} {...props} />;
+}

package/src/components/atoms/Input.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { cn } from '../utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, label, ...props }, ref) => {
+    const inputElement = (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-theme-border-primary bg-theme-bg-primary px-3 py-2 text-sm text-theme-text-primary file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[rgb(var(--text-muted))] focus-visible:outline-none focus-visible:border-theme-accent-primary transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+
+    if (label) {
+      return (
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-theme-text-primary">
+            {label}
+            {props.required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+          {inputElement}
+        </div>
+      );
+    }
+
+    return inputElement;
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/atoms/ProgressBar.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { cn } from '../utils';
+
+interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'success' | 'warning' | 'error';
+}
+
+const sizeClasses = {
+  sm: 'h-1.5',
+  md: 'h-2.5',
+  lg: 'h-3.5',
+};
+
+const variantClasses = {
+  default: 'bg-theme-accent-primary',
+  success: 'bg-green-600',
+  warning: 'bg-yellow-500',
+  error: 'bg-red-600',
+};
+
+export function ProgressBar({
+  value,
+  max = 100,
+  showLabel = false,
+  size = 'md',
+  variant = 'default',
+  className,
+  ...props
+}: ProgressBarProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  return (
+    <div className={cn('w-full', className)} {...props}>
+      {showLabel && (
+        <div className="mb-1 flex items-center justify-between text-sm">
+          <span className="text-theme-text-secondary">Progress</span>
+          <span className="font-medium text-theme-text-primary">{Math.round(percentage)}%</span>
+        </div>
+      )}
+      <div className={cn('w-full overflow-hidden rounded-full bg-theme-bg-tertiary', sizeClasses[size])}>
+        <div
+          className={cn('h-full transition-all duration-300 ease-in-out', variantClasses[variant])}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/atoms/Tabs.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../utils';
+
+interface Tab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+  actions?: React.ReactNode;
+}
+
+export function Tabs({ tabs, activeTab, onTabChange, className, actions }: TabsProps) {
+  return (
+    <div className={cn('border-b border-theme-border-primary', className)}>
+      <div className="px-4 sm:px-6 pt-4">
+        <div className="p-0.5 flex items-center justify-between overflow-x-auto">
+          <nav className="flex gap-4 sm:gap-8 min-w-min">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => onTabChange(tab.id)}
+                className={cn(
+                  'pb-3 px-1 text-sm font-medium border-b-2 transition-all flex items-center gap-2 cursor-pointer whitespace-nowrap',
+                  activeTab === tab.id
+                    ? 'border-theme-accent-primary text-theme-accent-primary'
+                    : 'border-transparent text-theme-text-secondary hover:text-theme-text-primary hover:border-theme-accent-primary/40'
+                )}
+              >
+                {tab.icon && <span className="flex-shrink-0">{tab.icon}</span>}
+                {tab.label}
+              </button>
+            ))}
+          </nav>
+          {actions && <div className="pb-3">{actions}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}

package/{dist/components/atoms/index.d.ts → src/components/atoms/index.ts}

@@ -8,4 +8,3 @@ export type { BadgeProps } from './Badge';
 export { Avatar } from './Avatar';
 export { ProgressBar } from './ProgressBar';
 export { Tabs } from './Tabs';
-//# sourceMappingURL=index.d.ts.map

package/{dist/components/index.d.ts → src/components/index.ts}

@@ -1,5 +1,11 @@
+// Utility
 export { cn } from './utils';
+
+// Atoms
 export * from './atoms';
+
+// Molecules
 export * from './molecules';
+
+// Organisms
 export * from './organisms';
-//# sourceMappingURL=index.d.ts.map

package/src/components/molecules/CourseCard.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import { BookOpen, Clock, Grid2X2 } from 'lucide-react';
+import { cn } from '../utils';
+import { ProgressBar } from '../atoms/ProgressBar';
+
+export interface CourseCardProps {
+  id: string;
+  title: string;
+  thumbnail?: string;
+  thumbnails?: string[];
+  totalLessons: number;
+  progress: number;
+  status?: 'in-progress' | 'completed';
+  isFree: boolean;
+  price?: number;
+  currency?: string;
+  description?: string;
+  showPrice?: boolean;
+  showProgress?: boolean;
+  category?: string;
+  duration?: string;
+  instructorName?: string;
+  instructorAvatar?: string;
+  originalPrice?: number;
+  isBundle?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function CourseCard({
+  id,
+  title,
+  thumbnail,
+  thumbnails,
+  totalLessons,
+  progress,
+  status,
+  isFree,
+  price = 0,
+  currency = 'USD',
+  description,
+  showPrice = true,
+  showProgress = true,
+  category,
+  duration,
+  instructorName,
+  instructorAvatar,
+  originalPrice,
+  isBundle = false,
+  onClick,
+  className,
+}: CourseCardProps) {
+  const [imageError, setImageError] = useState(false);
+  const clampedProgress = Math.min(Math.max(progress, 0), 100);
+
+  const stripHtml = (html: string): string => {
+    if (typeof document === 'undefined') return html;
+    const tmp = document.createElement('div');
+    tmp.innerHTML = html;
+    return tmp.textContent || tmp.innerText || '';
+  };
+
+  const displayCategory = category || 'Design';
+  const displayDuration = duration || '3 Month';
+  const displayInstructorName = instructorName || (description ? stripHtml(description).slice(0, 15) : 'Instructor');
+
+  return (
+    <div
+      className={cn(
+        'group overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-full flex flex-col min-w-0 w-full cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      {/* Image */}
+      <div className="relative h-[238.66px] w-full overflow-hidden mx-auto px-3 pt-3">
+        <div className="relative w-full h-full rounded-xl overflow-hidden bg-gray-100">
+          {isBundle && thumbnails && thumbnails.length > 0 && !imageError ? (
+            <div className="relative w-full h-full flex">
+              <div className="relative h-full w-1/2">
+                <img
+                  src={thumbnails[0]}
+                  alt={`${title} - image 1`}
+                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                  onError={() => setImageError(true)}
+                />
+              </div>
+              <div className="flex flex-col w-1/2 h-full">
+                {thumbnails[1] && (
+                  <div className={cn('relative w-full overflow-hidden', thumbnails.length > 2 ? 'h-1/2' : 'h-full')}>
+                    <img
+                      src={thumbnails[1]}
+                      alt={`${title} - image 2`}
+                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      onError={() => setImageError(true)}
+                    />
+                  </div>
+                )}
+                {thumbnails.length > 2 && thumbnails[2] && (
+                  <div className="relative w-full h-1/2 overflow-hidden">
+                    <img
+                      src={thumbnails[2]}
+                      alt={`${title} - image 3`}
+                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                      onError={() => setImageError(true)}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : thumbnail && !imageError ? (
+            <img
+              src={thumbnail}
+              alt={title}
+              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+              onError={() => setImageError(true)}
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center bg-gray-200">
+              <BookOpen className="w-12 h-12 text-gray-400" />
+            </div>
+          )}
+        </div>
+
+        {status && (
+          <div className="absolute right-6 top-5">
+            <span
+              className={`rounded-full px-3 py-1.5 text-xs font-medium text-white shadow-md ${status === 'completed' ? 'bg-green-500' : 'bg-[rgb(var(--accent-primary))]'}`}
+            >
+              {status}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="p-5 space-y-3 flex-1 flex flex-col min-w-0">
+        {(displayCategory || displayDuration) && (
+          <div className="flex items-center justify-between text-xs text-gray-500">
+            {displayCategory && (
+              <div className="flex items-center gap-1.5">
+                <Grid2X2 className="w-3.5 h-3.5 text-gray-400" />
+                <span>{displayCategory}</span>
+              </div>
+            )}
+            {displayDuration && (
+              <div className="flex items-center gap-1.5">
+                <Clock className="w-3.5 h-3.5 text-gray-400" />
+                <span>{displayDuration}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        <h3 className="text-base font-bold text-gray-900 line-clamp-2 leading-snug">
+          {title}
+        </h3>
+
+        {description && (
+          <p className="text-sm text-gray-500 line-clamp-3 leading-relaxed">
+            {stripHtml(description)}
+          </p>
+        )}
+
+        <div className="flex-1" />
+
+        {showProgress && (
+          <div className="space-y-2">
+            <div className="h-2 overflow-hidden rounded-full bg-gray-100">
+              <div
+                className="h-full rounded-full bg-[rgb(var(--accent-primary))] transition-all duration-300"
+                style={{ width: `${clampedProgress}%` }}
+              />
+            </div>
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-gray-400"></span>
+              <span className="text-gray-500">
+                {isBundle ? 'Course' : 'Lesson'} {Math.ceil((clampedProgress / 100) * totalLessons)} of {totalLessons}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {showPrice && (
+          <div className="flex items-center justify-between pt-3 border-t border-gray-100">
+            <div className="flex items-center gap-2">
+              {instructorAvatar ? (
+                <div className="w-7 h-7 rounded-full overflow-hidden flex-shrink-0">
+                  <img src={instructorAvatar} alt={displayInstructorName} className="w-full h-full object-cover" />
+                </div>
+              ) : (
+                <div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0">
+                  <span className="text-[10px] font-semibold text-gray-500">
+                    {displayInstructorName.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+              )}
+              <span className="text-sm text-gray-600 font-medium truncate max-w-[80px]">
+                {displayInstructorName}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              {!isFree && originalPrice && originalPrice > price && (
+                <span className="text-sm text-gray-400 line-through">${originalPrice}</span>
+              )}
+              <span className="text-lg font-bold text-[rgb(var(--accent-primary))]">
+                {isFree ? 'Free' : `$${price}`}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}