🚧 (WIP) feat: collapsible-component 🚧

example/storybook/src/ui/components/DataDisplay/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,18 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import Collapsible from './Collapsible';
+
+const CollapsibleMeta: ComponentMeta<typeof Collapsible> = {
+  title: 'stories/DATA DISPLAY/Collapsible',
+  component: Collapsible,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: '',
+  },
+  argTypes: {},
+  args: {},
+};
+
+export default CollapsibleMeta;
+
+export { Collapsible };

example/storybook/src/ui/components/DataDisplay/Collapsible/Collapsible.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+
+import { Pressable, Text, View } from '@gluestack-ui/themed';
+import { useToggleState } from 'react-stately';
+import { createContext } from 'react';
+import { styled } from '@gluestack-style/react';
+const StyledView = styled(
+  View,
+  {},
+  {
+    componentName: 'StyledView',
+  }
+);
+const CollapsibleContext = createContext<any>({
+  isExpanded: false,
+  setIsExpanded: () => {},
+});
+
+const Root = (props: any) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const contextValue = React.useMemo(() => {
+    return {
+      isExpanded,
+      setIsExpanded,
+    };
+  }, [isExpanded, setIsExpanded]);
+
+  return (
+    <CollapsibleContext.Provider value={contextValue}>
+      <StyledView
+        states={{
+          checked: isExpanded,
+        }}
+        {...props}
+      />
+    </CollapsibleContext.Provider>
+  );
+};
+
+const Trigger = ({ children, defaultValue, value, ...props }: any) => {
+  const { isExpanded, setIsExpanded } = React.useContext(CollapsibleContext);
+  const state = useToggleState({
+    defaultSelected: !(defaultValue === null || defaultValue === undefined)
+      ? defaultValue
+      : !(value === null || value === undefined)
+      ? value
+      : false,
+  });
+
+  return (
+    <Pressable
+      states={{
+        // @ts-ignore
+        expanded: isExpanded,
+      }}
+      {...props}
+      onPress={() => {
+        setIsExpanded(!isExpanded);
+        state.toggle();
+      }}
+    >
+      {typeof children === 'function'
+        ? children({
+            expanded: isExpanded,
+          })
+        : children}
+    </Pressable>
+  );
+};
+const TriggerText = (props: any) => {
+  return <Text {...props} />;
+};
+
+const Content = ({ forceMount = false, ...props }: any) => {
+  const { isExpanded } = React.useContext(CollapsibleContext);
+
+  if (!forceMount && isExpanded) {
+    return null;
+  }
+
+  return <View {...props} />;
+};
+
+const ContentText = (props: any) => {
+  return <Text {...props} />;
+};
+const CollapsibleBasic = ({}: any) => {
+  return (
+    <Root
+      sx={{
+        'maxHeight': '20vh',
+        ':checked': {
+          maxHeight: '80vh',
+        },
+        'overflow': 'scroll',
+        'width': 350,
+        'bg': '$backgroundDark900',
+        'position': 'relative',
+      }}
+    >
+      <Content
+        forceMount
+        sx={{
+          height: '100vh',
+        }}
+      >
+        <ContentText sx={{ color: '$white' }}>
+          {`
+          <TempProvider config={config}>
+            <Box
+              sx={{
+                _dark: {
+                  bg: '$backgroundDark950',
+                },
+              }}
+            >
+              <Center>{children}</Center>
+            </Box>
+          </TempProvider>
+          `}
+        </ContentText>
+      </Content>
+      <Trigger
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: '$backgroundDark900',
+          opacity: 0.7,
+        }}
+      >
+        {
+          // @ts-ignore
+          ({ expanded }) => {
+            return (
+              <TriggerText
+                sx={{
+                  color: '$textLight100',
+                  fontSize: 20,
+                  fontWeight: 'bold',
+                  py: '$2',
+                  px: '$3',
+                }}
+              >
+                {expanded ? 'Expand' : 'Collapse'}
+              </TriggerText>
+            );
+          }
+        }
+      </Trigger>
+    </Root>
+  );
+};
+
+CollapsibleBasic.description =
+  'This is a basic  component example. The  component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.';
+
+export default CollapsibleBasic;

