@webstudio-is/sdk-components-react-radix 0.95.0 → 0.97.0

package/lib/dialog.ws.js

@@ -1,289 +0,0 @@
-"use strict";
-import {
-  DialogIcon,
-  TriggerIcon,
-  ContentIcon,
-  OverlayIcon,
-  HeadingIcon,
-  TextIcon,
-  ButtonElementIcon,
-  LargeXIcon
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import {
-  propsDialog,
-  propsDialogContent,
-  propsDialogTrigger,
-  propsDialogOverlay,
-  propsDialogClose,
-  propsDialogTitle,
-  propsDialogDescription
-} from "./__generated__/dialog.props";
-import { buttonReset, getButtonStyles } from "./theme/styles";
-const presetStyle = {
-  div
-};
-const titlePresetStyle = {
-  h2
-};
-const descriptionPresetStyle = {
-  p
-};
-export const metaDialogTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false
-};
-export const metaDialogContent = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: ContentIcon,
-  detachable: false
-};
-export const metaDialogOverlay = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: OverlayIcon,
-  detachable: false
-};
-export const metaDialogTitle = {
-  category: "hidden",
-  type: "container",
-  presetStyle: titlePresetStyle,
-  icon: HeadingIcon
-};
-export const metaDialogDescription = {
-  category: "hidden",
-  type: "container",
-  presetStyle: descriptionPresetStyle,
-  icon: TextIcon
-};
-export const metaDialogClose = {
-  category: "hidden",
-  type: "container",
-  presetStyle: {
-    button: [buttonReset, button].flat()
-  },
-  states: defaultStates,
-  icon: ButtonElementIcon,
-  label: "Close Button"
-};
-export const metaDialog = {
-  category: "radix",
-  order: 4,
-  type: "container",
-  icon: DialogIcon,
-  stylable: false,
-  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
-  template: [
-    {
-      type: "instance",
-      component: "Dialog",
-      dataSources: {
-        dialogOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "dialogOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `dialogOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "DialogTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "DialogOverlay",
-          /**
-           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
-           * flex
-           **/
-          styles: [
-            tc.fixed(),
-            tc.inset(0),
-            tc.z(50),
-            tc.bg("background", 80),
-            tc.backdropBlur("sm"),
-            // To allow positioning Content
-            tc.flex(),
-            tc.overflow("auto")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "DialogContent",
-              /**
-               * fixed w-full z-50
-               * grid gap-4 max-w-lg
-               * m-auto
-               * border bg-background p-6 shadow-lg
-               **/
-              styles: [
-                tc.w("full"),
-                tc.z(50),
-                tc.flex(),
-                tc.flex("col"),
-                tc.gap(4),
-                tc.m("auto"),
-                tc.maxW("lg"),
-                tc.border(),
-                tc.bg("background"),
-                tc.p(6),
-                tc.shadow("lg"),
-                tc.relative()
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "Box",
-                  label: "Dialog Header",
-                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
-                  children: [
-                    {
-                      type: "instance",
-                      component: "DialogTitle",
-                      /**
-                       * text-lg leading-none tracking-tight
-                       **/
-                      styles: [
-                        tc.my(0),
-                        tc.leading("none"),
-                        tc.text("lg"),
-                        tc.tracking("tight")
-                      ].flat(),
-                      children: [
-                        {
-                          type: "text",
-                          value: "Dialog Title"
-                        }
-                      ]
-                    },
-                    {
-                      type: "instance",
-                      component: "DialogDescription",
-                      /**
-                       * text-sm text-muted-foreground
-                       **/
-                      styles: [
-                        tc.my(0),
-                        tc.text("sm"),
-                        tc.text("mutedForeground")
-                      ].flat(),
-                      children: [
-                        {
-                          type: "text",
-                          value: "Dialog description text you can edit"
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  type: "instance",
-                  component: "Text",
-                  children: [{ type: "text", value: "The text you can edit" }]
-                },
-                {
-                  type: "instance",
-                  component: "DialogClose",
-                  /**
-                   * absolute right-4 top-4
-                   * rounded-sm opacity-70
-                   * ring-offset-background
-                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-                   * flex items-center justify-center h-4 w-4
-                   **/
-                  styles: [
-                    tc.absolute(),
-                    tc.right(4),
-                    tc.top(4),
-                    tc.rounded("sm"),
-                    tc.opacity(70),
-                    tc.flex(),
-                    tc.items("center"),
-                    tc.justify("center"),
-                    tc.h(4),
-                    tc.w(4),
-                    tc.border(0),
-                    tc.bg("transparent"),
-                    tc.outline("none"),
-                    tc.hover(tc.opacity(100)),
-                    tc.focus(tc.ring("ring", 2, "background", 2))
-                  ].flat(),
-                  children: [
-                    {
-                      type: "instance",
-                      component: "HtmlEmbed",
-                      label: "Close Icon",
-                      props: [
-                        {
-                          type: "string",
-                          name: "code",
-                          value: LargeXIcon
-                        }
-                      ],
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-export const propsMetaDialog = {
-  props: propsDialog,
-  initialProps: ["open"]
-};
-export const propsMetaDialogTrigger = {
-  props: propsDialogTrigger
-};
-export const propsMetaDialogContent = {
-  props: propsDialogContent,
-  initialProps: []
-};
-export const propsMetaDialogOverlay = {
-  props: propsDialogOverlay,
-  initialProps: []
-};
-export const propsMetaDialogClose = {
-  props: propsDialogClose,
-  initialProps: []
-};
-export const propsMetaDialogTitle = {
-  props: propsDialogTitle,
-  initialProps: []
-};
-export const propsMetaDialogDescription = {
-  props: propsDialogDescription,
-  initialProps: []
-};

package/lib/label.js

@@ -1,7 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-export const Label = forwardRef((props, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, ...props }));

package/lib/label.stories.js

@@ -1,19 +0,0 @@
-"use strict";
-import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { Label as LabelPrimitive } from "./label";
-import * as baseComponents from "@webstudio-is/sdk-components-react";
-import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
-import * as radixComponents from "./components";
-import * as radixMetas from "./metas";
-export default {
-  title: "Components/Label",
-  component: LabelPrimitive
-};
-export const Label = {
-  render: (props) => renderComponentTemplate({
-    name: "Label",
-    props: { ...props },
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};

package/lib/label.ws.js

@@ -1,44 +0,0 @@
-"use strict";
-import { LabelIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { label } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/label.props";
-import * as tc from "./theme/tailwind-classes";
-const presetStyle = {
-  label
-};
-export const meta = {
-  category: "radix",
-  order: 102,
-  type: "container",
-  icon: LabelIcon,
-  presetStyle,
-  states: defaultStates,
-  description: "An accessible label to describe the purpose of an input. Match the \u201CFor\u201D property on the label with the \u201CID\u201D of the input to connect them.",
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      styles: [
-        // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
-        tc.text("sm"),
-        tc.font("medium"),
-        tc.leading("none")
-        // We are not supporting peer like styles yet
-      ].flat(),
-      children: [{ type: "text", value: "Form Label" }]
-    }
-  ]
-};
-export const propsMeta = {
-  props: {
-    ...props,
-    htmlFor: {
-      ...props.htmlFor,
-      label: "For"
-    }
-  },
-  initialProps: ["id", "htmlFor"]
-};

package/lib/navigation-menu.js

@@ -1,76 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import {
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
-  ReactSdkContext
-} from "@webstudio-is/react-sdk";
-import {
-  Children,
-  forwardRef,
-  useContext
-} from "react";
-export const NavigationMenu = forwardRef(({ value: propsValue, ...props }, ref) => {
-  const { renderer } = useContext(ReactSdkContext);
-  let value = propsValue;
-  if (renderer === "canvas") {
-    value = value === "" ? "-1" : value;
-  }
-  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Root, { ref, value, ...props });
-});
-export const NavigationMenuList = NavigationMenuPrimitive.List;
-export const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;
-export const NavigationMenuContent = NavigationMenuPrimitive.Content;
-export const NavigationMenuItem = forwardRef(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Item, { ref, value: value ?? index, ...props });
-});
-export const NavigationMenuLink = forwardRef(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Link, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("a", { children: "Add link component" }) });
-});
-export const NavigationMenuTrigger = forwardRef(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
-});
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksNavigationMenu = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:NavigationMenuContent`) {
-        const menu = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:NavigationMenu`
-        );
-        if (menu) {
-          context.setPropVariable(menu.id, "value", "");
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:NavigationMenuContent`) {
-        const menu = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:NavigationMenu`
-        );
-        const menuItem = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:NavigationMenuItem`
-        );
-        if (menuItem === void 0 || menu === void 0) {
-          return;
-        }
-        const contentValue = context.getPropValue(menuItem.id, "value") ?? context.indexesWithinAncestors.get(menuItem.id)?.toString();
-        if (contentValue) {
-          context.setPropVariable(menu.id, "value", contentValue);
-        }
-      }
-    }
-  }
-};

package/lib/navigation-menu.stories.js

@@ -1,18 +0,0 @@
-"use strict";
-import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { NavigationMenu as NavigationMenuPrimitive } from "./navigation-menu";
-import * as baseComponents from "@webstudio-is/sdk-components-react";
-import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
-import * as radixComponents from "./components";
-import * as radixMetas from "./metas";
-export default {
-  title: "Components/NavigationMenu",
-  component: NavigationMenuPrimitive
-};
-export const NavigationMenu = {
-  render: () => renderComponentTemplate({
-    name: "NavigationMenu",
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};