Issue #3515903 by balintbrews, lauriii, gábor hojtsy: Add starter code for code components

ui/src/features/code-editor/dialogs/AddCodeComponentDialog.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/features/ui/codeComponentDialogSlice';
 import Dialog, { DialogFieldLabel } from '@/components/Dialog';
 import { setName } from '@/features/code-editor/codeEditorSlice';
+import getStarterComponentTemplate from '@/features/code-editor/starterComponentTemplate';
 
 const AddCodeComponentDialog = () => {
   const [componentName, setComponentName] = useState('');
@@ -27,7 +28,7 @@ const AddCodeComponentDialog = () => {
       // Mark this code component as "internal": do not make it available to Content Creators yet.
       // @see docs/config-management.md, section 3.2.1
       status: false,
-      source_code_js: '',
+      source_code_js: getStarterComponentTemplate(componentName),
       source_code_css: '',
       compiled_js: '',
       compiled_css: '',

ui/src/features/code-editor/starterComponentTemplate.ts

+import { camelCase } from 'lodash';
+
+export default function getStarterComponentTemplate(componentName: string) {
+  const camelCased = camelCase(componentName);
+  const variableName = camelCased.charAt(0).toUpperCase() + camelCased.slice(1);
+
+  return `// Use Preact (https://preactjs.com) and Tailwind CSS 4 (https://tailwindcss.com).
+// Global CSS is added to all pages with a @theme directive.
+// Tailwind theme variables must be added in Global CSS.
+// @see https://tailwindcss.com/docs/theme.
+// Do not include @import "tailwindcss"!
+
+// Available third party packages:
+// import { clsx } from 'clsx'
+// import { cva } from 'class-variance-authority'
+// import { twMerge } from 'tailwind-merge'
+//
+// Combine classes with the cn() utility function.
+// @see https://git.drupalcode.org/project/experience_builder/-/blob/0.x/ui/lib/astro-hydration/src/lib/utils.ts
+import { cn } from "@/lib/utils";
+
+const ${variableName} = ({
+  // List component props and slots here. To expose them on the UI, add them
+  // under "Component data".
+  // The camelCased prop/slot name must match the argument name here
+  // (eg. "Card variant" → "cardVariant").
+  title = "${componentName}",
+}) => {
+  return (
+    <div className="max-w-sm min-h-36 p-2 font-bold rounded-lg text-2xl relative mx-auto flex items-center justify-center bg-[#ffc423] text-[#12285f]">
+      <ControlDots className="top-4 left-4 stroke-white absolute" />
+      {title}
+    </div>
+  );
+};
+
+export default ${variableName};
+
+const ControlDots = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 31 9"
+    fill="none"
+    strokeWidth="2"
+    className={cn("w-12", className)}
+  >
+    <ellipse cx="4.13" cy="4.97" rx="3.13" ry="2.97" />
+    <ellipse cx="15.16" cy="4.97" rx="3.13" ry="2.97" />
+    <ellipse cx="26.19" cy="4.97" rx="3.13" ry="2.97" />
+  </svg>
+);
+`;
+}