From d26b429ee8faff440531423a7e193d115ef35f5d Mon Sep 17 00:00:00 2001 From: Walidoux Date: Tue, 2 May 2023 15:49:05 +0100 Subject: [PATCH] refactor(components) BREAKING CHANGES - Refactored `App.tsx` to import `Component` from `solid-js`, and use a new component `TitleBar`. - Added new component `AnimateView` under `src/components/design`, and renamed old `AnimateView` to `Loader`. - Added new component `Button` under `src/components/design`. - Added new component `Image` under `src/components/design`. - Moved old `Image`, `Loader`, and `Button` components under `src/components/design`. - Refactored `Downloader` component to use `Motion` from `@motionone/solid`, moved it under `Downloader` folder, and used it to create a slick hover effect. - Removed `Downloaders/Button`. Notes: - Used `createSignal` instead of `useState` for SolidJS in `Downloaders.tsx`. - Used `type` keyword to explicitly define the type of the component props or objects where it makes the code clearer. --- src/App.tsx | 19 +++-- .../design/AnimateView/AnimateView.tsx | 22 +++++ .../{system => design}/AnimateView/index.ts | 0 src/components/design/Button/Button.tsx | 18 +++++ .../{layout => design}/Button/index.ts | 0 src/components/design/Image/Image.tsx | 25 ++++++ .../{system => design}/Image/index.ts | 0 src/components/design/Loader/Loader.tsx | 20 ++--- src/components/design/index.ts | 3 + src/components/layout/Button/Button.tsx | 17 ---- .../Downloaders/Downloader/Downloader.tsx | 80 +++++++++---------- .../layout/Downloaders/Downloaders.tsx | 53 ++++++------ src/components/layout/Popup/Popup.tsx | 23 ++++++ .../{system => layout}/Popup/index.ts | 0 src/components/layout/TitleBar/TitleBar.tsx | 41 ++++++++++ .../{system => layout}/TitleBar/index.ts | 0 src/components/layout/index.ts | 3 +- .../system/AnimateView/AnimateView.tsx | 19 ----- src/components/system/Image/Image.tsx | 19 ----- src/components/system/Popup/Popup.tsx | 19 ----- src/components/system/TitleBar/TitleBar.tsx | 40 ---------- src/components/system/Window/Window.tsx | 19 ----- src/components/system/Window/index.ts | 1 - src/components/system/index.ts | 5 -- src/config/Animation.ts | 23 ++++++ src/config/Domain.ts | 13 +++ src/config/Endpoints.ts | 25 ++---- src/config/GameDownloader.ts | 8 +- src/config/index.ts | 5 ++ src/controllers/FurniData.ts | 10 +-- src/hooks/useOutsideClickEventHandler.ts | 23 ++++-- src/index.tsx | 9 +++ src/main.tsx | 12 --- ...etchGamedataConfig.ts => fetchGamedata.ts} | 21 +++-- src/tools/handleConvertion.ts | 35 +++++--- src/tools/index.ts | 1 - src/tools/parseData.ts | 5 +- src/tools/rusty.ts | 17 ++++ src/types/Converters.d.ts | 13 ++- src/types/Domain.d.ts | 1 - src/types/Endpoint.d.ts | 9 --- src/types/SubConverters.d.ts | 44 +++++----- src/types/global.d.ts | 4 - src/types/index.d.ts | 2 - src/vite-env.d.ts | 1 - 45 files changed, 385 insertions(+), 342 deletions(-) create mode 100644 src/components/design/AnimateView/AnimateView.tsx rename src/components/{system => design}/AnimateView/index.ts (100%) create mode 100644 src/components/design/Button/Button.tsx rename src/components/{layout => design}/Button/index.ts (100%) create mode 100644 src/components/design/Image/Image.tsx rename src/components/{system => design}/Image/index.ts (100%) delete mode 100644 src/components/layout/Button/Button.tsx create mode 100644 src/components/layout/Popup/Popup.tsx rename src/components/{system => layout}/Popup/index.ts (100%) create mode 100644 src/components/layout/TitleBar/TitleBar.tsx rename src/components/{system => layout}/TitleBar/index.ts (100%) delete mode 100644 src/components/system/AnimateView/AnimateView.tsx delete mode 100644 src/components/system/Image/Image.tsx delete mode 100644 src/components/system/Popup/Popup.tsx delete mode 100644 src/components/system/TitleBar/TitleBar.tsx delete mode 100644 src/components/system/Window/Window.tsx delete mode 100644 src/components/system/Window/index.ts delete mode 100644 src/components/system/index.ts create mode 100644 src/config/Animation.ts create mode 100644 src/config/Domain.ts create mode 100644 src/config/index.ts create mode 100644 src/index.tsx delete mode 100644 src/main.tsx rename src/tools/{fetchGamedataConfig.ts => fetchGamedata.ts} (71%) delete mode 100644 src/tools/index.ts create mode 100644 src/tools/rusty.ts delete mode 100644 src/types/Domain.d.ts delete mode 100644 src/types/Endpoint.d.ts delete mode 100644 src/vite-env.d.ts diff --git a/src/App.tsx b/src/App.tsx index c25baef..1bae45c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,18 @@ -import { Window } from './components/system' -import { Downloaders } from './components/layout' +import type { Component } from 'solid-js' -const Main: React.FC = () => { +import { Downloaders, TitleBar } from './components/layout' + +const Main: Component = () => { return ( - - I would like to: + <> + - - +
+ I would like to: + + +
+ ) } diff --git a/src/components/design/AnimateView/AnimateView.tsx b/src/components/design/AnimateView/AnimateView.tsx new file mode 100644 index 0000000..e4c20b0 --- /dev/null +++ b/src/components/design/AnimateView/AnimateView.tsx @@ -0,0 +1,22 @@ +import { Show } from 'solid-js' +import type { Component } from 'solid-js' +import type { MotionComponentProps, Options as MotionProps } from '@motionone/solid' +import { Motion, Presence } from '@motionone/solid' + +export interface AnimateViewProps extends MotionComponentProps { + condition: boolean + animation: MotionProps + class?: string +} + +export const AnimateView: Component = (props) => { + return ( + + + + {props.children} + + + + ) +} diff --git a/src/components/system/AnimateView/index.ts b/src/components/design/AnimateView/index.ts similarity index 100% rename from src/components/system/AnimateView/index.ts rename to src/components/design/AnimateView/index.ts diff --git a/src/components/design/Button/Button.tsx b/src/components/design/Button/Button.tsx new file mode 100644 index 0000000..f96dbdc --- /dev/null +++ b/src/components/design/Button/Button.tsx @@ -0,0 +1,18 @@ +import classNames from 'classnames' +import type { Component, ComponentProps, JSXElement } from 'solid-js' + +interface ButtonProps extends ComponentProps<'button'> { + icon: JSXElement + value: string + class?: string + handler?: () => void +} + +export const Button: Component = (props) => { + return ( + + ) +} diff --git a/src/components/layout/Button/index.ts b/src/components/design/Button/index.ts similarity index 100% rename from src/components/layout/Button/index.ts rename to src/components/design/Button/index.ts diff --git a/src/components/design/Image/Image.tsx b/src/components/design/Image/Image.tsx new file mode 100644 index 0000000..8fc45c0 --- /dev/null +++ b/src/components/design/Image/Image.tsx @@ -0,0 +1,25 @@ +import classNames from 'classnames' +import type { Component } from 'solid-js' + +interface ImageProps { + size?: number + pixelated?: boolean + src: string + class?: string + height?: number + width?: number +} + +export const Image: Component = (props) => { + return ( + + ) +} diff --git a/src/components/system/Image/index.ts b/src/components/design/Image/index.ts similarity index 100% rename from src/components/system/Image/index.ts rename to src/components/design/Image/index.ts diff --git a/src/components/design/Loader/Loader.tsx b/src/components/design/Loader/Loader.tsx index ff33d69..700d492 100644 --- a/src/components/design/Loader/Loader.tsx +++ b/src/components/design/Loader/Loader.tsx @@ -1,21 +1,21 @@ -import type { HTMLMotionProps } from 'framer-motion' +import type { Component } from 'solid-js' -import { AnimateView } from '../../system' +import { Animation } from '../../../config' +import { AnimateView } from '../AnimateView' -interface LoaderProps extends HTMLMotionProps<'main'> { +interface LoaderProps { + class?: string active: boolean } -export const Loader: React.FC = ({ active, ...rest }) => { +export const Loader: Component = (props) => { return ( + class={props.class} + condition={props.active} + animation={Animation.fadeInOut({ scale: [0, 1, 0], y: [1, 4, 1] })}> - + { - icon: JSX.Element - value: string - className?: string - handler?: () => void -} - -export const Button: React.FC = ({ icon, value, className, handler }) => { - return ( - {value} - - ) -} diff --git a/src/components/layout/Downloaders/Downloader/Downloader.tsx b/src/components/layout/Downloaders/Downloader/Downloader.tsx index 85859ce..998e11e 100644 --- a/src/components/layout/Downloaders/Downloader/Downloader.tsx +++ b/src/components/layout/Downloaders/Downloader/Downloader.tsx @@ -1,61 +1,57 @@ +import { Motion } from '@motionone/solid' import classNames from 'classnames' -import { AnimatePresence, motion } from 'framer-motion' -import { useState } from 'react' +import type { Component, JSXElement } from 'solid-js' +import { For, createSignal } from 'solid-js' -export interface IDownloaderContent { - title: string - features: string[] -} +import type { GameDataDownloader } from '../../../../config' +import { Animation } from '../../../../config' +import { AnimateView } from '../../../design' interface DownloaderProps { className?: string - children: React.ReactNode - content: IDownloaderContent + children: JSXElement + content: typeof GameDataDownloader } -export const Downloader: React.FC = ({ className, children, content }) => { - const [activeContent, setActiveContent] = useState(false) +export const Downloader: Component = (props) => { + const [activeContent, setActiveContent] = createSignal(false) - const handleActiveContent = (): void => { - return setActiveContent(!activeContent) + const handleActiveContent = (): boolean => { + return setActiveContent(!activeContent()) } return (
  • - {children} + {props.children} - - {activeContent && ( - - - {content.title} - + + + {props.content.title} + - {content.features.map((feature) => { - return ( - - {feature} - - ) - })} - - )} - + + {(feature) => { + return ( + + {feature} + + ) + }} + +
    • ) } diff --git a/src/components/layout/Downloaders/Downloaders.tsx b/src/components/layout/Downloaders/Downloaders.tsx index 4d0fccb..872e760 100644 --- a/src/components/layout/Downloaders/Downloaders.tsx +++ b/src/components/layout/Downloaders/Downloaders.tsx @@ -1,19 +1,19 @@ -import { Fragment, useState } from 'react' +import type { Component } from 'solid-js' +import { createSignal } from 'solid-js' import classNames from 'classnames' -import { Image, Popup } from '../../system' -import { Button } from '../Button' -import { GameAssetsDownloader, GameDataDownloader } from '../../../config/GameDownloader' +import type { ConvertionHandler } from '../../../types' import { handleConvertion } from '../../../tools/handleConvertion' -import { Downloader } from './Downloader' -import type { ConvertionHandler } from '../../../types/global' -import { Loader } from '../../design' +import { Animation, GameAssetsDownloader, GameDataDownloader } from '../../../config' +import { Button, Image, Loader } from '../../design' +import { Popup } from '../Popup' +import { Downloader } from './Downloader/Downloader' -export const Downloaders: React.FC = () => { - const [message, setMessage] = useState('') - const [error, setError] = useState(false) - const [popup, setPopup] = useState(false) - const [loading, setLoading] = useState(true) +export const Downloaders: Component = () => { + const [message, setMessage] = createSignal('') + const [error, setError] = createSignal(false) + const [popup, setPopup] = createSignal(false) + const [loading, setLoading] = createSignal(false) const callback: ConvertionHandler = (message, state = 'idle') => { switch (state) { @@ -43,38 +43,39 @@ export const Downloaders: React.FC = () => { return callback(`Completed in: ${seconds} seconds`, 'success') } + console.log(Animation.fadeInOut({ scale: [0, 1, 0], y: [1, 4, 1] })) + return ( - - + <> + + - {message} + {message()} - -