Merge pull request #12 from thomasKn/thomas/fv-222-section-setting-sh…

…owhide

Add hide section setting

app/components/CmsSection.tsx

@@ -32,6 +32,8 @@ export function CmsSection(props: {
   const type = data._type;
   const Section = useMemo(() => sections[type], [type]);
 
+  if (data.settings.hide) return null;
+
   return Section ? (
     <SectionWrapper data={data} type={props.type}>
       <Suspense
@@ -71,7 +73,7 @@ function SectionWrapper(props: {
 
   return props.type === 'footer' ? (
     <footer
-      className="bg-background text-foreground section-padding relative"
+      className="section-padding relative bg-background text-foreground"
       data-footer-type={isDev ? sectionType : null}
     >
       <style dangerouslySetInnerHTML={{__html: cssVars}} />
@@ -82,7 +84,7 @@ function SectionWrapper(props: {
     </footer>
   ) : (
     <section
-      className="bg-background text-foreground section-padding relative"
+      className="section-padding relative bg-background text-foreground"
       data-section-type={isDev ? sectionType : null}
       id={`section-${data._key}`}
     >

app/qroq/footers.ts

@@ -17,6 +17,7 @@ export const FOOTER_SETTINGS_FRAGMENT = q('settings').grab({
       code: q.string().optional(),
     })
     .nullable(),
+  hide: q.boolean().nullable(),
   padding: q
     .object({
       bottom: q.number().nullable(),

app/qroq/sections.ts

@@ -36,6 +36,7 @@ export const SECTION_SETTINGS_FRAGMENT = q('settings').grab({
       code: q.string().optional(),
     })
     .nullable(),
+  hide: q.boolean().nullable(),
   padding: q
     .object({
       bottom: q.number().nullable(),

studio/schemas/index.ts

@@ -4,7 +4,6 @@ import header from './singletons/header';
 import page from './documents/page';
 import settings from './singletons/settings';
 import themeContent from './singletons/themeContent';
-import ctaSection from './objects/sections/ctaSection';
 import imageBannerSection from './objects/sections/imageBannerSection';
 import home from './singletons/home';
 import collection from './documents/collection';
@@ -63,7 +62,6 @@ const sections = [
   featuredProductSection,
   collectionListSection,
   productInformationSection,
-  ctaSection,
   relatedProductsSection,
   carouselSection,
   richtextSection,

studio/schemas/objects/global/sectionSettings.ts

@@ -4,6 +4,12 @@ export default defineField({
   type: 'object',
   name: 'sectionSettings',
   fields: [
+    defineField({
+      name: 'hide',
+      title: 'Hide section',
+      type: 'boolean',
+      initialValue: false,
+    }),
     defineField({
       name: 'colorScheme',
       title: 'Color scheme',

studio/schemas/objects/global/sectionsList.ts

@@ -15,9 +15,6 @@ const globalSections = [
   {
     type: 'collectionListSection',
   },
-  {
-    type: 'ctaSection',
-  },
   {
     type: 'carouselSection',
   },

studio/schemas/objects/sections/carouselSection.tsx

@@ -1,4 +1,4 @@
-import {GalleryHorizontal} from 'lucide-react';
+import {EyeOff, GalleryHorizontal} from 'lucide-react';
 import {defineField} from 'sanity';
 
 export default defineField({
@@ -8,11 +8,12 @@ export default defineField({
   preview: {
     select: {
       title: 'title',
+      settings: 'settings',
     },
-    prepare({title}: any) {
+    prepare({title, settings}: any) {
       return {
         title: title?.[0]?.value || 'Missing title',
-        media: GalleryHorizontal,
+        media: settings.hide ? EyeOff : GalleryHorizontal,
       };
     },
   },

studio/schemas/objects/sections/collectionBanner.tsx

@@ -1,5 +1,5 @@
 import {defineField} from 'sanity';
-import {Image} from 'lucide-react';
+import {EyeOff, Image} from 'lucide-react';
 
 export default defineField({
   name: 'collectionBannerSection',
@@ -23,10 +23,13 @@ export default defineField({
     }),
   ],
   preview: {
-    prepare() {
+    select: {
+      settings: 'settings',
+    },
+    prepare({settings}:any) {
       return {
         title: 'Collection Banner',
-        media: () => <Image />,
+        media: () => settings.hide ? <EyeOff/> : <Image />,
       };
     },
   },

studio/schemas/objects/sections/collectionListSection.tsx

@@ -1,4 +1,4 @@
-import {LayoutGrid} from 'lucide-react';
+import {EyeOff, LayoutGrid} from 'lucide-react';
 import {defineField} from 'sanity';
 
 export default defineField({
@@ -40,10 +40,13 @@ export default defineField({
     }),
   ],
   preview: {
-    prepare() {
+    select: {
+      settings: 'settings',
+    },
+    prepare({settings}: any) {
       return {
         title: 'Collection List',
-        media: () => <LayoutGrid />,
+        media: () => settings.hide ? <EyeOff/> : <LayoutGrid />,
       };
     },
   },

studio/schemas/objects/sections/collectionProductGrid.tsx

@@ -1,5 +1,5 @@
 import {defineField} from 'sanity';
-import {LayoutGrid} from 'lucide-react';
+import {EyeOff, LayoutGrid} from 'lucide-react';
 
 export default defineField({
   name: 'collectionProductGridSection',
@@ -57,10 +57,13 @@ export default defineField({
     enableSorting: true,
   },
   preview: {
-    prepare() {
+    select: {
+      settings: 'settings',
+    },
+    prepare({settings}: any) {
       return {
         title: 'Collection Product Grid',
-        media: () => <LayoutGrid />,
+        media: () => settings.hide ? <EyeOff/> : <LayoutGrid />,
       };
     },
   },

studio/schemas/objects/sections/featuredCollectionSection.tsx

@@ -1,3 +1,4 @@
+import { EyeOff } from 'lucide-react';
 import {defineField} from 'sanity';
 
 export default defineField({
@@ -41,12 +42,13 @@ export default defineField({
   preview: {
     select: {
       collection: 'collection.store',
+      settings: 'settings',
     },
-    prepare({collection}: any) {
+    prepare({collection, settings}: any) {
       return {
         title: collection.title,
         subtitle: 'Featured Collection',
-        media: () => <img src={collection.imageUrl} alt={collection.title} />,
+        media: () => settings.hide ? <EyeOff/> : <img src={collection.imageUrl} alt={collection.title} />,
       };
     },
   },

studio/schemas/objects/sections/featuredProductSection.tsx

@@ -1,3 +1,4 @@
+import { EyeOff } from 'lucide-react';
 import {defineField} from 'sanity';
 
 export default defineField({
@@ -19,12 +20,13 @@ export default defineField({
   preview: {
     select: {
       product: 'product.store',
+      settings: 'settings',
     },
-    prepare({product}: any) {
+    prepare({product, settings}: any) {
       return {
         title: product.title,
         subtitle: 'Featured Product',
-        media: () => <img src={product.previewImageUrl} alt={product.title} />,
+        media: () => settings.hide ? <EyeOff/> : <img src={product.previewImageUrl} alt={product.title} />,
       };
     },
   },

studio/schemas/objects/sections/imageBannerSection.ts

@@ -1,3 +1,4 @@
+import { EyeOff } from 'lucide-react';
 import {defineField} from 'sanity';
 
 export default defineField({
@@ -54,12 +55,13 @@ export default defineField({
     select: {
       title: 'title',
       media: 'backgroundImage',
+      settings: 'settings',
     },
-    prepare({title, media}: any) {
+    prepare({title, media, settings}: any) {
       return {
         title: title?.[0]?.value || 'Missing title',
         subtitle: 'Image Banner',
-        media: media,
+        media: settings.hide ? EyeOff : media,
       };
     },
   },

studio/schemas/objects/sections/productInformationSection.tsx

@@ -1,5 +1,6 @@
 import {defineField} from 'sanity';
 import {IconTag} from '../../../components/icons/Tag';
+import { EyeOff } from 'lucide-react';
 
 export default defineField({
   name: 'productInformationSection',
@@ -16,10 +17,13 @@ export default defineField({
     }),
   ],
   preview: {
-    prepare() {
+    select: {
+      settings: 'settings',
+    },
+    prepare({ settings }: any) {
       return {
         title: 'Product Information',
-        media: () => <IconTag />,
+        media: () => settings.hide ? <EyeOff/> : <IconTag />,
       };
     },
   },

studio/schemas/objects/sections/relatedProductsSection.tsx

@@ -1,5 +1,6 @@
 import {defineField} from 'sanity';
 import {IconCollectionTag} from '../../../components/icons/CollectionTag';
+import { EyeOff } from 'lucide-react';
 
 export default defineField({
   name: 'relatedProductsSection',
@@ -40,10 +41,13 @@ export default defineField({
     desktopColumns: 3,
   },
   preview: {
-    prepare() {
+    select: {
+      settings: 'settings',
+    },
+    prepare({ settings }: any) {
       return {
         title: 'Related Products',
-        media: () => <IconCollectionTag />,
+        media: () =>  settings.hide ? <EyeOff/> : <IconCollectionTag />,
       };
     },
   },

studio/schemas/objects/sections/richtextSection.tsx

@@ -1,4 +1,4 @@
-import {TextSelect} from 'lucide-react';
+import {EyeOff, TextSelect} from 'lucide-react';
 import {defineField} from 'sanity';
 
 export default defineField({
@@ -73,10 +73,13 @@ export default defineField({
     maxWidth: 900,
   },
   preview: {
-    prepare() {
+    select: {
+      settings: 'settings',
+    },
+    prepare({ settings }: any) {
       return {
         title: 'Richtext',
-        media: () => <TextSelect />,
+        media: () =>  settings.hide ? <EyeOff/> : <TextSelect />,
       };
     },
   },