Merge pull request #2315 from gluestack/release/@gluestack-ui/button@1.0.7

release: @gluestack-ui/button version 1.0.7

Author: Viraj-10

example/storybook-nativewind/.storybook/preview.js

@@ -89,7 +89,7 @@ export const parameters = {
         'Hooks',
         ['useBreakPointValue', 'useMediaQuery'],
         'Apps',
-        ['Dashboard App', 'Starter Kit', 'Storybook App'],
+        ['Dashboard App', 'Todo App', 'Starter Kit', 'Storybook App'],
         'Guides',
         [
           'Recipes',

example/storybook-nativewind/package.json

@@ -32,7 +32,7 @@
     "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.39",
+    "@gluestack-ui/themed": "^1.1.40",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

example/storybook-nativewind/public/images/gpay.svg

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Expand = () => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="black" />
+      <path
+        d="M27.235 21.234H12.765V24.728L8 19.964L12.765 15.199V18.693H27.235V15.199L32 19.964L27.235 24.729V21.234Z"
+        fill="#FAFAFA"
+      />
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#525252" />
+    </svg>
+  );
+};

example/storybook-nativewind/public/images/master_card.svg

@@ -0,0 +1,19 @@
+---
+title: Todo App | gluestack-ui
+description: A todo app created using all the components of gluestack-ui v2
+toc: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Responsiveness from '../../extra-components/nativewind/Responsive';
+import { todoapp } from '../../extra-components/nativewind/appConfig';
+
+<Meta title="with-nativewind/Apps/Todo App" />
+
+# Todo App
+
+This [Todo App](https://gluestack-ui-todo-example-app.vercel.app/) is built using `gluestack-ui v2`.
+
+<Responsiveness {...todoapp} showMenuItems={true} />
+
+GitHub link for this [Todo App](https://github.com/gluestack/gluestack-ui-todo-example-app).

example/storybook-nativewind/public/images/visa.svg

@@ -56,7 +56,7 @@ This is an illustration of **Accordion** component.
     }}
     metaData={{
       code: `
-      <Accordion {...props} className="m-5 w-[90%]">
+      <Accordion {...props} className="m-5 w-[90%] border border-outline-200">
         <AccordionItem value="a">
           <AccordionHeader>
             <AccordionTrigger>

example/storybook-nativewind/src/apps/todo-app/Expand.tsx

@@ -540,7 +540,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
           const handleClose = () => setShowActionsheet(false);
             return (
               <>
-                <Button onPress={handleClose}>
+                <Button onPress={() => setShowActionsheet(true)}>
                   <ButtonText>Open</ButtonText>
                 </Button>
                 <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
@@ -642,7 +642,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
           const handleClose = () => setShowActionsheet(false);
             return (
               <>
-                <Button onPress={handleClose}>
+                <Button onPress={() => setShowActionsheet(true)}>
                     <ButtonText>Open</ButtonText>
                 </Button>
                 <Actionsheet
@@ -754,7 +754,7 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
           const handleClose = () => setShowActionsheet(false);
             return (
               <>
-                <Button onPress={handleClose}>
+                <Button onPress={() => setShowActionsheet(true)}>
                   <ButtonText>Open</ButtonText>
                 </Button>
                 <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -843,7 +843,7 @@ The Actionsheet with Virtualized List includes a virtualized list for better per
     );
     return (
     <>
-        <Button onPress={handleClose}>
+        <Button onPress={() => setShowActionsheet(true)}>
           <ButtonText>Open</ButtonText>
         </Button>
         <Actionsheet isOpen={showActionsheet} onClose={handleClose}  snapPoints={[50]}>
@@ -924,7 +924,7 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that
     );
     return (
     <>
-        <Button onPress={handleClose}>
+        <Button onPress={() => setShowActionsheet(true)}>
           <ButtonText>Open</ButtonText>
         </Button>
         <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -985,7 +985,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
     ];
     return (
     <>
-        <Button onPress={handleClose}>
+        <Button onPress={() => setShowActionsheet(true)}>
           <ButtonText>Open</ButtonText>
         </Button>
         <Actionsheet isOpen={showActionsheet} onClose={handleClose} snapPoints={[35]}>
@@ -1050,7 +1050,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
           const handleClose = () => setShowActionsheet(false);
           return (
             <>
-              <Button onPress={handleClose}>
+              <Button onPress={() => setShowActionsheet(true)}>
                 <ButtonText>Open</ButtonText>
               </Button>
               <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -1141,7 +1141,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
           const handleClose = () => setShowActionsheet(false);
           return (
             <>
-              <Button onPress={handleClose}>
+              <Button onPress={() => setShowActionsheet(true)}>
                 <ButtonText>Open</ButtonText>
               </Button>
               <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -1248,4 +1248,4 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
       argsType: {},
     }}
   />
-</Wrapper> */}
+</Wrapper> */}

example/storybook-nativewind/src/apps/todo-app/index.stories.mdx

@@ -503,11 +503,11 @@ The Examples section provides visual representations of the different variants o
               </Button>
               <AlertDialog isOpen={showAlertDialog} onClose={handleClose}>
                 <AlertDialogBackdrop />
-                <AlertDialogContent className="p-0 max-w-[590px] sm:flex-row border-blue-800 rounded-xl">
-                  <Box className="bg-blue-800 min-w-[123px] items-center justify-center py-4 sm:py-0">
+                <AlertDialogContent className="p-0 max-w-[590px] sm:flex-row border-primary-800 rounded-xl">
+                  <Box className="bg-primary-600 min-w-[123px] items-center justify-center py-4 sm:py-0">
                     <Image
                       source={{
-                        uri: 'https://s3-alpha-sig.figma.com/img/e102/c0d3/7d9780cf2bbdcce3142cbe98fb9c6d6e?Expires=1721001600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=F1KwdVpm2K7MrffLuDxQzJlkfPWe6E3HADIeukZKEtUJmkMVQcRlmRrY~Q5M0U1o5MYNLA0WbQYLnMar6649gglOHnA1yksN8RbLuD3rg5m3m9sPpRmaxmW7eSKnVVCpyMJ4JeJ2EcjChTWRpaZjVDtJ9yUf5y~Ki-2rgFu1ORK3wgV-endPreugSGcknsvdBSvqT5IW7VwtybYPelxc0lG2vp5QiCIZ1Qiwls7atKY5dZC12E2ToBUEhV1l5N657MDWyFY3CsyJ2ZcnJFkSCldP6Ab4fUAHy43G2TAm4dKAsLbQAEY95m5iMmpTVjJq~Z4R6pvZjbF4TYUmguYaTA__',
+                        uri: 'https://s3-alpha-sig.figma.com/img/e102/c0d3/7d9780cf2bbdcce3142cbe98fb9c6d6e?Expires=1722211200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dcv50VxIIiZhgk7eFIXeeXuIB8IvftOJ6AmQNB0aDmgTXSH3Ph1vQHftectHl91sTPpuGXPWh~B0yVfarBPjq8E-m1o4XqGE4E5EMoSraKMLpWbmkbqeHrI43wt1qQPZIy91~VvJnh~j4Srb8SIpVyKUfJ7rGWfn~umxyBBH7C-04kXgt7RYswh61lswlKugYb8BmO7VYijmjcqTHvnnajNGdjCJM9GH5AaZVGjnQaJfY6whJpjbvpu7qjWQwh2NUh6OlBQz74kUVEg8OeuUcwAA5dd6HIY0plf7o3q7Cq5x35J6oUN30HY1TZ9l2b9fg14~EUkA8apLV1XM3Lad-Q__',
                       }}
                       alt="image"
                       className="h-[95px] w-[95px]"