chore: Added video links to readme and docs

README.md

@@ -8,6 +8,8 @@
 <a href="https://github.com/coltorapps/builder">GitHub</a>
 <span> · </span>
 <a href="https://twitter.com/sandulat">Twitter (X)</a>
+<span> · </span>
+<a href="https://www.youtube.com/watch?v=n6kTcHkjj_8">Watch Intro ►</a>
 </div>
 <br />
 <div align="center">
@@ -32,6 +34,16 @@ Some key characteristics:
 
 Currently, **Builder** offers support for React, with plans to extend compatibility to other front-end frameworks in the future.
 
+Click the thumbnail below to watch the library's intro video.
+
+<div>
+<a href="https://www.youtube.com/watch?v=n6kTcHkjj_8">
+<img src="https://raw.githubusercontent.com/coltorapps/builder/main/assets/youtube-thumbnail.png" alt="drawing" width="400"/>
+</a>
+</div>
+
+<br />
+
 > We are successfully using **Builder** in real-world production apps. However, it's important to note that the project is currently in the alpha stage, which means that breaking changes can occur even in minor or patch updates.
 
 ## Install
@@ -49,9 +61,10 @@ pnpm install @coltorapps/builder @coltorapps/builder-react
 Think of attributes as the props of your entities. For instance, a text field may include attributes such as a label, a requirement flag, a maximum length, and others. Attributes are atomic, enabling their reuse across various entities.
 
 ```ts
-import { createAttribute } from "@coltorapps/builder";
 import { z } from "zod";
 
+import { createAttribute } from "@coltorapps/builder";
+
 export const labelAttribute = createAttribute({
   name: "label",
   validate(value) {
@@ -65,9 +78,10 @@ export const labelAttribute = createAttribute({
 Think of entities with attributes as components with props. For example, you can define a text field entity, and users can later add multiple instances of text fields to a form.
 
 ```ts
-import { createEntity } from "@coltorapps/builder";
 import { z } from "zod";
 
