47 |
137 | );
138 | };
139 |
140 | Canvas.craft = {
141 | displayName: 'div',
142 | props: {
143 | className: 'w-full h-full',
144 | },
145 | };
146 |
--------------------------------------------------------------------------------
/app/components/code-view.tsx:
--------------------------------------------------------------------------------
1 | import { CopyBlock, dracula } from 'react-code-blocks';
2 |
3 | export const CodeView = ({ codeString }: { codeString?: string }) => {
4 | const code = codeString
5 | ? codeString
6 | : // Initial code or a placeholder
7 | `
8 | import React from "react";\n\nconst Card = () => {\n // Dummy data for the card\n const title = "Example Card";\n const description = "This is a simple card component in React with Tailwind CSS.";\n const imageUrl = "https://example.com/example-image.jpg";\n\n return (\n
48 |
136 |
49 |
124 |
125 |
50 |
51 |
52 |
53 |
54 |
55 | {
58 | generateCode();
59 | setOpen(value);
60 | }}
61 | >
62 |
63 |
69 |
70 |
71 |
73 |
74 | {/* {
77 | generateHTML();
78 | setHtmlOpen(value);
79 | }}
80 | >
81 |
82 |
88 |
89 |
90 |
92 | */}
93 |
94 |
95 |
96 |
123 |
97 |
122 |
98 | {canUndo && (
99 | {
104 | actions.history.undo();
105 | }}
106 | />
107 | )}
108 |
109 |
110 | {canRedo && (
111 | {
116 | actions.history.redo();
117 | }}
118 | />
119 | )}
120 |
121 | {
128 | if (ref) {
129 | connect(drag(ref));
130 | }
131 | }}
132 | >
133 | {children}
134 |
135 | \n 
\n
\n );\n};\n\nexport default Card
14 | `;
15 |
16 | return (
17 | \n
\n {title}
\n
9 | {title}
\n
10 | {title}
\n
11 | {title}
\n
12 |
13 | {description}
\n
18 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/app/components/control-panel.tsx:
--------------------------------------------------------------------------------
1 | import { useEditor } from "@craftjs/core";
2 | import React from "react";
3 |
4 | export const ControlPanel = () => {
5 | const { active, related } = useEditor((state, query) => {
6 | // TODO: handle multiple selected elements
7 | const currentlySelectedNodeId = query.getEvent("selected").first();
8 | return {
9 | active: currentlySelectedNodeId,
10 | related:
11 | currentlySelectedNodeId && state.nodes[currentlySelectedNodeId].related,
12 | };
13 | });
14 |
15 | return (
16 |
17 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/app/components/header.tsx:
--------------------------------------------------------------------------------
1 | import { ThemeToggle } from '~/routes/resources.theme-toggle';
2 | import { Command } from 'lucide-react';
3 | import { Link } from '@remix-run/react';
4 | import { Drawer, DrawerContent, DrawerTrigger } from '~/components/ui/drawer';
5 | import { Button } from './ui/button';
6 | import { CodeView } from './code-view';
7 |
8 | export const Header = () => {
9 | return (
10 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/app/components/hero.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@remix-run/react";
2 | import { Button } from "./ui/button";
3 | import { Card, CardContent } from "./ui/card";
4 |
5 | export const Hero = () => {
6 | return (
7 | 18 | Control Panel 19 |
20 | {active && related.toolbar && React.createElement(related.toolbar)} 21 |
8 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/app/components/node/button.tsx:
--------------------------------------------------------------------------------
1 | import { withNode } from '~/components/node/connector';
2 | import { Button } from '../ui/button';
3 | import { SettingsControl } from '../settings-control';
4 |
5 | const draggable = true;
6 |
7 | export const NodeButton = withNode(Button, {
8 | draggable,
9 | });
10 |
11 | NodeButton.craft = {
12 | ...NodeButton.craft,
13 | related: {
14 | toolbar: SettingsControl,
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/app/components/node/card.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardHeader,
4 | CardFooter,
5 | CardTitle,
6 | CardDescription,
7 | CardContent,
8 | } from '../ui/card';
9 | import { Element } from '@craftjs/core';
10 | import { SettingsControl } from '../settings-control';
11 | import { withNode } from './connector';
12 | import { NodeButton } from './button';
13 |
14 | interface NodeCardProps extends React.HTMLAttributes
9 |
22 |
23 |
28 |
29 |
30 |
31 | 10 | A{" "} 11 | 12 | Simple Starter 13 | {" "} 14 | For Remix and Shadcn-ui 15 |
16 | 17 |18 | With optimistic dark-mode 19 |
20 | 21 |
66 | Empty container
67 |
68 | )
69 | )}
70 | -
77 | {({ index, style }) =>
{children[index]}
}
78 | {children}
97 |
103 | {deletable ? (
104 |
117 | ) : null}
118 | {typeof text === 'string' ? (
119 |
124 | setProp(
125 | (props: { children: ReactNode }) =>
126 | (props.children = e.target.value.replace(/<\/?[^>]+(>|$)/g, ''))
127 | )
128 | }
129 | />
130 | ) : null}
131 |
157 | );
158 | };
159 |
--------------------------------------------------------------------------------
/app/components/side-menu.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, ReactNode } from 'react';
2 |
3 | import {
4 | NavigationMenuLink,
5 | NavigationMenu,
6 | NavigationMenuList,
7 | NavigationMenuItem,
8 | NavigationMenuTrigger,
9 | NavigationMenuContent,
10 | NavigationMenuViewport,
11 | } from './ui/vertical-navigation-menu';
12 | import { cn } from '~/lib/utils';
13 | import { useEditor } from '@craftjs/core';
14 | import { Components } from './node/components-map';
15 |
16 | export interface SideMenuProps {
17 | componentsMap: Components[];
18 | }
19 |
20 | export const SideMenu = ({ componentsMap }: SideMenuProps) => {
21 | const { connectors } = useEditor();
22 |
23 | return (
24 | -
36 | {menuItem.items.map((component, index) => (
37 |
74 | {children}
75 |
76 |
77 | {children}
51 |
87 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef
85 |
94 | ));
95 | NavigationMenuViewport.displayName =
96 | NavigationMenuPrimitive.Viewport.displayName;
97 |
98 | const NavigationMenuIndicator = React.forwardRef<
99 | React.ElementRef
11 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * By default, Remix will handle hydrating your app on the client for you.
3 | * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
4 | * For more information, see https://remix.run/file-conventions/entry.client
5 | */
6 |
7 | import { RemixBrowser } from "@remix-run/react";
8 | import { startTransition, StrictMode } from "react";
9 | import { hydrateRoot } from "react-dom/client";
10 |
11 | startTransition(() => {
12 | hydrateRoot(
13 | document,
14 | {children}
12 |
41 |
43 |
47 |
48 |
49 | Button 1
50 | Button 2
51 | Button 3
52 | Button 4
53 |
54 |
55 |
56 |
57 |
58 |
60 |