@multiplatform.one/components 4.1.0 → 4.1.1

package/src/images/SimpleImage/index.tsx

@@ -19,19 +19,22 @@
  * limitations under the License.
  */
 
-import React, { useMemo, forwardRef, useRef } from 'react';
-import type { ComponentProps, Ref } from 'react';
-import type { Image } from 'expo-image';
-import type { SolitoImageProps } from 'solito/build/image/image.types';
-import type { StackProps } from 'tamagui';
-import type { StaticImageData } from 'next/image';
-import { SolitoImage } from 'solito/image';
-import { Stack, createComponent } from 'tamagui';
-import { StyleSheet } from 'react-native';
-import { useAssets } from '../../hooks/useAssets';
+import type { Image } from "expo-image";
+import type { StaticImageData } from "next/image";
+import React, { useMemo, forwardRef, useRef } from "react";
+import type { ComponentProps, Ref } from "react";
+import { StyleSheet } from "react-native";
+import type { SolitoImageProps } from "solito/build/image/image.types";
+import { SolitoImage } from "solito/image";
+import type { StackProps } from "tamagui";
+import { Stack, createComponent } from "tamagui";
+import { useAssets } from "../../hooks/useAssets";
 
-export type Props = Omit<SolitoImageProps, 'height' | 'width' | 'src' | 'fill' | 'style' | 'alt'> &
-  Omit<StackProps, 'height' | 'width'> & {
+export type Props = Omit<
+  SolitoImageProps,
+  "height" | "width" | "src" | "fill" | "style" | "alt"
+> &
+  Omit<StackProps, "height" | "width"> & {
     alt?: string;
     height?: number | string;
     src?: StaticImport | string | number;
@@ -68,64 +71,96 @@ const SimpleImageComponent = forwardRef<Image, Props>(
     const parentRef = useRef();
     const style = StyleSheet.flatten(props.style || {});
     let asset: StaticImageData | undefined;
-    if (typeof src === 'number') [asset] = useAssets([src]);
+    if (typeof src === "number") [asset] = useAssets([src]);
     const staticImageData = useMemo(() => {
-      if (typeof src === 'string') return;
-      if (typeof src === 'number') return asset;
-      return (src as { default?: StaticImageData })?.default || (src as StaticImageData);
+      if (typeof src === "string") return;
+      if (typeof src === "number") return asset;
+      return (
+        (src as { default?: StaticImageData })?.default ||
+        (src as StaticImageData)
+      );
     }, [asset, src]);
 
     const mAspectRatio = useMemo(() => {
       const sAspectRatio = aspectRatio || style.aspectRatio;
-      if (typeof sAspectRatio === 'string') {
-        const [width, height] = sAspectRatio.split(':');
-        return parseInt(width || '0', 10) / parseInt(height || '0', 10);
+      if (typeof sAspectRatio === "string") {
+        const [width, height] = sAspectRatio.split(":");
+        return (
+          Number.parseInt(width || "0", 10) / Number.parseInt(height || "0", 10)
+        );
       }
       return sAspectRatio;
     }, [aspectRatio, style.aspectRatio]);
 
     const solitoHeight = useMemo(() => {
-      if (typeof height === 'string') return;
-      if (typeof height === 'number') return height;
+      if (typeof height === "string") return;
+      if (typeof height === "number") return height;
       const w =
-        typeof width === 'number'
+        typeof width === "number"
           ? width
-          : typeof style.width !== 'undefined'
-            ? typeof style.width === 'number'
+          : typeof style.width !== "undefined"
+            ? typeof style.width === "number"
               ? style.width
               : undefined
             : staticImageData?.width;
-      if (typeof w === 'number' && typeof mAspectRatio === 'number') return w / mAspectRatio;
+      if (typeof w === "number" && typeof mAspectRatio === "number")
+        return w / mAspectRatio;
       return staticImageData?.height;
-    }, [mAspectRatio, staticImageData?.width, staticImageData?.height, style.width, style.height, width, height]);
+    }, [
+      mAspectRatio,
+      staticImageData?.width,
+      staticImageData?.height,
+      style.width,
+      style.height,
+      width,
+      height,
+    ]);
 
     const solitoWidth = useMemo(() => {
-      if (typeof width === 'string') return;
-      if (typeof width === 'number') return width;
+      if (typeof width === "string") return;
+      if (typeof width === "number") return width;
       const h =
-        typeof height === 'number'
+        typeof height === "number"
           ? height
-          : typeof style.height !== 'undefined'
-            ? typeof style.height === 'number'
+          : typeof style.height !== "undefined"
+            ? typeof style.height === "number"
               ? style.height
               : undefined
             : staticImageData?.height;
-      if (typeof h === 'number' && typeof mAspectRatio === 'number') return h * mAspectRatio;
+      if (typeof h === "number" && typeof mAspectRatio === "number")
+        return h * mAspectRatio;
       return staticImageData?.width;
-    }, [mAspectRatio, staticImageData?.width, staticImageData?.height, style.width, style.height, width, height]);
+    }, [
+      mAspectRatio,
+      staticImageData?.width,
+      staticImageData?.height,
+      style.width,
+      style.height,
+      width,
+      height,
+    ]);
 
     const fill = useMemo(() => {
-      if (typeof solitoWidth === 'undefined' || typeof solitoHeight === 'undefined') {
+      if (
+        typeof solitoWidth === "undefined" ||
+        typeof solitoHeight === "undefined"
+      ) {
         return true;
       }
       return false;
     }, [solitoWidth, solitoHeight]);
 
     return (
-      <Stack {...props} aspectRatio={aspectRatio} width={width} height={height} ref={parentRef as any}>
+      <Stack
+        {...props}
+        aspectRatio={aspectRatio}
+        width={width}
+        height={height}
+        ref={parentRef as any}
+      >
         {src && (
           <SolitoImage
-            alt={alt || ''}
+            alt={alt || ""}
             blurDataURL={blurDataURL}
             contentFit={contentFit}
             contentPosition={contentPosition}
@@ -153,7 +188,9 @@ const SimpleImageComponent = forwardRef<Image, Props>(
   },
 );
 
-export const SimpleImage = createComponent<ComponentProps<typeof SimpleImageComponent>>({
+export const SimpleImage = createComponent<
+  ComponentProps<typeof SimpleImageComponent>
+>({
   Component: SimpleImageComponent as any,
   acceptsClassName: true,
 });

package/src/images/Svg/Svg.stories.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { Path } from 'react-native-svg';
-import { Svg } from './index';
+import React from "react";
+import { Path } from "react-native-svg";
+import { Svg } from "./index";
 
 export default {
-  title: 'images/Svg',
+  title: "images/Svg",
   component: Svg,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 

package/src/images/Svg/index.native.ts

@@ -1,4 +1,4 @@
-import { Svg as RNSvg } from 'react-native-svg';
-import { styled } from 'tamagui';
+import { Svg as RNSvg } from "react-native-svg";
+import { styled } from "tamagui";
 
 export const Svg = styled(RNSvg, {});

package/src/images/Svg/index.ts

@@ -19,10 +19,10 @@
  * limitations under the License.
  */
 
-import type { Svg as RNSvg } from 'react-native-svg';
-import type { ComponentType } from 'react';
-import { Svg as TSvg } from '@tamagui/react-native-svg';
-import { styled } from 'tamagui';
+import { Svg as TSvg } from "@tamagui/react-native-svg";
+import type { ComponentType } from "react";
+import type { Svg as RNSvg } from "react-native-svg";
+import { styled } from "tamagui";
 
 export const Svg = styled(TSvg as typeof RNSvg, {});
 

package/src/images/SvgUri/index.native.ts

@@ -1,4 +1,4 @@
-import { SvgUri as RNSvgUri } from 'react-native-svg';
-import { styled } from 'tamagui';
+import { SvgUri as RNSvgUri } from "react-native-svg";
+import { styled } from "tamagui";
 
 export const SvgUri = styled(RNSvgUri, { uri: null });

package/src/images/SvgUri/index.tsx

@@ -19,15 +19,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { StackProps } from 'tamagui';
-import type { UriProps } from 'react-native-svg';
+import React from "react";
+import type { UriProps } from "react-native-svg";
+import type { StackProps } from "tamagui";
 
 const logger = console;
 
 export type SvgUriProps = StackProps & UriProps;
 
 export function SvgUri(_props: SvgUriProps) {
-  logger.error('use SimpleImage instead of SvgUri');
+  logger.error("use SimpleImage instead of SvgUri");
   return <>{}</>;
 }

package/src/images/index.ts

@@ -1,2 +1,2 @@
-export * from './SimpleImage/index';
-export * from './Svg';
+export * from "./SimpleImage/index";
+export * from "./Svg";

package/src/index.ts

@@ -21,16 +21,16 @@
  * limitations under the License.
  */
 
-export * from './ErrorBoundary';
-export * from './code';
-export * from './forms';
-export * from './helpers';
-export * from './hooks';
-export * from './images';
-export * from './layouts';
-export * from './mdx';
-export * from './organize';
-export * from './panels';
-export * from './table';
-export * from './tints';
-export * from 'tamagui';
+export * from "./ErrorBoundary";
+export * from "./code";
+export * from "./forms";
+export * from "./helpers";
+export * from "./hooks";
+export * from "./images";
+export * from "./layouts";
+export * from "./mdx";
+export * from "./organize";
+export * from "./panels";
+export * from "./table";
+export * from "./tints";
+export * from "tamagui";

package/src/layouts/Debug/DebugLayout.stories.tsx

@@ -19,17 +19,19 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Button } from 'tamagui';
-import { action } from '@storybook/addon-actions';
-import { withDebugLayout } from './index';
+import { action } from "@storybook/addon-actions";
+import React from "react";
+import { Button } from "tamagui";
+import { withDebugLayout } from "./index";
 
 export default {
-  title: 'layouts/Debug',
+  title: "layouts/Debug",
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
-const Main = withDebugLayout(() => <Button onPress={action('onPress')}>Hello, world!</Button>);
+const Main = withDebugLayout(() => (
+  <Button onPress={action("onPress")}>Hello, world!</Button>
+));
 export const main = () => <Main />;

package/src/layouts/Debug/index.tsx

@@ -19,20 +19,20 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { ComponentType, ReactNode } from 'react';
-import type { ThemeName } from 'tamagui';
-import type { WithLayout } from 'multiplatform.one';
-import { Select, YStack, XStack, Adapt, Popover, Circle } from 'tamagui';
-// import { SelectSimple } from '../../forms/SelectSimple';
-import { createWithLayout } from 'multiplatform.one';
-import { useLocale, useSupportedLocales } from '@multiplatform.one/locales';
-import { useTheme } from 'multiplatform.one/theme';
-import { useTint } from '../../tints';
+import { useLocale, useSupportedLocales } from "@multiplatform.one/locales";
 // @ts-ignore
-import { config } from 'app/config';
+import { config } from "app/config";
+import type { WithLayout } from "multiplatform.one";
+// import { SelectSimple } from '../../forms/SelectSimple';
+import { createWithLayout } from "multiplatform.one";
+import { useTheme } from "multiplatform.one/theme";
+import React from "react";
+import type { ComponentType, ReactNode } from "react";
+import type { ThemeName } from "tamagui";
+import { Adapt, Circle, Popover, Select, XStack, YStack } from "tamagui";
+import { useTint } from "../../tints";
 
-type ColorScheme = 'dark' | 'light';
+type ColorScheme = "dark" | "light";
 
 export interface DebugLayoutProps<DebugViewProps> {
   children: ReactNode;
@@ -47,9 +47,18 @@ export function DebugLayout<DebugViewProps>({
   children,
   debugView,
   debugViewProps,
-  rootThemeNames = ['system', 'light', 'dark'],
+  rootThemeNames = ["system", "light", "dark"],
   size = 12,
-  subThemeNames = ['blue', 'gray', 'green', 'orange', 'pink', 'purple', 'red', 'yellow'],
+  subThemeNames = [
+    "blue",
+    "gray",
+    "green",
+    "orange",
+    "pink",
+    "purple",
+    "red",
+    "yellow",
+  ],
 }: DebugLayoutProps<DebugViewProps>) {
   const { familiesNames, setFamily, name } = useTint();
   const DebugView = debugView;
@@ -110,7 +119,12 @@ export function DebugLayout<DebugViewProps>({
       <XStack gap="$4" margin="$4" width={size} height={size}>
         <Popover placement="right" size="$5">
           <Popover.Trigger>
-            <Circle cursor="pointer" backgroundColor="$color9" width={size} height={size} />
+            <Circle
+              cursor="pointer"
+              backgroundColor="$color9"
+              width={size}
+              height={size}
+            />
           </Popover.Trigger>
           <Adapt>
             <Popover.Sheet modal dismissOnSnapToBottom>
@@ -169,7 +183,7 @@ export function DebugLayout<DebugViewProps>({
     );
   }
 
-  if (config.get('DEBUG') !== '1') return <>{children}</>;
+  if (config.get("DEBUG") !== "1") return <>{children}</>;
   return (
     <YStack fullscreen>
       {children}

package/src/layouts/index.tsx

@@ -1 +1 @@
-export * from './Debug';
+export * from "./Debug";

package/src/mdx/ExternalIcon/ExternalIcon.stories.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { ExternalIcon } from './index';
-import type { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/react";
+import React from "react";
+import { ExternalIcon } from "./index";
 
 const meta: Meta = {
-  title: 'mdx/ExternalIcon',
+  title: "mdx/ExternalIcon",
   component: ExternalIcon,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 export const main = () => <ExternalIcon />;

package/src/mdx/ExternalIcon/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
+import React from "react";
+import { Path, Svg } from "react-native-svg";
 
 export function ExternalIcon() {
   return (

package/src/mdx/HR/HR.stories.tsx

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

package/src/mdx/HR/index.tsx

@@ -19,11 +19,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { EnsureFlexed, YStack } from 'tamagui';
+import React from "react";
+import { EnsureFlexed, YStack } from "tamagui";
 
 export const HR = () => (
-  <YStack marginTop="$10" marginBottom="$10" marginLeft="auto" marginRight="auto" maxWidth="50%">
+  <YStack
+    marginTop="$10"
+    marginBottom="$10"
+    marginLeft="auto"
+    marginRight="auto"
+    maxWidth="50%"
+  >
     <EnsureFlexed />
     <YStack borderBottomColor="$borderColor" borderBottomWidth={1} flex={1} />
   </YStack>

package/src/mdx/LI/LI.stories.tsx

@@ -1,15 +1,50 @@
-import React from 'react';
-import { Text } from 'tamagui';
-import { LI } from './index';
+/**
+ * File: /src/mdx/LI/LI.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 25-06-2024 16:50:25
+ * Author: Lavanya Katari
+ * -----
+ * 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 React from "react";
+import { Text } from "tamagui";
+import { LI } from "./index";
 
 export default {
-  title: 'mdx/LI',
+  title: "mdx/LI",
   component: LI,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
+  controls: {
+    argTypes: {
+      size: {
+        description: "Sets the size of the list item",
+        defaultValue: "$5",
+      },
+      tag: {
+        description: "Sets the HTML tag for the list item",
+        defaultValue: "li",
+      },
+    },
+  },
 };
 
-export const main = () => (
-  <LI>
+export const main = (args) => (
+  <LI {...args}>
     <Text>Hello world</Text>
   </LI>
 );
+const mainArgs = {};
+main.args = mainArgs;

package/src/mdx/LI/index.tsx

@@ -19,11 +19,11 @@
  * limitations under the License.
  */
 
-import { Paragraph, styled } from 'tamagui';
+import { Paragraph, styled } from "tamagui";
 
 export const LI = styled(Paragraph, {
-  display: 'list-item' as any,
-  tag: 'li',
-  size: '$5',
-  paddingBottom: '$1',
+  display: "list-item" as any,
+  tag: "li",
+  size: "$5",
+  paddingBottom: "$1",
 });

package/src/mdx/MDX/MDX.stories.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
-import { MDX } from './index';
+import type { Meta } from "@storybook/react";
+import React from "react";
+import { MDX } from "./index";
 
 const meta: Meta = {
-  title: 'mdx/MDX',
+  title: "mdx/MDX",
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 

package/src/mdx/MDX/index.tsx

@@ -19,12 +19,12 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { MDXComponents } from '@mdx-js/react/lib';
-import type { DebugProp } from '@tamagui/web';
-import { mdxComponents } from '../components';
-import { useCompileAndEvaluateMdx } from '../hooks';
-import { useMDXComponents } from '@mdx-js/react';
+import { useMDXComponents } from "@mdx-js/react";
+import type { MDXComponents } from "@mdx-js/react/lib";
+import type { DebugProp } from "@tamagui/web";
+import React from "react";
+import { mdxComponents } from "../components";
+import { useCompileAndEvaluateMdx } from "../hooks";
 
 export interface MDXProps {
   children: string;
@@ -39,7 +39,7 @@ export function MDX({ children, debug, ...props }: MDXProps) {
   const { Component, code, frontmatter } = useCompileAndEvaluateMdx(children);
   if (!Component) return <>{}</>;
   if (debug) {
-    logger.debug('MDX', { frontmatter });
+    logger.debug("MDX", { frontmatter });
     logger.debug(code);
   }
   return (

package/src/mdx/MDXCodeBlock/MDXCodeBlock.stories.tsx

@@ -19,23 +19,23 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { MDXCodeBlock } from './index';
-import { XStack, Text } from 'tamagui';
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Text, XStack } from "tamagui";
+import { MDXCodeBlock } from "./index";
 
 const meta: Meta = {
-  title: 'mdx/MDXCodeBlock',
+  title: "mdx/MDXCodeBlock",
   component: MDXCodeBlock,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 export const main: StoryObj<typeof MDXCodeBlock> = {
   args: {
     isCollapsible: false,
-    background: '$color3',
+    background: "$color3",
   },
   render: (args) => (
     <MDXCodeBlock {...args}>

package/src/mdx/MDXCodeBlock/MDXCodeBlockContext.ts

@@ -1,5 +1,5 @@
-import type { CodeProps } from '../../code/Code';
-import { createContext } from 'react';
+import { createContext } from "react";
+import type { CodeProps } from "../../code/Code";
 
 export interface MDXCodeBlockContextValue extends CodeProps {
   disableCopy?: boolean;