From 09dda712b87d49bbc2646c66e02ef2cab2cfedd5 Mon Sep 17 00:00:00 2001
From: Sasa Fazlic <fazlic.sasa@gmail.com>
Date: Thu, 9 Mar 2023 07:32:08 +0100
Subject: [PATCH] feat(solid-widgets): started workin on dialog

---
 .../components/feedback/dialog/index.ts       |  0
 .../components/feedback/index.ts              |  1 +
 src/fancy-ui-core/components/index.ts         |  1 +
 .../components/feedback/Dialog/Dialog.tsx     | 49 +++++++++++++++
 .../feedback/Dialog/DialogProvider.tsx        |  9 +++
 .../components/feedback/Dialog/index.ts       |  1 +
 .../components/feedback/index.ts              |  1 +
 src/fancy-ui-solid/components/index.ts        |  1 +
 src/routes/graph.tsx                          |  3 +
 src/solid-hooks/index.ts                      |  1 +
 .../useCombinedControlSignal/index.ts         |  1 +
 .../useCombinedControlSignal.ts               | 59 +++++++++++++++++++
 src/solid-widgets/Dialog/Dialog.tsx           |  0
 src/solid-widgets/Dialog/DialogOpenButton.tsx |  3 +
 src/solid-widgets/Dialog/DialogProvider.tsx   | 33 +++++++++++
 src/solid-widgets/Dialog/DialogRoot.tsx       | 52 ++++++++++++++++
 src/solid-widgets/Dialog/dialog-types.ts      | 19 ++++++
 src/solid-widgets/Dialog/index.ts             |  0
 src/solid-widgets/index.ts                    |  1 +
 19 files changed, 235 insertions(+)
 create mode 100644 src/fancy-ui-core/components/feedback/dialog/index.ts
 create mode 100644 src/fancy-ui-core/components/feedback/index.ts
 create mode 100644 src/fancy-ui-solid/components/feedback/Dialog/Dialog.tsx
 create mode 100644 src/fancy-ui-solid/components/feedback/Dialog/DialogProvider.tsx
 create mode 100644 src/fancy-ui-solid/components/feedback/Dialog/index.ts
 create mode 100644 src/fancy-ui-solid/components/feedback/index.ts
 create mode 100644 src/solid-hooks/useCombinedControlSignal/index.ts
 create mode 100644 src/solid-hooks/useCombinedControlSignal/useCombinedControlSignal.ts
 create mode 100644 src/solid-widgets/Dialog/Dialog.tsx
 create mode 100644 src/solid-widgets/Dialog/DialogOpenButton.tsx
 create mode 100644 src/solid-widgets/Dialog/DialogProvider.tsx
 create mode 100644 src/solid-widgets/Dialog/DialogRoot.tsx
 create mode 100644 src/solid-widgets/Dialog/dialog-types.ts
 create mode 100644 src/solid-widgets/Dialog/index.ts
 create mode 100644 src/solid-widgets/index.ts

diff --git a/src/fancy-ui-core/components/feedback/dialog/index.ts b/src/fancy-ui-core/components/feedback/dialog/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/fancy-ui-core/components/feedback/index.ts b/src/fancy-ui-core/components/feedback/index.ts
new file mode 100644
index 0000000..20033cb
--- /dev/null
+++ b/src/fancy-ui-core/components/feedback/index.ts
@@ -0,0 +1 @@
+export * from './dialog'
diff --git a/src/fancy-ui-core/components/index.ts b/src/fancy-ui-core/components/index.ts
index 0c66046..51b09a2 100644
--- a/src/fancy-ui-core/components/index.ts
+++ b/src/fancy-ui-core/components/index.ts
@@ -1,2 +1,3 @@
 export * from './data-display'
+export * from './feedback'
 export * from './inputs'
