feat: add in common nft components (#4363)

* add in common genie components

* update import and run linter

* better event type handling

* rotate 360
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/Box.ts

+import clsx, { ClassValue } from 'clsx'
+import * as React from 'react'
+import { animated } from 'react-spring'
+
+import { Atoms, atoms } from '../css/atoms'
+import { sprinkles } from '../css/sprinkles.css'
+
+type HTMLProperties<T = HTMLElement> = Omit<
+  React.AllHTMLAttributes<T>,
+  'as' | 'className' | 'color' | 'height' | 'width'
+>
+
+type Props = Atoms &
+  HTMLProperties & {
+    as?: React.ElementType
+    className?: ClassValue
+  }
+
+export const Box = React.forwardRef<HTMLElement, Props>(({ as = 'div', className, ...props }: Props, ref) => {
+  const atomProps: Record<string, unknown> = {}
+  const nativeProps: Record<string, unknown> = {}
+
+  for (const key in props) {
+    if (sprinkles.properties.has(key as keyof Omit<Atoms, 'reset'>)) {
+      atomProps[key] = props[key as keyof typeof props]
+    } else {
+      nativeProps[key] = props[key as keyof typeof props]
+    }
+  }
+
+  const atomicClasses = atoms({
+    reset: typeof as === 'string' ? (as as Atoms['reset']) : 'div',
+    ...atomProps,
+  })
+
+  return React.createElement(as, {
+    className: clsx(atomicClasses, className),
+    ...nativeProps,
+    ref,
+  })
+})
+
+export const AnimatedBox = animated(Box)
+
+export type BoxProps = Parameters<typeof Box>[0]
+
+Box.displayName = 'Box'

src/nft/components/Flex.tsx

+import { ForwardedRef, forwardRef } from 'react'
+
+import { Box, BoxProps } from './Box'
+
+export const Row = forwardRef((props: BoxProps, ref: ForwardedRef<HTMLElement>) => {
+  return <Box ref={ref} display="flex" flexDirection="row" alignItems="center" {...props} />
+})
+
+Row.displayName = 'Row'
+
+export const Column = forwardRef((props: BoxProps, ref: ForwardedRef<HTMLElement>) => {
+  return <Box ref={ref} display="flex" flexDirection="column" {...props} />
+})
+
+Column.displayName = 'Column'
+
+export const Center = forwardRef((props: BoxProps, ref: ForwardedRef<HTMLElement>) => {
+  return <Box ref={ref} display="flex" justifyContent="center" alignItems="center" {...props} />
+})
+
+Center.displayName = 'Center'

src/nft/components/common/Portal/Portal.tsx

+import { ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+export const Portal = ({ children }: { children: ReactNode }) => createPortal(children, document.body)

src/nft/components/common/Portal/index.ts

+export * from './Portal'

src/nft/components/icons.css.ts

+import { keyframes, style } from '@vanilla-extract/css'
+
+const rotate = keyframes({
+  from: {
+    transform: 'rotate(0deg)',
+  },
+  to: {
+    transform: 'rotate(360deg)',
+  },
+})
+export const clockSpinArrows = style({
+  animation: `${rotate} 1s linear infinite`,
+  transformOrigin: '50% 50%',
+})

src/nft/components/modals/Overlay.css.ts

+import { style } from '@vanilla-extract/css'
+
+import { sprinkles } from '../../css/sprinkles.css'
+
+export const overlay = style([
+  sprinkles({
+    top: '0',
+    left: '0',
+    width: 'full',
+    height: 'full',
+    position: 'fixed',
+    display: 'block',
+    background: 'black',
+    zIndex: '3',
+  }),
+  {
+    opacity: 0.75,
+    overflow: 'hidden',
+  },
+])

src/nft/components/modals/Overlay.tsx

+import { Box } from '../Box'
+import * as styles from './Overlay.css'
+
+interface OverlayProps {
+  onClick?: () => void
+}
+
+export const stopPropagation = (event: React.SyntheticEvent<HTMLElement>) => {
+  event.stopPropagation()
+  event.nativeEvent.stopImmediatePropagation()
+}
+
+export const Overlay = ({ onClick = () => null }: OverlayProps) => {
+  return <Box className={styles.overlay} onClick={onClick} />
+}