Copy Components set to root

cms-kit-components-set/_templates/ContentBlock/new/ContentBlocks_BlockTemplate_Component.tsx.ejs.t

@@ -0,0 +1,61 @@
+---
+to: ContentBlocks/<%= h.inflection.camelize(name, false) %>/Component.tsx
+---
+import React from 'react';
+
+import { withCMS } from '@focus-reactive/cms-kit-sanity';
+import { ContentBlockGeneric } from '@focus-reactive/cms-kit-sanity/sanity';
+import { GenericRichText } from '@focus-reactive/cms-kit-sanity/common';
+
+import { sa } from './sa-adapters';
+import { SmartImage } from '../../ContentComponents/SmartImage';
+import { Section, SectionProps } from '../../ContentComponents/Section';
+
+const RichTextComponents = {
+  block: {
+    h2: ({ children }: { children: React.ReactElement }) => (
+      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        {children}
+      </h2>
+    ),
+    normal: ({ children }: { children: React.ReactElement }) => (
+      <p className="mt-2 text-lg leading-8 text-gray-600">{children}</p>
+    ),
+  },
+};
+
+type Props = ContentBlockGeneric & {
+  title: string;
+  description: object;
+  image: object;
+  backgroundColor: string;
+  blockOptions: SectionProps;
+};
+
+function <%= h.inflection.camelize(name, false) %>(props: Props) {
+  const { title, description, image, backgroundColor, blockOptions } = props;
+  return (
+    <Section
+      backgroundOptions={blockOptions.backgroundOptions}
+      layoutOptions={blockOptions.layoutOptions}
+    >
+      <h3
+        className={`text-3xl pb-6 bg-[${backgroundColor}]`}
+      >{`<%= h.inflection.camelize(name, false) %>: ${title}`}</h3>
+      <GenericRichText value={description} components={RichTextComponents} />
+      {image && (
+        <div className="h-80 w-full overflow-hidden my-5">
+          <SmartImage imageWithMetadata={image} />
+        </div>
+      )}
+      <details className="my-10">
+        <summary>Click to view the props</summary>
+        <pre className="text-sm">
+          <code>{JSON.stringify(props, null, 2)}</code>
+        </pre>
+      </details>
+    </Section>
+  );
+}
+
+export default withCMS({ sa })(<%= h.inflection.camelize(name, false) %>);

cms-kit-components-set/_templates/ContentBlock/new/ContentBlocks_BlockTemplate_index.ts.ejs.t

@@ -0,0 +1,76 @@
+---
+to: ContentBlocks/<%= h.inflection.camelize(name, false) %>/index.ts
+---
+/**
+ * This is a template content block intended to serve as a sample for creating new blocks. It contains the minimal required structure and functional components.
+ *
+ * If you wish to quickly add this block to your project, simply navigate through all the files in the root directory of the `blocks` folder and uncomment the relevant imports and insertions.
+ * Afterward, you can edit the block as needed. However, a more scalable and recommended approach for adding new components involves the following steps:
+ *
+ * 1. Copy the <%= h.inflection.camelize(name, false) %> folder to a new folder with the desired component name.
+ * 2. Rename the component, schema, and template names from <%= h.inflection.camelize(name, false) %> to your chosen name.
+ * 3. Import all elements of your new component in the files within the `blocks` folder, similar to how <%= h.inflection.camelize(name, false) %> is imported.
+ * 4. You will then be able to see your component in the Sanity plugin and add it to a page.
+ * 5. Edit the component's code and schema, and update the template as necessary.
+ * 6. Repeat these steps to create additional components.
+ */
+
+export { default as <%= h.inflection.camelize(name, false) %> } from './Component';
+
+/**
+ * The Content Block consists of the
+ * following main parts:
+ *
+ * 1. React Component - see the
+ * `Component.tsx` file. This is the
+ * primary location where the rendering
+ * of your component on the page is
+ * defined. Edit this file to set the
+ * design and behavior of the component.
+ * If necessary, feel free to split the
+ * component into multiple files. Treat
+ * it as a regular React component. The
+ * component should be wrapped in a HOC:
+ * `export default withCMS({ sa })(<%= h.inflection.camelize(name, false) %>);`,
+ * where you need to pass the adapter
+ * function to convert CMS content into
+ * component props.
+ *
+ * 2. Adapter Function - see the
+ * `sa-adapters.ts` file. Note: If you
+ * are developing a component for a
+ * project that uses a single CMS as
+ * the content source, this function
+ * is not mandatory. You can directly
+ * pass the content into the component
+ * and handle it as needed. However,
+ * using such a function is a convenient
+ * pattern if you need to perform
+ * consistent transformations on the
+ * content before passing it to the
+ * component.
+ *
+ * 3. CMS Schema for the Component -
+ * see the `sa-schemas.ts` file. This
+ * file defines the schema of the
+ * component for the CMS. The schema
+ * is included in the overall content
+ * model of the CMS and specifies which
+ * fields will be set in the CMS for
+ * this content block. The values of
+ * these fields will be passed as props
+ * to the component (after being
+ * processed by the adapter function).
+ *
+ * 4. Component Template(s) - see the
+ * `sa-templates.ts` file. This file
+ * can specify one or more sample
+ * content values for this block. All
+ * specified samples will be available
+ * for selection in the CMS plugin. By
+ * setting various sample content
+ * variations, you can showcase the
+ * block's potential uses to the content
+ * editor and simplify their interaction
+ * with the CMS.
+ */

