data_porter 0.1.0 → 0.4.0

data/app/assets/stylesheets/data_porter/application.css

@@ -1,646 +1,12 @@
-:root {
-  --dp-primary: #4f46e5;
-  --dp-primary-hover: #4338ca;
-  --dp-primary-light: #eef2ff;
-  --dp-success: #059669;
-  --dp-success-light: #ecfdf5;
-  --dp-success-border: #a7f3d0;
-  --dp-warning: #d97706;
-  --dp-warning-light: #fffbeb;
-  --dp-warning-border: #fde68a;
-  --dp-danger: #dc2626;
-  --dp-danger-hover: #b91c1c;
-  --dp-danger-light: #fef2f2;
-  --dp-danger-border: #fecaca;
-  --dp-info: #2563eb;
-  --dp-info-light: #eff6ff;
-  --dp-info-border: #bfdbfe;
-  --dp-purple: #7c3aed;
-  --dp-purple-light: #f5f3ff;
-  --dp-purple-border: #ddd6fe;
-  --dp-gray-50: #f9fafb;
-  --dp-gray-100: #f3f4f6;
-  --dp-gray-200: #e5e7eb;
-  --dp-gray-300: #d1d5db;
-  --dp-gray-400: #9ca3af;
-  --dp-gray-500: #6b7280;
-  --dp-gray-600: #4b5563;
-  --dp-gray-700: #374151;
-  --dp-gray-800: #1f2937;
-  --dp-gray-900: #111827;
-  --dp-radius-sm: 0.375rem;
-  --dp-radius-md: 0.5rem;
-  --dp-radius-lg: 0.75rem;
-  --dp-radius-xl: 1rem;
-  --dp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --dp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
-  --dp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
-}
-
-.data-porter {
-  font-family: "Inter", system-ui, -apple-system, sans-serif;
-  color: var(--dp-gray-800);
-  max-width: 1100px;
-  margin: 2rem auto;
-  padding: 0 1.5rem;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-}
-
-.dp-title {
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin: 0;
-  letter-spacing: -0.025em;
-  color: var(--dp-gray-900);
-}
-
-.dp-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--dp-gray-200);
-}
-
-.dp-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  margin-bottom: 1.5rem;
-  background: white;
-  border: 1px solid var(--dp-gray-200);
-  border-radius: var(--dp-radius-lg);
-  overflow: hidden;
-  box-shadow: var(--dp-shadow-sm);
-}
-
-.dp-table th,
-.dp-table td {
-  padding: 0.75rem 1rem;
-  text-align: left;
-}
-
-.dp-table th {
-  font-weight: 600;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--dp-gray-500);
-  background: var(--dp-gray-50);
-  border-bottom: 1px solid var(--dp-gray-200);
-}
-
-.dp-table td {
-  font-size: 0.875rem;
-  color: var(--dp-gray-700);
-  border-bottom: 1px solid var(--dp-gray-100);
-}
-
-.dp-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.dp-table tbody tr {
-  transition: background-color 0.15s ease;
-}
-
-.dp-table tbody tr:hover {
-  background: var(--dp-gray-50);
-}
-
-.dp-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border: 1px solid transparent;
-}
-
-.dp-badge--pending {
-  background: var(--dp-gray-100);
-  color: var(--dp-gray-600);
-  border-color: var(--dp-gray-300);
-}
-
-.dp-badge--parsing {
-  background: var(--dp-info-light);
-  color: var(--dp-info);
-  border-color: var(--dp-info-border);
-}
-
-.dp-badge--importing {
-  background: var(--dp-info-light);
-  color: var(--dp-info);
-  border-color: var(--dp-info-border);
-  animation: dp-pulse 2s ease-in-out infinite;
-}
-
-.dp-badge--previewing {
-  background: var(--dp-warning-light);
-  color: var(--dp-warning);
-  border-color: var(--dp-warning-border);
-}
-
-.dp-badge--completed {
-  background: var(--dp-success-light);
-  color: var(--dp-success);
-  border-color: var(--dp-success-border);
-}
-
-.dp-badge--failed {
-  background: var(--dp-danger-light);
-  color: var(--dp-danger);
-  border-color: var(--dp-danger-border);
-}
-
-.dp-badge--dry_running {
-  background: var(--dp-purple-light);
-  color: var(--dp-purple);
-  border-color: var(--dp-purple-border);
-  animation: dp-pulse 2s ease-in-out infinite;
-}
-
-@keyframes dp-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-
-.dp-summary-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.dp-card {
-  padding: 1.25rem;
-  border-radius: var(--dp-radius-lg);
-  border: 1px solid var(--dp-gray-200);
-  text-align: center;
-  background: white;
-  box-shadow: var(--dp-shadow-sm);
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-.dp-card:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--dp-shadow-md);
-}
-
-.dp-card strong {
-  display: block;
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 0.25rem;
-  letter-spacing: -0.025em;
-}
-
-.dp-card span {
-  font-size: 0.8rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.dp-card--complete {
-  border-color: var(--dp-success-border);
-  background: var(--dp-success-light);
-}
-
-.dp-card--complete strong { color: var(--dp-success); }
-
-.dp-card--partial {
-  border-color: var(--dp-warning-border);
-  background: var(--dp-warning-light);
-}
-
-.dp-card--partial strong { color: var(--dp-warning); }
-
-.dp-card--missing {
-  border-color: var(--dp-danger-border);
-  background: var(--dp-danger-light);
-}
-
-.dp-card--missing strong { color: var(--dp-danger); }
-
-.dp-card--duplicate {
-  border-color: var(--dp-gray-300);
-  background: var(--dp-gray-50);
-}
-
-.dp-card--duplicate strong { color: var(--dp-gray-500); }
-
-.dp-preview-table {
-  overflow-x: auto;
-  margin-bottom: 2rem;
-  border-radius: var(--dp-radius-lg);
-  border: 1px solid var(--dp-gray-200);
-  box-shadow: var(--dp-shadow-sm);
-}
-
-.dp-preview-table .dp-table {
-  margin-bottom: 0;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.dp-row--complete { background: var(--dp-success-light); }
-.dp-row--partial { background: var(--dp-warning-light); }
-.dp-row--missing { background: var(--dp-danger-light); }
-
-.dp-errors {
-  color: var(--dp-danger);
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-.dp-progress {
-  margin: 2rem 0;
-  background: var(--dp-gray-200);
-  border-radius: var(--dp-radius-xl);
-  overflow: hidden;
-  height: 1.75rem;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.dp-progress-bar {
-  height: 100%;
-  background: linear-gradient(135deg, var(--dp-primary), #818cf8);
-  border-radius: var(--dp-radius-xl);
-  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 0.75rem;
-  font-weight: 700;
-  min-width: 2.5rem;
-  position: relative;
-  overflow: hidden;
-}
-
-.dp-progress-bar::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.2),
-    transparent
-  );
-  animation: dp-shimmer 1.5s infinite;
-}
-
-@keyframes dp-shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-.dp-results {
-  padding: 1.5rem;
-  background: var(--dp-success-light);
-  border: 1px solid var(--dp-success-border);
-  border-radius: var(--dp-radius-lg);
-  margin-bottom: 2rem;
-  box-shadow: var(--dp-shadow-sm);
-}
-
-.dp-results p {
-  margin: 0.35rem 0;
-  font-size: 0.9375rem;
-}
-
-.dp-alert {
-  padding: 1.25rem 1.5rem;
-  border-radius: var(--dp-radius-lg);
-  margin-bottom: 2rem;
-  box-shadow: var(--dp-shadow-sm);
-}
-
-.dp-alert--danger {
-  background: var(--dp-danger-light);
-  border: 1px solid var(--dp-danger-border);
-  color: var(--dp-danger);
-}
-
-.dp-alert p {
-  margin: 0.35rem 0;
-  font-size: 0.9375rem;
-}
-
-.dp-form {
-  max-width: 520px;
-  background: white;
-  padding: 2rem;
-  border: 1px solid var(--dp-gray-200);
-  border-radius: var(--dp-radius-lg);
-  box-shadow: var(--dp-shadow-md);
-}
-
-.dp-field {
-  margin-bottom: 1.5rem;
-}
-
-.dp-label {
-  display: block;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--dp-gray-700);
-}
-
-.dp-select,
-.dp-file-input {
-  display: block;
-  width: 100%;
-  padding: 0.625rem 0.875rem;
-  border: 1px solid var(--dp-gray-300);
-  border-radius: var(--dp-radius-md);
-  font-size: 0.9375rem;
-  background: white;
-  color: var(--dp-gray-800);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  appearance: none;
-}
-
-.dp-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.5em 1.5em;
-  padding-right: 2.5rem;
-}
-
-.dp-select:focus,
-.dp-file-input:focus {
-  outline: none;
-  border-color: var(--dp-primary);
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
-}
-
-.dp-actions {
-  display: flex;
-  gap: 0.75rem;
-  margin: 2rem 0;
-}
-
-.dp-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.625rem 1.25rem;
-  border-radius: var(--dp-radius-md);
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-decoration: none;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  line-height: 1.25;
-}
-
-.dp-btn:active {
-  transform: scale(0.98);
-}
-
-.dp-btn--primary {
-  background: var(--dp-primary);
-  color: white;
-  box-shadow: var(--dp-shadow-sm);
-}
-
-.dp-btn--primary:hover {
-  background: var(--dp-primary-hover);
-  box-shadow: var(--dp-shadow-md);
-}
-
-.dp-btn--secondary {
-  background: white;
-  color: var(--dp-gray-700);
-  border-color: var(--dp-gray-300);
-  box-shadow: var(--dp-shadow-sm);
-}
-
-.dp-btn--secondary:hover {
-  background: var(--dp-gray-50);
-  border-color: var(--dp-gray-400);
-}
-
-.dp-btn--danger {
-  background: var(--dp-danger);
-  color: white;
-  box-shadow: var(--dp-shadow-sm);
-}
-
-.dp-btn--danger:hover {
-  background: var(--dp-danger-hover);
-  box-shadow: var(--dp-shadow-md);
-}
-
-.dp-link {
-  color: var(--dp-primary);
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.15s ease;
-}
-
-.dp-link:hover {
-  color: var(--dp-primary-hover);
-  text-decoration: underline;
-}
-
-.dp-nav {
-  margin-top: 2rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--dp-gray-200);
-}
-
-.dp-empty {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--dp-gray-400);
-  font-size: 0.9375rem;
-}
-
-.dp-empty-state {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: white;
-  border: 2px dashed var(--dp-gray-300);
-  border-radius: var(--dp-radius-xl);
-}
-
-.dp-empty-state__icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.6;
-}
-
-.dp-empty-state__text {
-  font-size: 1.125rem;
-  color: var(--dp-gray-500);
-  margin: 0 0 1.5rem;
-}
-
-.dp-modal {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  align-items: center;
-  justify-content: center;
-}
-
-.dp-modal--open {
-  display: flex;
-}
-
-.dp-modal__backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.dp-modal__content {
-  position: relative;
-  background: white;
-  border-radius: var(--dp-radius-xl);
-  box-shadow: var(--dp-shadow-lg), 0 25px 50px -12px rgba(0, 0, 0, 0.15);
-  width: 100%;
-  max-width: 520px;
-  max-height: 90vh;
-  overflow-y: auto;
-  animation: dp-modal-in 0.2s ease-out;
-}
-
-@keyframes dp-modal-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.dp-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.5rem 1.5rem 0;
-}
-
-.dp-modal__title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin: 0;
-  color: var(--dp-gray-900);
-}
-
-.dp-modal__close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: var(--dp-gray-400);
-  cursor: pointer;
-  padding: 0.25rem;
-  line-height: 1;
-  border-radius: var(--dp-radius-sm);
-  transition: color 0.15s ease, background 0.15s ease;
-}
-
-.dp-modal__close:hover {
-  color: var(--dp-gray-700);
-  background: var(--dp-gray-100);
-}
-
-.dp-modal__body {
-  padding: 1.5rem;
-}
-
-.dp-modal__footer {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-  padding-top: 0.5rem;
-  border-top: 1px solid var(--dp-gray-100);
-  margin-top: 0.5rem;
-  padding-top: 1.5rem;
-}
-
-.dp-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem 1.5rem;
-  border: 2px dashed var(--dp-gray-300);
-  border-radius: var(--dp-radius-lg);
-  cursor: pointer;
-  transition: border-color 0.15s ease, background 0.15s ease;
-  text-align: center;
-}
-
-.dp-dropzone:hover,
-.dp-dropzone--dragover {
-  border-color: var(--dp-primary);
-  background: var(--dp-primary-light);
-}
-
-.dp-dropzone--has-file {
-  border-color: var(--dp-success);
-  background: var(--dp-success-light);
-  border-style: solid;
-}
-
-.dp-dropzone__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-}
-
-.dp-dropzone__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dp-dropzone__icon {
-  font-size: 2rem;
-  opacity: 0.5;
-}
-
-.dp-dropzone__text {
-  font-size: 0.9375rem;
-  color: var(--dp-gray-600);
-}
-
-.dp-dropzone__text strong {
-  color: var(--dp-primary);
-}
-
-.dp-dropzone__hint {
-  font-size: 0.8rem;
-  color: var(--dp-gray-400);
-}
-
-.dp-dropzone__selected {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--dp-success);
-  margin-top: 0.5rem;
-}
+/*
+ *= require data_porter/base
+ *= require data_porter/layout
+ *= require data_porter/table
+ *= require data_porter/badges
+ *= require data_porter/cards
+ *= require data_porter/preview
+ *= require data_porter/progress
+ *= require data_porter/alerts
+ *= require data_porter/modal
+ *= require data_porter/mapping
+ */

