chore: wip

odigos-io · Aug 6, 2024 · 67f11de · 67f11de
1 parent c097df4
commit 67f11de
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 35 deletions.
diff --git a/dist/index.d.mts b/dist/index.d.mts
@@ -59,7 +59,7 @@ interface CardProps {
         body?: () => JSX.Element | JSX.Element[];
     };
 }
-declare function Card({ children, focus, type, header, }: CardProps): React$1.JSX.Element;
+declare function Card({ children, focus, type, header, ...rest }: CardProps): React$1.JSX.Element;
 
 interface TagProps {
     title: string;
@@ -90,7 +90,7 @@ interface DropDownProps {
     tooltip?: string;
     required?: boolean;
 }
-declare function DropDown({ data, onChange, width, value, label, tooltip, required, }: DropDownProps): React$1.JSX.Element;
+declare function DropDown({ data, onChange, width, value, label, tooltip, required, ...rest }: DropDownProps): React$1.JSX.Element;
 
 interface SearchInputProps {
     placeholder?: string;
@@ -117,7 +117,7 @@ interface CheckboxProps {
     label?: string;
     disabled?: boolean;
 }
-declare function Checkbox({ onChange, value, label, disabled, }: CheckboxProps): React$1.JSX.Element;
+declare function Checkbox({ onChange, value, label, disabled, ...rest }: CheckboxProps): React$1.JSX.Element;
 
 interface SelectedCounterProps {
     total: number;

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -59,7 +59,7 @@ interface CardProps {
         body?: () => JSX.Element | JSX.Element[];
     };
 }
-declare function Card({ children, focus, type, header, }: CardProps): React$1.JSX.Element;
+declare function Card({ children, focus, type, header, ...rest }: CardProps): React$1.JSX.Element;
 
 interface TagProps {
     title: string;
@@ -90,7 +90,7 @@ interface DropDownProps {
     tooltip?: string;
     required?: boolean;
 }
-declare function DropDown({ data, onChange, width, value, label, tooltip, required, }: DropDownProps): React$1.JSX.Element;
+declare function DropDown({ data, onChange, width, value, label, tooltip, required, ...rest }: DropDownProps): React$1.JSX.Element;
 
 interface SearchInputProps {
     placeholder?: string;
@@ -117,7 +117,7 @@ interface CheckboxProps {
     label?: string;
     disabled?: boolean;
 }
-declare function Checkbox({ onChange, value, label, disabled, }: CheckboxProps): React$1.JSX.Element;
+declare function Checkbox({ onChange, value, label, disabled, ...rest }: CheckboxProps): React$1.JSX.Element;
 
 interface SelectedCounterProps {
     total: number;

diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -605,15 +605,16 @@ function Card({
   children,
   focus = false,
   type = "primary",
-  header
+  header,
+  ...rest
 }) {
   function renderHeader() {
     if (header?.body) {
       return header?.body();
     }
     return /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Text, { size: 20, weight: 600 }, header?.title), /* @__PURE__ */ React49.createElement(Text, { size: 14, color: "#CCD0D2" }, header?.subtitle));
   }
-  return /* @__PURE__ */ React49.createElement(CardContainer, { selected: focus || void 0, type }, header && /* @__PURE__ */ React49.createElement(CardHeader, null, renderHeader()), children);
+  return /* @__PURE__ */ React49.createElement(CardContainer, { selected: focus || void 0, type, ...rest }, header && /* @__PURE__ */ React49.createElement(CardHeader, null, renderHeader()), children);
 }
 
 // src/design.system/tag/tag.tsx
@@ -894,7 +895,8 @@ function DropDown({
   value,
   label,
   tooltip,
-  required
+  required,
+  ...rest
 }) {
   const [isOpen, setOpen] = useState5(false);
   const [selectedItem, setSelectedItem] = useState5(value || null);
@@ -923,7 +925,8 @@ function DropDown({
       selected: isHover,
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
-      onClick: toggleDropdown
+      onClick: toggleDropdown,
+      ...rest
     },
     /* @__PURE__ */ React57.createElement(DropdownHeader, null, selectedItem ? selectedItem.label : SELECTED_ITEM, /* @__PURE__ */ React57.createElement(expand_arrow_default, { className: `dropdown-arrow ${isOpen && "open"}` }))
   ), isOpen && /* @__PURE__ */ React57.createElement(DropdownBody, null, /* @__PURE__ */ React57.createElement(
@@ -1033,9 +1036,19 @@ function Checkbox({
   onChange,
   value,
   label = "",
-  disabled = false
+  disabled = false,
+  ...rest
 }) {
-  return /* @__PURE__ */ React60.createElement(CheckboxWrapper, { disabled: disabled || void 0, onClick: onChange }, value ? /* @__PURE__ */ React60.createElement(checkbox_rect_default, null) : /* @__PURE__ */ React60.createElement(CheckboxItem, null), /* @__PURE__ */ React60.createElement(Text, { size: 14 }, label));
+  return /* @__PURE__ */ React60.createElement(
+    CheckboxWrapper,
+    {
+      disabled: disabled || void 0,
+      onClick: onChange,
+      ...rest
+    },
+    value ? /* @__PURE__ */ React60.createElement(checkbox_rect_default, null) : /* @__PURE__ */ React60.createElement(CheckboxItem, null),
+    /* @__PURE__ */ React60.createElement(Text, { size: 14 }, label)
+  );
 }
 
 // src/design.system/selected.counter/selected.counter.tsx
@@ -2720,7 +2733,8 @@ var TextArea = ({
   cols = 50,
   tooltip,
   label,
-  required
+  required,
+  ...rest
 }) => {
   return /* @__PURE__ */ React104.createElement(React104.Fragment, null, label && /* @__PURE__ */ React104.createElement(LabelWrapper3, null, /* @__PURE__ */ React104.createElement(Tooltip, { text: tooltip || "" }, /* @__PURE__ */ React104.createElement("div", { style: { display: "flex", gap: 4 } }, /* @__PURE__ */ React104.createElement(Text, { size: 14, weight: 600 }, label), required && /* @__PURE__ */ React104.createElement(Text, { size: 14, weight: 600 }, "*")))), /* @__PURE__ */ React104.createElement(
     StyledTextArea,
@@ -2730,7 +2744,8 @@ var TextArea = ({
       onChange,
       rows,
       cols,
-      active: !!value
+      active: !!value,
+      ...rest
     }
   ));
 };

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,11 @@
 'use client';
-import { Checkbox, DataFlow, MultiInputTable, Table } from '@/design.system';
+import {
+  Button,
+  Checkbox,
+  DataFlow,
+  MultiInputTable,
+  Table,
+} from '@/design.system';
 import { edges, nodes } from '@/design.system/data.flow/builder';
 import React from 'react';
 
@@ -8,6 +14,13 @@ export default function Home() {
   const [checked, setChecked] = React.useState(false);
   return (
     <div style={{ background: '#0E1C28', height: '100vh', padding: 150 }}>
+      <Button
+        data-cy={'test'}
+        variant="primary"
+        onClick={() => console.log('clicked')}
+      >
+        Primary
+      </Button>
       <MultiInputTable
         title="Languages"
         placeholder="dsfd"
@@ -35,6 +48,7 @@ export default function Home() {
           label="I agree to the terms and conditions"
           value={checked}
           onChange={() => setChecked(!checked)}
+          data-cy="checkbox"
         />
         <br />
         <Checkbox

diff --git a/src/design.system/card/card.tsx b/src/design.system/card/card.tsx
@@ -19,6 +19,7 @@ export function Card({
   focus = false,
   type = 'primary',
   header,
+  ...rest
 }: CardProps) {
   function renderHeader() {
     if (header?.body) {
@@ -37,7 +38,7 @@ export function Card({
   }
 
   return (
-    <CardContainer selected={focus || undefined} type={type}>
+    <CardContainer selected={focus || undefined} type={type} {...rest}>
       {header && <CardHeader>{renderHeader()}</CardHeader>}
       {children}
     </CardContainer>

diff --git a/src/design.system/checkbox/checkbox.tsx b/src/design.system/checkbox/checkbox.tsx
@@ -15,9 +15,14 @@ export function Checkbox({
   value,
   label = '',
   disabled = false,
+  ...rest
 }: CheckboxProps) {
   return (
-    <CheckboxWrapper disabled={disabled || undefined} onClick={onChange}>
+    <CheckboxWrapper
+      disabled={disabled || undefined}
+      onClick={onChange}
+      {...rest}
+    >
       {value ? <Checked /> : <CheckboxItem />}
       <Text size={14}>{label}</Text>
     </CheckboxWrapper>

diff --git a/src/design.system/drop.down/drop.down.tsx b/src/design.system/drop.down/drop.down.tsx
@@ -44,6 +44,7 @@ export function DropDown({
   label,
   tooltip,
   required,
+  ...rest
 }: DropDownProps) {
   const [isOpen, setOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState<any>(value || null);
@@ -99,6 +100,7 @@ export function DropDown({
           onMouseEnter={() => setHover(true)}
           onMouseLeave={() => setHover(false)}
           onClick={toggleDropdown}
+          {...rest}
         >
           <DropdownHeader>
             {selectedItem ? selectedItem.label : SELECTED_ITEM}

diff --git a/src/design.system/text.area/index.tsx b/src/design.system/text.area/index.tsx
@@ -47,6 +47,7 @@ export const TextArea: React.FC<TextAreaProps> = ({
   tooltip,
   label,
   required,
+  ...rest
 }) => {
   return (
     <>
@@ -73,6 +74,7 @@ export const TextArea: React.FC<TextAreaProps> = ({
         rows={rows}
         cols={cols}
         active={!!value}
+        {...rest}
       />
     </>
   );