@webstudio-is/sdk-components-react-radix 0.91.0 → 0.92.0

package/src/switch.ws.ts

@@ -1,146 +0,0 @@
-import { SwitchIcon, TriggerIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { button, span } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import { propsSwitch, propsSwitchThumb } from "./__generated__/switch.props";
-
-export const metaSwitch: WsComponentMeta = {
-  category: "radix",
-  order: 11,
-  type: "container",
-  description:
-    "A control that allows the user to toggle between checked and not checked.",
-  icon: SwitchIcon,
-  states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states",
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states",
-    },
-  ],
-  presetStyle: {
-    button: [button, buttonReset].flat(),
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Switch",
-      dataSources: {
-        switchChecked: { type: "variable", initialValue: false },
-      },
-      props: [
-        {
-          name: "checked",
-          type: "dataSource",
-          dataSourceName: "switchChecked",
-        },
-        {
-          name: "onCheckedChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["checked"],
-              code: `switchChecked = checked`,
-            },
-          ],
-        },
-      ],
-      // peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors
-      // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
-      // disabled:cursor-not-allowed disabled:opacity-50
-      // data-[state=checked]:bg-primary
-      // data-[state=unchecked]:bg-input
-      styles: [
-        // We are not supporting peer like styles yet
-        tc.inlineFlex(),
-        tc.property("height", "24px"),
-        tc.property("width", "44px"),
-        tc.shrink(0),
-        tc.cursor("pointer"),
-        tc.items("center"),
-        tc.rounded("full"),
-        tc.border(2),
-        tc.border("transparent"),
-        tc.transition("all"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-        tc.state([tc.bg("primary")].flat(), "[data-state=checked]"),
-        tc.state([tc.bg("input")].flat(), "[data-state=unchecked]"),
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "SwitchThumb",
-          // pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
-          // data-[state=checked]:translate-x-5
-          // data-[state=unchecked]:translate-x-0
-          styles: [
-            tc.pointerEvents("none"),
-            tc.block(),
-            tc.h(5),
-            tc.w(5),
-            tc.rounded("full"),
-            tc.bg("background"),
-            tc.shadow("lg"),
-            tc.transition("transform"),
-            tc.state(
-              [tc.property("transform", "translateX(20px)")].flat(),
-              "[data-state=checked]"
-            ),
-            tc.state(
-              [tc.property("transform", "translateX(0px)")].flat(),
-              "[data-state=unchecked]"
-            ),
-          ].flat(),
-          children: [],
-        },
-      ],
-    },
-  ],
-};
-
-export const metaSwitchThumb: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: TriggerIcon,
-  states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states",
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states",
-    },
-  ],
-  presetStyle: {
-    span,
-  },
-};
-
-export const propsMetaSwitch: WsComponentPropsMeta = {
-  props: propsSwitch,
-  initialProps: ["id", "checked", "name", "required"],
-};
-
-export const propsMetaSwitchThumb: WsComponentPropsMeta = {
-  props: propsSwitchThumb,
-};

package/src/tabs.tsx

@@ -1,64 +0,0 @@
-/* eslint-disable react/display-name */
-// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
-
-import {
-  type ComponentPropsWithoutRef,
-  type ForwardRefExoticComponent,
-  type ComponentPropsWithRef,
-  forwardRef,
-} from "react";
-import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
-import {
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
-  type Hook,
-} from "@webstudio-is/react-sdk";
-
-export const Tabs: ForwardRefExoticComponent<
-  Omit<ComponentPropsWithRef<typeof Root>, "asChild" | "defaultValue">
-> = Root;
-
-export const TabsList = List;
-
-export const TabsTrigger = forwardRef<
-  HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Trigger>
->(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return <Trigger ref={ref} value={value ?? index} {...props} />;
-});
-
-export const TabsContent = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<typeof Content>
->(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return <Content ref={ref} value={value ?? index} {...props} />;
-});
-
-/* BUILDER HOOKS */
-
-const namespace = "@webstudio-is/sdk-components-react-radix";
-
-// For each TabsContent component within the selection,
-// we identify its closest parent Tabs component
-// and update its open prop bound to variable.
-export const hooksTabs: Hook = {
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:TabsContent`) {
-        const tabs = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Tabs`
-        );
-        const contentValue =
-          context.getPropValue(instance.id, "value") ??
-          context.indexesWithinAncestors.get(instance.id)?.toString();
-        if (tabs && contentValue) {
-          context.setPropVariable(tabs.id, "value", contentValue);
-        }
-      }
-    }
-  },
-};

