@multiplatform.one/components 5.0.1 → 5.0.4

package/src/organize/SimpleCarousel/index.tsx

@@ -1,10 +1,10 @@
 /**
  * File: /src/organize/SimpleCarousel/index.tsx
  * Project: @multiplatform.one/components
- * File Created: 17-10-2023 14:46:38
- * Author: Lalit rajak
+ * File Created: 11-09-2024 14:21:33
+ * File: /src/organize/SimpleCarousel/index.tsx
  * -----
- * BitSpur (c) Copyright 2021 - 2023
+ * BitSpur (c) Copyright 2021 - 2024
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,14 +18,15 @@
  * 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 { IconProps } from "@tamagui/helpers-icon";
+import { ChevronLeft, ChevronRight } from "@tamagui/lucide-icons";
+import { Children, type ReactNode, useEffect, useRef, useState } from "react";
+import type { YStackProps } from "tamagui";
+import { Stack, Text, XStack, YStack } from "tamagui";
 
 export type CarouselProps = YStackProps & {
-  children: React.ReactNode;
+  children: ReactNode;
   speed?: number;
   showCenterIndicator?: boolean;
   showSideArrows?: boolean;
@@ -43,7 +44,7 @@ export function SimpleCarousel({
   ...props
 }: CarouselProps) {
   const [currentSlide, setCurrentSlide] = useState(0);
-  const childrenCount = React.Children.count(children);
+  const childrenCount = Children.count(children);
   const carouselRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -67,7 +68,9 @@ export function SimpleCarousel({
   }
 
   function handlePressPrev() {
-    setCurrentSlide((prevSlide) => (prevSlide - 1 + childrenCount) % childrenCount);
+    setCurrentSlide(
+      (prevSlide) => (prevSlide - 1 + childrenCount) % childrenCount,
+    );
   }
 
   function renderSideArrows() {
@@ -131,13 +134,17 @@ 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}
         ref={carouselRef}
       >
-        {React.Children.map(children, (child, index) => (
+        {Children.map(children, (child, index) => (
           <YStack key={index} flex-flexGrow={0} flexShrink={0} flexBasis="100%">
             {child}
           </YStack>

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

@@ -1,11 +1,10 @@
-import React from 'react';
-import { SimpleInput, SimpleInputProps } from '.';
-import type { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/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 +15,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,43 +1,72 @@
-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';
+/**
+ * File: /src/organize/SimpleInput/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 11-09-2024 14:21:33
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Eye, EyeOff } from "@tamagui/lucide-icons";
+import { useEffect, useState } from "react";
+import type { ButtonProps, InputProps, XStackProps } from "tamagui";
+import { Button, Input, 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) {
-  const [hideText, setHideText] = React.useState<boolean>(
-    props?.secureTextEntry || inputType === 'PASSWORD' ? true : false,
+export function SimpleInput({
+  inputType = "TEXT",
+  xStackProps,
+  buttonProps,
+  ...props
+}: SimpleInputProps) {
+  const [hideText, setHideText] = useState<boolean>(
+    !!(props?.secureTextEntry || inputType === "PASSWORD"),
   );
-  const [isValidText, setIsValidText] = React.useState<boolean>(true);
+  const [isValidText, setIsValidText] = useState<boolean>(true);
 
   useEffect(() => {
     props.secureTextEntry ? setHideText(true) : setHideText(false);
   }, [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 { useEffect, useState } 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');
-  React.useEffect(() => {
-    if (args.orientation === 'horizontal') {
+  const [orientation, setOrientation] = useState(
+    args.orientation === "horizontal",
+  );
+  useEffect(() => {
+    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 { createContext, useContext, 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);
+const ListContext = 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);
+  const context = 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

@@ -0,0 +1,36 @@
+/**
+ * File: /src/organize/SimpleParagraph/SimpleParagraph.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 19-11-2024 20:26:31
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SimpleParagraph } from ".";
+
+export default {
+  title: "Components/SimpleParagraph",
+  component: SimpleParagraph,
+  parameters: { status: { type: "beta" } },
+};
+
+export const main = () => (
+  <SimpleParagraph>{`
+function helloWorld() {
+  console.info("Hello, World!");
+}
+`}</SimpleParagraph>
+);

package/src/organize/SimpleParagraph/index.tsx

@@ -0,0 +1,115 @@
+/**
+ * File: /src/organize/SimpleParagraph/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 11-09-2024 14:21:33
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from "react";
+import type { ParagraphProps, YStackProps } from "tamagui";
+import { Paragraph, ScrollView, Text, XStack, YStack } from "tamagui";
+import { CodeBlock } from "../../code";
+
+export interface SimpleParagraphProps
+  extends YStackProps,
+    Pick<ParagraphProps, "color" | "fontSize"> {
+  children: string;
+}
+
+export const SimpleParagraph = ({
+  children,
+  ...props
+}: SimpleParagraphProps) => {
+  if (typeof children !== "string") return null;
+
+  function parseContent(data) {
+    const regex = /```(.*?)\n([\s\S]*?)```|[\s\S]+?(?=```|$)/g;
+    const boldTextRegex = /\*\*(.*?)\*\*/g;
+    const segments = data?.match(regex);
+    const parsedSegments: {
+      type: string;
+      content?: ReactNode;
+      language?: string;
+      code?: string;
+      isBold?: boolean;
+    }[] = [];
+
+    segments?.forEach((segment) => {
+      const codeMatch = segment.match(/```(.*?)\n([\s\S]*?)```/);
+      if (codeMatch) {
+        parsedSegments.push({
+          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) => {
+          const content: ReactNode[] = [];
+          let lastIndex = 0;
+          line.replace(boldTextRegex, (match, p1, offset) => {
+            if (offset > lastIndex) {
+              content.push(line.substring(lastIndex, offset));
+            }
+            content.push(<Text fontWeight="bold">{p1}</Text>);
+            lastIndex = offset + match.length;
+            return match; // This return is not used but necessary for replace function
+          });
+          if (lastIndex < line.length) {
+            content.push(line.substring(lastIndex));
+          }
+          parsedSegments.push({
+            type: "text",
+            content: content.length === 1 ? content[0] : content,
+            isBold: false,
+          });
+        });
+      }
+    });
+    return parsedSegments;
+  }
+
+  const parsedSegments = parseContent(children);
+
+  return (
+    <YStack {...props}>
+      {parsedSegments.map((segment, index) => {
+        if (segment.type === "text") {
+          return (
+            <XStack key={index}>
+              <Paragraph
+                overflow="hidden"
+                fontSize={props.fontSize}
+                color={props.color}
+              >
+                {segment.content}
+              </Paragraph>
+            </XStack>
+          );
+        }
+        if (segment.type === "code") {
+          return (
+            <ScrollView key={index} flexShrink={1} scrollEnabled>
+              <CodeBlock>{segment.code}</CodeBlock>
+            </ScrollView>
+          );
+        }
+        return null;
+      })}
+    </YStack>
+  );
+};

