Merge pull request #115 from gluestack/fix/windows-os

react-19/next15 template fixes

Author: akash3gtm

apps/templates/next-app-router-with-nativewind/app/registry.tsx

@@ -2,7 +2,7 @@
 import React, { useRef, useState } from "react";
 import { useServerInsertedHTML } from "next/navigation";
 import { StyleRegistry, createStyleRegistry } from "styled-jsx";
-// @ts-ignore
+// @ts-expect-error : AppRegistry is defined in react-native-web but its type is not defined
 import { AppRegistry } from "react-native-web";
 import { flush } from "@gluestack-ui/nativewind-utils/flush";
 

apps/templates/next-app-router-with-nativewind/components/ui/accordion/index.tsx

@@ -1,91 +1,91 @@
-'use client';
-import React from 'react';
-import { createAccordion } from '@gluestack-ui/accordion';
-import { View, Pressable, Text, Platform, TextProps } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+"use client";
+import React from "react";
+import { createAccordion } from "@gluestack-ui/accordion";
+import { View, Pressable, Text, Platform, TextProps } from "react-native";
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
 import {
   withStyleContext,
   useStyleContext,
-} from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { H3 } from '@expo/html-elements';
-import { cssInterop } from 'nativewind';
-import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+} from "@gluestack-ui/nativewind-utils/withStyleContext";
+import { H3 } from "@expo/html-elements";
+import { cssInterop } from "nativewind";
+import { PrimitiveIcon, UIIcon } from "@gluestack-ui/icon";
 
-const SCOPE = 'ACCORDION';
+const SCOPE = "ACCORDION";
 /** Styles */
 
 const accordionStyle = tva({
-  base: 'w-full',
+  base: "w-full",
   variants: {
     variant: {
-      filled: 'bg-white shadow-hard-2',
-      unfilled: '',
+      filled: "bg-white shadow-hard-2",
+      unfilled: "",
     },
     size: {
-      sm: '',
-      md: '',
-      lg: '',
+      sm: "",
+      md: "",
+      lg: "",
     },
   },
 });
 
 const accordionItemStyle = tva({
-  base: '',
+  base: "",
   parentVariants: {
     variant: {
-      filled: 'bg-background-0',
-      unfilled: 'bg-transparent',
+      filled: "bg-background-0",
+      unfilled: "bg-transparent",
     },
   },
 });
 const accordionTitleTextStyle = tva({
-  base: 'text-typography-900 font-bold flex-1 text-left',
+  base: "text-typography-900 font-bold flex-1 text-left",
   parentVariants: {
     size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
     },
   },
 });
 const accordionIconStyle = tva({
-  base: 'text-typography-900 fill-none',
+  base: "text-typography-900 fill-none",
   parentVariants: {
     size: {
-      '2xs': 'h-3 w-3',
-      'xs': 'h-3.5 w-3.5',
-      'sm': 'h-4 w-4',
-      'md': 'h-[18px] w-[18px]',
-      'lg': 'h-5 w-5',
-      'xl': 'h-6 w-6',
+      "2xs": "h-3 w-3",
+      xs: "h-3.5 w-3.5",
+      sm: "h-4 w-4",
+      md: "h-[18px] w-[18px]",
+      lg: "h-5 w-5",
+      xl: "h-6 w-6",
     },
   },
 });
 const accordionContentTextStyle = tva({
-  base: 'text-typography-700 font-normal',
+  base: "text-typography-700 font-normal",
   parentVariants: {
     size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
     },
   },
 });
 const accordionHeaderStyle = tva({
-  base: 'mx-0 my-0',
+  base: "mx-0 my-0",
 });
 const accordionContentStyle = tva({
-  base: 'pt-1 pb-3 px-4',
+  base: "pt-1 pb-3 px-4",
 });
 const accordionTriggerStyle = tva({
-  base: 'w-full flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50 py-3 px-4',
+  base: "w-full flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50 py-3 px-4",
 });
 
 const Root = withStyleContext(View, SCOPE);
 
 const Header = (
-  Platform.OS === 'web' ? H3 : View
+  Platform.OS === "web" ? H3 : View
 ) as React.ComponentType<TextProps>;
 
 /** Creator */
