feat(solid-widgets): started workin on dialog

src/fancy-ui-core/components/feedback/index.ts

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

src/fancy-ui-core/components/index.ts

@@ -1,2 +1,3 @@
 export * from './data-display'
+export * from './feedback'
 export * from './inputs'

src/fancy-ui-solid/components/feedback/Dialog/Dialog.tsx

@@ -0,0 +1,49 @@
+import { createEffect, createSignal, JSX } from 'solid-js'
+
+import { useCombinedControlSignal } from '~/solid-hooks'
+
+const Dialog = () => {
+    const [dialogRef, setDialogRef] = createSignal<HTMLDialogElement>()
+    const [value, setValue] = useCombinedControlSignal({
+        initialValue: () => false
+    })
+
+    const handleOpen = () => {
+        setValue(true)
+    }
+
+    const handleClose = () => {
+        setValue(false)
+    }
+
+    const handleCancel: JSX.EventHandlerUnion<HTMLDialogElement, Event> = event => {
+        event.preventDefault()
+
+        setValue(false)
+    }
+
+    createEffect(() => {
+        const dialog = dialogRef()
+        const isOpen = value()
+
+        if (dialog) {
+            if (isOpen) {
+                dialog.showModal()
+            } else {
+                dialog.close()
+            }
+        }
+    })
+
+    return (
+        <div>
+            <dialog onCancel={handleCancel} ref={setDialogRef}>
+                Hey im a dialog
+            </dialog>
+            <button onClick={handleOpen}>OPen</button>
+            <button onClick={handleClose}>Clokse</button>
+        </div>
+    )
+}
+
+export { Dialog }

src/fancy-ui-solid/components/feedback/Dialog/DialogProvider.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'solid-js'
+
+const DialogContext = createContext()
+
+const DialogProvider = () => {
+    return <DialogContext.Provider>{props.children}</DialogContext.Provider>
+}
+
+export { DialogProvider }

src/fancy-ui-solid/components/feedback/Dialog/index.ts

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

src/fancy-ui-solid/components/feedback/index.ts

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

src/fancy-ui-solid/components/index.ts

@@ -1,3 +1,4 @@
 export * from './data-display'
+export * from './feedback'
 export * from './inputs'
 export * from './surfaces'

src/routes/graph.tsx

@@ -1,10 +1,13 @@
 import { Title } from 'solid-start'
 
+import { Dialog } from '~/fancy-ui-solid'
+
 export default function GraphView() {
     return (
         <>
             <Title>Graph View | Stronk JSON</Title>
             <div>Graph View</div>
+            <Dialog />
         </>
     )
 }

src/solid-hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './createCodeMirror'
 export * from './useColorMode'
+export * from './useCombinedControlSignal'
 export * from './useReducer'

src/solid-hooks/useCombinedControlSignal/index.ts

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

src/solid-hooks/useCombinedControlSignal/useCombinedControlSignal.ts

@@ -0,0 +1,59 @@
+import { Accessor, createSignal, untrack } from 'solid-js'
+
+const resolveValueOrAccessor = <T>(valueOrAccessor: T | Accessor<T>): T => {
+    if (valueOrAccessor instanceof Function) {
+        return valueOrAccessor()
+    }
+
+    return valueOrAccessor
+}
+
+type TUseCombinedControlSignalProps<T> = {
+    value?: T | Accessor<T>
+    initialValue: T | Accessor<T>
+    onChange?: (value: T) => void
+}
+
+type TUseCombinedControlSignalSetter<T> = (prev: T) => T
+
+type TUseCombinedControlSignalNextStateOrSetter<T> = TUseCombinedControlSignalSetter<T> | T
+
+const useCombinedControlSignal = <T>(props: TUseCombinedControlSignalProps<T>) => {
+    const [innerValue, setInnerValue] = createSignal<T>(resolveValueOrAccessor(props.initialValue))
+
+    const isControlled = () => {
+        return resolveValueOrAccessor(props.value) !== undefined && !!props.onChange
+    }
+
+    const value = (): T => {
+        if (resolveValueOrAccessor(props.value) && isControlled()) {
+            return resolveValueOrAccessor(props.value) as T
+        }
+
+        return innerValue()
+    }
+
+    const setValue = (nextStateOrSetter: TUseCombinedControlSignalNextStateOrSetter<T>) => {
+        untrack(() => {
+            const nextValue = () => {
+                return nextStateOrSetter instanceof Function ? nextStateOrSetter(value()) : nextStateOrSetter
+            }
+
+            const shouldChange = !Object.is(nextValue(), value())
+
+            if (shouldChange) {
+                if (!isControlled()) {
+                    setInnerValue(nextValue)
+                }
+
+                if (props.onChange) {
+                    props.onChange(nextValue())
+                }
+            }
+        })
+    }
+
+    return [value, setValue] as const
+}
+
+export { useCombinedControlSignal }

