diff --git a/fetools-app/src/OptionsBox.jsx b/fetools-app/src/OptionsBox.jsx deleted file mode 100644 index 14822b09..00000000 --- a/fetools-app/src/OptionsBox.jsx +++ /dev/null @@ -1,222 +0,0 @@ -import optionMenu from "../../assets/tune.svg"; -import addbookmark from "../../assets/bookmark_add.svg"; -import share from "../../assets/share.svg"; -import opacityIcon from "../../assets/opacity.svg"; -import doubleArrow from "../../assets/doubleArrow.svg"; -import zoom from "../../assets/pan_zoom.svg"; -import blur from "../../assets/blur.svg"; -import addShadow from "../../assets/ev_shadow_add.svg"; -import tinycolor from "tinycolor2"; -import { ShadowInput } from "./ShadowInput"; - -import { - colorChanger, - opacityChanger, - shadowPropertyValue, - newShadow, - switchShadow, - removeShadow, -} from "./ShadowGeneratorFN"; - -const OptionsBox = ({ - ShadowsStyles, - setShadowsStyles, - numOfShadows, - setNumOfShadows, - setActiveShadow, - ActiveShadow, - setRemoveShadow, -}) => { - // debugger - let color = tinycolor(ShadowsStyles[ActiveShadow].shadowColor).toHexString(); - - // xl:aspect-square flex xl:max-h-[457px] h-full flex-col md:w-full flex-1 gap-y-6 xl:mx-12 rounded-r-sm - return ( -
-
- - Option Menu -

Options

- - - - book mark { - localStorage.removeItem("ShadowStyle"); - localStorage.setItem( - "ShadowStyle", - JSON.stringify(ShadowsStyles) - ); - }} - /> - share Icon - -
- -
-
- { - colorChanger( - e, - setShadowsStyles, - ShadowsStyles, - ActiveShadow, - false - ); - }} - /> - { - colorChanger(e, setShadowsStyles, ShadowsStyles, ActiveShadow); - }} - /> -
- - -
- Opacity -
- Opacity Icon - {ShadowsStyles[ActiveShadow].opacity}% -
-
- { - opacityChanger(e, setShadowsStyles, ShadowsStyles, ActiveShadow); - }} - /> - -
- -
- - - -
- -
- - - -
- -
-
- {ShadowsStyles.map((current, idx) => { - return ( -
{ - switchShadow(e, setActiveShadow, idx, ActiveShadow); - }} - className={` ${ - ActiveShadow === idx ? "bg-black text-white" : "" - } w-8 h-8 border cursor-pointer border-[color:var(--Design-Document-Outlines,#999)] border-solid rounded-sm flex items-center justify-center`} - > - {idx + 1} -
- ); - })} - - - - -
-
-
- ); -}; - -export default OptionsBox; diff --git a/fetools-app/src/ShadowGenerator.jsx b/fetools-app/src/ShadowGenerator.jsx deleted file mode 100644 index 67a28c52..00000000 --- a/fetools-app/src/ShadowGenerator.jsx +++ /dev/null @@ -1,142 +0,0 @@ -import ToolHeading from "../components/ToolsLayout/ToolHeading"; -import ToolHeaderSection from "../components/ToolsLayout/ToolHeaderSection"; -import OptionsBox from "../components/ShadowGeneratorComponents/OptionsBox"; -import CodeBlock from "../components/CodeBlock"; -import { useState, useRef, useEffect } from "react"; -import { - generateCssRule, - updateId, -} from "../components/ShadowGeneratorComponents/ShadowGeneratorFN"; -import PageSection from "../components/PageLayout/PageSection"; -import TabSwitcher from "../components/TabSwitcher"; -import GoDeeper from "../components/ToolsLayout/GoDeeper"; - - - - - -const ShadowGenerator = () => { - const [firstRender, setFirstRender] = useState(false); - const [ShadowsStyles, setShadowsStyles] = useState([ - { - id: 0, - shadowColor: "rgba(51, 51, 51, 25%)", - opacity: 30, - horizontalOffset: 10, - verticalOffset: 10, - spread: 0, - blur: 5, - inset: false, - units: { - horizontalOffset: "px", - verticalOffset: "px", - spread: "px", - blur: "px", - }, - }, - ]); - const [currentStyle, setCurrentStyle] = useState([]); - const [ActiveShadow, setActiveShadow] = useState(0); - const [numOfShadows, setNumOfShadows] = useState(1); - const [removeShadow, setRemoveShadow] = useState(false); - - - const box = useRef(); - - useEffect(() => { - const applyBoxShadow = (styles) => { - const cssRule = generateCssRule(styles); - box.current.style.boxShadow = cssRule.join(", "); - setCurrentStyle(cssRule); - }; - - if (firstRender && localStorage.getItem("ShadowStyle")) { - const localStorageValue = JSON.parse(localStorage.getItem("ShadowStyle")); - const newState = localStorageValue.filter((obj) => obj.id !== 0); - setShadowsStyles(newState); - setShadowsStyles(localStorageValue); - setFirstRender(false); - } - - if (removeShadow) { - updateId(ShadowsStyles, setShadowsStyles, setRemoveShadow); - } - - console.log(ShadowsStyles); - - applyBoxShadow(ShadowsStyles); - }, [ShadowsStyles, ActiveShadow]); - - return ( - <> - - - - {/* className="flex max-w flex-col-reverse bg-red-800 lg:flex-row justify-center gap-3 mx-6 md:mx-12 rounded-sm xl:border border-[color:var(--Design-Document-Outlines,#999)] border-solid" */} - -
-
-
-
- -
- - - - - - - - - - - - - - ); -}; - -export default ShadowGenerator; diff --git a/fetools-app/src/ShadowInput.jsx b/fetools-app/src/ShadowInput.jsx deleted file mode 100644 index eaddad2a..00000000 --- a/fetools-app/src/ShadowInput.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import { shadowPropertyValue, unitChanger } from "./ShadowGeneratorFN"; -import { useState } from "react"; - -export const ShadowInput = ({ - label, - iconSrc, - prop, - setShadowsStyles, - ShadowsStyles, - ActiveShadow, - inset = false, - range = { min: 0, max: 0 }, -}) => { - const dropDownOptions = ["px", "em", "rem"]; - let unit = ShadowsStyles[ActiveShadow][prop] + ShadowsStyles[ActiveShadow].units[prop] - const [activeUnit, setActiveUnit] = useState("px") - - return ( - - ); -}; diff --git a/fetools-app/src/assets/arrow-up.svg b/fetools-app/src/assets/arrow-up.svg deleted file mode 100644 index 805b2d95..00000000 --- a/fetools-app/src/assets/arrow-up.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/fetools-app/src/assets/blur.svg b/fetools-app/src/assets/blur.svg deleted file mode 100644 index 07522ee6..00000000 --- a/fetools-app/src/assets/blur.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/bookmark_add.svg b/fetools-app/src/assets/bookmark_add.svg deleted file mode 100644 index 11d9d03d..00000000 --- a/fetools-app/src/assets/bookmark_add.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/delete.svg b/fetools-app/src/assets/delete.svg deleted file mode 100644 index c4cfb590..00000000 --- a/fetools-app/src/assets/delete.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/fetools-app/src/assets/doubleArrow.svg b/fetools-app/src/assets/doubleArrow.svg deleted file mode 100644 index ce823d4a..00000000 --- a/fetools-app/src/assets/doubleArrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/downArrow.svg b/fetools-app/src/assets/downArrow.svg deleted file mode 100644 index 74021b71..00000000 --- a/fetools-app/src/assets/downArrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/ev_shadow_add.svg b/fetools-app/src/assets/ev_shadow_add.svg deleted file mode 100644 index 2589b3de..00000000 --- a/fetools-app/src/assets/ev_shadow_add.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/hamburger.svg b/fetools-app/src/assets/hamburger.svg deleted file mode 100644 index 8ee5e0c1..00000000 --- a/fetools-app/src/assets/hamburger.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/fetools-app/src/assets/opacity.svg b/fetools-app/src/assets/opacity.svg deleted file mode 100644 index cf9f1f4a..00000000 --- a/fetools-app/src/assets/opacity.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/pan_zoom.svg b/fetools-app/src/assets/pan_zoom.svg deleted file mode 100644 index 1e387684..00000000 --- a/fetools-app/src/assets/pan_zoom.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/share.svg b/fetools-app/src/assets/share.svg deleted file mode 100644 index 7de1664b..00000000 --- a/fetools-app/src/assets/share.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/fetools-app/src/assets/tune.svg b/fetools-app/src/assets/tune.svg deleted file mode 100644 index b60b1035..00000000 --- a/fetools-app/src/assets/tune.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/fetools-app/src/assets/visibility.svg b/fetools-app/src/assets/visibility.svg deleted file mode 100644 index 6a6ff0e2..00000000 --- a/fetools-app/src/assets/visibility.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/fetools-app/src/assets/x-solid.svg b/fetools-app/src/assets/x-solid.svg deleted file mode 100644 index d91e9779..00000000 --- a/fetools-app/src/assets/x-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/fetools-app/src/components/Icon.jsx b/fetools-app/src/components/Icon.jsx index 315e8550..c7c63c01 100644 --- a/fetools-app/src/components/Icon.jsx +++ b/fetools-app/src/components/Icon.jsx @@ -6,6 +6,7 @@ export default function Icon({ type = 'material', className = '', onClick = () => {}, + ...props }) { const classNames = `icon select-none ${className} ${ type === 'material' ? 'material-symbols-rounded' : '' @@ -21,6 +22,7 @@ export default function Icon({ lineHeight: `1`, }} onClick={onClick} + {...props} > {type.toLowerCase() === 'svg' ? : name} diff --git a/fetools-app/src/components/ShadowCreator/OptionsBox.jsx b/fetools-app/src/components/ShadowCreator/OptionsBox.jsx new file mode 100644 index 00000000..30b9cc5c --- /dev/null +++ b/fetools-app/src/components/ShadowCreator/OptionsBox.jsx @@ -0,0 +1,191 @@ +import tinycolor from 'tinycolor2'; +import { ShadowInput } from './ShadowInput'; + +import { + colorChanger, + shadowPropertyValue, + newShadow, + switchShadow, + removeShadow, +} from './ShadowCreatorFN'; +import { ToolPane } from '../ToolsLayout/Sections'; +import Icon from '../Icon'; + +const OptionsBox = ({ + ShadowsStyles, + setShadowsStyles, + numOfShadows, + setNumOfShadows, + setActiveShadow, + ActiveShadow, + setRemoveShadow, +}) => { + // debugger + let color = tinycolor(ShadowsStyles[ActiveShadow].shadowColor).toHexString(); + + return ( + +
+
+
+ { + colorChanger( + e, + setShadowsStyles, + ShadowsStyles, + ActiveShadow, + false + ); + }} + /> + { + colorChanger(e, setShadowsStyles, ShadowsStyles, ActiveShadow); + }} + /> +
+
+ + + + + + + + + + + +
+ + Inset + { + shadowPropertyValue( + e, + setShadowsStyles, + ShadowsStyles, + 'inset', + ActiveShadow + ); + }} + /> + +
+
+
+
+
+ {ShadowsStyles.map((current, idx) => { + return ( +
{ + switchShadow(e, setActiveShadow, idx, ActiveShadow); + }} + className={` ${ + ActiveShadow === idx ? 'bg-accent text-white' : '' + } flex h-8 w-8 cursor-pointer select-none items-center justify-center rounded-[.25rem] border border-solid border-[#999999)]`} + > + {idx + 1} +
+ ); + })} +
+ + +
+ + {numOfShadows > 1 && ( + + )} +
+ + ); +}; + +export default OptionsBox; diff --git a/fetools-app/src/components/ShadowGeneratorComponents/ShadowGeneratorFN.js b/fetools-app/src/components/ShadowCreator/ShadowCreatorFN.js similarity index 85% rename from fetools-app/src/components/ShadowGeneratorComponents/ShadowGeneratorFN.js rename to fetools-app/src/components/ShadowCreator/ShadowCreatorFN.js index 84d9b472..afe0db62 100644 --- a/fetools-app/src/components/ShadowGeneratorComponents/ShadowGeneratorFN.js +++ b/fetools-app/src/components/ShadowCreator/ShadowCreatorFN.js @@ -1,7 +1,7 @@ -import { getRandomColor } from "../ColorGradient/ColorGradientUtils"; -import tinycolor from "tinycolor2"; +import { getRandomColor } from '../ColorGradient/ColorGradientUtils'; +import tinycolor from 'tinycolor2'; -const generateCssRule = (ShadowsStyles) => { +const generateCssRule = ShadowsStyles => { let color; return ShadowsStyles.map( ({ @@ -21,7 +21,7 @@ const generateCssRule = (ShadowsStyles) => { spread = spread + units.spread; return `${ - inset ? "inset" : "" + inset ? 'inset' : '' } ${horizontalOffset} ${verticalOffset} ${blur} ${spread} ${color.toString()}`; } ); @@ -39,14 +39,14 @@ const colorChanger = ( let color = event.target.value; let newState = [...ShadowsStyles]; - if (color[0] === "#") { + if (color[0] === '#') { newState[ActiveShadow].shadowColor = color; - regexColorHexadecimal.test(color) ? setShadowsStyles(newState) : ""; + regexColorHexadecimal.test(color) ? setShadowsStyles(newState) : ''; } else { - addSharp ? (color = "#" + color) : ""; + addSharp ? (color = '#' + color) : ''; newState[ActiveShadow].shadowColor = color; - regexColorHexadecimal.test(color) ? setShadowsStyles(newState) : ""; + regexColorHexadecimal.test(color) ? setShadowsStyles(newState) : ''; } }; @@ -68,7 +68,7 @@ const shadowPropertyValue = ( let newState = [...ShadowsStyles]; newState[ActiveShadow][prop] = - prop === "inset" ? e.target.checked : Number(e.target.value); + prop === 'inset' ? e.target.checked : Number(e.target.value); setShadowsStyles(newState); }; @@ -96,10 +96,10 @@ const newShadow = ( blur: 10, inset: false, units: { - horizontalOffset: "px", - verticalOffset: "px", - spread: "px", - blur: "px", + horizontalOffset: 'px', + verticalOffset: 'px', + spread: 'px', + blur: 'px', }, }, ]; @@ -120,7 +120,7 @@ const removeShadow = ( setRemoveShadow ) => { if (ShadowsStyles.length > 1) { - const newState = ShadowsStyles.filter((obj) => obj.id !== ActiveShadow); + const newState = ShadowsStyles.filter(obj => obj.id !== ActiveShadow); setShadowsStyles(newState); setNumOfShadows(numOfShadows - 1); setActiveShadow(ActiveShadow === 0 ? 0 : ActiveShadow - 1); @@ -160,24 +160,24 @@ const unitChanger = ( const unitConverterShadow = (value, originalUnit, unitToConvert, baseSize) => { switch (originalUnit) { - case "px": - if (unitToConvert === "em") { + case 'px': + if (unitToConvert === 'em') { return value / baseSize; - } else if (unitToConvert === "rem") { + } else if (unitToConvert === 'rem') { return value / baseSize; } break; - case "em": - if (unitToConvert === "px") { + case 'em': + if (unitToConvert === 'px') { return value * baseSize; - } else if (unitToConvert === "rem") { + } else if (unitToConvert === 'rem') { return value / baseSize; } break; - case "rem": - if (unitToConvert === "px") { + case 'rem': + if (unitToConvert === 'px') { return value * baseSize; - } else if (unitToConvert === "em") { + } else if (unitToConvert === 'em') { return value * baseSize; } break; @@ -196,11 +196,11 @@ const updateId = (ShadowsStyles, setShadowsStyles, setRemoveShadow) => { setRemoveShadow(false); }; -const combineShadows = (shadowArray) => { +const combineShadows = shadowArray => { let combinedObject = {}; - shadowArray.forEach((shadow) => { - Object.keys(shadow).forEach((property) => { + shadowArray.forEach(shadow => { + Object.keys(shadow).forEach(property => { if (combinedObject.hasOwnProperty(property)) { if (!Array.isArray(combinedObject[property])) { combinedObject[property] = [combinedObject[property]]; @@ -215,10 +215,10 @@ const combineShadows = (shadowArray) => { return combinedObject; }; -const splitCombinedObject = (combinedObject) => { +const splitCombinedObject = combinedObject => { let shadowArray = []; - Object.keys(combinedObject).forEach((property) => { + Object.keys(combinedObject).forEach(property => { if (Array.isArray(combinedObject[property])) { combinedObject[property].forEach((value, index) => { if (!shadowArray[index]) { diff --git a/fetools-app/src/components/ShadowCreator/ShadowInput.jsx b/fetools-app/src/components/ShadowCreator/ShadowInput.jsx new file mode 100644 index 00000000..dce644bc --- /dev/null +++ b/fetools-app/src/components/ShadowCreator/ShadowInput.jsx @@ -0,0 +1,75 @@ +import Icon from '../Icon'; +import { shadowPropertyValue, unitChanger } from './ShadowCreatorFN'; +import { useState } from 'react'; + +export const ShadowInput = ({ + label, + icon, + prop, + setShadowsStyles, + ShadowsStyles, + ActiveShadow, + range = { min: 0, max: 100 }, + unitOptions = ['px', 'em', 'rem'], +}) => { + let unit = + ShadowsStyles[ActiveShadow][prop] + ShadowsStyles[ActiveShadow].units[prop]; + const [activeUnit, setActiveUnit] = useState('px'); + + if (activeUnit === 'rem' || activeUnit === 'em') { + range.min /= 16; + range.max /= 16; + } + + return ( + + ); +}; diff --git a/fetools-app/src/components/ShadowGeneratorComponents/OptionsBox.jsx b/fetools-app/src/components/ShadowGeneratorComponents/OptionsBox.jsx deleted file mode 100644 index f750e08d..00000000 --- a/fetools-app/src/components/ShadowGeneratorComponents/OptionsBox.jsx +++ /dev/null @@ -1,227 +0,0 @@ -import optionMenu from "../../assets/tune.svg"; -import addbookmark from "../../assets/bookmark_add.svg"; -import share from "../../assets/share.svg"; -import opacityIcon from "../../assets/opacity.svg"; -import doubleArrow from "../../assets/doubleArrow.svg"; -import zoom from "../../assets/pan_zoom.svg"; -import blur from "../../assets/blur.svg"; -import addShadow from "../../assets/ev_shadow_add.svg"; -import tinycolor from "tinycolor2"; -import { ShadowInput } from "./ShadowInput"; - -import { - colorChanger, - opacityChanger, - shadowPropertyValue, - newShadow, - switchShadow, - removeShadow, - ShareLink, -} from "./ShadowGeneratorFN"; - -const OptionsBox = ({ - ShadowsStyles, - setShadowsStyles, - numOfShadows, - setNumOfShadows, - setActiveShadow, - ActiveShadow, - setRemoveShadow, - searchParams, - setSearchParams -}) => { - // debugger - let color = tinycolor(ShadowsStyles[ActiveShadow].shadowColor).toHexString(); - - // xl:aspect-square flex xl:max-h-[457px] h-full flex-col md:w-full flex-1 gap-y-6 xl:mx-12 rounded-r-sm - return ( -
-
- - Option Menu -

Options

- - - - book mark { - localStorage.removeItem("ShadowStyle"); - localStorage.setItem( - "ShadowStyle", - JSON.stringify(ShadowsStyles) - ); - }} - /> - share Icon {ShareLink(searchParams,setSearchParams,ShadowsStyles)}} - - /> - -
- -
-
- { - colorChanger( - e, - setShadowsStyles, - ShadowsStyles, - ActiveShadow, - false - ); - }} - /> - { - colorChanger(e, setShadowsStyles, ShadowsStyles, ActiveShadow); - }} - /> -
- - -
- Opacity -
- Opacity Icon - {ShadowsStyles[ActiveShadow].opacity}% -
-
- { - opacityChanger(e, setShadowsStyles, ShadowsStyles, ActiveShadow); - }} - /> - -
- -
- - - -
- -
- - - -
- -
-
- {ShadowsStyles.map((current, idx) => { - return ( -
{ - switchShadow(e, setActiveShadow, idx, ActiveShadow); - }} - className={` ${ - ActiveShadow === idx ? "bg-black text-white" : "" - } w-8 h-8 border cursor-pointer border-[color:var(--Design-Document-Outlines,#999)] border-solid rounded-sm flex items-center justify-center`} - > - {idx + 1} -
- ); - })} - - - - -
-
-
- ); -}; - -export default OptionsBox; diff --git a/fetools-app/src/components/ShadowGeneratorComponents/ShadowInput.jsx b/fetools-app/src/components/ShadowGeneratorComponents/ShadowInput.jsx deleted file mode 100644 index eaddad2a..00000000 --- a/fetools-app/src/components/ShadowGeneratorComponents/ShadowInput.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import { shadowPropertyValue, unitChanger } from "./ShadowGeneratorFN"; -import { useState } from "react"; - -export const ShadowInput = ({ - label, - iconSrc, - prop, - setShadowsStyles, - ShadowsStyles, - ActiveShadow, - inset = false, - range = { min: 0, max: 0 }, -}) => { - const dropDownOptions = ["px", "em", "rem"]; - let unit = ShadowsStyles[ActiveShadow][prop] + ShadowsStyles[ActiveShadow].units[prop] - const [activeUnit, setActiveUnit] = useState("px") - - return ( - - ); -}; diff --git a/fetools-app/src/pages/ColorGradient.jsx b/fetools-app/src/pages/ColorGradient.jsx index d903559b..fbc46fbd 100644 --- a/fetools-app/src/pages/ColorGradient.jsx +++ b/fetools-app/src/pages/ColorGradient.jsx @@ -1,19 +1,29 @@ -import { useState, useRef, useEffect } from "react"; - -import { getRandomColor, getHexString, isValidHexColor, getRgb } from "../components/ColorGradient/ColorGradientUtils"; - -import useToastState from "../hooks/useToastState"; -import useExpander from "../hooks/useExpander"; - -import ColorGradientSlider from "../components/ColorGradient/ColorGradientSlider"; -import ToolHeading from "../components/ToolsLayout/ToolHeading"; -import ColorGradientInterface from "../components/ColorGradient/ColorGradientInterface"; -import CodeBlock from "../components/CodeBlock"; -import GoDeeper from "../components/ToolsLayout/GoDeeper"; -import Toast from "../components/Toast"; -import { ToolPane, ToolPreviewPane, ToolSection, ToolSectionColumns } from "../components/ToolsLayout/Sections"; -import ToolMain from "../components/ToolsLayout/ToolMain"; -import TabSwitcher from "../components/TabSwitcher"; +import { useState, useRef, useEffect } from 'react'; + +import { + getRandomColor, + getHexString, + isValidHexColor, + getRgb, +} from '../components/ColorGradient/ColorGradientUtils'; + +import useToastState from '../hooks/useToastState'; +import useExpander from '../hooks/useExpander'; + +import ColorGradientSlider from '../components/ColorGradient/ColorGradientSlider'; +import ToolHeading from '../components/ToolsLayout/ToolHeading'; +import ColorGradientInterface from '../components/ColorGradient/ColorGradientInterface'; +import CodeBlock from '../components/CodeBlock'; +import GoDeeper from '../components/ToolsLayout/GoDeeper'; +import Toast from '../components/Toast'; +import { + ToolPane, + ToolPreviewPane, + ToolSection, + ToolSectionColumns, +} from '../components/ToolsLayout/Sections'; +import ToolMain from '../components/ToolsLayout/ToolMain'; +import TabSwitcher from '../components/TabSwitcher'; export default function ColorGradient() { const containerRef = useRef(); @@ -35,111 +45,116 @@ export default function ColorGradient() { ]); const [currentKnob, setCurrentKnob] = useState(false); - + const [inputValue, setInputValue] = useState({ color: getHexString(gradientColors[0].colorStr), position: gradientColors[0].value, rotation: 25, - type: 'Linear' + type: 'Linear', }); - const [codeBlockRules, setCodeBlockRules] = useState( - { - background: generateGradientRule(colorsArr) - } - ) + const [codeBlockRules, setCodeBlockRules] = useState({ + background: generateGradientRule(colorsArr), + }); const [isExpanded, toggleIsExpanded] = useExpander(); const toastState = useToastState(); - useEffect(()=>{ - if(!currentKnob){ - setCurrentKnob(containerRef.current.querySelector('.isActive')) + useEffect(() => { + if (!currentKnob) { + setCurrentKnob(containerRef.current.querySelector('.isActive')); } - },[currentKnob]) + }, [currentKnob]); + + useEffect(() => { + const gradientRuleSlider = generateGradientRule(gradientColors, 90, true); + const gradientRule = generateGradientRule(gradientColors); - useEffect(()=>{ - const gradientRuleSlider = generateGradientRule(gradientColors, 90, true) - const gradientRule = generateGradientRule(gradientColors) - - updateCSSValues('.gradientSlider', 'background', gradientRuleSlider) - updateCSSValues('.gradient', 'background', gradientRule) - setCodeBlockRules({...codeBlockRules, background: getCssCode()}) - },[inputValue, gradientColors]) + updateCSSValues('.gradientSlider', 'background', gradientRuleSlider); + updateCSSValues('.gradient', 'background', gradientRule); + setCodeBlockRules({ ...codeBlockRules, background: getCssCode() }); + }, [inputValue, gradientColors]); return ( <> - + - - + +
- {}} - shareCallback={() => {}}> + {}} + shareCallback={() => {}} + > + inputValue={inputValue} + setInputValue={setInputValue} + handleColorInputChange={handleColorInputChange} + handlePositionInputChange={handlePositionInputChange} + handleRotationInputChange={handleRotationInputChange} + updateValuesOnBlur={updateValuesOnBlur} + gradientColors={gradientColors} + generateGradientRule={generateGradientRule} + updateCSSValues={updateCSSValues} + onClickRandom={onClickRandom} + /> - - - - - - - - - - - - - - - + + + + + + + + + + + + ); @@ -153,46 +168,47 @@ export default function ColorGradient() { setInputValue({ ...inputValue, color: newColor }); // Update input value if (isValidHexColor(newColor)) { - handleColorChange(newColor); // Pass the new color to the parent component + handleColorChange(newColor); // Pass the new color to the parent component } - } function handleColorChange(newColor) { // Assuming updatedColors is an array with two color values const newColorsArr = [...colorsArr]; - const newGradientColors = [...gradientColors] + const newGradientColors = [...gradientColors]; if (!currentKnob) { newColorsArr[0] = getRgb(newColor); - newGradientColors[0] = {...newColorsArr[0], value: 0} - + newGradientColors[0] = { ...newColorsArr[0], value: 0 }; + setColorsArr(newColorsArr); - setGradientColors(newGradientColors) + setGradientColors(newGradientColors); return; } newColorsArr[currentKnob.id] = getRgb(newColor); // Update the color at the current knob index - newGradientColors[currentKnob.id] = {...newColorsArr[currentKnob.id], value: currentKnob.value}; // Update the color at the current knob index + newGradientColors[currentKnob.id] = { + ...newColorsArr[currentKnob.id], + value: currentKnob.value, + }; // Update the color at the current knob index setColorsArr(newColorsArr); setGradientColors(newGradientColors); } - function handlePositionInputChange(evt){ - - const newValue = parseInt(evt.target.value) + function handlePositionInputChange(evt) { + const newValue = parseInt(evt.target.value); - currentKnob.value = newValue - gradientColors[0].value = newValue - inputValue.position = newValue + currentKnob.value = newValue; + gradientColors[0].value = newValue; + inputValue.position = newValue; - setGradientColors([...gradientColors]) + setGradientColors([...gradientColors]); } - function handleRotationInputChange(evt){ - inputValue.rotation = parseInt(evt.target.value) + function handleRotationInputChange(evt) { + inputValue.rotation = parseInt(evt.target.value); - setInputValue({...inputValue, rotation: parseInt(evt.target.value)}) + setInputValue({ ...inputValue, rotation: parseInt(evt.target.value) }); } function handleSetInputValue(newValues) { @@ -200,43 +216,56 @@ export default function ColorGradient() { color: getHexString(newValues.color), position: newValues.position, rotation: newValues.rotation, - type: newValues.type - }) + type: newValues.type, + }); } - function updateValuesOnBlur(){ - setInputValue({...inputValue}) + function updateValuesOnBlur() { + setInputValue({ ...inputValue }); } - function generateGradientRule(colorsArr, newRotation=null, isSlider) { - - const rotationValue = newRotation||(parseInt(inputValue.rotation)*3.6) - const type = inputValue.type - - const sortedColors = [...colorsArr] - sortedColors.sort(( {value: color1Value}, {value: color2Value} ) => color1Value - color2Value) - - const newColorObject = sortedColors.map(({r,g,b,colorStr})=>({r,g,b,colorStr})) - - const isColorsArrSimilarToSorted = colorsArr.every(({colorStr}, idx)=>( - colorStr === newColorObject[idx].colorStr - )) - - if(!isColorsArrSimilarToSorted){ - setColorsArr(sortedColors.map(({r,g,b,colorStr})=>({r,g,b,colorStr}))) + function generateGradientRule(colorsArr, newRotation = null, isSlider) { + const rotationValue = newRotation || parseInt(inputValue.rotation) * 3.6; + const type = inputValue.type; + + const sortedColors = [...colorsArr]; + sortedColors.sort( + ({ value: color1Value }, { value: color2Value }) => + color1Value - color2Value + ); + + const newColorObject = sortedColors.map(({ r, g, b, colorStr }) => ({ + r, + g, + b, + colorStr, + })); + + const isColorsArrSimilarToSorted = colorsArr.every( + ({ colorStr }, idx) => colorStr === newColorObject[idx].colorStr + ); + + if (!isColorsArrSimilarToSorted) { + setColorsArr( + sortedColors.map(({ r, g, b, colorStr }) => ({ r, g, b, colorStr })) + ); } - const colors = sortedColors.map(({colorStr,value}) => (`${colorStr} ${value}%`)); + const colors = sortedColors.map( + ({ colorStr, value }) => `${colorStr} ${value}%` + ); - if(type==='Radial' && !isSlider){ + if (type === 'Radial' && !isSlider) { const gradientRule = `${type}-gradient(${colors.join(', ')})`; return gradientRule; } - const gradientRule = `linear-gradient(${rotationValue}deg, ${colors.join(', ')})`; + const gradientRule = `linear-gradient(${rotationValue}deg, ${colors.join( + ', ' + )})`; return gradientRule; - } + } function updateCSSValues(cssClassName, propertyName, newValue) { const element = containerRef.current.querySelector(cssClassName); @@ -244,24 +273,25 @@ export default function ColorGradient() { element.style[propertyName] = newValue; } - function onClickRandom(){ - const newColorArr = [getRandomColor(), getRandomColor()] - setColorsArr(newColorArr) + function onClickRandom() { + const newColorArr = [getRandomColor(), getRandomColor()]; + setColorsArr(newColorArr); setGradientColors([ - { - ...newColorArr[0], - value: 0 - }, - { - ...newColorArr[1], - value: 100 - }]) + { + ...newColorArr[0], + value: 0, + }, + { + ...newColorArr[1], + value: 100, + }, + ]); } - function getCssCode(){ - const currentStyle = containerRef.current.querySelector('.gradient').style.background - - return currentStyle - } -} + function getCssCode() { + const currentStyle = + containerRef.current.querySelector('.gradient').style.background; + return currentStyle; + } +} diff --git a/fetools-app/src/pages/ShadowCreator.jsx b/fetools-app/src/pages/ShadowCreator.jsx new file mode 100644 index 00000000..a2b18728 --- /dev/null +++ b/fetools-app/src/pages/ShadowCreator.jsx @@ -0,0 +1,171 @@ +// React +import { useState, useRef, useEffect } from 'react'; + +// Layout +import { + ToolPreviewPane, + ToolSection, + ToolSectionColumns, +} from '../components/ToolsLayout/Sections'; +import ToolMain from '../components/ToolsLayout/ToolMain'; +import ToolHeading from '../components/ToolsLayout/ToolHeading'; +import GoDeeper from '../components/ToolsLayout/GoDeeper'; + +// Global Components +import TabSwitcher from '../components/TabSwitcher'; +import CodeBlock from '../components/CodeBlock'; + +// Expander +import useExpander from '../hooks/useExpander'; + +// Toast +import Toast from '../components/Toast'; +import useToastState from '../hooks/useToastState'; + +// Shadow Creator Components +import OptionsBox from '../components/ShadowCreator/OptionsBox'; +import { + generateCssRule, + updateId, +} from '../components/ShadowCreator/ShadowCreatorFN'; + +const ShadowCreator = () => { + const [firstRender, setFirstRender] = useState(false); + const [ShadowsStyles, setShadowsStyles] = useState([ + { + id: 0, + shadowColor: 'rgba(51, 51, 51, 25%)', + opacity: 30, + horizontalOffset: 10, + verticalOffset: 10, + spread: 0, + blur: 5, + inset: false, + units: { + opacity: '%', + horizontalOffset: 'px', + verticalOffset: 'px', + spread: 'px', + blur: 'px', + }, + }, + ]); + const [currentStyle, setCurrentStyle] = useState([]); + const [ActiveShadow, setActiveShadow] = useState(0); + const [numOfShadows, setNumOfShadows] = useState(1); + const [removeShadow, setRemoveShadow] = useState(false); + + const toastState = useToastState(); + const [isExpanded, toggleIsExpanded] = useExpander(); + + const box = useRef(); + + useEffect(() => { + const applyBoxShadow = styles => { + const cssRule = generateCssRule(styles); + box.current.style.boxShadow = cssRule.join(', '); + setCurrentStyle(cssRule); + }; + + if (firstRender && localStorage.getItem('ShadowStyle')) { + const localStorageValue = JSON.parse(localStorage.getItem('ShadowStyle')); + const newState = localStorageValue.filter(obj => obj.id !== 0); + setShadowsStyles(newState); + setShadowsStyles(localStorageValue); + setFirstRender(false); + } + + if (removeShadow) { + updateId(ShadowsStyles, setShadowsStyles, setRemoveShadow); + } + + applyBoxShadow(ShadowsStyles); + }, [ShadowsStyles, ActiveShadow]); + + return ( + + + + + + +
+
+
+ + + + + + + + + + + + + + ); +}; + +export default ShadowCreator; diff --git a/fetools-app/src/pages/ShadowGenerator.jsx b/fetools-app/src/pages/ShadowGenerator.jsx deleted file mode 100644 index 3de22f64..00000000 --- a/fetools-app/src/pages/ShadowGenerator.jsx +++ /dev/null @@ -1,159 +0,0 @@ -import ToolHeading from "../components/ToolsLayout/ToolHeading"; -import ToolHeaderSection from "../components/ToolsLayout/ToolHeaderSection"; -import OptionsBox from "../components/ShadowGeneratorComponents/OptionsBox"; -import CodeBlock from "../components/CodeBlock"; -import Toast from "../components/Toast"; -import { useState, useRef, useEffect } from "react"; -import { - generateCssRule, - updateId -} from "../components/ShadowGeneratorComponents/ShadowGeneratorFN"; -import PageSection from "../components/PageLayout/PageSection"; -import TabSwitcher from "../components/TabSwitcher"; -import GoDeeper from "../components/ToolsLayout/GoDeeper"; -import { useSearchParams } from "react-router-dom"; -import useToastState from "../hooks/useToastState"; - -const ShadowGenerator = () => { - const [firstRender, setFirstRender] = useState(false); - const [ShadowsStyles, setShadowsStyles] = useState([ - { - id: 0, - shadowColor: "rgba(51, 51, 51, 25%)", - opacity: 30, - horizontalOffset: 10, - verticalOffset: 10, - spread: 0, - blur: 5, - inset: false, - units: { - horizontalOffset: "px", - verticalOffset: "px", - spread: "px", - blur: "px", - }, - }, - ]); - const [currentStyle, setCurrentStyle] = useState([]); - const [ActiveShadow, setActiveShadow] = useState(0); - const [numOfShadows, setNumOfShadows] = useState(1); - const [removeShadow, setRemoveShadow] = useState(false); - let [searchParams, setSearchParams] = useSearchParams(); - const toastState = useToastState() - - const box = useRef(); - - useEffect(() => { - const applyBoxShadow = (styles) => { - const cssRule = generateCssRule(styles); - box.current.style.boxShadow = cssRule.join(", "); - setCurrentStyle(cssRule); - }; - - if (firstRender && localStorage.getItem("ShadowStyle")) { - const localStorageValue = JSON.parse(localStorage.getItem("ShadowStyle")); - const newState = localStorageValue.filter((obj) => obj.id !== 0); - setShadowsStyles(newState); - setShadowsStyles(localStorageValue); - setFirstRender(false); - } - - - if (removeShadow) { - updateId(ShadowsStyles, setShadowsStyles, setRemoveShadow); - } - - applyBoxShadow(ShadowsStyles); - }, [ShadowsStyles, ActiveShadow, searchParams]); - - console.log(searchParams) - return ( - <> - - - - {/* className="flex max-w flex-col-reverse bg-red-800 lg:flex-row justify-center gap-3 mx-6 md:mx-12 rounded-sm xl:border border-[color:var(--Design-Document-Outlines,#999)] border-solid" */} - -
-
-
-
- -
- - - - - - - - - - - - - - - ); -}; - - -export default ShadowGenerator; diff --git a/fetools-app/src/routes.jsx b/fetools-app/src/routes.jsx index 692278d0..fb2f4bd6 100644 --- a/fetools-app/src/routes.jsx +++ b/fetools-app/src/routes.jsx @@ -10,7 +10,7 @@ import UnitConverter from './pages/UnitConverter'; import ColorPicker from './pages/ColorPicker'; import CharacterFinder from './pages/CharacterFinder'; import FontViewer from './pages/FontViewer'; -import ShadowGenerator from './pages/ShadowGenerator'; +import ShadowCreator from './pages/ShadowCreator'; import Tables from './pages/Tables'; import ColorGradient from './pages/ColorGradient'; import App from './App'; @@ -23,7 +23,7 @@ export const router = createBrowserRouter( } /> } /> } /> - } /> + } /> } /> } />