hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-02-07 00:00:55 +11:00
parent e43b04990b
commit 8d184578f0
109 changed files with 3495 additions and 3632 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/generic/Blur.tsx
+2 -2
View File
@@ -14,14 +14,14 @@ export const Blur = ({
}: BlurProps): JSX.Element => {
return (
<div
className={`absolute inset-0 z-20 w-full h-full transition-opacity ${
className={`absolute inset-0 z-20 h-full w-full transition-opacity ${
disableOnMd ? 'md:hidden' : ''
} ${className}`}
{...props}
>
<div
onClick={onClick}
className={`absolute inset-0 w-full h-full backdrop-filter backdrop-blur-sm ${
className={`absolute inset-0 h-full w-full backdrop-blur-sm backdrop-filter ${
disableOnMd ? 'md:hidden' : ''
}`}
tabIndex={0}
src/components/generic/Drawer.tsx
-38
View File
@@ -1,38 +0,0 @@
import type React from 'react';
import { Blur } from '@components/generic/Blur';
type DefaultAsideProps = JSX.IntrinsicElements['aside'];
interface DrawerProps extends DefaultAsideProps {
open: boolean;
permenant?: boolean;
onClose: () => void;
}
export const Drawer = ({
open,
permenant,
onClose,
className,
children,
...props
}: DrawerProps): JSX.Element => {
return (
<>
{open && (
<Blur className={className} disableOnMd={true} onClick={onClose} />
)}
<aside
className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 border-gray-300 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
permenant ? '' : 'absolute'
} ${open ? 'translate-x-0' : '-translate-x-full'} ${className}`}
{...props}
>
{children}
</aside>
</>
);
};
src/components/generic/ListItem.tsx
+46
View File
@@ -0,0 +1,46 @@
import type React from 'react';
import { IconButton } from '@meshtastic/components';
export interface ListItemProps {
selected: boolean;
selectedIcon: JSX.Element;
actions?: JSX.Element;
status: JSX.Element;
onClick?: () => void;
children: React.ReactNode;
}
export const ListItem = ({
selected,
selectedIcon,
actions,
status,
onClick,
children,
}: ListItemProps): JSX.Element => {
return (
<div
onClick={(): void => {
onClick && onClick();
}}
className={`flex select-none rounded-md border bg-gray-100 shadow-md dark:bg-primaryDark ${
selected
? 'border-primary dark:border-primary'
: 'border-gray-100 dark:border-primaryDark'
}`}
>
<div className="w-3 rounded-l-md bg-green-500" />
<div className="flex justify-between p-2">
<div className="my-auto flex space-x-2">
{status}
<div className="flex gap-2">{children}</div>
</div>
<div className="flex gap-2">
{actions}
<IconButton active={selected} icon={selectedIcon} />
</div>
</div>
</div>
);
};
src/components/generic/Modal.tsx
+13 -13
View File
@@ -1,33 +1,33 @@
import type React from 'react';
import { Dialog } from '@headlessui/react';
import { m } from 'framer-motion';
import { useAppSelector } from '@hooks/useAppSelector';
// import { Backdrop } from './Backdrop';
type DefaultDivProps = JSX.IntrinsicElements['div'];
export interface ModalProps extends DefaultDivProps {
children: React.ReactNode;
open: boolean;
onClose: () => void;
children: React.ReactNode;
}
export const Modal = ({
children,
open,
onClose,
children,
className,
...props
}: ModalProps): JSX.Element => {
const darkMode = useAppSelector((state) => state.app.darkMode);
return (
<Dialog
as="div"
<m.div
className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
open={open}
onClose={onClose}
onClick={onClose}
>
<Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
<div className="text-center ">
<m.div className="fixed h-full w-full backdrop-blur-sm backdrop-filter" />
<m.div className="text-center ">
<span
className="inline-block h-screen align-middle "
aria-hidden="true"
@@ -37,7 +37,7 @@ export const Modal = ({
<div className={`inline-block align-middle ${className}`} {...props}>
{children}
</div>
</div>
</Dialog>
</m.div>
</m.div>
);
};
src/components/generic/Sidebar.tsx
-46
View File
@@ -1,46 +0,0 @@
import type React from 'react';
import { FiX } from 'react-icons/fi';
import { IconButton } from '@meshtastic/components';
export interface SidebarProps {
title: string;
tagline: string;
footer?: JSX.Element;
closeSidebar: () => void;
children: React.ReactNode;
}
export const Sidebar = ({
title,
tagline,
closeSidebar,
children,
}: SidebarProps): JSX.Element => {
return (
<div className="absolute z-50 flex flex-col w-full h-full bg-white border-l border-gray-300 md:z-10 md:max-w-sm md:static min-w-max dark:border-gray-600 dark:bg-secondaryDark">
<div className="p-2">
<div className="flex justify-between">
<div>
<h3 className="text-xs font-medium text-gray-400">{title}</h3>
<h1 className="text-lg font-medium truncate">{tagline}</h1>
</div>
<div className="mb-auto">
<IconButton
onClick={(): void => {
closeSidebar();
}}
icon={<FiX />}
/>
</div>
</div>
</div>
{children ?? (
<div className="flex flex-grow bg-gray-50 dark:bg-primaryDark">
<div className="m-auto text-lg font-medium">Please select item</div>
</div>
)}
</div>
);
};
src/components/generic/SidebarItem.tsx
-33
View File
@@ -1,33 +0,0 @@
import type React from 'react';
type DefaultDivProps = JSX.IntrinsicElements['div'];
export interface SidebarItemProps extends DefaultDivProps {
title: string;
description: string;
icon: JSX.Element;
selected?: boolean;
}
export const SidebarItem = ({
title,
description,
selected,
icon,
...props
}: SidebarItemProps): JSX.Element => {
return (
<div
className={`flex p-3 cursor-pointer select-none dark:hover:bg-primaryDark ${
selected ? 'bg-gray-200 dark:bg-primaryDark' : 'dark:bg-secondaryDark'
}`}
{...props}
>
<div className="my-auto text-gray-500 dark:text-gray-400">{icon}</div>
<div className="ml-3 text-left">
<div className="font-medium text-left">{title}</div>
<div className="mt-0.5 text-gray-400 text-sm">{description}</div>
</div>
</div>
);
};
src/components/generic/Tooltip.tsx
-14
View File
@@ -1,14 +0,0 @@
import 'tippy.js/dist/tippy.css';
import type React from 'react';
import Tippy from '@tippyjs/react';
export interface TooltipProps {
children: JSX.Element;
contents: string;
}
export const Tooltip = ({ children, contents }: TooltipProps): JSX.Element => {
return <Tippy content={contents}>{children}</Tippy>;
};
src/components/generic/form/BitwiseSelect.tsx
-89
View File
@@ -1,89 +0,0 @@
import type React from 'react';
import type { Noop, RefCallBack } from 'react-hook-form';
import type { Theme } from 'react-select';
import ReactSelect from 'react-select';
import { bitwiseDecode, bitwiseEncode } from '@app/core/utils/bitwise';
import { useAppSelector } from '@hooks/useAppSelector';
import { Label } from './Label';
export interface BiwiseSelectProps {
label: string;
error?: string;
value: number;
optionsEnum: { [s: string]: string | number };
onChange: (...event: unknown[]) => void;
onBlur: Noop;
name: string;
ref: RefCallBack;
}
export const BitwiseSelect = ({
label,
error,
value,
optionsEnum,
onChange,
ref,
}: BiwiseSelectProps): JSX.Element => {
const darkMode = useAppSelector((state) => state.app.darkMode);
return (
<div className="w-full">
{label && <Label label={label} error={error} />}
<ReactSelect
ref={ref}
isMulti
// styles={{
// control: (provided, state) => ({
// ...provided,
// // color: state.isFocused ? 'blue' : 'red',
// // borderColor: state.isFocused ? 'blue' : 'red',
// }),
// }}
theme={(theme): Theme => ({
...theme,
borderRadius: 7,
colors: {
...theme.colors,
primary: '#67ea94', //focus border color
// primary75: 'red',
// primary50: 'red',
// primary25: 'red',
// danger: 'red',
// dangerLight: 'red',
neutral0: darkMode ? 'rgb(30 41 59)' : 'white', //bg color
// neutral5: 'red',
neutral10: darkMode ? 'rgb(75 85 99)' : 'rgb(229 231 235)', //tag bg color
neutral20: darkMode ? 'rgb(229 231 235)' : 'rgb(156 163 175)', //border color
neutral30: '#67ea94', //border hover
// neutral40: 'red',
// neutral50: 'red',
// neutral60: 'red',
// neutral70: 'red',
neutral80: darkMode ? 'white' : 'black', //tag text color
// neutral90: 'red',
},
})}
value={bitwiseDecode(value, optionsEnum).map((flag) => {
return {
value: flag,
label: (optionsEnum[flag] as string).replace('POS_', ''),
};
})}
options={Object.entries(optionsEnum)
.filter((value) => typeof value[1] !== 'number')
.filter((value) => parseInt(value[0]) !== optionsEnum.POS_UNDEFINED)
.map((value) => {
return {
value: parseInt(value[0]),
label: value[1].toString().replace('POS_', ''),
};
})}
onChange={(e): void => onChange(bitwiseEncode(e.map((v) => v.value)))}
/>
</div>
);
};
src/components/generic/form/Label.tsx
+1 -1
View File
@@ -9,6 +9,6 @@ export const Label = ({ label, error }: LabelProps): JSX.Element => (
<label className="flex py-1 text-xs font-semibold text-gray-500 dark:text-gray-400">
{label}
{error && <span className="ml-2 text-red-500">{error}</span>}
<div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-700 bg-gray-300 rounded-full" />
<div className="my-auto ml-2 h-0.5 flex-grow rounded-full bg-gray-300 dark:bg-gray-700" />
</label>
);