@chem-po/react-web 0.0.5 → 0.0.6

package/src/contexts/theme.ts

@@ -0,0 +1,316 @@
+import { switchAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers, extendTheme } from '@chakra-ui/react'
+import { cssVar } from '@chakra-ui/theme-tools'
+import { palette } from '@chem-po/core'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  switchAnatomy.keys,
+)
+
+const switchBaseTheme = definePartsStyle({
+  // define the part you're going to style
+  track: {
+    _focusVisible: {
+      boxShadow: 'none',
+    },
+  },
+})
+
+export const switchTheme = defineMultiStyleConfig({ baseStyle: switchBaseTheme })
+const $arrowBg = cssVar('popper-arrow-bg')
+
+export const headingFont = 'Encode Sans'
+export const bodyFont = 'Noto Sans'
+
+export const baseTheme = extendTheme({
+  semanticTokens: {
+    colors: {
+      background: {
+        // 100: mode('gray.50', palette.gray.dark)(props),
+        // 200: mode('gray.100', palette.gray.medium)(props),
+        // 300: mode('gray.200', palette.gray.light)(props),
+        // 400: mode('gray.300', palette.gray.lighter)(props),
+        50: {
+          default: 'white',
+          _dark: palette.gray.darker,
+        },
+        100: {
+          default: 'gray.100',
+          _dark: palette.gray.dark,
+        },
+        200: {
+          default: '#efefef',
+          _dark: palette.gray.medium,
+        },
+      },
+      accent: {
+        50: {
+          default: 'blue.50',
+          _dark: 'blue.900',
+        },
+        100: {
+          default: 'blue.100',
+          _dark: 'blue.800',
+        },
+        200: {
+          default: 'blue.200',
+          _dark: 'blue.700',
+        },
+        300: {
+          default: 'blue.300',
+          _dark: 'blue.600',
+        },
+        400: {
+          default: 'blue.400',
+          _dark: 'blue.500',
+        },
+        500: {
+          default: 'blue.500',
+          _dark: 'blue.400',
+        },
+        600: {
+          default: 'blue.600',
+          _dark: 'blue.300',
+        },
+        700: {
+          default: 'blue.700',
+          _dark: 'blue.200',
+        },
+        800: {
+          default: 'blue.800',
+          _dark: 'blue.100',
+        },
+        900: {
+          default: 'blue.900',
+          _dark: 'blue.50',
+        },
+      },
+      error: {
+        default: 'red.500',
+        _dark: 'red.300',
+      },
+    },
+    fonts: {
+      body: bodyFont,
+      heading: headingFont,
+    },
+  },
+  components: {
+    Badge: {
+      baseStyle: {
+        bg: '#9a9a9a',
+        textShadow: 'none',
+        color: 'white',
+        boxShadow: '1px 1px 3px #00000077',
+        _dark: {
+          bg: '#555555',
+          textShadow: '1px 1px 2px #00000077',
+          color: '#efefef',
+        },
+      },
+    },
+    Tooltip: {
+      baseStyle: {
+        bg: '#ababab',
+        textShadow: '0 0 3px rgba(0,0,0,0.5)',
+        color: 'white',
+        [$arrowBg.variable]: '#ababab',
+        _dark: {
+          bg: '#777777',
+          textShadow: 'none',
+          color: '#efefef',
+          [$arrowBg.variable]: '#777777',
+        },
+      },
+    },
+    Button: {
+      baseStyle: {
+        fontFamily: headingFont,
+        fontWeight: 500,
+        _focus: { boxShadow: 'none' },
+      },
+      variants: {
+        link: {
+          color: '#444',
+          _dark: { color: 'rgba(230,230,255,0.9)' },
+        },
+        ghost: {
+          _hover: { bg: 'blackAlpha.500' },
+        },
+        solid: {
+          textShadow: '1px 1px 3px #00000077',
+          bg: 'blackAlpha.400',
+          color: 'whiteAlpha.800',
+          _hover: {
+            bg: 'blackAlpha.500',
+          },
+          _dark: {
+            bg: 'whiteAlpha.300',
+            color: 'whiteAlpha.800',
+            _hover: {
+              bg: 'whiteAlpha.400',
+            },
+          },
+        },
+        outline: {
+          border: '1px solid',
+          borderColor: '#ababab',
+          color: '#656565',
+          _hover: {
+            bg: 'blackAlpha.100',
+          },
+          _dark: {
+            border: '1px solid #999',
+            color: '#999',
+            _hover: {
+              bg: 'whiteAlpha.300',
+            },
+          },
+        },
+      },
+    },
+    Tabs: {
+      baseStyle: {
+        tab: { _focus: { boxShadow: 'none' } },
+      },
+    },
+    Text: {
+      baseStyle: {
+        fontFamily: bodyFont,
+      },
+    },
+    Popover: {
+      baseStyle: {
+        root: { _focus: { boxShadow: 'none' } },
+        content: {
+          bg: 'background.100',
+          border: 'none',
+          boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+          [$arrowBg.variable]: 'background.100',
+          _dark: {
+            bg: 'background.100',
+            [$arrowBg.variable]: 'background.100',
+          },
+        },
+      },
+    },
+    Checkbox: {
+      baseStyle: {
+        control: {
+          _focus: { boxShadow: 'none' },
+          border: '2px solid #ababab',
+          borderColor: '#ababab',
+          _checked: {
+            bg: '#666666',
+            color: '#efefef',
+            border: 'none',
+          },
+          _hover: { bg: '#555', border: 'none' },
+          _dark: {
+            _checked: {
+              bg: '#efefef',
+              color: '#444444',
+              border: 'none',
+            },
+            _hover: { bg: '#555', border: 'none' },
+          },
+        },
+        label: {
+          color: '#888',
+          _dark: { color: '#999999' },
+          _checked: {
+            color: '#444444',
+            _dark: { color: '#cdcdcd' },
+          },
+        },
+      },
+      variants: {
+        noBox: {
+          control: {
+            bg: 'transparent',
+            _hover: { bg: 'none' },
+          },
+        },
+      },
+    },
+    Modal: {
+      baseStyle: {
+        dialog: {
+          bg: 'background.100',
+          boxShadow: '0 0 6px rgba(0,0,0,0.5)',
+          _dark: {
+            bg: 'background.100',
+          },
+        },
+      },
+    },
+    Input: {
+      baseStyle: {
+        field: {
+          _focus: {
+            boxShadow: 'none',
+            outline: 'none',
+            border: '1px solid #bcbcbc',
+          },
+        },
+      },
+      variants: {
+        text: {
+          field: {
+            borderRadius: 6,
+            border: '1px solid #dedede',
+            _focus: { boxShadow: 'none', borderColor: '#bcbcbc' },
+            _active: { boxShadow: 'none' },
+            _placeholder: { color: '#777' },
+            _dark: {
+              border: '1px solid #777',
+              _focus: { borderColor: '#999', boxShadow: 'none' },
+              _placeholder: { color: '#777' },
+            },
+          },
+        },
+      },
+      defaultProps: {
+        variant: 'text',
+      },
+    },
+    Switch: switchTheme,
+    Menu: {
+      baseStyle: {
+        list: {
+          bg: 'background.100',
+          border: 'none',
+          boxShadow: '0 0 6px rgba(0,0,0,0.5)',
+          _dark: {
+            bg: 'background.100',
+          },
+        },
+        item: {
+          _hover: {
+            bg: 'rgba(0,0,0,0.3)',
+          },
+          _focus: {
+            bg: 'rgba(0,0,0,0.2)',
+          },
+        },
+      },
+    },
+    Progress: {
+      baseStyle: {
+        track: {
+          bg: 'blackAlpha.300',
+          borderRadius: 'full',
+          _dark: {
+            bg: 'whiteAlpha.300',
+          },
+        },
+        filledTrack: {
+          bg: 'blackAlpha.400',
+          _dark: {
+            bg: 'whiteAlpha.500',
+          },
+        },
+      },
+    },
+  },
+})

