@chem-po/react-web 0.0.5 → 0.0.7

package/src/components/media/PlayButton.tsx

@@ -0,0 +1,94 @@
+import { ButtonProps, Center, IconButton, Image } from '@chakra-ui/react'
+import { SpotifyTrack, WithId } from '@chem-po/core'
+import { usePlaylist } from '@chem-po/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

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

package/src/components/modal/DefaultModal.tsx

@@ -0,0 +1,18 @@
+import { useScreen } from '@chem-po/react'
+import { 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

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

package/src/components/modal/ForceMobile.tsx

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

@@ -0,0 +1,89 @@
+import { Flex, useColorModeValue } from '@chakra-ui/react'
+import { useMobileFrame } from '@chem-po/react'
+import { 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

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

package/src/components/modal/type.ts

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

@@ -0,0 +1,101 @@
+import { Button, Flex, Image, useColorModeValue } from '@chakra-ui/react'
+import { palette } from '@chem-po/core'
+import { useViews, View } from '@chem-po/react'
+import { PropsWithChildren, useMemo } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+
+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

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

package/src/components/overlay/ImageViewOverlay.tsx

@@ -0,0 +1,88 @@
+import { CloseIcon } from '@chakra-ui/icons'
+import { Center, IconButton, Image, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import { useScreen } from '@chem-po/react'
+import { 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

@@ -0,0 +1,22 @@
+import { Flex, FlexProps, Portal } from '@chakra-ui/react'
+import { useMobileFrame } from '@chem-po/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

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

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

@@ -0,0 +1,16 @@
+import { Box, BoxProps, Text, TextProps } from '@chakra-ui/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

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

package/src/components/text/NumberTicker.tsx

@@ -0,0 +1,28 @@
+import { 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

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

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

@@ -0,0 +1,40 @@
+import { MoonIcon, SunIcon } from '@chakra-ui/icons'
+import { Flex, FlexProps, IconButton, useColorMode, useColorModeValue } from '@chakra-ui/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

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

package/src/components/theme/index.ts

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

package/src/components/view/ErrorView.tsx

@@ -0,0 +1,13 @@
+import { Flex, Text, useColorModeValue } from '@chakra-ui/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

@@ -0,0 +1,42 @@
+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<any>()
+  const authLoading = useAuth(s => s.loading)
+
+  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

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

package/src/contexts/index.ts

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