Skip to content

Commit

Permalink
fix: fixed slots
Browse files Browse the repository at this point in the history
  • Loading branch information
adolfokrah committed Sep 25, 2024
1 parent f6583f8 commit 0ebac66
Show file tree
Hide file tree
Showing 31 changed files with 386 additions and 299 deletions.
9 changes: 2 additions & 7 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import { Cms } from './components';
import './styles/tailwind.css';
import TestLivePage from './TestLivePage';
import visioConfig from '../visio.config'
import visioConfig from '../visio.config';
function App() {
const path = window.location.pathname;
if (path.includes('cms')) {
return (
<Cms
path={path}
{...visioConfig}
/>
);
return <Cms path={path} {...visioConfig} />;
}
return <TestLivePage />;
}
Expand Down
3 changes: 1 addition & 2 deletions src/TestLivePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@ import { getPageBlocks, PageData } from './lib/utils';
import { LivePage } from './components';
import { PageBlock } from './lib/states/usePagesState';
import blocks from './components/blocks';
import visioConfig from '../visio.config'
import visioConfig from '../visio.config';

export default function TestLivePage() {
const [pageBlocks, setPageBlocks] = useState<PageBlock[]>([]);
const [projectConfiguration, setProjectConfiguration] = useState<PageData['projectConfiguration'] | null>(null);
const [params, setParams] = useState<PageData['params']>({});
const [pages, setPages] = useState<PageData['pages']>([]);


useEffect(() => {
const path = window.location.pathname;
Expand Down
11 changes: 8 additions & 3 deletions src/components/blocks/blog-content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ import Slot from '../exposed-components/slot';
interface BlogContentProps {
content: PageBlock[];
pageBlockId?: string;
buttons: PageBlock[];
}

const BlogContent: Block<BlogContentProps> = ({ content, pageBlockId = '' }) => {
const BlogContent: Block<BlogContentProps> = ({ content, pageBlockId = '', buttons }) => {
return (
<div className="visio-cms-py-2">
<div className="visio-cms-mx-auto visio-cms-w-[80%]">
<h1>Blog content here</h1>
<Slot propName='content' pageBlocks={content} pageBlockId={pageBlockId}/>
<Slot propName="content" pageBlocks={content} pageBlockId={pageBlockId} />
<div className="visio-cms-h-[100px] visio-cms-w-full visio-cms-mt-6">
<Slot propName="buttons" direction="horizontal" pageBlocks={buttons} pageBlockId={pageBlockId} />
</div>
</div>
</div>
);
Expand All @@ -22,7 +26,8 @@ BlogContent.Schema = {
id: 'blog-content',
sideEditingProps: [],
defaultPropValues: {
content: []
content: [],
buttons: [],
},
group: 'Content',
};
Expand Down
15 changes: 15 additions & 0 deletions src/components/blocks/button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Block } from '@/lib/types';
import { Button } from '../ui/button';

const ButtonBlock: Block = () => {
return <Button>Click me</Button>;
};

ButtonBlock.Schema = {
name: 'button',
id: 'button',
sideEditingProps: [],
defaultPropValues: {},
};

export default ButtonBlock;
3 changes: 2 additions & 1 deletion src/components/blocks/index.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { BlockList } from '../../lib/exposed-types';
import BlogContent from './blog-content';
import ButtonBlock from './button';
import Footer from './footer';
import Hero from './hero';
import Navbar from './navbar';
import Table from './table';
import Testimonial from './testimonials';
import VideoSection from './video-section';

const blocks = [Hero, Navbar, Testimonial, Footer, BlogContent, VideoSection, Table] as unknown as BlockList[];
const blocks = [Hero, Navbar, Testimonial, Footer, BlogContent, VideoSection, Table, ButtonBlock] as unknown as BlockList[];

export default blocks;
2 changes: 1 addition & 1 deletion src/components/blocks/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Navbar: Block<NavbarProps> = ({ links, pageBlockId = '', logo, sideButtons
className={cn(
'visio-cms-p-2 visio-cms-w-full visio-cms-justify-between visio-cms-flex visio-cms-gap-2 visio-cms-items-center visio-cms-bg-white ',
{
'visio-cms-fixed visio-cms-z-30': projectMode != 'BUILDER',
'visio-cms-z-30': projectMode != 'BUILDER',
},
)}
>
Expand Down
4 changes: 1 addition & 3 deletions src/components/blocks/testimonials.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ const Testimonial: Block<TestimonialProps> = ({
<h2 className="visio-cms-text-3xl visio-cms-font-bold visio-cms-tracking-tight visio-cms-text-white sm:visio-cms-text-4xl">
{title}
</h2>
<p className="visio-cms-mt-4 visio-cms-text-lg visio-cms-leading-8 visio-cms-text-gray-300">
{link}
</p>
<p className="visio-cms-mt-4 visio-cms-text-lg visio-cms-leading-8 visio-cms-text-gray-300">{link}</p>
{showCounter && <h1>{counter}</h1>}

<p>date is: {date}</p>
Expand Down
5 changes: 3 additions & 2 deletions src/components/exposed-components/list/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { usePageContentState } from '@/lib/states/usePageContentState';
import { cn, getProjectMode, sendMessageToParent } from '@/lib/utils';
import { cn, getProjectMode, getSelectedBlock, sendMessageToParent } from '@/lib/utils';
import React from 'react';

type ListProps<T> = {
Expand Down Expand Up @@ -30,6 +30,7 @@ export default function List<T>({
const activePage = pages.find((page) => page?.active);
const pageBlocks = activePage?.blocks?.[activePage?.activeLanguageLocale] || [];
const foundBlock = pageBlocks.find((block) => block?.id === pageBlockId);
const selectedBlock = getSelectedBlock(pageBlocks)
const globalBlock = globalBlocks?.find((block) => block.id === foundBlock?.globalBlockId);
const projectMode = getProjectMode();

Expand All @@ -38,7 +39,7 @@ export default function List<T>({
key: `${propName}.${index}`,
className: cn('visio-cms-list-none', listItemClassName || setListItemClassName?.(values, index), {
'visio-cms-outline visio-cms-outline-2 visio-cms-outline-blue-500':
selectedListItem?.propName === `${propName}.${index}` && !globalBlock,
`${selectedBlock.id}.${selectedListItem?.propName}` === `${pageBlockId}.${propName}.${index}` && !globalBlock,
}),
children: renderComponent(values, index),
onClick: (e: MouseEvent) => {
Expand Down
118 changes: 67 additions & 51 deletions src/components/exposed-components/slot/index.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,75 @@
import BlockItem from "@/components/pages/page-content/components/bock-item"
import EmptyPageDroppable from "@/components/pages/page-content/components/emptyPageDroppable"
import { PageBlock } from "@/lib/exposed-types"
import usePageContent from "@/lib/hooks/usePageContent"
import { usePageContentState } from "@/lib/states/usePageContentState"
import { useProjectConfigurationState } from "@/lib/states/useProjectConfigState"
import { cn, getProjectMode } from "@/lib/utils"
import BlockItem from '@/components/pages/page-content/components/bock-item';
import EmptyPageDroppable from '@/components/pages/page-content/components/emptyPageDroppable';
import { PageBlock } from '@/lib/exposed-types';
import usePageContent from '@/lib/hooks/usePageContent';
import { usePageContentState } from '@/lib/states/usePageContentState';
import { useProjectConfigurationState } from '@/lib/states/useProjectConfigState';
import { cn, getProjectMode } from '@/lib/utils';

type SlotProps = {
pageBlocks: PageBlock[]
direction?: 'horizontal' | 'vertical',
className?: string,
propName: string
pageBlockId: string
}
export default function Slot({pageBlocks, direction, className, propName, pageBlockId}:SlotProps){
const { activePage } = usePageContent();
const { blocks: builderBlocks } = useProjectConfigurationState();
const {blocks: liveBlocks, globalBlocks} = usePageContentState();
const isLiveMode = getProjectMode() === 'LIVE'
pageBlocks: PageBlock[];
direction?: 'horizontal' | 'vertical';
className?: string;
propName: string;
pageBlockId: string;
};
export default function Slot({ pageBlocks, direction = 'vertical', className, propName, pageBlockId }: SlotProps) {
const { activePage } = usePageContent();
const { blocks: builderBlocks } = useProjectConfigurationState();
const { blocks: liveBlocks, globalBlocks } = usePageContentState();
const isBuilderMode = getProjectMode() === 'BUILDER';

if (pageBlocks.length === 0 && activePage) {
return (
<EmptyPageDroppable
activePage={activePage}
propName={propName}
pageBlockId={pageBlockId}
className="!visio-cms-h-full !visio-cms-min-h-[50px]"
/>
);
}

if (pageBlocks.length === 0 && activePage) {
return <EmptyPageDroppable activePage={activePage} propName={propName} pageBlockId={pageBlockId} className="h-full" />;
}
const blocks = getProjectMode() === 'LIVE' ? liveBlocks : builderBlocks;

const blocks = isLiveMode ? liveBlocks : builderBlocks
const divClass = cn('visio-cms-relative visio-cms-flex', className, {
'visio-cms-flex-row visio-cms-w-full visio-cms-items-center visio-cms-bg-red-500': direction === 'horizontal',
'visio-cms-flex-col': direction === 'vertical',
});

const divClass = cn('relative flex flex-col',className, {
'flex-row': direction === 'horizontal',
})
if (!isBuilderMode) {
return (
<div className={cn(divClass)}>
{pageBlocks?.map((block) => {
const globalBlock = globalBlocks?.find((b) => b.id === block?.globalBlockId);
const Block = blocks.find((b) => b.Schema.id === (globalBlock?.blockId || block.blockId));
if (!Block) return null;
const inputs = { ...Block.Schema.defaultPropValues, ...block.inputs, ...globalBlock?.inputs };
return <Block key={block.id} {...inputs} />;
})}
</div>
);
}
return (
<div className={cn(divClass)}>
{pageBlocks.map((pageBlock, index) => {
const { blockId } = pageBlock;
const block = blocks.find((block) => block.Schema.id === blockId);

if(isLiveMode){
if (!block) return null;
return (
<div className={cn(divClass)}>
{ pageBlocks?.map((block) => {
const globalBlock = globalBlocks?.find((b) => b.id === block?.globalBlockId);
const Block = blocks.find((b) => b.Schema.id === (globalBlock?.blockId || block.blockId));
if (!Block) return null;
const inputs = { ...Block.Schema.defaultPropValues, ...block.inputs, ...globalBlock?.inputs };
return <Block key={block.id} {...inputs} />;
})}
</div>
)
}
return (
<div className={cn(divClass)}>
{pageBlocks.map((pageBlock, index)=>{
const { blockId } = pageBlock;
const block = blocks.find((block) => block.Schema.id === blockId);

if (!block) return null;
return (
<BlockItem parentBlockId={pageBlockId} propName={propName} key={pageBlock.id} block={block} index={index} pageBlock={pageBlock} pageBlocks={pageBlocks} />
)
})}
</div>
)
}
<BlockItem
droppableDirection={direction}
parentBlockId={pageBlockId}
propName={propName}
key={pageBlock.id}
block={block}
index={index}
pageBlock={pageBlock}
pageBlocks={pageBlocks}
/>
);
})}
</div>
);
}
2 changes: 1 addition & 1 deletion src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export { default as Image } from './exposed-components/image';
export { default as RichText } from './exposed-components/rich-text-editor';
export { default as Text } from './exposed-components/text';
export { default as List } from './exposed-components/list';
export {default as Slot} from './exposed-components/slot';
export { default as Slot } from './exposed-components/slot';
export { getProjectMode, getImageUrl, getLink, getColor, getPageBlocks } from '../lib/exposed-functions';
export { cn } from '../lib/utils';
export { default as LivePage } from './pages/live-page';
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function AddGlobalBlockForm({
onClose: () => void;
pageBlockId: string;
propName: string;
parentBlockId: string
parentBlockId: string;
}) {
const { onAddGlobalBlock, addGlobalBlockForm, loading, errorMessage, setErrorMessage } = useGlobalBlock(onClose);
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,22 @@ export default function RenderController(props: SideEditingProps) {
const activePage = pages.find((page) => page.active);
const pageBlocks = activePage?.blocks?.[activePage.activeLanguageLocale] || [];
const activeBlock =
getSelectedBlock(pageBlocks) as PageBlock ||
(getSelectedBlock(pageBlocks) as PageBlock) ||
globalBlocks.find((block) => block.id === tabs.find((tab) => tab.active)?.id);
const { addBlocksToPageHistory, addInputsToGlobalBlockHistory } = useBlockHistory();
const defaultValue = getValueByPath(activeBlock?.inputs, props.propName.split('.'));

const debounceChangePropValue = lodash.debounce((value: any) => {
const page = activePage;
if (activeBlock) {


if (page) {
const blockPath = getSelectedBlockPath(pageBlocks, activeBlock.id);
const path = props.propName.split('.')
const newBlocks = updateValueByPath(pageBlocks, blockPath ? (`${blockPath}.inputs.${props.propName}`).split('.') : path, value) as PageBlock[];
const path = props.propName.split('.');
const newBlocks = updateValueByPath(
pageBlocks,
blockPath ? `${blockPath}.inputs.${props.propName}`.split('.') : path,
value,
) as PageBlock[];

page.blocks = {
...page.blocks,
Expand All @@ -44,7 +46,6 @@ export default function RenderController(props: SideEditingProps) {
...JSON.parse(JSON.stringify(page.blocks?.[page.activeLanguageLocale])),
]);
} else {

const path = props.propName.split('.');
const blockInputs = updateValueByPath(activeBlock?.inputs || {}, path, value);
setGlobalBlocks(
Expand Down
31 changes: 15 additions & 16 deletions src/components/layout/right-side-bar/properties-tab/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function PropertiesTab() {
const { tabs } = useTabState();
const activePage = pages.find((page) => page.active);
const pageBlocks = activePage?.blocks?.[activePage?.activeLanguageLocale];
const pageBlock = getSelectedBlock(pageBlocks)
const pageBlock = getSelectedBlock(pageBlocks);
const activeGlobalPinnedBlock = globalBlocks.find((block) => block.id === tabs.find((tab) => tab.active)?.id);
const selectedBlock = blocks.find(
(block) => block.Schema.id === pageBlock?.blockId || block.Schema.id === activeGlobalPinnedBlock?.blockId,
Expand All @@ -48,11 +48,11 @@ export default function PropertiesTab() {

const moveListItem = (propName: string, direction: 'up' | 'down') => {
let path = propName.split('.');
if(!activeGlobalPinnedBlock){
const blockPath = getSelectedBlockPath(pageBlocks, pageBlock.id )
path = (`${blockPath}.inputs.${propName}`).split('.')
if (!activeGlobalPinnedBlock) {
const blockPath = getSelectedBlockPath(pageBlocks, pageBlock.id);
path = `${blockPath}.inputs.${propName}`.split('.');
}
const newData = moveItemByPathArray( activeGlobalPinnedBlock?.inputs || pageBlocks || {}, path, direction);
const newData = moveItemByPathArray(activeGlobalPinnedBlock?.inputs || pageBlocks || {}, path, direction);

updateBlockInputs(newData || {});
path = propName.split('.');
Expand All @@ -69,26 +69,25 @@ export default function PropertiesTab() {
};

const addItem = (propName: string, data: any) => {

if(activeGlobalPinnedBlock){
if (activeGlobalPinnedBlock) {
const path = propName.split('.');
const value = getValueByPath(pageBlock?.inputs || activeGlobalPinnedBlock?.inputs, path);
updateBlockValue(path, [...(value || []), data]);
}else{
const blockPath = getSelectedBlockPath(pageBlocks, pageBlock.id )
const path = (`${blockPath}.inputs.${propName}`).split('.')
const value = getValueByPath(pageBlocks, path);
updateBlockValue(path, [...(value || []), data]);
} else {
const blockPath = getSelectedBlockPath(pageBlocks, pageBlock.id);
const path = `${blockPath}.inputs.${propName}`.split('.');
const value = getValueByPath(pageBlocks, path);
updateBlockValue(path, [...(value || []), data]);
}

toast.success('Item added');
};

const deleteRepeaterItem = (propName: string) => {
let path = propName.split('.');
if(!activeGlobalPinnedBlock){
const blockPath = getSelectedBlockPath(pageBlocks, pageBlock.id )
path = (`${blockPath}.inputs.${propName}`).split('.')
if (!activeGlobalPinnedBlock) {
const blockPath = getSelectedBlockPath(pageBlocks, pageBlock.id);
path = `${blockPath}.inputs.${propName}`.split('.');
}
const newData = deleteItemByPathArray(activeGlobalPinnedBlock?.inputs || pageBlocks || {}, path);
updateBlockInputs(newData || {});
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default function Cms(props: ProjectConfig & { path: string }) {
if (fetchingUser)
return (
<div className="visio-cms-w-full visio-cms-bg-dark-900 visio-cms-h-[100vh] visio-cms-grid visio-cms-place-items-center">
<Loader className="visio-cms-animate-spin" color="white" />
<Loader className="visio-cms-animate-spin" color="white" />
</div>
);

Expand Down
Loading

0 comments on commit 0ebac66

Please sign in to comment.