package/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}

package/src/hooks/index.ts

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

package/src/hooks/ui/index.ts

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

package/src/hooks/ui/useBorderColor.ts

@@ -0,0 +1,4 @@
+import { useColorModeValue } from '@chakra-ui/react'
+
+// TODO: these need to be updated to use chakra theme
+export const useBorderColor = () => useColorModeValue('#00000033', '#ffffff33')

package/src/store/index.ts

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

package/src/store/usePlayer.ts

@@ -0,0 +1,75 @@
+import { Playlist, SpotifyTrack, WithId } from '@chem-po/core'
+import { MotionValue } from 'framer-motion'
+import { Howl } from 'howler'
+import { useMemo } from 'react'
+import { create } from 'zustand'
+
+export type SetMediaArgs =
+  | { playlist: PlaylistInterface; media?: never }
+  | { media: WithId<SpotifyTrack>; playlist?: never }
+export interface AudioPlayerApi {
+  play: () => void
+  pause: () => void
+  goNext: () => void
+  goPrev: () => void
+  canGoNext: boolean
+  canGoPrev: boolean
+  sound: Howl | null
+  trackProgress: MotionValue<number>
+  seek: (to: number) => void
+  setMedia: (args: SetMediaArgs) => void
+  stop: () => void
+  loop: (loop: boolean) => void
+}
+
+export interface PlaylistInterface extends Playlist {
+  currentId: string | null
+}
+interface UsePlayerData {
+  isPlaying: boolean
+  isLoading: boolean
+  fetchingMedia: WithId<SpotifyTrack> | null
+  playlist: PlaylistInterface | null
+  media: WithId<SpotifyTrack> | null
+  repeat: boolean
+  shuffle: boolean
+  api: AudioPlayerApi
+  volume: number
+}
+
+export const usePlayer = create<UsePlayerData>(() => ({
+  isPlaying: false,
+  media: null,
+  isLoading: false,
+  fetchingMedia: null,
+  shuffle: false,
+  playlist: null,
+  volume: 0.5,
+  repeat: false,
+  api: {
+    pause: () => {},
+    play: () => {},
+    canGoNext: false,
+    canGoPrev: false,
+    goNext: () => {},
+    goPrev: () => {},
+    seek: () => {},
+    sound: null,
+    trackProgress: new MotionValue(0),
+    setMedia: () => {},
+    stop: () => {},
+    loop: () => {},
+  },
+}))
+
+export const useActiveMedia = () => {
+  const { media, playlist } = usePlayer()
+  return useMemo(() => {
+    if (playlist) {
+      return playlist.currentId !== null
+        ? (playlist.items.find(i => i.id === playlist.currentId) ?? null)
+        : null
+    }
+    return media
+  }, [playlist, media])
+}

package/src/store/useScreen.ts

@@ -0,0 +1,22 @@
+import { useScreen } from '@chem-po/react'
+
+export const initializeScreen = () => {
+  if (typeof window !== 'undefined') {
+    const onResize = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      useScreen.setState({
+        width,
+        height,
+        isMobile: width < 769,
+        isPortrait: width < height,
+      })
+      window.addEventListener('resize', onResize)
+    }
+    onResize()
+    return () => {
+      window.removeEventListener('resize', onResize)
+    }
+  }
+  return () => {}
+}