@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/components/automation-view/TriggerList.scss

@@ -1,267 +0,0 @@
-.automation-view {
-  &__list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    &--horizontal {
-      gap: 8px;
-
-      .automation-view__list-item {
-        flex: 0 0 360px;
-        min-width: 360px;
-      }
-    }
-
-    &-scroll {
-      display: flex;
-      gap: 8px;
-      overflow-x: auto;
-      padding-bottom: 4px;
-
-      .automation-view__list-item {
-        min-width: 340px;
-        flex: 0 0 340px;
-      }
-    }
-  }
-
-  &__list-item {
-    position: relative;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-    background: var(--bg-color);
-    transition: border-color .2s ease, background-color .2s ease;
-  }
-
-  &__list-item:hover {
-    border-color: rgba(37, 99, 235, .18);
-    background: var(--tag-hover-bg);
-  }
-
-  &__list-header {
-    display: flex;
-    align-items: flex-end;
-    gap: 12px;
-    justify-content: space-between;
-  }
-
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-  }
-
-  &__section-heading {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  &__section-actions {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  &__section-count {
-    font-size: 12px;
-    color: var(--sub-text-color);
-  }
-
-  &__form-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-weight: 600;
-    color: var(--text-color);
-  }
-
-  &__form-icon {
-    font-size: 18px;
-    color: var(--sub-text-color);
-  }
-
-  &__form-desc {
-    font-size: 12px;
-    color: var(--sub-text-color);
-    margin-bottom: 0;
-  }
-
-  &__icon-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    padding: 0;
-    border-radius: 6px;
-  }
-
-  &__action-icon {
-    font-size: 18px;
-  }
-
-  &__remove-button {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-  }
-
-  &__input-number {
-    width: 100%;
-  }
-
-  &__trigger-list {
-    gap: 8px;
-  }
-
-  &__trigger-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  &__trigger-row {
-    display: grid;
-    grid-template-columns: 150px minmax(0, 1fr) 28px;
-    gap: 10px;
-    align-items: start;
-    padding: 0;
-  }
-
-  &__trigger-type,
-  &__trigger-config {
-    min-width: 0;
-  }
-
-  &__trigger-actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &__trigger-remove-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    padding: 0;
-    border-radius: 6px;
-  }
-
-  &__trigger-row .ant-form-item {
-    margin-bottom: 0;
-  }
-
-  &__cron-section {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-  }
-
-  &__cron-hint {
-    color: var(--sub-text-color);
-    font-size: 12px;
-  }
-
-  &__cron-weekly {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column: 1 / -1;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  &__webhook {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  &__webhook-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    min-height: 32px;
-    padding: 2px 4px 2px 10px;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-    background: var(--sub-bg-color);
-    color: var(--sub-text-color);
-  }
-
-  &__webhook-url {
-    min-width: 0;
-    overflow: hidden;
-    font-size: 12px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__list-item .ant-form-item {
-    margin-bottom: 10px;
-  }
-
-  &__list-item .ant-form-item:last-child {
-    margin-bottom: 0;
-  }
-
-  &__list-item .ant-input,
-  &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-input-number,
-  &__list-item .ant-select-selector,
-  &__trigger-row .ant-input,
-  &__trigger-row .ant-input-affix-wrapper,
-  &__trigger-row .ant-input-number,
-  &__trigger-row .ant-select-selector {
-    border-radius: 6px !important;
-    background: var(--sub-bg-color);
-  }
-
-  &__list-item .ant-input,
-  &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-select-selector,
-  &__trigger-row .ant-input,
-  &__trigger-row .ant-input-affix-wrapper,
-  &__trigger-row .ant-select-selector {
-    min-height: 30px;
-  }
-}
-
-@media (max-width: 900px) {
-  .automation-view {
-    &__trigger-row {
-      grid-template-columns: 1fr 28px;
-    }
-
-    &__trigger-type,
-    &__trigger-config {
-      grid-column: 1 / 2;
-    }
-
-    &__trigger-actions {
-      grid-column: 2 / 3;
-      grid-row: 1 / 2;
-    }
-
-    &__cron-section {
-      grid-template-columns: 1fr;
-    }
-  }
-}

package/src/components/automation-view/TriggerList.tsx

@@ -1,68 +0,0 @@
-import './TriggerList.scss'
-
-import { Button, Form, Tooltip } from 'antd'
-import type { FormInstance } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { AutomationTriggerRow } from './@components/AutomationTriggerRow'
-import type { RuleFormValues } from './types'
-
-interface TriggerListProps {
-  form: FormInstance<RuleFormValues>
-  updateWeeklyCron: (index: number, nextDay?: string, nextTime?: string) => void
-  getWebhookUrl: (triggerId?: string, webhookKey?: string) => string
-}
-
-export function TriggerList({ form, updateWeeklyCron, getWebhookUrl }: TriggerListProps) {
-  const { t } = useTranslation()
-
-  return (
-    <Form.List name='triggers'>
-      {(fields, { add, remove }) => (
-        <div className='automation-view__list automation-view__trigger-list'>
-          <div className='automation-view__section-header'>
-            <div className='automation-view__section-heading'>
-              <div className='automation-view__form-title'>
-                <span className='material-symbols-rounded automation-view__form-icon'>bolt</span>
-                {t('automation.sectionTriggers')}
-              </div>
-            </div>
-            <div className='automation-view__section-actions'>
-              <Tooltip title={t('automation.addTrigger')}>
-                <Button
-                  className='automation-view__icon-button automation-view__icon-button--section-add'
-                  type='text'
-                  onClick={() =>
-                    add({
-                      type: 'interval',
-                      intervalMinutes: 30,
-                      cronExpression: '',
-                      weeklyDay: '1',
-                      weeklyTime: '09:00'
-                    })}
-                >
-                  <span className='material-symbols-rounded automation-view__action-icon'>add</span>
-                </Button>
-              </Tooltip>
-            </div>
-          </div>
-          <div className='automation-view__trigger-rows'>
-            {fields.map((field, index) => (
-              <AutomationTriggerRow
-                key={field.key}
-                fieldName={field.name}
-                form={form}
-                getWebhookUrl={getWebhookUrl}
-                index={index}
-                remove={remove}
-                triggerCount={fields.length}
-                updateWeeklyCron={updateWeeklyCron}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </Form.List>
-  )
-}

package/src/components/automation-view/index.scss

@@ -1,230 +0,0 @@
-.automation-view {
-  position: relative;
-
-  &__body {
-    flex-direction: row;
-    gap: 0;
-    padding: 0;
-    position: relative;
-  }
-
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-
-  .ant-form-item {
-    margin-bottom: 12px;
-  }
-
-  &__left {
-    width: var(--subpage-secondary-panel-width);
-    min-width: var(--subpage-secondary-panel-width);
-    max-width: var(--subpage-secondary-panel-width);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: var(--sub-bg-color);
-    transition:
-      width .3s cubic-bezier(.4, 0, .2, 1),
-      min-width .3s cubic-bezier(.4, 0, .2, 1),
-      max-width .3s cubic-bezier(.4, 0, .2, 1);
-
-    &.is-collapsed {
-      width: 0;
-      min-width: 0;
-      max-width: 0;
-      pointer-events: none;
-
-      .automation-view__sidebar {
-        transform: translateX(calc(-1 * var(--subpage-secondary-panel-width)));
-      }
-    }
-  }
-
-  &__right {
-    --automation-view-right-padding-x: 12px;
-    --automation-view-right-padding-bottom: 12px;
-
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-    min-width: 0;
-    margin: var(--subpage-content-card-gap);
-    margin-left: 0;
-    padding: 10px 12px 12px;
-    border-radius: var(--subpage-content-card-radius);
-    background: var(--subpage-content-card-bg);
-  }
-
-  &__mobile-rule-backdrop,
-  &__mobile-rule-sheet {
-    display: none;
-  }
-
-  &__select-arrow {
-    color: var(--sub-text-color);
-    font-size: 16px;
-    line-height: 1;
-    pointer-events: none;
-    transition: transform .18s ease, color .18s ease;
-  }
-
-  .ant-select-open &__select-arrow,
-  .ant-select-focused &__select-arrow {
-    color: var(--text-color);
-  }
-
-  .ant-select-open &__select-arrow {
-    transform: rotate(180deg);
-  }
-
-  &__title-leading-actions {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-  }
-
-  &__title-action-button.ant-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    min-width: 24px;
-    height: 24px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--sub-text-color);
-    box-shadow: none;
-
-    .ant-btn-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      margin-inline-end: 0;
-      line-height: 1;
-    }
-
-    &:not(:disabled):hover,
-    &:not(:disabled):focus-visible {
-      background: var(--nav-hover-bg, var(--tag-hover-bg));
-      color: var(--text-color);
-    }
-
-    &.is-active,
-    &.is-active:disabled {
-      border: 1px solid var(--primary-color);
-      background: transparent;
-      color: var(--primary-color);
-      opacity: 1;
-    }
-  }
-
-  &__title-action-icon {
-    font-size: 16px;
-    line-height: 1;
-  }
-
-  &--left-collapsed {
-    .automation-view__right {
-      margin: 4px;
-    }
-  }
-}
-
-@media (max-width: 960px) {
-  .automation-view--compact {
-    .automation-view__body {
-      gap: 0;
-      height: 100%;
-    }
-
-    .automation-view__left,
-    .automation-view__right {
-      width: auto;
-      min-width: 0;
-      max-width: none;
-      max-height: none;
-      height: 100%;
-      margin: 0;
-      border-radius: 0;
-      background: var(--subpage-content-card-bg);
-      overflow: hidden;
-    }
-
-    .automation-view__right {
-      padding: 12px;
-    }
-
-    .automation-view__mobile-rule-backdrop {
-      position: absolute;
-      inset: 0;
-      display: block;
-      border: none;
-      background: rgba(0, 0, 0, .28);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      transition: opacity .24s ease, visibility 0s linear .24s;
-      z-index: 30;
-    }
-
-    .automation-view__mobile-rule-backdrop.is-open {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-      transition-delay: 0s;
-    }
-
-    .automation-view__mobile-rule-sheet {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      display: block;
-      width: min(320px, calc(100% - 24px));
-      max-width: calc(100% - 24px);
-      transform: translateX(-100%);
-      visibility: hidden;
-      pointer-events: none;
-      transition:
-        transform .24s cubic-bezier(.4, 0, .2, 1),
-        visibility 0s linear .24s;
-      z-index: 31;
-      overscroll-behavior: contain;
-    }
-
-    .automation-view__mobile-rule-sheet.is-open {
-      transform: translateX(0);
-      visibility: visible;
-      pointer-events: auto;
-      transition-delay: 0s;
-    }
-
-    .automation-view__left--mobile-sheet {
-      width: 100%;
-      min-width: 0;
-      max-width: none;
-      height: 100%;
-      border-right: 1px solid var(--border-color);
-      border-radius: 0 8px 8px 0;
-      background: var(--sub-bg-color);
-      box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
-      overflow: hidden;
-      overscroll-behavior: contain;
-    }
-  }
-}
-
-html.dark .automation-view--compact {
-  .automation-view__mobile-rule-backdrop {
-    background: rgba(0, 0, 0, .48);
-  }
-
-  .automation-view__left--mobile-sheet {
-    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
-  }
-}