@alpaca-editor/core 1.0.0 → 1.0.3

package/src/editor/sidebar/Insert.tsx

@@ -14,7 +14,7 @@ export function Insert() {
     {
       label: "Existing Component",
       content: (
-        <div className="flex-1 relative">
+        <div className="relative flex-1">
           <div className="absolute inset-0 overflow-auto">
             <MainContentTree mode="insert" />
           </div>
@@ -27,7 +27,7 @@ export function Insert() {
     <SimpleTabs
       key="insert-tabs"
       tabs={tabs}
-      className=" flex gap-1 justify-center items-center py-3 text-sm border-b border-gray-200"
+      className="flex items-center justify-center gap-4 border-b border-gray-200 py-3 text-sm"
       activeTab={activeTab}
       setActiveTab={(index) => setActiveTab(index)}
     />

package/src/editor/sidebar/MainContentTree.tsx

@@ -63,6 +63,7 @@ export function MainContentTree({
             selectionMode={mode == "insert" ? "none" : "multiple"}
             selectedItemIds={selectedItemIds}
             onSelectionChange={(selection) => {
+              if (mode === "insert") return;
               const selectedItems = selection as ItemTreeNodeData[];
               setSelectedItemIds(selectedItems.map((x) => x.id));
               if (selectedItems.length > 0 && selectedItems[0])

package/src/editor/sidebar/Translations.tsx

@@ -25,7 +25,7 @@ export function Translation() {
   >(null);
 
   const [translationProvider, setTranslationProvider] = useState<string | null>(
-    localStorage.getItem("editor.translationProvider") || null
+    localStorage.getItem("editor.translationProvider") || null,
   );
 
   if (!editContext) return null;
@@ -68,7 +68,7 @@ export function Translation() {
     return (
       <div
         key={language.languageCode}
-        className=" flex gap-2"
+        className="flex gap-2"
         onClick={() => selectLanguage(language)}
       >
         <img src={language.icon} className="h-5" /> {language.name}
@@ -80,7 +80,7 @@ export function Translation() {
     if (!item) return;
 
     const status = translationStatus?.find(
-      (x) => x.targetLanguage === languageCode
+      (x) => x.targetLanguage === languageCode,
     );
 
     if (!status) return;
@@ -156,7 +156,7 @@ export function Translation() {
             });
           }
         }
-      }
+      },
     );
     return removeSocketMessageListener;
   }, [editContext, setTranslationProgress]);
@@ -164,7 +164,7 @@ export function Translation() {
   const languageData = languages.map((x) => ({
     ...x,
     translationStatus: translationStatus?.find(
-      (y) => y.targetLanguage === x.languageCode
+      (y) => y.targetLanguage === x.languageCode,
     ),
     translationProgress: translationProgress.get(x.languageCode),
   }));
@@ -179,8 +179,8 @@ export function Translation() {
   });
 
   return (
-    <div className="flex flex-col gap-2 h-full">
-      <div className="flex p-3 gap-2 justify-end items-center w-full bg-gray-50 flex-wrap">
+    <div className="flex h-full flex-col gap-2">
+      <div className="flex w-full flex-wrap items-center justify-end gap-2 bg-gray-50 p-3">
         <Dropdown
           options={translationProviders || []}
           onChange={(e) => setTranslationProvider(e.value)}
@@ -207,8 +207,8 @@ export function Translation() {
           label="Create Versions"
         />
       </div>
-      <div className="flex-1 relative">
-        <div className="overflow-y-auto absolute inset-0">
+      <div className="relative flex-1">
+        <div className="absolute inset-0 overflow-y-auto">
           <SimpleTable
             columns={[
               {
@@ -222,8 +222,8 @@ export function Translation() {
                           ev.checked
                             ? [...checkedLanguages, x.languageCode]
                             : checkedLanguages.filter(
-                                (y) => y !== x.languageCode
-                              )
+                                (y) => y !== x.languageCode,
+                              ),
                         );
                       }}
                     />
@@ -241,7 +241,7 @@ export function Translation() {
                 body: (x) => (
                   <div className="flex items-center gap-2">
                     {x.translationStatus?.status === "In Progress" && (
-                      <div className="w-full relative">
+                      <div className="relative w-full">
                         <ProgressBar
                           style={{ height: "20px" }}
                           value={(x.translationProgress?.progress || 0) * 100}

package/src/editor/sidebar/ViewSelector.tsx

@@ -9,7 +9,7 @@ export function ViewSelector() {
     editContext?.configuration.editor.views.filter((x) => !x.hidden) ?? [];
 
   return (
-    <div className="shadow-right-soft z-10 flex w-11 max-w-11 flex-col gap-1 bg-gray-100">
+    <div className="z-10 flex max-w-11 flex-col items-center gap-4 bg-gray-100 p-2 shadow-md">
       {views
         .filter((x) => x.icon)
         .map((x, i) => (
@@ -20,18 +20,17 @@ export function ViewSelector() {
               editContext?.viewName == x.name
                 ? "active text-gray-900"
                 : "text-gray-400 hover:text-gray-900",
-              "cursor-pointer p-3",
+              "cursor-pointer",
             )}
             data-sidebarview-name={x.name}
             onClick={() => editContext?.switchView(x.name)}
           >
             {typeof x.icon === "string" ? (
-              <i
-                className={classNames(x.icon)}
-                style={{ fontSize: "1.25rem" }}
-              />
+              <i className={classNames(x.icon)} style={{ fontSize: "1rem" }} />
             ) : (
-              x.icon
+              <div className="flex h-5 w-5 items-center justify-center">
+                {x.icon}
+              </div>
             )}
           </div>
         ))}

package/src/editor/ui/PerfectTree.tsx

@@ -313,7 +313,7 @@ const NodeContent = memo(
       if (node.hasChildren && node.children === null) {
         return (
           <ProgressSpinner
-            style={{ width: "18px", height: "18px", margin: "0 2px" }}
+            style={{ width: "14px", height: "14px", margin: "0 2px" }}
             className="text-gray-500"
           />
         );
@@ -322,7 +322,7 @@ const NodeContent = memo(
       return (
         <span
           onClick={handleToggle}
-          className={`mr-2 inline-block transform cursor-pointer transition duration-150 select-none ${
+          className={`mr-1 inline-block transform cursor-pointer text-gray-500 transition duration-150 select-none ${
             isExpanded ? "rotate-90" : "rotate-0"
           }`}
         >

package/src/editor/ui/SimpleTable.tsx

@@ -22,7 +22,7 @@ export function SimpleTable<T>({
   rowClassName?: (item: T) => string;
 }) {
   return (
-    <table className="table-auto min-w-full text-left text-xs font-light text-surface">
+    <table className="text-surface min-w-full table-auto text-left text-xs font-light">
       <thead className="border-b border-neutral-200 font-medium">
         <tr>
           {columns.map((col, index) => (
@@ -38,7 +38,7 @@ export function SimpleTable<T>({
             className={classNames(
               "border-b border-neutral-200",
               onRowClick ? "cursor-pointer hover:bg-neutral-100" : "",
-              rowClassName ? rowClassName(item) : ""
+              rowClassName ? rowClassName(item) : "",
             )}
             onClick={(ev) => {
               if (onRowClick) onRowClick({ item, event: ev });
@@ -48,10 +48,7 @@ export function SimpleTable<T>({
             key={index}
           >
             {columns.map((col, index) => (
-              <td
-                className={classNames("px-2 py-2", col.className)}
-                key={index}
-              >
+              <td className={classNames("p-2", col.className)} key={index}>
                 {col.body(item)}
               </td>
             ))}

package/src/editor/utils.ts

@@ -18,7 +18,7 @@ export function useEventListenerExt(
   eventName: string,
   handler: any,
   element: HTMLElement | Window,
-  capture = false
+  capture = false,
 ) {
   // Create a ref that stores handler
   const savedHandler = useRef<any>(undefined);
@@ -49,20 +49,20 @@ export function useEventListenerExt(
         element.removeEventListener(eventName, eventListener);
       };
     },
-    [eventName, element] // Re-run if eventName or element changes
+    [eventName, element], // Re-run if eventName or element changes
   );
 }
 
 export const useLocalStorage = <T>(
   storageKey: string,
-  fallbackState: T
+  fallbackState: T,
 ): [T, React.Dispatch<React.SetStateAction<T>>] => {
   const [value, setValue] = useState<T>(
     JSON.parse(
       typeof window !== "undefined"
-        ? localStorage.getItem(storageKey) ?? JSON.stringify(fallbackState)
-        : JSON.stringify(fallbackState)
-    )
+        ? (localStorage.getItem(storageKey) ?? JSON.stringify(fallbackState))
+        : JSON.stringify(fallbackState),
+    ),
   );
 
   useEffect(() => {
@@ -75,7 +75,7 @@ export const useLocalStorage = <T>(
 
 export function isFieldActionExecuting(
   field: Field,
-  editContext: EditContextType
+  editContext: EditContextType,
 ) {
   const fieldItem = field.descriptor.item;
 
@@ -88,14 +88,14 @@ export function isFieldActionExecuting(
       x.field.fieldId == field.id &&
       x.field.item?.id == fieldItem.id &&
       x.field.item?.language == fieldItem.language &&
-      x.field.item?.version == fieldItem.version
+      x.field.item?.version == fieldItem.version,
   );
 
   return action?.state == "running";
 }
 
 export function getItemDescriptor(
-  item: FullItem | ItemDescriptor
+  item: FullItem | ItemDescriptor,
 ): ItemDescriptor {
   if (!item) throw new Error("Item is null");
 
@@ -118,7 +118,7 @@ export function getAbsoluteIconUrl(url: string) {
 
 export function findParentWithAttribute(
   element: HTMLElement,
-  attr: string
+  attr: string,
 ): HTMLElement | null {
   while (element && element !== document.documentElement) {
     if (element.hasAttribute(attr)) {
@@ -207,7 +207,7 @@ export function parsePlaceholderKey(key: string) {
 
 export function hasFieldLock(
   field: FieldDescriptor,
-  editContext: EditContextType
+  editContext: EditContextType,
 ) {
   if (!editContext.lockedField) {
     return false;
@@ -222,7 +222,7 @@ export function hasFieldLock(
 
 export function getSessionWithFieldLock(
   field: FieldDescriptor,
-  editContext: EditContextType
+  editContext: EditContextType,
 ) {
   return editContext.activeSessions.find(
     (s) =>
@@ -230,12 +230,12 @@ export function getSessionWithFieldLock(
       s.fieldLock?.fieldId === field.fieldId &&
       s.fieldLock?.item.id === field.item.id &&
       s.fieldLock?.item.language === field.item.language &&
-      s.fieldLock?.item.version === field.item.version
+      s.fieldLock?.item.version === field.item.version,
   );
 }
 
 export function getFieldDescriptorFromElement(
-  element: Element
+  element: Element,
 ): FieldDescriptor {
   return {
     item: {
@@ -263,20 +263,20 @@ export function findNearestComponentId(startElement: Element) {
 
 export function findFieldElement(
   iframe: HTMLIFrameElement,
-  fieldDescriptor: FieldDescriptor
+  fieldDescriptor: FieldDescriptor,
 ) {
   if (!iframe.contentWindow?.document.body) return undefined;
 
   const fieldElement = iframe.contentWindow?.document.body.querySelector(
     "[data-itemid='" +
-    fieldDescriptor.item.id +
+      fieldDescriptor.item.id +
       "'][data-language='" +
       fieldDescriptor.item.language +
       "'][data-version='" +
       fieldDescriptor.item.version +
       "'][data-fieldid='" +
       fieldDescriptor.fieldId +
-      "']"
+      "']",
   );
 
   return fieldElement;
@@ -285,16 +285,16 @@ export function findFieldElement(
 export function findComponentRect(
   iframe: HTMLIFrameElement,
   componentId: string,
-  takeScrollPositionIntoAccount = false
+  takeScrollPositionIntoAccount = false,
 ) {
   if (!iframe.contentWindow?.document.body) return undefined;
 
   const componentStart = iframe.contentWindow?.document.body.querySelector(
-    "[data-component-start='" + componentId + "']"
+    "[data-component-start='" + componentId + "']",
   );
 
   const componentEnd = iframe?.contentWindow?.document.body.querySelector(
-    "[data-component-end='" + componentId + "']"
+    "[data-component-end='" + componentId + "']",
   );
 
   if (!componentStart || !componentEnd) {
@@ -316,7 +316,7 @@ export function findComponentRect(
     ? getAbsolutePosition(startElement as HTMLElement, iframe)
     : startElement.getBoundingClientRect();
 
-  let endElement = componentEnd.previousElementSibling;  
+  let endElement = componentEnd.previousElementSibling;
 
   while (endElement && endElement.tagName === "SCRIPT") {
     endElement = endElement.previousElementSibling;
@@ -352,17 +352,17 @@ export function findComponentRect(
 
 export const getAbsolutePosition = (
   element: HTMLElement,
-  iframe: HTMLIFrameElement
+  iframe: HTMLIFrameElement,
 ) => {
   const rect = element.getBoundingClientRect();
   const scrollLeft =
     iframe.contentWindow?.scrollX ||
-    iframe.contentDocument?.documentElement.scrollLeft || 0;
+    iframe.contentDocument?.documentElement.scrollLeft ||
+    0;
   const scrollTop =
     iframe.contentWindow?.scrollY ||
-    iframe.contentDocument?.documentElement.scrollTop || 0;
-
-  
+    iframe.contentDocument?.documentElement.scrollTop ||
+    0;
 
   return {
     x: rect.left + scrollLeft,
@@ -412,7 +412,10 @@ const dateOptions: Intl.DateTimeFormatOptions = {
   hour12: false,
 };
 
-const dateFormat = Intl.DateTimeFormat(typeof navigator !== 'undefined' ? navigator.language : 'en', dateOptions);
+const dateFormat = Intl.DateTimeFormat(
+  typeof navigator !== "undefined" ? navigator.language : "en",
+  dateOptions,
+);
 
 export function formatDate(date: Date) {
   return dateFormat.format(date);
@@ -421,7 +424,7 @@ export function formatDate(date: Date) {
 export function findClosestFieldElement(node: Node | null): HTMLElement | null {
   let current: Node | null = node;
 
-  while (current) {        
+  while (current) {
     if (current.nodeType === Node.ELEMENT_NODE) {
       const element = current as Element;
       if (element.hasAttribute("data-fieldid")) {
@@ -432,4 +435,4 @@ export function findClosestFieldElement(node: Node | null): HTMLElement | null {
   }
 
   return null;
-}
+}

package/src/index.ts

@@ -1,5 +1,7 @@
 export * from "./config/types";
 
+export * from "./types";
+
 export { Editor } from "./editor/Editor";
 
 export { configureForUser } from "./config/config";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/splash-screen/SplashScreen.tsx

@@ -56,7 +56,7 @@ export function SplashScreen() {
   const tabs: Tab[] = [
     {
       content: (
-        <div className="flex flex-1 gap-4 p-2 text-sm">
+        <div className="flex flex-1 gap-4 text-sm">
           <div className="relative w-2/3">
             <ScrollingContentTree
               selectedItemId={selectedPage?.id}
@@ -87,7 +87,7 @@ export function SplashScreen() {
                         version: 0,
                       });
                     }}
-                    className="flex cursor-pointer items-center gap-2 p-2 text-xs hover:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-2 p-1 text-xs hover:bg-gray-100"
                   >
                     {page.icon && (
                       <img src={page.icon} width="16" height="16" />

package/styles.css

@@ -1,10 +1,127 @@
-@source "./";
-
 @theme {
   --font-geist-sans: "GeistSans";
   --font-geist-mono: "GeistMono";
 }
 
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 @layer alpaca-editor {
   .bg-shape-black {
     background-color: black;
@@ -474,3 +591,8 @@
   overflow: auto;
   resize: vertical;
 }
+
+.p-checkbox-box {
+  width: 15px;
+  height: 15px;
+}

package/tsconfig.build.json

@@ -1,21 +1,31 @@
 {
   "compilerOptions": {
-    "target": "es2020",
-    "module": "commonjs",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "target": "es2022",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
     "skipLibCheck": true,
-    "strict": false,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": false,
-    "incremental": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
-    "outDir": "./dist"
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "sourceMap": true,
+    "removeComments": false,
+    "lib": ["dom", "dom.iterable", "esnext"]
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules"]
-} 
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "@repo/typescript-config/react-library.json",
   "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "outDir": "dist",
     "module": "ES2020",
     "moduleResolution": "bundler",