src/solid-widgets/Dialog/DialogOpenButton.tsx

@@ -0,0 +1,3 @@
+const DialogOpenButton = () => {
+    return <button />
+}

src/solid-widgets/Dialog/DialogProvider.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'solid-js'
+
+import { TDialogContext, TDialogProvider } from './dialog-types'
+
+const DialogContext = createContext<TDialogContext>()
+
+const DialogProvider: TDialogProvider = props => {
+    const context: TDialogContext = {
+        handleOpen() {
+            props.handleOpen()
+        },
+        handleClose() {
+            props.handleClose()
+        },
+        handleCancel(event) {
+            props.handleCancel(event)
+        }
+    }
+
+    return <DialogContext.Provider value={context}>{props.children}</DialogContext.Provider>
+}
+
+const useDialogContext = () => {
+    const context = useContext(DialogContext)
+
+    if (!context) {
+        throw new Error('[useDialogContext]: useDialogContext should be used  inside DialogProvider')
+    }
+
+    return context
+}
+
+export { DialogProvider, useDialogContext }

src/solid-widgets/Dialog/DialogRoot.tsx

@@ -0,0 +1,52 @@
+import { createEffect, createSignal, JSX } from 'solid-js'
+
+import { useCombinedControlSignal } from '~/solid-hooks'
+
+import { TDialogRoot } from './dialog-types'
+import { DialogProvider } from './DialogProvider'
+
+const DialogRoot: TDialogRoot = props => {
+    const [dialogRef, setDialogRef] = createSignal<HTMLDialogElement>()
+    const [value, setValue] = useCombinedControlSignal({
+        onChange: props.onChange,
+        value: props.isOpen,
+        initialValue: props.initialOpen || false
+    })
+
+    const handleOpen = () => {
+        setValue(true)
+    }
+
+    const handleClose = () => {
+        setValue(false)
+    }
+
+    const handleCancel: JSX.EventHandler<HTMLDialogElement, Event> = event => {
+        event.preventDefault()
+
+        setValue(false)
+    }
+
+    createEffect(() => {
+        const dialog = dialogRef()
+        const isOpen = value()
+
+        if (dialog) {
+            if (isOpen) {
+                dialog.showModal()
+            } else {
+                dialog.close()
+            }
+        }
+    })
+
+    return (
+        <DialogProvider handleCancel={handleCancel} handleOpen={handleOpen} handleClose={handleClose}>
+            <dialog ref={setDialogRef}>Hey im a dialog</dialog>
+            <button onClick={handleOpen}>OPen</button>
+            <button onClick={handleClose}>Clokse</button>
+        </DialogProvider>
+    )
+}
+
+export { DialogRoot }

src/solid-widgets/Dialog/dialog-types.ts

@@ -0,0 +1,19 @@
+import { Accessor, JSX, ParentComponent } from 'solid-js'
+
+export type TDialogRootProps = {
+    isOpen?: boolean | Accessor<boolean>
+    initialOpen?: boolean | Accessor<boolean>
+    onChange?: (value: boolean) => void
+}
+
+export type TDialogRoot = ParentComponent<TDialogRootProps>
+
+export type TDialogContext = {
+    handleOpen: () => void
+    handleClose: () => void
+    handleCancel: JSX.EventHandler<HTMLDialogElement, Event>
+}
+
+export type TDialogProviderProps = TDialogContext
+
+export type TDialogProvider = ParentComponent<TDialogProviderProps>

src/solid-widgets/index.ts

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