Klectr/KSlab
1
0
Fork 0
generated from Klectr/KTemplate
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix a bunch of lint errors

Browse Source
This commit is contained in:
Triston Armstrong 2024-10-23 12:40:20 +07:00
parent 958124cd9e
commit a506da11ad
Signed by: tristonarmstrong
GPG Key ID: A23B48AE45EB6EFE
19 changed files with 108 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
eslint.config.js
View File

@ -22,6 +22,7 @@ export default [
{
rules: {
"react/react-in-jsx-scope": "off",
"react/no-unknown-property": "off",
},
},
]

8
src/components/ContextMenuPortal.tsx
View File

@ -1,14 +1,12 @@
import { useClickOutside, useKeyStroke, useMouse } from "@kaioken-core/hooks";
import { useClickOutside, useMouse } from "@kaioken-core/hooks";
import { Portal, signal, useEffect, useRef } from "kaioken";
namespace ContextMenuPortal {
export interface Props {
interface ContextMenuPortalProps {
children: JSX.Children
open: boolean
closeAction: (() => void) | null | undefined
}
}
export function ContextMenuPortal({ children, open, closeAction }: ContextMenuPortal.Props) {
export function ContextMenuPortal({ children, open, closeAction }: ContextMenuPortalProps) {
const { mouse } = useMouse()
const pos = signal({ x: 0, y: 0 })
const ref = useRef<HTMLDivElement>(null)

13
src/components/ImageCard.tsx
View File

@ -6,15 +6,14 @@ import images, { ImageCardType } from "../signals/images"
import { updateLocalStorage } from "../utils/localStorage"
import { useThemeDetector } from "../utils/useThemeDetector"
import { ContextMenuPortal } from "./ContextMenuPortal"
import { CardTypes } from "../types"
namespace ImageCard {
export interface ImageCardProps {
interface ImageCardProps {
key: ImageCardType['id']
data: ImageCardType
}
}
export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps) {
export function ImageCard({ key: itemKey, data: item }: ImageCardProps) {
const { debounce } = useDebounce()
const pressed = signal(false)
const newX = useRef(0)
@ -27,7 +26,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
function debounceLSUpdate(time?: number) {
debounce(() => {
updateLocalStorage("images", images.images).notify()
updateLocalStorage(CardTypes.IMAGES, images.images).notify()
}, time)
}
@ -90,7 +89,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
window.removeEventListener('mouseup', _handleResizeMouseUp)
}
function _handleClose(_e: Event) {
function _handleClose() {
ImagesSignal.default.removeImage(item.id)
ImagesSignal.default.images.notify()
debounceLSUpdate()
@ -161,7 +160,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
function ExpandIcon({ cb }: {
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined
}) {
const isDarkTheme = useThemeDetector()
return (

2
src/components/InfinateCanvas.tsx
View File

@ -110,7 +110,7 @@ function getInitialPosition(canvasDimensions: typeof canvasDimentsion): ScrollTo
try {
initPosition = JSON.parse(localStorage.getItem("pos") ?? "")
} catch (e) {
console.error("no local storage for pos")
console.error("no local storage for pos " + e)
}
if (!initPosition) return defaultScroll

6
src/components/MarkDownEditor/MarkDownEditor.tsx
View File

@ -2,14 +2,12 @@ import { Editor, Listener } from 'tiny-markdown-editor'
import './md.css'
import { useEffect, useRef } from "kaioken"
namespace MarkDownEditor {
export interface Props {
interface MarkDownEditorProps {
initial: string
onChange: Listener<'change'>
}
}
export function MarkDownEditor({ initial, onChange }: MarkDownEditor.Props) {
export function MarkDownEditor({ initial, onChange }: MarkDownEditorProps) {
const elRef = useRef<HTMLDivElement>(null)
useEffect(() => {

14
src/components/MiniMap.tsx
View File

@ -24,7 +24,7 @@ export function MiniMap() {
useEffect(() => {
function _handleScroll(_e: Event) {
function _handleScroll() {
scrollX.value = window.scrollX
scrollY.value = window.scrollY
}
@ -47,7 +47,7 @@ export function MiniMap() {
const image = images.images.value[imageKey]
const el = useRef(null)
function _handleItemClick(_e: MouseEvent) {
function _handleItemClick() {
const newLeft = image.position.x - ((viewportWidth / 2) - (image.dimensions.w / 2))
const newTop = image.position.y - ((viewportHeight / 2) - (image.dimensions.h / 2))
@ -65,7 +65,7 @@ export function MiniMap() {
const newZIndex = LayerEnum.MINIMAP + 1
return (
<div ref={el} className={"absolute dark:bg-green-500 bg-green-300 dark:hover:bg-blue-500 hover:bg-blue-300 cursor-pointer border dark:border-[#222] border-green-500 rounded"}
<div key={imageKey} ref={el} className={"absolute dark:bg-green-500 bg-green-300 dark:hover:bg-blue-500 hover:bg-blue-300 cursor-pointer border dark:border-[#222] border-green-500 rounded"}
onclick={_handleItemClick}
style={{
width: `${newWidth}px`,
@ -82,7 +82,7 @@ export function MiniMap() {
{Object.keys(notes.notes.value).map((noteKey: NoteCardType['id']) => {
const note = notes.notes.value[noteKey]
function _handleItemClick(_e: MouseEvent) {
function _handleItemClick() {
const newLeft = note.position.x - ((viewportWidth / 2) - (note.dimensions.w / 2))
const newTop = note.position.y - ((viewportHeight / 2) - (note.dimensions.h / 2))
window.scrollTo({
@ -99,7 +99,7 @@ export function MiniMap() {
const newZIndex = LayerEnum.MINIMAP + 1
return (
<div className={"absolute dark:bg-gray-500 bg-gray-300 hover:bg-blue-500 cursor-pointer border dark:border-[#222] border-gray-400 rounded"}
<div key={noteKey} className={"absolute dark:bg-gray-500 bg-gray-300 hover:bg-blue-500 cursor-pointer border dark:border-[#222] border-gray-400 rounded"}
onclick={_handleItemClick}
style={{
width: `${newWidth}px`,
@ -116,7 +116,7 @@ export function MiniMap() {
const text = texts.texts.value[textKey]
const el = useRef(null)
function _handleItemClick(_e: MouseEvent) {
function _handleItemClick() {
window.scrollTo({
left: text.position.x - ((viewportWidth / 2) - (text.dimensions.w / 2)),
top: text.position.y - ((viewportHeight / 2) - (text.dimensions.h / 2)),
@ -125,7 +125,7 @@ export function MiniMap() {
}
return (
<div ref={el} className={"bg-indigo-500 hover:bg-blue-500 cursor-pointer rounded"}
<div key={textKey} ref={el} className={"bg-indigo-500 hover:bg-blue-500 cursor-pointer rounded"}
onclick={_handleItemClick}
style={{
position: 'absolute',

16
src/components/NoteCard.tsx
View File

@ -12,14 +12,12 @@ import { createFileAndExport } from "../utils/createFileAndExport"
import { ContextMenuPortal } from "./ContextMenuPortal"
import { HelpIcon } from "./icons/HelpIcon"
namespace NoteCard {
export interface NoteCardProps {
interface NoteCardProps {
key: NoteCardType['id']
data: NoteCardType
}
}
export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
const saved = signal(true)
const pressed = signal(false)
const newX = useRef(0)
@ -103,7 +101,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
saved.value = false
}
function _handleClose(_e: Event) {
function _handleClose() {
NotesSigal.default.removeNote(item.id)
NotesSigal.default.notes.notify()
updateLocalStorage()
@ -117,7 +115,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
createFileAndExport("Note", item.contents, "text/markdown")
}
function _handleExportClick(_e: MouseEvent) {
function _handleExportClick() {
_exportFile()
}
@ -149,11 +147,11 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
switch (e.key) {
case 'Delete':
e.preventDefault()
_handleClose(e)
_handleClose()
break
case 'Backspace':
e.preventDefault()
_handleClose(e)
_handleClose()
break
case 'e':
e.preventDefault()
@ -273,7 +271,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
}
function ExpandIcon({ cb }: {
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined
}) {
const isDarkTheme = useThemeDetector()

34
src/components/TextItem.tsx
View File

@ -3,17 +3,15 @@ import { TextSignal, focusedItem } from "../signals"
import { useDebounce } from "../utils/useDebounce"
import texts, { TextCardType } from "../signals/texts"
import { LayerEnum } from "../utils/enums"
import { Card } from "../types"
import { Card, CardTypes } from "../types"
import { useThemeDetector } from "../utils/useThemeDetector"
namespace TextItem {
export interface TextCardProps {
interface TextCardProps {
key: TextCardType['id']
data: TextCardType
}
}
export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
export function TextItem({ key: itemKey, data: item }: TextCardProps) {
const { debounce } = useDebounce()
const pressed = signal(false)
const newX = useRef(0)
@ -28,7 +26,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
const elDems = elRef.current?.getBoundingClientRect()
const elW = elDems?.width ?? 100
const elH = elDems?.height ?? 100
const newDems: Card<'texts'>['dimensions'] = { w: elW, h: elH }
const newDems: Card<CardTypes.TEXTS>['dimensions'] = { w: elW, h: elH }
TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDems)
TextSignal.default.texts.notify()
}, [elRef.current, item.fontSize])
@ -37,7 +35,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
function updateLocalStorage(time?: number) {
debounce(() => {
localStorage.setItem("texts", JSON.stringify(texts.texts.value))
localStorage.setItem(CardTypes.TEXTS, JSON.stringify(texts.texts.value))
}, time)
}
@ -87,7 +85,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
window.addEventListener('mouseup', _handleResizeMouseUp)
}
function _handleResizeMouseUp(_e: MouseEvent) {
function _handleResizeMouseUp() {
pressed.value = false
window.removeEventListener('mousemove', _handleResizeMove)
window.removeEventListener('mouseup', _handleResizeMouseUp)
@ -157,7 +155,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
>
<p
ref={pRef}
//@ts-expect-error
//@ts-expect-error oninput doesnt exist on the props type
oninput={_handleContentInput}
contentEditable
className={'text-p inline-block px-2 w-full select-none drop-shadow relative'}>
@ -171,13 +169,12 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
)
}
namespace CloseIcon {
export interface Props {
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined,
interface CloseIconProps {
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined,
item: TextSignal.TextCardType
}
}
function CloseIcon({ item, cb }: CloseIcon.Props) {
function CloseIcon({ item, cb }: CloseIconProps) {
const isDark = useThemeDetector()
return (
<svg
@ -204,13 +201,12 @@ function CloseIcon({ item, cb }: CloseIcon.Props) {
)
}
namespace ExpandIcon {
export interface Props {
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined,
interface ExpandIconProps {
cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined,
item: TextSignal.TextCardType
}
}
function ExpandIcon({ cb, item }: ExpandIcon.Props) {
function ExpandIcon({ cb, item }: ExpandIconProps) {
const isDark = useThemeDetector()
return (
<svg

9
src/components/Toast.tsx
View File

@ -8,6 +8,7 @@ import {
useEffect,
useState,
} from "kaioken"
import { noop } from "kaioken/utils"
type Toast = {
ts: number
@ -21,11 +22,15 @@ const defaultDuration = 3000
const ToastContext = createContext<{
showToast: (type: Toast["type"], message: string) => void
}>(null as any)
}>({ showToast: noop })
export const useToast = () => useContext(ToastContext)
export const ToastContextProvider: Kaioken.FC = ({ children }) => {
interface ToastProviderProps {
children: JSX.Children
}
export function ToastContextProvider({ children }: ToastProviderProps) {
const [toasts, setToasts] = useState<Toast[]>([])
useEffect(() => {

15
src/components/cardSelector/ImageCardButton.tsx
View File

@ -1,5 +1,6 @@
import { ImagesSignal } from "../../signals"
import images from "../../signals/images"
import { CardTypes } from "../../types"
import { updateLocalStorage } from "../../utils/localStorage"
import { useToast } from "../Toast"
import { Tooltip } from "./Tooltip"
@ -13,12 +14,16 @@ export function ImageCardButton() {
input.accept = "image/*"
input.multiple = false
input.onchange = (e: any) => {
const file = e.target.files[0]
input.onchange = (e: Event) => {
const el = e.target as HTMLInputElement
if (!el.files?.length) return
if (!el.files.length) return
const file = el.files[0]
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(readerEvent) {
let image = document.createElement('img')
const image = document.createElement('img')
image.onload = function() {
const { width, height } = image
@ -33,7 +38,7 @@ export function ImageCardButton() {
if (!img) return
const imgId = ImagesSignal.default.addImage({
type: "image",
type: CardTypes.IMAGES,
title: "New Image",
contents: content as string,
position: {
@ -47,7 +52,7 @@ export function ImageCardButton() {
})
try {
updateLocalStorage("images", images.images).notify()
updateLocalStorage(CardTypes.IMAGES, images.images).notify()
} catch (e: unknown) {
if (e instanceof DOMException) {
if (e.name !== 'QuotaExceededError') return

22
src/components/cardSelector/ImportButton.tsx
View File

@ -20,8 +20,12 @@ export function ImportButton() {
input.type = 'file'
input.accept = ".json"
input.multiple = false
input.onchange = (e: any) => {
const file = e.target.files[0]
input.onchange = (e: Event) => {
if (e.target === null) return
const el = e.target as HTMLInputElement
if (!el.files?.length) return
const file = el.files[0]
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(readerEvent) {
@ -30,19 +34,19 @@ export function ImportButton() {
content = (content as string).split(',')[1]
const data: Record<string, Card<CardTypes>> = convertBase64ToJson(content)
console.log(data)
for (let key in data) {
for (const key in data) {
const item = data[key]
const { id, ...rest } = item
console.log(id, rest)
switch (item.type) {
case CardTypes:
case CardTypes.IMAGES:
console.log("adding image: ", rest)
images.addImage(rest as ImageCardType)
break;
case 'notes':
case CardTypes.NOTES:
notes.addNote(rest as NoteCardType)
break;
case 'texts':
case CardTypes.TEXTS:
texts.addText(rest as TextCardType)
break;
default:
@ -52,9 +56,9 @@ export function ImportButton() {
console.log("images: ", images.images.value)
updateLocalStorage('notes', notes.notes).notify()
updateLocalStorage('images', images.images).notify()
updateLocalStorage('texts', texts.texts).notify()
updateLocalStorage(CardTypes.NOTES, notes.notes).notify()
updateLocalStorage(CardTypes.IMAGES, images.images).notify()
updateLocalStorage(CardTypes.TEXTS, texts.texts).notify()
}
}
input.click()

7
src/components/icons/ExportIcon.tsx
View File

@ -1,9 +1,8 @@
namespace ExportIcon {
export interface Props {
interface ExportIconProps {
className?: string
}
}
export function ExportIcon({ className }: ExportIcon.Props) {
export function ExportIcon({ className }: ExportIconProps) {
return (
<svg

7
src/components/icons/HelpIcon.tsx
View File

@ -1,10 +1,9 @@
namespace HelpIcon {
export interface Props {
interface HelpIconProps {
onMouseOver?: () => void
onMouseOut?: () => void
}
}
export function HelpIcon({ onMouseOver, onMouseOut }: HelpIcon.Props) {
export function HelpIcon({ onMouseOver, onMouseOut }: HelpIconProps) {
return (
<svg

4
src/signals/images.ts
View File

@ -1,8 +1,8 @@
import { signal } from "kaioken"
import { Card } from "../types"
import { Card, CardTypes } from "../types"
import { focusedItem } from "."
export type ImageCardType = Card<"images">
export type ImageCardType = Card<CardTypes.IMAGES>
const images = signal<Record<ImageCardType["id"], ImageCardType>>({})

4
src/signals/notes.ts
View File

@ -1,8 +1,8 @@
import { signal } from "kaioken"
import { Card } from "../types"
import { Card, CardTypes } from "../types"
import { focusedItem } from "."
export type NoteCardType = Card<"notes">
export type NoteCardType = Card<CardTypes.NOTES>
const notes = signal<Record<NoteCardType["id"], NoteCardType>>({})

4
src/signals/texts.ts
View File

@ -1,8 +1,8 @@
import { signal } from "kaioken"
import { Card } from "../types"
import { Card, CardTypes } from "../types"
import { focusedItem } from "."
export type TextCardType = Card<"texts"> & {
export type TextCardType = Card<CardTypes.TEXTS> & {
fontSize: number
}

6
src/types/Card.ts
View File

@ -9,11 +9,11 @@ export enum CardTypes {
type Base64 = string
export interface Card<Ttype extends CardTypes> {
export interface Card<TCard extends CardTypes> {
id: string
type: Ttype
type: TCard
title: string
contents: Ttype extends "image" ? Base64 : string
contents: TCard extends "image" ? Base64 : string
position: positionCoords
dimensions: dimensionCoords
}

3
src/utils/localStorage.ts
View File

@ -8,9 +8,8 @@ export function updateLocalStorage(
try {
localStorage.setItem(location, JSON.stringify(collection.value))
} catch (e) {
// throw new Error("Could not update local storage")
throw new DOMException(
"Could not update local storage",
"Could not update local storage " + e,
"LocalStorageError"
)
}

9
src/utils/useDebounce.ts
View File

@ -2,12 +2,12 @@ import { sideEffectsEnabled, useHook } from "kaioken"
import { noop } from "kaioken/utils"
type UseDebounceState = {
timer: number
debounce: (this: any, func: Function, timeout?: number) => void
timer: Timer | undefined
debounce: (func: (...args: unknown[]) => void, timeout?: number) => void
}
function createState(): UseDebounceState {
return { timer: 0, debounce: noop }
return { timer: undefined, debounce: noop }
}
export function useDebounce() {
@ -17,8 +17,7 @@ export function useDebounce() {
if (!isInit) return { timer: hook.timer, debounce: hook.debounce }
hook.debounce = function debounce(
this: any,
func: Function,
func: (...args: unknown[]) => void,
timeout = 300
) {
clearTimeout(hook.timer)