@multiplatform.one/components 0.2.0

package/src/mdx/components.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import type { Components } from '@mdx-js/react/lib';
+import type { XStackProps } from 'tamagui';
+import { CodeInline } from '../code/Code';
+import { H1, H2, H3, H4, H5, H6, Paragraph, XStack, Text, YStack, styled } from 'tamagui';
+import { HR } from './HR';
+import { LI } from './LI';
+import { Link as IconLink } from '@tamagui/lucide-icons';
+import { Link } from 'solito/link';
+import { MDXCodeBlock } from './MDXCodeBlock';
+import { Platform } from 'react-native';
+import { UL } from './UL';
+import { unwrapText } from '../utils/unwrapText';
+
+const code = ({ hero, line, scrollable, className, children, id, showLineNumbers, collapsible, ...props }) => {
+  if (!className) return <CodeInline>{unwrapText(children)}</CodeInline>;
+  return (
+    <YStack marginTop="$3">
+      <MDXCodeBlock
+        className={className}
+        isHighlightingLines={line !== undefined}
+        showLineNumbers={showLineNumbers !== undefined}
+        {...sanitizeProps(props)}
+      >
+        {children}
+      </MDXCodeBlock>
+    </YStack>
+  );
+};
+
+export const TableHighlight = styled(YStack, {
+  backgroundColor: '$yellow1',
+  fullscreen: true,
+});
+
+export const mdxComponents: Components = {
+  h1: (props) => <H1 marginBottom="$2" {...sanitizeProps(props)} />,
+  h2: (props) => <H2 paddingTop="$8" marginTop="$-4" marginBottom="$2" data-heading {...sanitizeProps(props)} />,
+  h3: ({ children, id, ...props }) => (
+    <LinkHeading paddingTop="$8" marginTop="$-4" marginBottom="$1" id={id}>
+      <H3 nativeID={id} {...sanitizeProps(props)}>
+        {children}
+      </H3>
+      {getNonTextChildren(children)}
+    </LinkHeading>
+  ),
+  h4: (props) => <H4 marginTop="$4" marginBottom="$3" {...sanitizeProps(props)} />,
+  h5: (props) => <H5 marginTop="$4" {...sanitizeProps(props)} />,
+  h6: (props) => <H6 marginTop="$4" {...sanitizeProps(props)} />,
+  p: (props) => <Paragraph size="$6" marginVertical="$2.5" {...sanitizeProps(props)} />,
+  a: ({ href = '', children, ...props }) => {
+    return (
+      <Link href={href}>
+        <Paragraph fontSize="inherit" display="inline" cursor="pointer" {...sanitizeProps(props)}>
+          {children}
+          {/* {typeof href === 'string' && href.startsWith('http') ? (
+            <>
+              <Text>&nbsp;</Text>
+              <Text fontSize="inherit" display="inline-flex" y={2} ml={-1}>
+                <ExternalIcon />
+              </Text>
+            </>
+          ) : null} */}
+        </Paragraph>
+      </Link>
+    );
+  },
+  hr: (props) => <HR {...sanitizeProps(props)} />,
+  ul: ({ children }) => (
+    <UL marginVertical="$4">{React.Children.toArray(children).map((x) => (typeof x === 'string' ? null : x))}</UL>
+  ),
+  ol: (props) => <YStack {...sanitizeProps(props)} marginBottom="$3" />,
+  li: (props) => (
+    <LI size="$6" marginVertical="$1.5" className="docs-paragraph">
+      {props.children}
+    </LI>
+  ),
+  strong: (props) => <Paragraph fontSize="inherit" {...sanitizeProps(props)} fontWeight="700" />,
+  img: ({ ...props }) => (
+    <YStack marginVertical="$6">
+      <YStack {...sanitizeProps(props)} maxWidth="100%" />
+    </YStack>
+  ),
+  pre: ({ children }) => <>{children}</>,
+  code,
+  blockquote: ({ children, ...props }) => (
+    <YStack
+      borderColor="$borderColor"
+      borderLeftWidth={1}
+      justifyContent="center"
+      marginLeft="$3"
+      marginVertical="$4"
+      paddingHorizontal="$6"
+      {...sanitizeProps(props)}
+    >
+      <Paragraph
+        color="$color"
+        fontFamily="$silkscreen"
+        fontWeight="300"
+        lineHeight="$9"
+        letterSpacing="$0"
+        opacity={0.65}
+        size="$8"
+        whiteSpace="revert"
+      >
+        {unwrapText(children)}
+      </Paragraph>
+    </YStack>
+  ),
+  ...(Platform.OS === 'web'
+    ? {}
+    : {
+        div: (props) => <Text {...sanitizeProps(props)} />,
+        span: (props: any) => {
+          let color: string | undefined;
+          if (/^token punctuation/g.test(props?.className || '')) {
+            color = '$red10';
+          }
+          return <Text color={color} {...sanitizeProps(props)} />;
+        },
+      }),
+};
+
+const LinkHeading = ({ id, children, ...props }: { id?: string } & XStackProps) => (
+  <XStack
+    href={`#${id}`}
+    id={id}
+    data-id={id}
+    display="inline-flex"
+    alignItems="center"
+    space
+    {...sanitizeProps(props)}
+  >
+    {children}
+    <YStack opacity={0.3}>
+      <IconLink size={12} color="var(--color)" aria-hidden />
+    </YStack>
+  </XStack>
+);
+
+const getNonTextChildren = (children) => {
+  return React.Children.map(children, (x) => {
+    if (typeof x === 'string') return null;
+    if (x['type'] === code) return null;
+    return x;
+  }).flat();
+};
+
+function sanitizeProps<P>(props: any): P {
+  if (Platform.OS !== 'web') return props;
+  return props;
+}

