@ceed/cds 0.0.177-beta.4 → 0.0.177-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/cds",
-  "version": "0.0.177-beta.4",
+  "version": "0.0.177-beta.5",
   "main": "dist/cjs/index.js",
   "types": "dist/types/index.d.ts",
   "type": "module",
@@ -17,6 +17,7 @@
     "prepack": "yarn build"
   },
   "files": [
+    "src",
     "dist",
     "framer"
   ],

package/src/components/Accordions/Accordions.framer.ts

@@ -0,0 +1,44 @@
+import { ControlType, type PropertyControls } from "framer";
+
+export const accordionsPropertyControls: PropertyControls = {
+  variant: {
+    title: "Variant",
+    type: ControlType.Enum,
+    options: ["outlined", "plain", "solid", "soft"],
+    defaultValue: "plain",
+  },
+  color: {
+    title: "Color",
+    type: ControlType.Enum,
+    options: ["primary", "neutral", "danger", "success", "warning"],
+    optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
+    defaultValue: "neutral",
+  },
+  size: {
+    title: "Size",
+    type: ControlType.Enum,
+    options: ["sm", "md", "lg"],
+    defaultValue: "md",
+  },
+  disableDivider: {
+    title: "Disable Divider",
+    type: ControlType.Boolean,
+    defaultValue: false,
+  },
+  summaries: {
+    title: "Summaries",
+    type: ControlType.Array,
+    control: {
+      type: ControlType.String,
+    },
+    defaultValue: [],
+  },
+  details: {
+    title: "Details",
+    type: ControlType.Array,
+    control: {
+      type: ControlType.ComponentInstance,
+    },
+    defaultValue: [],
+  }
+};

package/src/components/Accordions/Accordions.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import {
+  AccordionGroup as JoyAccordionGroup,
+  Accordion as JoyAccordion,
+  AccordionSummary as JoyAccordionSummary,
+  AccordionDetails as JoyAccordionDetails,
+} from "@mui/joy";
+import { motion } from "framer-motion";
+
+const MotionAccordionSummary = motion(JoyAccordionSummary);
+
+const AccordionSummary = MotionAccordionSummary;
+
+export { AccordionSummary };
+
+AccordionSummary.displayName = "AccordionSummary";
+
+const MotionAccordionDetails = motion(JoyAccordionDetails);
+
+const AccordionDetails = MotionAccordionDetails;
+
+export { AccordionDetails };
+
+AccordionDetails.displayName = "AccordionDetails";
+
+const MotionAccordion = motion(JoyAccordion);
+function Accordion(
+  props: {
+    summary: React.ReactNode;
+    details: React.ReactNode;
+    index: number;
+  } & React.ComponentProps<typeof MotionAccordion>
+) {
+  // prop destruction
+  const { summary, details, variant, color, ...innerProps } = props;
+  // lib hooks
+  // state, ref, querystring hooks
+  // form hooks
+  // query hooks
+  // calculated values
+  const inheritedVariant = variant === "solid" ? "solid" : undefined;
+  // effects
+  // handlers
+
+  return (
+    <MotionAccordion variant={inheritedVariant} color={color} {...innerProps}>
+      <AccordionSummary variant={inheritedVariant} color={color}>
+        {summary}
+      </AccordionSummary>
+      <AccordionDetails variant={inheritedVariant} color={color}>
+        {details}
+      </AccordionDetails>
+    </MotionAccordion>
+  );
+}
+
+export { Accordion };
+
+Accordion.displayName = "Accordion";
+
+const MotionAccordions = motion(JoyAccordionGroup);
+
+function Accordions(
+  props: {
+    items: {
+      summary: string;
+      details: React.ReactNode;
+    }[];
+  } & React.ComponentProps<typeof MotionAccordions>
+) {
+  // prop destruction
+  const { variant, color, items, ...innerProps } = props;
+  // lib hooks
+  // state, ref, querystring hooks
+  // form hooks
+  // query hooks
+  // calculated values
+  // effects
+  // handlers
+
+  return (
+    <MotionAccordions variant={variant} color={color} {...innerProps}>
+      {items.map((item, index) => (
+        <Accordion
+          summary={item.summary}
+          details={item.details}
+          index={index}
+          variant={variant}
+          color={color}
+        />
+      ))}
+    </MotionAccordions>
+  );
+}
+
+export { Accordions };
+
+Accordions.displayName = "Accordions";

package/src/components/Accordions/index.ts

@@ -0,0 +1,3 @@
+import { Accordions } from "./Accordions.js";
+export * from "./Accordions.js";
+export default Accordions;

package/src/components/Autocomplete/Autocomplete.framer.ts

@@ -0,0 +1,136 @@
+import { ControlType, type PropertyControls } from "framer";
+
+export const autocompletePropertyControls: PropertyControls = {
+  onChange: {
+    type: ControlType.EventHandler,
+  },
+  label: {
+    title: "Label",
+    type: ControlType.String,
+  },
+  helperText: {
+    title: "Helper Text",
+    type: ControlType.String,
+  },
+  error: {
+    title: "Error",
+    type: ControlType.Boolean,
+    defaultValue: false,
+  },
+  defaultValue: {
+    title: "Default Value",
+    type: ControlType.String,
+    defaultValue: undefined,
+  },
+  options: {
+    title: "Options",
+    type: ControlType.Array,
+    control: {
+      type: ControlType.Object,
+      controls: {
+        label: {
+          title: "Label",
+          type: ControlType.String,
+        },
+        chips: {
+          title: "Chips",
+          type: ControlType.Object,
+          controls: {
+            start: {
+              title: "Start",
+              type: ControlType.Object,
+              controls: {
+                label: {
+                  title: "Label",
+                  type: ControlType.String,
+                },
+                color: {
+                  title: "Color",
+                  type: ControlType.Enum,
+                  options: [
+                    "primary",
+                    "neutral",
+                    "danger",
+                    "success",
+                    "warning",
+                  ],
+                  optionTitles: [
+                    "Primary",
+                    "Neutral",
+                    "Danger",
+                    "Success",
+                    "Warning",
+                  ],
+                },
+              },
+            },
+            end: {
+              title: "End",
+              type: ControlType.Object,
+              controls: {
+                label: {
+                  title: "Label",
+                  type: ControlType.String,
+                },
+                color: {
+                  title: "Color",
+                  type: ControlType.Enum,
+                  options: [
+                    "primary",
+                    "neutral",
+                    "danger",
+                    "success",
+                    "warning",
+                  ],
+                  optionTitles: [
+                    "Primary",
+                    "Neutral",
+                    "Danger",
+                    "Success",
+                    "Warning",
+                  ],
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+    defaultValue: [
+      { label: "Option1", chips: {} },
+      { label: "Option2", chips: {} },
+      { label: "Option3", chips: {} },
+    ],
+  },
+  placeholder: {
+    title: "Placeholder",
+    type: ControlType.String,
+    defaultValue: "Select an option",
+  },
+  variant: {
+    title: "Variant",
+    type: ControlType.Enum,
+    options: ["outlined", "plain", "solid", "soft"],
+    defaultValue: "outlined",
+  },
+  size: {
+    title: "Size",
+    type: ControlType.Enum,
+    options: ["sm", "md", "lg"],
+    defaultValue: "md",
+  },
+  startDecorator: {
+    title: "Start Decorator",
+    type: ControlType.ComponentInstance,
+  },
+  disabled: {
+    title: "Disabled",
+    type: ControlType.Boolean,
+    defaultValue: false,
+  },
+  required: {
+    title: "Required",
+    type: ControlType.Boolean,
+    defaultValue: false,
+  },
+};