@multiplatform.one/components 5.0.26 → 6.0.0

package/src/mdx/MDXCodeBlock/index.tsx

@@ -1,166 +0,0 @@
-/**
- * File: /src/mdx/MDXCodeBlock/index.tsx
- * Project: @multiplatform.one/components
- * File Created: 23-04-2024 05:52:22
- * 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 { 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;
-  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;
-  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" marginBottom="$4">
-      <ErrorBoundary>
-        <YStack
-          position="relative"
-          {...(isCutoff && {
-            maxHeight: 400,
-            ov: "hidden",
-            br: "$4",
-          })}
-        >
-          {(!isCollapsed || !isCollapsible) && isCutoff && (
-            <LinearGradient
-              position="absolute"
-              bottom={0}
-              left={0}
-              right={0}
-              height={200}
-              colors={["$backgroundTransparent", "$background"]}
-              zIndex={1000}
-            >
-              <Spacer flex={1} />
-              <Button onPress={() => setIsCutoff(!isCutoff)} alignSelf="center">
-                Show more
-              </Button>
-              <Spacer size="$4" />
-            </LinearGradient>
-          )}
-          {(!isCollapsed || !isCollapsible) && (
-            <Pre
-              ref={preRef}
-              data-invert-line-highlight={isHighlightingLines}
-              data-line-numbers={showLineNumbers}
-              className={className}
-              padding={0}
-              marginBottom={0}
-              id={id}
-            >
-              <ScrollView
-                style={{ width: "100%" }}
-                contentContainerStyle={{ minWidth: "100%" }}
-                horizontal
-                showsHorizontalScrollIndicator={false}
-              >
-                <Code
-                  backgroundColor="transparent"
-                  className={className}
-                  flex={1}
-                  lineHeight={tokens.space[size || "$5"] as any}
-                  padding="$4"
-                  size={size ?? "$5"}
-                  {...codeProps}
-                >
-                  {children}
-                </Code>
-              </ScrollView>
-            </Pre>
-          )}
-          <XStack position="absolute" top="$3" right="$3" gap="$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

@@ -1,54 +0,0 @@
-/**
- * File: /src/mdx/UL/UL.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 { UL } from "./index";
-
-export default {
-  title: "mdx/UL",
-  component: UL,
-  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 {...args}>
-    <Text>Hello world</Text>
-  </UL>
-);
-
-const mainArgs = {};
-main.args = mainArgs;

package/src/mdx/UL/index.ts

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

package/src/mdx/components.tsx

@@ -1,226 +0,0 @@
-/**
- * File: /src/mdx/components.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 { Link } from "@multiplatform.one/router";
-import { Link as IconLink } from "@tamagui/lucide-icons";
-import type { MDXComponents } from "mdx/types";
-import { isWeb } from "multiplatform.one";
-import { Children } from "react";
-import type { XStackProps } from "tamagui";
-import {
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  Paragraph,
-  Text,
-  XStack,
-  YStack,
-  styled,
-} from "tamagui";
-import { CodeInline } from "../code/Code";
-import { unwrapText } from "../utils/unwrapText";
-import { HR } from "./HR";
-import { LI } from "./LI";
-import { MDXCodeBlock } from "./MDXCodeBlock";
-import { UL } from "./UL";
-
-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: MDXComponents = {
-  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}>
-        {/* @ts-ignore */}
-        <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 }) => (
-    // @ts-ignore
-    <UL marginVertical="$4">
-      {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>
-  ),
-  // @ts-ignore
-  strong: (props) => (
-    <Paragraph fontSize="inherit" {...sanitizeProps(props)} fontWeight="700" />
-  ),
-  img: ({ ...props }) => (
-    <YStack marginVertical="$6">
-      <YStack {...sanitizeProps(props)} maxWidth="100%" />
-    </YStack>
-  ),
-  pre: ({ children }) => <>{children}</>,
-  // TODO: Fix this type
-  code: code as any,
-  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"
-        // @ts-ignore
-        letterSpacing="$0"
-        opacity={0.65}
-        size="$8"
-        whiteSpace="revert"
-      >
-        {unwrapText(children)}
-      </Paragraph>
-    </YStack>
-  ),
-  ...(isWeb
-    ? {}
-    : {
-        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"
-    gap="$4"
-    {...sanitizeProps(props)}
-  >
-    {children}
-    <YStack opacity={0.3}>
-      <IconLink size={12} color="var(--color)" aria-hidden />
-    </YStack>
-  </XStack>
-);
-
-const getNonTextChildren = (children) => {
-  return 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 {
-  return props;
-}

package/src/mdx/hooks/index.ts

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

package/src/mdx/hooks/useCompileAndEvaluateMdx.ts

@@ -1,43 +0,0 @@
-/*
- * File: /src/mdx/hooks/useCompileAndEvaluateMdx.ts
- * Project: @multiplatform.one/components
- * File Created: 04-04-2024 15:50:39
- * 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 { ComponentType } from "react";
-import { useCompileMdx } from "./useCompileMdx";
-import { useEvaluateMdx } from "./useEvaluateMdx";
-
-export function useCompileAndEvaluateMdx(
-  source: string,
-  compileOptions?: Record<string, any>,
-  evaluateOptions?: Record<string, any>,
-): {
-  Component?:
-    | ComponentType<{
-        components?: Record<string, any> | undefined;
-      }>
-    | undefined;
-  code?: string;
-  frontmatter?: 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

@@ -1,82 +0,0 @@
-/*
- * File: /src/mdx/hooks/useCompileMdx.ts
- * Project: @multiplatform.one/components
- * File Created: 04-04-2024 15:50:39
- * 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 { useEffect, useState } 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

@@ -1,49 +0,0 @@
-/*
- * File: /src/mdx/hooks/useEvaluateMdx.ts
- * Project: @multiplatform.one/components
- * File Created: 04-04-2024 15:50:39
- * 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 { MDXComponents } from "mdx/types";
-import type { ComponentType } from "react";
-import { useEffect, useState } from "react";
-import * as jsxRuntime from "react/jsx-runtime";
-
-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?: MDXComponents }>;
-}
-
-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

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

@@ -1,33 +0,0 @@
-// https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-code.ts
-
-import { toString as hastToString } from "hast-util-to-string";
-import rangeParser from "parse-numeric-range";
-import { refractor } from "refractor";
-import tsx from "refractor/lang/tsx";
-import { visit } from "unist-util-visit";
-import { rehypeHighlightLine } from "./rehypeHighlightLine";
-import { rehypeHighlightWord } from "./rehypeHighlightWord";
-
-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 = hastToString(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);
-  };
-}