package/src/mdx/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useCompileAndEvaluateMdx';
+export * from './useCompileMdx';
+export * from './useEvaluateMdx';

package/src/mdx/hooks/useCompileAndEvaluateMdx.ts

@@ -0,0 +1,13 @@
+import { useCompileMdx } from './useCompileMdx';
+import { useEvaluateMdx } from './useEvaluateMdx';
+
+export function useCompileAndEvaluateMdx(
+  source: string,
+  compileOptions?: Record<string, any>,
+  evaluateOptions?: Record<string, any>,
+) {
+  const { code, frontmatter } = useCompileMdx(source, compileOptions);
+  const Component = useEvaluateMdx(code, evaluateOptions);
+  if (!code || !frontmatter || !Component) return {};
+  return { Component, code, frontmatter };
+}

package/src/mdx/hooks/useCompileMdx.ts

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+
+export function useCompileMdx(
+  source: string,
+  options?: Record<string, any>,
+): {
+  code?: string;
+  frontmatter?: Record<string, any>;
+} {
+  const [code, setCode] = useState<string | undefined>();
+  const [frontmatter, setFrontmatter] = useState<Record<string, any> | undefined>();
+
+  useEffect(() => {
+    (async () => {
+      const [
+        { compile },
+        { default: grayMatter },
+        { default: rehypeAutolinkHeadings },
+        { default: rehypeSlug },
+        { default: remarkFrontmatter },
+        { default: remarkMdxFrontmatter },
+        { rehypeHighlightCode },
+        { rehypeMetaAttributes },
+      ] = await Promise.all([
+        import('@mdx-js/mdx'),
+        import('gray-matter'),
+        import('rehype-autolink-headings'),
+        import('rehype-slug'),
+        import('remark-frontmatter'),
+        import('remark-mdx-frontmatter'),
+        import('../util/rehypeHighlightCode'),
+        import('../util/rehypeMetaAttributes'),
+      ]);
+      const { value } = await compile(source, {
+        ...options,
+        development: false,
+        outputFormat: 'function-body',
+        useDynamicImport: true,
+        remarkPlugins: [
+          ...(options?.remarkPlugins || []),
+          [remarkMdxFrontmatter, { name: 'frontmatter' }],
+          remarkFrontmatter,
+        ],
+        rehypePlugins: [
+          ...(options?.rehypePlugins || []),
+          rehypeAutolinkHeadings,
+          rehypeHighlightCode,
+          rehypeMetaAttributes,
+          rehypeSlug,
+        ],
+      });
+      setCode(value.toString());
+      setFrontmatter(grayMatter(source));
+    })();
+  }, [source, options]);
+
+  if (!code || !frontmatter) return {};
+  return { code, frontmatter };
+}

