Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Options Generating #365

Merged
merged 6 commits into from
Nov 18, 2023
Merged

Site Options Generating #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8ce2a88
Add Building Page
officiallygod Nov 15, 2023
234c407
Add Animation
officiallygod Nov 16, 2023
f44285e
Update stylesheet.scss
officiallygod Nov 16, 2023
5e7ebc2
Support to maintain state
officiallygod Nov 16, 2023
0b03525
Fix Styling and Stuff
officiallygod Nov 17, 2023
8d2cee4
Fix CSS
officiallygod Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Button } from '@wordpress/components';
import { Icon, chevronRight } from '@wordpress/icons';
import { store as nfdOnboardingStore } from '../../../store';

const NextButtonSiteGen = ( { text, className } ) => {
const NextButtonSiteGen = ( { text, className, callback = null } ) => {
const navigate = useNavigate();
const { nextStep } = useSelect( ( select ) => {
return {
Expand All @@ -19,6 +19,9 @@ const NextButtonSiteGen = ( { text, className } ) => {
className
) }
onClick={ () => {
if ( callback && typeof callback === 'function' ) {
callback();
}
if ( nextStep ) {
navigate( nextStep.path );
}
Expand Down
18 changes: 13 additions & 5 deletions src/OnboardingSPA/components/CardWithOptions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Icon, chevronRight } from '@wordpress/icons';

const CardWithOptions = ( { title, options, skip, setSelection } ) => {
const CardWithOptions = ( { title, options, skip, callback } ) => {
const buildOptions = () => {
return options.map( ( data, idx ) => {
return (
Expand All @@ -10,10 +10,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => {
tabIndex={ 0 }
className={ 'nfd-sg-card__data__option' }
onClick={ () => {
setSelection( idx );
if ( callback && typeof callback === 'function' ) {
callback( idx + 1 );
}
} }
onKeyDown={ () => {
setSelection( idx );
if ( callback && typeof callback === 'function' ) {
callback( idx + 1 );
}
} }
>
<div className={ 'nfd-sg-card__data__option__left' }>
Expand Down Expand Up @@ -48,10 +52,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => {
tabIndex={ 0 }
className={ 'nfd-sg-card__skip' }
onClick={ () => {
setSelection( -1 );
if ( callback && typeof callback === 'function' ) {
callback( -1 );
}
} }
onKeyDown={ () => {
setSelection( -1 );
if ( callback && typeof callback === 'function' ) {
callback( -1 );
}
} }
>
{ skip }
Expand Down
20 changes: 10 additions & 10 deletions src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
$background-color: #1e2327;
$background-color: var(--nfd-onboarding-admin-bar-background);

.nfd-sg-card {

Expand All @@ -8,10 +8,10 @@ $background-color: #1e2327;
border-radius: 12px;
background-color: $background-color;
width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2);
box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05);

&__title {
color: var(--nfd-onboarding-white);
color: var(--nfd-onboarding-primary);
margin: 16px;
line-height: 2;
font-size: 18px;
Expand All @@ -34,28 +34,28 @@ $background-color: #1e2327;
transition: background-color 400ms ease-in-out;

&:not(:last-child) {
border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
}

&:hover {
background-color: #262c30;
background-color: var(--nfd-onboarding-hover);
}

&__left_top {
color: var(--nfd-onboarding-white);
color: var(--nfd-onboarding-primary);
font-size: 16px;
font-weight: 500;
padding-bottom: 12px;
}

&__left_bottom {
color: var(--nfd-onboarding-white);
color: var(--nfd-onboarding-primary);
font-size: 14px;
font-weight: 300;
}

&__right {
fill: var(--nfd-onboarding-white);
fill: var(--nfd-onboarding-primary);
transition: all 200ms ease-in-out;

&:hover {
Expand All @@ -70,10 +70,10 @@ $background-color: #1e2327;
text-align: end;
margin: 0 20px 6px 20px;
transition: color 200ms ease-in-out;
color: rgba(var(--nfd-onboarding-white-rgb), 0.8);
color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);

&:hover {
color: var(--nfd-onboarding-white);
color: var(--nfd-onboarding-primary);
}
}
}
2 changes: 1 addition & 1 deletion src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const SiteGenHeader = () => {
);

const currentStepIndex = findIndex( allSteps, {
path: currentStep.path,
path: currentStep?.path,
} );
const progress = ( currentStepIndex / allSteps.length ) * 100;

Expand Down
20 changes: 19 additions & 1 deletion src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
import getContents from './contents';
import { useSelect } from '@wordpress/data';
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from '@wordpress/element';
import { store as nfdOnboardingStore } from '../../../store';

const SiteGenLoader = () => {
const SiteGenLoader = ( { autoNavigate = false } ) => {
let statusIdx = 0;
const content = getContents();
const navigate = useNavigate();
const [ percentage, setPercentage ] = useState( 0 );
const [ status, setStatus ] = useState( content.status[ statusIdx ].title );

const { nextStep } = useSelect( ( select ) => {
return {
nextStep: select( nfdOnboardingStore ).getNextStep(),
};
} );

const checkStatus = async () => {
// Make fake API Call to get the status.
if ( percentage !== 100 ) setPercentage( ( t ) => t + 10 );
Expand All @@ -15,7 +25,7 @@
useEffect( () => {
const statusTimer = setInterval( () => {
checkStatus();
statusIdx += 1;

Check warning on line 28 in src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

Assignments to the 'statusIdx' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect
if ( statusIdx === content.status.length ) statusIdx = 0;
setStatus( content.status[ statusIdx ].title );
}, 3000 );
Expand All @@ -24,6 +34,14 @@
};
}, [] );

useEffect( () => {
if ( percentage === 100 ) {
if ( nextStep && autoNavigate ) {
navigate( nextStep.path );
}
}
}, [ percentage ] );

Check warning on line 43 in src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'autoNavigate', 'navigate', and 'nextStep'. Either include them or remove the dependency array

return (
<div className={ 'nfd-sg-loader' }>
<div className={ 'nfd-sg-loader__title' }>{ content.title }</div>
Expand Down
13 changes: 9 additions & 4 deletions src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
$background-color: #1e2327;
$background-color: var(--nfd-onboarding-admin-bar-background);

.nfd-sg-loader {

Expand All @@ -8,14 +8,19 @@ $background-color: #1e2327;
border-radius: 12px;
background-color: $background-color;
width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2);
box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-black-rgb), $alpha: 0.05);

@media (max-width: #{ ($break-small) }) {
margin: 20px;
max-width: 80vw;
}

&__title {
line-height: 2;
font-size: 18px;
text-align: center;
letter-spacing: 1.5px;
color: var(--nfd-onboarding-white);
color: var(--nfd-onboarding-primary);
}

&__progress {
Expand Down Expand Up @@ -59,7 +64,7 @@ $background-color: #1e2327;
font-size: 14px;
text-align: center;
letter-spacing: 1.3px;
color: var(--nfd-onboarding-white);
color: var(--nfd-onboarding-primary);
animation: fadeInFast 3s ease-out infinite;
}
}
0 ...rdingSPA/components/TextInput/contents.js → .../TextInput/TextInputSiteBuild/contents.js
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions ...boardingSPA/components/TextInput/index.js → ...nts/TextInput/TextInputSiteBuild/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useRef, useEffect, useState, memo } from '@wordpress/element';
import getContents from './contents';

const TextInput = ( {
const TextInputSiteBuild = ( {
title,
hint,
placeholder,
Expand All @@ -17,7 +17,7 @@
textareaRef.current.style.height = height;
const scrollHeight = textareaRef.current.scrollHeight;
textareaRef.current.style.height = scrollHeight + 'px';
}, [ textValue ] );

Check warning on line 20 in src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has a missing dependency: 'height'. Either include it or remove the dependency array

const onTextChange = ( e ) => {
e.preventDefault();
Expand Down Expand Up @@ -58,5 +58,5 @@
);
};

const TextInputMemo = memo( TextInput );
export default TextInputMemo;
const TextInputSiteBuildMemo = memo( TextInputSiteBuild );
export default TextInputSiteBuildMemo;
0 ...gSPA/components/TextInput/stylesheet.scss → ...tInput/TextInputSiteBuild/stylesheet.scss
View file
Open in desktop
File renamed without changes.
5 changes: 2 additions & 3 deletions src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
$border: #d6d6d6;
$letter-spacing: 0.5px;
$selected-detail: #1de082;

Expand All @@ -9,7 +8,7 @@ $selected-detail: #1de082;

&-box {
margin-bottom: 10px;
border-bottom: 2px solid $border;
border-bottom: 2px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5);

&__field {
padding-top: 10px;
Expand All @@ -29,7 +28,7 @@ $selected-detail: #1de082;

&::placeholder {
font-weight: 100;
color: $border;
color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
}
}

Expand Down
6 changes: 3 additions & 3 deletions src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { store as coreStore } from '@wordpress/core-data';
import { useState, useEffect, useRef } from '@wordpress/element';
import getContents from './contents';
import TextInput from '../../components/TextInput';
import TextInputSiteBuild from '../../components/TextInput/TextInputSiteBuild';
import SkipButton from '../../components/SkipButton';
import MiniPreview from '../../components/MiniPreview';
import Animate from '../../components/Animate';
Expand Down Expand Up @@ -86,7 +86,7 @@
getEditedEntityRecord( 'root', 'site' );

setDefaultData();
}, [ isLoaded ] );

Check warning on line 89 in src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'currentData', 'flowData', 'getEditedEntityRecord', 'setDefaultData', and 'setOnboardingSocialData'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setDebouncedFlowData' needs the current value of 'flowData'

useEffect( () => {
const timerId = setTimeout( () => {
Expand All @@ -98,7 +98,7 @@
return () => {
clearTimeout( timerId );
};
}, [ siteTitle, siteDesc, siteLogo, socialData ] );

Check warning on line 101 in src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'createSaveData' and 'isLoaded'. Either include them or remove the dependency array

const updateCoreStore = ( siteLogoTemp, siteTitleTemp, siteDescTemp ) => {
editEntityRecord( 'root', 'site', undefined, {
Expand Down Expand Up @@ -130,7 +130,7 @@
if ( debouncedFlowData ) {
saveData();
}
}, [ debouncedFlowData ] );

Check warning on line 133 in src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'currentData', 'setCurrentOnboardingData', and 'updateCoreStore'. Either include them or remove the dependency array

return (
<Animate
Expand All @@ -142,7 +142,7 @@
<div className={ 'basic-info' }>
<div className="basic-info-form">
<div className="basic-info-form__left">
<TextInput
<TextInputSiteBuild
title={ content.siteTitle.title }
hint={ content.siteTitle.hint }
placeholder={ content.siteTitle.placeholder }
Expand All @@ -152,7 +152,7 @@
textValueSetter={ setSiteTitle }
/>

<TextInput
<TextInputSiteBuild
title={ content.siteDesc.title }
hint={ content.siteDesc.hint }
placeholder={ content.siteDesc.placeholder }
Expand Down
14 changes: 12 additions & 2 deletions src/OnboardingSPA/steps/SiteGen/Building/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useDispatch } from '@wordpress/data';
import { store as nfdOnboardingStore } from '../../../store';
import { HEADER_SITEGEN } from '../../../../constants';

import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';

const SiteGenBuilding = () => {
const {
Expand All @@ -27,7 +27,17 @@ const SiteGenBuilding = () => {
isCentered
className="nfd-onboarding-step--site-gen__building"
>
<SiteGenPlaceholder heading={ 'Building Previews' } />
<div className="site-gen__building_skimmer">
<div className="site-gen__building_skimmer--main site-gen__building_skimmer--header"></div>
<div className="site-gen__building_skimmer--main site-gen__building_skimmer--body"></div>
<div className="site-gen__building_skimmer--footer">
<div className="site-gen__building_skimmer--main site-gen__building_skimmer--footer_left"></div>
<div className="site-gen__building_skimmer--main site-gen__building_skimmer--footer_right"></div>
</div>
</div>
<div className="site-gen__building_loader__overlay">
<SiteGenLoader autoNavigate={ true } />
</div>
</CommonLayout>
);
};
Expand Down
67 changes: 67 additions & 0 deletions src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
@property --angle {
inherits: true;
syntax: "<angle>";
initial-value: 90deg;
}

@keyframes borderRotate {

100% {
--angle: 360deg;
}
}

.nfd-onboarding-step--site-gen__building {
margin: 20px;
padding: 20px;
position: relative;
}

.site-gen__building {

&_skimmer {

&--main {
margin-bottom: 30px;
background: rgba(var(--nfd-onboarding-primary-rgb), 0.05);
box-shadow: 0 4px 30px rgba(var(--nfd-onboarding-secondary-rgb), 0.1);
animation: borderRotate 3500ms infinite forwards;
border: 0.25px solid rgba(var(--nfd-onboarding-secondary-rgb), 0.26);
border-image: conic-gradient(from var(--angle), rgba(var(--nfd-onboarding-secondary-rgb), 0.26) calc(var(--angle) + 0.5deg), rgba(var(--nfd-onboarding-shimmer-color), 0.5) calc(var(--angle) + 1deg)) 30;
}

&--header {
height: 80px;
width: 90vw;
}

&--body {
width: 90vw;
height: 500px;
}

&--footer {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;

&_left {
width: 55vw;
height: 300px;
}

&_right {
width: 33vw;
height: 300px;
}
}
}

&_loader__overlay {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
}
Loading