cms-kit-components-set/_templates/ContentBlock/new/ContentBlocks_BlockTemplate_sa-adapters.ts.ejs.t

@@ -0,0 +1,23 @@
+---
+to: ContentBlocks/<%= h.inflection.camelize(name, false) %>/sa-adapters.ts
+---
+import { getCmsKey, AdapterFn } from '@focus-reactive/cms-kit-sanity';
+import { vercelStegaSplit } from '@vercel/stega';
+
+type SaProps = {
+  _type: string;
+  _id: string;
+};
+
+// @ts-ignore
+export const sa: AdapterFn = (cmsProps: SaProps) => {
+  // const backgroundColor = vercelStegaSplit(
+  //   // @ts-ignore
+  //   cmsProps?.backgroundColor || 'white',
+  // ).cleaned;
+  return {
+    key: getCmsKey(cmsProps),
+    ...cmsProps,
+    // cmsProps.backgroundColor,
+  };
+};

cms-kit-components-set/_templates/ContentBlock/new/ContentBlocks_BlockTemplate_sa-schema.ts.ejs.t

@@ -0,0 +1,57 @@
+---
+to: ContentBlocks/<%= h.inflection.camelize(name, false) %>/sa-schema.ts
+---
+import {
+  BlockPreview,
+  customRichText,
+  imageWithMetadata,
+} from '@focus-reactive/cms-kit-sanity/sanity';
+import { defineBlockType } from '../../sa-config';
+import { blockOptions } from '../../ContentComponents/Section';
+
+export const <%= h.inflection.camelize(name, true) %> = defineBlockType(({ df }) => ({
+  name: '<%= h.inflection.camelize(name, true) %>',
+  type: 'object',
+  title: '<%= h.inflection.titleize(name) %>',
+  fields: [
+    df({
+      name: 'title',
+      type: 'string',
+    }),
+    df({
+      name: 'description',
+      type: customRichText.name,
+    }),
+    df({
+      name: 'image',
+      type: imageWithMetadata.name,
+    }),
+    df({
+      name: 'backgroundColor',
+      type: 'string',
+    }),
+    df({
+      name: 'blockOptions',
+      type: blockOptions.name,
+    }),
+  ],
+  components: { preview: BlockPreview },
+  preview: {
+    select: {
+      customTitle: 'title',
+      components: 'components',
+      blockOptions: 'blockOptions',
+    },
+    // @ts-ignore
+    prepare({ components, blockOptions, customTitle }) {
+      return {
+        title: customTitle || '<%= h.inflection.titleize(name) %>',
+        customTitle,
+        components,
+        blockOptions,
+      };
+    },
+  },
+}));
+
+export default [<%= h.inflection.camelize(name, true) %>];

cms-kit-components-set/_templates/ContentBlock/new/ContentBlocks_BlockTemplate_sa-templates.ts.ejs.t

@@ -0,0 +1,23 @@
+---
+to: ContentBlocks/<%= h.inflection.camelize(name, false) %>/sa-templates.ts
+---
+import { TemplateArea, TemplateCategory } from '@focus-reactive/cms-kit-sanity';
+import type { SanityTemplate } from '@focus-reactive/cms-kit-sanity/sanity';
+
+import { <%= h.inflection.camelize(name, true) %> } from './sa-schema';
+import <%= h.inflection.camelize(name, true) %>DefaultJSON from './templates/sa-mock-default.json';
+import { namespace } from '../../namespace.config';
+
+const <%= h.inflection.camelize(name, true) %>Default: SanityTemplate = {
+  name: '<%= h.inflection.camelize(name, true) %>',
+  type: <%= h.inflection.camelize(name, true) %>.name,
+  namespace: namespace.name,
+  title: '<%= h.inflection.titleize(name) %>',
+  description: 'Starting block for development',
+  category: TemplateCategory.pageBlock,
+  area: TemplateArea.marketing,
+  template: <%= h.inflection.camelize(name, true) %>DefaultJSON,
+  height: 600 + 4, // 4 is iframe border
+};
+
+export default [<%= h.inflection.camelize(name, true) %>Default];