@product7/product7-js 0.1.0

package/src/styles/base.js

@@ -0,0 +1,50 @@
+export const baseStyles = `
+.feedback-widget,
+.messenger-widget,
+.changelog-widget,
+.feedback-survey {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.feedback-widget *,
+.feedback-widget *::before,
+.feedback-widget *::after,
+.messenger-widget *,
+.messenger-widget *::before,
+.messenger-widget *::after,
+.changelog-widget *,
+.changelog-widget *::before,
+.changelog-widget *::after,
+.feedback-survey *,
+.feedback-survey *::before,
+.feedback-survey *::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .feedback-widget *,
+  .messenger-widget *,
+  .changelog-widget *,
+  .feedback-survey * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+@media print {
+  .feedback-widget,
+  .feedback-panel,
+  .sdk-modal-backdrop,
+  .sdk-notification,
+  .changelog-widget,
+  .changelog-modal,
+  .messenger-widget,
+  .messenger-launcher,
+  .messenger-panel,
+  .feedback-survey,
+  .feedback-survey-backdrop {
+    display: none !important;
+  }
+}
+`;

package/src/styles/changelog.js

@@ -0,0 +1,665 @@
+export const changelogStyles = `
+.changelog-widget {
+  position: fixed;
+  z-index: var(--z-modal);
+}
+
+.changelog-widget.position-right {
+  bottom: var(--spacing-5);
+  right: var(--spacing-5);
+}
+
+.changelog-widget.position-left {
+  bottom: var(--spacing-5);
+  left: var(--spacing-5);
+}
+
+.changelog-trigger-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  height: 48px;
+  border-radius: var(--radius-full);
+  border: none;
+  padding: var(--spacing-3) var(--spacing-5);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition-slow);
+  color: #ffffff;
+  background: var(--color-primary);
+  box-shadow: var(--shadow-md);
+  width: fit-content;
+}
+
+.changelog-trigger-btn:hover {
+  box-shadow: var(--shadow-lg);
+}
+
+.changelog-trigger-btn:active {
+  transform: translateY(1px);
+  box-shadow: var(--shadow-md);
+  transition-duration: 100ms;
+}
+
+.changelog-trigger-btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.changelog-icon {
+  flex-shrink: 0;
+}
+
+.changelog-confetti-emoji {
+  font-size: var(--font-size-base);
+  margin-left: 2px;
+}
+
+.changelog-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 12px;
+  height: 12px;
+  background: var(--color-error);
+  border-radius: var(--radius-full);
+  border: 2px solid var(--color-white);
+}
+
+/* ========================================
+   CONFETTI
+   ======================================== */
+
+.changelog-confetti-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: var(--z-notification);
+  overflow: hidden;
+}
+
+.changelog-confetti {
+  position: absolute;
+  top: -20px;
+  opacity: 0;
+  animation: confettiFall 2s ease-out forwards;
+}
+
+@keyframes confettiFall {
+  0% {
+    opacity: 1;
+    transform: translateY(0) rotate(0deg) scale(1);
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100vh) rotate(720deg) scale(0.5);
+  }
+}
+
+/* ========================================
+   POPUP MODAL
+   ======================================== */
+
+.changelog-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-5);
+  pointer-events: none;
+  font-family: inherit;
+}
+
+.changelog-modal-backdrop,
+.changelog-list-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-slow);
+  z-index: var(--z-modal-backdrop);
+}
+
+.changelog-modal-backdrop.show,
+.changelog-list-modal-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.changelog-modal.open {
+  pointer-events: auto;
+}
+
+.changelog-modal-container {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  background: var(--color-white);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-xl);
+  transform: scale(0.95) translateY(20px);
+  opacity: 0;
+  transition: all var(--transition-slow);
+}
+
+.changelog-modal.open .changelog-modal-container {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.changelog-modal-close {
+  position: absolute;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-neutral-500);
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: all var(--transition-base);
+  line-height: 1;
+  z-index: 10;
+}
+
+.changelog-modal-close:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+
+.changelog-modal-close:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.changelog-modal-content {
+  overflow-y: auto;
+  max-height: 90vh;
+}
+
+.changelog-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px var(--spacing-5);
+}
+
+.changelog-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px var(--spacing-5);
+  text-align: center;
+  color: var(--color-text-tertiary);
+}
+
+.changelog-empty svg {
+  margin-bottom: var(--spacing-4);
+  stroke: var(--color-neutral-300);
+}
+
+.changelog-empty p {
+  margin: 0;
+  font-size: var(--font-size-md);
+}
+
+/* ========================================
+   POPUP ITEM
+   ======================================== */
+
+.changelog-popup-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.changelog-popup-image {
+  width: 100%;
+  padding: var(--spacing-6) var(--spacing-6) 0;
+}
+
+.changelog-popup-image img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+}
+
+.changelog-popup-body {
+  padding: var(--spacing-6) var(--spacing-8) var(--spacing-8);
+  text-align: center;
+}
+
+.changelog-popup-title {
+  margin: 0 0 var(--spacing-3);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  color: var(--color-text-primary);
+}
+
+.changelog-popup-description {
+  margin: 0 0 var(--spacing-6);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-loose);
+  color: var(--color-text-secondary);
+}
+
+.changelog-popup-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3) var(--spacing-8);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: #ffffff;
+  background: var(--color-primary);
+  border: 1px solid var(--color-primary);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all var(--transition-base);
+  font-family: inherit;
+  height: 40px;
+}
+
+.changelog-popup-btn:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.changelog-popup-btn:active:not(:disabled) {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.changelog-popup-btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* ========================================
+   POPUP FOOTER / DOTS
+   ======================================== */
+
+.changelog-popup-footer {
+  padding: 0 var(--spacing-8) var(--spacing-6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.changelog-popup-dots {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.changelog-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--color-neutral-300);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.changelog-dot:hover {
+  background: var(--color-neutral-400);
+}
+
+.changelog-dot.active {
+  background: var(--color-primary);
+  transform: scale(1.2);
+}
+
+.changelog-view-all-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: 8px;
+  transition: all var(--transition-base);
+  font-family: inherit;
+}
+
+.changelog-view-all-btn:hover {
+  background: var(--color-primary-light);
+}
+
+.changelog-view-all-btn:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+/* ========================================
+   LIST MODAL
+   ======================================== */
+
+.changelog-list-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-5);
+  pointer-events: none;
+  font-family: inherit;
+}
+
+.changelog-list-modal.open {
+  pointer-events: auto;
+}
+
+.changelog-list-modal-container {
+  position: relative;
+  width: 100%;
+  max-width: 460px;
+  max-height: 85vh;
+  background: var(--color-white);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+  transform: scale(0.95) translateY(20px);
+  opacity: 0;
+  transition: all var(--transition-slow);
+  display: flex;
+  flex-direction: column;
+}
+
+.changelog-list-modal.open .changelog-list-modal-container {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.changelog-list-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4) var(--spacing-5);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.changelog-list-modal-header h2 {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.changelog-list-modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-neutral-500);
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: all var(--transition-base);
+}
+
+.changelog-list-modal-close:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+
+.changelog-list-modal-close:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.changelog-list-modal-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* ========================================
+   LIST ITEMS
+   ======================================== */
+
+.changelog-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.changelog-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-5);
+  border-bottom: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: background var(--transition-base);
+}
+
+.changelog-list-item:hover {
+  background: var(--color-neutral-50);
+}
+
+.changelog-list-item:last-child {
+  border-bottom: none;
+}
+
+.changelog-list-item-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.changelog-list-item-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+
+.changelog-list-item-date {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-medium);
+}
+
+.changelog-list-item-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+.changelog-label {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+}
+
+.changelog-list-item-title {
+  margin: 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.changelog-list-item-description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.changelog-list-item-image {
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.changelog-list-item-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.changelog-list-item-arrow {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  transition: all var(--transition-base);
+}
+
+.changelog-list-item:hover .changelog-list-item-arrow {
+  color: var(--color-primary);
+  transform: translateX(3px);
+}
+
+/* ========================================
+   DARK THEME — scoped variable overrides
+   ======================================== */
+
+.changelog-theme-dark.changelog-widget .changelog-trigger-btn {
+  background: #1a1e24;
+  color: #e8e8e8;
+  border: 1px solid #232930;
+}
+
+.changelog-theme-dark.changelog-modal-backdrop,
+.changelog-theme-dark.changelog-list-modal-backdrop {
+  background: rgba(2, 6, 23, 0.72);
+}
+
+.changelog-theme-dark .changelog-modal-container,
+.changelog-theme-dark .changelog-list-modal-container {
+  --color-white: #1a1e24;
+  --color-border: #232930;
+  --color-neutral-50: #232930;
+  --color-neutral-100: #2d343c;
+  --color-neutral-300: #2d343c;
+  --color-neutral-400: #555555;
+  --color-neutral-500: #777777;
+  --color-neutral-900: #e8e8e8;
+  --color-text-primary: #e8e8e8;
+  --color-text-secondary: #999999;
+  --color-text-tertiary: #666666;
+}
+
+/* ========================================
+   RESPONSIVE
+   ======================================== */
+
+@media (max-width: 768px) {
+  .changelog-widget {
+    bottom: var(--spacing-4);
+    right: var(--spacing-4);
+  }
+
+  .changelog-widget.position-left {
+    left: var(--spacing-4);
+  }
+
+  .changelog-modal {
+    padding: var(--spacing-4);
+  }
+
+  .changelog-modal-container {
+    max-width: 100%;
+    border-radius: 12px;
+  }
+
+  .changelog-popup-image {
+    padding: var(--spacing-5) var(--spacing-5) 0;
+  }
+
+  .changelog-popup-body {
+    padding: var(--spacing-5) var(--spacing-6) var(--spacing-6);
+  }
+
+  .changelog-popup-title {
+    font-size: var(--font-size-lg);
+  }
+
+  .changelog-popup-description {
+    font-size: var(--font-size-base);
+  }
+
+  .changelog-popup-btn {
+    padding: var(--spacing-3) var(--spacing-7);
+    font-size: var(--font-size-base);
+    width: 100%;
+  }
+
+  .changelog-popup-footer {
+    padding: 0 var(--spacing-6) var(--spacing-5);
+  }
+
+  .changelog-list-modal {
+    padding: var(--spacing-4);
+  }
+
+  .changelog-list-modal-container {
+    max-width: 100%;
+    max-height: 90vh;
+    border-radius: 12px;
+  }
+
+  .changelog-list-item {
+    padding: var(--spacing-3) var(--spacing-4);
+  }
+
+  .changelog-list-item-image {
+    width: 56px;
+    height: 56px;
+  }
+}
+`;