+
+
+
+
+
+
+
++ > 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)) diff --git a/assets/youtube-thumbnail.png b/assets/youtube-thumbnail.png new file mode 100644 index 0000000..2343cdf Binary files /dev/null and b/assets/youtube-thumbnail.png differ diff --git a/docs/src/app/docs/api/react/create-attribute-component/page.md b/docs/src/app/docs/api/react/create-attribute-component/page.md index 0de50dc..5da0675 100644 --- a/docs/src/app/docs/api/react/create-attribute-component/page.md +++ b/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"; diff --git a/docs/src/app/docs/api/react/create-entity-component/page.md b/docs/src/app/docs/api/react/create-entity-component/page.md index 762d51e..124788d 100644 --- a/docs/src/app/docs/api/react/create-entity-component/page.md +++ b/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"; diff --git a/docs/src/app/docs/guides/form-builder/page.md b/docs/src/app/docs/guides/form-builder/page.md index 1a20f04..758ab23 100644 --- a/docs/src/app/docs/guides/form-builder/page.md +++ b/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"; diff --git a/docs/src/app/opengraph-image.png b/docs/src/app/opengraph-image.png index e635f02..107622e 100644 Binary files a/docs/src/app/opengraph-image.png and b/docs/src/app/opengraph-image.png differ diff --git a/docs/src/app/page.md b/docs/src/app/page.md index c71bd26..1df0155 100644 --- a/docs/src/app/page.md +++ b/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. diff --git a/docs/src/builders/basic-form-builder/builder/preview.tsx b/docs/src/builders/basic-form-builder/builder/preview.tsx index 1e37781..2f0caf9 100644 --- a/docs/src/builders/basic-form-builder/builder/preview.tsx +++ b/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 (
-
+
+
+
+