dyvix-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 younisayoub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# dyvix-ui

package/components/modal/dependencies/animations.json

@@ -0,0 +1,5 @@
+[
+    {
+        "s": ["Dyvix"]
+    }
+]

package/components/modal/dependencies/elements.json

@@ -0,0 +1,32 @@
+[
+    {
+        "element": "text",
+        "tag": "input",
+        "tag-type": "text",
+        "default-class": "modal-text",
+        "aria": {
+            "role": "textbox",
+            "aria-required": false,
+            "aria-label": ""
+         },
+        "inherited-element": ["email", "password", "search", "url", "tel"],
+        "supports-placeholder": true,
+        "is_custom": false,
+        "requires-options": false,
+        "r-variant": true
+    },
+    {
+        "element": "select",
+        "tag": "select",
+        "default-class": "select",
+        "aria": {
+            "role": "combobox",
+            "aria-required": false,
+            "aria-label": ""
+        },
+        "supports-placeholder": true,
+        "is_custom": true,
+        "requires-options": true,
+        "r-variant": true
+    }
+]

package/components/modal/dependencies/style/elements.css

@@ -0,0 +1,60 @@
+.modal
+{
+    display: flex;
+    flex-direction: column;
+    margin: 5rem auto;
+    width: 30rem;
+    height: 30rem;
+    font-family: "Geist";
+    border: 1px solid black;
+    border-radius: 50%;
+}
+#modal-header
+{
+    width: 100%;
+    text-align: center;
+    font-size: xx-large;
+    font-weight: bolder;
+    margin-bottom: 0;
+}
+.grouped-elements
+{
+    display: flex;
+    gap: 20px;
+    flex-direction: row;
+    margin: .5rem auto;
+    width: 80%;
+    margin-top: 1rem;
+}
+.grouped-elements input {
+    flex: 1;
+    max-width: 15rem;
+    min-width: 0;
+}
+.grouped-elements:first-of-type
+{
+    margin-top: 3rem;
+}
+.modal-text
+{
+    width: 100%;
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 1rem;
+    height: 25px;
+    margin: 0 auto;
+    background: transparent;
+    padding: 0.5rem 1rem;
+}
+.modal-text:focus {
+    outline: none;
+    border-color: #0ea5e9;
+}
+.modal-btn {
+    width: 8rem;
+    height: 2.5rem;
+    margin: 1rem auto;
+    border: 1px solid black;
+    border-radius: 1rem;
+    background-color: #0ea5e9;
+    margin-top: 3rem;
+}

package/components/modal/modal.jsx

