-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19 from KryptXBSA/dev
minor changes to core package
- Loading branch information
Showing
149 changed files
with
6,305 additions
and
1,374 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "formbuilder-core": patch | ||
| --- | ||
|
|
||
| Refactor Core Type Definitions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "formbuilder-core": minor | ||
| "web": patch | ||
| --- | ||
|
|
||
| Refactor codegen for new variants |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
apps/web/src/app/builder/_components/AddField/AddFieldAccordion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| "use client"; | ||
| import * as React from "react"; | ||
| import { useAppState } from "@/state/state"; | ||
| import { | ||
| Accordion, | ||
| AccordionContent, | ||
| AccordionItem, | ||
| AccordionTrigger, | ||
| } from "@/components/ui/accordion"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { ChevronDown, XIcon } from "lucide-react"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { | ||
| allFieldVariants, | ||
| type Kind, | ||
| type FormFramework, | ||
| type FrameworkFieldKinds, | ||
| } from "formbuilder-core"; | ||
| import { colorMap } from "@/constants"; | ||
|
|
||
| export function AddFieldAccordion({ | ||
| field, | ||
| }: { | ||
| field: { | ||
| label: string; | ||
| kind: Kind; | ||
| }; | ||
| }) { | ||
| const state = useAppState(); | ||
| const variantMap = allFieldVariants[state.currentForm.framework]; | ||
| const [isOpen, setIsOpen] = React.useState(false); | ||
| return ( | ||
| <AccordionItem | ||
| className="rounded-md border-2" | ||
| key={field.label} | ||
| value={field.kind} | ||
| > | ||
| <AccordionTrigger | ||
| onClick={() => { | ||
| setIsOpen(!isOpen); | ||
| if (state.chosenField) { | ||
| state.setAppState({ | ||
| renderContent: !state.renderContent, | ||
| chosenField: undefined, | ||
| }); | ||
| } | ||
| }} | ||
| className={cn("p-1 hover:no-underline", { | ||
| "border-b-2": isOpen, | ||
| })} | ||
| > | ||
| <div | ||
| className={cn( | ||
| "flex items-center gap-2 px-2", | ||
| colorMap[field.kind].label, | ||
| )} | ||
| > | ||
| {field.label} | ||
| <div | ||
| className={cn( | ||
| "flex h-4 w-4 items-center justify-center rounded-full border p-2 text-center text-sm", | ||
| colorMap[field.kind].border, | ||
| )} | ||
| > | ||
| <span>{variantMap[field.kind].length}</span> | ||
| </div> | ||
| </div> | ||
| <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" /> | ||
| </AccordionTrigger> | ||
| <AccordionContent className="p-1"> | ||
| <div className="flex flex-col gap-2"> | ||
| {variantMap[field.kind]?.map((variant) => ( | ||
| <React.Fragment key={variant.value}> | ||
| {!state.renderContent && | ||
| state.chosenField?.variant === variant.value ? ( | ||
| <Button | ||
| variant="destructive" | ||
| // className="hover:bg-red-500 bg-red-500 transition-colors duration-300" | ||
| onClick={() => { | ||
| state.setAppState({ | ||
| renderContent: !state.renderContent, | ||
| chosenField: undefined, | ||
| }); | ||
| }} | ||
| > | ||
| <XIcon /> | ||
| </Button> | ||
| ) : ( | ||
| <Button | ||
| variant="outline" | ||
| onClick={() => { | ||
| if (state.chosenField) { | ||
| state.setAppState({ | ||
| chosenField: { | ||
| kind: field.kind, | ||
| variant: variant.value, | ||
| }, | ||
| }); | ||
| } else { | ||
| state.setAppState({ | ||
| renderContent: !state.renderContent, | ||
| chosenField: { | ||
| kind: field.kind, | ||
| variant: variant.value, | ||
| }, | ||
| }); | ||
| } | ||
| }} | ||
| > | ||
| {variant.label} | ||
| </Button> | ||
| )} | ||
| </React.Fragment> | ||
| ))} | ||
| </div> | ||
| </AccordionContent> | ||
| </AccordionItem> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| "use client"; | ||
| import * as React from "react"; | ||
| import { Accordion } from "@/components/ui/accordion"; | ||
| import type { FormFramework, FrameworkFieldKinds } from "formbuilder-core"; | ||
| import { AddFieldAccordion } from "./AddFieldAccordion"; | ||
|
|
||
| export function AddField<F extends FormFramework>({ | ||
| fields, | ||
| }: { | ||
| fields: { | ||
| label: string; | ||
| kind: FrameworkFieldKinds[F]; | ||
| }[]; | ||
| }) { | ||
| return ( | ||
| <div className="mt-10 flex flex-col"> | ||
| <h3 className="w-[250px] scroll-m-20 font-semibold text-2xl tracking-tight"> | ||
| Add Field | ||
| </h3> | ||
| <Accordion type="multiple" className="w-full"> | ||
| <div className="flex flex-col gap-4"> | ||
| {fields.map((f) => ( | ||
| <AddFieldAccordion key={f.kind} field={f} /> | ||
| ))} | ||
| </div> | ||
| </Accordion> | ||
| </div> | ||
| ); | ||
| } |
51 changes: 0 additions & 51 deletions
51
apps/web/src/app/builder/_components/AddNewFieldArrows.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { useAppState } from "@/state/state"; | ||
| import { CodeHighlight } from "@/components/code-highlight"; | ||
| import { CodeBlockCommand } from "@/components/code-block-command"; | ||
| import { CodeSteppers } from "./CodeSteppers"; | ||
|
|
||
| export function Code() { | ||
| const { currentForm } = useAppState(); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col"> | ||
| <h3 className="scroll-m-20 font-semibold text-2xl tracking-tight"> | ||
| Prerequisites | ||
| </h3> | ||
| <p>First make sure you have </p> | ||
| <CodeSteppers /> | ||
| </div> | ||
| ); | ||
| } |
78 changes: 78 additions & 0 deletions
78
apps/web/src/app/builder/_components/Code/CodeSteppers.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| "use client"; | ||
| import { H4 } from "@/components/ui/heading-with-anchor"; | ||
| import { CodeHighlight } from "@/components/code-highlight"; | ||
| import { CodeBlockCommand } from "@/components/code-block-command"; | ||
| import { useAppState } from "@/state/state"; | ||
| import { generateCode, getRequiredComponents } from "formbuilder-core"; | ||
| import type React from "react"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| interface StepperProps { | ||
| children?: React.ReactNode; | ||
| title?: string; | ||
| step?: number; | ||
| } | ||
| const Stepper = ({ title, children, step }: StepperProps) => { | ||
| return ( | ||
| <div> | ||
| <div className="flex items-center gap-3"> | ||
| <span className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 p-3 text-primary dark:text-primary-foreground"> | ||
| {step} | ||
| </span> | ||
| <H4>{title}</H4> | ||
| </div> | ||
| <div className="my-3 ml-5 border-l-2 border-l-gray-200 pl-8"> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export function CodeSteppers() { | ||
| const state = useAppState(); | ||
| const [generatedCode, setGeneratedCode] = useState<string>(""); | ||
|
|
||
| useEffect(() => { | ||
| generateCode(state.currentForm.framework, state.currentForm).then( | ||
| (code) => { | ||
| setGeneratedCode(code); | ||
| }, | ||
| ); | ||
| }, [state.currentForm]); | ||
|
|
||
| let requiredComponents = "shadcn-ui@latest add "; | ||
| for (const i of getRequiredComponents( | ||
| state.currentForm.framework, | ||
| state.currentForm.fields, | ||
| )) { | ||
| requiredComponents += `${i} `; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <Stepper | ||
| title="Add the following components to your project if you don't have it." | ||
| step={1} | ||
| > | ||
| <CodeBlockCommand | ||
| __npmCommand__={`npx ${requiredComponents}`} | ||
| __bunCommand__={`bunx ${requiredComponents}`} | ||
| __pnpmCommand__={`pnpm dlx ${requiredComponents}`} | ||
| __yarnCommand__={`npx ${requiredComponents}`} | ||
| /> | ||
| </Stepper> | ||
| <Stepper | ||
| title="Copy and paste the following code into your project." | ||
| step={2} | ||
| > | ||
| <CodeHighlight code={generatedCode} withExpand /> | ||
| </Stepper> | ||
| <Stepper | ||
| title="Update the import paths to match your project setup." | ||
| step={3} | ||
| /> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { Code } from "./Code"; | ||
|
|
||
| export { Code }; |
Oops, something went wrong.