create-twenty-app 2.5.0 → 2.6.0

package/dist/constants/template/public/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="none">
+  <rect width="80" height="80" rx="16" fill="#141414"/>
+  <rect x="20" y="20" width="16" height="16" rx="4" fill="#FAFAFA"/>
+  <rect x="44" y="20" width="16" height="16" rx="4" fill="#FAFAFA" opacity="0.6"/>
+  <rect x="20" y="44" width="16" height="16" rx="4" fill="#FAFAFA" opacity="0.6"/>
+  <rect x="44" y="44" width="16" height="16" rx="4" fill="#FAFAFA" opacity="0.3"/>
+</svg>

package/dist/constants/template/src/constants/universal-identifiers.ts

@@ -2,3 +2,10 @@ export const APP_DISPLAY_NAME = 'DISPLAY-NAME-TO-BE-GENERATED';
 export const APP_DESCRIPTION = 'DESCRIPTION-TO-BE-GENERATED';
 export const APPLICATION_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
 export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER =
+  'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_LAYOUT_TAB_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_WIDGET_UNIVERSAL_IDENTIFIER = 'UUID-TO-BE-GENERATED';
+export const MAIN_PAGE_NAVIGATION_MENU_ITEM_UNIVERSAL_IDENTIFIER =
+  'UUID-TO-BE-GENERATED';

package/dist/constants/template/src/front-components/main-page.tsx

