@mshuja288/aksuicore 0.2.0 → 0.3.0

package/src/patterns/RecordWorkspace.tsx

@@ -25,6 +25,15 @@ export type TableColumn<T> = {
   filterPlaceholder?: string;
 };
 
+/** Formats supported by the shared table download control (matches akscore TableExport). */
+export type ExportDownloadFormat = "csv" | "xlsx" | "json";
+
+const EXPORT_FORMAT_OPTIONS: { format: ExportDownloadFormat; label: string }[] = [
+  { format: "csv", label: "CSV" },
+  { format: "xlsx", label: "Excel" },
+  { format: "json", label: "JSON" },
+];
+
 type SortDirection = "asc" | "desc";
 type SortState = { key: string; direction: SortDirection };
 type DetailLine = { label: string; value: string };
@@ -105,6 +114,16 @@ function PreviewIcon() {
   );
 }
 
+function DownloadIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M10 3.5v8.2" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <path d="M6.5 9.2 10 12.8l3.5-3.6" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 15.5h12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  );
+}
+
 function DetailList({ lines }: { lines: DetailLine[] }) {
   return (
     <dl className="record-detail-list">
@@ -132,6 +151,9 @@ export function RecordWorkspace<T>({
   onDelete,
   canUpdate,
   canDelete,
+  onDownload,
+  canDownload = true,
+  downloadBusy = false,
   toolbar,
   form,
 }: {
@@ -148,6 +170,10 @@ export function RecordWorkspace<T>({
   onDelete?: (item: T) => void;
   canUpdate?: (item: T) => boolean;
   canDelete?: (item: T) => boolean;
+  /** When set, shows CSV / Excel / JSON download controls in the side rail. */
+  onDownload?: (format: ExportDownloadFormat) => void;
+  canDownload?: boolean;
+  downloadBusy?: boolean;
   toolbar?: ReactNode;
   /** Slot for Add/Update/View dialogs owned by the host app. */
   form?: ReactNode;
@@ -156,6 +182,7 @@ export function RecordWorkspace<T>({
   const [filters, setFilters] = useState<Record<string, string>>({});
   const [sort, setSort] = useState<SortState | null>(null);
   const [sideOpen, setSideOpen] = useState(false);
+  const [downloadOpen, setDownloadOpen] = useState(false);
   const [previewEnabled, setPreviewEnabled] = useState(false);
   const [previewKey, setPreviewKey] = useState<string | number | null>(null);
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
@@ -205,9 +232,18 @@ export function RecordWorkspace<T>({
   const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
   const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
   const showAdd = canAdd && Boolean(onAdd);
+  const showDownload = Boolean(onDownload) && canDownload;
   const showFilters = filterableColumns.length > 0;
   const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
 
+  function requestDownload(format: ExportDownloadFormat) {
+    if (!onDownload || downloadBusy) {
+      return;
+    }
+    onDownload(format);
+    setDownloadOpen(false);
+  }
+
   function cellText(column: TableColumn<T>, item: T) {
     const raw = column.display ? column.display(item) : column.value(item);
     return raw === null || raw === undefined || raw === "" ? "—" : String(raw);
@@ -463,6 +499,36 @@ export function RecordWorkspace<T>({
                 </button>
               ) : null}
 
+              {showDownload ? (
+                <div className="side-rail-download">
+                  <button
+                    type="button"
+                    className="ghost side-rail-download-toggle"
+                    aria-expanded={downloadOpen}
+                    disabled={downloadBusy}
+                    onClick={() => setDownloadOpen((open) => !open)}
+                  >
+                    <DownloadIcon />
+                    <span>{downloadBusy ? "Downloading…" : "Download"}</span>
+                  </button>
+                  {downloadOpen ? (
+                    <div className="side-rail-download-formats" role="group" aria-label="Download format">
+                      {EXPORT_FORMAT_OPTIONS.map((option) => (
+                        <button
+                          key={option.format}
+                          type="button"
+                          className="ghost side-rail-download-format"
+                          disabled={downloadBusy}
+                          onClick={() => requestDownload(option.format)}
+                        >
+                          {option.label}
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
+
               {showFilters ? (
                 <div className="side-rail-filters">
                   <div className="filter-panel-head">
@@ -519,6 +585,22 @@ export function RecordWorkspace<T>({
                   <PlusIcon />
                 </button>
               ) : null}
+              {showDownload ? (
+                <button
+                  type="button"
+                  className="ghost side-rail-icon"
+                  title="Download"
+                  aria-label="Download"
+                  aria-expanded={downloadOpen}
+                  disabled={downloadBusy}
+                  onClick={() => {
+                    setSideOpen(true);
+                    setDownloadOpen(true);
+                  }}
+                >
+                  <DownloadIcon />
+                </button>
+              ) : null}
               {showFilters ? (
                 <button
                   type="button"

package/src/patterns/index.ts

@@ -1,2 +1,7 @@
 export { AppShell, type AppShellProps } from "./AppShell";
-export { RecordWorkspace, RecordTable, type TableColumn } from "./RecordWorkspace";
+export {
+  RecordWorkspace,
+  RecordTable,
+  type TableColumn,
+  type ExportDownloadFormat,
+} from "./RecordWorkspace";

package/src/primitives/ConfirmDeleteDialog.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Button } from "./Button";
+import { Dialog } from "./Dialog";
+
+export function ConfirmDeleteDialog({
+  open,
+  message,
+  pending = false,
+  onCancel,
+  onConfirm,
+}: {
+  open: boolean;
+  message: string;
+  pending?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <Dialog title="Confirm delete" open={open} onClose={pending ? () => undefined : onCancel} wide={false}>
+      <div className="card-form">
+        <p className="hint">{message}</p>
+        <div className="actions">
+          <Button variant="ghost" onClick={onCancel} disabled={pending}>
+            Cancel
+          </Button>
+          <Button variant="danger" onClick={onConfirm} disabled={pending}>
+            {pending ? "Deleting…" : "Delete"}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

package/src/primitives/index.ts

@@ -2,6 +2,7 @@ export { Button, type ButtonVariant } from "./Button";
 export { Select, AppSelect, type SelectOption, type AppSelectOption } from "./Select";
 export { DateField } from "./DateField";
 export { Dialog, FormDialog } from "./Dialog";
+export { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
 export { Snackbar, StatusMessage } from "./Snackbar";
 export { Topbar } from "./Topbar";
 export { SideNav, type SideNavItem } from "./SideNav";

package/src/theme/patterns.css

@@ -404,6 +404,65 @@ button.side-rail-add:hover {
   background: #2a3546;
 }
 
+.side-rail-download {
+  display: grid;
+  gap: 8px;
+}
+
+button.side-rail-download-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--aks-border, #d7dde5);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+button.side-rail-download-toggle svg {
+  width: 18px;
+  height: 18px;
+}
+
+button.side-rail-download-toggle:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+button.side-rail-download-toggle:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.side-rail-download-formats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+button.side-rail-download-format {
+  padding: 8px 6px;
+  border: 1px solid var(--aks-border, #d7dde5);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  color: var(--aks-brand);
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+button.side-rail-download-format:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+button.side-rail-download-format:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
 .side-rail-filters {
   display: grid;
   gap: 12px;