From fe324696d78cdcc301264a28adb786790cfab4ab Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Fri, 4 Jun 2021 11:45:13 -0300 Subject: [PATCH] Refactor and Renaming some UI Props --- components/ui/Container/Container.tsx | 9 +++++++-- components/ui/Grid/Grid.tsx | 4 ++-- components/ui/Hero/Hero.tsx | 4 ++-- components/ui/Input/Input.tsx | 4 ++-- components/ui/Marquee/Marquee.tsx | 4 ++-- components/ui/Modal/Modal.tsx | 4 ++-- components/ui/Quantifier/Quantifier.module.css | 2 ++ components/ui/Quantifier/Quantifier.tsx | 10 ++++++++++ components/ui/Quantifier/index.ts | 2 ++ components/ui/Sidebar/Sidebar.tsx | 4 ++-- components/ui/Skeleton/Skeleton.tsx | 4 ++-- components/ui/Text/Text.tsx | 4 ++-- 12 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 components/ui/Quantifier/Quantifier.module.css create mode 100644 components/ui/Quantifier/Quantifier.tsx create mode 100644 components/ui/Quantifier/index.ts diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index 7b281a2e4..058a75305 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -1,14 +1,19 @@ import cn from 'classnames' import React, { FC } from 'react' -interface Props { +interface ContainerProps { className?: string children?: any el?: HTMLElement clean?: boolean } -const Container: FC = ({ children, className, el = 'div', clean }) => { +const Container: FC = ({ + children, + className, + el = 'div', + clean, +}) => { const rootClassName = cn(className, { 'mx-auto max-w-8xl px-6': !clean, }) diff --git a/components/ui/Grid/Grid.tsx b/components/ui/Grid/Grid.tsx index 8ca247609..55ca78277 100644 --- a/components/ui/Grid/Grid.tsx +++ b/components/ui/Grid/Grid.tsx @@ -2,14 +2,14 @@ import cn from 'classnames' import { FC, ReactNode, Component } from 'react' import s from './Grid.module.css' -interface Props { +interface GridProps { className?: string children?: ReactNode[] | Component[] | any[] layout?: 'A' | 'B' | 'C' | 'D' | 'normal' variant?: 'default' | 'filled' } -const Grid: FC = ({ +const Grid: FC = ({ className, layout = 'A', children, diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx index 2e1f124ae..95f371e97 100644 --- a/components/ui/Hero/Hero.tsx +++ b/components/ui/Hero/Hero.tsx @@ -3,13 +3,13 @@ import { Container } from '@components/ui' import { RightArrow } from '@components/icons' import s from './Hero.module.css' import Link from 'next/link' -interface Props { +interface HeroProps { className?: string headline: string description: string } -const Hero: FC = ({ headline, description }) => { +const Hero: FC = ({ headline, description }) => { return (
diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx index dc2f04a8d..e630728b2 100644 --- a/components/ui/Input/Input.tsx +++ b/components/ui/Input/Input.tsx @@ -2,12 +2,12 @@ import cn from 'classnames' import s from './Input.module.css' import React, { InputHTMLAttributes } from 'react' -export interface Props extends InputHTMLAttributes { +export interface InputProps extends InputHTMLAttributes { className?: string onChange?: (...args: any[]) => any } -const Input: React.FC = (props) => { +const Input: React.FC = (props) => { const { className, children, onChange, ...rest } = props const rootClassName = cn(s.root, {}, className) diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx index 163f29a34..168a72e7d 100644 --- a/components/ui/Marquee/Marquee.tsx +++ b/components/ui/Marquee/Marquee.tsx @@ -3,13 +3,13 @@ import s from './Marquee.module.css' import { FC, ReactNode, Component } from 'react' import Ticker from 'react-ticker' -interface Props { +interface MarqueeProps { className?: string children?: ReactNode[] | Component[] | any[] variant?: 'primary' | 'secondary' } -const Marquee: FC = ({ +const Marquee: FC = ({ className = '', children, variant = 'primary', diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx index 300a99192..785b98ecd 100644 --- a/components/ui/Modal/Modal.tsx +++ b/components/ui/Modal/Modal.tsx @@ -8,7 +8,7 @@ import { clearAllBodyScrollLocks, } from 'body-scroll-lock' import FocusTrap from '@lib/focus-trap' -interface Props { +interface ModalProps { className?: string children?: any open?: boolean @@ -16,7 +16,7 @@ interface Props { onEnter?: () => void | null } -const Modal: FC = ({ children, open, onClose, onEnter = null }) => { +const Modal: FC = ({ children, open, onClose, onEnter = null }) => { const ref = useRef() as React.MutableRefObject const handleKey = useCallback( diff --git a/components/ui/Quantifier/Quantifier.module.css b/components/ui/Quantifier/Quantifier.module.css new file mode 100644 index 000000000..c3a2af639 --- /dev/null +++ b/components/ui/Quantifier/Quantifier.module.css @@ -0,0 +1,2 @@ +.root { +} diff --git a/components/ui/Quantifier/Quantifier.tsx b/components/ui/Quantifier/Quantifier.tsx new file mode 100644 index 000000000..5f1bcb62c --- /dev/null +++ b/components/ui/Quantifier/Quantifier.tsx @@ -0,0 +1,10 @@ +import React, { FC } from 'react' +import s from './Quantifier.module.css' + +export interface QuantifierProps {} + +const Quantifier: FC = ({}) => { + return
+} + +export default Quantifier diff --git a/components/ui/Quantifier/index.ts b/components/ui/Quantifier/index.ts new file mode 100644 index 000000000..c9a2fdb29 --- /dev/null +++ b/components/ui/Quantifier/index.ts @@ -0,0 +1,2 @@ +export { default } from './Quantifier' +export * from './Quantifier' diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index c894ac035..200d6441e 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -7,13 +7,13 @@ import { clearAllBodyScrollLocks, } from 'body-scroll-lock' -interface Props { +interface SidebarProps { children: any open: boolean onClose: () => void } -const Sidebar: FC = ({ children, open = false, onClose }) => { +const Sidebar: FC = ({ children, open = false, onClose }) => { const ref = useRef() as React.MutableRefObject useEffect(() => { diff --git a/components/ui/Skeleton/Skeleton.tsx b/components/ui/Skeleton/Skeleton.tsx index 153024f18..9d7e668b6 100644 --- a/components/ui/Skeleton/Skeleton.tsx +++ b/components/ui/Skeleton/Skeleton.tsx @@ -3,7 +3,7 @@ import cn from 'classnames' import px from '@lib/to-pixels' import s from './Skeleton.module.css' -interface Props { +interface SkeletonProps { width?: string | number height?: string | number boxHeight?: string | number @@ -13,7 +13,7 @@ interface Props { className?: string } -const Skeleton: React.FC = ({ +const Skeleton: React.FC = ({ style, width, height, diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx index 0ca71da9a..6106c209a 100644 --- a/components/ui/Text/Text.tsx +++ b/components/ui/Text/Text.tsx @@ -6,7 +6,7 @@ import React, { import cn from 'classnames' import s from './Text.module.css' -interface Props { +interface TextProps { variant?: Variant className?: string style?: CSSProperties @@ -17,7 +17,7 @@ interface Props { type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' -const Text: FunctionComponent = ({ +const Text: FunctionComponent = ({ style, className = '', variant = 'body',