@multiplatform.one/components 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "sideEffects": [
     "*.css"
   ],
@@ -20,7 +20,8 @@
     "./css/code-highlight.css": {
       "import": "./css/code-highlight.css",
       "require": "./css/code-highlight.css"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "css",
@@ -36,59 +37,56 @@
   "dependencies": {
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@multiplatform.one/locales": "1.0.7",
-    "@tamagui/font-inter": "^1.95.1",
-    "@tamagui/logo": "^1.95.1",
-    "@tamagui/react-native-media-driver": "^1.95.1",
-    "@tamagui/shorthands": "^1.95.1",
-    "@tamagui/themes": "^1.95.1",
+    "@tamagui/font-inter": "^1.99.1",
+    "@tamagui/logo": "^1.99.1",
+    "@tamagui/react-native-media-driver": "^1.99.1",
+    "@tamagui/shorthands": "^1.99.1",
+    "@tamagui/themes": "^1.99.1",
     "burnt": "^0.12.2",
-    "expo-asset": "^9.0.2",
-    "expo-image": "^1.12.4",
-    "fast-xml-parser": "^4.3.6",
+    "expo-image": "^1.12.9",
+    "fast-xml-parser": "^4.4.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "8.0.4",
-    "immer": "^10.0.4",
+    "immer": "^10.1.1",
     "parse-numeric-range": "^1.3.0",
-    "react-hook-form": "^7.51.3",
-    "react-native-svg": "14.1.0",
+    "react-hook-form": "^7.51.5",
+    "react-native-svg": "15.2.0",
     "refractor": "^4.8.1",
     "rehype-autolink-headings": "~6.1.1",
     "rehype-parse": "~8.0.5",
     "rehype-slug": "~5.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
-    "tamagui": "^1.95.1",
-    "unist-util-visit": "^5.0.0"
+    "tamagui": "^1.99.1",
+    "unist-util-visit": "^5.0.0",
+    "@multiplatform.one/locales": "1.0.8",
+    "multiplatform.one": "1.0.8"
   },
   "peerDependencies": {
     "moti": "^0.25.3",
-    "react-native-reanimated": "2.14.4",
+    "react-native-reanimated": "3.8.1",
     "solito": "^3.2.6"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.95.1",
+    "@tamagui/build": "^1.99.1",
+    "@tamagui/config": "^1.99.1",
+    "@testing-library/react": "^15.0.7",
     "@types/eslint": "^8.56.10",
-    "eslint": "~8.56.0",
-    "moti": "^0.28.1",
-    "prettier": "^3.2.5",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^24.1.0",
+    "moti": "^0.29.0",
     "react-native-reanimated": "3.8.1",
     "solito": "^4.2.2",
     "tsup": "^8.0.2",
-    "ui": "1.0.7"
+    "vitest": "^1.6.0",
+    "vitest-react-native": "^0.1.5"
   },
   "eslintIgnore": [
     "dist",
     "types"
   ],
-  "jest": {
-    "testRegex": "((/(tests|__tests__)((/|/[^_.\n][^/\n]*(/[^_.\n][^/\n]+)*/)[^_.\n][^/\n]*))|((/|/.*/)(([^_.\n][^/\n]*.(spec|test))|(spec|test)))).[jt]sx?$",
-    "verbose": true,
-    "testPathIgnorePatterns": []
-  },
-  "jestSonar": {
-    "reportPath": "node_modules",
-    "reportFile": "test-report.xml",
-    "indent": 4
+  "scripts": {
+    "build": "rm -rf dist types 2>/dev/null && tamagui-build",
+    "test": "vitest run"
   }
-}
+}

