@chem-po/react-web 0.0.51 → 0.0.53

package/src/components/loading/index.ts

@@ -1,4 +0,0 @@
-export * from './CircularProgress'
-export * from './Loading'
-export * from './LoadingImage'
-export * from './LoadingSwitch'

package/src/components/media/PlayButton.tsx

@@ -1,95 +0,0 @@
-import { ButtonProps, Center, IconButton, Image } from '@chakra-ui/react'
-import { SpotifyTrack, WithId } from '@chem-po/core'
-import { usePlaylist } from '@chem-po/react'
-import React from 'react'
-import { useActiveMedia, usePlayer } from '../../store/usePlayer'
-
-export const PlayButton = ({
-  media,
-  size = 50,
-  opacity = 0.8,
-  // withThumbnail,
-  buttonProps,
-}: {
-  media: WithId<SpotifyTrack> | null
-  size?: number
-  opacity?: number
-  withThumbnail?: boolean
-  buttonProps?: ButtonProps
-}) => {
-  const { id: mediaId } = media ?? {}
-  const { playlist } = usePlaylist()
-  const api = usePlayer(s => s.api)
-  const playerIsPlaying = usePlayer(s => s.isPlaying)
-  const playerIsLoading = usePlayer(s => s.isLoading)
-  const currentMedia = useActiveMedia()
-  const isPlaying = playerIsPlaying && currentMedia?.id === mediaId
-  const isFetching = playerIsLoading && currentMedia?.id === mediaId
-
-  return (
-    <IconButton
-      boxShadow="md"
-      p={1}
-      height={`${size}px`}
-      width={`${size}px`}
-      minW="0"
-      minH="0"
-      borderRadius="full"
-      isLoading={isFetching}
-      aria-label="play/pause"
-      onClick={e => {
-        e.stopPropagation()
-        if (!media) return
-        if (currentMedia?.id === mediaId) {
-          if (playerIsPlaying) api.pause()
-          else api.play()
-        } else if (playlist) {
-          api.setMedia({
-            playlist: {
-              ...playlist,
-              currentId: mediaId ?? null,
-            },
-          })
-        } else {
-          api.setMedia({ media })
-        }
-      }}
-      style={{ background: '#eee' }}
-      {...buttonProps}
-      icon={
-        <Center borderRadius="full" height={`${size}px`} width={`${size}px`}>
-          {/* {
-            media ? (
-              <StorageImage
-                borderRadius='full'
-                position='absolute'
-                objectFit='cover'
-                width='100%'
-                height='100%'
-                storagePath={`${media.storageDir}/photoFile`}
-                alt={media.title}
-                />
-            ) : null
-          } */}
-          <Image
-            opacity={isPlaying ? opacity : 0}
-            width="100%"
-            transition="all 0.2s ease-in-out"
-            src="/svg/pause.svg"
-            filter="invert(100%) drop-shadow(0 0 4px black)"
-            transform={`scale(${isPlaying ? 0.8 : 1})`}
-          />
-          <Image
-            position="absolute"
-            width="100%"
-            opacity={isPlaying ? 0 : opacity}
-            transition="all 0.2s ease-in-out"
-            filter="invert(100%) drop-shadow(0 0 3px black)"
-            src="/svg/play.svg"
-            transform={`scale(${!isPlaying ? 0.8 : 1})`}
-          />
-        </Center>
-      }
-    />
-  )
-}

package/src/components/media/index.ts

@@ -1 +0,0 @@
-export * from './PlayButton'

package/src/components/modal/DefaultModal.tsx

@@ -1,18 +0,0 @@
-import { useScreen } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { DesktopModal } from './DesktopModal'
-import { useForceMobile } from './ForceMobile'
-import { MobileModal } from './MobileModal'
-import { DefaultModalProps } from './type'
-
-export const DefaultModal = (props: DefaultModalProps) => {
-  const isMobile = useScreen(s => s.isMobile)
-
-  const forceMobile = useForceMobile()
-  const Component = useMemo(
-    () => (isMobile || forceMobile ? MobileModal : DesktopModal),
-    [isMobile, forceMobile],
-  )
-
-  return <Component {...props} />
-}

package/src/components/modal/DesktopModal.tsx

