@chem-po/react-web 0.0.51 → 0.0.53

package/src/contexts/theme.ts

@@ -1,316 +0,0 @@
-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/contexts/view.tsx

@@ -1,26 +0,0 @@
-import { BaseUserData, getUserViews, getViewRoutes, View } from '@chem-po/core'
-import { useAuth } from '@chem-po/react'
-import React, { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react'
-import { RouteObject } from 'react-router'
-
-export const ViewsContext = createContext<
-  Array<{ view: View<FC, BaseUserData>; routes: RouteObject[] }>
->([])
-
-export const useViews = () => useContext(ViewsContext)
-
-export const ViewsProvider = ({
-  children,
-  views,
-}: PropsWithChildren & { views: Array<View<FC, BaseUserData>> }) => {
-  const user = useAuth(s => s.user)
-  const value = useMemo(
-    () =>
-      getUserViews(views, user).map(view => ({
-        view,
-        routes: getViewRoutes(view),
-      })),
-    [user, views],
-  )
-  return <ViewsContext.Provider value={value}>{children}</ViewsContext.Provider>
-}

package/src/custom.d.ts

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

package/src/hooks/index.ts

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

package/src/hooks/ui/index.ts

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

package/src/hooks/ui/useBorderColor.ts

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

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './components'
-export * from './contexts'
-export * from './hooks'
-export * from './store'
-export * from './types'

package/src/store/index.ts

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

package/src/store/usePlayer.ts

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

@@ -1,22 +0,0 @@
-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 () => {}
-}

package/src/types/forms.ts

@@ -1,5 +0,0 @@
-import { BaseCustomInput, BaseCustomInputProps } from '@chem-po/react'
-import { CSSProperties } from 'react'
-
-export type CustomInput<Value> = BaseCustomInput<Value, CSSProperties, CSSProperties>
-export type CustomInputProps<Value> = BaseCustomInputProps<Value, CSSProperties, CSSProperties>

package/src/types/index.ts

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