@commercetools-demo/puck-theme-manager 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +61 -47
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +61 -47
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +3 -5
package/dist/index.js CHANGED
@@ -50,7 +50,6 @@ var import_primary_button2 = __toESM(require("@commercetools-uikit/primary-butto
50
50
  var import_secondary_button = __toESM(require("@commercetools-uikit/secondary-button"));
51
51
  var import_field_label2 = __toESM(require("@commercetools-uikit/field-label"));
52
52
  var import_number_input = __toESM(require("@commercetools-uikit/number-input"));
53
- var import_select_input2 = __toESM(require("@commercetools-uikit/select-input"));
54
53
  var import_spacings2 = __toESM(require("@commercetools-uikit/spacings"));
55
54
  var import_text = __toESM(require("@commercetools-uikit/text"));
56
55
  var import_text_input = __toESM(require("@commercetools-uikit/text-input"));
@@ -91,7 +90,6 @@ var DEFAULT_THEME = {
91
90
  // src/components/theme-preset-selector.tsx
92
91
  var import_react = require("react");
93
92
  var import_primary_button = __toESM(require("@commercetools-uikit/primary-button"));
94
- var import_select_input = __toESM(require("@commercetools-uikit/select-input"));
95
93
  var import_spacings = __toESM(require("@commercetools-uikit/spacings"));
96
94
  var import_field_label = __toESM(require("@commercetools-uikit/field-label"));
97
95
 
@@ -580,6 +578,15 @@ var PRESET_OPTIONS = [
580
578
  label: paradigmLabels[key]
581
579
  }))
582
580
  ];
581
+ var SELECT_STYLE = {
582
+ display: "block",
583
+ padding: "6px 8px",
584
+ border: "1px solid #ccc",
585
+ borderRadius: "4px",
586
+ fontSize: "14px",
587
+ background: "#fff",
588
+ cursor: "pointer"
589
+ };
583
590
  var ThemePresetSelector = ({
584
591
  onSelectPreset
585
592
  }) => {
@@ -593,15 +600,13 @@ var ThemePresetSelector = ({
593
600
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_label.default, { title: "Quick apply preset", htmlFor: "theme-preset-select" }),
594
601
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { scale: "s", alignItems: "center", children: [
595
602
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
596
- import_select_input.default,
603
+ "select",
597
604
  {
598
605
  id: "theme-preset-select",
599
606
  value: selectedKey,
600
- onChange: (e) => {
601
- const v = e.target.value;
602
- setSelectedKey(typeof v === "string" ? v : Array.isArray(v) ? v[0] ?? "" : "");
603
- },
604
- options: PRESET_OPTIONS
607
+ onChange: (e) => setSelectedKey(e.target.value),
608
+ style: SELECT_STYLE,
609
+ children: PRESET_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: o.value, children: o.label }, o.value))
605
610
  }
606
611
  ),
607
612
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -692,6 +697,15 @@ var BACKGROUND_STYLE_OPTIONS = [
692
697
  { value: "gradient", label: "Gradient" },
693
698
  { value: "noise", label: "Noise" }
694
699
  ];
700
+ var SELECT_STYLE2 = {
701
+ display: "block",
702
+ padding: "6px 8px",
703
+ border: "1px solid #ccc",
704
+ borderRadius: "4px",
705
+ fontSize: "14px",
706
+ background: "#fff",
707
+ cursor: "pointer"
708
+ };
695
709
  var ThemeEditorInner = ({ backButton }) => {
696
710
  const history = (0, import_react_router_dom.useHistory)();
697
711
  const {
@@ -1459,80 +1473,80 @@ var ThemeEditorInner = ({ backButton }) => {
1459
1473
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1460
1474
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Border Radius", htmlFor: "borderRadius" }),
1461
1475
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1462
- import_select_input2.default,
1476
+ "select",
1463
1477
  {
1464
1478
  id: "borderRadius",
1465
- horizontalConstraint: 3,
1466
1479
  value: formValues.borderRadius,
1467
1480
  onChange: (e) => handleChange(
1468
1481
  "borderRadius",
1469
1482
  e.target.value
1470
1483
  ),
1471
- options: BORDER_RADIUS_OPTIONS
1484
+ style: SELECT_STYLE2,
1485
+ children: BORDER_RADIUS_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1472
1486
  }
1473
1487
  )
1474
1488
  ] }) }),