data/app/assets/stylesheets/data_porter/badges.css

@@ -0,0 +1,73 @@
+.dp-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border: 1px solid transparent;
+}
+
+.dp-badge--pending {
+  background: var(--dp-gray-100);
+  color: var(--dp-gray-600);
+  border-color: var(--dp-gray-300);
+}
+
+.dp-badge--parsing {
+  background: var(--dp-info-light);
+  color: var(--dp-info);
+  border-color: var(--dp-info-border);
+}
+
+.dp-badge--importing {
+  background: var(--dp-info-light);
+  color: var(--dp-info);
+  border-color: var(--dp-info-border);
+  animation: dp-pulse 2s ease-in-out infinite;
+}
+
+.dp-badge--previewing {
+  background: var(--dp-warning-light);
+  color: var(--dp-warning);
+  border-color: var(--dp-warning-border);
+}
+
+.dp-badge--completed {
+  background: var(--dp-success-light);
+  color: var(--dp-success);
+  border-color: var(--dp-success-border);
+}
+
+.dp-badge--failed {
+  background: var(--dp-danger-light);
+  color: var(--dp-danger);
+  border-color: var(--dp-danger-border);
+}
+
+.dp-badge--extracting_headers {
+  background: var(--dp-info-light);
+  color: var(--dp-info);
+  border-color: var(--dp-info-border);
+  animation: dp-pulse 2s ease-in-out infinite;
+}
+
+.dp-badge--mapping {
+  background: var(--dp-purple-light);
+  color: var(--dp-purple);
+  border-color: var(--dp-purple-border);
+}
+
+.dp-badge--dry_running {
+  background: var(--dp-purple-light);
+  color: var(--dp-purple);
+  border-color: var(--dp-purple-border);
+  animation: dp-pulse 2s ease-in-out infinite;
+}
+
+@keyframes dp-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}