From 65a10a1ef9afc552186b503c576b30be4bee519f Mon Sep 17 00:00:00 2001 From: Josh Knapp Date: Sun, 12 Jul 2026 13:16:53 -0700 Subject: [PATCH] refactor(builder): remove dead component settings UI Each component defined a .craft.related.settings panel that was never rendered -- the right panel renders only GuidedStyles (per-type *StylePanel components), never .related.settings. Removed all dead settings components across every component, their settings-only helpers (including the dead uploadToWhp/showBrowser/handleBrowse asset-browse blocks in Logo/Navbar/VideoBlock/FeaturesGrid, and CtasEditor in _cta-helpers), and dropped the now-empty related keys. Render output, .craft props/rules, and toHtml statics are unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) --- craft/src/components/basic/ButtonLink.tsx | 147 ----- craft/src/components/basic/Divider.tsx | 56 -- craft/src/components/basic/Footer.tsx | 64 -- craft/src/components/basic/Heading.tsx | 76 --- craft/src/components/basic/HtmlBlock.tsx | 73 --- craft/src/components/basic/Icon.tsx | 182 ------ craft/src/components/basic/Logo.tsx | 287 +------- craft/src/components/basic/Menu.tsx | 323 --------- craft/src/components/basic/Navbar.tsx | 614 +----------------- craft/src/components/basic/SearchBar.tsx | 59 -- craft/src/components/basic/SocialLinks.tsx | 234 ------- craft/src/components/basic/Spacer.tsx | 48 -- craft/src/components/basic/StarRating.tsx | 104 --- craft/src/components/basic/TextBlock.tsx | 58 -- craft/src/components/forms/ContactForm.tsx | 227 ------- craft/src/components/forms/FormButton.tsx | 98 --- craft/src/components/forms/FormContainer.tsx | 91 --- craft/src/components/forms/InputField.tsx | 78 --- craft/src/components/forms/SubscribeForm.tsx | 129 ---- craft/src/components/forms/TextareaField.tsx | 78 --- .../components/layout/BackgroundSection.tsx | 91 --- craft/src/components/layout/ColumnLayout.tsx | 178 +---- craft/src/components/layout/Container.tsx | 238 ------- craft/src/components/layout/Section.tsx | 198 ------ craft/src/components/media/ImageBlock.tsx | 384 +---------- craft/src/components/media/MapEmbed.tsx | 76 --- craft/src/components/media/VideoBlock.tsx | 363 +---------- craft/src/components/sections/Accordion.tsx | 154 ----- craft/src/components/sections/CTASection.tsx | 78 +-- .../src/components/sections/CallToAction.tsx | 216 +----- .../src/components/sections/ContentSlider.tsx | 205 ------ craft/src/components/sections/Countdown.tsx | 108 +-- .../src/components/sections/FeaturesGrid.tsx | 169 ----- craft/src/components/sections/Gallery.tsx | 153 ----- craft/src/components/sections/HeroSimple.tsx | 215 +----- .../src/components/sections/NumberCounter.tsx | 196 ------ .../src/components/sections/PricingTable.tsx | 187 ------ craft/src/components/sections/Tabs.tsx | 172 ----- .../src/components/sections/Testimonials.tsx | 207 ------ .../src/components/sections/_cta-helpers.tsx | 114 +--- 40 files changed, 10 insertions(+), 6718 deletions(-) diff --git a/craft/src/components/basic/ButtonLink.tsx b/craft/src/components/basic/ButtonLink.tsx index a6e255c..893485f 100644 --- a/craft/src/components/basic/ButtonLink.tsx +++ b/craft/src/components/basic/ButtonLink.tsx @@ -45,150 +45,6 @@ export const ButtonLink: UserComponent = ({ ); }; -/* ---------- Settings panel ---------- */ - -const ButtonLinkSettings: React.FC = () => { - const { actions: { setProp }, props } = useNode((node) => ({ - props: node.data.props as ButtonLinkProps, - })); - - const colorPresets = [ - { bg: '#3b82f6', color: '#ffffff', label: 'Blue' }, - { bg: '#10b981', color: '#ffffff', label: 'Green' }, - { bg: '#ef4444', color: '#ffffff', label: 'Red' }, - { bg: '#f59e0b', color: '#18181b', label: 'Amber' }, - { bg: '#8b5cf6', color: '#ffffff', label: 'Purple' }, - { bg: '#18181b', color: '#ffffff', label: 'Dark' }, - { bg: '#ffffff', color: '#18181b', label: 'White' }, - { bg: 'transparent', color: '#3b82f6', label: 'Ghost' }, - ]; - const radiusPresets = ['0px', '4px', '8px', '12px', '9999px']; - const paddingPresets = ['8px 16px', '10px 20px', '12px 24px', '14px 32px', '16px 40px']; - - return ( -
-
- - setProp((p: ButtonLinkProps) => { p.text = e.target.value; })} - style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }} - /> -
- -
- - setProp((p: ButtonLinkProps) => { p.href = e.target.value; })} - placeholder="https://..." - style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }} - /> -
- -
- -
- {(['_self', '_blank'] as const).map((t) => ( - - ))} -
-
- -
- -
- {colorPresets.map((preset) => ( -
-
- -
- -
- {radiusPresets.map((r) => ( - - ))} -
-
- -
- -
- {paddingPresets.map((p) => ( - - ))} -
-
- -
- - setProp((p: ButtonLinkProps) => { p.style = { ...p.style, fontSize: e.target.value }; })} - style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11 }} - /> -
-
- ); -}; - /* ---------- Craft config ---------- */ ButtonLink.craft = { @@ -212,9 +68,6 @@ ButtonLink.craft = { canMoveIn: () => false, canMoveOut: () => true, }, - related: { - settings: ButtonLinkSettings, - }, }; /* ---------- HTML export ---------- */ diff --git a/craft/src/components/basic/Divider.tsx b/craft/src/components/basic/Divider.tsx index aa349f5..707c07d 100644 --- a/craft/src/components/basic/Divider.tsx +++ b/craft/src/components/basic/Divider.tsx @@ -34,59 +34,6 @@ export const Divider: UserComponent = ({ ); }; -/* ---------- Settings panel ---------- */ - -const DividerSettings: React.FC = () => { - const { actions: { setProp }, props } = useNode((node) => ({ - props: node.data.props as DividerProps, - })); - - const colorPresets = ['#e4e4e7', '#d4d4d8', '#a1a1aa', '#3f3f46', '#18181b', '#3b82f6', '#ef4444', '#10b981']; - const thicknessPresets = ['1px', '2px', '3px', '4px', '6px']; - - return ( -
-
- -
- {colorPresets.map((c) => ( -
-
- -
- -
- {thicknessPresets.map((t) => ( - - ))} -
-
-
- ); -}; - /* ---------- Craft config ---------- */ Divider.craft = { @@ -101,9 +48,6 @@ Divider.craft = { canMoveIn: () => false, canMoveOut: () => true, }, - related: { - settings: DividerSettings, - }, }; /* ---------- HTML export ---------- */ diff --git a/craft/src/components/basic/Footer.tsx b/craft/src/components/basic/Footer.tsx index 4b75040..7d542ec 100644 --- a/craft/src/components/basic/Footer.tsx +++ b/craft/src/components/basic/Footer.tsx @@ -56,67 +56,6 @@ export const Footer: UserComponent = ({ ); }; -/* ---------- Settings panel ---------- */ - -const FooterSettings: React.FC = () => { - const { actions: { setProp }, props } = useNode((node) => ({ - props: node.data.props as FooterProps, - })); - - const bgPresets = ['#ffffff', '#f8fafc', '#18181b', '#0f172a', '#1e293b']; - const colorPresets = ['#18181b', '#3f3f46', '#71717a', '#a1a1aa', '#e4e4e7', '#ffffff']; - - return ( -
-
- - setProp((p: FooterProps) => { p.text = e.target.value; })} - style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }} - /> -
- -
- -
- {bgPresets.map((c) => ( -
-
- -
- -
- {colorPresets.map((c) => ( -
-
-
- ); -}; - /* ---------- Craft config ---------- */ Footer.craft = { @@ -135,9 +74,6 @@ Footer.craft = { canMoveIn: () => false, canMoveOut: () => true, }, - related: { - settings: FooterSettings, - }, }; /* ---------- HTML export ---------- */ diff --git a/craft/src/components/basic/Heading.tsx b/craft/src/components/basic/Heading.tsx index 3131596..158f911 100644 --- a/craft/src/components/basic/Heading.tsx +++ b/craft/src/components/basic/Heading.tsx @@ -1,9 +1,6 @@ import React, { CSSProperties, useCallback, useRef, useEffect } from 'react'; import { useNode, UserComponent } from '@craftjs/core'; import { cssPropsToString } from '../../utils/style-helpers'; -import { SettingsTabs } from '../../ui/SettingsTabs'; -import { TypographyControl } from '../../ui/TypographyControl'; -import { AdvancedTab } from '../../ui/AdvancedTab'; type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; @@ -80,76 +77,6 @@ export const Heading: UserComponent = ({ }); }; -/* ---------- Settings panel ---------- */ - -const HeadingSettings: React.FC = () => { - const { actions: { setProp }, props } = useNode((node) => ({ - props: node.data.props as HeadingProps, - })); - - const levels: HeadingLevel[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; - - return ( - -
- -
- {levels.map((l) => ( - - ))} -
-
-
- - setProp((p: HeadingProps) => { p.text = e.target.value; })} - style={{ width: '100%', padding: '6px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 13 }} - /> -
- - } - style={ - setProp((p: HeadingProps) => { p.style = { ...p.style, ...updates }; })} - /> - } - advanced={ - setProp((p: HeadingProps) => { p.style = { ...p.style, ...updates }; })} - cssId={props.cssId || ''} - onCssIdChange={(id) => setProp((p: HeadingProps) => { p.cssId = id; })} - cssClass={props.cssClass || ''} - onCssClassChange={(cls) => setProp((p: HeadingProps) => { p.cssClass = cls; })} - hideOnDesktop={props.hideOnDesktop} - onHideOnDesktopChange={(v) => setProp((p: HeadingProps) => { p.hideOnDesktop = v; })} - hideOnTablet={props.hideOnTablet} - onHideOnTabletChange={(v) => setProp((p: HeadingProps) => { p.hideOnTablet = v; })} - hideOnMobile={props.hideOnMobile} - onHideOnMobileChange={(v) => setProp((p: HeadingProps) => { p.hideOnMobile = v; })} - animation={props.animation} - onAnimationChange={(v) => setProp((p: HeadingProps) => { p.animation = v; })} - animationDelay={props.animationDelay} - onAnimationDelayChange={(v) => setProp((p: HeadingProps) => { p.animationDelay = v; })} - /> - } - /> - ); -}; - Heading.craft = { displayName: 'Heading', props: { @@ -168,9 +95,6 @@ Heading.craft = { canMoveIn: () => false, canMoveOut: () => true, }, - related: { - settings: HeadingSettings, - }, }; (Heading as any).toHtml = (props: HeadingProps, _childrenHtml: string) => { diff --git a/craft/src/components/basic/HtmlBlock.tsx b/craft/src/components/basic/HtmlBlock.tsx index a5b05df..4fa7f8a 100644 --- a/craft/src/components/basic/HtmlBlock.tsx +++ b/craft/src/components/basic/HtmlBlock.tsx @@ -49,76 +49,6 @@ export const HtmlBlock: UserComponent = ({ code = '', style = {} }); }; -/* ---------- Settings panel ---------- */ - -const HtmlBlockSettings: React.FC = () => { - const { actions: { setProp }, props } = useNode((node) => ({ - props: node.data.props as HtmlBlockProps, - })); - - return ( -
-
- This block renders raw HTML. Use with caution. -
- -
- -