packages/react-native-aria/toggle/src/useToggle.web.ts

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import { AriaToggleProps } from "@react-types/checkbox";
-import { filterDOMProps, mergeProps } from "@react-aria/utils";
-import { InputHTMLAttributes, RefObject } from "react";
-import { ToggleState } from "@react-stately/toggle";
-import { useFocusable } from "@react-aria/focus";
-import { usePress } from "@react-native-aria/interactions";
+import { AriaToggleProps } from '@react-types/checkbox';
+import { filterDOMProps, mergeProps } from '@react-aria/utils';
+import { InputHTMLAttributes, RefObject } from 'react';
+import { ToggleState } from '@react-stately/toggle';
+import { useFocusable } from '@react-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
 
 export interface ToggleAria {
   /**
@@ -39,9 +39,9 @@ export function useToggle(
     value,
     name,
     children,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    validationState = "valid",
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    validationState = 'valid',
   } = props;
 
   let onChange = (e: any) => {
@@ -55,7 +55,7 @@ export function useToggle(
   let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
   if (!hasChildren && !hasAriaLabel) {
     console.warn(
-      "If you do not provide children, you must specify an aria-label for accessibility"
+      'If you do not provide children, you must specify an aria-label for accessibility'
     );
   }
 
@@ -70,16 +70,16 @@ export function useToggle(
 
   return {
     inputProps: mergeProps(domProps, {
-      "aria-invalid": validationState === "invalid" || undefined,
-      "aria-errormessage": props["aria-errormessage"],
-      "aria-controls": props["aria-controls"],
-      "aria-readonly": isReadOnly || undefined,
+      'aria-invalid': validationState === 'invalid' || undefined,
+      'aria-errormessage': props['aria-errormessage'],
+      'aria-controls': props['aria-controls'],
+      'aria-readonly': isReadOnly || undefined,
       onChange,
-      disabled: isDisabled,
-      required: isRequired,
+      'disabled': isDisabled,
+      'required': isRequired,
       value,
       name,
-      type: "checkbox",
+      'type': 'checkbox',
       ...interactions,
     }),
   };

packages/themed/package.json

@@ -39,6 +39,7 @@
     "@gluestack-ui/avatar": "0.1.15",
     "@gluestack-ui/button": "1.0.0",
     "@gluestack-ui/checkbox": "0.1.23",
+    "@gluestack-ui/collapsible": "0.0.1",
     "@gluestack-ui/divider": "0.1.8",
     "@gluestack-ui/fab": "0.1.17",
     "@gluestack-ui/form-control": "0.1.15",

packages/themed/src/components/Collapsible/config.json

@@ -0,0 +1,4 @@
+{
+  "dependencies": { "@gluestack-ui/collapsible": "latest" },
+  "keywords": ["components", "core"]
+}

packages/themed/src/components/Collapsible/index.tsx

@@ -0,0 +1,24 @@
+import { createCollapsible } from '@gluestack-ui/collapsible';
+import {
+  Root,
+  Trigger,
+  TriggerText,
+  ContentText,
+  Content,
+} from './styled-components';
+
+export const Collapsible = createCollapsible({
+  Root,
+  Trigger,
+  TriggerText,
+  ContentText,
+  Content,
+});
+
+export const CollapsibleItem = Collapsible.Item;
+export const CollapsibleHeader = Collapsible.Header;
+export const CollapsibleTrigger = Collapsible.Trigger;
+export const CollapsibleTitleText = Collapsible.TitleText;
+export const CollapsibleContentText = Collapsible.ContentText;
+export const CollapsibleIcon = Collapsible.Icon;
+export const CollapsibleContent = Collapsible.Content;

packages/themed/src/components/Collapsible/styled-components/Content.tsx

@@ -0,0 +1,6 @@
+import { styled } from '@gluestack-style/react';
+import { View } from 'react-native';
+
+export default styled(View, {}, {
+  componentName: 'CollapsibleContent',
+} as const);

packages/themed/src/components/Collapsible/styled-components/ContentText.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@gluestack-style/react';
+import { Text } from 'react-native';
+
+export default styled(Text, {}, {
+  componentName: 'CollapsibleContentText',
+  ancestorStyle: ['_contentText'],
+} as const);

packages/themed/src/components/Collapsible/styled-components/Root.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@gluestack-style/react';
+import { View } from 'react-native';
+
+export default styled(View, {}, {
+  componentName: 'Collapsible',
+  descendantStyle: ['_trigger', '_triggerText', '_content', '_contentText'],
+} as const);

packages/themed/src/components/Collapsible/styled-components/Trigger.tsx

@@ -0,0 +1,8 @@
+import { styled } from '@gluestack-style/react';
+import { Pressable } from 'react-native';
+
+export default styled(Pressable, {}, {
+  componentName: 'AccordionTrigger',
+  descendantStyle: ['_triggerText'],
+  ancestorStyle: ['_trigger'],
+} as const);

packages/themed/src/components/Collapsible/styled-components/TriggerText.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@gluestack-style/react';
+import { Text } from 'react-native';
+
+export default styled(Text, {}, {
+  componentName: 'CollapsibleTriggerText',
+  ancestorStyle: ['_triggerText'],
+} as const);

packages/themed/src/components/Collapsible/styled-components/index.tsx

@@ -0,0 +1,5 @@
+export { default as Root } from './Root';
+export { default as Trigger } from './Trigger';
+export { default as TriggerText } from './TriggerText';
+export { default as Content } from './Content';
+export { default as ContentText } from './ContentText';

packages/themed/src/components/index.tsx

@@ -10,6 +10,7 @@ export * from './Box';
 export * from './FlatList';
 export * from './Center';
 export * from './Checkbox';
+export * from './Collapsible';
 export * from './HStack';
 export * from './Pressable';
 export * from './Icons';

packages/unstyled/collapsible/.npmignore

@@ -0,0 +1,20 @@
+# Dotfiles
+.babelrc
+.eslintignore
+.eslintrc.json
+.gitattributes
+_config.yml
+.editorconfig
+
+
+#Config files
+babel.config.js
+
+# Documents
+CONTRIBUTING.md
+ISSUE_TEMPLATE.txt
+img
+
+# Test cases
+__tests__
+dist/__tests__