@@ -0,0 +1,291 @@
+import { defineFrontComponent } from 'twenty-sdk/define';
+import {
+  Avatar,
+  IconBox,
+  IconHierarchy,
+  IconLayout,
+  IconSettingsAutomation,
+} from 'twenty-sdk/ui';
+import { useState } from 'react';
+
+import {
+  APP_DISPLAY_NAME,
+  MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+
+const DOCS_BASE_URL = 'https://docs.twenty.com/developers/extend/apps';
+
+const CATEGORIES = [
+  {
+    title: 'Data model',
+    color: '#73D08D',
+    items: [
+      { label: 'CUSTOM OBJECT', href: `${DOCS_BASE_URL}/data/objects` },
+      {
+        label: 'CUSTOM FIELDS',
+        href: `${DOCS_BASE_URL}/data/extending-objects`,
+      },
+    ],
+    rotation: '2.4deg',
+  },
+  {
+    title: 'Logic',
+    color: '#F4D345',
+    items: [
+      {
+        label: 'TOOLS',
+        href: `${DOCS_BASE_URL}/logic/logic-functions`,
+      },
+      {
+        label: 'LOGIC FUNCTION',
+        href: `${DOCS_BASE_URL}/logic/logic-functions`,
+      },
+      {
+        label: 'SKILLS',
+        href: `${DOCS_BASE_URL}/logic/skills-and-agents`,
+      },
+    ],
+    rotation: '0deg',
+  },
+  {
+    title: 'Layout',
+    color: '#C4A2E0',
+    items: [
+      { label: 'VIEWS', href: `${DOCS_BASE_URL}/layout/views` },
+      { label: 'WIDGETS', href: `${DOCS_BASE_URL}/layout/page-layouts` },
+      {
+        label: 'LAYOUT PAGES',
+        href: `${DOCS_BASE_URL}/layout/page-layouts`,
+      },
+      {
+        label: 'COMMANDS',
+        href: `${DOCS_BASE_URL}/layout/command-menu-items`,
+      },
+    ],
+    rotation: '-2.8deg',
+  },
+] as const;
+
+const ArrowUpRight = ({ color = '#999' }: { color?: string }) => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M4.5 3.5H10.5V9.5M10.5 3.5L3.5 10.5"
+      stroke={color}
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const CategoryCard = ({
+  title,
+  color,
+  items,
+  rotation,
+}: {
+  title: string;
+  color: string;
+  items: ReadonlyArray<{ label: string; href: string }>;
+  rotation: string;
+}) => {
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+
+  const CategoryIcon = () => {
+    if (title === 'Data model') {
+      return <IconHierarchy color={color} size={'20px'} />;
+    }
+    if (title === 'Logic') {
+      return <IconSettingsAutomation color={color} size={'20px'} />;
+    }
+    if (title === 'Layout') {
+      return <IconLayout color={color} size={'20px'} />;
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        border: `1px solid ${color}80`,
+        borderRadius: '12px',
+        overflow: 'hidden',
+        width: '240px',
+        background: '#FFFFFF',
+        transform: `rotate(${rotation})`,
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+      }}
+    >
+      <div
+        style={{
+          padding: '16px 20px',
+          background: `${color}22`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+        }}
+      >
+        <CategoryIcon />
+        <span
+          style={{
+            fontSize: '16px',
+            fontWeight: 600,
+            color: color,
+          }}
+        >
+          {title}
+        </span>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '8px',
+          gap: '4px',
+        }}
+      >
+        {items.map((item) => {
+          const isHovered = hoveredItem === item.label;
+
+          return (
+            <a
+              key={item.label}
+              href={item.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              onMouseEnter={() => setHoveredItem(item.label)}
+              onMouseLeave={() => setHoveredItem(null)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                textDecoration: 'none',
+                cursor: 'pointer',
+                padding: '10px 12px',
+                borderRadius: '8px',
+                background: isHovered ? '#0000000A' : 'transparent',
+                transition: 'background 0.15s',
+              }}
+            >
+              <IconBox color={color} size={'20px'} />
+              <span
+                style={{
+                  fontSize: '13px',
+                  fontWeight: 300,
+                  color: '#333',
+                  letterSpacing: '0.5px',
+                  flex: 1,
+                }}
+              >
+                {item.label}
+              </span>
+              {isHovered && <ArrowUpRight />}
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const MainPage = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        fontFamily:
+          'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        gap: '8px',
+        padding: '40px',
+      }}
+    >
+      <Avatar
+        placeholder={APP_DISPLAY_NAME}
+        placeholderColorSeed={APP_DISPLAY_NAME}
+        size="xl"
+      />
+      <span
+        style={{
+          fontSize: '24px',
+          fontWeight: 600,
+          color: '#333',
+          marginTop: '8px',
+        }}
+      >
+        {APP_DISPLAY_NAME}
+      </span>
+      <span
+        style={{
+          fontSize: '13px',
+          color: '#888',
+          textAlign: 'center',
+          lineHeight: '1.5',
+        }}
+      >
+        Was installed successfully.
+        <br />
+        You can now add content to your app.
+      </span>
+      <a
+        href="/settings/applications#installed"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '6px',
+          marginTop: '16px',
+          fontSize: '13px',
+          color: '#333',
+          textDecoration: 'none',
+          padding: '8px 16px',
+          borderRadius: '8px',
+          border: '1px solid #e0e0e0',
+          background: '#fafafa',
+          transition: 'background 0.15s, border-color 0.15s',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = '#f0f0f0';
+          e.currentTarget.style.borderColor = '#ccc';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = '#fafafa';
+          e.currentTarget.style.borderColor = '#e0e0e0';
+        }}
+      >
+        Open app settings
+        <ArrowUpRight color="#333" />
+      </a>
+      <div
+        style={{
+          display: 'flex',
+          gap: '16px',
+          marginTop: '32px',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+        }}
+      >
+        {CATEGORIES.map((category) => (
+          <CategoryCard
+            key={category.title}
+            title={category.title}
+            color={category.color}
+            items={category.items}
+            rotation={category.rotation}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+  name: APP_DISPLAY_NAME,
+  description: `${APP_DISPLAY_NAME} front component displaying the app logo and name`,
+  component: MainPage,
+});

package/dist/constants/template/src/navigation-menu-items/main-page.navigation-menu-item.ts

@@ -0,0 +1,19 @@
+import {
+  defineNavigationMenuItem,
+  NavigationMenuItemType,
+} from 'twenty-sdk/define';
+
+import {
+  APP_DISPLAY_NAME,
+  MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER,
+  MAIN_PAGE_NAVIGATION_MENU_ITEM_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+
+export default defineNavigationMenuItem({
+  universalIdentifier: MAIN_PAGE_NAVIGATION_MENU_ITEM_UNIVERSAL_IDENTIFIER,
+  name: APP_DISPLAY_NAME,
+  icon: 'IconFile',
+  position: -1,
+  type: NavigationMenuItemType.PAGE_LAYOUT,
+  pageLayoutUniversalIdentifier: MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER,
+});

package/dist/constants/template/src/page-layouts/main-page.page-layout.ts

@@ -0,0 +1,37 @@
+import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
+
+import {
+  APP_DISPLAY_NAME,
+  MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+  MAIN_PAGE_LAYOUT_TAB_UNIVERSAL_IDENTIFIER,
+  MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER,
+  MAIN_PAGE_WIDGET_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/universal-identifiers';
+
+export default definePageLayout({
+  universalIdentifier: MAIN_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER,
+  name: APP_DISPLAY_NAME,
+  type: 'STANDALONE_PAGE',
+  tabs: [
+    {
+      universalIdentifier: MAIN_PAGE_LAYOUT_TAB_UNIVERSAL_IDENTIFIER,
+      title: 'Overview',
+      position: 0,
+      icon: 'IconApps',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
+      widgets: [
+        {
+          universalIdentifier: MAIN_PAGE_WIDGET_UNIVERSAL_IDENTIFIER,
+          title: ' ',
+          type: 'FRONT_COMPONENT',
+          gridPosition: { row: 0, column: 0, rowSpan: 12, columnSpan: 12 },
+          configuration: {
+            configurationType: 'FRONT_COMPONENT',
+            frontComponentUniversalIdentifier:
+              MAIN_PAGE_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+          },
+        },
+      ],
+    },
+  ],
+});

package/dist/constants/template/yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/dist/create-app.command.d.ts

@@ -1,11 +1,10 @@
 export type AuthenticationMethod = 'oauth' | 'apiKey';
 type CreateAppOptions = {
     directory?: string;
-    example?: string;
     name?: string;
     displayName?: string;
     description?: string;
-    apiUrl?: string;
+    workspaceUrl?: string;
     authenticationMethod?: AuthenticationMethod;
 };
 export declare class CreateAppCommand {
@@ -15,12 +14,19 @@ export declare class CreateAppCommand {
     private computeTotalSteps;
     private getAppInfos;
     private validateDirectory;
-    private tryDownloadExample;
     private logPlan;
     private logNextStep;
     private logDetail;
     private pullImageInBackground;
     private ensureDockerServer;
+    private openMainPage;
+    private resolveWorkspaceFrontUrl;
+    private readMainPageLayoutUniversalIdentifier;
+    private resolvePageLayoutId;
+    private sanitizeBrowserUrl;
+    private openInBrowser;
+    private syncApplication;
+    private tryExistingAuth;
     private authenticateWithDevKey;
     private deriveRemoteName;
     private authenticateWithOAuth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-twenty-app",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Command-line interface to create Twenty application",
   "main": "dist/cli.cjs",
   "bin": "dist/cli.cjs",
@@ -35,7 +35,7 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "^4.4.0",
-    "twenty-sdk": "2.5.0",
+    "twenty-sdk": "2.6.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {

package/dist/utils/download-example.d.ts

@@ -1 +0,0 @@
-export declare const downloadExample: (exampleName: string, targetDirectory: string) => Promise<void>;