+import { createEntity } from "@coltorapps/builder";
+
 import { labelAttribute } from "./label-attribute";
 
 export const textFieldEntity = createEntity({
@@ -111,6 +125,12 @@ pnpm install
 pnpm dev
 ```
 
+#### Run the tests
+
+```sh
+pnpm test
+```
+
 ## Authors
 
 - Alexandru Stratulat ([@sandulat](https://twitter.com/sandulat))

docs/src/app/docs/api/react/create-attribute-component/page.md

@@ -14,7 +14,7 @@ The function is not just a type safety helper compared to [createEntityComponent
 
 ### `createAttributeComponent(attribute, render)`
 
-Use the `createAttributeComponent` function to define the visual component for your entity:
+Use the `createAttributeComponent` function to define the editor component for your attribute:
 
 ```tsx
 import { createAttributeComponent } from "@coltorapps/builder-react";

docs/src/app/docs/api/react/create-entity-component/page.md

@@ -14,7 +14,7 @@ The function itself serves primarily as a type safety helper and doesn't perform
 
 ### `createEntityComponent(entity, render)`
 
-Use the `createEntityComponent` function to define the visual component for your entity:
+Use the `createEntityComponent` function to define the component for your entity:
 
 ```tsx
 import { createEntityComponent } from "@coltorapps/builder-react";

docs/src/app/docs/guides/form-builder/page.md

@@ -29,8 +29,8 @@ pnpm install @coltorapps/builder @coltorapps/builder-react
 1. Create a label attribute definition by using the `createAttribute` method.
 2. Create a text field entity definition by using the `createEntity` method and attach the label attribute to it.
 3. Create a form builder definition by using the `createBuilder` method and attach the text field entity to it.
-4. Create a visual component for the label attribute by using the `createAttributeComponent` method.
-5. Create a visual component for the text field entity by using the `createEntityComponent` method.
+4. Create an editor component for the label attribute by using the `createAttributeComponent` method.
+5. Create a component for the text field entity by using the `createEntityComponent` method.
 6. Instantiate a builder store using the `useBuilderStore` hook. Utilize the `Entities` component to render the entities from the store's schema, and use the `Attributes` component to display the attributes of a selected entity.
 7. Implement a server action for validating incoming form schemas by using the `validateSchema` method and persisting them in the database. Use this server action to submit the form schema from the client.
 8. Retrieve the built form schema and instantiate an interpreter store with the `useInterpreterStore` hook. Utilize the `Interpreter` component to render the entities from the store's schema.
@@ -583,7 +583,7 @@ export const textFieldEntity = createEntity({
 });
 ```
 
-Create the visual component of the attribute.
+Create the editor component of the attribute.
 
 ```tsx
 import { ZodError } from "zod";

docs/src/app/page.md

@@ -16,6 +16,8 @@ Learn how to get started with Builder through our guides. {% .lead %}
 
 {% /quick-links %}
 
+{% youtube-video /%}
+
 ---
 
 ## Live Example
@@ -26,7 +28,7 @@ A simple example of what can be accomplished with Builder.
 
 ---
 
-## Intro
+## Introduction
 
 **Builder** is a versatile TypeScript library designed for crafting custom form builders and much more. You can also develop website builders, dashboard builders, and any other builders you envision.
 

docs/src/builders/basic-form-builder/builder/preview.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -161,10 +162,32 @@ export function Preview(props: {
 
   return (
     <div>
-      <Button variant="secondary" size="sm" onClick={() => void openPreview()}>
-        <EyeIcon className="mr-2 h-4 w-4" />
-        Preview Form
-      </Button>
+      <div className="dark:hover:prose-a:text-secondary-foreground dark:prose-a:text-secondary-foreground prose-a:no-underline prose-a:font-medium flex gap-4">
+        <Button variant="secondary" size="sm" asChild>
+          <Link
+            href="https://github.com/coltorapps/builder/tree/main/docs/src/builders/basic-form-builder"
+            target="_blank"
+            className="not-prose"
+          >
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 16 16"
+              className="mr-2 h-4 w-4 fill-current"
+            >
+              <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
+            </svg>
+            View on Github
+          </Link>
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => void openPreview()}
+        >
+          <EyeIcon className="mr-2 h-4 w-4" />
+          Preview Form
+        </Button>
+      </div>
       <Dialog modal open={previewVisible} onOpenChange={setPreviewVisible}>
         <DialogContent className="sm:top-[20%] sm:translate-y-0">
           <DialogHeader>

docs/src/components/Hero.tsx

@@ -46,7 +46,7 @@ export function Hero() {
             />
             <div className="relative xl:pr-24">
               <p className="font-display inline bg-gradient-to-t from-slate-400 to-white bg-clip-text text-5xl tracking-tight text-transparent">
-                Build your Builders
+                Builders made easy
               </p>
               <p className="mt-3 text-2xl tracking-tight text-neutral-400">
                 Powerful library for crafting your own form builders and beyond.
@@ -57,10 +57,28 @@ export function Hero() {
                 </Button>
                 <Button variant="secondary" asChild>
                   <Link
-                    href="https://github.com/coltorapps/builder/"
+                    href="https://www.youtube.com/watch?v=n6kTcHkjj_8"
                     target="_blank"
                   >
-                    View on GitHub
+                    Watch Intro
+                    <svg
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth={1.5}
+                      stroke="currentColor"
+                      className="h-6 w-6 ml-1"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
+                      />
+                    </svg>
                   </Link>
                 </Button>
               </div>

docs/src/components/YoutubeVideo.tsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import youtubeThumbnail from "@/images/youtube-thumbnail.png";
+
+export function YoutubeVideo() {
+  return (
+    <div className="group relative">
+      <a href="https://www.youtube.com/watch?v=n6kTcHkjj_8" target="_blank">
+        <Image
+          className="rounded-xl"
+          src={youtubeThumbnail}
+          alt=""
+          unoptimized
+          priority
+          width={0}
+          height={0}
+          sizes="100vw"
+          style={{ width: "100%", height: "auto" }}
+        />
+        <div className="absolute inset-0 z-10 flex h-full w-full items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="h-16 w-16 text-white opacity-60 transition-all duration-300 group-hover:scale-110 group-hover:opacity-100"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
+            />
+          </svg>
+        </div>
+      </a>
+    </div>
+  );
+}

docs/src/markdoc/tags.js

@@ -1,6 +1,7 @@
 import { BasicFormBuilder } from "@/builders/basic-form-builder";
 import { Callout } from "@/components/Callout";
 import { QuickLink, QuickLinks } from "@/components/QuickLinks";
+import { YoutubeVideo } from "@/components/YoutubeVideo";
 import { cn } from "@/lib/utils";
 
 const tags = {
@@ -31,6 +32,10 @@ const tags = {
       </figure>
     ),
   },
+  "youtube-video": {
+    render: YoutubeVideo,
+    selfClosing: true,
+  },
   "quick-links": {
     render: QuickLinks,
   },