Skip to content

Commit

Permalink
refactor: simplified resize & dranghandler codes
Browse files Browse the repository at this point in the history
  • Loading branch information
@henrynoowah
henrynoowah committed Jan 11, 2025
1 parent 9c96aa0 commit 0e4e549
Show file tree
Hide file tree
Showing 10 changed files with 375 additions and 655 deletions.
3 changes: 2 additions & 1 deletion apps/docs/.storybook/manager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ addons.setConfig({
base: "dark",
brandTitle: "@noowah/content-builder",
brandImage: "https://noowah.vercel.app/favicon-32x32.png",
brandTarget: "_self",
brandUrl: "https://github.com/henrynoowah/content-builder",
brandTarget: "_blank",
}),
});
3 changes: 2 additions & 1 deletion apps/docs/data/test-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export const data: Page = {
display: "grid",
position: "relative",
gridTemplateColumns: "1fr 1fr",
gridTemplateRows: "1fr 1fr 1fr",
},
style_mobile: {
display: "grid",
Expand All @@ -112,7 +113,7 @@ export const data: Page = {
position: "relative",
display: "block",
width: "100%",
height: "420px",
height: "100%",
},
style_mobile: {
width: "100%",
Expand Down
1 change: 0 additions & 1 deletion apps/docs/stories/editor.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { data } from "../data/test-data";
const meta: Meta<typeof Editor> = {
title: "UI/Editor",
component: Editor,
decorators: [(Story) => <Story />],
tags: ["autodocs"],
parameters: { layout: "full" },
};
Expand Down
300 changes: 3 additions & 297 deletions apps/docs/stories/renderer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import type { Meta, StoryObj } from "@storybook/react";
import Renderer from "@noowah/content-builder/renderer";
import { data } from "../data/test-data";

const meta: Meta<typeof Renderer> = {
title: "UI/Renderer",
component: (props) => (
<div className="nwcb-w-full nwcb-flex nwcb-justify-center">
<Renderer {...props} />,
</div>
),
component: Renderer,
tags: ["autodocs"],
parameters: { layout: "full" },
// parameters: { layout: "centered" },
Expand All @@ -19,297 +16,6 @@ type Story = StoryObj<typeof meta>;

export const Default: Story = {
args: {
// children: (props) => <SettingsButton {...props} />,
data: {
id: "page_1",
title: "About Us",
slug: "template",
created_at: "2023-08-10T14:22:33.000Z",
updated_at: "2024-07-11T12:11:22.000Z",
url: "/template",
seo: {
title: "About Our Company",
description: "Learn more about our company, mission, and values.",
keywords: ["company", "mission", "values"],
},
style: {
width: "100%",
maxWidth: "100%",
display: "flex",
flexDirection: "column",
gap: "24px",
},
sections: [
{
id: "section-1",
order: 1,
style: {
width: "100%",
maxWidth: "100%",
display: "block",
position: "relative",
height: "420px",
overflow: "hidden",
},
style_mobile: {
width: "100%",
maxWidth: "100%",
display: "block",
position: "relative",
height: "420px",
overflow: "hidden",
},
blocks: [
{
type: "image",
id: "section-1-block-1",
image: {
src: "https://images.pexels.com/photos/3381115/pexels-photo-3381115.jpeg",
width: 1920,
height: 748,
style: {
width: "100%",
height: "100%",
objectFit: "cover",
backgroundColor: "magenta",
},
},
style: {
width: "100%",
height: "100%",
backgroundColor: "gray",
position: "absolute",
},
style_mobile: {
width: "100%",
height: "100%",
backgroundColor: "gray",
position: "absolute",
overflow: "hidden",
},
},
{
id: "section-1-block-2",
type: "html",
style: {
position: "absolute",
display: "block",
width: "80%",
height: "fit-content",
maxHeight: "100%",
top: "10%",
left: "10%",
padding: "24px",
backgroundColor: "gray",
},
content:
"<h1>Heading 1</h1><p><span>Lorem ipsum odor amet, consectetuer adipiscing elit. Phasellus etiam praesent lacus, commodo sollicitudin iaculis. Nostra torquent odio lacinia massa hac. Dignissim consequat maecenas scelerisque sem laoreet felis maecenas efficitur. Malesuada mi bibendum a sem himenaeos dui in faucibus finibus. Tristique enim lacinia vel dignissim torquent condimentum dis curae pellentesque. Egestas ridiculus maecenas phasellus ornare gravida, viverra ultrices nisl accumsan. Nunc odio mus pulvinar nam conubia dolor</span></p><br>",
images: [],
},
],
},
{
id: "section-2",
order: 1,
style: {
width: "1280px",
maxWidth: "100%",
paddingTop: "24px",
margin: "auto",
display: "grid",
position: "relative",
gridTemplateColumns: "1fr 1fr",
},
style_mobile: {
display: "grid",
gridTemplateColumns: "1fr",
},
blocks: [
{
type: "image",
id: "section-2-block-1",
style: {
position: "relative",
display: "block",
width: "100%",
height: "420px",
},
style_mobile: {
width: "100%",
height: "100%",
},
image: {
src: "https://images.pexels.com/photos/20607063/pexels-photo-20607063/free-photo-of-close-up-of-the-facade-of-an-apartment-building-with-balconies.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
alt: "Our Team",
caption: "Meet Our Team",
style: {
position: "relative",
width: "100%",
height: "420px",
objectFit: "cover",
backgroundColor: "gray",
zIndex: -1,
},
},
images: [],
},
{
id: "section-2-block-2",
type: "html",
style: {
position: "relative",
display: "block",
width: "100%",
height: "100%",
padding: "24px",
},
content:
"<h1>Heading 1</h1><p><span>Lorem ipsum odor amet, consectetuer adipiscing elit. Phasellus etiam praesent lacus, commodo sollicitudin iaculis. Nostra torquent odio lacinia massa hac. Dignissim consequat maecenas scelerisque sem laoreet felis maecenas efficitur. Malesuada mi bibendum a sem himenaeos dui in faucibus finibus. Tristique enim lacinia vel dignissim torquent condimentum dis curae pellentesque. Egestas ridiculus maecenas phasellus ornare gravida, viverra ultrices nisl accumsan. Nunc odio mus pulvinar nam conubia dolor</span></p><br>",
images: [],
},
{
id: "section-2-block-3",
type: "html",
style: {
width: "100%",
height: "100%",
position: "relative",
padding: "24px",
},
content:
"<h2>Sub Heading</h2><p>Faucibus commodo sapien venenatis imperdiet torquent scelerisque. Phasellus convallis inceptos sapien posuere amet. Consectetur venenatis mus velit elit nam. Commodo porta quis ipsum, scelerisque class pharetra nisi felis. Curabitur a duis non consectetur id commodo tortor volutpat erat. Neque nam venenatis ante elementum purus ultricies maecenas finibus tempus. Et convallis maecenas nullam purus pharetra nullam.</p><br><p>Porta eros maximus elit aliquam enim ac posuere. Libero habitasse sed, nulla nulla ligula consequat. Congue placerat sagittis lacus tristique penatibus litora? Tincidunt justo senectus montes pulvinar ac. Sodales mauris vitae eu tortor scelerisque class nostra. Hendrerit tristique in consectetur per taciti himenaeos, convallis suspendisse libero. Bibendum platea facilisis potenti montes orci pharetra. Ante dapibus faucibus eget curae dapibus rutrum senectus mollis. Pulvinar netus consequat primis pretium ligula urna turpis.</p>",
images: [],
},
{
id: "section-2-block-4",
type: "image",
style: {
position: "relative",
width: "100%",
height: "100%",
objectFit: "cover",
backgroundColor: "gray",
},
image: {
src: "https://images.pexels.com/photos/63430/pexels-photo-63430.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
alt: "Our Team",
caption: "Meet Our Team",
style: {
position: "relative",

width: "100%",
height: "420px",
objectFit: "cover",
backgroundColor: "gray",
},
},
images: [],
},
],
},
// {
// id: "section-3",
// order: 1,
// style: {
// width: "1280px",
// maxWidth: "100%",
// margin: "auto",
// display: "grid",
// gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
// gap: "16px",
// },
// style_mobile: {
// gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
// gap: "16px",
// },
// blocks: [
// {
// type: "gallery",
// id: "section-3-block-1",
// style: {
// width: "100%",
// height: "100%",
// position: "relative",
// objectFit: "contain",
// objectPosition: "center",
// },
// images: [
// {
// src: "https://images.pexels.com/photos/3381115/pexels-photo-3381115.jpeg",
// alt: "Image 1",
// caption: "Image 1 caption",
// },
// {
// src: "https://images.pexels.com/photos/20607063/pexels-photo-20607063/free-photo-of-close-up-of-the-facade-of-an-apartment-building-with-balconies.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
// alt: "Image 2",
// caption: "Image 2 caption",
// },
// ],
// },
// {
// type: "html",
// id: "section-3-block-2",
// style: {
// position: "relative",
// },
// content:
// "<p>Welcome to our company. We are dedicated to providing the best services...</p>",
// images: [],
// },
// ],
// },
// {
// id: "section-4",
// order: 1,
// style: {
// width: "1280px",
// maxWidth: "100%",
// margin: "auto",
// display: "grid",
// gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
// gap: "16px",
// },
// style_mobile: {
// gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
// gap: "16px",
// },
// blocks: [
// {
// type: "html",
// id: "section-4-block-1",
// style: {
// position: "relative",
// },
// content:
// "<p>Welcome to our company. We are dedicated to providing the best services...</p>",
// images: [],
// },
// {
// type: "gallery",
// id: "section-4-block-2",
// style: {
// position: "relative",
// width: "100%",
// height: "100%",
// objectFit: "contain",
// objectPosition: "center",
// },
// images: [
// {
// src: "https://images.pexels.com/photos/3381115/pexels-photo-3381115.jpeg",
// alt: "Image 1",
// caption: "Image 1 caption",
// },
// {
// src: "https://images.pexels.com/photos/20607063/pexels-photo-20607063/free-photo-of-close-up-of-the-facade-of-an-apartment-building-with-balconies.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
// alt: "Image 2",
// caption: "Image 2 caption",
// },
// ],
// },
// ],
// },
],
},
data,
},
};
2 changes: 1 addition & 1 deletion packages/ui/src/components/editor/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
values: data,
});

const { handleSubmit, control, setValue, watch } = methods;
const { handleSubmit, control, setValue } = methods;

const {
fields: sections,
Expand Down
Loading

0 comments on commit 0e4e549

Please sign in to comment.