jquard 0.0.1 → 0.2.0

data/lib/jquard/tailwind/application.css

@@ -0,0 +1,619 @@
+@import "tailwindcss" source(none);
+
+@layer base {
+  html:has(> .jq-body) {
+    @apply bg-gray-50;
+  }
+}
+
+@layer components {
+  .jq-body {
+    @apply min-h-screen bg-gray-50 font-sans text-gray-950 antialiased;
+  }
+
+  .jq-shell {
+    @apply flex min-h-[calc(100dvh-4rem)];
+  }
+
+  .jq-sidebar {
+    @apply sticky top-16 z-20 flex h-[calc(100dvh-4rem)] w-72 shrink-0 flex-col;
+  }
+
+  .jq-brand {
+    @apply text-xl font-bold tracking-tight text-gray-950;
+  }
+
+  .jq-sidebar-nav {
+    @apply flex flex-1 flex-col gap-y-7 overflow-y-auto px-6 py-8;
+  }
+
+  .jq-nav-group-label {
+    @apply px-2 text-xs font-semibold tracking-wider text-gray-500 uppercase;
+  }
+
+  .jq-nav-items {
+    @apply mt-2 flex flex-col gap-y-1;
+  }
+
+  .jq-nav-item {
+    @apply flex items-center gap-x-3 rounded-lg px-2 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-100;
+  }
+
+  .jq-nav-item-icon {
+    @apply h-6 w-6 shrink-0 text-gray-400;
+  }
+
+  .jq-nav-item--active {
+    @apply bg-gray-100;
+    color: var(--jq-primary-600);
+  }
+
+  .jq-nav-item--active .jq-nav-item-icon {
+    color: var(--jq-primary-600);
+  }
+
+  .jq-main {
+    @apply min-w-0 flex-1;
+  }
+
+  .jq-topbar {
+    @apply sticky top-0 z-30 flex h-16 items-center bg-white px-6 shadow-sm ring-1 ring-gray-950/5 lg:px-8;
+  }
+
+  .jq-topbar-start {
+    @apply me-6 flex items-center;
+  }
+
+  .jq-topbar-end {
+    @apply ms-auto flex items-center gap-x-4;
+  }
+
+  .jq-content {
+    @apply px-6 py-8 lg:px-8;
+  }
+
+  .jq-page-header {
+    @apply mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between;
+  }
+
+  .jq-page-header .jq-breadcrumbs {
+    @apply mb-2 hidden sm:block;
+  }
+
+  .jq-page-header-actions {
+    @apply flex shrink-0 items-center gap-3 sm:mt-7;
+  }
+
+  .jq-breadcrumbs-list {
+    @apply flex flex-wrap items-center gap-x-2;
+  }
+
+  .jq-breadcrumbs-item {
+    @apply flex items-center gap-x-2 text-sm font-medium text-gray-500;
+  }
+
+  .jq-breadcrumbs-item a {
+    @apply transition duration-75 hover:text-gray-700;
+  }
+
+  .jq-breadcrumbs-item-separator {
+    @apply flex size-4 text-gray-400;
+  }
+
+  .jq-page-title {
+    @apply text-2xl font-bold tracking-tight text-gray-950;
+  }
+
+  .jq-card {
+    @apply overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5;
+  }
+
+  .jq-table-toolbar {
+    @apply flex items-center justify-end gap-x-4 px-4 py-3;
+  }
+
+  .jq-search {
+    @apply relative;
+  }
+
+  .jq-search-icon {
+    @apply pointer-events-none absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400;
+  }
+
+  .jq-search-input {
+    @apply w-64 rounded-lg border-0 bg-white py-1.5 pr-3 pl-10 text-sm text-gray-950 ring-1 ring-gray-950/10 placeholder:text-gray-400;
+  }
+
+  .jq-search-input:focus {
+    @apply ring-2 outline-none;
+    --tw-ring-color: var(--jq-primary-600);
+  }
+
+  .jq-table-scroll {
+    @apply overflow-x-auto;
+  }
+
+  .jq-table {
+    @apply w-full text-left text-sm;
+  }
+
+  .jq-table thead tr {
+    @apply border-b border-gray-200;
+  }
+
+  .jq-table th {
+    @apply px-4 py-3 font-semibold text-gray-950;
+  }
+
+  .jq-table tbody tr {
+    @apply border-b border-gray-100 transition;
+  }
+
+  .jq-table tbody tr:last-child {
+    @apply border-b-0;
+  }
+
+  .jq-table tbody tr:hover {
+    @apply bg-gray-50;
+  }
+
+  .jq-table td {
+    @apply px-4 py-3 text-gray-700;
+  }
+
+  .jq-sort-link {
+    @apply inline-flex items-center gap-x-1 hover:text-gray-600;
+  }
+
+  .jq-sort-icon {
+    @apply h-4 w-4 text-gray-400;
+  }
+
+  .jq-badge {
+    @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium;
+  }
+
+  .jq-badge--gray {
+    @apply bg-gray-50 text-gray-600 ring-1 ring-gray-500/20 ring-inset;
+  }
+
+  .jq-badge--success {
+    @apply bg-green-50 text-green-700 ring-1 ring-green-600/20 ring-inset;
+  }
+
+  .jq-badge--warning {
+    @apply bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 ring-inset;
+  }
+
+  .jq-badge--danger {
+    @apply bg-red-50 text-red-700 ring-1 ring-red-600/10 ring-inset;
+  }
+
+  .jq-badge--info {
+    @apply bg-blue-50 text-blue-700 ring-1 ring-blue-700/10 ring-inset;
+  }
+
+  .jq-badge--primary {
+    @apply ring-1 ring-inset;
+    background-color: color-mix(in srgb, var(--jq-primary-600) 8%, white);
+    color: var(--jq-primary-700);
+    --tw-ring-color: color-mix(in srgb, var(--jq-primary-600) 25%, transparent);
+  }
+
+  .jq-bool-icon {
+    @apply h-6 w-6;
+  }
+
+  .jq-bool-icon--true {
+    @apply text-green-500;
+  }
+
+  .jq-bool-icon--false {
+    @apply text-red-500;
+  }
+
+  .jq-table-footer {
+    @apply border-t border-gray-200 px-4 py-3;
+  }
+
+  .jq-pagination {
+    @apply grid grid-cols-[1fr_auto_1fr] items-center gap-x-3;
+  }
+
+  .jq-pagination-overview {
+    @apply text-sm font-medium text-gray-700;
+  }
+
+  .jq-pagination-per-page {
+    @apply col-start-2 justify-self-center;
+  }
+
+  .jq-input-group {
+    @apply flex items-stretch rounded-lg bg-white shadow-sm ring-1 ring-gray-950/10 transition duration-75 focus-within:ring-2;
+  }
+
+  .jq-input-group:focus-within {
+    --tw-ring-color: var(--jq-primary-600);
+  }
+
+  .jq-input-group-prefix {
+    @apply flex items-center border-e border-gray-200 px-3 text-sm text-gray-500;
+  }
+
+  .jq-per-page-select {
+    @apply appearance-none rounded-e-lg border-0 bg-transparent py-1.5 ps-2.5 pe-7 text-sm font-medium text-gray-950 outline-none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.15em 1.15em;
+  }
+
+  .jq-pagination-items {
+    @apply col-start-3 flex list-none justify-self-end rounded-lg bg-white shadow-sm ring-1 ring-gray-950/10;
+  }
+
+  .jq-pagination-item {
+    @apply border-x-[0.5px] border-gray-200 first:border-s-0 last:border-e-0;
+  }
+
+  .jq-pagination-item-btn {
+    @apply relative flex p-2 transition duration-75 hover:bg-gray-50;
+  }
+
+  .jq-pagination-item:first-child .jq-pagination-item-btn {
+    @apply rounded-s-lg;
+  }
+
+  .jq-pagination-item:last-child .jq-pagination-item-btn {
+    @apply rounded-e-lg;
+  }
+
+  .jq-pagination-item-label {
+    @apply px-1.5 text-sm font-semibold text-gray-700;
+  }
+
+  .jq-pagination-item--active .jq-pagination-item-btn {
+    @apply bg-gray-50;
+  }
+
+  .jq-pagination-item--active .jq-pagination-item-label {
+    color: var(--jq-primary-700);
+  }
+
+  .jq-pagination-item--disabled .jq-pagination-item-btn {
+    @apply pointer-events-none;
+  }
+
+  .jq-pagination-item--disabled .jq-pagination-item-label {
+    @apply text-gray-500;
+  }
+
+  .jq-pagination-icon {
+    @apply h-5 w-5 text-gray-400;
+  }
+
+  .jq-empty-state {
+    @apply px-6 py-12 text-center text-sm text-gray-500;
+  }
+
+  .jq-actions-header {
+    @apply w-1;
+  }
+
+  .jq-row-actions {
+    @apply flex items-center justify-end gap-x-3 whitespace-nowrap;
+  }
+
+  .jq-row-action {
+    @apply inline-flex cursor-pointer items-center gap-x-1 bg-transparent text-sm font-medium text-gray-600 hover:text-gray-950;
+  }
+
+  .jq-row-action--danger {
+    @apply text-red-600 hover:text-red-700;
+  }
+
+  .jq-row-action-icon {
+    @apply h-4 w-4;
+  }
+
+  .jq-form {
+    @apply flex max-w-3xl flex-col gap-y-6;
+  }
+
+  .jq-section {
+    @apply rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5;
+  }
+
+  .jq-section-header {
+    @apply mb-6;
+  }
+
+  .jq-section-heading {
+    @apply text-base font-semibold text-gray-950;
+  }
+
+  .jq-section-description {
+    @apply mt-1 text-sm text-gray-500;
+  }
+
+  .jq-schema-grid {
+    @apply grid gap-6;
+  }
+
+  .jq-field {
+    @apply flex flex-col gap-y-1.5;
+  }
+
+  .jq-label {
+    @apply text-sm font-medium text-gray-950;
+  }
+
+  .jq-required {
+    @apply ml-0.5 text-red-600;
+  }
+
+  .jq-input {
+    @apply w-full rounded-lg border-0 bg-white px-3 py-1.5 text-sm text-gray-950 ring-1 ring-gray-950/10 placeholder:text-gray-400;
+  }
+
+  .jq-input:focus {
+    @apply ring-2 outline-none;
+    --tw-ring-color: var(--jq-primary-600);
+  }
+
+  .jq-input--error {
+    @apply ring-red-600;
+  }
+
+  .jq-input--error:focus {
+    --tw-ring-color: var(--color-red-600);
+  }
+
+  .jq-field-error {
+    @apply text-sm text-red-600;
+  }
+
+  .jq-helper-text {
+    @apply text-sm text-gray-500;
+  }
+
+  .jq-field-inline {
+    @apply flex items-center gap-x-3;
+  }
+
+  .jq-checkbox {
+    @apply h-4 w-4 rounded border-gray-300;
+    accent-color: var(--jq-primary-600);
+  }
+
+  .jq-toggle {
+    @apply relative inline-flex;
+  }
+
+  .jq-toggle-input {
+    @apply absolute inset-0 z-10 cursor-pointer opacity-0;
+  }
+
+  .jq-toggle-track {
+    @apply relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors;
+  }
+
+  .jq-toggle-thumb {
+    @apply absolute left-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform;
+  }
+
+  .jq-toggle-input:checked + .jq-toggle-track {
+    background-color: var(--jq-primary-600);
+  }
+
+  .jq-toggle-input:checked + .jq-toggle-track .jq-toggle-thumb {
+    transform: translateX(1.25rem);
+  }
+
+  .jq-form-actions {
+    @apply flex items-center gap-x-3;
+  }
+
+  .jq-btn {
+    @apply inline-flex cursor-pointer items-center gap-x-1.5 rounded-lg px-3 py-2 text-sm font-semibold;
+  }
+
+  .jq-btn-icon {
+    @apply h-5 w-5;
+  }
+
+  .jq-btn--primary {
+    @apply text-white;
+    background-color: var(--jq-primary-600);
+  }
+
+  .jq-btn--primary:hover {
+    background-color: var(--jq-primary-500);
+  }
+
+  .jq-btn--secondary {
+    @apply bg-white text-gray-950 ring-1 ring-gray-950/10 hover:bg-gray-50;
+  }
+
+  .jq-toast {
+    @apply fixed top-4 right-4 z-50 flex items-center gap-x-2 rounded-xl bg-white px-4 py-3 text-sm font-medium text-gray-950 shadow-lg ring-1 ring-gray-950/5;
+    animation: jq-toast-out 4s forwards;
+  }
+
+  .jq-toast-icon {
+    @apply h-6 w-6 text-green-500;
+  }
+
+  .jq-modal {
+    @apply m-auto w-full max-w-md rounded-xl bg-white p-0 shadow-xl ring-1 ring-gray-950/5;
+  }
+
+  .jq-modal::backdrop {
+    background-color: rgb(3 7 18 / 0.5);
+  }
+
+  .jq-modal-window {
+    @apply flex flex-col items-center gap-y-1.5 p-6 text-center;
+  }
+
+  .jq-modal-icon-circle {
+    @apply mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-red-100;
+  }
+
+  .jq-modal-icon {
+    @apply h-6 w-6 text-red-600;
+  }
+
+  .jq-modal-heading {
+    @apply text-base font-semibold text-gray-950;
+  }
+
+  .jq-modal-description {
+    @apply text-sm text-gray-500;
+  }
+
+  .jq-modal-actions {
+    @apply mt-4 grid w-full grid-cols-2 gap-3;
+  }
+
+  .jq-modal-actions .jq-btn {
+    @apply justify-center;
+  }
+
+  .jq-btn--danger {
+    @apply bg-red-600 text-white hover:bg-red-500;
+  }
+
+  .jq-btn--block {
+    @apply w-full justify-center;
+  }
+
+  .jq-avatar {
+    @apply flex size-8 shrink-0 items-center justify-center rounded-full bg-gray-950 text-xs font-medium text-white;
+  }
+
+  .jq-dropdown {
+    @apply relative;
+  }
+
+  .jq-dropdown-trigger {
+    @apply flex cursor-pointer list-none;
+  }
+
+  .jq-dropdown-trigger::-webkit-details-marker {
+    @apply hidden;
+  }
+
+  .jq-dropdown-panel {
+    @apply absolute end-0 top-full z-20 mt-2 w-screen max-w-56 divide-y divide-gray-100 rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5;
+  }
+
+  .jq-dropdown-header {
+    @apply flex w-full items-center gap-2 p-3 text-sm font-medium;
+  }
+
+  .jq-dropdown-header-label {
+    @apply flex-1 truncate text-start text-gray-700;
+  }
+
+  .jq-dropdown-icon {
+    @apply size-5 shrink-0 text-gray-400;
+  }
+
+  .jq-dropdown-list {
+    @apply grid gap-y-px p-1;
+  }
+
+  .jq-dropdown-form {
+    @apply grid;
+  }
+
+  .jq-dropdown-list-item {
+    @apply flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md bg-transparent p-2 text-sm whitespace-nowrap transition-colors duration-75 hover:bg-gray-50;
+  }
+
+  .jq-dropdown-list-item-label {
+    @apply flex-1 truncate text-start text-gray-700;
+  }
+
+  .jq-auth {
+    @apply flex min-h-dvh flex-col items-center justify-center px-4;
+  }
+
+  .jq-auth-card {
+    @apply my-16 flex w-full max-w-lg flex-col gap-y-6 bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 sm:rounded-xl sm:px-12;
+  }
+
+  .jq-auth-header {
+    @apply flex flex-col items-center;
+  }
+
+  .jq-auth-header .jq-brand {
+    @apply mb-4;
+  }
+
+  .jq-auth-heading {
+    @apply text-center text-2xl font-bold tracking-tight text-gray-950;
+  }
+
+  .jq-auth-subheading {
+    @apply mt-2 text-center text-sm text-gray-500;
+  }
+
+  .jq-auth-form {
+    @apply grid gap-y-6;
+  }
+
+  .jq-auth-flash {
+    @apply rounded-lg px-4 py-3 text-center text-sm font-medium ring-1;
+  }
+
+  .jq-auth-flash--alert {
+    @apply bg-red-50 text-red-700 ring-red-600/20;
+  }
+
+  .jq-auth-links {
+    @apply flex flex-col items-center gap-y-2;
+  }
+
+  .jq-auth-divider {
+    @apply border-t border-gray-200;
+  }
+
+  .jq-label-row {
+    @apply flex items-center justify-between;
+  }
+
+  .jq-link {
+    @apply text-sm font-semibold hover:underline;
+    color: var(--jq-primary-600);
+  }
+
+  .jq-link:hover {
+    color: var(--jq-primary-500);
+  }
+
+  .jq-auth-errors {
+    @apply rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 ring-1 ring-red-600/20;
+  }
+
+  .jq-auth-errors-title {
+    @apply font-semibold;
+  }
+
+  .jq-auth-errors-list {
+    @apply mt-1 list-disc ps-5;
+  }
+}
+
+@keyframes jq-toast-out {
+  0%,
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

data/lib/jquard/version.rb

@@ -1,3 +1,3 @@
 module Jquard
-  VERSION = "0.0.1"
+  VERSION = "0.2.0"
 end

data/lib/jquard.rb

@@ -1,6 +1,66 @@
+require "view_component"
+require "turbo-rails"
+
 require "jquard/version"
 require "jquard/engine"
+require "jquard/configuration"
+require "jquard/component_dispatch"
+require "jquard/registry"
+require "jquard/resource"
+require "jquard/resources/pages/page"
+require "jquard/resources/pages/list_records"
+require "jquard/resources/pages/create_record"
+require "jquard/resources/pages/edit_record"
+require "jquard/icons"
+require "jquard/tables/columns/column"
+require "jquard/tables/columns/text_column"
+require "jquard/tables/columns/icon_column"
+require "jquard/tables/actions/action"
+require "jquard/tables/actions/edit_action"
+require "jquard/tables/actions/delete_action"
+require "jquard/tables/table"
+require "jquard/tables/components"
+require "jquard/tables/query"
+require "jquard/schemas/schema"
+require "jquard/schemas/fields/field"
+require "jquard/schemas/fields/text_input"
+require "jquard/schemas/fields/textarea"
+require "jquard/schemas/fields/select"
+require "jquard/schemas/fields/checkbox"
+require "jquard/schemas/fields/toggle"
+require "jquard/schemas/fields/date_picker"
+require "jquard/schemas/fields/date_time_picker"
+require "jquard/schemas/fields/hidden"
+require "jquard/schemas/layouts/layout"
+require "jquard/schemas/layouts/section"
+require "jquard/schemas/layouts/grid"
+require "jquard/schemas/components"
 
 module Jquard
-  # Your code goes here...
+  class Error < StandardError; end
+
+  class << self
+    def config
+      @config ||= Configuration.new
+    end
+
+    def configure
+      yield config
+    end
+
+    def registry
+      @registry ||= Registry.new
+    end
+
+    def eager_load_resources!
+      dir = resources_dir
+      Rails.autoloaders.main.eager_load_dir(dir) if dir&.directory?
+    end
+
+    def resources_dir
+      return nil unless defined?(Rails.application) && Rails.application
+
+      Rails.application.root.join("app/jquard")
+    end
+  end
 end