@@ -1,16 +0,0 @@
-import { Box, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
-import { useBackgroundColor } from '@chem-po/react'
-import React from 'react'
-import { DefaultModalProps } from './type'
-
-export const DesktopModal = ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => {
-  const bg = useBackgroundColor(100)
-  return (
-    <Modal scrollBehavior="inside" isCentered isOpen={isOpen} {...props}>
-      <ModalOverlay />
-      <ModalContent position="relative" overflowY="auto" bg={bg} {...contentProps}>
-        <Box>{children}</Box>
-      </ModalContent>
-    </Modal>
-  )
-}

package/src/components/modal/ForceMobile.tsx

@@ -1,7 +0,0 @@
-import React, { PropsWithChildren, useContext } from 'react'
-
-const ForceMobileContext = React.createContext(false)
-export const ForceMobile = ({ children }: PropsWithChildren) => (
-  <ForceMobileContext.Provider value={true}>{children}</ForceMobileContext.Provider>
-)
-export const useForceMobile = () => useContext(ForceMobileContext)

package/src/components/modal/MobileModal.tsx

@@ -1,89 +0,0 @@
-import { Flex, useColorModeValue } from '@chakra-ui/react'
-import { useMobileFrame } from '@chem-po/react'
-import React, { useEffect, useRef, useState } from 'react'
-import { MobileOverlay } from '../overlay/MobileOverlay'
-import { DefaultModalProps } from './type'
-
-export const MobileOverlayBackground = ({ onClick }: { onClick?: () => void }) => (
-  <Flex
-    onClick={onClick}
-    w="100%"
-    h="100%"
-    position="absolute"
-    bg="blackAlpha.400"
-    transition="opacity 300ms"
-  />
-)
-
-export const MobileModal = ({
-  isOpen,
-  onClose,
-  children,
-  contentProps,
-  onContentMounted,
-  closeOnOverlayClick,
-}: DefaultModalProps) => {
-  const { height, width } = useMobileFrame()
-
-  const bg = useColorModeValue('gray.100', '#454545')
-
-  const [isMounted, setIsMounted] = useState(false)
-  const [contentMounted, setContentMounted] = useState(false)
-
-  const unmountTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const contentMountTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
-  useEffect(() => {
-    if (unmountTimeout.current) {
-      clearTimeout(unmountTimeout.current)
-      unmountTimeout.current = null
-    }
-
-    if (contentMountTimeout.current) {
-      clearTimeout(contentMountTimeout.current)
-      contentMountTimeout.current = null
-    }
-
-    if (isOpen) {
-      setIsMounted(true)
-      contentMountTimeout.current = setTimeout(() => {
-        setContentMounted(true)
-        if (onContentMounted) onContentMounted(true)
-      }, 50)
-    } else {
-      setContentMounted(false)
-      if (onContentMounted) onContentMounted(false)
-      unmountTimeout.current = setTimeout(() => {
-        setIsMounted(false)
-      }, 300)
-    }
-    return () => {
-      if (unmountTimeout.current) {
-        clearTimeout(unmountTimeout.current)
-        unmountTimeout.current = null
-      }
-      if (contentMountTimeout.current) {
-        clearTimeout(contentMountTimeout.current)
-        contentMountTimeout.current = null
-      }
-    }
-  }, [isOpen, onContentMounted])
-  return isMounted ? (
-    <MobileOverlay
-      opacity={contentMounted ? 1 : 0}
-      pointerEvents={contentMounted ? 'auto' : 'none'}>
-      <MobileOverlayBackground onClick={closeOnOverlayClick !== false ? onClose : undefined} />
-      <Flex
-        width={`${width - 10}px`}
-        maxH={`${height - 10}px`}
-        overflowY="auto"
-        overflowX="hidden"
-        minH="100px"
-        bg={bg}
-        borderRadius={6}
-        position="relative"
-        {...contentProps}>
-        {children}
-      </Flex>
-    </MobileOverlay>
-  ) : null
-}

package/src/components/modal/index.ts

@@ -1,3 +0,0 @@
-export * from './DefaultModal'
-export * from './DesktopModal'
-export * from './MobileModal'

package/src/components/modal/type.ts

@@ -1,7 +0,0 @@
-import { ModalContentProps, ModalProps } from '@chakra-ui/react'
-import { PropsWithChildren } from 'react'
-
-export type DefaultModalProps = PropsWithChildren<Omit<ModalProps, 'render'>> & {
-  contentProps?: ModalContentProps
-  onContentMounted?: (mounted: boolean) => void
-}

package/src/components/nav/NavBar.tsx

@@ -1,102 +0,0 @@
-import { Button, Flex, Image, useColorModeValue } from '@chakra-ui/react'
-import { palette } from '@chem-po/core'
-import { View } from '@chem-po/react'
-import React, { PropsWithChildren, useMemo } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { useViews } from '../../contexts/view'
-
-export const NAV_BAR_HEIGHT = 50
-
-const NavBarLink = ({ view, absolute }: { view: View; absolute: boolean }) => {
-  const { path: paths, name, icon, iconScale } = view
-  const path = Array.isArray(paths) ? paths[0] : paths
-
-  // const hoverBg = useColorModeValue('#00000033', '#f7f7f777')
-  // const textColor = useColorModeValue('#777', '#cdcdcd')
-  const iconBrightness = useColorModeValue(1, 1.8)
-  const usedBrightness = useMemo(
-    () => (absolute ? 2.4 : iconBrightness),
-    [absolute, iconBrightness],
-  )
-  const { pathname } = useLocation()
-  const hoverBg = useColorModeValue('#ffffff33', '#00000033')
-  const body = (
-    <Button
-      pointerEvents={pathname === path ? 'none' : 'auto'}
-      opacity={pathname === path ? 1 : 0.7}
-      width="100%"
-      height="100%"
-      borderRadius={0}
-      flexFlow="column"
-      _hover={{
-        bg: hoverBg,
-      }}
-      variant="unstyled"
-      display="flex"
-      alignItems="center"
-      justifyContent="center">
-      <Image
-        height={`${34 * (iconScale ?? 1)}px`}
-        filter={`brightness(${usedBrightness})${
-          absolute ? ' drop-shadow(1px 1px 3px #00000099 )' : ''
-        }`}
-        src={icon}
-        alt={name}
-      />
-      {/* <Text color={textColor} lineHeight={1} fontWeight={400} fontSize='xs'>
-          {name}
-        </Text> */}
-    </Button>
-  )
-  return pathname === path ? (
-    <Flex key={path} flex={1} h="100%" justify="center">
-      {body}
-    </Flex>
-  ) : (
-    <Link
-      key={path}
-      style={{
-        flex: 1,
-        display: 'flex',
-        height: '100%',
-        justifyContent: 'center',
-      }}
-      to={path}>
-      {body}
-    </Link>
-  )
-}
-
-export const NavBar = ({
-  selectedView,
-  children,
-}: PropsWithChildren<{ selectedView?: View | null }>) => {
-  const bg = useColorModeValue('#dedede', palette.gray.dark)
-  const defaultBorderColor = useColorModeValue('#00000022', '#ffffff33')
-  const views = useViews()
-  const menuViews = useMemo(() => views.filter(v => !!v.view.icon), [views])
-  const isAbsolute = useMemo(() => !!selectedView?.navBar?.absolute, [selectedView])
-  const background = useMemo(() => selectedView?.navBar?.backgroundColor ?? bg, [bg, selectedView])
-  const borderColor = useMemo(() => {
-    if (selectedView?.navBar?.borderColor) return !!selectedView?.navBar?.borderColor
-    return isAbsolute ? '#ffffff33' : defaultBorderColor
-  }, [defaultBorderColor, selectedView, isAbsolute])
-  return (
-    <Flex
-      position="absolute"
-      bottom={0}
-      left={0}
-      bg={background}
-      w="100%"
-      transition="all 500ms"
-      h={`${NAV_BAR_HEIGHT}px`}
-      borderTop={`1px solid ${borderColor}`}>
-      <Flex position="relative" w="100%" justify="space-around" align="center">
-        {menuViews.map(({ view }) => (
-          <NavBarLink absolute={isAbsolute} key={view.name} view={view} />
-        ))}
-        {children}
-      </Flex>
-    </Flex>
-  )
-}

package/src/components/nav/index.ts

@@ -1 +0,0 @@
-export * from './NavBar'

package/src/components/overlay/ImageViewOverlay.tsx

@@ -1,88 +0,0 @@
-import { CloseIcon } from '@chakra-ui/icons'
-import { Center, IconButton, Image, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
-import { useScreen } from '@chem-po/react'
-import React, { SyntheticEvent, useCallback, useMemo, useState } from 'react'
-import { LoadingLogo } from '../loading/Loading'
-
-export const ImageViewOverlay = ({ src, onClose }: { src: string; onClose: () => void }) => {
-  const [loading, setLoading] = useState(true)
-  const screenWidth = useScreen(s => s.width)
-  const screenHeight = useScreen(s => s.height)
-  const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
-
-  const { height, width } = useMemo(() => {
-    if (loading) return imageSize
-    const ratio = imageSize.width / imageSize.height
-    let h = Math.min(imageSize.height, screenHeight * 0.9)
-    let w = h * ratio
-    if (w > screenWidth * 0.9) {
-      w = Math.min(imageSize.width, screenWidth * 0.9)
-      h = w / ratio
-    }
-    return { height: h, width: w }
-  }, [screenHeight, screenWidth, imageSize, loading])
-
-  const onLoadStart = useCallback(() => setLoading(true), [])
-  const onLoad = useCallback((e: SyntheticEvent<HTMLImageElement>) => {
-    const { naturalWidth, naturalHeight } = e.currentTarget
-    setImageSize({ width: naturalWidth, height: naturalHeight })
-    setLoading(false)
-  }, [])
-  return (
-    <Modal size="full" isOpen onClose={onClose}>
-      <ModalOverlay bg="blackAlpha.700" />
-      <ModalContent
-        style={{ background: 'transparent' }}
-        pointerEvents="none"
-        width="100%"
-        height="100%">
-        <Center
-          pointerEvents="none"
-          position="fixed"
-          p={[4, 6, 8]}
-          top={0}
-          left={0}
-          right={0}
-          bottom={0}
-          zIndex={4}>
-          <Center
-            opacity={loading ? 0 : 1}
-            transition="all 500ms"
-            overflow="hidden"
-            w={`${width}px`}
-            height={`${height}px`}>
-            <Image
-              onLoadStart={onLoadStart}
-              onLoad={onLoad}
-              transition="opacity 300ms"
-              height="100%"
-              objectFit="contain"
-              borderRadius={4}
-              src={src}
-            />
-          </Center>
-          <IconButton
-            borderRadius="full"
-            position="absolute"
-            top={4}
-            right={4}
-            aria-label="close"
-            icon={<CloseIcon />}
-            onClick={onClose}
-          />
-        </Center>
-        <Center
-          position="absolute"
-          top={0}
-          left={0}
-          right={0}
-          bottom={0}
-          pointerEvents="none"
-          opacity={loading ? 1 : 0}
-          transition="opacity 300ms">
-          <LoadingLogo isLoading={loading} size={70} />
-        </Center>
-      </ModalContent>
-    </Modal>
-  )
-}

package/src/components/overlay/MobileOverlay.tsx

@@ -1,23 +0,0 @@
-import { Flex, FlexProps, Portal } from '@chakra-ui/react'
-import { useMobileFrame } from '@chem-po/react'
-import React from 'react'
-
-export const MobileOverlay = (props: FlexProps) => {
-  const { overlayRef } = useMobileFrame()
-
-  return (
-    <Portal containerRef={overlayRef}>
-      <Flex
-        justify="center"
-        align="center"
-        transition="opacity 300ms"
-        position="absolute"
-        left={0}
-        top={0}
-        height="100%"
-        width="100%"
-        {...props}
-      />
-    </Portal>
-  )
-}

package/src/components/overlay/index.ts

@@ -1,2 +0,0 @@
-export * from './ImageViewOverlay'
-export * from './MobileOverlay'

package/src/components/text/GradientText/index.tsx

@@ -1,17 +0,0 @@
-import { Box, BoxProps, Text, TextProps } from '@chakra-ui/react'
-import React from 'react'
-import './styles.css'
-
-export const GradientText = ({
-  children,
-  color,
-  background,
-  boxProps,
-  ...props
-}: TextProps & { boxProps?: BoxProps }) => (
-  <Box background={background} {...boxProps}>
-    <Text cursor="default" className="gradient-text" background={color} {...props}>
-      {children}
-    </Text>
-  </Box>
-)

package/src/components/text/GradientText/styles.css

@@ -1,5 +0,0 @@
-.gradient-text {
-  background-clip: text !important;
-  -webkit-background-clip: text !important;
-  -webkit-text-fill-color: transparent !important;
-}

package/src/components/text/NumberTicker.tsx

@@ -1,28 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-export const NumberTicker = ({ value, duration = 30 }: { value: number; duration?: number }) => {
-  const spanRef = useRef<HTMLSpanElement>(null)
-  const helperValue = useRef(value)
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  useEffect(() => {
-    intervalRef.current = setInterval(() => {
-      if (spanRef.current) {
-        if (helperValue.current === value && intervalRef.current)
-          return clearInterval(intervalRef.current)
-        if (helperValue.current < value) {
-          helperValue.current += 1
-          spanRef.current.innerText = helperValue.current.toString()
-        } else if (helperValue.current > value) {
-          helperValue.current -= 1
-          spanRef.current.innerText = helperValue.current.toString()
-        }
-      }
-      return () => {}
-    }, duration)
-    return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current)
-    }
-  }, [value, duration])
-
-  return <span ref={spanRef}>{value}</span>
-}