@@ -0,0 +1,144 @@
+import elementsData from "./dependencies/elements.json"
+import SelectEngine from "../select/SelectEngine";
+import "./dependencies/style/elements.css"
+
+const defaultElement = {type: "!", placeholder: ["!"], id: "!",   className: "!", amount: 1 };
+const supportedTypes = ["text", "select", "email", "password", "search", "url", "tel"]
+const componentsMap = {"SelectEngine": SelectEngine};
+function Modal({title, type, elements, animation, Id, Class})
+{
+
+  const fields = SerializeData(title, type, elements, animation, Id, Class); 
+
+  if(fields === null)
+  {
+    return null;
+  }
+
+  //console.log(fields);
+  //console.log(elementsData);
+  return (
+    <>
+      <div className={Class} id={Id}>
+        <h3 id="modal-header">{title}</h3>
+    
+        {fields.map((field, i) => {
+          const elementDef = elementsData.find(e => e.element === field.type) || elementsData.find(e => e["inherited-element"]?.includes(field.type));
+          const Tag = elementDef.is_custom? componentsMap[elementDef.tag] : elementDef.tag;
+
+          return(
+            <div className="grouped-elements" key={`1${i}`} >
+              {Array.from({ length: field.amount }, (_, j) => {
+                  const Tagprobs = {
+                    className: elementDef["default-class"],
+                    role: elementDef.aria.role,
+                    ...(elementDef["supports-placeholder"] && ({placeholder: Array.isArray(field.placeholder) ? field.placeholder[j] : field.placeholder })),
+                    ...(elementDef["tag-type"] && ({ type: elementDef["tag-type"] }))
+                  }
+                  return <Tag key={j} {...Tagprobs}/>
+              })
+              }
+              
+            </div>
+          )
+        })}
+        <button className="modal-btn">Submit</button>
+      </div>
+    </>
+  )
+}
+function SerializeData(title, type, elements, animation, Id, Class)
+{
+  const validator = ValidateInput(title, type, elements, animation, Id, Class)
+
+    if(validator.status !== 1)
+    {
+      console.error(validator.error)
+      return null
+    }
+
+    const normalizedElements = elements.map(ele => ({...defaultElement, ...ele}));
+    const eleValidator =  validateElements(normalizedElements);
+
+    if(eleValidator.status !== 1)
+    {
+      console.error(eleValidator.error)
+      return null
+    }
+
+    return normalizedElements; 
+}
+function ValidateInput(title, type, elements = [], animation, Id, Class)
+{
+  if(!title)
+  {
+    return {status: -1, error: "Please provide a title"};
+  }  
+  if (!Array.isArray(elements) || !elements.every(ele => typeof ele === 'object'))
+  {
+    return {status: -1, error: "Element should be provided as an array of objects."};
+  }
+  if(animation && typeof animation === 'string')
+  {
+    // todo when you figure out animations configue you need to write a great validation here
+  }
+
+  return  {status: 1};
+}
+function validateElements(elements)
+{      
+
+  for(const element of elements)
+  {
+    if(!supportedTypes.includes(element.type))
+    {       
+      return {status: -1, error: "Elements should include a valid type."};
+    }
+    if(element.amount < 1 || element.amount > 3)
+    {
+      return {status: -1, error: "Element amount should be positive and less than 3."};
+    }
+    else if (element.amount > 1)
+    {
+      if (!Array.isArray(element.placeholder) || element.placeholder.length !== element.amount)
+      {
+        return {status: -1, error: "Element placeholder should be provided as an array of the same length as the provided amount."};
+      }
+    }
+    else
+    {
+      if(typeof element.placeholder !== "string")
+      {
+        return {status: -1, error: "Element placeholder should be provided as string when the amount is set to 1."};
+      }
+    }
+  };
+
+  return  {status: 1};
+}
+
+export default Modal;
+/*
+{
+  title: "Create Post",
+  animation: "bubble", // or "slide", "fade", "scale", "flip"
+  fields: [
+    { 
+      type: "text", 
+      name: "caption", 
+      placeholder: "What's on your mind?",
+      className: "caption-input",
+      id: "post-caption"
+    },
+    { 
+      type: "file", 
+      name: "image",
+      className: "file-upload",
+      id: "post-image",
+      holder: "upload-zone" // custom wrapper class?
+    },
+  ],
+  onSubmit: (data) => createPost(data)
+}
+  prototype
+*/

package/components/select/SelectEngine.jsx

@@ -0,0 +1,100 @@
+//needs testing and polishing
+import React, { forwardRef, useEffect } from 'react';
+import gsap from 'gsap';
+const SelectEngine = forwardRef(
+  (
+    {
+      elements = [],
+      is_open,
+      is_rendered,
+      selectedElement = '',
+      controller,
+      inputRef,
+      OnChangeCallback
+    },
+    ref
+  ) => {
+    function ChangeValue(value) {
+      if (!value) {
+        return;
+      }
+      inputRef.current.value = value;
+      controller((prevData) => ({
+        ...prevData,
+        is_open: false,
+      }));
+      // Fixes major bug
+      OnChangeCallback();
+    }
+
+    React.useEffect(() => {
+      if (!ref?.current) return;
+
+      if (is_open) {
+        gsap.fromTo(
+          ref.current,
+          {
+            height: 0,
+            opacity: 0,
+          },
+          {
+            height: 'auto',
+            opacity: 1,
+            duration: 1.1,
+            ease: 'power2.inOut',
+          }
+        );
+      } else {
+        gsap.to(ref.current, {
+          height: 0,
+          opacity: 0,
+          duration: 0.3,
+          ease: 'power2.inOut',
+        });
+      }
+    }, [is_open, elements]);
+
+    return (
+      <>
+        {is_rendered && (
+          <ul
+            id="dropdown-select"
+            role="listbox"
+            style={
+              is_open
+                ? { background: 'whitesmoke', border: '1px solid #e2e8f0' }
+                : { background: 'transparent', border: 'none' }
+            }
+            ref={ref}
+          >
+            {is_open &&
+              elements.map((element, index) => (
+                <li
+                  role="listitem"
+                  key={index}
+                  onClick={() => ChangeValue(element)}
+                >
+                  {element}
+                </li>
+              ))}
+            {is_open && elements.length === 0 && (
+              <li
+                role="listitem"
+                key={404}
+                style={{
+                  fontSize: '.5rem',
+                  color: '#888',
+                  textAlign: 'center',
+                }}
+              >
+                Not Found!
+              </li>
+            )}
+          </ul>
+        )}
+      </>
+    );
+  }
+);
+
+export default SelectEngine;

package/index.jsx

@@ -0,0 +1 @@
+export { default as Modal } from "./components/modal/modal";

package/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "dyvix-ui",
+  "version": "0.0.1",
+  "main": "index.jsx",
+  "type": "module"
+}