Refactor and Renaming some UI Props

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<Props> = ({ children, className, el = 'div', clean }) => {
+const Container: FC<ContainerProps> = ({
+  children,
+  className,
+  el = 'div',
+  clean,
+}) => {
   const rootClassName = cn(className, {
     'mx-auto max-w-8xl px-6': !clean,
   })

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<Props> = ({
+const Grid: FC<GridProps> = ({
   className,
   layout = 'A',
   children,

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<Props> = ({ headline, description }) => {
+const Hero: FC<HeroProps> = ({ headline, description }) => {
   return (
     <div className="bg-black">
       <Container>

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<HTMLInputElement> {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   className?: string
   onChange?: (...args: any[]) => any
 }
 
-const Input: React.FC<Props> = (props) => {
+const Input: React.FC<InputProps> = (props) => {
   const { className, children, onChange, ...rest } = props
 
   const rootClassName = cn(s.root, {}, className)

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<Props> = ({
+const Marquee: FC<MarqueeProps> = ({
   className = '',
   children,
   variant = 'primary',

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<Props> = ({ children, open, onClose, onEnter = null }) => {
+const Modal: FC<ModalProps> = ({ children, open, onClose, onEnter = null }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   const handleKey = useCallback(

components/ui/Quantifier/Quantifier.module.css

@@ -0,0 +1,2 @@
+.root {
+}

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<QuantifierProps> = ({}) => {
+  return <div></div>
+}
+
+export default Quantifier

components/ui/Quantifier/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Quantifier'
+export * from './Quantifier'

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<Props> = ({ children, open = false, onClose }) => {
+const Sidebar: FC<SidebarProps> = ({ children, open = false, onClose }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   useEffect(() => {

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<Props> = ({
+const Skeleton: React.FC<SkeletonProps> = ({
   style,
   width,
   height,

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<Props> = ({
+const Text: FunctionComponent<TextProps> = ({
   style,
   className = '',
   variant = 'body',