package/src/components/text/index.ts

@@ -1 +0,0 @@
-export * from './NumberTicker'

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -1,40 +0,0 @@
-import { MoonIcon, SunIcon } from '@chakra-ui/icons'
-import { Flex, FlexProps, IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react'
-import React from 'react'
-export const DarkModeToggle = () => {
-  const { colorMode, toggleColorMode } = useColorMode()
-  const bg = useColorModeValue('gray.200', 'whiteAlpha.200')
-  const color = useColorModeValue('blackAlpha.700', 'whiteAlpha.800')
-  const hoverBg = useColorModeValue('gray.300', 'whiteAlpha.300')
-  const hoverColor = useColorModeValue('gray.800', 'whiteAlpha.800')
-  return (
-    <IconButton
-      aria-label="Toggle dark mode"
-      bg={bg}
-      color={color}
-      borderRadius="full"
-      _hover={{
-        bg: hoverBg,
-        color: hoverColor,
-      }}
-      w={8}
-      h={8}
-      minW={0}
-      icon={
-        colorMode === 'light' ? (
-          <SunIcon w={4} h={4} />
-        ) : (
-          <MoonIcon w={4} h={4} filter="drop-shadow(1px 1px 2px #000000aa)" />
-        )
-      }
-      onClick={toggleColorMode}
-      variant="ghost"
-    />
-  )
-}
-
-export const AbsoluteDarkModeToggle = (props: FlexProps) => (
-  <Flex position="absolute" bottom={3} right={3} {...props}>
-    <DarkModeToggle />
-  </Flex>
-)

package/src/components/theme/colorMode/index.ts

@@ -1 +0,0 @@
-export * from './DarkModeToggle'

package/src/components/theme/index.ts

@@ -1 +0,0 @@
-export * from './colorMode'

package/src/components/view/ErrorView.tsx

@@ -1,14 +0,0 @@
-import { Flex, Text, useColorModeValue } from '@chakra-ui/react'
-import React from 'react'
-import { ContentBox } from '../box/ContentBox'
-
-export const ErrorView = ({ message }: { message?: string }) => {
-  const color = useColorModeValue('gray.600', 'gray.100')
-  return (
-    <Flex pt={4}>
-      <ContentBox>
-        <Text color={color}>{message ?? 'Sorry, something went wrong.'}</Text>
-      </ContentBox>
-    </Flex>
-  )
-}

package/src/components/view/RedirectView.tsx

@@ -1,43 +0,0 @@
-import { Center, HStack, Text, VStack } from '@chakra-ui/react'
-import { useAuth } from '@chem-po/react'
-import React, { useEffect, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { ContentBox } from '../box/ContentBox'
-import { CircularProgress } from '../loading/CircularProgress'
-import { Loading } from '../loading/Loading'
-
-export const RedirectView: React.FC<{ loading?: boolean }> = ({ loading }) => {
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const authLoading = useAuth(s => s.signInLoading)
-  const multiFactorLoading = useAuth(s => s.multiFactorLoading)
-
-  const navigate = useNavigate()
-  useEffect(() => {
-    if (!loading && !authLoading) {
-      timer.current = setTimeout(() => {
-        navigate('/')
-      }, 1500)
-    }
-    return () => {
-      if (timer.current) clearTimeout(timer.current)
-    }
-  }, [loading, navigate, authLoading])
-
-  return !loading && !authLoading ? (
-    <Center minH="100%" w="100%">
-      <ContentBox maxW="500px">
-        <HStack spacing={3}>
-          <CircularProgress size={6} />
-          <VStack spacing={0} align="flex-start">
-            <Text>404</Text>
-            <Text fontSize="sm" opacity={0.7}>
-              Page not found - redirecting to Home...
-            </Text>
-          </VStack>
-        </HStack>
-      </ContentBox>
-    </Center>
-  ) : (
-    <Loading />
-  )
-}

package/src/components/view/index.ts

@@ -1,2 +0,0 @@
-export * from './ErrorView'
-export * from './RedirectView'

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './theme'
-export * from './view'