All files / packages/sds-subsystems/.storybook/addons/theme-builder/src/components SavedThemesTable.jsx

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
107
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import Button from './Button';
import ColorSwatch from './ColorSwatch';
 
const SavedThemesTable = ({ themes = [], onApplyTheme, onDeleteTheme, activeThemeName }) => {
 
  // Show empty state if no themes
  if (themes.length === 0) {
    return (
      <div className="slds-card slds-card_empty">
        <div className="slds-card__body slds-card__body_inner slds-text-align_center">
          <div className="slds-illustration slds-illustration_small">
            <div className="slds-text-longform">
              <h3 className="slds-text-heading_medium slds-m-bottom_small">No Saved Themes</h3>
              <p className="slds-text-body_regular slds-text-color_weak">
                Create and save your custom themes to see them here.
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="slds-scrollable_x">
      <table className="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
          <tr className="slds-line-height_reset">
            <th className="slds-text-title_caps" scope="col">
              <div className="slds-truncate" title="Theme Name">Theme Name</div>
            </th>
            <th className="slds-text-title_caps" scope="col">
              <div className="slds-truncate" title="Brand Color">Brand Color</div>
            </th>
            <th className="slds-text-title_caps" scope="col">
              <div className="slds-truncate" title="Brand Palette">Color Palette</div>
            </th>
            <th className="slds-text-title_caps" scope="col">
              <div className="slds-truncate" title="Actions">Actions</div>
            </th>
          </tr>
        </thead>
        <tbody>
          {themes.map((theme, index) => (
            <tr key={theme.id || index} className="slds-hint-parent">
              <td data-label="Theme Name">
                <div className="slds-truncate" title={theme.name}>
                  <strong>{theme.name}</strong>
                  {activeThemeName === theme.name && (
                    <span className="slds-badge slds-theme_success slds-m-left_x-small">Active</span>
                  )}
                </div>
              </td>
              <td data-label="Brand Color">
                <div className="slds-grid slds-grid_vertical-align-center">
                  <ColorSwatch 
                    color={theme.themeData?.colors?.brand}
                    style={{ width: '24px', height: '24px' }}
                    label={theme.themeData?.colors?.brand}
                  />
                  <span className="slds-text-body_small">{theme.themeData?.colors?.brand}</span>
                </div>
              </td>
              <td data-label="Color Palette">
                <div className="slds-grid slds-grid_vertical-align-center">
                  {theme.themeData?.colors && Object.values(theme.themeData.colors).map((color, colorIndex) => (
                    <ColorSwatch 
                      key={colorIndex}
                      color={color}
                      style={{ 
                        width: '16px', 
                        height: '16px',
                        marginRight: colorIndex < Object.values(theme.themeData.colors).length - 1 ? '0.25rem' : '0'
                      }}
                      label={color}
                    />
                  ))}
                </div>
              </td>
              <td data-label="Actions">
                <div className="slds-grid slds-grid_vertical-align-center">
                   <Button
                    label="Apply"
                    size="small"
                    variant="brand"
                    disabled={activeThemeName === theme.name}
                    onClick={() => onApplyTheme && onApplyTheme(theme)}
                  />
                  <Button
                    label="Delete"
                    size="small"
                    variant="text-destructive"
                    className="slds-m-left_x-small slds-al"
                    onClick={() => onDeleteTheme && onDeleteTheme(theme)}
                  />
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
 
export default SavedThemesTable;