@spies-ui/react 1.0.1

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@spies-ui/react",
+  "version": "1.0.1",
+  "description": "",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",
+    "lint": "eslint src/**/*.ts* --fix"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@spies-ui/eslint-config": "*",
+    "@spies-ui/tokens": "*",
+    "@spies-ui/ts-config": "*",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "react": "^18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@stitches/react": "^1.2.8",
+    "phosphor-react": "^1.4.1"
+  }
+}

package/src/components/Avatar/index.tsx

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react'
+import { AvatarContainer, AvatarFallback, AvatarImage } from './styles'
+import { User } from 'phosphor-react'
+
+export interface AvatarProps extends ComponentProps<typeof AvatarImage> {}
+
+export function Avatar(props: AvatarProps) {
+  return (
+    <AvatarContainer>
+      <AvatarImage {...props} />
+
+      <AvatarFallback delayMs={600}>
+        <User />
+      </AvatarFallback>
+    </AvatarContainer>
+  )
+}
+
+Avatar.displayName = 'Avatar'

package/src/components/Avatar/styles.ts

@@ -0,0 +1,31 @@
+import * as Avatar from '@radix-ui/react-avatar'
+import { styled } from '../../styles'
+
+export const AvatarContainer = styled(Avatar.Root, {
+  borderRadius: '$full',
+  display: 'inline-block',
+  width: '$12',
+  height: '$12',
+  overflow: 'hidden',
+})
+
+export const AvatarImage = styled(Avatar.Image, {
+  width: '100%',
+  height: '100%',
+  objectFix: 'cover',
+  borderRadius: 'inherit',
+})
+export const AvatarFallback = styled(Avatar.Fallback, {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '$gray600',
+  color: '$gray800',
+
+  svg: {
+    width: '$6',
+    height: '$6',
+  },
+})

package/src/components/Box.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+
+export const Box = styled('div', {
+  padding: '$4',
+  borderRadius: '$md',
+  variants: {
+    background: {
+      default: {
+        backgroundColor: 'transparent',
+      },
+      gray600: {
+        backgroundColor: '$gray600',
+      },
+      gray700: {
+        backgroundColor: '$gray700',
+      },
+      gray800: {
+        backgroundColor: '$gray800',
+      },
+      gray900: {
+        backgroundColor: '$gray900',
+      },
+    },
+  },
+})
+
+export interface BoxProps extends ComponentProps<typeof Box> {
+  as?: ElementType
+}
+
+Box.displayName = 'Box'

package/src/components/Button.tsx

