refactor: rename files

lokesh-coder · lokesh-coder · Mar 14, 2021 · Mar 10, 2021 · Mar 11, 2021 · Mar 12, 2021
commit fec6571157655af560d340a7db985d22ab688fb9
diff --git a/src/@chakra-ui/gatsby-plugin/theme.js b/src/@chakra-ui/gatsby-plugin/theme.js
@@ -1,10 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 
 const theme = extendTheme({
-  config: {
-    useSystemColorMode: true,
-    initialColorMode: 'light',
-  },
   colors: {
     primary: '#d7819b',
     dark: {

diff --git a/src/components/actions.js → src/components/BlobActionBar.js b/src/components/actions.js → src/components/BlobActionBar.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Container, Box, HStack } from '@chakra-ui/react';
-import RandomizerBtn from './randomizer-btn';
-import HtmlCodeModalButton from './Settings/HtmlCodeModalButton';
+import RandomizerBtn from './Controls/RandomizerButton';
+import HtmlCodeModalButton from './Controls/HtmlCodeModalButton';
 import { dynamic } from '../state';
-import FlutterCodeModalButton from './Settings/FlutterCodeModalButton';
+import FlutterCodeModalButton from './Controls/FlutterCodeModalButton';
 
-const Actions = () => (
+const BlobActionBar = () => (
   <Box mt="10">
     <Container centerContent maxW="sm">
       <HStack spacing="24px">
@@ -17,4 +17,4 @@ const Actions = () => (
   </Box>
 );
 
-export default dynamic(Actions);
+export default dynamic(BlobActionBar);
diff --git a/src/components/BlobContainer.js b/src/components/BlobContainer.js
@@ -1,7 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { dynamic } from '../state';
-import { createFixedBlob, createInitialBlob, setBlobTheme } from '../utilities';
-import Blob from './blob';
+import {
+  createFixedBlob,
+  createInitialBlob,
+  setBlobTheme,
+} from '../utils/blob.utils';
+import Blob from './Blob';
 
 const BlobContainer = (props) => {
   const { edges, growth, color, colors, type, isOutline, svgPath } = props;

diff --git a/src/components/BlobSettingsSection.js b/src/components/BlobSettingsSection.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box, Divider, HStack } from '@chakra-ui/react';
+
+import RandomnessSlider from './Controls/RandomnessSlider';
+import ComplexitySlider from './Controls/ComplexitySlider';
+import SolidColorPicker from './Controls/SolidColorPicker';
+import GradientColorsPicker from './Controls/GradientColorsPicker';
+import OutlineToggleButton from './Controls/OutlineToggleButton';
+import ImageSetter from './Controls/ImageSetter';
+import PatternSetter from './Controls/PatternSetter';
+
+const BlobSettingsSection = () => (
+  <Box px={{ lg: 10 }} py="5">
+    <RandomnessSlider />
+    <ComplexitySlider />
+    <Divider my="5" />
+    <HStack justifyContent="center" alignItems="center">
+      <SolidColorPicker />
+      <GradientColorsPicker />
+      <PatternSetter />
+      <ImageSetter />
+      <OutlineToggleButton />
+    </HStack>
+    <Divider mt="5" />
+  </Box>
+);
+
+export default BlobSettingsSection;
diff --git a/src/components/Common/Hint.js b/src/components/Common/Hint.js
@@ -9,7 +9,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 import React from 'react';
-import { QuestionIcon } from '../icons';
+import { QuestionIcon } from './Icons';
 
 const Hint = ({ text }) => (
   <Popover autoFocus={false}>

diff --git a/src/components/icons.js → src/components/Common/Icons.js b/src/components/icons.js → src/components/Common/Icons.js
diff --git a/src/components/Common/Input.js b/src/components/Common/Input.js
@@ -1,6 +1,6 @@
 import { Box, Input as ChakInput } from '@chakra-ui/react';
 import React from 'react';
-import { validateHex } from '../../utilities';
+import { validateHex } from '../../utils/code.utils';
 
 const Input = ({ value, onEnter }) => (
   <Box key={value}>

diff --git a/src/components/Logo.js → src/components/Common/Logo.js b/src/components/Logo.js → src/components/Common/Logo.js
diff --git a/src/components/Settings/ComplexitySlider.js → src/components/Controls/ComplexitySlider.js b/src/components/Settings/ComplexitySlider.js → src/components/Controls/ComplexitySlider.js
diff --git a/...onents/Settings/FlutterCodeModalButton.js → ...onents/Controls/FlutterCodeModalButton.js b/...onents/Settings/FlutterCodeModalButton.js → ...onents/Controls/FlutterCodeModalButton.js
@@ -10,7 +10,7 @@ import React from 'react';
 import { dynamic } from '../../state';
 import Highlight from '../Common/Highlight';
 import Modal from '../Common/Modal';
-import { FlutterIcon, CopyIcon } from '../icons';
+import { FlutterIcon, CopyIcon } from '../Common/Icons';
 
 const FlutterCodeModalButton = ({ edges, growth, seed }) => {
   const ID = `${edges}-${growth}-${seed}`;

diff --git a/...mponents/Settings/GradientColorsPicker.js → ...mponents/Controls/GradientColorsPicker.js b/...mponents/Settings/GradientColorsPicker.js → ...mponents/Controls/GradientColorsPicker.js
@@ -6,7 +6,7 @@ import Pallette from '../Common/Pallette';
 import Popover from '../Common/Popover';
 import Input from '../Common/Input';
 import Ding from '../Common/Ding';
-import { PaletteIcon } from '../icons';
+import { PaletteIcon } from '../Common/Icons';
 
 const defaultColors = [
   ['#e96443', '#904e95'],

diff --git a/...omponents/Settings/HtmlCodeModalButton.js → ...omponents/Controls/HtmlCodeModalButton.js b/...omponents/Settings/HtmlCodeModalButton.js → ...omponents/Controls/HtmlCodeModalButton.js
@@ -5,10 +5,10 @@ import { dynamic } from '../../state';
 import DownloadSVG from '../Common/DownloadSVG';
 import Highlight from '../Common/Highlight';
 import Modal from '../Common/Modal';
-import { HtmlIcon, CopyIcon } from '../icons';
-import { formatCode } from '../../utilities';
+import { HtmlIcon, CopyIcon } from '../Common/Icons';
+import { formatCode } from '../../utils/code.utils';
 
-const HtmlCodeModalButton = ({ seed, edges, growth, svgPath }) => {
+const HtmlCodeModalButton = ({ seed, edges, growth }) => {
   const ID = `${edges}-${growth}-${seed}`;
   const [code, setCode] = useState(null);
 

diff --git a/src/components/Settings/ImageSetter.js → src/components/Controls/ImageSetter.js b/src/components/Settings/ImageSetter.js → src/components/Controls/ImageSetter.js
@@ -4,7 +4,7 @@ import { dynamic } from '../../state';
 import Popover from '../Common/Popover';
 import UrlInput from '../Common/UrlInput';
 import Ding from '../Common/Ding';
-import { ImageIcon, LandscapeIcon, RightArrowIcon } from '../icons';
+import { ImageIcon, LandscapeIcon, RightArrowIcon } from '../Common/Icons';
 
 const ImageSetter = ({ type, image, switchToImage }) => {
   const Picker = () => (

diff --git a/...omponents/Settings/OutlineToggleButton.js → ...omponents/Controls/OutlineToggleButton.js b/...omponents/Settings/OutlineToggleButton.js → ...omponents/Controls/OutlineToggleButton.js
@@ -2,7 +2,7 @@ import { CheckCircleIcon } from '@chakra-ui/icons';
 import React from 'react';
 import { dynamic } from '../../state';
 import Ding from '../Common/Ding';
-import { OutlineIcon } from '../icons';
+import { OutlineIcon } from '../Common/Icons';
 
 const OutlineToggleButton = ({ isOutline, toggleOutline }) => (
   <Ding

diff --git a/src/components/Settings/PatternSetter.js → src/components/Controls/PatternSetter.js b/src/components/Settings/PatternSetter.js → src/components/Controls/PatternSetter.js
@@ -5,7 +5,7 @@ import { dynamic } from '../../state';
 import Popover from '../Common/Popover';
 import * as Patterns from '../../patterns';
 import Ding from '../Common/Ding';
-import { PatternIcon } from '../icons';
+import { PatternIcon } from '../Common/Icons';
 
 const PatternBox = ({ meta, clickHandler, isSelected }) => {
   const patternBg = useColorModeValue('A0AEC0', '4A5568');

diff --git a/src/components/randomizer-btn.js → src/components/Controls/RandomizerButton.js b/src/components/randomizer-btn.js → src/components/Controls/RandomizerButton.js
@@ -5,10 +5,10 @@ import { Button } from '@chakra-ui/react';
 import useSound from 'use-sound';
 import boopSfx from '/static/spring.mp3';
 
-import { createRandomBlob } from '../utilities';
-import { dynamic } from '../state';
+import { createRandomBlob } from '../../utils/blob.utils';
+import { dynamic } from '../../state';
 
-const RandomizerBtn = ({ playSound }) => {
+const RandomizerButton = ({ playSound }) => {
   const [play] = useSound(boopSfx, { volume: 0.5 });
   return (
     <Button
@@ -22,4 +22,4 @@ const RandomizerBtn = ({ playSound }) => {
     </Button>
   );
 };
-export default dynamic(RandomizerBtn, ['playSound']);
+export default dynamic(RandomizerButton, ['playSound']);
diff --git a/src/components/Settings/RandomnessSlider.js → src/components/Controls/RandomnessSlider.js b/src/components/Settings/RandomnessSlider.js → src/components/Controls/RandomnessSlider.js
diff --git a/src/components/Settings/SaveBlobButton.js → src/components/Controls/SaveBlobButton.js b/src/components/Settings/SaveBlobButton.js → src/components/Controls/SaveBlobButton.js
diff --git a/src/components/Settings/SolidColorPicker.js → src/components/Controls/SolidColorPicker.js b/src/components/Settings/SolidColorPicker.js → src/components/Controls/SolidColorPicker.js
@@ -5,7 +5,7 @@ import Pallette from '../Common/Pallette';
 import Popover from '../Common/Popover';
 import Input from '../Common/Input';
 import Ding from '../Common/Ding';
-import { PaintIcon } from '../icons';
+import { PaintIcon } from '../Common/Icons';
 
 const defaultColors = [
   '#00cec9',

diff --git a/src/components/Common/Footer.js → src/components/Footer.js b/src/components/Common/Footer.js → src/components/Footer.js
@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-wrap-multilines */
 import { Box, Link, Text, Button, Center, HStack } from '@chakra-ui/react';
 import React from 'react';
-import { dynamic } from '../../state';
-import Modal from './Modal';
+import { dynamic } from '../state';
+import Modal from './Common/Modal';
 import {
   LoIcon,
   SoundIcon,
@@ -11,10 +11,10 @@ import {
   UserIcon,
   CopyrightIcon,
   CreditsIcon,
-} from '../icons';
-import Credits from '../Misc/Credits';
-import SourceCode from '../Misc/SourceCode';
-import ThemeSwitch from '../theme-switch';
+} from './Common/Icons';
+import Credits from './Misc/Credits';
+import SourceCode from './Misc/SourceCode';
+import ThemeSwitch from './ThemeSwitch';
 
 const Footer = ({ toggleSound, playSound }) => (
   <Center my="6">

diff --git a/src/components/Misc/SourceCode.js b/src/components/Misc/SourceCode.js
@@ -8,7 +8,12 @@ import {
   Text,
 } from '@chakra-ui/react';
 import React from 'react';
-import { GithubIcon, NpmIcon, FlutterIcon, RightArrowIcon } from '../icons';
+import {
+  GithubIcon,
+  NpmIcon,
+  FlutterIcon,
+  RightArrowIcon,
+} from '../Common/Icons';
 
 const SourceCode = () => {
   const links = [

diff --git a/src/components/NavLinks.js b/src/components/NavLinks.js
@@ -9,7 +9,7 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 import { Link as GatbsyLink } from 'gatsby';
-import { SavedIcon, TwitterIcon, BookmarkIcon } from './icons';
+import { SavedIcon, TwitterIcon, BookmarkIcon } from './Common/Icons';
 import { dynamic } from '../state';
 
 const NavLinks = ({ saveBlob }) => {
@@ -51,9 +51,9 @@ const NavLinks = ({ saveBlob }) => {
 
           <Box as={Text}>
             <Button
-              href="/page-2/"
+              href="/saved-blobs/"
               as={GatbsyLink}
-              to="/page-2"
+              to="/saved-blobs"
               variant="heavy"
               leftIcon={<SavedIcon fontSize="18px" />}
               aria-label="Saved blobs"

diff --git a/src/components/SavedBlobs.js b/src/components/SavedBlobs.js
@@ -11,8 +11,8 @@ import {
 } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { dynamic } from '../state';
-import Blob from './blob';
-import { TrashIcon } from './icons';
+import Blob from './Blob';
+import { TrashIcon } from './Common/Icons';
 
 const SavedBlobs = ({ savedBlobs = [], deleteBlob, loadBlobs }) => {
   const cardHoverBg = useColorModeValue('gray.100', 'gray.700');

diff --git a/src/components/theme-switch.js → src/components/ThemeSwitch.js b/src/components/theme-switch.js → src/components/ThemeSwitch.js
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -5,7 +5,7 @@ import { Box, Container, useColorModeValue } from '@chakra-ui/react';
 import { Provider } from 'redux-zero/react';
 import { store } from '../state';
 
-import Footer from './Common/Footer';
+import Footer from './Footer';
 
 const Layout = ({ children }) => {
   const theme = useColorModeValue('light', 'dark');

diff --git a/src/components/settings.js b/src/components/settings.js
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -1,7 +1,7 @@
 import { Box, Heading, Text } from '@chakra-ui/react';
 import React from 'react';
-import SEO from '../components/seo';
-import Logo from '../components/Logo';
+import SEO from '../components/SEO';
+import Logo from '../components/Common/Logo';
 
 const NotFoundPage = () => (
   <>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Box, Heading, Flex } from '@chakra-ui/react';
 
-import SEO from '../components/seo';
-import Settings from '../components/settings';
-import Actions from '../components/actions';
-import Logo from '../components/Logo';
+import SEO from '../components/SEO';
+import BlobSettingsSection from '../components/BlobSettingsSection';
+import BlobActionBar from '../components/BlobActionBar';
+import Logo from '../components/Common/Logo';
 import BlobContainer from '../components/BlobContainer';
 import NavLinks from '../components/NavLinks';
-import Layout from '../components/layout';
+import Layout from '../components/Layout';
 
 const IndexPage = () => (
   <Layout>
@@ -39,7 +39,7 @@ const IndexPage = () => (
         <Box w={{ base: '100%', lg: 500 }} h={{ lg: 500 }}>
           <BlobContainer />
         </Box>
-        <Actions />
+        <BlobActionBar />
       </Box>
 
       <Box
@@ -61,7 +61,7 @@ const IndexPage = () => (
               Generate blobs
             </Heading>
           </Flex>
-          <Settings />
+          <BlobSettingsSection />
           <NavLinks />
         </Box>
       </Box>

diff --git a/src/pages/page-2.js → src/pages/saved-blobs.js b/src/pages/page-2.js → src/pages/saved-blobs.js
@@ -3,11 +3,11 @@ import { Link } from 'gatsby';
 
 import { Box, Center, Heading, Text } from '@chakra-ui/react';
 import { ArrowBackIcon } from '@chakra-ui/icons';
-import SEO from '../components/seo';
+import SEO from '../components/SEO';
 
-import Logo from '../components/Logo';
+import Logo from '../components/Common/Logo';
 import SavedBlobs from '../components/SavedBlobs';
-import Layout from '../components/layout';
+import Layout from '../components/Layout';
 
 const SecondPage = () => (
   <Layout>