package/src/mdx/hooks/useEvaluateMdx.ts

@@ -0,0 +1,27 @@
+import * as jsxRuntime from 'react/jsx-runtime';
+import type { ComponentType } from 'react';
+import type { Components } from '@mdx-js/react/lib';
+import { useState, useEffect } from 'react';
+
+export function useEvaluateMdx(code?: string, options?: Record<string, any>) {
+  const [Component, setComponent] = useState<ComponentType<{ components?: Record<string, any> }>>();
+
+  useEffect(() => {
+    if (!code) return;
+    setComponent(() => evaluateMdx(code, options));
+  }, [code, options]);
+
+  return Component;
+}
+
+function evaluateMdx(code: string, options?: Record<string, any>) {
+  return run(code, {
+    ...jsxRuntime,
+    ...options,
+  }).default as ComponentType<{ components?: Components }>;
+}
+
+const AsyncFunction = Object.getPrototypeOf(run).constructor;
+function run(code: string, options: Record<string, any>) {
+  return new AsyncFunction(String(code))(options);
+}

package/src/mdx/index.ts

@@ -0,0 +1,8 @@
+export * from './ExternalIcon';
+export * from './HR';
+export * from './LI';
+export * from './MDX';
+export * from './MDXCodeBlock';
+export * from './UL';
+export * from './components';
+export * from './hooks';

package/src/mdx/util/rehypeHighlightCode.ts

@@ -0,0 +1,28 @@
+// https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-code.ts
+
+import rangeParser from 'parse-numeric-range';
+import tsx from 'refractor/lang/tsx';
+import { refractor } from 'refractor';
+import { rehypeHighlightLine } from './rehypeHighlightLine';
+import { rehypeHighlightWord } from './rehypeHighlightWord';
+import { toString } from 'hast-util-to-string';
+import { visit } from 'unist-util-visit';
+
+refractor.register(tsx);
+
+export function rehypeHighlightCode(_options = {}) {
+  function visitor(node: any, index: any, parent: any) {
+    if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code' || !node.properties.className) {
+      return;
+    }
+    const [, lang] = node.properties.className[0].split('-');
+    const codeString = toString(node);
+    let result = refractor.highlight(codeString, lang);
+    const linesToHighlight = rangeParser(node.properties.line || '0');
+    result = rehypeHighlightLine(result, linesToHighlight);
+    node.children = rehypeHighlightWord(result);
+  }
+  return (tree: any) => {
+    visit(tree, 'element', visitor);
+  };
+}

package/src/mdx/util/rehypeHighlightLine.ts

