@ceed/ads 0.0.24 → 0.0.26

package/dist/components/DataTable/DataTable.js

@@ -109,31 +109,15 @@ function useDataTableRenderer(_a) {
             var _a, _b;
             var ref = useRef(null);
             var style = useMemo(function () {
+                var _a;
                 return ({
                     width: column.width,
-                    minWidth: column.minWidth,
+                    minWidth: (_a = column.minWidth) !== null && _a !== void 0 ? _a : "50px",
                     maxWidth: column.maxWidth,
                     textAlign: column.type === "number" ? "end" : "start",
                     position: stickyHeader ? undefined : "relative",
                 });
             }, [column, stickyHeader]);
-            useEffect(function () {
-                if (column.resizable && ref.current) {
-                    var resizeObserver_1 = new ResizeObserver(function (entries) {
-                        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-                            var entry = entries_1[_i];
-                            var width = entry.contentRect.width;
-                            if (width && ref.current) {
-                                ref.current.style.width = "".concat(width, "px");
-                            }
-                        }
-                    });
-                    resizeObserver_1.observe(ref.current);
-                    return function () {
-                        resizeObserver_1.disconnect();
-                    };
-                }
-            }, [column.resizable, ref.current]);
             var resizer = ((_a = column.resizable) !== null && _a !== void 0 ? _a : true) ? (React.createElement(Box, { sx: {
                     position: "absolute",
                     top: 0,

package/framer/index.js

@@ -32276,29 +32276,13 @@ function useDataTableRenderer({
         const style4 = useMemo32(
           () => ({
             width: column2.width,
-            minWidth: column2.minWidth,
+            minWidth: column2.minWidth ?? "50px",
             maxWidth: column2.maxWidth,
             textAlign: column2.type === "number" ? "end" : "start",
             position: stickyHeader ? void 0 : "relative"
           }),
           [column2, stickyHeader]
         );
-        useEffect33(() => {
-          if (column2.resizable && ref.current) {
-            const resizeObserver = new ResizeObserver((entries) => {
-              for (const entry of entries) {
-                const { width: width2 } = entry.contentRect;
-                if (width2 && ref.current) {
-                  ref.current.style.width = `${width2}px`;
-                }
-              }
-            });
-            resizeObserver.observe(ref.current);
-            return () => {
-              resizeObserver.disconnect();
-            };
-          }
-        }, [column2.resizable, ref.current]);
         const resizer = column2.resizable ?? true ? /* @__PURE__ */ jsx2(
           Box_default2,
           {

package/framer-components.tsx

@@ -0,0 +1,115 @@
+import { addPropertyControls, ControlType } from "framer";
+import { ComponentType, useState } from "react";
+import * as ADS from "https://www.unpkg.com/@ceed/ads@latest/framer";
+
+export function Accordions(props) {
+  const { summaries, details, ...innerProps } = props;
+
+  return (
+    <ADS.ThemeProvider>
+      <ADS.Accordions
+        {...innerProps}
+        items={summaries?.map((summary, i) => ({
+          summary,
+          details: details[i],
+        }))}
+      />
+    </ADS.ThemeProvider>
+  );
+}
+
+addPropertyControls(Accordions, ADS.accordionsPropertyControls);
+
+/**
+ * These annotations control how your component sizes
+ * Learn more: https://www.framer.com/docs/guides/auto-sizing
+ *
+ * @framerSupportedLayoutWidth auto
+ * @framerSupportedLayoutHeight auto
+ */
+export function Avatar(props) {
+  const { text, image, ...innerProps } = props;
+  return (
+    <ADS.ThemeProvider>
+      <ADS.Avatar src={image?.src || image?.srcSet} {...innerProps}>
+        {text}
+      </ADS.Avatar>
+    </ADS.ThemeProvider>
+  );
+}
+addPropertyControls(Avatar, ADS.avatarPropertyControls);
+
+export function Badge(props) {
+  return <ADS.Badge {...props} />;
+}
+addPropertyControls(Badge, ADS.badgePropertyControls);
+
+/**
+ * These annotations control how your component sizes
+ * Learn more: https://www.framer.com/docs/guides/auto-sizing
+ *
+ */
+export function Button(props) {
+  const { text, startDecorator, endDecorator, ...innerProps } = props;
+
+  return (
+    <ADS.ThemeProvider>
+      <ADS.Button
+        startDecorator={startDecorator[0]}
+        endDecorator={endDecorator[0]}
+        {...innerProps}
+      >
+        {text}
+      </ADS.Button>
+    </ADS.ThemeProvider>
+  );
+}
+
+addPropertyControls(Button, { ...ADS.buttonPropertyControls });
+
+export function withModal(Component): ComponentType {
+  return (props) => {
+    const { modalContents, ...innerProps } = props;
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Component {...innerProps} onClick={() => setOpen(true)} />
+        {open && (
+          <ADS.Modal
+            open={open}
+            onClose={() => setOpen(false)}
+            // NOTE: Portal로 열면 framer 고유 컴포넌트 스타일이 적용 안됨
+            disablePortal
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <div>{modalContents}</div>
+          </ADS.Modal>
+        )}
+      </>
+    );
+  };
+}
+
+export function withDrawer(Component): ComponentType {
+  return (props) => {
+    const { modalContents, ...innerProps } = props;
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Component {...innerProps} onClick={() => setOpen(true)} />
+        <ADS.InsetDrawer
+          open={open}
+          onClose={() => setOpen(false)}
+          // NOTE: Portal로 열면 framer 고유 컴포넌트 스타일이 적용 안됨
+          disablePortal
+        >
+          {modalContents}
+        </ADS.InsetDrawer>
+      </>
+    );
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "main": "dist/index.js",
   "type": "module",
   "description": "UI tool for Ecube Labs front-end developers",
@@ -12,7 +12,8 @@
   },
   "files": [
     "dist",
-    "framer"
+    "framer",
+    "framer-components.tsx"
   ],
   "author": "Ecube Labs",
   "sideEffects": false,