dyvix-ui 0.0.2 → 0.0.4

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: need triage
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature ]"
+labels: enhancement
+assignees: ''
+
+---
+
+## Summary
+A clear and brief description of the feature.
+
+## Motivation
+Why this feature should be added? 
+
+## Details
+How can this be implemented?
+
+## Example Usage
+```jsx
+// How would this look in code?
+```
+## Additional details
+Any other context, screenshots, or references.

package/LICENSE

@@ -1,21 +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.
+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

@@ -1 +1,51 @@
-# dyvix-ui
+<h1 align="center">
+  <img width="100" height="100" alt="Dyvix logo" src="https://raw.githubusercontent.com/younisdev/dyvix-ui/main/logo.png" />
+  <br />
+  Dyvix UI
+</h1>
+<h4 align="center">
+  Dyvix is an open source, modern, config-driven, animated component UI library. Beautiful by default, customizable by design.
+</h4>
+<p align="center">
+  <img src="https://img.shields.io/npm/v/dyvix-ui?color=bf5af2&style=flat-square" />
+  <img src="https://img.shields.io/npm/l/dyvix-ui?color=0ea5e9&style=flat-square" />
+  <img src="https://img.shields.io/github/stars/younisdev/dyvix-ui?color=ff6ac1&style=flat-square" />
+</p>
+
+```bash
+# React
+npm i dyvix-ui
+```
+
+### Basic usage
+```jsx
+import { Modal } from 'dyvix-ui'
+
+function ModalExample()
+{
+
+  return(
+        <Modal
+          title="Register"
+          type="form"
+          animation="bubble"
+          Id="register-modal"
+          Class="modal"
+          elements={[
+            { type: "text", placeholder: ["First Name", "Last Name"], id: "name", name: ["firstName", "lastName"], className: "ex-text", amount: 2 },
+            { type: "email", placeholder: "Email", id: "email", name: "email", className: "ex-text", amount: 1 },
+            { type: "password", placeholder: "Password", id: "password", name: "password", className: "ex-text", amount: 1 },
+          ]}
+          onSubmit={(data) => console.log(data)}
+        />
+    )
+}
+```
+
+## Contributing
+
+Feel free to open meaningful issues and prs.
+
+## Note
+
+This project is still in early alpha expect some bugs and unfinished code.

package/components/modal/dependencies/animations.json

@@ -1,5 +1,15 @@
-[
-    {
-        "s": ["Dyvix"]
-    }
-]
+[
+    {
+        "animation": "fade",
+        "type": "In",
+        "default-duration": 1,
+        "ease": "power2.out",
+        "stagger": 2,
+        "from": {
+            "x": 5
+        },
+        "to": {
+            "x": 10
+        }
+    }
+]

package/components/modal/dependencies/elements.json

@@ -1,32 +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
-    }
+[
+    {
+        "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

@@ -1,60 +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;
+.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

@@ -1,144 +1,142 @@
-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
-*/
+import elementsData from "./dependencies/elements.json"
+import SelectEngine from "../select/SelectEngine";
+import "./dependencies/style/elements.css"
+import React from "react";
+
+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, onSubmit})
+{
+  const [data, SetData] = React.useState({});
+  const fields = SerializeData(title, type, elements, animation, Id, Class, onSubmit); 
+
+  function handelInputChange(name, value)
+  {
+    SetData(prev => ({...prev, [name]: value}))
+  }
+  
+  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={field.id || i} >
+              {Array.from({ length: field.amount }, (_, j) => {
+                  const name = Array.isArray(field.name) ? field.name[j] : field.name
+                  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} onChange={(e) => handelInputChange(name, e.target.value)} />
+              })
+              }
+              
+            </div>
+          )
+        })}
+        <button className="modal-btn" onClick={()=> onSubmit(data)}>Submit</button>
+      </div>
+    </>
+  )
+}
+
+function SerializeData(title, type, elements, animation, Id, Class, onSubmit)
+{
+  const validator = ValidateInput(title, type, elements, animation, Id, Class, onSubmit)
+
+    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, onSubmit)
+{
+  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
+  }
+
+  if(onSubmit !== null && typeof onSubmit !== 'function')
+  {
+    return {status: -1, error: "onSubmit should be provided as a function."};
+  }
+
+  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."};
+      }
+      if (!Array.isArray(element.name) || element.name.length !== element.amount)
+      {
+        return {status: -1, error: "Element name 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."};
+      }
+      if(typeof element.name !== "string")
+      {
+        return {status: -1, error: "Element name should be provided as string when the amount is set to 1."};
+      }
+    }
+  };
+
+  return  {status: 1};
+}
+
+export default Modal;

package/package.json

@@ -1,7 +1,29 @@
-{
-  "name": "dyvix-ui",
-  "version": "0.0.2",
-  "main": "index.jsx",
-  "type": "module",
-  "license": "MIT"
+{
+  "name": "dyvix-ui",
+  "version": "0.0.4",
+  "description": "Dyvix is an open source, modern, config-driven, animated component UI library. Beautiful by default, customizable by design.",
+  "main": "index.jsx",
+  "type": "module",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite": "^8.0.0"
+  },
+  "keywords": [
+    "react",
+    "ui-kit",
+    "config",
+    "gsap",
+    "animation",
+    "components",
+    "ui-library"
+  ],
+  "dependencies": {
+    "gsap": "^3.14.2"
+  }
 }