1475
1489
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1476
1490
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Border Width", htmlFor: "borderWidth" }),
1477
1491
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1478
- import_select_input2.default,
1492
+ "select",
1479
1493
  {
1480
1494
  id: "borderWidth",
1481
- horizontalConstraint: 3,
1482
1495
  value: formValues.borderWidth,
1483
1496
  onChange: (e) => handleChange(
1484
1497
  "borderWidth",
1485
1498
  e.target.value
1486
1499
  ),
1487
- options: BORDER_WIDTH_OPTIONS
1500
+ style: SELECT_STYLE2,
1501
+ children: BORDER_WIDTH_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1488
1502
  }
1489
1503
  )
1490
1504
  ] }) }),
1491
1505
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1492
1506
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Button Style", htmlFor: "buttonStyle" }),
1493
1507
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1494
- import_select_input2.default,
1508
+ "select",
1495
1509
  {
1496
1510
  id: "buttonStyle",
1497
- horizontalConstraint: 3,
1498
1511
  value: formValues.buttonStyle,
1499
1512
  onChange: (e) => handleChange(
1500
1513
  "buttonStyle",
1501
1514
  e.target.value
1502
1515
  ),
1503
- options: BUTTON_STYLE_OPTIONS
1516
+ style: SELECT_STYLE2,
1517
+ children: BUTTON_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1504
1518
  }
1505
1519
  )
1506
1520
  ] }) }),
1507
1521
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1508
1522
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Card Shadow", htmlFor: "cardShadow" }),
1509
1523
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1510
- import_select_input2.default,
1524
+ "select",
1511
1525
  {
1512
1526
  id: "cardShadow",
1513
- horizontalConstraint: 3,
1514
1527
  value: formValues.cardShadow,
1515
1528
  onChange: (e) => handleChange(
1516
1529
  "cardShadow",
1517
1530
  e.target.value
1518
1531
  ),
1519
- options: CARD_SHADOW_OPTIONS
1532
+ style: SELECT_STYLE2,
1533
+ children: CARD_SHADOW_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1520
1534
  }
1521
1535
  )
1522
1536
  ] }) }),
1523
1537
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1524
1538
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Header Style", htmlFor: "headerStyle" }),
1525
1539
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1526
- import_select_input2.default,
1540
+ "select",
1527
1541
  {
1528
1542
  id: "headerStyle",
1529
- horizontalConstraint: 3,
1530
1543
  value: formValues.headerStyle,
1531
1544
  onChange: (e) => handleChange(
1532
1545
  "headerStyle",
1533
1546
  e.target.value
1534
1547
  ),
1535
- options: HEADER_STYLE_OPTIONS
1548
+ style: SELECT_STYLE2,
1549
+ children: HEADER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1536
1550
  }
1537
1551
  )
1538
1552
  ] }) })
@@ -1617,32 +1631,32 @@ var ThemeEditorInner = ({ backButton }) => {
1617
1631
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1618
1632
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Shadow Style", htmlFor: "shadowStyle" }),
1619
1633
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1620
- import_select_input2.default,
1634
+ "select",
1621
1635
  {
1622
1636
  id: "shadowStyle",
1623
- horizontalConstraint: 3,
1624
1637
  value: formValues.shadowStyle ?? DEFAULT_THEME.shadowStyle,
1625
1638
  onChange: (e) => handleChange(
1626
1639
  "shadowStyle",
1627
1640
  e.target.value
1628
1641
  ),
1629
- options: SHADOW_STYLE_OPTIONS
1642
+ style: SELECT_STYLE2,
1643
+ children: SHADOW_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1630
1644
  }
1631
1645
  )
1632
1646
  ] }) }),
1633
1647
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1634
1648
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Surface Blur", htmlFor: "surfaceBlur" }),
1635
1649
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1636
- import_select_input2.default,
1650
+ "select",
1637
1651
  {
1638
1652
  id: "surfaceBlur",
1639
- horizontalConstraint: 3,
1640
1653
  value: formValues.surfaceBlur ?? DEFAULT_THEME.surfaceBlur,
1641
1654
  onChange: (e) => handleChange(
1642
1655
  "surfaceBlur",
1643
1656
  e.target.value
1644
1657
  ),
1645
- options: SURFACE_BLUR_OPTIONS
1658
+ style: SELECT_STYLE2,
1659
+ children: SURFACE_BLUR_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1646
1660
  }
1647
1661
  )
1648
1662
  ] }) }),