package/src/organize/SimpleTabs/SimpleTabs.stories.tsx

@@ -1,10 +1,10 @@
 /**
  * File: /src/organize/SimpleTabs/SimpleTabs.stories.tsx
  * Project: @multiplatform.one/components
- * File Created: 18-10-2023 15:23:17
- * Author: Lalit rajak
+ * File Created: 10-01-2025 21:02:36
+ * Author: Clay Risser
  * -----
- * BitSpur (c) Copyright 2021 - 2023
+ * BitSpur (c) Copyright 2021 - 2025
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,27 +19,38 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { SimpleTabs, TabsList, TabsContent } from './index';
-import { H5, SizableText, Tabs, Separator, YStack, Switch, XStack, Text } from 'tamagui';
-import { SimpleTabsProps } from './index';
+import { useEffect, useState } from "react";
+import {
+  H5,
+  Separator,
+  SizableText,
+  Switch,
+  Tabs,
+  Text,
+  XStack,
+  YStack,
+} from "tamagui";
+import { SimpleTabs, TabsContent, TabsList } from "./index";
+import type { SimpleTabsProps } from "./index";
 
 export default {
-  title: 'organize/SimpleTabs',
+  title: "organize/SimpleTabs",
   component: SimpleTabs,
   parameters: {
     status: {
-      type: 'beta',
+      type: "beta",
     },
   },
 };
 
 export const Main = (args: SimpleTabsProps) => {
-  const [orientation, setOrientation] = React.useState(args.orientation === 'horizontal');
-  const [isHorizontal, setIsHorizontal] = React.useState(true);
+  const [orientation, setOrientation] = useState(
+    args.orientation === "horizontal",
+  );
+  const [isHorizontal, setIsHorizontal] = useState(true);
 
-  React.useEffect(() => {
-    if (args.orientation === 'horizontal') {
+  useEffect(() => {
+    if (args.orientation === "horizontal") {
       setOrientation(true);
     } else {
       setOrientation(false);
@@ -47,15 +58,25 @@ export const Main = (args: SimpleTabsProps) => {
   }, [args.orientation]);
 
   return (
-    <YStack gap padding="$4">
-      <XStack gap>
-        <Switch size="$3" checked={orientation} onCheckedChange={setIsHorizontal}>
+    <YStack gap="$4" padding="$4">
+      <XStack gap="$4">
+        <Switch
+          size="$3"
+          checked={orientation}
+          onCheckedChange={setIsHorizontal}
+        >
           <Switch.Thumb animation="bouncy" />
         </Switch>
-        <Text>{orientation ? 'Horizontal' : 'Vertical'}</Text>
+        <Text>{orientation ? "Horizontal" : "Vertical"}</Text>
       </XStack>
-      <SimpleTabs orientation={orientation ? 'horizontal' : 'vertical'} defaultValue="home">
-        <TabsList justifyContent="space-between" orientation={orientation ? 'horizontal' : 'vertical'}>
+      <SimpleTabs
+        orientation={orientation ? "horizontal" : "vertical"}
+        defaultValue="home"
+      >
+        <TabsList
+          justifyContent="space-between"
+          orientation={orientation ? "horizontal" : "vertical"}
+        >
           <Tabs.Tab value="home" flex={1}>
             <SizableText textAlign="center">Home</SizableText>
           </Tabs.Tab>
@@ -86,6 +107,6 @@ export const main = (args) => {
 };
 
 const mainArgs = {
-  orientation: 'horizontal',
+  orientation: "horizontal",
 };
 main.args = mainArgs;