Skip to content

Commit

Permalink
Merge pull request #57 from deco-sites/feat/preview
Browse files Browse the repository at this point in the history 
add preview to layouts
  • Loading branch information
@tlgimenes
tlgimenes authored Oct 31, 2023
2 parents 1955f6a + ae7e778 commit 27a8ca1
Show file tree
Hide file tree
Showing 7 changed files with 738 additions and 123 deletions.
28 changes: 14 additions & 14 deletions constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,22 +55,22 @@ export const grid = {
},
rows: {
mobile: {
"1": "grid-cols-1",
"2": "grid-cols-2",
"3": "grid-cols-3",
"4": "grid-cols-4",
"5": "grid-cols-5",
"6": "grid-cols-6",
"none": "grid-cols-none",
"1": "grid-rows-1",
"2": "grid-rows-2",
"3": "grid-rows-3",
"4": "grid-rows-4",
"5": "grid-rows-5",
"6": "grid-rows-6",
"none": "grid-rows-none",
},
desktop: {
"1": "sm:grid-cols-1",
"2": "sm:grid-cols-2",
"3": "sm:grid-cols-3",
"4": "sm:grid-cols-4",
"5": "sm:grid-cols-5",
"6": "sm:grid-cols-6",
"none": "sm:grid-cols-none",
"1": "sm:grid-rows-1",
"2": "sm:grid-rows-2",
"3": "sm:grid-rows-3",
"4": "sm:grid-rows-4",
"5": "sm:grid-rows-5",
"6": "sm:grid-rows-6",
"none": "sm:grid-rows-none",
},
},
flow: {
Expand Down
570 changes: 570 additions & 0 deletions deno.lock
View file

Large diffs are not rendered by default.

140 changes: 70 additions & 70 deletions manifest.gen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,86 +2,86 @@
// This file SHOULD be checked into source version control.
// This file is automatically updated during development when running `dev.ts`.

import * as $$$0 from "./loaders/List/Sections.tsx";
import * as $$$1 from "./loaders/Layouts/ProductCard.tsx";
import * as $$$$$$0 from "./sections/Miscellaneous/CookieConsent.tsx";
import * as $$$$$$1 from "./sections/Miscellaneous/CampaignTimer.tsx";
import * as $$$$$$2 from "./sections/Layout/GridItem.tsx";
import * as $$$$$$3 from "./sections/Layout/Flex.tsx";
import * as $$$$$$4 from "./sections/Layout/Grid.tsx";
import * as $$$$$$5 from "./sections/Layout/Container.tsx";
import * as $$$$$$6 from "./sections/Gallery.tsx";
import * as $$$$$$7 from "./sections/Product/ProductShelf.tsx";
import * as $$$$$$8 from "./sections/Product/ProductShelfTabbed.tsx";
import * as $$$$$$9 from "./sections/Product/SearchResult.tsx";
import * as $$$$$$10 from "./sections/Product/NotFound.tsx";
import * as $$$$$$11 from "./sections/Product/NotFoundChallenge.tsx";
import * as $$$$$$12 from "./sections/Product/Wishlist.tsx";
import * as $$$$$$13 from "./sections/Product/ImageGalleryFrontBack.tsx";
import * as $$$$$$14 from "./sections/Product/ImageGallerySlider.tsx";
import * as $$$$$$15 from "./sections/Product/ProductInfo.tsx";
import * as $$$$$$16 from "./sections/Images/ShoppableBanner.tsx";
import * as $$$$$$17 from "./sections/Images/BannerGrid.tsx";
import * as $$$$$$18 from "./sections/Images/ImageGallery.tsx";
import * as $$$$$$19 from "./sections/Images/Carousel.tsx";
import * as $$$$$$20 from "./sections/Newsletter/Newsletter.tsx";
import * as $$$$$$21 from "./sections/Theme/Theme.tsx";
import * as $$$$$$22 from "./sections/Content/Testimonials.tsx";
import * as $$$$$$23 from "./sections/Content/Benefits.tsx";
import * as $$$$$$24 from "./sections/Content/Logos.tsx";
import * as $$$$$$25 from "./sections/Content/Faq.tsx";
import * as $$$$$$26 from "./sections/Header/Header.tsx";
import * as $$$$$$27 from "./sections/Footer/Footer.tsx";
import * as $$$0 from "./loaders/Layouts/ProductCard.tsx";
import * as $$$1 from "./loaders/List/Sections.tsx";
import * as $$$$$$0 from "./sections/Gallery.tsx";
import * as $$$$$$1 from "./sections/Footer/Footer.tsx";
import * as $$$$$$2 from "./sections/Category/CategoryBanner.tsx";
import * as $$$$$$3 from "./sections/Category/CategoryList.tsx";
import * as $$$$$$4 from "./sections/Images/ShoppableBanner.tsx";
import * as $$$$$$5 from "./sections/Images/BannerGrid.tsx";
import * as $$$$$$6 from "./sections/Images/ImageGallery.tsx";
import * as $$$$$$7 from "./sections/Images/Carousel.tsx";
import * as $$$$$$8 from "./sections/Layout/Container.tsx";
import * as $$$$$$9 from "./sections/Layout/Grid.tsx";
import * as $$$$$$10 from "./sections/Layout/Flex.tsx";
import * as $$$$$$11 from "./sections/Layout/GridItem.tsx";
import * as $$$$$$12 from "./sections/Content/Testimonials.tsx";
import * as $$$$$$13 from "./sections/Content/Logos.tsx";
import * as $$$$$$14 from "./sections/Content/Faq.tsx";
import * as $$$$$$15 from "./sections/Content/Benefits.tsx";
import * as $$$$$$16 from "./sections/Product/Wishlist.tsx";
import * as $$$$$$17 from "./sections/Product/NotFoundChallenge.tsx";
import * as $$$$$$18 from "./sections/Product/SearchResult.tsx";
import * as $$$$$$19 from "./sections/Product/ProductInfo.tsx";
import * as $$$$$$20 from "./sections/Product/ProductShelf.tsx";
import * as $$$$$$21 from "./sections/Product/ImageGallerySlider.tsx";
import * as $$$$$$22 from "./sections/Product/ImageGalleryFrontBack.tsx";
import * as $$$$$$23 from "./sections/Product/ProductShelfTabbed.tsx";
import * as $$$$$$24 from "./sections/Product/NotFound.tsx";
import * as $$$$$$25 from "./sections/Miscellaneous/CampaignTimer.tsx";
import * as $$$$$$26 from "./sections/Miscellaneous/CookieConsent.tsx";
import * as $$$$$$27 from "./sections/Social/WhatsApp.tsx";
import * as $$$$$$28 from "./sections/Social/InstagramPosts.tsx";
import * as $$$$$$29 from "./sections/Social/WhatsApp.tsx";
import * as $$$$$$30 from "./sections/Links/Shortcuts.tsx";
import * as $$$$$$31 from "./sections/Links/LinkTree.tsx";
import * as $$$$$$32 from "./sections/Category/CategoryBanner.tsx";
import * as $$$$$$33 from "./sections/Category/CategoryList.tsx";
import * as $$$$$$29 from "./sections/Theme/Theme.tsx";
import * as $$$$$$30 from "./sections/Links/LinkTree.tsx";
import * as $$$$$$31 from "./sections/Links/Shortcuts.tsx";
import * as $$$$$$32 from "./sections/Newsletter/Newsletter.tsx";
import * as $$$$$$33 from "./sections/Header/Header.tsx";
import * as $$$$$$$$$$$0 from "./apps/decohub.ts";
import * as $$$$$$$$$$$1 from "./apps/site.ts";

const manifest = {
"loaders": {
"deco-sites/storefront/loaders/Layouts/ProductCard.tsx": $$$1,
"deco-sites/storefront/loaders/List/Sections.tsx": $$$0,
"deco-sites/storefront/loaders/Layouts/ProductCard.tsx": $$$0,
"deco-sites/storefront/loaders/List/Sections.tsx": $$$1,
},
"sections": {
"deco-sites/storefront/sections/Category/CategoryBanner.tsx": $$$$$$32,
"deco-sites/storefront/sections/Category/CategoryList.tsx": $$$$$$33,
"deco-sites/storefront/sections/Content/Benefits.tsx": $$$$$$23,
"deco-sites/storefront/sections/Content/Faq.tsx": $$$$$$25,
"deco-sites/storefront/sections/Content/Logos.tsx": $$$$$$24,
"deco-sites/storefront/sections/Content/Testimonials.tsx": $$$$$$22,
"deco-sites/storefront/sections/Footer/Footer.tsx": $$$$$$27,
"deco-sites/storefront/sections/Gallery.tsx": $$$$$$6,
"deco-sites/storefront/sections/Header/Header.tsx": $$$$$$26,
"deco-sites/storefront/sections/Images/BannerGrid.tsx": $$$$$$17,
"deco-sites/storefront/sections/Images/Carousel.tsx": $$$$$$19,
"deco-sites/storefront/sections/Images/ImageGallery.tsx": $$$$$$18,
"deco-sites/storefront/sections/Images/ShoppableBanner.tsx": $$$$$$16,
"deco-sites/storefront/sections/Layout/Container.tsx": $$$$$$5,
"deco-sites/storefront/sections/Layout/Flex.tsx": $$$$$$3,
"deco-sites/storefront/sections/Layout/Grid.tsx": $$$$$$4,
"deco-sites/storefront/sections/Layout/GridItem.tsx": $$$$$$2,
"deco-sites/storefront/sections/Links/LinkTree.tsx": $$$$$$31,
"deco-sites/storefront/sections/Links/Shortcuts.tsx": $$$$$$30,
"deco-sites/storefront/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$1,
"deco-sites/storefront/sections/Miscellaneous/CookieConsent.tsx": $$$$$$0,
"deco-sites/storefront/sections/Newsletter/Newsletter.tsx": $$$$$$20,
"deco-sites/storefront/sections/Category/CategoryBanner.tsx": $$$$$$2,
"deco-sites/storefront/sections/Category/CategoryList.tsx": $$$$$$3,
"deco-sites/storefront/sections/Content/Benefits.tsx": $$$$$$15,
"deco-sites/storefront/sections/Content/Faq.tsx": $$$$$$14,
"deco-sites/storefront/sections/Content/Logos.tsx": $$$$$$13,
"deco-sites/storefront/sections/Content/Testimonials.tsx": $$$$$$12,
"deco-sites/storefront/sections/Footer/Footer.tsx": $$$$$$1,
"deco-sites/storefront/sections/Gallery.tsx": $$$$$$0,
"deco-sites/storefront/sections/Header/Header.tsx": $$$$$$33,
"deco-sites/storefront/sections/Images/BannerGrid.tsx": $$$$$$5,
"deco-sites/storefront/sections/Images/Carousel.tsx": $$$$$$7,
"deco-sites/storefront/sections/Images/ImageGallery.tsx": $$$$$$6,
"deco-sites/storefront/sections/Images/ShoppableBanner.tsx": $$$$$$4,
"deco-sites/storefront/sections/Layout/Container.tsx": $$$$$$8,
"deco-sites/storefront/sections/Layout/Flex.tsx": $$$$$$10,
"deco-sites/storefront/sections/Layout/Grid.tsx": $$$$$$9,
"deco-sites/storefront/sections/Layout/GridItem.tsx": $$$$$$11,
"deco-sites/storefront/sections/Links/LinkTree.tsx": $$$$$$30,
"deco-sites/storefront/sections/Links/Shortcuts.tsx": $$$$$$31,
"deco-sites/storefront/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$25,
"deco-sites/storefront/sections/Miscellaneous/CookieConsent.tsx": $$$$$$26,
"deco-sites/storefront/sections/Newsletter/Newsletter.tsx": $$$$$$32,
"deco-sites/storefront/sections/Product/ImageGalleryFrontBack.tsx":
$$$$$$13,
"deco-sites/storefront/sections/Product/ImageGallerySlider.tsx": $$$$$$14,
"deco-sites/storefront/sections/Product/NotFound.tsx": $$$$$$10,
"deco-sites/storefront/sections/Product/NotFoundChallenge.tsx": $$$$$$11,
"deco-sites/storefront/sections/Product/ProductInfo.tsx": $$$$$$15,
"deco-sites/storefront/sections/Product/ProductShelf.tsx": $$$$$$7,
"deco-sites/storefront/sections/Product/ProductShelfTabbed.tsx": $$$$$$8,
"deco-sites/storefront/sections/Product/SearchResult.tsx": $$$$$$9,
"deco-sites/storefront/sections/Product/Wishlist.tsx": $$$$$$12,
$$$$$$22,
"deco-sites/storefront/sections/Product/ImageGallerySlider.tsx": $$$$$$21,
"deco-sites/storefront/sections/Product/NotFound.tsx": $$$$$$24,
"deco-sites/storefront/sections/Product/NotFoundChallenge.tsx": $$$$$$17,
"deco-sites/storefront/sections/Product/ProductInfo.tsx": $$$$$$19,
"deco-sites/storefront/sections/Product/ProductShelf.tsx": $$$$$$20,
"deco-sites/storefront/sections/Product/ProductShelfTabbed.tsx": $$$$$$23,
"deco-sites/storefront/sections/Product/SearchResult.tsx": $$$$$$18,
"deco-sites/storefront/sections/Product/Wishlist.tsx": $$$$$$16,
"deco-sites/storefront/sections/Social/InstagramPosts.tsx": $$$$$$28,
"deco-sites/storefront/sections/Social/WhatsApp.tsx": $$$$$$29,
"deco-sites/storefront/sections/Theme/Theme.tsx": $$$$$$21,
"deco-sites/storefront/sections/Social/WhatsApp.tsx": $$$$$$27,
"deco-sites/storefront/sections/Theme/Theme.tsx": $$$$$$29,
},
"apps": {
"deco-sites/storefront/apps/decohub.ts": $$$$$$$$$$$0,
Expand Down
26 changes: 25 additions & 1 deletion sections/Layout/Container.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,39 @@
import { Section } from "deco/blocks/section.ts";

interface Props {
children: Section;
children?: Section;
}

function Container({ children }: Props) {
if (!children) return null;

return (
<div class="container">
<children.Component {...children.props} />
</div>
);
}

export function Preview(props: Props) {
if (props.children) {
return <Container {...props} />;
}

return (
<div class="bg-primary bg-opacity-5 p-4">
<Container
{...props}
children={{
Component: () => (
<div class="rounded h-48 grid place-content-center w-full bg-base-100 text-base-300 text-sm">
Content
</div>
),
props: {},
}}
/>
</div>
);
}

export default Container;
43 changes: 25 additions & 18 deletions sections/Layout/Flex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ import { Section } from "deco/blocks/section.ts";
import { flex, VNode } from "../../constants.tsx";

interface Props {
children: VNode[] | null;
children?: VNode[] | null;
layout?: {
gap?: {
/** @default 2 */
mobile?: "1" | "2" | "4" | "8" | "12" | "16";
/** @default 4 */
mobile?: "1" | "2" | "4" | "8" | "12" | "16";
/** @default 8 */
desktop?: "1" | "2" | "4" | "8" | "12" | "16";
};
direction?: {
/** @default col */
mobile?: "row" | "col";
/** @default row */
mobile?: "col" | "row";
/** @default row */
desktop?: "col" | "row";
desktop?: "row" | "col";
};
justify?: {
/** @default center */
Expand All @@ -37,22 +37,29 @@ function Section({ layout, children }: Props) {
<div
class={clx(
"flex",
layout?.gap?.mobile && flex.gap.mobile[layout.gap.mobile],
layout?.gap?.desktop && flex.gap.desktop[layout.gap.desktop],
layout?.direction?.mobile &&
flex.direction.mobile[layout.direction.mobile],
layout?.direction?.desktop &&
flex.direction.desktop[layout.direction.desktop],
layout?.justify?.mobile && flex.justify.mobile[layout.justify.mobile],
layout?.justify?.desktop &&
flex.justify.desktop[layout.justify.desktop],
layout?.wrap?.mobile && flex.wrap.mobile[layout.wrap.mobile],
layout?.wrap?.desktop && flex.wrap.desktop[layout.wrap.desktop],
flex.gap.mobile[layout?.gap?.mobile ?? "4"],
flex.gap.desktop[layout?.gap?.desktop ?? "8"],
flex.direction.mobile[layout?.direction?.mobile ?? "col"],
flex.direction.desktop[layout?.direction?.desktop ?? "row"],
flex.justify.mobile[layout?.justify?.mobile ?? "center"],
flex.justify.desktop[layout?.justify?.desktop ?? "center"],
flex.wrap.mobile[layout?.wrap?.mobile ?? "wrap"],
flex.wrap.desktop[layout?.wrap?.desktop ?? "wrap"],
)}
>
{children}
{children?.length
? children
: new Array(4).fill(0).map(() => <ItemPreview />)}
</div>
);
}

const ItemPreview = () => (
<div class="card w-48 h-48 bg-base-100 shadow">
<div class="card-body items-center justify-center text-base-300 text-sm">
flex
</div>
</div>
);

export default Section;
Loading

0 comments on commit 27a8ca1

Please sign in to comment.