jops-core 1.0.0

package/templates/hello-world/src/css/styles.css

@@ -0,0 +1,488 @@
+/* ── CSS Variables ───────────────────────────────────────────── */
+:root {
+  --color-primary: #4f46e5;
+  --color-primary-hover: #4338ca;
+  --color-secondary: #06b6d4;
+  --color-bg: #f8fafc;
+  --color-surface: #ffffff;
+  --color-border: #e2e8f0;
+  --color-text: #1e293b;
+  --color-text-muted: #64748b;
+  --color-active: #22c55e;
+  --color-inactive: #ef4444;
+
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 4rem;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 1rem;
+
+  --font-sans: system-ui, -apple-system, sans-serif;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* ── Reset ───────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+/* ── Root ────────────────────────────────────────────────────── */
+.jops-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* ── Header ──────────────────────────────────────────────────── */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header__brand {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-sm);
+}
+
+.header__logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  letter-spacing: -0.5px;
+}
+
+.header__tagline {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.header__nav {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.header__nav-link {
+  text-decoration: none;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.header__nav-link:hover {
+  color: var(--color-primary);
+}
+
+/* ── Main ────────────────────────────────────────────────────── */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-xl) var(--spacing-lg);
+  max-width: 1100px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* ── Section Title ───────────────────────────────────────────── */
+.section__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: var(--spacing-lg);
+}
+
+.section__title--mt {
+  margin-top: var(--spacing-xl);
+}
+
+/* ── Hero ────────────────────────────────────────────────────── */
+.hero {
+  text-align: center;
+  padding: var(--spacing-xl) var(--spacing-md);
+  background: linear-gradient(
+    135deg,
+    var(--color-primary) 0%,
+    var(--color-secondary) 100%
+  );
+  border-radius: var(--radius-lg);
+  color: #fff;
+}
+
+.hero__title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-bottom: var(--spacing-md);
+}
+
+.hero__subtitle {
+  font-size: 1.1rem;
+  opacity: 0.9;
+  max-width: 600px;
+  margin: 0 auto var(--spacing-lg);
+}
+
+/* ── Button ──────────────────────────────────────────────────── */
+.btn {
+  display: inline-block;
+  padding: 0.65rem 1.5rem;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    transform 0.1s;
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+  transform: translateY(-1px);
+}
+
+/* ── Cards ───────────────────────────────────────────────────── */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.card__title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: var(--spacing-sm);
+  color: var(--color-primary);
+}
+
+.card__body {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+}
+
+/* ── Form ────────────────────────────────────────────────────── */
+.form-section {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  max-width: 600px;
+}
+
+.form__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.form__group--inline {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.form__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.form__label--inline {
+  font-weight: 400;
+}
+
+.form__input,
+.form__select,
+.form__textarea {
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background: var(--color-bg);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.form__input:focus,
+.form__select:focus,
+.form__textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+}
+
+.form__textarea {
+  resize: vertical;
+}
+
+.form__radio-group {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.form__radio-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+/* ── Table ───────────────────────────────────────────────────── */
+.data-section {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.table th {
+  text-align: left;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-bg);
+  border-bottom: 2px solid var(--color-border);
+  font-weight: 700;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+}
+
+.table td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.table tbody tr:hover {
+  background: var(--color-bg);
+}
+
+/* ── Badge ───────────────────────────────────────────────────── */
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.badge--active {
+  background: #dcfce7;
+  color: #166534;
+}
+.badge--inactive {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+/* ── List ────────────────────────────────────────────────────── */
+.list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.list__item {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.list__item::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  flex-shrink: 0;
+}
+
+/* ── Media ───────────────────────────────────────────────────── */
+.media-section {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.media-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.media-card__img-placeholder {
+  width: 100%;
+  aspect-ratio: 16/9;
+  background: linear-gradient(135deg, var(--color-border), #cbd5e1);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.media-card__caption {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+/* ── Media Dialog ────────────────────────────────────────────── */
+.media-dialog {
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  aspect-ratio: 1.5 / 1;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.media-dialog__back {
+  align-self: flex-start;
+}
+
+.media-dialog__image {
+  flex: 1;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+}
+
+.media-dialog__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.media-dialog__caption {
+  font-size: 1rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+/* ── Footer ──────────────────────────────────────────────────── */
+.footer {
+  text-align: center;
+  padding: var(--spacing-lg);
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.footer__text {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+.footer__text--small {
+  font-size: 0.75rem;
+}
+
+/* ── Responsive ──────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+  .header__nav {
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .hero__title {
+    font-size: 1.75rem;
+  }
+  .main {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
+}

package/templates/hello-world/src/layout/layout_data.js

@@ -0,0 +1,25 @@
+import { layout } from "jops-core";
+
+export default layout`
+<section id="data" class="data-section">
+    <h2 class="section__title">Data Table</h2>
+    <div class="table-wrapper">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                </tr>
+            </thead>
+            <tbody id="tableBody">
+            </tbody>
+        </table>
+    </div>
+
+    <h2 class="section__title section__title--mt">Item List</h2>
+    <ul id="list" class="list">
+    </ul>
+</section>
+`;

package/templates/hello-world/src/layout/layout_footer.js

@@ -0,0 +1,8 @@
+import { layout } from "jops-core";
+
+export default layout`
+<footer id="contact" class="footer">
+    <p class="footer__text">JOPS Framework &mdash; Built with vanilla ES6. No bundler required.</p>
+    <p class="footer__text footer__text--small">&copy; 2026 JOPS. All rights reserved.</p>
+</footer>
+`;

package/templates/hello-world/src/layout/layout_form.js

@@ -0,0 +1,44 @@
+import { layout } from "jops-core";
+
+export default layout`
+<section id="form" class="form-section">
+    <h2 class="section__title">Sample Form</h2>
+    <form class="form" type="jops-event-bind" onsubmit="onSubmit">
+        <div class="form__group">
+            <label class="form__label" for="fullname">Full Name</label>
+            <input class="form__input" type="text" id="fullname" name="fullname" placeholder="Enter your full name">
+        </div>
+        <div class="form__group">
+            <label class="form__label" for="email">Email</label>
+            <input class="form__input" type="email" id="email" name="email" placeholder="Enter your email">
+        </div>
+        <div class="form__group">
+            <label class="form__label" for="role">Role</label>
+            <select class="form__select" id="role" name="role">
+                <option value="">Select a role</option>
+                <option value="frontend">Frontend Developer</option>
+                <option value="backend">Backend Developer</option>
+                <option value="fullstack">Full Stack Developer</option>
+                <option value="mobile">Mobile Developer</option>
+            </select>
+        </div>
+        <div class="form__group">
+            <label class="form__label">Experience</label>
+            <div class="form__radio-group">
+                <label class="form__radio-label"><input type="radio" name="experience" value="junior"> Junior</label>
+                <label class="form__radio-label"><input type="radio" name="experience" value="mid"> Mid</label>
+                <label class="form__radio-label"><input type="radio" name="experience" value="senior"> Senior</label>
+            </div>
+        </div>
+        <div class="form__group">
+            <label class="form__label" for="message">Message</label>
+            <textarea class="form__textarea" id="message" name="message" rows="4" placeholder="Write your message here..."></textarea>
+        </div>
+        <div class="form__group form__group--inline">
+            <input class="form__checkbox" type="checkbox" id="agree" name="agree" value="yes">
+            <label class="form__label form__label--inline" for="agree">I agree to the terms and conditions</label>
+        </div>
+        <button class="btn btn--primary" type="submit">Submit</button>
+    </form>
+</section>
+`;

package/templates/hello-world/src/layout/layout_header.js

@@ -0,0 +1,17 @@
+import { layout } from "jops-core";
+
+export default layout`
+<header class="header">
+    <div class="header__brand">
+        <span class="header__logo">JOPS</span>
+        <span class="header__tagline">Hello World</span>
+    </div>
+    <nav class="header__nav">
+        <a class="header__nav-link" href="#home">Home</a>
+        <a class="header__nav-link" href="#features">Features</a>
+        <a class="header__nav-link" href="#form">Form</a>
+        <a class="header__nav-link" href="#data">Data</a>
+        <a class="header__nav-link" href="#media">Media</a>
+    </nav>
+</header>
+`;

package/templates/hello-world/src/layout/layout_hero.js

@@ -0,0 +1,9 @@
+import { layout } from "jops-core";
+
+export default layout`
+<section id="home" class="hero">
+    <h1 class="hero__title">Welcome to JOPS</h1>
+    <p class="hero__subtitle">A no-bundler, vanilla-ES6-class SPA framework built for developers who think in OOP.</p>
+    <button class="btn btn--primary">Get Started</button>
+</section>
+`;

package/templates/hello-world/src/layout/mainlayout.js

@@ -0,0 +1,39 @@
+import { layout } from "jops-core";
+
+export default layout`
+<link rel="stylesheet" href="./src/css/styles.css">
+
+<div class="jops-root">
+
+    <View type="jops" layout="/src/layout/layout_header.js"></View>
+
+    <main class="main">
+
+      <Router type="jops" animation="slide">
+
+        <View path="/home" type="jops" layout="/src/layout/layout_hero.js"></View>
+
+        <Features path="/features" type="jops"
+           src="/src/Features.js">
+        </Features>
+
+        <Form path="/form" type="jops"
+           src="/src/Form.js">
+        </Form>
+
+        <DataSection path="/data" type="jops"
+           src="/src/DataSection.js">
+        </DataSection>
+
+        <Media path="/media" type="jops"
+           src="/src/Media.js">
+        </Media>
+       
+      </Router>
+
+    </main>
+
+    <View type="jops" layout="/src/layout/layout_footer.js"></View>
+
+</div>
+`;