@multiplatform.one/components 5.0.1 → 5.0.4

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,14 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { StackProps } from 'tamagui';
-import type { UriProps } from 'react-native-svg';
+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,20 @@
  * 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";
+
+// TODO: use another name so it doesn't conflict with tamagui
+export { Form, useFormContext } from "./forms";
+export type { FormProps } from "./forms";

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

@@ -19,17 +19,18 @@
  * 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 { 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,18 @@
  * 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 i18n from "i18next";
+import type { WithLayout } from "multiplatform.one";
+import { config } from "multiplatform.one";
+import { createWithLayout, useLanguage } from "multiplatform.one";
+import { useTheme } from "multiplatform.one/theme";
 // 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';
-// @ts-ignore
-import { config } from 'app/config';
+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,15 +45,23 @@ 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;
   const [theme, setTheme] = useTheme();
-  const [locale, setLocale] = useLocale();
-  const supportedLocales = useSupportedLocales();
+  const [language, setLanguage] = useLanguage();
 
   function handleSubThemeChange(subTheme: ThemeName) {
     setTheme({ sub: subTheme });
@@ -85,8 +91,9 @@ export function DebugLayout<DebugViewProps>({
     });
   }
 
+  // TODO: fix this
   function renderLocaleItems() {
-    return (supportedLocales || []).map((name: string, i: number) => {
+    return (i18n?.languages || []).map((name: string, i: number) => {
       return (
         <Select.Item key={i + name} index={i} value={name}>
           <Select.ItemText>{name}</Select.ItemText>
@@ -110,7 +117,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>
@@ -121,7 +133,7 @@ export function DebugLayout<DebugViewProps>({
             </Popover.Sheet>
           </Adapt>
           <Popover.Content borderWidth={1} borderColor="$borderColor" elevate>
-            <XStack gap>
+            <XStack gap="$4">
               {/* <SelectSimple
                 id="root-theme"
                 placeholder={theme.root}
@@ -146,8 +158,8 @@ export function DebugLayout<DebugViewProps>({
                 width={96}
                 placeholder={locale}
                 backgroundColor="$color10"
-                value={locale}
-                onValueChange={setLocale}
+                value={language}
+                onValueChange={setLanguage}
               >
                 {renderLocaleItems()}
               </SelectSimple>
@@ -169,7 +181,7 @@ export function DebugLayout<DebugViewProps>({
     );
   }
 
-  if (config.get('DEBUG') !== '1') return <>{children}</>;
+  if (config.get("DEBUG") !== "1") return <>{children}</>;
   return (
     <YStack fullscreen>
       {children}
@@ -179,10 +191,14 @@ export function DebugLayout<DebugViewProps>({
 }
 
 export function createWithDebugLayout<DebugViewProps>(
-  extraLayouts?: WithLayout<any>[],
+  extraLayouts?: WithLayout[],
   debugLayoutProps: CreateWithDebugLayout<DebugViewProps> = {},
 ) {
-  return createWithLayout(DebugLayout, extraLayouts, debugLayoutProps);
+  return createWithLayout<DebugLayoutProps<DebugViewProps>>(
+    DebugLayout,
+    extraLayouts,
+    debugLayoutProps,
+  );
 }
 
 export const withDebugLayout = createWithDebugLayout();

package/src/layouts/index.tsx

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

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

@@ -1,11 +1,10 @@
-import React from 'react';
-import { ExternalIcon } from './index';
-import type { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/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,4 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
+import { Path, Svg } from "react-native-svg";
 
 export function ExternalIcon() {
   return (

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

@@ -1,10 +1,9 @@
-import React from 'react';
-import { HR } from './index';
+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,16 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { EnsureFlexed, YStack } from 'tamagui';
+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,49 @@
-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 { 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,10 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
-import { MDX } from './index';
+import type { Meta } from "@storybook/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,11 @@
  * 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 { DebugProp } from "@tamagui/web";
+import type { MDXComponents } from "mdx/types";
+import { mdxComponents } from "../components";
+import { useCompileAndEvaluateMdx } from "../hooks";
 
 export interface MDXProps {
   children: string;
@@ -39,7 +38,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,22 @@
  * 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 { 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;

package/src/mdx/MDXCodeBlock/index.tsx

@@ -19,17 +19,24 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState, useContext } from 'react';
-import type { MDXCodeBlockContextValue } from './MDXCodeBlockContext';
-import { Button, Spacer, TooltipSimple, XStack, YStack, getTokens } from 'tamagui';
-import { CheckCircle, Clipboard } from '@tamagui/lucide-icons';
-import { Code } from '../../code/Code';
-import { ErrorBoundary } from '../../ErrorBoundary';
-import { LinearGradient } from '@tamagui/linear-gradient';
-import { MDXCodeBlockContext } from './MDXCodeBlockContext';
-import { Pre } from '../../code/Pre';
-import { ScrollView } from 'react-native';
-import { useClipboard } from '../../hooks/useClipboard';
+import { LinearGradient } from "@tamagui/linear-gradient";
+import { CheckCircle, Clipboard } from "@tamagui/lucide-icons";
+import { useContext, useEffect, useRef, useState } from "react";
+import { ScrollView } from "tamagui";
+import {
+  Button,
+  Spacer,
+  TooltipSimple,
+  XStack,
+  YStack,
+  getTokens,
+} from "tamagui";
+import { ErrorBoundary } from "../../ErrorBoundary";
+import { Code } from "../../code/Code";
+import { Pre } from "../../code/Pre";
+import { useClipboard } from "../../hooks/useClipboard";
+import type { MDXCodeBlockContextValue } from "./MDXCodeBlockContext";
+import { MDXCodeBlockContext } from "./MDXCodeBlockContext";
 
 export interface MDXCodeBlockProps extends MDXCodeBlockContextValue {
   className?: string;
@@ -49,7 +56,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
     ...codeProps
   } = { ...useContext(MDXCodeBlockContext), ...props };
   const lines = Array.isArray(children) ? children.length : 0;
-  const showLineNumbers = propShowLineNumbers ?? (lines > 10 ? true : false);
+  const showLineNumbers = propShowLineNumbers ?? lines > 10;
   const [isCollapsed, setIsCollapsed] = useState(isCollapsible);
   const isLong = lines > 22;
   const [isCutoff, setIsCutoff] = useState(isLong && !isCollapsible);
@@ -61,9 +68,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
   useEffect(() => {
     try {
       if (preRef.current) {
-        const codeElement = preRef.current.querySelector('code');
+        const codeElement = preRef.current.querySelector("code");
         if (codeElement) {
-          const code = codeElement.innerText.replace(/\n{3,}/g, '\n');
+          const code = codeElement.innerText.replace(/\n{3,}/g, "\n");
           setCode(code);
         }
       }
@@ -77,8 +84,8 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
           position="relative"
           {...(isCutoff && {
             maxHeight: 400,
-            ov: 'hidden',
-            br: '$4',
+            ov: "hidden",
+            br: "$4",
           })}
         >
           {(!isCollapsed || !isCollapsible) && isCutoff && (
@@ -88,7 +95,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
               left={0}
               right={0}
               height={200}
-              colors={['$backgroundTransparent', '$background']}
+              colors={["$backgroundTransparent", "$background"]}
               zIndex={1000}
             >
               <Spacer flex={1} />
@@ -109,8 +116,8 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
               id={id}
             >
               <ScrollView
-                style={{ width: '100%' }}
-                contentContainerStyle={{ minWidth: '100%' }}
+                style={{ width: "100%" }}
+                contentContainerStyle={{ minWidth: "100%" }}
                 horizontal
                 showsHorizontalScrollIndicator={false}
               >
@@ -118,9 +125,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
                   backgroundColor="transparent"
                   className={className}
                   flex={1}
-                  lineHeight={tokens.space[size || '$5'] as any}
+                  lineHeight={tokens.space[size || "$5"] as any}
                   padding="$4"
-                  size={size ?? '$5'}
+                  size={size ?? "$5"}
                   {...codeProps}
                 >
                   {children}
@@ -130,21 +137,25 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
           )}
           <XStack position="absolute" top="$3" right="$3" gap="$3">
             {(!isCollapsed || !isCollapsible) && !disableCopy && (
-              <TooltipSimple label={hasCopied ? 'Copied' : 'Copy to clipboard'}>
+              <TooltipSimple label={hasCopied ? "Copied" : "Copy to clipboard"}>
                 <Button
                   aria-label="Copy code to clipboard"
                   size="$2"
                   icon={hasCopied ? CheckCircle : Clipboard}
                   onPress={onCopy}
                   $xs={{
-                    display: 'none',
+                    display: "none",
                   }}
                 />
               </TooltipSimple>
             )}
             {isCollapsible && (
-              <Button accessibilityLabel="Show or hide code" size="$2" onPress={() => setIsCollapsed((x) => !x)}>
-                {isCollapsed ? 'Show code' : 'Hide code'}
+              <Button
+                accessibilityLabel="Show or hide code"
+                size="$2"
+                onPress={() => setIsCollapsed((x) => !x)}
+              >
+                {isCollapsed ? "Show code" : "Hide code"}
               </Button>
             )}
           </XStack>

package/src/mdx/UL/UL.stories.tsx

@@ -19,19 +19,33 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Text } from 'tamagui';
-import { UL } from './index';
+import { Text } from "tamagui";
+import { UL } from "./index";
 
 export default {
-  title: 'mdx/UL',
+  title: "mdx/UL",
   component: UL,
-  parameters: { status: { type: 'beta' } },
-  controls: true,
+  parameters: { status: { type: "beta" } },
+  controls: {
+    argTypes: {
+      marginVertical: {
+        description: "Sets the vertical margin of the unordered list",
+        defaultValue: "$1",
+      },
+      marginLeft: {
+        description: "Sets the left margin of the unordered list",
+        defaultValue: "$4",
+      },
+      marginRight: {
+        description: "Sets the right margin of the unordered list",
+        defaultValue: "$2",
+      },
+    },
+  },
 };
 
 export const main = (args) => (
-  <UL>
+  <UL {...args}>
     <Text>Hello world</Text>
   </UL>
 );

package/src/mdx/UL/index.ts

@@ -1,8 +1,8 @@
-import { YStack, styled } from 'tamagui';
+import { YStack, styled } from "tamagui";
 
 export const UL = styled(YStack, {
-  tag: 'ul',
-  marginVertical: '$1',
-  marginLeft: '$4',
-  marginRight: '$2',
+  tag: "ul",
+  marginVertical: "$1",
+  marginLeft: "$4",
+  marginRight: "$2",
 });