xegavnj 0.1.8

package/components/AppSidebar.jsx

@@ -0,0 +1,405 @@
+"use client";
+import { useState } from "react";
+import styled, { css } from "styled-components";
+import { useTheme } from "./ThemeSwitcher.jsx";
+
+import { 
+  Play, 
+  Square, 
+  CreditCard, 
+  PanelTop, 
+  PanelBottom, 
+  Sidebar as SidebarIcon,
+  Layout,
+  Copy, 
+  Check, 
+  Code as CodeIcon,
+  Home,
+  Settings,
+  User 
+} from "lucide-react";
+
+// Base styles for the wrapper
+const SidebarWrapper = styled.aside`
+  width: 250px;
+  min-height: 100vh;
+  background-color: ${({ theme }) => theme.background};
+  border-right: 1px solid ${({ theme }) => theme.border || "#e5e7eb"};
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+
+  ${({ variant, theme }) => variant === 'floating' && css`
+    min-height: auto;
+    height: calc(100vh - 2rem);
+    margin: 1rem;
+    border-radius: 16px;
+    border: 1px solid ${theme.border || "#e5e7eb"};
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+  `}
+`;
+
+const SidebarTitle = styled.h2`
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 700;
+  color: ${({ theme }) => theme.secondary || "#6b7280"};
+  margin-bottom: 1rem;
+  padding-left: 0.75rem;
+`;
+
+const GroupTitle = styled.h3`
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: ${({ theme }) => theme.primary || "#3b82f6"};
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  opacity: 0.9;
+`;
+
+const Menu = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+const MenuItem = styled.li`
+  padding: 0.6rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  color: ${({ theme }) => theme.text};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  transition: all 0.2s;
+  font-weight: 500;
+  position: relative;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.border || "#e5e7eb"};
+    color: ${({ theme }) => theme.primary || "#3b82f6"};
+  }
+
+  svg {
+    opacity: 0.7;
+  }
+  
+  &:hover svg {
+    opacity: 1;
+  }
+`;
+
+// Helper to render a list of items
+const MenuList = ({ items, currentTheme, onMenuClick }) => (
+  <Menu>
+    {items.map((item, index) => {
+      const label = typeof item === 'string' ? item : item.label;
+      const Icon = item.icon || Layout;
+
+      return (
+        <MenuItem
+          key={index}
+          theme={currentTheme}
+          onClick={() => onMenuClick && onMenuClick(label)}
+        >
+          <Icon size={18} />
+          {label}
+        </MenuItem>
+      );
+    })}
+  </Menu>
+);
+
+const defaultItems = [
+  { label: "Get Started", icon: Play },
+  { label: "Button", icon: Square },
+  { label: "Card", icon: CreditCard },
+  { label: "AppHeader", icon: PanelTop },
+  { label: "AppFooter", icon: PanelBottom },
+  { label: "AppSidebar", icon: SidebarIcon },
+];
+
+export default function AppSidebar({
+  title = "Documentation",
+  items = defaultItems,
+  groups = [], // Array of { title: string, items: [] }
+  variant = "default", // default | grouped | floating
+  onMenuClick,
+}) {
+  const { theme: themeName } = useTheme();
+  
+  // Use a fallback if theme context isn't available
+  // e.g. when used in isolation or passed explicitly
+  const themesLib = require("../theme.js").themes; 
+  const currentTheme = themesLib[themeName] || themesLib.light;
+
+  return (
+    <SidebarWrapper theme={currentTheme} variant={variant}>
+      <SidebarTitle theme={currentTheme}>{title}</SidebarTitle>
+
+      {variant === 'grouped' && groups.length > 0 ? (
+        // Grouped Layout
+        groups.map((group, idx) => (
+          <div key={idx}>
+            <GroupTitle theme={currentTheme}>{group.title}</GroupTitle>
+            <MenuList 
+              items={group.items} 
+              currentTheme={currentTheme} 
+              onMenuClick={onMenuClick} 
+            />
+          </div>
+        ))
+      ) : (
+        // Default Layout
+        <MenuList 
+          items={items} 
+          currentTheme={currentTheme} 
+          onMenuClick={onMenuClick} 
+        />
+      )}
+    </SidebarWrapper>
+  );
+}
+
+// =============================================================================
+// SHOWCASE & DOCUMENTATION WRAPPER
+// =============================================================================
+
+const ShowcaseContainer = styled.div`
+  width: 100%;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  background-color: #f8fafc;
+  min-height: 100vh;
+`;
+
+const Title = styled.h2`
+  text-align: center;
+  font-size: 2rem;
+  color: #1e293b;
+  margin-bottom: 2rem;
+  font-weight: 800;
+`;
+
+const ShowcaseBlock = styled.div`
+  background: white;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+  border: 1px solid #e2e8f0;
+`;
+
+const PreviewArea = styled.div`
+  width: 100%;
+  padding: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background-color: #f3f4f6;
+  min-height: 500px;
+  overflow: hidden;
+`;
+
+const ActionSelect = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem;
+    background: #f1f5f9;
+    border-top: 1px solid #e2e8f0;
+`;
+
+const ActionButton = styled.button`
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    border: 1px solid #cbd5e1;
+    background: white;
+    font-size: 0.85rem;
+    color: #475569;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+
+    &:hover {
+        background: #f8fafc;
+        border-color: #94a3b8;
+    }
+`;
+
+const CodeBlock = styled.div`
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 1rem;
+  overflow-x: auto;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  border-top: 1px solid #333;
+`;
+
+function SidebarVariantDisplay({ title, description, code, children }) {
+    const [showCode, setShowCode] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div>
+            <h3 style={{ textAlign: 'center', marginBottom: '0.5rem', color: '#1e293b', fontSize: '1.5rem', fontWeight: 700 }}>{title}</h3>
+            <p style={{ textAlign: 'center', marginBottom: '1.5rem', color: '#64748b' }}>{description}</p>
+            <ShowcaseBlock>
+                <PreviewArea>
+                   <div style={{ transform: "scale(0.85)", height: '100%', maxHeight: '400px', border: "1px solid #e5e7eb", boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1)", background: 'white' }}>
+                      {children}
+                   </div>
+                </PreviewArea>
+                <ActionSelect>
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                        <ActionButton onClick={() => setShowCode(!showCode)}>
+                            <CodeIcon size={16} />
+                            {showCode ? "Sembunyikan Kode" : "Lihat Kode"}
+                        </ActionButton>
+                        {showCode && (
+                            <ActionButton onClick={handleCopy}>
+                                {copied ? <Check size={16} /> : <Copy size={16} />}
+                                {copied ? "Disalin!" : "Salin"}
+                            </ActionButton>
+                        )}
+                    </div>
+                </ActionSelect>
+                {showCode && (
+                    <CodeBlock>
+                        <pre>{code}</pre>
+                    </CodeBlock>
+                )}
+            </ShowcaseBlock>
+        </div>
+    );
+}
+
+export function SidebarShowcase() {
+  return (
+    <ShowcaseContainer>
+      <Title>Sidebar Variants</Title>
+      <p style={{ textAlign: 'center', color: '#666', marginBottom: '2rem' }}>
+        Komponen Sidebar dengan berbagai varian tata letak.
+      </p>
+
+      <SidebarVariantDisplay 
+        title="1. Sidebar Default"
+        description="Navigasi daftar datar standar."
+        code={`import { AppSidebar } from "uts-ds";
+import { Home, Settings } from "lucide-react";
+
+export default function MyLayout() {
+  const items = [
+    { label: "Home", icon: Home },
+    { label: "Settings", icon: Settings }
+  ];
+
+  return (
+    <AppSidebar 
+      title="My App" 
+      items={items} 
+      onMenuClick={(label) => console.log(label)} 
+    />
+  );
+}`}
+      >
+        <AppSidebar 
+             title="My App" 
+             items={[
+                { label: "Home", icon: Home },
+                { label: "Settings", icon: Settings }
+             ]}
+        />
+      </SidebarVariantDisplay>
+
+      <SidebarVariantDisplay 
+        title="2. Sidebar Terkelompok"
+        description="Atur item ke dalam bagian berjudul menggunakan props groups."
+        code={`import { AppSidebar } from "uts-ds";
+import { Play, Square, User, CreditCard } from "lucide-react";
+
+export default function MyGroupedLayout() {
+  const groups = [
+    { 
+      title: "Main", 
+      items: [{ label: "Overview", icon: Square }, { label: "Analytics", icon: Play }] 
+    },
+    { 
+      title: "Settings", 
+      items: [{ label: "Account", icon: User }, { label: "Billing", icon: CreditCard }] 
+    }
+  ];
+
+  return (
+    <AppSidebar 
+      variant="grouped" 
+      title="Dashboard" 
+      groups={groups} 
+    />
+  );
+}`}
+      >
+        <AppSidebar 
+            variant="grouped" 
+            title="Dashboard" 
+            groups={[
+            { title: "Main", items: [{ label: "Overview", icon: Square }, { label: "Analytics", icon: Play }] },
+            { title: "Settings", items: [{ label: "Account", icon: User }, { label: "Billing", icon: CreditCard }] }
+            ]} 
+        />
+      </SidebarVariantDisplay>
+
+      <SidebarVariantDisplay 
+        title="3. Sidebar Melayang"
+        description="Gaya mengambang yang terpisah, cocok untuk dasbor modern."
+        code={`import { AppSidebar } from "uts-ds";
+import { Square, Play, User } from "lucide-react";
+
+export default function MyFloatingLayout() {
+  return (
+    <div style={{ background: "#f3f4f6", height: "100vh", padding: "1rem" }}>
+      <AppSidebar 
+        variant="floating" 
+        title="App" 
+        items={[
+            { label: "Dashboard", icon: Square }, 
+            { label: "Messages", icon: Play },
+            { label: "Profile", icon: User }
+        ]} 
+      />
+    </div>
+  );
+}`}
+      >
+         <AppSidebar 
+            variant="floating" 
+            title="App" 
+            items={[
+                { label: "Dashboard", icon: Square }, 
+                { label: "Messages", icon: Play },
+                { label: "Profile", icon: User }
+            ]} 
+         />
+      </SidebarVariantDisplay>
+
+    </ShowcaseContainer>
+  );
+}

package/components/Button.jsx

@@ -0,0 +1,244 @@
+"use client";
+import { useState } from 'react';
+import styled from "styled-components";
+import { Copy, Check, Code as CodeIcon, Save, Trash2, Edit } from "lucide-react";
+
+// =============================================================================
+// REUSABLE BUTTON COMPONENT
+// =============================================================================
+
+const StyledButton = styled.button`
+  padding: 12px 24px;
+  background-color: ${(props) => props.$bg || "#4f46e5"};
+  color: ${(props) => props.$color || "white"};
+  border: ${(props) => props.$border || "none"};
+  border-radius: ${(props) => props.$radius || "8px"};
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: fit-content;
+  transition: all 0.2s ease;
+  font-size: 0.95rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+
+  &:hover {
+    background-color: ${(props) => props.$hoverBg || props.$bg};
+    filter: brightness(110%);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+`;
+
+export function Button({
+  label,
+  children,
+  onClick,
+  bg,
+  hoverBg,
+  color,
+  border,
+  radius,
+  icon: Icon
+}) {
+  return (
+    <StyledButton 
+      onClick={onClick} 
+      $bg={bg} 
+      $hoverBg={hoverBg}
+      $color={color}
+      $border={border}
+      $radius={radius}
+    >
+      {Icon && <Icon size={18} />}
+      {label || children}
+    </StyledButton>
+  );
+}
+
+// =============================================================================
+// SHOWCASE & DOCUMENTATION WRAPPER
+// =============================================================================
+
+const ShowcaseContainer = styled.div`
+  width: 100%;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  background-color: #f8fafc;
+  min-height: 100vh;
+`;
+
+const Title = styled.h2`
+  text-align: center;
+  font-size: 2rem;
+  color: #1e293b;
+  margin-bottom: 2rem;
+  font-weight: 800;
+`;
+
+const ShowcaseBlock = styled.div`
+  background: white;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+  border: 1px solid #e2e8f0;
+`;
+
+const PreviewArea = styled.div`
+  width: 100%;
+  padding: 2rem;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+`;
+
+const ActionSelect = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem;
+    background: #f1f5f9;
+    border-top: 1px solid #e2e8f0;
+`;
+
+const ActionButton = styled.button`
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    border: 1px solid #cbd5e1;
+    background: white;
+    font-size: 0.85rem;
+    color: #475569;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+
+    &:hover {
+        background: #f8fafc;
+        border-color: #94a3b8;
+    }
+`;
+
+const CodeBlock = styled.div`
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 1rem;
+  overflow-x: auto;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  border-top: 1px solid #333;
+`;
+
+function ButtonVariantDisplay({ title, code, children }) {
+    const [showCode, setShowCode] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div>
+            <h3 style={{ textAlign: 'center', marginBottom: '1rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: '1rem' }}>{title}</h3>
+            <ShowcaseBlock>
+                <PreviewArea>
+                    {children}
+                </PreviewArea>
+                <ActionSelect>
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                        <ActionButton onClick={() => setShowCode(!showCode)}>
+                            <CodeIcon size={16} />
+                            {showCode ? "Hide Code" : "View Use Code"}
+                        </ActionButton>
+                        {showCode && (
+                            <ActionButton onClick={handleCopy}>
+                                {copied ? <Check size={16} /> : <Copy size={16} />}
+                                {copied ? "Copied!" : "Copy"}
+                            </ActionButton>
+                        )}
+                    </div>
+                </ActionSelect>
+                {showCode && (
+                    <CodeBlock>
+                        <pre>{code}</pre>
+                    </CodeBlock>
+                )}
+            </ShowcaseBlock>
+        </div>
+    );
+}
+
+export function ButtonShowcase() {
+  return (
+    <ShowcaseContainer>
+      <Title>Button Component Variants</Title>
+      <p style={{ textAlign: 'center', color: '#666', marginBottom: '2rem' }}>
+        Komponen tombol yang dapat disesuaikan. Copy kodenya untuk menggunakan.
+      </p>
+
+      <ButtonVariantDisplay 
+        title="Primary Blue"
+        code={`<Button label="Save Changes" bg="#4f46e5" icon={Save} />`}
+      >
+        <Button label="Save Changes" bg="#4f46e5" icon={Save} />
+      </ButtonVariantDisplay>
+
+      <ButtonVariantDisplay 
+        title="Danger Red"
+        code={`<Button 
+  label="Delete Item" 
+  bg="#ef4444" 
+  hoverBg="#dc2626" 
+  icon={Trash2} 
+/>`}
+      >
+        <Button label="Delete Item" bg="#ef4444" hoverBg="#dc2626" icon={Trash2} />
+      </ButtonVariantDisplay>
+
+      <ButtonVariantDisplay 
+        title="Outline / Secondary"
+        code={`<Button 
+  label="Edit Profile" 
+  bg="transparent" 
+  color="#4f46e5" 
+  border="2px solid #4f46e5" 
+  hoverBg="#eef2ff" 
+  icon={Edit} 
+/>`}
+      >
+        <Button 
+            label="Edit Profile" 
+            bg="transparent" 
+            color="#4f46e5" 
+            border="2px solid #4f46e5" 
+            hoverBg="#eef2ff"
+            icon={Edit}
+        />
+      </ButtonVariantDisplay>
+
+    </ShowcaseContainer>
+  );
+}
+
+export default function AppButton(props) {
+    // If no props are passed or just child props that imply showcase context in docs (this is heuristic), 
+    // but better to rely on explicit usage. 
+    // However, to mimic Header pattern, the default export is the Reusable Component 
+    // BUT we might want to default export the Component for standard usage.
+    
+    return <Button {...props} />;
+}