@@ -0,0 +1,100 @@
+// https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-line.ts
+
+import parse from 'rehype-parse';
+import { toHtml } from 'hast-util-to-html';
+import { unified } from 'unified';
+
+export function rehypeHighlightLine(ast: any, lines: any[]) {
+  const formattedAst = applyMultilineFix(ast);
+  const numbered = lineNumberify(formattedAst).nodes;
+  return wrapLines(numbered, lines);
+}
+
+function lineNumberify(ast: any, lineNum = 1) {
+  let lineNumber = lineNum;
+  return ast.reduce(
+    (result: any, node: any) => {
+      if (node.type === 'text') {
+        if (node.value.indexOf('\n') === -1) {
+          node.lineNumber = lineNumber;
+          result.nodes.push(node);
+          return result;
+        }
+        const lines = node.value.split('\n');
+        for (let i = 0; i < lines.length; i++) {
+          if (i !== 0) ++lineNumber;
+          if (i === lines.length - 1 && lines[i].length === 0) continue;
+          result.nodes.push({
+            type: 'text',
+            value: i === lines.length - 1 ? lines[i] : `${lines[i]}\n`,
+            lineNumber: lineNumber,
+          });
+        }
+        result.lineNumber = lineNumber;
+        return result;
+      }
+      if (node.children) {
+        node.lineNumber = lineNumber;
+        const processed = lineNumberify(node.children, lineNumber);
+        node.children = processed.nodes;
+        result.lineNumber = processed.lineNumber;
+        result.nodes.push(node);
+        return result;
+      }
+      result.nodes.push(node);
+      return result;
+    },
+    { nodes: [], lineNumber: lineNumber },
+  );
+}
+
+function wrapLines(ast: any[], linesToHighlight: any) {
+  const highlightAll = linesToHighlight.length === 1 && linesToHighlight[0] === 0;
+  const allLines: any[] = Array.from(new Set(ast.map((x) => x.lineNumber)));
+  let i = 0;
+  const wrapped = allLines.reduce((nodes, marker) => {
+    const line = marker;
+    const children: any[] = [];
+    for (; i < ast.length; i++) {
+      if (ast[i].lineNumber < line) {
+        nodes.push(ast[i]);
+        continue;
+      }
+      if (ast[i].lineNumber === line) {
+        children.push(ast[i]);
+        continue;
+      }
+      if (ast[i].lineNumber > line) {
+        break;
+      }
+    }
+    nodes.push({
+      type: 'element',
+      tagName: 'div',
+      properties: {
+        dataLine: line,
+        className: 'highlight-line',
+        dataHighlighted: linesToHighlight.includes(line) || highlightAll ? 'true' : 'false',
+      },
+      children,
+      lineNumber: line,
+    });
+    return nodes;
+  }, []);
+  return wrapped;
+}
+
+// https://github.com/gatsbyjs/gatsby/pull/26161/files
+const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g;
+
+function applyMultilineFix(ast: any) {
+  // AST to HTML
+  let html = toHtml(ast);
+  // Fix JSX issue
+  html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
+    match.replace(/\n/g, `</span>\n<span class="token ${token}">`),
+  );
+  // HTML to AST
+  const hast = unified().use(parse, { emitParseErrors: true, fragment: true }).parse(html);
+  return hast.children;
+}

package/src/mdx/util/rehypeHighlightWord.ts

@@ -0,0 +1,15 @@
+// https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-word.ts
+
+import parse from 'rehype-parse';
+import type { Node, Content } from 'hast-util-to-html/lib';
+import { toHtml } from 'hast-util-to-html';
+import { unified } from 'unified';
+
+const CALLOUT = /__(.*?)__/g;
+
+export function rehypeHighlightWord(code: Node | Content[]) {
+  const html = toHtml(code);
+  const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
+  const hast = unified().use(parse, { emitParseErrors: true, fragment: true }).parse(result);
+  return hast.children;
+}

package/src/mdx/util/rehypeMetaAttributes.ts

@@ -0,0 +1,19 @@
+// https://github.com/wooorm/xdm#syntax-highlighting-with-the-meta-field
+
+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) {
+      re.lastIndex = 0; // Reset regex.
+      while ((match = re.exec(node.data.meta))) {
+        node.properties[match[1]] = match[2] || match[3] || match[4] || '';
+      }
+    }
+  }
+  return (tree: any) => {
+    visit(tree, 'element', onElement);
+  };
+}

package/src/panels/SimpleAlertDialog/SImpleAlertDialog.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SimpleAlertDialog } from './index';
+import type { Meta } from '@storybook/react';
+import { Text } from 'tamagui';
+
+const meta: Meta = {
+  title: 'panels/SimpleAlertDialog',
+  component: SimpleAlertDialog,
+  parameters: { status: { type: 'beta' } },
+};
+
+export const main = () => (
+  <SimpleAlertDialog
+    title="Are you sure?"
+    description="This action cannot be undone"
+    cancel="Cancel"
+    accept="Delete"
+    // asChild={true}
+  >
+    <Text>Click here</Text>
+  </SimpleAlertDialog>
+);
+export default meta;

