Merge pull request #796 from gluestack/release/@gluestack-ui/select@0…

….1.13-@gluestack-ui/actionsheet@0.2.12 Release/@gluestack UI/select@0.1.13 @gluestack UI/actionsheet@0.2.12
gluestack · Jul 24, 2023 · 0630611 · 0630611
2 parents dc3c57b + d516d55
commit 0630611
Show file tree

Hide file tree

Showing 50 changed files with 282 additions and 228 deletions.
diff --git a/example/next-project/package.json b/example/next-project/package.json
@@ -21,7 +21,7 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.1",
     "typescript": "5.0.4",
-    "@gluestack-style/react": "latest",
+    "@gluestack-style/react": "^0.1.33",
     "@gluestack-ui/provider": "latest",
     "@gluestack-style/animation-plugin": "latest",
     "@gluestack/ui-next-adapter": "latest",

diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
@@ -63,7 +63,7 @@ const getStories = () => {
     require('../src/components/Forms/FormControl/FormControl.stories.tsx'),
     require('../src/components/Typography/Heading/Heading.stories.tsx'),
     require('../src/components/Layout/HStack/HStack.stories.tsx'),
-    require('../src/components/MediaAndIcons/Icon/Icons.stories.tsx'),
+    // require('../src/components/MediaAndIcons/Icon/Icons.stories.tsx'),
     require('../src/components/Forms/Input/Input.stories.tsx'),
     require('../src/components/Forms/Link/Link.stories.tsx'),
     require('../src/components/Overlay/Menu/Menu.stories.tsx'),

diff --git a/example/storybook/__tests__/__snapshots__/Box.test.js.snap b/example/storybook/__tests__/__snapshots__/Box.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div

diff --git a/example/storybook/__tests__/__snapshots__/Button.test.js.snap b/example/storybook/__tests__/__snapshots__/Button.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Button component action negative 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -38,7 +38,7 @@ exports[`Button component action negative 1`] = `
 exports[`Button component action positive 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -73,7 +73,7 @@ exports[`Button component action positive 1`] = `
 exports[`Button component action primary 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -108,7 +108,7 @@ exports[`Button component action primary 1`] = `
 exports[`Button component action secondary 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -143,7 +143,7 @@ exports[`Button component action secondary 1`] = `
 exports[`Button component size lg 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -178,7 +178,7 @@ exports[`Button component size lg 1`] = `
 exports[`Button component size md 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -213,7 +213,7 @@ exports[`Button component size md 1`] = `
 exports[`Button component size sm 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -248,7 +248,7 @@ exports[`Button component size sm 1`] = `
 exports[`Button component size xl 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -283,7 +283,7 @@ exports[`Button component size xl 1`] = `
 exports[`Button component size xs 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -318,7 +318,7 @@ exports[`Button component size xs 1`] = `
 exports[`Button component variant link 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -353,7 +353,7 @@ exports[`Button component variant link 1`] = `
 exports[`Button component variant outline 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -388,7 +388,7 @@ exports[`Button component variant outline 1`] = `
 exports[`Button component variant solid 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div

diff --git a/example/storybook/__tests__/__snapshots__/Checkbox.test.js.snap b/example/storybook/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox component isDisabled 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -180,7 +180,7 @@ exports[`Checkbox component isDisabled 1`] = `
 exports[`Checkbox component isInvalid 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -356,7 +356,7 @@ exports[`Checkbox component isInvalid 1`] = `
 exports[`Checkbox component isReadOnly 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -534,7 +534,7 @@ exports[`Checkbox component isReadOnly 1`] = `
 exports[`Checkbox component size lg 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -710,7 +710,7 @@ exports[`Checkbox component size lg 1`] = `
 exports[`Checkbox component size md 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div
@@ -886,7 +886,7 @@ exports[`Checkbox component size md 1`] = `
 exports[`Checkbox component size sm 1`] = `
 <div
   className="css-view-175oi2r"
-  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k f60j3e-1q64x7k"
   dir={null}
 >
   <div

diff --git a/example/storybook/junit.xml b/example/storybook/junit.xml
@@ -1,47 +1,47 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<testsuites name="jest tests" tests="19" failures="0" errors="0" time="13.454">
-  <testsuite name="undefined" errors="0" failures="0" skipped="0" timestamp="2023-07-20T14:46:22" time="9.921" tests="1">
-    <testcase classname=" renders correctly" name=" renders correctly" time="0.037">
+<testsuites name="jest tests" tests="19" failures="0" errors="0" time="7.566">
+  <testsuite name="undefined" errors="0" failures="0" skipped="0" timestamp="2023-07-24T13:14:09" time="5.36" tests="1">
+    <testcase classname=" renders correctly" name=" renders correctly" time="0.047">
     </testcase>
   </testsuite>
-  <testsuite name="Checkbox component" errors="0" failures="0" skipped="0" timestamp="2023-07-20T14:46:22" time="10.032" tests="6">
-    <testcase classname="Checkbox component size sm" name="Checkbox component size sm" time="0.063">
+  <testsuite name="Checkbox component" errors="0" failures="0" skipped="0" timestamp="2023-07-24T13:14:09" time="5.5" tests="6">
+    <testcase classname="Checkbox component size sm" name="Checkbox component size sm" time="0.083">
     </testcase>
-    <testcase classname="Checkbox component size md" name="Checkbox component size md" time="0.019">
+    <testcase classname="Checkbox component size md" name="Checkbox component size md" time="0.022">
     </testcase>
-    <testcase classname="Checkbox component size lg" name="Checkbox component size lg" time="0.017">
+    <testcase classname="Checkbox component size lg" name="Checkbox component size lg" time="0.023">
     </testcase>
-    <testcase classname="Checkbox component isInvalid" name="Checkbox component isInvalid" time="0.017">
+    <testcase classname="Checkbox component isInvalid" name="Checkbox component isInvalid" time="0.02">
     </testcase>
-    <testcase classname="Checkbox component isDisabled" name="Checkbox component isDisabled" time="0.016">
+    <testcase classname="Checkbox component isDisabled" name="Checkbox component isDisabled" time="0.019">
     </testcase>
-    <testcase classname="Checkbox component isReadOnly" name="Checkbox component isReadOnly" time="0.016">
+    <testcase classname="Checkbox component isReadOnly" name="Checkbox component isReadOnly" time="0.02">
     </testcase>
   </testsuite>
-  <testsuite name="Button component" errors="0" failures="0" skipped="0" timestamp="2023-07-20T14:46:22" time="12.473" tests="12">
-    <testcase classname="Button component action primary" name="Button component action primary" time="0.074">
+  <testsuite name="Button component" errors="0" failures="0" skipped="0" timestamp="2023-07-24T13:14:09" time="6.641" tests="12">
+    <testcase classname="Button component action primary" name="Button component action primary" time="0.057">
     </testcase>
-    <testcase classname="Button component action secondary" name="Button component action secondary" time="0.025">
+    <testcase classname="Button component action secondary" name="Button component action secondary" time="0.007">
     </testcase>
-    <testcase classname="Button component action positive" name="Button component action positive" time="0.016">
+    <testcase classname="Button component action positive" name="Button component action positive" time="0.008">
     </testcase>
-    <testcase classname="Button component action negative" name="Button component action negative" time="0.019">
+    <testcase classname="Button component action negative" name="Button component action negative" time="0.005">
     </testcase>
-    <testcase classname="Button component variant link" name="Button component variant link" time="0.017">
+    <testcase classname="Button component variant link" name="Button component variant link" time="0.004">
     </testcase>
-    <testcase classname="Button component variant outline" name="Button component variant outline" time="0.016">
+    <testcase classname="Button component variant outline" name="Button component variant outline" time="0.006">
     </testcase>
-    <testcase classname="Button component variant solid" name="Button component variant solid" time="0.015">
+    <testcase classname="Button component variant solid" name="Button component variant solid" time="0.004">
     </testcase>
-    <testcase classname="Button component size xs" name="Button component size xs" time="0.009">
+    <testcase classname="Button component size xs" name="Button component size xs" time="0.004">
     </testcase>
-    <testcase classname="Button component size sm" name="Button component size sm" time="0.009">
+    <testcase classname="Button component size sm" name="Button component size sm" time="0.006">
     </testcase>
-    <testcase classname="Button component size md" name="Button component size md" time="0.01">
+    <testcase classname="Button component size md" name="Button component size md" time="0.005">
     </testcase>
-    <testcase classname="Button component size lg" name="Button component size lg" time="0.005">
+    <testcase classname="Button component size lg" name="Button component size lg" time="0.004">
     </testcase>
-    <testcase classname="Button component size xl" name="Button component size xl" time="0.005">
+    <testcase classname="Button component size xl" name="Button component size xl" time="0.006">
     </testcase>
   </testsuite>
 </testsuites>
diff --git a/example/storybook/package.json b/example/storybook/package.json
@@ -24,7 +24,7 @@
     "@expo/html-elements": "^0.4.2",
     "@gluestack-style/animation-plugin": "latest",
     "@gluestack-style/react": "0.1.34-alpha.1",
-    "@gluestack-ui/actionsheet": "^0.2.11",
+    "@gluestack-ui/actionsheet": "^0.2.12",
     "@gluestack-ui/alert-dialog": "^0.1.11",
     "@gluestack-ui/pressable": "^0.1.9",
     "@gluestack/design-system": "^0.4.28",

diff --git a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
@@ -32,7 +32,7 @@ function ActionsheetStory({
         <Actionsheet.DragIndicatorWrapper>
           <Actionsheet.DragIndicator />
         </Actionsheet.DragIndicatorWrapper>
-        <Actionsheet.Item onPress={handleClose}>
+        <Actionsheet.Item onPress={handleClose} isDisabled>
           <Actionsheet.ItemText>Delete</Actionsheet.ItemText>
         </Actionsheet.Item>
         <Actionsheet.Item onPress={handleClose}>

diff --git a/example/storybook/src/components/Forms/Select/Select.tsx b/example/storybook/src/components/Forms/Select/Select.tsx
@@ -4,9 +4,9 @@ import { Center, ChevronDownIcon, Select, Icon } from '../../../ui-components';
 
 const SelectStory = ({ size = 'md', variant = 'outline', ...props }: any) => {
   return (
-    <Select {...props} placeholder="Select option">
+    <Select {...props}>
       <Select.Trigger size={size} variant={variant}>
-        <Select.Input />
+        <Select.Input placeholder="Select option" />
         <Select.Icon
           mr={variant === 'underlined' ? 0 : '$3'}
           ml={variant === 'underlined' ? '$3' : 0}

diff --git a/example/storybook/src/components/Forms/Select/index.stories.mdx b/example/storybook/src/components/Forms/Select/index.stories.mdx
@@ -37,18 +37,18 @@ Following is the default implementation of the **Select** component without any
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
-    showArgsController={false}
+    showArgsController={true}
     metaData={{
       code: `
-        <Select placeholder="Select option" >
-          <Select.Trigger>
-            <Select.Input/>
+        <Select>
+          <Select.Trigger {...props}>
+            <Select.Input placeholder="Select option" />
             <Select.Icon mr="$3">
               <Icon as={ChevronDownIcon} />
             </Select.Icon>
           </Select.Trigger>
           <Select.Portal>
-            <Select.Backdrop />
+            <Select.Backdrop/>
             <Select.Content>
               <Select.DragIndicatorWrapper>
                 <Select.DragIndicator />
@@ -81,7 +81,18 @@ Following is the default implementation of the **Select** component without any
         Icon,
         ChevronDownIcon,
       },
-      argsType: {},
+      argsType: {
+        variant: {
+          control: 'select',
+          options: ['rounded', 'outline', 'underlined'],
+          default: 'outline',
+        },
+        size: {
+          control: 'select',
+          options: ['sm', 'md', 'lg', 'xl'],
+          default: 'md',
+        },
+      },
     }}
   />
 </AppProvider>
@@ -129,7 +140,7 @@ export default () => (
         <Select.DragIndicatorWrapper>
           <Select.DragIndicator />
         </Select.DragIndicatorWrapper>
-        <Select.Item label="UX Research" value="ux" />
+        <Select.Item />
       </Select.Content>
     </Select.Portal>
   </Select>
@@ -263,22 +274,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             <Table.TText>{`When true, the select displays a focus state.`}</Table.TText>
           </Table.TD>
         </Table.TR>
-        <Table.TR>
-          <Table.TD>
-            <Table.TText>
-              <InlineCode>placeholder</InlineCode>
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>string</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>-</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>{`It provides the placeholder.`}</Table.TText>
-          </Table.TD>
-        </Table.TR>
         <Table.TR>
           <Table.TD>
             <Table.TText>
@@ -525,7 +520,7 @@ The following are the lists of all the libraries and packages the component reli
 - `@gluestack-ui/utils`
 - `@react-native-aria/focus`
 - `@gluestack-ui/hooks`
-- `@gluestack-ui/form-control
+- `@gluestack-ui/form-control`
 
 ### Examples
 
@@ -547,9 +542,9 @@ The Select component with FormControl example demonstrates how to manage its sta
               Choose your favorite color
             </FormControl.Label.Text>
           </FormControl.Label>
-          <Select placeholder="Select option" >
+          <Select>
             <Select.Trigger>
-              <Select.Input/>
+              <Select.Input placeholder="Select option"/>
               <Select.Icon mr="$3">
                 <Icon as={ChevronDownIcon} />
               </Select.Icon>