package/src/forms/FormCheckBox/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/forms/FormCheckBox/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 type { SizeTokens, CheckboxProps, CheckboxIndicatorProps, LabelProps, ThemeName, ThemeKeys } from 'tamagui';
 import { Label, Checkbox, XStack, YStack } from 'tamagui';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -61,7 +82,7 @@ export function FormCheckBox({
           gap={CheckBoxElementSizing?.gap || '$3'}
           height={CheckBoxElementSizing?.height}
           width={CheckBoxElementSizing?.width || '300'}
-          ai="center"
+          alignItems="center"
         >
           <Checkbox
             id={id}

package/src/forms/FormInput/index.spec.tsx

@@ -0,0 +1,41 @@
+/**
+ * File: /src/forms/FormInput/index.spec.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 02-06-2024 07:15:19
+ * 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 React from 'react';
+import { FormInput } from './index';
+import { TamaguiProvider } from 'tamagui';
+import { config } from '@tamagui/config/v3';
+import { createTamagui } from 'tamagui';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+const tamaguiConfig = createTamagui(config);
+
+describe('SimpleImage component', () => {
+  it('renders correctly', () => {
+    render(
+      <TamaguiProvider config={tamaguiConfig}>
+        <FormInput name="test" />
+      </TamaguiProvider>,
+    );
+    expect(screen.getByRole('textbox')).toHaveTextContent('');
+  });
+});

package/src/forms/FormProgress/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/forms/FormProgress/index.tsx
+ * 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 React, { useId } from 'react';
 import type { ProgressProps, SizeTokens } from 'tamagui';
 import { Progress } from 'tamagui';
@@ -32,8 +53,8 @@ export function FormProgress({
     return (
       <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
         <Progress
-          mt={vertical ? 86 : undefined}
-          ml={vertical ? -80 : undefined}
+          marginTop={vertical ? 86 : undefined}
+          marginLeft={vertical ? -80 : undefined}
           rotate={vertical ? '270deg' : undefined}
           {...progressProps}
           size={propSize}
@@ -59,8 +80,8 @@ export function FormProgress({
           {...fieldProps}
         >
           <Progress
-            mt={vertical ? 86 : undefined}
-            ml={vertical ? -80 : undefined}
+            marginTop={vertical ? 86 : undefined}
+            marginLeft={vertical ? -80 : undefined}
             rotate={vertical ? '270deg' : undefined}
             {...progressProps}
             size={propSize}

package/src/forms/SelectButton/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/forms/SelectButton/index.tsx
+ * 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 React, { useState, useMemo, useEffect } from 'react';
 import type { OptionButtonProps } from './OptionButton';
 import type { YStackProps, ButtonProps } from 'tamagui';
@@ -41,7 +62,7 @@ export function SelectButton({
       typeof selectedIndexStr !== 'undefined' &&
       selectedIndexStr in values
     ) {
-      onValueChange(values[selectedIndexStr]);
+      onValueChange(values?.[selectedIndexStr] || '');
     }
   }, [selectedIndex]);
 

package/src/forms/SelectSimple/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/forms/SelectSimple/index.tsx
+ * 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 React from 'react';
 import type { ReactNode } from 'react';
 import type { SelectProps, SelectTriggerProps } from 'tamagui';
@@ -25,7 +46,7 @@ export function SelectSimple({
       <StyledSelectTrigger {...triggerProps}>
         <Select.Value placeholder={placeholder} />
       </StyledSelectTrigger>
-      <Select.Adapt when="sm" platform="touch">
+      <Select.Adapt when={'sm' as any} platform="touch">
         <Select.Sheet modal dismissOnSnapToBottom>
           <Select.Sheet.Frame>
             <Select.Sheet.ScrollView>

package/src/images/SimpleImage/index.stories.tsx

@@ -20,7 +20,6 @@
  */
 
 import React from 'react';
-import { Platform } from 'react-native';
 import { useAssets } from '../../hooks';
 import { SimpleImage } from './index';
 import { YStack } from 'tamagui';
@@ -33,55 +32,55 @@ export default {
   },
 };
 
-export const main = (args: any[]) => <SimpleImage src={require('../../../assets/poker-game-1894.png')} {...args} />;
-main.args = {
-  aspectRatio: undefined,
-  height: undefined,
-  width: undefined,
-  bg: 'black',
-};
+// export const main = (args: any[]) => <SimpleImage src={require('../../../assets/poker-game-1894.png')} {...args} />;
+// main.args = {
+//   aspectRatio: undefined,
+//   height: undefined,
+//   width: undefined,
+//   bg: 'black',
+// };
 
-export const withSvg = (args: any[]) => <SimpleImage src={require('../../../assets/pentagon.svg')} {...args} />;
-withSvg.args = {
-  aspectRatio: undefined,
-  height: undefined,
-  bg: 'black',
-  width: undefined,
-  resizeMode: undefined,
-};
-withSvg.argTypes = {
-  resizeMode: {
-    control: {
-      type: Platform.OS === 'web' ? 'select' : 'text',
-      options: ['contain', 'cover', 'stretch'],
-    },
-  },
-};
+// export const withSvg = (args: any[]) => <SimpleImage src={require('../../../assets/pentagon.svg')} {...args} />;
+// withSvg.args = {
+//   aspectRatio: undefined,
+//   height: undefined,
+//   bg: 'black',
+//   width: undefined,
+//   resizeMode: undefined,
+// };
+// withSvg.argTypes = {
+//   resizeMode: {
+//     control: {
+//       type: Platform.OS === 'web' ? 'select' : 'text',
+//       options: ['contain', 'cover', 'stretch'],
+//     },
+//   },
+// };
 
-function WithUseAssets() {
-  const [pokerGame1894Png] = useAssets([require('../../../assets/poker-game-1894.png')]);
-  return <SimpleImage width={400} height={400} backgroundColor="black" src={pokerGame1894Png} />;
-}
-export const withUseAssets = () => <WithUseAssets />;
+// function WithUseAssets() {
+//   const [pokerGame1894Png] = useAssets([require('../../../assets/poker-game-1894.png')]);
+//   return <SimpleImage width={400} height={400} backgroundColor="black" src={pokerGame1894Png} />;
+// }
+// export const withUseAssets = () => <WithUseAssets />;
 
-function WithRequire() {
-  return (
-    <SimpleImage
-      width={400}
-      height={400}
-      backgroundColor="black"
-      src={require('../../../assets/poker-game-1894.png')}
-    />
-  );
-}
-export const withRequire = () => <WithRequire />;
+// function WithRequire() {
+//   return (
+//     <SimpleImage
+//       width={400}
+//       height={400}
+//       backgroundColor="black"
+//       src={require('../../../assets/poker-game-1894.png')}
+//     />
+//   );
+// }
+// export const withRequire = () => <WithRequire />;
 
 export const withYStack = () => (
   <YStack>
-    <YStack width="50%" height={200} bg="red" />
-    <YStack width="50%" height={200} bg="blue" />
+    <YStack width="50%" height={200} backgroundColor="red" />
+    <YStack width="50%" height={200} backgroundColor="blue" />
     <SimpleImage
-      bg="green"
+      backgroundColor="green"
       height={200}
       resizeMode="stretch"
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Inukshuk_Park_05.jpg/500px-Inukshuk_Park_05.jpg"
@@ -93,10 +92,10 @@ export const withYStack = () => (
 export const withTamagui = () => (
   <YStack>
     <SimpleImage
-      bg="$green9"
-      h="$19"
+      backgroundColor="$green9"
+      height="$19"
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Inukshuk_Park_05.jpg/500px-Inukshuk_Park_05.jpg"
-      w="100%"
+      width="100%"
     />
   </YStack>
 );

package/src/images/SimpleImage/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/images/SimpleImage/index.tsx
+ * 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 React, { useMemo, forwardRef, useRef } from 'react';
 import type { ComponentProps, Ref } from 'react';
 import type { Image } from 'expo-image';
@@ -58,7 +79,7 @@ const SimpleImageComponent = forwardRef<Image, Props>(
       const sAspectRatio = aspectRatio || style.aspectRatio;
       if (typeof sAspectRatio === 'string') {
         const [width, height] = sAspectRatio.split(':');
-        return parseInt(width, 10) / parseInt(height, 10);
+        return parseInt(width || '0', 10) / parseInt(height || '0', 10);
       }
       return sAspectRatio;
     }, [aspectRatio, style.aspectRatio]);

package/src/images/Svg/index.ts

@@ -1,3 +1,24 @@
+/*
+ *  File: /src/images/Svg/index.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 { Svg as RNSvg } from 'react-native-svg';
 import type { ComponentType } from 'react';
 import { Svg as TSvg } from '@tamagui/react-native-svg';

package/src/index.ts

@@ -26,7 +26,7 @@ export * from './helpers';
 export * from './hooks';
 export * from './images';
 export * from './layouts';
-// export * from './mdx';
+export * from './mdx';
 export * from './organize';
 export * from './panels';
 export * from './table';

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

@@ -1,5 +1,26 @@
+/**
+ * File: /src/layouts/Debug/DebugLayout.stories.tsx
+ * 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 React from 'react';
-import { Button } from 'ui';
+import { Button } from 'tamagui';
 import { action } from '@storybook/addon-actions';
 import { withDebugLayout } from './index';
 

package/src/layouts/Debug/index.tsx

@@ -107,7 +107,7 @@ export function DebugLayout<DebugViewProps>({
 
   function renderDebug() {
     return (
-      <XStack gap m="$4" width={size} height={size}>
+      <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} />

package/src/mdx/HR/index.tsx

@@ -1,8 +1,29 @@
+/**
+ * File: /src/mdx/HR/index.tsx
+ * 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 React from 'react';
 import { EnsureFlexed, YStack } from 'tamagui';
 
 export const HR = () => (
-  <YStack my="$10" mx="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/index.tsx

@@ -1,8 +1,29 @@
+/**
+ * File: /src/mdx/LI/index.tsx
+ * 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 { Paragraph, styled } from 'tamagui';
 
 export const LI = styled(Paragraph, {
   display: 'list-item' as any,
   tag: 'li',
   size: '$5',
-  pb: '$1',
+  paddingBottom: '$1',
 });

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

@@ -1,3 +1,24 @@
+/**
+ * File: /src/mdx/MDXCodeBlock/MDXCodeBlock.stories.tsx
+ * 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 React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { MDXCodeBlock } from './index';
@@ -14,7 +35,7 @@ const meta: Meta = {
 export const main: StoryObj<typeof MDXCodeBlock> = {
   args: {
     isCollapsible: false,
-    bg: '$color3',
+    background: '$color3',
   },
   render: (args) => (
     <MDXCodeBlock {...args}>