@spies-ui/react 1.0.1 → 1.0.3

package/src/components/Checkbox/styles.ts

@@ -1,84 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

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

package/src/components/Text.tsx

@@ -1,45 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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'

package/src/components/TextInput/styles.ts

@@ -1,61 +0,0 @@
-import { styled } from '../../styles'
-
-export const TextInputContainer = styled('div', {
-  backgroundColor: '$gray900',
-  padding: '$3 $4',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  border: '2px solid $gray900',
-  display: 'flex',
-  alignItems: 'baseline',
-
-  '&:has(input:focus)': {
-    borderColor: '$primary',
-  },
-
-  '&:has(input:disabled)': {
-    opacity: 0.5,
-    cursor: 'not-alowed',
-  },
-
-  variants: {
-    errored: {
-      true: {
-        borderColor: '$danger',
-      },
-    },
-  },
-
-  defaultVariants: {
-    errored: false,
-  },
-})
-
-export const Prefix = styled('span', {
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$gray400',
-  fontWeight: 'regular',
-})
-
-export const Input = styled('input', {
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$smokedWhite',
-  fontWeight: 'regular',
-  background: 'transparent',
-  border: 0,
-  width: '100%',
-
-  '&:focus': {
-    outline: 0,
-  },
-
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-
-  '&:placeholder': {
-    color: '$gray400',
-  },
-})

package/src/index.tsx

@@ -1,9 +0,0 @@
-export * from './components/Box'
-export * from './components/Text'
-export * from './components/Heading'
-export * from './components/Avatar'
-export * from './components/Button'
-export * from './components/TextInput'
-export * from './components/TextArea'
-export * from './components/Checkbox'
-export * from './components/Dropdown'

package/src/styles/index.ts

@@ -1,36 +0,0 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  radii,
-  space,
-} from '@spies-ui/tokens'
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-  },
-  theme: {
-    colors,
-    fontSizes,
-    fontWeights,
-    fonts,
-    lineHeights,
-    radii,
-    space,
-  },
-})

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "@spies-ui/ts-config/react.json",
-  "include": ["src"]
-}