@multiplatform.one/components 0.2.0

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

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

package/src/images/Svg/index.ts

@@ -0,0 +1,8 @@
+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';
+
+export const Svg = styled(TSvg as typeof RNSvg, {});
+
+export type SvgProps = ComponentType<typeof Svg>;

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { StackPropsBase } from 'tamagui';
+import type { UriProps } from 'react-native-svg';
+
+const logger = console;
+
+export type SvgUriProps = StackPropsBase & UriProps;
+
+export function SvgUri(_props: SvgUriProps) {
+  logger.error('use SimpleImage instead of SvgUri');
+  return <>{}</>;
+}

package/src/images/index.ts

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

package/src/index.ts

@@ -0,0 +1,10 @@
+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 './panels';
+export * from './table';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Text } from 'tamagui';
+import { withDebugLayout } from './index';
+
+export default {
+  title: 'layouts/Debug',
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+const Main = withDebugLayout(() => <Text>Hello, world!</Text>);
+export const main = () => <Main />;

package/src/layouts/Debug/index.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import type { ComponentType, ReactNode } from 'react';
+import type { ThemeName } from 'tamagui';
+import type { WithLayout } from 'multiplatform.one';
+import { Select, YStack, ZStack, XStack, Adapt, Popover, Circle } from 'tamagui';
+import { SelectSimple } from '../../forms/SelectSimple';
+import { createWithLayout } from 'multiplatform.one';
+import { useLocale } from 'multiplatform.one';
+import { useSupportedLocales } from 'multiplatform.one';
+// @ts-ignore
+import { config } from 'app/config';
+// @ts-ignore
+import { useThemeState } from 'app/state/theme';
+
+type ColorScheme = 'dark' | 'light';
+
+export interface DebugLayoutProps<DebugViewProps> {
+  children: ReactNode;
+  debugView?: ComponentType<DebugViewProps>;
+  debugViewProps?: DebugViewProps;
+  rootThemeNames?: string[];
+  subThemeNames?: string[];
+}
+
+export function DebugLayout<DebugViewProps>({
+  children,
+  debugView,
+  debugViewProps,
+  rootThemeNames,
+  subThemeNames,
+}: DebugLayoutProps<DebugViewProps>) {
+  const DebugView = debugView;
+  const [locale, setLocale] = useLocale();
+  const themeState = useThemeState();
+  const supportedLocales = useSupportedLocales();
+
+  function handleSubThemeChange(subTheme: ThemeName) {
+    themeState.setSub(subTheme);
+  }
+
+  function handleRootThemeChange(rootTheme: ThemeName) {
+    themeState.setRoot(rootTheme as ColorScheme);
+  }
+
+  function renderSubThemeItems() {
+    return (subThemeNames || []).map((name: string, i: number) => {
+      return (
+        <Select.Item key={i + name} index={i} value={name}>
+          <Select.ItemText>{name}</Select.ItemText>
+        </Select.Item>
+      );
+    });
+  }
+
+  function renderRootThemeItems() {
+    return (rootThemeNames || []).map((name: string, i: number) => {
+      return (
+        <Select.Item key={i + name} index={i} value={name}>
+          <Select.ItemText>{name}</Select.ItemText>
+        </Select.Item>
+      );
+    });
+  }
+
+  function renderLocaleItems() {
+    return (supportedLocales || []).map((name: string, i: number) => {
+      return (
+        <Select.Item key={i + name} index={i} value={name}>
+          <Select.ItemText>{name}</Select.ItemText>
+        </Select.Item>
+      );
+    });
+  }
+
+  function renderDebug() {
+    return (
+      <XStack space padding="$4" zIndex={9999}>
+        <Popover placement="right" size="$5">
+          <Popover.Trigger>
+            <Circle cursor="pointer" backgroundColor="$color9" width={8} height={8} />
+          </Popover.Trigger>
+          <Adapt>
+            <Popover.Sheet modal dismissOnSnapToBottom>
+              <Popover.Sheet.Frame padding="$4">
+                <Adapt.Contents />
+              </Popover.Sheet.Frame>
+              <Popover.Sheet.Overlay />
+            </Popover.Sheet>
+          </Adapt>
+          <Popover.Content borderWidth={1} borderColor="$borderColor" elevate>
+            <XStack space>
+              <SelectSimple
+                id="root-theme"
+                placeholder={themeState.root}
+                width={96}
+                value={themeState.root}
+                onValueChange={handleRootThemeChange}
+              >
+                {renderRootThemeItems()}
+              </SelectSimple>
+              <SelectSimple
+                id="sub-theme"
+                placeholder={themeState.sub}
+                width={96}
+                backgroundColor="$color5"
+                value={themeState.sub}
+                onValueChange={handleSubThemeChange}
+              >
+                {renderSubThemeItems()}
+              </SelectSimple>
+              <SelectSimple
+                id="locales"
+                width={96}
+                placeholder={locale}
+                backgroundColor="$color10"
+                value={locale}
+                onValueChange={setLocale}
+              >
+                {renderLocaleItems()}
+              </SelectSimple>
+            </XStack>
+            {DebugView && <DebugView {...(debugViewProps as any)} />}
+          </Popover.Content>
+        </Popover>
+      </XStack>
+    );
+  }
+
+  if (config.get('DEBUG') !== '1') {
+    return <>{children}</>;
+  }
+  return (
+    <ZStack fullscreen>
+      {renderDebug()}
+      <YStack fullscreen>{children}</YStack>
+    </ZStack>
+  );
+}
+
+DebugLayout.defaultProps = {
+  rootThemeNames: ['light', 'dark'],
+  subThemeNames: ['blue', 'gray', 'green', 'orange', 'pink', 'purple', 'red', 'yellow'],
+};
+
+export function createWithDebugLayout<DebugViewProps>(
+  extraLayouts?: WithLayout<any>[],
+  debugLayoutProps: CreateWithDebugLayout<DebugViewProps> = {},
+) {
+  return createWithLayout(DebugLayout, extraLayouts, debugLayoutProps);
+}
+
+export const withDebugLayout = createWithDebugLayout();
+
+interface CreateWithDebugLayout<DebugViewProps> {
+  debugView?: ComponentType<DebugViewProps>;
+  debugViewProps?: DebugViewProps;
+  rootThemeNames?: string[];
+  subThemeNames?: string[];
+}

package/src/layouts/index.tsx

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

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

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

package/src/mdx/ExternalIcon/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+export function ExternalIcon() {
+  return (
+    <Svg style={{ opacity: 0.4 }} width="100" height="100" viewBox="0 0 15 15">
+      <Path
+        d="M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z"
+        fill="var(--color)"
+      />
+    </Svg>
+  );
+}

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

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

package/src/mdx/HR/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { EnsureFlexed, YStack } from 'tamagui';
+
+export const HR = () => (
+  <YStack my="$10" mx="auto" maxWidth="50%">
+    <EnsureFlexed />
+    <YStack borderBottomColor="$borderColor" borderBottomWidth={1} flex={1} />
+  </YStack>
+);

package/src/mdx/LI/index.tsx

@@ -0,0 +1,8 @@
+import { Paragraph, styled } from 'tamagui';
+
+export const LI = styled(Paragraph, {
+  display: 'list-item' as any,
+  tag: 'li',
+  size: '$5',
+  pb: '$1',
+});

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { MDX } from './index';
+
+const meta: Meta = {
+  title: 'mdx/MDX',
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+const mdxSource = `
+# Hello
+
+> I am a blockquote
+
+# H1
+## H2
+#### H4
+
+[example.com](https://example.com)
+
+\`\`\`tsx
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+const hello = "world";
+\`\`\`
+`;
+
+export const main = () => <MDX debug>{mdxSource}</MDX>;
+
+export default meta;

package/src/mdx/MDX/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Components } 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';
+
+export interface MDXProps {
+  children: string;
+  components?: Components;
+  debug?: DebugProp;
+}
+
+const logger = console;
+
+export function MDX({ children, debug, ...props }: MDXProps) {
+  const components = useMDXComponents();
+  const { Component, code, frontmatter } = useCompileAndEvaluateMdx(children);
+  if (!Component) return <>{}</>;
+  if (debug) {
+    logger.debug('MDX', { frontmatter });
+    logger.debug(code);
+  }
+  return (
+    <Component
+      components={{
+        ...mdxComponents,
+        ...components,
+        ...props.components,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MDXCodeBlock } from './index';
+import { XStack, Text } from 'tamagui';
+
+const meta: Meta = {
+  title: 'mdx/MDXCodeBlock',
+  component: MDXCodeBlock,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main: StoryObj<typeof MDXCodeBlock> = {
+  args: {
+    isCollapsible: false,
+    bg: '$color3',
+  },
+  render: (args) => (
+    <MDXCodeBlock {...args}>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+      <XStack>
+        <Text>const hello = &quot;world&quot;</Text>
+      </XStack>
+    </MDXCodeBlock>
+  ),
+};
+
+export default meta;

package/src/mdx/MDXCodeBlock/MDXCodeBlockContext.ts

@@ -0,0 +1,11 @@
+import type { CodeProps } from '../../code/Code';
+import { createContext } from 'react';
+
+export interface MDXCodeBlockContextValue extends CodeProps {
+  disableCopy?: boolean;
+  isCollapsible?: boolean;
+  isHighlightingLines?: boolean;
+  showLineNumbers?: boolean;
+}
+
+export const MDXCodeBlockContext = createContext<MDXCodeBlockContextValue>({});

package/src/mdx/MDXCodeBlock/index.tsx

@@ -0,0 +1,134 @@
+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';
+
+export interface MDXCodeBlockProps extends MDXCodeBlockContextValue {
+  className?: string;
+  id?: string;
+}
+
+export function MDXCodeBlock(props: MDXCodeBlockProps) {
+  const {
+    children,
+    className,
+    disableCopy,
+    id,
+    isCollapsible,
+    isHighlightingLines,
+    showLineNumbers: propShowLineNumbers,
+    size,
+    ...codeProps
+  } = { ...useContext(MDXCodeBlockContext), ...props };
+  const lines = Array.isArray(children) ? children.length : 0;
+  const showLineNumbers = propShowLineNumbers ?? (lines > 10 ? true : false);
+  const [isCollapsed, setIsCollapsed] = useState(isCollapsible);
+  const isLong = lines > 22;
+  const [isCutoff, setIsCutoff] = useState(isLong && !isCollapsible);
+  const [code, setCode] = useState(undefined);
+  const preRef = useRef<any>(null);
+  const { hasCopied, onCopy } = useClipboard(code);
+  const tokens = getTokens();
+
+  useEffect(() => {
+    try {
+      if (preRef.current) {
+        const codeElement = preRef.current.querySelector('code');
+        if (codeElement) {
+          const code = codeElement.innerText.replace(/\n{3,}/g, '\n');
+          setCode(code);
+        }
+      }
+    } catch {}
+  }, [preRef]);
+
+  return (
+    <YStack position="relative" mb="$4">
+      <ErrorBoundary>
+        <YStack
+          position="relative"
+          {...(isCutoff && {
+            maxHeight: 400,
+            ov: 'hidden',
+            br: '$4',
+          })}
+        >
+          {(!isCollapsed || !isCollapsible) && isCutoff && (
+            <LinearGradient
+              pos="absolute"
+              b={0}
+              l={0}
+              r={0}
+              height={200}
+              colors={['$backgroundTransparent', '$background']}
+              zi={1000}
+            >
+              <Spacer f={1} />
+              <Button onPress={() => setIsCutoff(!isCutoff)} als="center">
+                Show more
+              </Button>
+              <Spacer size="$4" />
+            </LinearGradient>
+          )}
+          {(!isCollapsed || !isCollapsible) && (
+            <Pre
+              ref={preRef}
+              data-invert-line-highlight={isHighlightingLines}
+              data-line-numbers={showLineNumbers}
+              className={className}
+              p={0}
+              mb={0}
+              id={id}
+            >
+              <ScrollView
+                style={{ width: '100%' }}
+                contentContainerStyle={{ minWidth: '100%' }}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+              >
+                <Code
+                  backgroundColor="transparent"
+                  className={className}
+                  f={1}
+                  lineHeight={tokens.space[size || '$5']}
+                  p="$4"
+                  size={size ?? '$5'}
+                  {...codeProps}
+                >
+                  {children}
+                </Code>
+              </ScrollView>
+            </Pre>
+          )}
+          <XStack position="absolute" top="$3" right="$3" space="$3">
+            {(!isCollapsed || !isCollapsible) && !disableCopy && (
+              <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',
+                  }}
+                />
+              </TooltipSimple>
+            )}
+            {isCollapsible && (
+              <Button accessibilityLabel="Show or hide code" size="$2" onPress={() => setIsCollapsed((x) => !x)}>
+                {isCollapsed ? 'Show code' : 'Hide code'}
+              </Button>
+            )}
+          </XStack>
+        </YStack>
+      </ErrorBoundary>
+    </YStack>
+  );
+}

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

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

package/src/mdx/UL/index.ts

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