fix more mitosis stuff

hyperweb-io · Sep 17, 2024 · 244b964 · 244b964
1 parent 4077815
commit 244b964
Show file tree

Hide file tree

Showing 11 changed files with 354 additions and 213 deletions.
diff --git a/packages/compiler/src/plugins/react.plugin.js b/packages/compiler/src/plugins/react.plugin.js
@@ -1,6 +1,6 @@
 // @ts-check
 const scaffolds = require("../scaffold.config.js");
-const scaffoldConfig = scaffolds.scaffoldConfig;
+const scaffoldConfig = scaffolds.reactScaffoldConfig;
 
 /**
  * @type {import('@builder.io/mitosis').Plugin}

diff --git a/packages/vue/scaffolds/modal/modal.css.ts b/packages/vue/scaffolds/modal/modal.css.ts
@@ -1,25 +1,10 @@
-import { style, keyframes } from "@vanilla-extract/css";
-import { globalStyle } from "@vanilla-extract/css";
-
-const fadeIn = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 },
-});
-
-const fadeOut = keyframes({
-  from: { opacity: 1 },
-  to: { opacity: 0 },
-});
-
-const scaleIn = keyframes({
-  from: { transform: "scale(0.95)" },
-  to: { transform: "scale(1)" },
-});
-
-const scaleOut = keyframes({
-  from: { transform: "scale(1)" },
-  to: { transform: "scale(0.95)" },
-});
+import {
+  style,
+  globalStyle,
+  styleVariants,
+  createVar,
+} from "@vanilla-extract/css";
+import { themeVars } from "@/styles/themes.css";
 
 export const modalRoot = style({
   position: "fixed",
@@ -90,12 +75,60 @@ export const modalPanel = style({
   boxShadow:
     "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
   overflow: "hidden",
-  maxWidth: "28rem",
-  width: "100%",
+  display: "inline-block", // Change to inline-block
+  minWidth: "280px", // Add a minimum width
 });
 
-export const modalContent = style({
-  padding: "1.5rem",
+// Define the CSS variables
+export const modalBgVar = createVar();
+export const modalShadowVar = createVar();
+
+const modalContentBase = style({
+  boxShadow: modalShadowVar,
+  backgroundColor: modalBgVar,
+  display: "flex",
+  height: "auto",
+  flexDirection: "column",
+  borderRadius: themeVars.radii.xl,
+  width: "auto", // Change to auto
+  maxWidth: "100%", // Add maxWidth
+});
+
+export const modalContent = styleVariants({
+  light: [
+    style({
+      vars: {
+        [modalBgVar]: themeVars.colors.white,
+        [modalShadowVar]:
+          "0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      },
+    }),
+    modalContentBase,
+  ],
+  dark: [
+    style({
+      vars: {
+        [modalBgVar]: themeVars.colors.gray700,
+        [modalShadowVar]:
+          "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,rgba(0, 0, 0, 0.2) 0px 5px 10px,rgba(0, 0, 0, 0.4) 0px 15px 40px",
+      },
+    }),
+    modalContentBase,
+  ],
+});
+
+export const modalAnimateContainer = style({
+  minHeight: `clamp(100%, ${themeVars.space[30]}px, ${themeVars.space[30]}px)`,
+});
+
+export const modalChildren = style({
+  width: "100%", // Change to 100%
+  minWidth: "280px", // Add minWidth
+  boxSizing: "border-box",
+  paddingLeft: themeVars.space[7],
+  paddingRight: themeVars.space[7],
+  paddingTop: themeVars.space[3],
+  paddingBottom: themeVars.space[10],
 });
 
 export const modalHeader = style({

diff --git a/packages/vue/scaffolds/modal/modal.vue b/packages/vue/scaffolds/modal/modal.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import {
   Dialog,
   DialogPanel,
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue";
 import * as styles from "./modal.css";
+import useTheme from "@/ui/hooks/use-theme/use-theme";
 
 interface ModalProps {
   isOpen?: boolean;
@@ -40,6 +41,11 @@ const emit = defineEmits(["update:isOpen"]);
 
 const defaultRoot = ref<HTMLElement | null>(null);
 const isOpen = ref(props.isOpen ?? props.initialOpen);
+const { theme, themeClass, getThemeRef } = useTheme();
+
+const modalContentClass = computed(() => {
+  return styles.modalContent[theme.value];
+});
 
 watch(
   () => props.isOpen,
@@ -81,11 +87,11 @@ defineExpose({ isOpen });
   <TransitionRoot appear :show="isOpen" as="template">
     <Dialog
       as="div"
-      :class="[styles.modalRoot, themeClassName]"
+      :class="[styles.modalRoot, themeClassName, themeClass]"
       @close="closeModal"
       :role="role"
     >
-      <div :class="styles.modalContainer">
+      <div :class="styles.modalContainer" ref="getThemeRef">
         <TransitionChild
           as="template"
           :enter="styles.backdropTransitionEnter"
@@ -96,12 +102,12 @@ defineExpose({ isOpen });
           :leave-to="styles.backdropTransitionLeaveTo"
         >
           <div
-            :class="[styles.modalBackdrop, backdropClassName]"
+            :class="[styles.modalBackdrop, backdropClassName, themeClass]"
             @click="closeOnClickaway ? closeModal : undefined"
           />
         </TransitionChild>
 
-        <div :class="styles.modalWrapper">
+        <div :class="[styles.modalWrapper, themeClass]">
           <TransitionChild
             as="template"
             :enter="styles.transitionEnter"
@@ -112,25 +118,41 @@ defineExpose({ isOpen });
             :leave-to="styles.transitionLeaveTo"
           >
             <DialogPanel
-              :class="[styles.modalPanel, className]"
-              :style="contentStyles"
+              :class="[
+                styles.modalPanel,
+                modalContentClass,
+                className,
+                themeClass,
+              ]"
+              :style="[
+                {
+                  '--modal-bg': styles.modalBgVar,
+                  '--modal-shadow': styles.modalShadowVar,
+                },
+                contentStyles,
+              ]"
             >
               <div
-                :class="[styles.modalContent, contentClassName]"
+                :class="[styles.modalContent, contentClassName, themeClass]"
                 data-modal-part="content"
               >
-                <div :class="styles.modalHeader">
+                <div :class="[styles.modalHeader, themeClass]">
                   <component
                     :is="header"
                     :closeButtonProps="{
                       onClick: onCloseButtonClick,
-                      class: styles.modalCloseButton,
+                      class: [styles.modalCloseButton, themeClass],
                     }"
                   />
                 </div>
 
                 <div
-                  :class="[styles.modalBody, childrenClassName]"
+                  :class="[
+                    styles.modalBody,
+                    styles.modalChildren,
+                    childrenClassName,
+                    themeClass,
+                  ]"
                   data-modal-part="children"
                 >
                   <slot></slot>

diff --git a/packages/vue/stories/Avatar.stories.ts b/packages/vue/stories/Avatar.stories.ts
@@ -1,8 +1,12 @@
+import { ref, onMounted } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import Avatar from "../src/ui/avatar/avatar.vue";
 import AvatarBadge from "../src/ui/avatar-badge/avatar-badge.vue";
 import Box from "../src/ui/box/box.vue";
 import Stack from "../src/ui/stack/stack.vue";
+import useTheme from "../src/ui/hooks/use-theme/use-theme";
+
+const dogImage = `https://picsum.photos/id/237/200/200`;
 
 const meta: Meta<typeof Avatar> = {
   component: Avatar,
@@ -15,56 +19,79 @@ export default meta;
 
 type Story = StoryObj<typeof Avatar>;
 
-const dogImage = `https://picsum.photos/id/237/200/200`;
-
 export const Primary: Story = {
-  args: {},
-  render: (args) => ({
-    components: { Avatar, Stack },
+  render: () => ({
+    components: { Avatar, AvatarBadge, Box, Stack },
     setup() {
-      return { args };
+      const { theme, setTheme, themeClass } = useTheme();
+
+      onMounted(() => {
+        setTheme(theme.value);
+      });
+
+      return { themeClass, dogImage };
     },
     template: `
-      <Stack direction="horizontal" space="$4">
-        <Avatar name="Puppy" size="2xs" :src="dogImage" />
-        <Avatar name="Koala Titi" size="xs" src="https://bit.ly/hellasdasdasd" />
-        <Avatar name="Abu Da" size="sm" src="https://bit.ly/hellasdasdasd" />
-        <Avatar name="Baby G" size="md" src="https://bit.ly/hellasdasdasd" />
-        <Avatar name="Baby G" size="lg" src="https://bit.ly/hellasdasdasd" />
-        <Avatar name="Puppy" size="xl" :src="dogImage" />
-        <Avatar name="Puppy" size="2xl" :src="dogImage" />
-      </Stack>
+      <div :class="themeClass">
+        <Stack direction="horizontal" space="$4">
+          <Avatar name="Puppy" size="2xs" :src="dogImage" />
+          <Avatar name="Koala Titi" size="xs" src="https://bit.ly/hellasdasdasd" />
+          <Avatar name="Abu Da" size="sm" src="https://bit.ly/hellasdasdasd" />
+          <Avatar name="Baby G" size="md" src="https://bit.ly/hellasdasdasd" />
+          <Avatar name="Baby G" size="lg" src="https://bit.ly/hellasdasdasd" />
+          <Avatar name="Puppy" size="xl" :src="dogImage" />
+          <Avatar name="Puppy" size="2xl" :src="dogImage" />
+        </Stack>
+      </div>
     `,
   }),
 };
 
 export const WithBadge: Story = {
-  args: {},
-  render: (args) => ({
+  render: () => ({
     components: { Avatar, AvatarBadge, Box, Stack },
     setup() {
-      return { args, dogImage };
+      const { theme, setTheme, themeClass } = useTheme();
+
+      onMounted(() => {
+        setTheme(theme.value);
+      });
+
+      return { themeClass, dogImage };
     },
     template: `
-      <Stack direction="horizontal" space="$4">
-        <Avatar name="Dan" size="md" :src="dogImage">
-          <AvatarBadge :attributes="{ backgroundColor: '$green400' }" />
-        </Avatar>
-        <Avatar name="Dog" size="md" :src="dogImage">
-          <AvatarBadge size="2em" :attributes="{ backgroundColor: 'transparent' }">
-            <Box
-              as="img"
-              width="100%"
-              height="100%"
-              borderRadius="$full"
+      <div :class="themeClass">
+        <Stack direction="horizontal" space="$4">
+          <Avatar name="Dan" size="md" :src="dogImage">
+            <AvatarBadge
               :attributes="{
-                alt: 'Dog small',
-                src: dogImage,
+                backgroundColor: '$green400',
               }"
             />
-          </AvatarBadge>
-        </Avatar>
-      </Stack>
+          </Avatar>
+          <Avatar name="Dog" size="md" :src="dogImage">
+            <AvatarBadge
+              size="2em"
+              :attributes="{
+                backgroundColor: 'transparent',
+              }"
+            >
+              <Box
+                as="img"
+                width="100%"
+                height="100%"
+                borderRadius="$full"
+                :attributes="{
+                  alt: 'Dog small',
+                  src: dogImage,
+                }"
+              />
+            </AvatarBadge>
+          </Avatar>
+        </Stack>
+      </div>
     `,
   }),
 };
+
+// Add more stories as needed...