@@ -0,0 +1,97 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+
+export const Button = styled('button', {
+  all: 'unset',
+  fontFamily: '$default',
+  fontWeight: '$medium',
+  fontSize: '$sm',
+  textAlign: 'center',
+  minWidth: 0,
+  boxSizing: 'border-box',
+
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$2',
+
+  cursor: 'pointer',
+
+  transition: '0.2s',
+
+  svg: {
+    width: '$4',
+    height: '$4',
+  },
+
+  '&:disabled': {
+    cursor: 'not-allowed',
+    backgroundColor: '$gray200',
+    borderColor: '$gray200',
+  },
+
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: 'transparent',
+        border: '2px solid $gray500',
+        color: '$smokedWhite',
+
+        '&:not(:disabled):hover': {
+          // backgroundColor: '$smokedWhite',
+          // borderColor: '$smokedWhite',
+          // color: '$gray900',
+          borderColor: '$gray600',
+        },
+      },
+      primary: {
+        backgroundColor: '$primary',
+        border: '2px solid $primary',
+        color: '$smokedWhite',
+
+        '&:not(:disabled):hover': {
+          backgroundColor: '$primaryLight',
+          borderColor: '$primaryLight',
+        },
+      },
+    },
+
+    size: {
+      default: {
+        padding: '$3 $6',
+      },
+      fit: {
+        width: '100%',
+        paddingTop: '$3',
+        paddingBottom: '$3',
+      },
+      small: {
+        padding: '$3 $4',
+      },
+    },
+
+    radius: {
+      small: {
+        borderRadius: '$sm',
+      },
+      default: {
+        borderRadius: '$lg',
+      },
+      full: {
+        borderRadius: '$full',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'default',
+    radius: 'default',
+    variant: 'default',
+  },
+})
+
+export interface ButtonProps extends ComponentProps<typeof Button> {
+  as?: ElementType
+}
+
+Button.displayName = 'Button'

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,28 @@
+import { Check } from 'phosphor-react'
+import { CheckboxContainer, CheckboxIndicator, CheckboxBox } from './styles'
+import { Text } from '../Text'
+import { InputBox } from '../InputBox'
+import { ComponentProps } from 'react'
+
+export interface CheckboxProps
+  extends ComponentProps<typeof CheckboxContainer> {
+  label?: string
+  error?: string
+}
+
+export function Checkbox({ label, error, ...props }: CheckboxProps) {
+  return (
+    <InputBox error={error}>
+      <CheckboxBox>
+        <CheckboxContainer {...props} errored={!!error}>
+          <CheckboxIndicator asChild>
+            <Check weight="bold" />
+          </CheckboxIndicator>
+        </CheckboxContainer>
+        {!!label && <Text size="sm">{label}</Text>}
+      </CheckboxBox>
+    </InputBox>
+  )
+}
+
+Checkbox.displayName = 'Checkbox'

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,84 @@
+import { styled, keyframes } from '../../styles'
+import * as Checkbox from '@radix-ui/react-checkbox'
+
+export const CheckboxBox = styled('div', {
+  display: 'flex',
+  gap: '$2',
+
+  '&:has(button:disabled)': {
+    opacity: 0.5,
+  },
+})
+
+export const CheckboxContainer = styled(Checkbox.Root, {
+  all: 'unset',
+  width: '$6',
+  height: '$6',
+  backgroundColor: '$gray900',
+  borderRadius: '$xs',
+  lineHeight: 0,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '2px solid $gray900',
+
+  '&[data-state="checked"]': {
+    backgroundColor: '$primary',
+    borderColor: '$primary',
+  },
+
+  '&:focus': {
+    border: '2px solid $primary',
+  },
+
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+
+  variants: {
+    errored: {
+      true: {
+        borderColor: '$danger',
+      },
+    },
+  },
+
+  defaultVariants: {
+    errored: false,
+  },
+})
+
+const slideIn = keyframes({
+  from: {
+    transform: 'translateX(-100%)',
+  },
+  to: {
+    transform: 'translateX(0)',
+  },
+})
+
+const slideOut = keyframes({
+  from: {
+    transform: 'translateX(0)',
+  },
+  to: {
+    transform: 'translateX(100%)',
+  },
+})
+
+export const CheckboxIndicator = styled(Checkbox.Indicator, {
+  color: '$smokedWhite',
+  width: '$4',
+  height: '$4',
+
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 100ms ease-out`,
+  },
+
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 100ms ease-out`,
+  },
+})

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,98 @@
+import { useRef, useState, useEffect } from 'react'
+import {
+  DropdownContainer,
+  DropdownList,
+  DropdownItem,
+  DropdownTrigger,
+} from './styles'
+import { Button } from './../Button'
+
+export interface Option {
+  text: string
+  variant?: 'default' | 'danger'
+  onSelect: () => void
+}
+
+export interface DropdownProps {
+  options: Option[]
+  name?: string
+  children?: React.ReactElement
+}
+
+export function Dropdown({ options, children, name }: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLUListElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const handleSelectOption = (option: Option) => {
+    option.onSelect()
+    setIsOpen(false)
+  }
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      buttonRef.current &&
+      !dropdownRef.current.contains(event.target as Node) &&
+      !buttonRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleReposition = () => {
+      if (isOpen && buttonRef.current && dropdownRef.current) {
+        const buttonRect = buttonRef.current.getBoundingClientRect()
+        const dropdownRect = dropdownRef.current.getBoundingClientRect()
+        const buttonTop = buttonRect.top
+        const buttonHeight = buttonRect.height
+        const dropdownHeight = dropdownRect.height
+
+        const spaceBelow = window.innerHeight - buttonTop - buttonHeight
+        if (spaceBelow < dropdownHeight) {
+          dropdownRef.current.style.bottom = `${buttonHeight + 6}px`
+        } else {
+          dropdownRef.current.style.top = `${buttonHeight + 6}px`
+        }
+      }
+    }
+
+    handleReposition()
+  }, [isOpen])
+
+  return (
+    <DropdownContainer>
+      <DropdownTrigger ref={buttonRef} onClick={toggleDropdown}>
+        {name && children === undefined && <Button>{name}</Button>}
+        {children && name === undefined && children}
+      </DropdownTrigger>
+      {isOpen && (
+        <DropdownList ref={dropdownRef}>
+          {options.map((option, index) => (
+            <DropdownItem
+              key={index}
+              onClick={() => handleSelectOption(option)}
+              variant={option.variant}
+            >
+              {option.text}
+            </DropdownItem>
+          ))}
+        </DropdownList>
+      )}
+    </DropdownContainer>
+  )
+}
+
+Dropdown.displayName = 'Dropdown'

