@multiplatform.one/components 4.1.0 → 4.1.1

package/src/mdx/util/rehypeMetaAttributes.ts

@@ -1,19 +1,21 @@
 // https://github.com/wooorm/xdm#syntax-highlighting-with-the-meta-field
 
-import { visit } from 'unist-util-visit';
+import { visit } from "unist-util-visit";
 const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g;
 
 export function rehypeMetaAttributes(_options = {}) {
   function onElement(node: any) {
     let match: any;
-    if (node.tagName === 'code' && node.data && node.data.meta) {
+    if (node.tagName === "code" && node.data && node.data.meta) {
       re.lastIndex = 0; // Reset regex.
-      while ((match = re.exec(node.data.meta))) {
-        node.properties[match[1]] = match[2] || match[3] || match[4] || '';
+      match = re.exec(node.data.meta);
+      while (match) {
+        node.properties[match[1]] = match[2] || match[3] || match[4] || "";
+        match = re.exec(node.data.meta);
       }
     }
   }
   return (tree: any) => {
-    visit(tree, 'element', onElement);
+    visit(tree, "element", onElement);
   };
 }

package/src/organize/SimpleAccordion/SimpleAccordion.stories.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { AccordionItem, SimpleAccordion } from './index';
-import { YStack, Text, XStack, H5, Accordion } from 'tamagui';
-import { ChevronRight } from '@tamagui/lucide-icons';
+import { ChevronRight } from "@tamagui/lucide-icons";
+import React from "react";
+import { Accordion, H5, Text, XStack, YStack } from "tamagui";
+import { AccordionItem, SimpleAccordion } from "./index";
 
 export default {
-  title: 'organize/SimpleAccordion',
+  title: "organize/SimpleAccordion",
   component: SimpleAccordion,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
@@ -19,7 +19,10 @@ export const main = (args) => {
           <Text> Apple Content</Text>
         </YStack>
       </AccordionItem>
-      <AccordionItem trigger={() => <Text>Trigger Banana </Text>} value="banana">
+      <AccordionItem
+        trigger={() => <Text>Trigger Banana </Text>}
+        value="banana"
+      >
         <YStack padding="$4">
           <Text>Banana Content</Text>
         </YStack>
@@ -27,7 +30,7 @@ export const main = (args) => {
       <AccordionItem
         trigger={(open) => (
           <XStack>
-            <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
+            <YStack animation="quick" rotate={open ? "90deg" : "0deg"}>
               <ChevronRight />
             </YStack>
             <H5 color="$color10">Folders</H5>
@@ -43,7 +46,7 @@ export const main = (args) => {
         <Accordion.Trigger flexDirection="row" justifyContent="space-between">
           {({ open }) => (
             <XStack>
-              <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
+              <YStack animation="quick" rotate={open ? "90deg" : "0deg"}>
                 <ChevronRight />
               </YStack>
               <H5 color="$color10">Folders</H5>

package/src/organize/SimpleAccordion/index.tsx

@@ -19,14 +19,18 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from 'tamagui';
-import { Accordion } from 'tamagui';
+import type React from "react";
+import type {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+} from "tamagui";
+import { Accordion } from "tamagui";
 
 interface SimpleAccordionProps {
   children: React.ReactNode;
-  overflow?: 'visible' | 'hidden' | 'scroll';
-  type?: 'single' | 'multiple';
+  overflow?: "visible" | "hidden" | "scroll";
+  type?: "single" | "multiple";
 }
 
 type SimpleAccordionItemProps = AccordionItemProps & {
@@ -44,10 +48,20 @@ export function SimpleAccordion({ children, ...props }: SimpleAccordionProps) {
   );
 }
 
-export function AccordionItem({ trigger, triggerStyle, children, contentStyle, ...props }: SimpleAccordionItemProps) {
+export function AccordionItem({
+  trigger,
+  triggerStyle,
+  children,
+  contentStyle,
+  ...props
+}: SimpleAccordionItemProps) {
   return (
     <Accordion.Item {...props}>
-      <Accordion.Trigger flexDirection="row" justifyContent="space-between" {...triggerStyle}>
+      <Accordion.Trigger
+        flexDirection="row"
+        justifyContent="space-between"
+        {...triggerStyle}
+      >
         {({ open }) => trigger(open)}
       </Accordion.Trigger>
       <Accordion.Content {...contentStyle}>{children}</Accordion.Content>

package/src/organize/SimpleCarousel/Carousel.stories.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { SimpleImage } from "../../images/SimpleImage";
 /**
  * File: /src/organize/SimpleCarousel/Carousel.stories.tsx
  * Project: @multiplatform.one/components
@@ -18,22 +20,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SimpleCarousel, CarouselProps } from './index';
-import React from 'react';
-import { SimpleImage } from '../../images/SimpleImage';
+import { type CarouselProps, SimpleCarousel } from "./index";
 
 export default {
-  title: 'organize/SimpleCarousel',
+  title: "organize/SimpleCarousel",
   component: SimpleCarousel,
   parameters: {
     status: {
-      type: 'beta',
+      type: "beta",
     },
   },
 };
 
-const mail = require('../../../assets/mail.png');
-const pentagon = require('../../../assets/pentagon.svg');
+const mail = require("../../../assets/mail.png");
+const pentagon = require("../../../assets/pentagon.svg");
 
 export const Main = (args: CarouselProps) => (
   <SimpleCarousel speed={args.speed} {...args} defaultSlide={4}>

package/src/organize/SimpleCarousel/index.tsx

@@ -1,3 +1,6 @@
+import type { IconProps } from "@tamagui/helpers-icon";
+import { ChevronLeft, ChevronRight } from "@tamagui/lucide-icons";
+import React, { useEffect, useState, useRef } from "react";
 /**
  * File: /src/organize/SimpleCarousel/index.tsx
  * Project: @multiplatform.one/components
@@ -18,11 +21,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { YStackProps } from 'tamagui';
-import { Stack, Text, XStack, YStack } from 'tamagui';
-import React, { useEffect, useState, useRef } from 'react';
-import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons';
-import type { IconProps } from '@tamagui/helpers-icon';
+import type { YStackProps } from "tamagui";
+import { Stack, Text, XStack, YStack } from "tamagui";
 
 export type CarouselProps = YStackProps & {
   children: React.ReactNode;
@@ -67,7 +67,9 @@ export function SimpleCarousel({
   }
 
   function handlePressPrev() {
-    setCurrentSlide((prevSlide) => (prevSlide - 1 + childrenCount) % childrenCount);
+    setCurrentSlide(
+      (prevSlide) => (prevSlide - 1 + childrenCount) % childrenCount,
+    );
   }
 
   function renderSideArrows() {
@@ -131,7 +133,11 @@ export function SimpleCarousel({
   return (
     <YStack overflow="hidden">
       <XStack
-        transform={[{ translateX: -currentSlide * (carouselRef.current?.clientWidth || 1) }]}
+        transform={[
+          {
+            translateX: -currentSlide * (carouselRef.current?.clientWidth || 1),
+          },
+        ]}
         width="100%"
         animation="lazy"
         {...props}

package/src/organize/SimpleInput/SimpleInput.stories.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { SimpleInput, SimpleInputProps } from '.';
-import type { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/react";
+import React from "react";
+import { SimpleInput, type SimpleInputProps } from ".";
 
 const meta: Meta = {
-  title: 'organize/SimpleInput',
+  title: "organize/SimpleInput",
   component: SimpleInput,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
   argTypes: {
     inputType: {
       control: {},
@@ -16,15 +16,17 @@ const meta: Meta = {
 export const main = (args: SimpleInputProps) => <SimpleInput {...args} />;
 
 const mainArgs: SimpleInputProps = {
-  inputType: 'TEXT',
+  inputType: "TEXT",
 };
 
 main.args = mainArgs;
 
-export const passwordInputType = (args: SimpleInputProps) => <SimpleInput {...args} />;
+export const passwordInputType = (args: SimpleInputProps) => (
+  <SimpleInput {...args} />
+);
 
 const passwordInputTypeArgs: SimpleInputProps = {
-  inputType: 'PASSWORD',
+  inputType: "PASSWORD",
   secureTextEntry: true,
 };
 

package/src/organize/SimpleInput/index.tsx

@@ -1,17 +1,22 @@
-import React, { useEffect } from 'react';
-import type { ButtonProps, InputProps, XStackProps } from 'tamagui';
-import { Button, Input, XGroup, XStack } from 'tamagui';
-import { Eye, EyeOff } from '@tamagui/lucide-icons';
+import { Eye, EyeOff } from "@tamagui/lucide-icons";
+import React, { useEffect } from "react";
+import type { ButtonProps, InputProps, XStackProps } from "tamagui";
+import { Button, Input, XGroup, XStack } from "tamagui";
 
 export type SimpleInputProps = InputProps & {
-  inputType?: 'EMAIL' | 'TEXT' | 'PASSWORD';
+  inputType?: "EMAIL" | "TEXT" | "PASSWORD";
   xStackProps?: XStackProps;
   buttonProps?: ButtonProps;
 };
 
-export function SimpleInput({ inputType = 'TEXT', xStackProps, buttonProps, ...props }: SimpleInputProps) {
+export function SimpleInput({
+  inputType = "TEXT",
+  xStackProps,
+  buttonProps,
+  ...props
+}: SimpleInputProps) {
   const [hideText, setHideText] = React.useState<boolean>(
-    props?.secureTextEntry || inputType === 'PASSWORD' ? true : false,
+    !!(props?.secureTextEntry || inputType === "PASSWORD"),
   );
   const [isValidText, setIsValidText] = React.useState<boolean>(true);
 
@@ -20,24 +25,27 @@ export function SimpleInput({ inputType = 'TEXT', xStackProps, buttonProps, ...p
   }, [props.secureTextEntry]);
 
   const handleInputChange = (text: string) => {
-    if (inputType === 'EMAIL') {
+    if (inputType === "EMAIL") {
       const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
       // const emailPattern = /^[\w+\.]+@\w+(\.\w+)+$/;
       if (!emailPattern.test(text)) {
         setIsValidText(false);
         return;
-      } else {
-        setIsValidText(true);
       }
+      setIsValidText(true);
     } else {
       setIsValidText(true);
     }
   };
 
   return (
-    <XStack theme={isValidText ? 'system' : 'red'} space="$1" {...xStackProps}>
-      <Input {...props} secureTextEntry={hideText} onChangeText={handleInputChange} />
-      {inputType === 'PASSWORD' && (
+    <XStack theme={isValidText ? "system" : "red"} space="$1" {...xStackProps}>
+      <Input
+        {...props}
+        secureTextEntry={hideText}
+        onChangeText={handleInputChange}
+      />
+      {inputType === "PASSWORD" && (
         <Button onPress={() => setHideText(!hideText)}>
           <Button.Icon>{hideText ? <EyeOff /> : <Eye />}</Button.Icon>
         </Button>

package/src/organize/SimpleListItem/SimpleListItem.stories.tsx

@@ -19,22 +19,29 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { SimpleList, SimpleListItem, SimpleListProps, SimpleListItemProps } from './index';
-import { ChevronRight, Star } from '@tamagui/lucide-icons';
-import { Label, Separator, Switch, XStack, YStack } from 'tamagui';
+import { ChevronRight, Star } from "@tamagui/lucide-icons";
+import React from "react";
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+import {
+  SimpleList,
+  SimpleListItem,
+  type SimpleListItemProps,
+  type SimpleListProps,
+} from "./index";
 export default {
-  title: 'organize/SimpleListItem',
+  title: "organize/SimpleListItem",
   component: SimpleList,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 function Main(args: SimpleListProps & SimpleListItemProps) {
-  const [orientation, setOrientation] = React.useState(args.orientation === 'horizontal');
+  const [orientation, setOrientation] = React.useState(
+    args.orientation === "horizontal",
+  );
   React.useEffect(() => {
-    if (args.orientation === 'horizontal') {
+    if (args.orientation === "horizontal") {
       setOrientation(true);
     } else {
       setOrientation(false);
@@ -43,27 +50,68 @@ function Main(args: SimpleListProps & SimpleListItemProps) {
   return (
     <YStack fullscreen>
       <XStack width={200} alignItems="center" gap="$4" alignSelf="flex-start">
-        <Label paddingRight="$0" minWidth={90} justifyContent="flex-end" size="$2">
-          {orientation ? 'Horizontal' : 'Vertical'}
+        <Label
+          paddingRight="$0"
+          minWidth={90}
+          justifyContent="flex-end"
+          size="$2"
+        >
+          {orientation ? "Horizontal" : "Vertical"}
         </Label>
         <Separator minHeight={20} vertical />
-        <Switch size="$2" checked={orientation} onCheckedChange={setOrientation}>
+        <Switch
+          size="$2"
+          checked={orientation}
+          onCheckedChange={setOrientation}
+        >
           <Switch.Thumb animation="quick" />
         </Switch>
       </XStack>
       <SimpleList orientation={args.orientation}>
-        <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
-        <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
-        <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
-        <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
-        <SimpleListItem title="hello" icon={Star} subTitle="how are you" iconAfter={ChevronRight} width={200} />
+        <SimpleListItem
+          title="hello"
+          icon={Star}
+          subTitle="how are you"
+          iconAfter={ChevronRight}
+          width={200}
+        />
+        <SimpleListItem
+          title="hello"
+          icon={Star}
+          subTitle="how are you"
+          iconAfter={ChevronRight}
+          width={200}
+        />
+        <SimpleListItem
+          title="hello"
+          icon={Star}
+          subTitle="how are you"
+          iconAfter={ChevronRight}
+          width={200}
+        />
+        <SimpleListItem
+          title="hello"
+          icon={Star}
+          subTitle="how are you"
+          iconAfter={ChevronRight}
+          width={200}
+        />
+        <SimpleListItem
+          title="hello"
+          icon={Star}
+          subTitle="how are you"
+          iconAfter={ChevronRight}
+          width={200}
+        />
       </SimpleList>
     </YStack>
   );
 }
 
-export const main = (args: SimpleListProps & SimpleListItemProps) => <Main {...args} />;
+export const main = (args: SimpleListProps & SimpleListItemProps) => (
+  <Main {...args} />
+);
 
 main.args = {
-  orientation: 'horizontal',
+  orientation: "horizontal",
 };

package/src/organize/SimpleListItem/index.tsx

@@ -19,38 +19,60 @@
  * limitations under the License.
  */
 
-import type { ListItemProps, YStackProps } from 'tamagui';
-import { YGroup, ListItem, XGroup } from 'tamagui';
-import React, { useMemo } from 'react';
+import React, { useMemo } from "react";
+import type { ListItemProps, YStackProps } from "tamagui";
+import { ListItem, XGroup, YGroup } from "tamagui";
 
-export type SimpleListProps = YStackProps & { orientation?: 'horizontal' | 'vertical'; bg?: any };
+export type SimpleListProps = YStackProps & {
+  orientation?: "horizontal" | "vertical";
+  bg?: any;
+};
 export type SimpleListItemProps = ListItemProps & {};
 
 const ListContext = React.createContext<SimpleListProps | null>(null);
 
-export function SimpleList({ children, orientation = 'vertical', backgroundColor, bg, ...props }: SimpleListProps) {
-  const contextValue = useMemo(() => ({ orientation, backgroundColor, bg }), [orientation, backgroundColor, bg]);
+export function SimpleList({
+  children,
+  orientation = "vertical",
+  backgroundColor,
+  bg,
+  ...props
+}: SimpleListProps) {
+  const contextValue = useMemo(
+    () => ({ orientation, backgroundColor, bg }),
+    [orientation, backgroundColor, bg],
+  );
 
   const renderView = () => {
-    if (orientation === 'horizontal') {
+    if (orientation === "horizontal") {
       return <XGroup {...props}>{children}</XGroup>;
     }
     return <YGroup {...props}>{children}</YGroup>;
   };
-  return <ListContext.Provider value={contextValue}>{renderView()}</ListContext.Provider>;
+  return (
+    <ListContext.Provider value={contextValue}>
+      {renderView()}
+    </ListContext.Provider>
+  );
 }
 
 export function SimpleListItem({ ...props }: SimpleListItemProps) {
   const context = React.useContext(ListContext);
   if (!context) {
-    throw new Error('SimpleListItem must be used within a SimpleList');
+    throw new Error("SimpleListItem must be used within a SimpleList");
   }
 
   function renderItem() {
-    return <ListItem hoverTheme backgroundColor={context?.backgroundColor || (context as any)?.bg} {...props} />;
+    return (
+      <ListItem
+        hoverTheme
+        backgroundColor={context?.backgroundColor || (context as any)?.bg}
+        {...props}
+      />
+    );
   }
 
-  if (context.orientation === 'horizontal') {
+  if (context.orientation === "horizontal") {
     return <XGroup.Item>{renderItem()}</XGroup.Item>;
   }
   return <YGroup.Item>{renderItem()}</YGroup.Item>;

package/src/organize/SimpleParagraph/SimpleParagraph.stories.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { SimpleParagraph } from '.';
+import React from "react";
+import { SimpleParagraph } from ".";
 
 export default {
-  title: 'Components/SimpleParagraph',
+  title: "Components/SimpleParagraph",
   component: SimpleParagraph,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 export const main = () => (

package/src/organize/SimpleParagraph/index.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
-import { YStack, XStack, Paragraph, Text, ScrollView } from 'tamagui';
-import { CodeBlock } from '../../code';
-import type { YStackProps, ParagraphProps } from 'tamagui';
+import type React from "react";
+import { Paragraph, ScrollView, Text, XStack, YStack } from "tamagui";
+import type { ParagraphProps, YStackProps } from "tamagui";
+import { CodeBlock } from "../../code";
 
-export interface SimpleParagraphProps extends YStackProps, Pick<ParagraphProps, 'color' | 'fontSize'> {
+export interface SimpleParagraphProps
+  extends YStackProps,
+    Pick<ParagraphProps, "color" | "fontSize"> {
   children: string;
 }
 
-export const SimpleParagraph = ({ children, ...props }: SimpleParagraphProps) => {
-  if (typeof children !== 'string') return null;
+export const SimpleParagraph = ({
+  children,
+  ...props
+}: SimpleParagraphProps) => {
+  if (typeof children !== "string") return null;
 
   function parseContent(data) {
     const regex = /```(.*?)\n([\s\S]*?)```|[\s\S]+?(?=```|$)/g;
@@ -26,14 +31,14 @@ export const SimpleParagraph = ({ children, ...props }: SimpleParagraphProps) =>
       const codeMatch = segment.match(/```(.*?)\n([\s\S]*?)```/);
       if (codeMatch) {
         parsedSegments.push({
-          type: 'code',
+          type: "code",
           language: codeMatch[1],
           code: codeMatch[2].trim(),
         });
       } else {
         // Splitting the text segment by new lines and treating each new line as a separate text segment
-        segment.split('\n').forEach((line) => {
-          let content: React.ReactNode[] = [];
+        segment.split("\n").forEach((line) => {
+          const content: React.ReactNode[] = [];
           let lastIndex = 0;
           line.replace(boldTextRegex, (match, p1, offset) => {
             if (offset > lastIndex) {
@@ -47,7 +52,7 @@ export const SimpleParagraph = ({ children, ...props }: SimpleParagraphProps) =>
             content.push(line.substring(lastIndex));
           }
           parsedSegments.push({
-            type: 'text',
+            type: "text",
             content: content.length === 1 ? content[0] : content,
             isBold: false,
           });
@@ -62,15 +67,20 @@ export const SimpleParagraph = ({ children, ...props }: SimpleParagraphProps) =>
   return (
     <YStack {...props}>
       {parsedSegments.map((segment, index) => {
-        if (segment.type === 'text') {
+        if (segment.type === "text") {
           return (
             <XStack key={index}>
-              <Paragraph overflow="hidden" fontSize={props.fontSize} color={props.color}>
+              <Paragraph
+                overflow="hidden"
+                fontSize={props.fontSize}
+                color={props.color}
+              >
                 {segment.content}
               </Paragraph>
             </XStack>
           );
-        } else if (segment.type === 'code') {
+        }
+        if (segment.type === "code") {
           return (
             <ScrollView key={index} flexShrink={1} scrollEnabled>
               <CodeBlock>{segment.code}</CodeBlock>