Skip to content

Commit

Permalink
Favorites, regeneration and maintaining state
Browse files Browse the repository at this point in the history
  • Loading branch information
arunshenoy99 committed Dec 6, 2023
1 parent bdabd26 commit 9f6ab77
Show file tree
Hide file tree
Showing 28 changed files with 831 additions and 138 deletions.
18 changes: 13 additions & 5 deletions src/OnboardingSPA/components/Header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,22 @@ import {
HEADER_START,
HEADER_TOP,
} from '../../../constants';
import classNames from 'classnames';
import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step';

const Header = () => {
const { headers, headerActiveView, isHeaderEnabled } = useSelect(
( select ) => {
const { headers, headerActiveView, isHeaderEnabled, currentStep } =
useSelect( ( select ) => {
return {
headers: select( nfdOnboardingStore ).getHeaders(),
headerActiveView:
select( nfdOnboardingStore ).getHeaderActiveView(),
isHeaderEnabled: select( nfdOnboardingStore ).isHeaderEnabled(),
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
};
}
);
} );

const isEditorStep = currentStep === stepSiteGenEditor;

return (
<>
Expand All @@ -35,7 +39,11 @@ const Header = () => {
</Suspense>
<Slot name={ `${ headerActiveView }/${ HEADER_TOP }` } />
{ isHeaderEnabled && (
<div className="nfd-onboarding-header">
<div
className={ classNames( 'nfd-onboarding-header', {
'nfd-onboarding-header--dark': isEditorStep,
} ) }
>
<div className="nfd-onboarding-header__start">
<Slot
name={ `${ headerActiveView }/${ HEADER_START }` }
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Icon, search } from '@wordpress/icons';
import { LivePreview } from '..';
import favorite from '../../../static/icons/sitegen/favorite.svg';

const LivePreviewSiteGenCard = ( {
className = 'nfd-onboarding-live-preview--sitegen-card',
Expand Down Expand Up @@ -70,8 +69,7 @@ const LivePreviewSiteGenCard = ( {
</div>
<div className={ `${ className }__buttons` }>
<div className={ `${ className }__buttons__favorite` }>
<img
src={ favorite }
<div

Check failure on line 72 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check failure on line 72 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element

Check failure on line 72 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check failure on line 72 in src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
className={ `${ className }__buttons__favorite__icon ${
isFavorite &&
`${ className }__buttons__favorite__icon__fill`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
flex-direction: column;
align-items: center;
justify-content: center;
margin: 24px;
width: 100%;
&__live-preview-container {
position: relative;
Expand Down Expand Up @@ -87,24 +86,25 @@
align-items: center;
&__icon {
width: 20px;
height: 20px;
height: 21px;
margin-right: 12px;
cursor: pointer;
background-image: var(--sitegen-favorite);

&__fill {
background-color: var(--nfd-onboarding-favorite-fill);
background-image: var(--sitegen-favorite-filled);
}

}

&__text {}
}

&__regenerate {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
&__icon {
background-image: var(--sitegen-regenerate);
width: 16px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
getSiteGenIdentifiers,
} from '../../../utils/api/siteGen';
import Footer from '../../Footer';
import { stepSiteGenEditor } from '../../../steps/SiteGen/Editor/step';

Check failure on line 19 in src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

'stepSiteGenEditor' is defined but never used

Check failure on line 19 in src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

'stepSiteGenEditor' is defined but never used

// Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available
const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
Expand All @@ -25,9 +26,10 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
);

const SiteGen = () => {
const { newfoldBrand } = useSelect( ( select ) => {
const { newfoldBrand, currentStep } = useSelect( ( select ) => {

Check failure on line 29 in src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

'currentStep' is assigned a value but never used

Check failure on line 29 in src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks

'currentStep' is assigned a value but never used
return {
newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(),
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
};
}, [] );

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components';
import { Fragment, memo, Suspense } from '@wordpress/element';
import { closeSmall } from '@wordpress/icons';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

import { store as nfdOnboardingStore } from '../../../../store';
import {
SIDEBAR_SITEGEN_EDITOR_PATTERNS,
SIDEBAR_SLOTFILL_PREFIX,
} from '../../../../../constants';

const SitegenEditorPatternsSidebar = () => {
const { currentStep } = useSelect( ( select ) => {
return {
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
};
} );

const { setIsSidebarOpened } = useDispatch( nfdOnboardingStore );

const closeSideBar = () => {
setIsSidebarOpened( false );
};
return (
<Fill name={ `${ SIDEBAR_SLOTFILL_PREFIX }/${ SIDEBAR_SITEGEN_EDITOR_PATTERNS }` }>
<PanelBody
className="nfd-onboarding-sidebar--sitegen-editor-patterns"
initialOpen={ true }
>
<Suspense fallback={ <></>}>
<PanelHeader
label={ __( 'Learn More', 'wp-module-onboarding' ) }
>
<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header">
<Button
className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__icon"
onClick={ closeSideBar }
icon={ closeSmall }
></Button>
</div>
</PanelHeader>
{ currentStep?.sidebars?.LearnMore &&
currentStep?.sidebars?.LearnMore.SidebarComponents.map(
( SidebarComponent, index ) => {
return (
<Fragment key={ index }>
<SidebarComponent />
</Fragment>
);
}
) }
</Suspense>
</PanelBody>
</Fill>
);
};

export default memo( SitegenEditorPatternsSidebar );
Empty file.
5 changes: 0 additions & 5 deletions src/OnboardingSPA/data/homepages/1.json

This file was deleted.

8 changes: 0 additions & 8 deletions src/OnboardingSPA/data/homepages/getHomepages.js

This file was deleted.

17 changes: 16 additions & 1 deletion src/OnboardingSPA/data/sidebars/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { lazy } from '@wordpress/element';

import { SIDEBAR_LEARN_MORE } from '../../../constants';
import {
SIDEBAR_LEARN_MORE,
SIDEBAR_SITEGEN_EDITOR_PATTERNS,
} from '../../../constants';

const LearnMoreMenu = lazy( () =>
import( '../../components/Sidebar/components/LearnMore/Menu' )
Expand All @@ -9,11 +12,23 @@ const LearnMoreSidebar = lazy( () =>
import( '../../components/Sidebar/components/LearnMore/Sidebar' )
);

const SitegenEditorPatternsSidebar = lazy( () =>
import(
'../../components/Sidebar/components/SitegenEditorPatterns/Sidebar'
)
);

export const sidebars = [
{
id: SIDEBAR_LEARN_MORE,
menu: LearnMoreMenu,
sidebar: LearnMoreSidebar,
enabled: true,
},
{
id: SIDEBAR_SITEGEN_EDITOR_PATTERNS,
menu: SitegenEditorPatternsSidebar,
sidebar: SitegenEditorPatternsSidebar,
enabled: true,
},
];
5 changes: 5 additions & 0 deletions src/OnboardingSPA/data/sitegen/homepages/1.json

Large diffs are not rendered by default.

File renamed without changes.
File renamed without changes.
File renamed without changes.
25 changes: 25 additions & 0 deletions src/OnboardingSPA/data/sitegen/homepages/homepages.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {getRandomColorPalette} from '../sitemeta/siteMeta';
import one from './1.json';
import two from './2.json';
import three from './3.json';
import four from './4.json';
const getHomepages = () => {
return [one, two, three];
}

const getRandom = ( homepage ) => {
console.log('homepage', homepage);
if ( homepage?.favorite ) {
homepage.slug = homepage.slug + '-copy'
homepage.title = homepage.title + ' Copy'
homepage.favorite = false;
homepage.color = getRandomColorPalette( homepage?.color?.slug );
return homepage;
}
four.color = getRandomColorPalette( homepage?.color?.slug );
return four;


}

export { getHomepages, getRandom };
39 changes: 39 additions & 0 deletions src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import siteMeta from './siteMeta.json';
const getSiteMeta = () => {
return siteMeta;
}

const getColorPalettes = () => {
let colorPalettes = {};
Object.keys( siteMeta.colorpalette ).forEach((colorPalette) => {
colorPalettes[colorPalette] = Object.keys(siteMeta.colorpalette[colorPalette]).map(( slug ) => {
return {
slug,
title: slug[0].toUpperCase() + slug.slice(1),
color: siteMeta.colorpalette[colorPalette][slug]
}
})
})

return colorPalettes;
}

const getRandomColorPalette = ( activeColorPaletteSlug ) => {
const colorPalettes = getColorPalettes();
console.log(colorPalettes)
let keys = Object.keys( colorPalettes );
if ( activeColorPaletteSlug ) {
keys = keys.filter(( key ) => {
return key != activeColorPaletteSlug
})
}

const rand = Math.floor( Math.random() * keys.length );
console.log(rand)
return {
slug: keys[2],
palette: colorPalettes[ keys[ 2 ] ]
}
}

export {getSiteMeta, getColorPalettes, getRandomColorPalette};
Loading

0 comments on commit 9f6ab77

Please sign in to comment.