@@ -1664,32 +1678,32 @@ var ThemeEditorInner = ({ backButton }) => {
1664
1678
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1665
1679
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Border Style", htmlFor: "borderStyle" }),
1666
1680
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1667
- import_select_input2.default,
1681
+ "select",
1668
1682
  {
1669
1683
  id: "borderStyle",
1670
- horizontalConstraint: 3,
1671
1684
  value: formValues.borderStyle ?? DEFAULT_THEME.borderStyle,
1672
1685
  onChange: (e) => handleChange(
1673
1686
  "borderStyle",
1674
1687
  e.target.value
1675
1688
  ),
1676
- options: BORDER_STYLE_OPTIONS
1689
+ style: SELECT_STYLE2,
1690
+ children: BORDER_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1677
1691
  }
1678
1692
  )
1679
1693
  ] }) }),
1680
1694
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1681
1695
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Background Style", htmlFor: "backgroundStyle" }),
1682
1696
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1683
- import_select_input2.default,
1697
+ "select",
1684
1698
  {
1685
1699
  id: "backgroundStyle",
1686
- horizontalConstraint: 3,
1687
1700
  value: formValues.backgroundStyle ?? DEFAULT_THEME.backgroundStyle,
1688
1701
  onChange: (e) => handleChange(
1689
1702
  "backgroundStyle",
1690
1703
  e.target.value
1691
1704
  ),
1692
- options: BACKGROUND_STYLE_OPTIONS
1705
+ style: SELECT_STYLE2,
1706
+ children: BACKGROUND_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1693
1707
  }
1694
1708
  )
1695
1709
  ] }) })
@@ -1707,64 +1721,64 @@ var ThemeEditorInner = ({ backButton }) => {
1707
1721
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1708
1722
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Font Weight Base", htmlFor: "fontWeightBase" }),
1709
1723
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1710
- import_select_input2.default,
1724
+ "select",
1711
1725
  {
1712
1726
  id: "fontWeightBase",
1713
- horizontalConstraint: 3,
1714
1727
  value: formValues.fontWeightBase ?? DEFAULT_THEME.fontWeightBase,
1715
1728
  onChange: (e) => handleChange(
1716
1729
  "fontWeightBase",
1717
1730
  e.target.value
1718
1731
  ),
1719
- options: FONT_WEIGHT_BASE_OPTIONS
1732
+ style: SELECT_STYLE2,
1733
+ children: FONT_WEIGHT_BASE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1720
1734
  }
1721
1735
  )
1722
1736
  ] }) }),
1723
1737
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1724
1738
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Font Weight Heading", htmlFor: "fontWeightHeading" }),
1725
1739
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1726
- import_select_input2.default,
1740
+ "select",
1727
1741
  {
1728
1742
  id: "fontWeightHeading",
1729
- horizontalConstraint: 3,
1730
1743
  value: formValues.fontWeightHeading ?? DEFAULT_THEME.fontWeightHeading,
1731
1744
  onChange: (e) => handleChange(
1732
1745
  "fontWeightHeading",
1733
1746
  e.target.value
1734
1747
  ),
1735
- options: FONT_WEIGHT_HEADING_OPTIONS
1748
+ style: SELECT_STYLE2,
1749
+ children: FONT_WEIGHT_HEADING_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1736
1750
  }
1737
1751
  )
1738
1752
  ] }) }),
1739
1753
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1740
1754
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Letter Spacing", htmlFor: "letterSpacing" }),
1741
1755
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1742
- import_select_input2.default,
1756
+ "select",
1743
1757
  {
1744
1758
  id: "letterSpacing",
1745
- horizontalConstraint: 3,
1746
1759
  value: formValues.letterSpacing ?? DEFAULT_THEME.letterSpacing,
1747
1760
  onChange: (e) => handleChange(
1748
1761
  "letterSpacing",
1749
1762
  e.target.value
1750
1763
  ),
1751
- options: LETTER_SPACING_OPTIONS
1764
+ style: SELECT_STYLE2,
1765
+ children: LETTER_SPACING_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1752
1766
  }
1753
1767
  )
1754
1768
  ] }) }),
1755
1769
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_grid.default.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem" }, children: [
1756
1770
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_field_label2.default, { title: "Text Transform", htmlFor: "textTransform" }),
1757
1771
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1758
- import_select_input2.default,
1772
+ "select",
1759
1773
  {
1760
1774
  id: "textTransform",
1761
- horizontalConstraint: 3,
1762
1775
  value: formValues.textTransform ?? DEFAULT_THEME.textTransform,
1763
1776
  onChange: (e) => handleChange(
1764
1777
  "textTransform",
1765
1778
  e.target.value
1766
1779
  ),
1767
- options: TEXT_TRANSFORM_OPTIONS
1780
+ style: SELECT_STYLE2,
1781
+ children: TEXT_TRANSFORM_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value))
1768
1782
  }
1769
1783
  )
1770
1784
  ] }) })