diff --git a/components/pages/Lists.jsx b/components/pages/Lists.jsx index 986807f..566211b 100644 --- a/components/pages/Lists.jsx +++ b/components/pages/Lists.jsx @@ -1,5 +1,3 @@ -import Link from '../../components/Link'; - import Store from '../../store'; import * as selectors from '../../store/selectors'; @@ -12,7 +10,6 @@ import { IonItem, IonLabel, } from '@ionic/react'; -import { useEffect, useState } from 'react'; const ListEntry = ({ list, ...props }) => ( diff --git a/components/ui/Backdrop.jsx b/components/ui/Backdrop.jsx deleted file mode 100644 index 29370b8..0000000 --- a/components/ui/Backdrop.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import classNames from 'classnames'; -import { useCallback, useEffect, useState } from 'react'; - -const Backdrop = ({ open, onClose }) => { - return ( -
- ); -}; - -export default Backdrop; diff --git a/components/ui/Button.jsx b/components/ui/Button.jsx deleted file mode 100644 index 207b33a..0000000 --- a/components/ui/Button.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import classNames from 'classnames'; - -const Button = ({ children, className, ...props }) => ( - -); - -export default Button; diff --git a/components/ui/EdgeDrag.jsx b/components/ui/EdgeDrag.jsx deleted file mode 100644 index ab1512c..0000000 --- a/components/ui/EdgeDrag.jsx +++ /dev/null @@ -1,3 +0,0 @@ -const EdgeDrag = () => null; - -export default EdgeDrag; diff --git a/components/ui/Icon.jsx b/components/ui/Icon.jsx deleted file mode 100644 index bc1acc3..0000000 --- a/components/ui/Icon.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import classNames from 'classnames'; - -const Icon = ({ icon, ...props }) => { - const svg = icon.replace('data:image/svg+xml;utf8,', ''); - return ( -
-
-
- ); -}; - -export default Icon; diff --git a/components/ui/List.jsx b/components/ui/List.jsx deleted file mode 100644 index af144c1..0000000 --- a/components/ui/List.jsx +++ /dev/null @@ -1,3 +0,0 @@ -const List = ({ children, ...props }) =>
{children}
; - -export default List; diff --git a/components/ui/ListItem.jsx b/components/ui/ListItem.jsx deleted file mode 100644 index 3f0e30e..0000000 --- a/components/ui/ListItem.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import classNames from 'classnames'; - -const ListItem = ({ children, className, ...props }) => ( -
- {children} -
-); - -export default ListItem; diff --git a/components/ui/Menu.jsx b/components/ui/Menu.jsx deleted file mode 100644 index 64a9251..0000000 --- a/components/ui/Menu.jsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Plugins } from '@capacitor/core'; -import classNames from 'classnames'; -import { useEffect, useRef, useState } from 'react'; - -import { useDrag } from 'react-use-gesture'; - -const { DarkMode } = Plugins; - -const Menu = ({ open, onClose, children, className, ...props }) => { - const ref = useRef(); - const [x, setX] = useState(-100000); - const [rect, setRect] = useState(null); - const [dragging, setDragging] = useState(false); - - useEffect(async () => { - try { - let darkmodeConfig = await DarkMode.isDarkModeOn(); - console.log({ open, darkMode: darkmodeConfig.isDarkModeOn }); - Plugins.StatusBar.setStyle({ - style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK', - }).catch(() => {}); - } catch (e) {} - }, [open]); - - useEffect(() => { - const rect = ref.current?.getBoundingClientRect(); - setRect(rect); - setX(-rect.width); - }, []); - - useEffect(() => { - if (open) { - setX(0); - } else if (rect) { - setX(-rect.width); - } - }, [rect, open]); - - const bind = useDrag( - ({ down, movement: [mx] }) => { - setX(mx > 0 ? 0 : mx); - - if (down) { - setDragging(true); - } else { - setDragging(false); - } - - // If the drag ended, snap the menu back - if (!down) { - const mid = -rect.width; - if (x < mid / 2) { - // Close - setX(-rect.width); - onClose(); - } else { - // Re-open - setX(0); - } - } - }, - { - axis: 'x', - } - ); - - return ( -
- {children} -
- ); -}; - -export default Menu; diff --git a/components/ui/Modal.jsx b/components/ui/Modal.jsx deleted file mode 100644 index ebb2741..0000000 --- a/components/ui/Modal.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import classNames from 'classnames'; -import { useCallback, useContext, useEffect, useRef, useState } from 'react'; -import { useDrag } from 'react-use-gesture'; -import Store from '../../store'; -import { SafeAreaContext } from './SafeArea'; - -// A Modal window that slides in from offscreen and can be closed -// by dragging. -const Modal = ({ open, onClose, children }) => { - const ref = useRef(); - const [dragging, setDragging] = useState(false); - const [rect, setRect] = useState(null); - const [y, setY] = useState(100000); - - const { top: safeAreaTop } = useContext(SafeAreaContext); - - const _open = useCallback(() => { - setY(safeAreaTop); - }, [safeAreaTop]); - - const _close = useCallback(() => { - if (!rect) { - return; - } - setY(rect.height + safeAreaTop); - }, [safeAreaTop, rect]); - - // Get the layout rectangle for the modal - useEffect(() => { - const rect = ref.current?.getBoundingClientRect(); - setRect(rect); - _close(); - }, [safeAreaTop]); - - // If open changes, open/close the modal - useEffect(() => { - if (open) { - _open(); - } else { - _close(); - } - }, [rect, open, _open, _close]); - - const bind = useDrag( - ({ down, movement: [mx, my] }) => { - setY(my < 0 ? safeAreaTop : my + safeAreaTop); - - if (down) { - setDragging(true); - } else { - setDragging(false); - } - - // If the drag ended, snap the menu back open or close it - if (!down) { - const mid = rect.height; - if (y > mid / 2) { - // Close - _close(); - onClose(); - } else { - // Re-open - _open(); - } - } - }, - { - axis: 'y', - } - ); - - return ( -
- {children} -
- ); -}; - -export default Modal; diff --git a/components/ui/Nav.jsx b/components/ui/Nav.jsx deleted file mode 100644 index d7e2ef0..0000000 --- a/components/ui/Nav.jsx +++ /dev/null @@ -1,203 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { Plugins } from '@capacitor/core'; -import * as actions from '../../store/actions'; - -const Nav = ({ page }) => { - const [showProfileMenu, setShowProfileMenu] = useState(false); - - const title = typeof page?.title === 'function' ? page?.title() : page?.title || ''; - - useEffect(() => { - Plugins.StatusBar.setStyle({ - style: 'DARK', - }).catch(() => {}); - }, []); - - return ( - - ); -}; - -export default Nav; diff --git a/components/ui/README.md b/components/ui/README.md deleted file mode 100644 index a368341..0000000 --- a/components/ui/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# UI Components - -These components are a mini-tailwind UI framework for building native mobile apps with web technologies. - -These components are meant to be modified and customized to fit your app, and provide many common mobile UI patterns. diff --git a/components/ui/SafeArea.jsx b/components/ui/SafeArea.jsx deleted file mode 100644 index efe53a0..0000000 --- a/components/ui/SafeArea.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import { createContext, useEffect, useState } from 'react'; - -export const SafeAreaContext = createContext({ top: 0, bottom: 0 }); - -// This provider reads and stores the computed safe area -// on devices with notches/etc. (iPhone X, for example) -// -// This is done by reading the CSS Properties --safe-area-top and --safe-area-bottom -// and then storing them as state values. -// -// These values are useful for JS-driven interactions, such as a modal that -// will drag in and out but needs to offset for the safe region. -export const SafeAreaProvider = ({ children }) => { - const [safeArea, setSafeArea] = useState({ top: 0, right: 0, bottom: 0, left: 0 }); - - useEffect(() => { - // I don't know why, but we can't get the value of this CSS variable - // until a bit of a delay, maybe something with Next? - setTimeout(() => { - const safeAreaTop = parseInt( - window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top') - ); - const safeAreaBottom = parseInt( - window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom') - ); - const safeAreaLeft = parseInt( - window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left') - ); - const safeAreaRight = parseInt( - window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-right') - ); - - setSafeArea({ - top: safeAreaTop, - right: safeAreaRight, - bottom: safeAreaBottom, - left: safeAreaLeft, - }); - }, 500); - }, []); - - return {children}; -};