diff --git a/src/fancy-ui-solid/components/feedback/Dialog/Dialog.tsx b/src/fancy-ui-solid/components/feedback/Dialog/Dialog.tsx
new file mode 100644
index 0000000..a5059b7
--- /dev/null
+++ b/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 }
diff --git a/src/fancy-ui-solid/components/feedback/Dialog/DialogProvider.tsx b/src/fancy-ui-solid/components/feedback/Dialog/DialogProvider.tsx
new file mode 100644
index 0000000..66a08ba
--- /dev/null
+++ b/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 }
diff --git a/src/fancy-ui-solid/components/feedback/Dialog/index.ts b/src/fancy-ui-solid/components/feedback/Dialog/index.ts
new file mode 100644
index 0000000..8390808
--- /dev/null
+++ b/src/fancy-ui-solid/components/feedback/Dialog/index.ts
@@ -0,0 +1 @@
+export * from './Dialog'
diff --git a/src/fancy-ui-solid/components/feedback/index.ts b/src/fancy-ui-solid/components/feedback/index.ts
new file mode 100644
index 0000000..8390808
--- /dev/null
+++ b/src/fancy-ui-solid/components/feedback/index.ts
@@ -0,0 +1 @@
+export * from './Dialog'
diff --git a/src/fancy-ui-solid/components/index.ts b/src/fancy-ui-solid/components/index.ts
index 4ef7ce0..14c7021 100644
--- a/src/fancy-ui-solid/components/index.ts
+++ b/src/fancy-ui-solid/components/index.ts
@@ -1,3 +1,4 @@
 export * from './data-display'
+export * from './feedback'
 export * from './inputs'
 export * from './surfaces'
diff --git a/src/routes/graph.tsx b/src/routes/graph.tsx
index 5c279cd..05e1f46 100644
--- a/src/routes/graph.tsx
+++ b/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 />
         </>
     )
 }
diff --git a/src/solid-hooks/index.ts b/src/solid-hooks/index.ts
index fc177c0..d954fdb 100644
--- a/src/solid-hooks/index.ts
+++ b/src/solid-hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './createCodeMirror'
 export * from './useColorMode'
+export * from './useCombinedControlSignal'
 export * from './useReducer'
diff --git a/src/solid-hooks/useCombinedControlSignal/index.ts b/src/solid-hooks/useCombinedControlSignal/index.ts
new file mode 100644
index 0000000..d657730
--- /dev/null
+++ b/src/solid-hooks/useCombinedControlSignal/index.ts
@@ -0,0 +1 @@
+export * from './useCombinedControlSignal'
diff --git a/src/solid-hooks/useCombinedControlSignal/useCombinedControlSignal.ts b/src/solid-hooks/useCombinedControlSignal/useCombinedControlSignal.ts
new file mode 100644
index 0000000..dd0fbf5
--- /dev/null
+++ b/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 }
diff --git a/src/solid-widgets/Dialog/Dialog.tsx b/src/solid-widgets/Dialog/Dialog.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/solid-widgets/Dialog/DialogOpenButton.tsx b/src/solid-widgets/Dialog/DialogOpenButton.tsx
new file mode 100644
index 0000000..3a4c9bc
--- /dev/null
+++ b/src/solid-widgets/Dialog/DialogOpenButton.tsx
@@ -0,0 +1,3 @@
+const DialogOpenButton = () => {
+    return <button />
+}
diff --git a/src/solid-widgets/Dialog/DialogProvider.tsx b/src/solid-widgets/Dialog/DialogProvider.tsx
new file mode 100644
index 0000000..40a0ff8
--- /dev/null
+++ b/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 }
diff --git a/src/solid-widgets/Dialog/DialogRoot.tsx b/src/solid-widgets/Dialog/DialogRoot.tsx
new file mode 100644
index 0000000..3e9e0ca
--- /dev/null
+++ b/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 }
diff --git a/src/solid-widgets/Dialog/dialog-types.ts b/src/solid-widgets/Dialog/dialog-types.ts
new file mode 100644
index 0000000..14fad2d
--- /dev/null
+++ b/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>
diff --git a/src/solid-widgets/Dialog/index.ts b/src/solid-widgets/Dialog/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/solid-widgets/index.ts b/src/solid-widgets/index.ts
new file mode 100644
index 0000000..8390808
--- /dev/null
+++ b/src/solid-widgets/index.ts
@@ -0,0 +1 @@
+export * from './Dialog'