package/src/panels/SimpleAlertDialog/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { AlertDialog, Button, XStack, YStack } from 'tamagui';
+import type {
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+} from 'tamagui';
+
+export type AlterDialogSimpleProps = AlertDialogTriggerProps &
+  AlertDialogProps & { placeholder?: ReactNode } & { title?: ReactNode } & { cancel?: string } & { accept?: string } & {
+    description: ReactNode;
+  } & { titleStyle?: AlertDialogTitleProps } & {
+    descriptionStyle?: AlertDialogDescriptionProps;
+  } & { contentStyle?: AlertDialogContentProps };
+
+export function SimpleAlertDialog({
+  children,
+  title,
+  cancel,
+  accept,
+  description,
+  titleStyle,
+  contentStyle,
+  descriptionStyle,
+  ...triggerProps
+}: AlterDialogSimpleProps) {
+  return (
+    <AlertDialog native {...triggerProps}>
+      <AlertDialog.Trigger asChild>{children}</AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay key="overlay" animation="quick" o={0.5} enterStyle={{ o: 0 }} exitStyle={{ o: 0 }} />
+        <AlertDialog.Content
+          bordered
+          elevate
+          key="content"
+          animation={[
+            'bouncy',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.2 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.2 }}
+          x={0}
+          scale={1}
+          opacity={1}
+          y={0}
+          {...contentStyle}
+        >
+          <YStack space>
+            <XStack space="$3" jc="flex-end">
+              <AlertDialog.Cancel asChild>
+                <Button>{cancel || 'cancel'}</Button>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action asChild>
+                <Button theme="active">{accept || 'accept'}</Button>
+              </AlertDialog.Action>
+            </XStack>
+          </YStack>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog>
+  );
+}

package/src/panels/SimpleDialog/SimpleDialog.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SimpleDialog } from './index';
+import type { Meta } from '@storybook/react';
+import { Text, YStack, Button } from 'tamagui';
+
+const meta: Meta = {
+  title: 'panels/SimpleDialog',
+  component: SimpleDialog,
+  parameters: { status: { type: 'beta' } },
+};
+
+export const main = () => (
+  <SimpleDialog
+    element={
+      <YStack>
+        <Text>Check</Text>
+      </YStack>
+    }
+    title="Check"
+  >
+    <Button>open DialogBox</Button>
+  </SimpleDialog>
+);
+export default meta;

package/src/panels/SimpleDialog/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { DialogProps, DialogTitleProps, DialogDescriptionProps, DialogContentProps } from 'tamagui';
+import { Adapt, Button, Dialog, Sheet, Unspaced } from 'tamagui';
+import { X } from '@tamagui/lucide-icons';
+
+type SimpleDialogProps = DialogProps & { element: React.ReactNode } & { title: React.ReactNode } & {
+  description?: React.ReactNode;
+} & { titleStyle?: DialogTitleProps } & { descriptionStyle?: DialogDescriptionProps } & {
+  contentStyle?: DialogContentProps;
+};
+
+export function SimpleDialog({
+  children,
+  element,
+  title,
+  description,
+  titleStyle,
+  descriptionStyle,
+  contentStyle,
+  ...props
+}: SimpleDialogProps) {
+  return (
+    <Dialog modal {...props}>
+      <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+      <Adapt when="sm" platform="touch">
+        <Sheet zIndex={200000} modal dismissOnSnapToBottom>
+          <Sheet.Frame padding="$4" space>
+            <Adapt.Contents />
+          </Sheet.Frame>
+          <Sheet.Overlay />
+        </Sheet>
+      </Adapt>
+      <Dialog.Portal>
+        <Dialog.Overlay key="overlay" animation="bouncy" o={0.5} enterStyle={{ o: 0 }} exitStyle={{ o: 0 }} />
+        <Dialog.Content
+          bordered
+          elevate
+          key="content"
+          animation={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          space
+          {...contentStyle}
+        >
+          <Dialog.Title {...titleStyle}>{title}</Dialog.Title>
+          <Dialog.Description {...descriptionStyle}>{description ?? description}</Dialog.Description>
+          {element}
+          <Unspaced>
+            <Dialog.Close asChild>
+              <Button pos="absolute" t="$3" r="$3" size="$2" circular icon={X} />
+            </Dialog.Close>
+          </Unspaced>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  );
+}

package/src/panels/SimplePopover/SimplePopover.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SimplePopover } from './index';
+import { Text } from 'tamagui';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'panels/SimplePopover',
+  component: SimplePopover,
+  parameters: { status: { type: 'beta' } },
+};
+
+// eslint-disable-next-line spellcheck/spell-checker
+export const main = () => (
+  <SimplePopover element={<div>Content from popover</div>}>
+    <Text>Click here to check popover</Text>
+  </SimplePopover>
+);
+export default meta;