package/src/components/Dropdown/styles.ts

@@ -0,0 +1,75 @@
+import { styled, keyframes } from '../../styles'
+
+export const DropdownContainer = styled('div', {
+  position: 'relative',
+  display: 'inline-block',
+})
+
+export const DropdownTrigger = styled('span', {})
+
+const fadeIn = keyframes({
+  '0%': { opacity: '0' },
+  '100%': { opacity: '1' },
+})
+
+export const DropdownList = styled('ul', {
+  position: 'absolute',
+  // top: '100%',
+  // left: 0,
+  backgroundColor: '#18181B',
+  borderRadius: '$lg',
+  padding: 0,
+  // margin: '$1 0',
+  margin: 0,
+  listStyle: 'none',
+  zIndex: 9999,
+  minWidth: '100%', // ensures the dropdown list as wide as the container
+
+  left: '50%',
+  transform: 'translateX(-50%)',
+
+  animation: `${fadeIn} 100ms ease-out`,
+
+  '& li:first-child': {
+    marginTop: '$2',
+  },
+  '& li:last-child': {
+    marginBottom: '$2',
+  },
+})
+
+export const DropdownItem = styled('li', {
+  fontFamily: '$default',
+  fontSize: '$sm',
+  color: '$smokedWhite',
+  padding: '$2 $2',
+  marginLeft: '$2',
+  marginRight: '$2',
+  width: '$40',
+  borderRadius: '$md',
+  cursor: 'pointer',
+
+  variants: {
+    variant: {
+      default: {
+        color: '$smokedWhite',
+
+        '&:hover': {
+          backgroundColor: '$gray700',
+        },
+      },
+      danger: {
+        color: '$danger',
+
+        '&:hover': {
+          backgroundColor: '$danger',
+          color: '$smokedWhite',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'default',
+  },
+})

package/src/components/Heading.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+
+export const Heading = styled('h2', {
+  fontFamily: '$heading',
+  lineHeight: '$shorter',
+  margin: 0,
+  color: '$smokedWhite',
+
+  variants: {
+    size: {
+      sm: { fontSize: '$xl' },
+      md: { fontSize: '$2xl' },
+      lg: { fontSize: '$4xl' },
+      '2xl': { fontSize: '$5xl' },
+      '3xl': { fontSize: '$5xl' },
+      '4xl': { fontSize: '$6xl' },
+      '5xl': { fontSize: '$7xl' },
+      '6xl': { fontSize: '$8xl' },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export interface HeadingProps extends ComponentProps<typeof Heading> {
+  as?: ElementType
+}
+
+Heading.displayName = 'Heading'

package/src/components/InputBox/index.tsx

@@ -0,0 +1,24 @@
+import { Text } from '../Text'
+import { InputContainer } from './styles'
+
+export interface InputProps {
+  label?: string
+  children: React.ReactElement
+  error?: string
+}
+
+export function InputBox({ label, error, children }: InputProps) {
+  return (
+    <InputContainer>
+      {!!label && <Text size={'sm'}>{label}</Text>}
+      {children}
+      {!!error && (
+        <Text size="xs" variant="danger">
+          {error}
+        </Text>
+      )}
+    </InputContainer>
+  )
+}
+
+InputBox.displayName = 'InputBox'

package/src/components/InputBox/styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '../../styles'
+
+export const InputContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$2',
+})

package/src/components/Text.tsx

@@ -0,0 +1,45 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+
+export const Text = styled('p', {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  margin: 0,
+  color: '$smokedWhite',
+
+  variants: {
+    size: {
+      xxs: { fontSize: '$xxs' },
+      xs: { fontSize: '$xs' },
+      sm: { fontSize: '$sm' },
+      md: { fontSize: '$md' },
+      lg: { fontSize: '$lg' },
+      xl: { fontSize: '$xl' },
+      '2xl': { fontSize: '$2xl' },
+      '4xl': { fontSize: '$4xl' },
+      '5xl': { fontSize: '$5xl' },
+      '6xl': { fontSize: '$6xl' },
+      '7xl': { fontSize: '$7xl' },
+      '8xl': { fontSize: '$8xl' },
+      '9xl': { fontSize: '$9xl' },
+    },
+    variant: {
+      default: { color: '$smokedWhite' },
+      primary: { color: '$primary' },
+      danger: { color: '$danger' },
+      success: { color: '$success' },
+      warning: { color: '$warning' },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+  },
+})
+
+export interface TextProps extends ComponentProps<typeof Text> {
+  as?: ElementType
+}
+
+Text.displayName = 'Text'

package/src/components/TextArea/index.tsx

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react'
+import { InputBox } from '../InputBox'
+import { TextAreaInput } from './styles'
+
+export interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
+  label?: string
+  error?: string
+}
+
+export function TextArea({ label, error, ...props }: TextAreaProps) {
+  return (
+    <InputBox label={label} error={error}>
+      <TextAreaInput {...props} errored={!!error} />
+    </InputBox>
+  )
+}
+
+TextArea.displayName = 'TextArea'

package/src/components/TextArea/styles.ts

@@ -0,0 +1,42 @@
+import { styled } from '../../styles'
+
+export const TextAreaInput = styled('textarea', {
+  backgroundColor: '$gray900',
+  padding: '$3 $4',
+  borderRadius: '$sm',
+  boxSizing: 'border-box',
+  border: '2px solid $gray900',
+
+  fontFamily: '$default',
+  fontSize: '$sm',
+  color: '$white',
+  fontWeight: '$regular',
+  resize: 'vertical',
+  minHeight: 80,
+
+  '&:focus': {
+    outline: 0,
+    borderColor: '$primary',
+  },
+
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
+  '&:placeholder': {
+    color: '$gray400',
+  },
+
+  variants: {
+    errored: {
+      true: {
+        borderColor: '$danger',
+      },
+    },
+  },
+
+  defaultVariants: {
+    errored: false,
+  },
+})

package/src/components/TextInput/index.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react'
+import { Input, Prefix, TextInputContainer } from './styles'
+import { InputBox } from '../InputBox'
+
+export interface TextInputProps extends ComponentProps<typeof Input> {
+  label?: string
+  prefix?: string
+  error?: string
+}
+
+export function TextInput({ label, prefix, error, ...props }: TextInputProps) {
+  return (
+    <InputBox label={label} error={error}>
+      <TextInputContainer errored={!!error}>
+        {!!prefix && <Prefix>{prefix}</Prefix>}
+        <Input {...props} />
+      </TextInputContainer>
+    </InputBox>
+  )
+}
+
+TextInput.displayName = 'TextInput'