@@ -102,20 +102,20 @@ const UIAccordion = createAccordion({
 
 cssInterop(PrimitiveIcon, {
   className: {
-    target: 'style',
+    target: "style",
     nativeStyleToProp: {
       height: true,
       width: true,
       fill: true,
-      color: 'classNameColor',
+      color: "classNameColor",
       stroke: true,
     },
   },
 });
 
 cssInterop(H3, {
   className: {
-    target: 'style',
+    target: "style",
   },
 });
 
@@ -162,9 +162,9 @@ type IAccordionTitleTextProps = React.ComponentPropsWithoutRef<
 /** Components */
 
 const Accordion = React.forwardRef<
-  React.ElementRef<typeof UIAccordion>,
+  React.ComponentRef<typeof UIAccordion>,
   IAccordionProps
->(({ className, variant = 'filled', size = 'md', ...props }, ref) => {
+>(({ className, variant = "filled", size = "md", ...props }, ref) => {
   return (
     <UIAccordion
       ref={ref}
@@ -176,7 +176,7 @@ const Accordion = React.forwardRef<
 });
 
 const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof UIAccordion.Item>,
+  React.ComponentRef<typeof UIAccordion.Item>,
   IAccordionItemProps
 >(({ className, ...props }, ref) => {
   const { variant } = useStyleContext(SCOPE);
@@ -193,9 +193,9 @@ const AccordionItem = React.forwardRef<
 });
 
 const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof UIAccordion.Content>,
+  React.ComponentRef<typeof UIAccordion.Content>,
   IAccordionContentProps
->(({ className, ...props }, ref) => {
+>(function AccordionContent({ className, ...props }, ref) {
   return (
     <UIAccordion.Content
       ref={ref}
@@ -208,9 +208,9 @@ const AccordionContent = React.forwardRef<
 });
 
 const AccordionContentText = React.forwardRef<
-  React.ElementRef<typeof UIAccordion.ContentText>,
+  React.ComponentRef<typeof UIAccordion.ContentText>,
   IAccordionContentTextProps
->(({ className, ...props }, ref) => {
+>(function AccordionContentText({ className, ...props }, ref) {
   const { size } = useStyleContext(SCOPE);
   return (
     <UIAccordion.ContentText
@@ -225,12 +225,12 @@ const AccordionContentText = React.forwardRef<
 });
 
 const AccordionIcon = React.forwardRef<
-  React.ElementRef<typeof UIAccordion.Icon>,
+  React.ComponentRef<typeof UIAccordion.Icon>,
   IAccordionIconProps
->(({ size, className, ...props }, ref) => {
+>(function AccordionIcon({ size, className, ...props }, ref) {
   const { size: parentSize } = useStyleContext(SCOPE);
 
-  if (typeof size === 'number') {
+  if (typeof size === "number") {
     return (
       <UIAccordion.Icon
         ref={ref}
@@ -265,9 +265,9 @@ const AccordionIcon = React.forwardRef<
 });
 
 const AccordionHeader = React.forwardRef<
-  React.ElementRef<typeof UIAccordion.Header>,
+  React.ComponentRef<typeof UIAccordion.Header>,
   IAccordionHeaderProps
->(({ className, ...props }, ref) => {
+>(function AccordionHeader({ className, ...props }, ref) {
   return (
     <UIAccordion.Header
       ref={ref}
@@ -280,9 +280,9 @@ const AccordionHeader = React.forwardRef<
 });
 
 const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof UIAccordion.Trigger>,
+  React.ComponentRef<typeof UIAccordion.Trigger>,
   IAccordionTriggerProps
->(({ className, ...props }, ref) => {
+>(function AccordionTrigger({ className, ...props }, ref) {
   return (
     <UIAccordion.Trigger
       ref={ref}
@@ -294,9 +294,9 @@ const AccordionTrigger = React.forwardRef<
   );
 });
 const AccordionTitleText = React.forwardRef<
-  React.ElementRef<typeof UIAccordion.TitleText>,
+  React.ComponentRef<typeof UIAccordion.TitleText>,
   IAccordionTitleTextProps
->(({ className, ...props }, ref) => {
+>(function AccordionTitleText({ className, ...props }, ref) {
   const { size } = useStyleContext(SCOPE);
   return (
     <UIAccordion.TitleText
@@ -310,14 +310,14 @@ const AccordionTitleText = React.forwardRef<
   );
 });
 
-Accordion.displayName = 'Accordion';
-AccordionItem.displayName = 'AccordionItem';
-AccordionHeader.displayName = 'AccordionHeader';
-AccordionTrigger.displayName = 'AccordionTrigger';
-AccordionTitleText.displayName = 'AccordionTitleText';
-AccordionContentText.displayName = 'AccordionContentText';
-AccordionIcon.displayName = 'AccordionIcon';
-AccordionContent.displayName = 'AccordionContent';
+Accordion.displayName = "Accordion";
+AccordionItem.displayName = "AccordionItem";
+AccordionHeader.displayName = "AccordionHeader";
+AccordionTrigger.displayName = "AccordionTrigger";
+AccordionTitleText.displayName = "AccordionTitleText";
+AccordionContentText.displayName = "AccordionContentText";
+AccordionIcon.displayName = "AccordionIcon";
+AccordionContent.displayName = "AccordionContent";
 
 export {
   Accordion,