diff --git a/README.md b/README.md index 9486e07..e96fd9d 100644 --- a/README.md +++ b/README.md @@ -19,20 +19,20 @@ ## 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. +**Builder** is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also develop dynamic website builders, dashboard builders, and any other builders you envision. Some key characteristics: - Headless: Bring your own components and design the user experience as you want. - Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end. - Typesafe: Ensures full type safety by default in every aspect. -- Multi-platform: Runs on web, mobile, servers, serverless, and workers. +- Multi-platform: Runs on web (React), mobile (React Native), servers, serverless, and workers. - Framework agnostic: Features a core that is independent of any front-end framework. - Zero dependencies: Offers a streamlined, lightweight library. - Unopinionated: Affords you the freedom to build anything you imagine. - Progressively Enhanceable: Embraces web standards. -Currently, **Builder** offers support for React, with plans to extend compatibility to other front-end frameworks in the future. +Currently, **Builder** offers support for React and React Native, with plans to extend compatibility to other front-end frameworks in the future. Click the thumbnail below to watch the library's intro video. @@ -42,10 +42,6 @@ Click the thumbnail below to watch the library's intro video. -
- -> 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 Install the dependencies via your preferred package manager. diff --git a/docs/package.json b/docs/package.json index 8f3350a..8b78439 100644 --- a/docs/package.json +++ b/docs/package.json @@ -22,6 +22,7 @@ "@headlessui/react": "^1.7.13", "@markdoc/markdoc": "^0.3.4", "@markdoc/next.js": "^0.3.4", + "@next/third-parties": "^15.0.3", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", @@ -47,6 +48,7 @@ "date-fns": "^2.30.0", "fast-glob": "^3.2.12", "flexsearch": "^0.7.31", + "framer-motion": "^11.12.0", "js-yaml": "^4.1.0", "lodash": "^4.17.21", "lucide-react": "^0.292.0", diff --git a/docs/src/app/docs/api/react/builder-entity/page.md b/docs/src/app/docs/api/react/builder-entity/page.md index a654ba8..7262276 100644 --- a/docs/src/app/docs/api/react/builder-entity/page.md +++ b/docs/src/app/docs/api/react/builder-entity/page.md @@ -10,7 +10,7 @@ This React component renders a single entity from a [builder store](/docs/api/re ## Reference -### `` +### `` Use the `BuilderEntity` component to render a single entity, including its children. diff --git a/docs/src/app/docs/api/react/interpreter-entity/page.md b/docs/src/app/docs/api/react/interpreter-entity/page.md index e21484c..ed290b3 100644 --- a/docs/src/app/docs/api/react/interpreter-entity/page.md +++ b/docs/src/app/docs/api/react/interpreter-entity/page.md @@ -10,7 +10,7 @@ This React component renders a single entity from an [interpreter store](/docs/a ## Reference -### `` +### `` Use the `InterpreterEntity` component to render a single entity, including its children. diff --git a/docs/src/app/docs/guides/form-builder/page.md b/docs/src/app/docs/guides/form-builder/page.md index 14ffbc8..1c9231d 100644 --- a/docs/src/app/docs/guides/form-builder/page.md +++ b/docs/src/app/docs/guides/form-builder/page.md @@ -1,5 +1,5 @@ --- -title: Form builder +title: React Form Builder nextjs: metadata: title: React form builder diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx index 0a77495..2166205 100644 --- a/docs/src/app/layout.tsx +++ b/docs/src/app/layout.tsx @@ -3,6 +3,7 @@ import { Inter } from "next/font/google"; import localFont from "next/font/local"; import { Providers } from "@/app/providers"; import { Layout } from "@/components/layout"; +import { GoogleAnalytics } from "@next/third-parties/google"; import { Analytics } from "@vercel/analytics/react"; import clsx from "clsx"; @@ -26,10 +27,10 @@ export const metadata: Metadata = { metadataBase: new URL("https://builder.coltorapps.com"), title: { template: "%s - Docs", - default: "Builder", + default: "React Form Builder", }, description: - "Powerful library for crafting your own form builders and beyond.", + "React Form Builder. React Native Form Builder. Develop your own dynamic forms builder, websites builder, dashboards builder, UIs builder.", }; export default function RootLayout({ @@ -50,6 +51,7 @@ export default function RootLayout({ + ); } diff --git a/docs/src/app/page.md b/docs/src/app/page.md index 1df0155..8cb1065 100644 --- a/docs/src/app/page.md +++ b/docs/src/app/page.md @@ -1,16 +1,33 @@ ---- -title: Getting started +## Overview + +**Builder** is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also develop dynamic website builders, dashboard builders, and any other builders you envision. + +Some key characteristics: + +- Headless: Bring your own components and design the user experience as you want. +- Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end. +- Typesafe: Ensures full type safety by default in every aspect. +- Multi-platform: Runs on web (React), mobile (React Native), servers, serverless, and workers. +- Framework agnostic: Features a core that is independent of any front-end framework. +- Zero dependencies: Offers a streamlined, lightweight library. +- Unopinionated: Affords you the freedom to build anything you imagine. +- Progressively Enhanceable: Embraces web standards. + +Currently, **Builder** offers support for React and React Native, with plans to extend compatibility to other front-end frameworks in the future. + --- +## Get Started + Learn how to get started with Builder through our guides. {% .lead %} {% quick-links %} {% quick-link title="Installation" icon="installation" href="/docs/installation" description="Step-by-step guides for setting up and using the library." /%} -{% quick-link title="Core concepts" icon="presets" href="/docs/attributes" description="Learn the core concepts to better understand the library." /%} +{% quick-link title="React Form Builder Guide" icon="plugins" href="/docs/guides/form-builder" description="Explore our guides to spark your inspiration." /%} -{% quick-link title="Guides" icon="plugins" href="/docs/guides/form-builder" description="Explore our guides to spark your inspiration." /%} +{% quick-link title="Core concepts" icon="presets" href="/docs/attributes" description="Learn the core concepts to better understand the library." /%} {% quick-link title="API reference" icon="theming" href="/docs/api/create-attribute" description="Dive into the API Reference for detailed guidance." /%} @@ -20,33 +37,14 @@ Learn how to get started with Builder through our guides. {% .lead %} --- -## Live Example +## React Form Builder Demo -A simple example of what can be accomplished with Builder. +Here is a live demo of a simple React form builder created using `shadcn` components for UI, and `dnd-kit` for drag and drop. {% basic-form-builder /%} ---- - -## 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. - -Some key characteristics: - -- Headless: Bring your own components and design the user experience as you want. -- Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end. -- Typesafe: Ensures full type safety by default in every aspect. -- Multi-platform: Runs on web, mobile, servers, serverless, and workers. -- Framework agnostic: Features a core that is independent of any front-end framework. -- Zero dependencies: Offers a streamlined, lightweight library. -- Unopinionated: Affords you the freedom to build anything you imagine. -- Progressively Enhanceable: Embraces web standards. - -Currently, **Builder** offers support for React, with plans to extend compatibility to other front-end frameworks in the future. - -{% callout type="warning" title="Alpha Stage" %} -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. +{% callout title="You should know!" %} +You are free to build your own form builder using any components and mechanics you want. {% /callout %} --- diff --git a/docs/src/components/docs-header.tsx b/docs/src/components/docs-header.tsx index 94abb62..02bec72 100644 --- a/docs/src/components/docs-header.tsx +++ b/docs/src/components/docs-header.tsx @@ -2,6 +2,7 @@ import { usePathname } from "next/navigation"; import { navigation } from "@/lib/navigation"; +import clsx from "clsx"; export function DocsHeader({ title }: { title?: string }) { const pathname = usePathname(); @@ -14,7 +15,7 @@ export function DocsHeader({ title }: { title?: string }) { } return ( -
+
{section && (

{section.title} diff --git a/docs/src/components/hero.tsx b/docs/src/components/hero.tsx index 13a24d8..85e3dba 100644 --- a/docs/src/components/hero.tsx +++ b/docs/src/components/hero.tsx @@ -8,6 +8,7 @@ import clsx from "clsx"; import { Highlight } from "prism-react-renderer"; import { Button } from "./ui/button"; +import { WordRotate } from "./word-rotate"; const codeLanguage = "typescript"; const code = `export const formBuilder = createBuilder({ @@ -36,7 +37,7 @@ export function Hero() {

-

- Builders made easy -

-

- Powerful library for crafting your own form builders and beyond. -

+

+ React Form Builder +

+

+ + Develop your dynamic{" "} + {" "} + builder. + + + Develop your own dynamic forms builder, websites builder, + dashboards builder, UIs builder. + +

); diff --git a/docs/src/components/word-rotate.tsx b/docs/src/components/word-rotate.tsx new file mode 100644 index 0000000..a6fc1e3 --- /dev/null +++ b/docs/src/components/word-rotate.tsx @@ -0,0 +1,48 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { cn } from "@/lib/utils"; +import { AnimatePresence, motion, type HTMLMotionProps } from "framer-motion"; + +interface WordRotateProps { + words: string[]; + duration?: number; + framerProps?: HTMLMotionProps<"h1">; + className?: string; +} + +export function WordRotate({ + words, + duration = 2000, + framerProps = { + initial: { opacity: 0, y: -5 }, + animate: { opacity: 1, y: 0 }, + exit: { opacity: 0, y: 5 }, + transition: { duration: 0.25, ease: "easeOut" }, + }, + className, +}: WordRotateProps) { + const [index, setIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setIndex((prevIndex) => (prevIndex + 1) % words.length); + }, duration); + + return () => clearInterval(interval); + }, [words, duration]); + + return ( + + + + {words[index]} + + + + ); +} diff --git a/docs/src/lib/navigation.ts b/docs/src/lib/navigation.ts index 8120658..4cb03e4 100644 --- a/docs/src/lib/navigation.ts +++ b/docs/src/lib/navigation.ts @@ -9,7 +9,7 @@ export const navigation = [ { title: "Guides", links: [ - { title: "Form builder", href: "/docs/guides/form-builder" }, + { title: "React form builder", href: "/docs/guides/form-builder" }, { title: "Factory pattern", href: "/docs/guides/factory-pattern" }, { title: "Drag & Drop", href: "/docs/guides/drag-and-drop" }, ], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index acbb59b..a49b606 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,6 +83,9 @@ importers: '@markdoc/next.js': specifier: ^0.3.4 version: 0.3.7(@markdoc/markdoc@0.3.5(@types/react@18.3.12)(react@18.3.1))(next@14.0.3(react-dom@18.2.0(react@18.3.1))(react@18.3.1))(react@18.3.1) + '@next/third-parties': + specifier: ^15.0.3 + version: 15.0.3(next@14.0.3(react-dom@18.2.0(react@18.3.1))(react@18.3.1))(react@18.3.1) '@radix-ui/react-checkbox': specifier: ^1.0.4 version: 1.1.2(@types/react-dom@18.2.7)(@types/react@18.3.12)(react-dom@18.2.0(react@18.3.1))(react@18.3.1) @@ -158,6 +161,9 @@ importers: flexsearch: specifier: ^0.7.31 version: 0.7.43 + framer-motion: + specifier: ^11.12.0 + version: 11.12.0(react-dom@18.2.0(react@18.3.1))(react@18.3.1) js-yaml: specifier: ^4.1.0 version: 4.1.0 @@ -964,6 +970,12 @@ packages: cpu: [x64] os: [win32] + '@next/third-parties@15.0.3': + resolution: {integrity: sha512-T2NkBXLcgRY0cmE7jb/dSMXNK9D+yv1k+n0uBxwMBS9SEtOhuMvxiUPQRj5x4cFnsei6JECloJg88koMprKw0A==} + peerDependencies: + next: ^13.0.0 || ^14.0.0 || ^15.0.0 + react: ^18.2.0 || 19.0.0-rc-66855b96-20241106 + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2641,6 +2653,20 @@ packages: fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + framer-motion@11.12.0: + resolution: {integrity: sha512-gZaZeqFM6pX9kMVti60hYAa75jGpSsGYWAHbBfIkuHN7DkVHVkxSxeNYnrGmHuM0zPkWTzQx10ZT+fDjn7N4SA==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} @@ -4184,6 +4210,9 @@ packages: thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + third-party-capital@1.0.20: + resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==} + through@2.3.8: resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} @@ -5247,6 +5276,12 @@ snapshots: '@next/swc-win32-x64-msvc@14.0.3': optional: true + '@next/third-parties@15.0.3(next@14.0.3(react-dom@18.2.0(react@18.3.1))(react@18.3.1))(react@18.3.1)': + dependencies: + next: 14.0.3(react-dom@18.2.0(react@18.3.1))(react@18.3.1) + react: 18.3.1 + third-party-capital: 1.0.20 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -6907,7 +6942,7 @@ snapshots: eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1) eslint-plugin-react: 7.37.2(eslint@8.57.1) eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1) @@ -6941,20 +6976,20 @@ snapshots: debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.3.0 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -6965,7 +7000,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -6976,7 +7011,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -7225,6 +7260,13 @@ snapshots: fraction.js@4.3.7: {} + framer-motion@11.12.0(react-dom@18.2.0(react@18.3.1))(react@18.3.1): + dependencies: + tslib: 2.8.1 + optionalDependencies: + react: 18.3.1 + react-dom: 18.2.0(react@18.3.1) + fs-constants@1.0.0: {} fs-extra@10.1.0: @@ -8859,6 +8901,8 @@ snapshots: dependencies: any-promise: 1.3.0 + third-party-capital@1.0.20: {} + through@2.3.8: {} tinybench@2.9.0: {}