package/src/tabs.ws.ts

@@ -1,198 +0,0 @@
-import {
-  ContentIcon,
-  HeaderIcon,
-  TabsIcon,
-  TriggerIcon,
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type EmbedTemplateStyleDecl,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { button, div } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import {
-  propsTabs,
-  propsTabsList,
-  propsTabsTrigger,
-  propsTabsContent,
-} from "./__generated__/tabs.props";
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-/**
- * Styles source without animations:
- * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/tabs.tsx
- *
- * Attributions
- * MIT License
- * Copyright (c) 2023 shadcn
- **/
-
-// inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all
-// focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-// disabled:pointer-events-none disabled:opacity-50
-// data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm
-const tabsTriggerStyles = [
-  tc.inlineFlex(),
-  tc.items("center"),
-  tc.justify("center"),
-  tc.whitespace("nowrap"),
-  tc.rounded("md"),
-  tc.px(3),
-  tc.py(1.5),
-  tc.text("sm"),
-  tc.font("medium"),
-  tc.transition("all"),
-  tc.focusVisible(
-    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-  ),
-  tc.disabled([tc.pointerEvents("none"), tc.opacity(50)].flat()),
-  tc.state(
-    [tc.bg("background"), tc.text("foreground"), tc.shadow("sm")].flat(),
-    "[data-state=active]"
-  ),
-].flat();
-
-// mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-const tabsContentStyles: EmbedTemplateStyleDecl[] = [
-  tc.mt(2),
-  tc.focusVisible(
-    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-  ),
-].flat();
-
-export const metaTabs: WsComponentMeta = {
-  category: "radix",
-  order: 2,
-  type: "container",
-  icon: TabsIcon,
-  presetStyle,
-  description:
-    "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
-  template: [
-    {
-      type: "instance",
-      component: "Tabs",
-      dataSources: {
-        tabsValue: { type: "variable", initialValue: "0" },
-      },
-      props: [
-        { type: "dataSource", name: "value", dataSourceName: "tabsValue" },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["value"], code: `tabsValue = value` },
-          ],
-        },
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "TabsList",
-          // inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground
-          styles: [
-            tc.inlineFlex(),
-            tc.h(10),
-            tc.items("center"),
-            tc.justify("center"),
-            tc.rounded("md"),
-            tc.bg("muted"),
-            tc.p(1),
-            tc.text("mutedForeground"),
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "TabsTrigger",
-              styles: tabsTriggerStyles,
-              children: [{ type: "text", value: "Account" }],
-            },
-            {
-              type: "instance",
-              component: "TabsTrigger",
-              styles: tabsTriggerStyles,
-              children: [{ type: "text", value: "Password" }],
-            },
-          ],
-        },
-        {
-          type: "instance",
-          component: "TabsContent",
-          styles: tabsContentStyles,
-          children: [
-            { type: "text", value: "Make changes to your account here." },
-          ],
-        },
-        {
-          type: "instance",
-          component: "TabsContent",
-          styles: tabsContentStyles,
-          children: [{ type: "text", value: "Change your password here." }],
-        },
-      ],
-    },
-  ],
-};
-
-export const metaTabsList: WsComponentMeta = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  icon: HeaderIcon,
-  requiredAncestors: ["Tabs"],
-  presetStyle,
-};
-
-export const metaTabsTrigger: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  requiredAncestors: ["TabsList"],
-  invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs",
-  label: "Tab Trigger",
-  states: [
-    ...defaultStates,
-    {
-      category: "component-states",
-      label: "Active",
-      selector: "[data-state=active]",
-    },
-  ],
-  presetStyle: {
-    button: [button, buttonReset].flat(),
-  },
-};
-
-export const metaTabsContent: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  label: "Tab Content",
-  icon: ContentIcon,
-  requiredAncestors: ["Tabs"],
-  indexWithinAncestor: "Tabs",
-  presetStyle,
-};
-
-export const propsMetaTabs: WsComponentPropsMeta = {
-  props: propsTabs,
-};
-
-export const propsMetaTabsList: WsComponentPropsMeta = {
-  props: propsTabsList,
-};
-
-export const propsMetaTabsTrigger: WsComponentPropsMeta = {
-  props: propsTabsTrigger,
-};
-
-export const propsMetaTabsContent: WsComponentPropsMeta = {
-  props: propsTabsContent,
-};