penpot-github-sync-plugin/index.html at 08ef5ab6d9af0c08b0ad31ce425bf638fa0e91c7 · tokens-studio/penpot-github-sync-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Penpot Tokens Sync</title>
  </head>
  <body>
    <!-- Main Dashboard View -->
    <div id="main-view" class="view">
      <header class="view-header">
        <h1>Penpot Tokens Sync</h1>
        <p class="subtitle">Sync your design tokens with Tokens Studio/DTCG format.</p>
      </header>

      <section class="sync-section">
        <div class="section-header">
          <h2>GitHub Sync</h2>
          <button id="add-sync-btn" class="secondary-btn small">+ Add Provider</button>
        </div>
        <div id="providers-list" class="providers-list">
          <!-- Providers will be rendered here -->
        </div>
      </section>
    </div>

    <!-- Sync Form View -->
    <div id="sync-form-view" class="view" style="display: none">
      <header class="view-header">
        <h2 id="form-title">📦 Add Sync Provider</h2>
      </header>

      <form id="github-sync-form" class="sync-form">
        <div class="form-group">
          <label for="sync-name">Configuration Name</label>
          <input type="text" id="sync-name" name="name" placeholder="e.g., My Project Tokens" required />
        </div>
        <div class="form-group">
          <label for="sync-token">GitHub Personal Access Token (PAT)</label>
          <input type="password" id="sync-token" name="token" placeholder="ghp_..." required />
          <p class="help-text">Requires 'repo' scope.</p>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="sync-repository">Repository (owner/repo)</label>
            <input type="text" id="sync-repository" name="repository" placeholder="acme/design-system" required />
          </div>
          <div class="form-group">
            <label for="sync-branch">Branch</label>
            <input type="text" id="sync-branch" name="branch" placeholder="main" required />
          </div>
        </div>
        <div class="form-group">
          <label for="sync-path">Storage Path (in repo)</label>
          <input type="text" id="sync-path" name="storagePath" placeholder="tokens.json" required />
        </div>

        <div class="form-actions">
          <button type="button" id="cancel-sync" class="secondary-btn">Cancel</button>
          <button type="submit" class="primary-btn">Save Configuration</button>
        </div>
      </form>
    </div>

    <!-- Modals -->
    <div id="diff-modal" class="modal-overlay" style="display: none">
      <div class="modal-content large">
        <div class="modal-header">
          <h2 id="diff-title">Review Changes</h2>
          <button id="close-diff-btn" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <p id="diff-message" class="diff-intro"></p>
          <div id="diff-results" class="diff-scroll-area"></div>
        </div>
        <div class="modal-footer">
          <button id="cancel-diff-btn" class="secondary-btn">Cancel</button>
          <button id="confirm-diff-btn" class="primary-btn">Confirm & Sync</button>
        </div>
      </div>
    </div>

    <div id="commit-modal" class="modal-overlay" style="display: none">
      <div class="modal-content">
        <div class="modal-header">
          <h2>Commit Message</h2>
          <button id="close-commit-btn" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="commit-message-input">What changed?</label>
            <textarea id="commit-message-input" rows="3" placeholder="Updated colors from Penpot..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button id="cancel-commit-btn" class="secondary-btn">Cancel</button>
          <button id="confirm-commit-btn" class="primary-btn">Push to GitHub</button>
        </div>
      </div>
    </div>

    <footer id="status" class="status"></footer>

    <script type="module" src="/src/ui/index.js"></script>
  </body>
</html>