chore: updated gluestack-ui storybook examples

baseProject/config/storybook/gluestackStories/Feedback/Progress/Progress.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta } from '@storybook/react';
+import Progress from './Progress';
+
+const ProgressMeta: Meta<typeof Progress> = {
+  title: 'FEEDBACK/Progress',
+  component: Progress,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete.`,
+  },
+  argTypes: {
+    value: {
+      type: 'number',
+      defaultValue: '50',
+    },
+  },
+  args: {
+    value: 48,
+  },
+};
+
+export default ProgressMeta;
+
+export { Progress };

baseProject/config/storybook/gluestackStories/Feedback/Progress/Progress.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Progress, ProgressFilledTrack, VStack, Text, Heading, Center, HStack } from '@gluestack-ui/themed';
+
+const ProgressBasic = ({ value = 50, ...props }: any) => {
+  return (
+    <Center>
+      <HStack justifyContent="space-between" width={268} my="$1">
+        <Text size="sm">Progress</Text>
+        <Text size="sm">Hint</Text>
+      </HStack>
+      <Progress
+        sx=\{{
+          w: 268,
+        }}
+        value={value}
+        {...props}
+      >
+        <ProgressFilledTrack>
+          <Text color="white" fontWeight="bold" alignSelf="center" mt="$1">
+            {value}%
+          </Text>
+        </ProgressFilledTrack>
+      </Progress>
+    </Center>
+  );
+};
+
+ProgressBasic.description =
+  'This is a basic Progress component example. Progress components are used to show the progress of a task.';
+
+export default ProgressBasic;
+
+export { Progress, ProgressFilledTrack, VStack, Text, Heading };

baseProject/config/storybook/gluestackStories/Feedback/Spinner/Spinner.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/react';
+import Spinner from './Spinner';
+
+const SpinnerMeta: Meta<typeof Spinner> = {
+  title: 'FEEDBACK/Spinner',
+  component: Spinner,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected.`,
+  },
+};
+
+export default SpinnerMeta;
+
+export { Spinner };

baseProject/config/storybook/gluestackStories/Feedback/Spinner/Spinner.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Spinner, HStack, Text, VStack } from '@gluestack-ui/themed';
+
+const SpinnerBasic = ({ ...props }) => <Spinner size={24} {...props} />;
+
+SpinnerBasic.description =
+  'This is a basic Spinner component example. Spinners are used to show a loading state of a component or page.';
+
+export default SpinnerBasic;
+
+export { Spinner, HStack, Text, VStack };

baseProject/config/storybook/gluestackStories/Feedback/Toast/Basic.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button, ButtonText, Toast, ToastTitle, useToast } from '@gluestack-ui/themed';
+
+const ToastPlacement = ({ placement = 'top', ...props }: any) => {
+  const toast = useToast();
+  return (
+    <Button
+      onPress={() => {
+        toast.show({
+          placement: placement,
+          render: ({ id }) => {
+            return (
+              <Toast nativeID={`toast-${id}`} {...props}>
+                <ToastTitle>Hello World Toast {id}</ToastTitle>
+              </Toast>
+            );
+          },
+        });
+      }}
+    >
+      <ButtonText>Press Me</ButtonText>
+    </Button>
+  );
+};
+
+ToastPlacement.description =
+  'This is a basic Toast component example. Toasts are used to communicate a state that affects a system, feature or page';
+
+export default ToastPlacement;

baseProject/config/storybook/gluestackStories/Feedback/Toast/Toast.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta } from '@storybook/react';
+import Toast from './Toast';
+
+const ToastMeta: Meta<typeof Toast> = {
+  title: 'FEEDBACK/Toast',
+  component: Toast,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.`,
+  },
+  argTypes: {
+    placement: {
+      control: 'select',
+      figmaIgnore: true,
+      options: ['top', 'bottom'],
+    },
+    action: {
+      control: 'select',
+      options: ['error', 'warning', 'success', 'info'],
+    },
+  },
+  args: {
+    placement: 'top',
+    action: 'info',
+  },
+};
+
+export default ToastMeta;
+
+export { Toast };