@multiplatform.one/components 2.0.24 → 4.0.0

package/src/forms/Select/SelectSimple.stories.tsx

@@ -1,24 +1,3 @@
-/**
- * File: /src/forms/Select/SelectSimple.stories.tsx
- * Project: @multiplatform.one/components
- * File Created: 18-06-2024 18:02:12
- * 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 { Select } from 'tamagui';
 import { SelectSimple } from './SelectSimple';
@@ -33,16 +12,8 @@ export default {
 };
 
 export const main = (args) => {
-  return <SelectSimple {...args}>{args.children}</SelectSimple>;
-};
-const mainArgs = {
-  name: 'FormSelectSimple',
-  placeholder: 'select one of these',
-  defaultValue: 'bmw',
-  value: 'bmw',
-  onValueChange: 'string',
-  children: [
-    <SelectSimple key="select-simple" onValueChange={action('onValueChange')}>
+  return (
+    <SelectSimple onValueChange={action('onValueChange')} {...args}>
       <Select.Item key="bmw" index={0} value="bmw">
         <Select.ItemText>BMW</Select.ItemText>
       </Select.Item>
@@ -55,7 +26,14 @@ const mainArgs = {
       <Select.Item key="suzuki" index={3} value="suzuki">
         <Select.ItemText>SUZUKI</Select.ItemText>
       </Select.Item>
-    </SelectSimple>,
-  ],
+    </SelectSimple>
+  );
+};
+const mainArgs = {
+  name: 'FormSelectSimple',
+  placeholder: 'select one of these',
+  defaultValue: 'bmw',
+  value: 'bmw',
+  onValueChange: 'string',
 };
 main.args = mainArgs;

package/src/forms/SelectButton/SelectButton.stories.tsx

@@ -1,24 +1,3 @@
-/**
- * File: /src/forms/SelectButton/SelectButton.stories.tsx
- * Project: @multiplatform.one/components
- * File Created: 18-06-2024 18:02:12
- * 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 { SelectButton } from './SelectButton';
 import { Text } from 'tamagui';
@@ -33,15 +12,8 @@ export default {
 };
 
 export const main = (args) => {
-  return <SelectButton {...args}>{args.children}</SelectButton>;
-};
-
-const mainArgs = {
-  value: 'bmw',
-  selectedValue: 'bmw',
-  onValueChange: 'value',
-  children: (
-    <SelectButton onValueChange={action('onValueChange')} gap>
+  return (
+    <SelectButton gap {...args}>
       <SelectButton.OptionButton index={0} value="bmw">
         <Text>BMW</Text>
       </SelectButton.OptionButton>
@@ -55,13 +27,18 @@ const mainArgs = {
         <Text>SUZUKI</Text>
       </SelectButton.OptionButton>
     </SelectButton>
-  ),
+  );
+};
+
+const mainArgs = {
+  value: 'bmw',
+  selectedValue: 'bmw',
 };
 
 main.args = mainArgs;
 
 export const x = () => (
-  <SelectButton onValueChange={action('onValueChange')} gap xStack>
+  <SelectButton gap xStack>
     <SelectButton.OptionButton index={0} value="bmw">
       <Text>BMW</Text>
     </SelectButton.OptionButton>

package/src/forms/Slider/FieldSlider.stories.tsx

@@ -45,6 +45,7 @@ import { Button, YStack } from 'tamagui';
 import { FieldSlider } from './FieldSlider';
 import { action } from '@storybook/addon-actions';
 import { useForm } from '@tanstack/react-form';
+import type { FieldSliderProps } from './FieldSlider';
 
 export default {
   title: 'forms/FieldSlider',
@@ -54,13 +55,20 @@ export default {
   },
 };
 
-export const main = () => <FieldSlider onValueChange={action(`onValueChange`)} />;
+export const main = (args) => <FieldSlider onValueChange={action(`onValueChange`)} {...args} />;
+const mainArgs: FieldSliderProps = {
+  label: 'film',
+  error: undefined,
+  helperText: 'please check this slider',
+  value: undefined,
+};
+main.args = mainArgs;
 
 export const form = () => {
   const form = useForm({
     defaultValues: {
-      firstName: '',
-      isChecked: false,
+      none: false,
+      auto: true,
       slider: [],
     },
     onSubmit: async ({ value }) => {
@@ -69,7 +77,8 @@ export const form = () => {
   });
   return (
     <YStack gap>
-      <FieldSlider form={form} name="slider" label="slider" />
+      <FieldSlider form={form} name="none" label="slider" />
+      <FieldSlider form={form} name="auto" label="slider" />
       <Button onPress={form.handleSubmit}>Submit</Button>
     </YStack>
   );

package/src/forms/Switch/FieldSwitch.stories.tsx

@@ -20,6 +20,7 @@
  */
 
 import React from 'react';
+import type { FieldSwitchProps } from './FieldSwitch';
 import { FieldSwitch } from './FieldSwitch';
 import { action } from '@storybook/addon-actions';
 import { useForm } from '@tanstack/react-form';
@@ -33,16 +34,14 @@ export default {
   },
 };
 
-export const main = () => (
-  <FieldSwitch
-    label="Example Switch"
-    name="exampleSwitch"
-    helperText="This is an example switch"
-    defaultValue={false}
-    onCheckedChange={action('onChange')}
-    onPress={action('onPress')}
-  />
-);
+export const main = (args) => <FieldSwitch onCheckedChange={action('onCheckedChange')} {...args} />;
+const mainArgs: FieldSwitchProps<any, any> = {
+  asyncAlways: true,
+  asyncDebounceMs: 500,
+  defaultValue: false,
+  mode: 'array',
+};
+main.args = mainArgs;
 
 export const form = () => {
   const form = useForm({

package/src/forms/TextArea/FieldTextArea.stories.tsx

@@ -20,6 +20,7 @@
  */
 
 import React from 'react';
+import type { FieldTextAreaProps } from './FieldTextArea';
 import { Button, YStack } from 'tamagui';
 import { FieldTextArea } from './FieldTextArea';
 import { action } from '@storybook/addon-actions';
@@ -28,16 +29,14 @@ import { useForm } from '@tanstack/react-form';
 export default {
   title: 'forms/FieldTextArea',
   component: FieldTextArea,
-  parameters: {
-    status: { type: 'beta' },
-  },
+  parameters: { status: { type: 'beta' } },
 };
 
 export const main = () => (
   <FieldTextArea label="Description" name="description" defaultValue="" onChangeText={action('onChangeText')} />
 );
 
-export const form = () => {
+export const form = (args: FieldTextAreaProps) => {
   const form = useForm({
     defaultValues: {
       firstName: '',
@@ -50,8 +49,19 @@ export const form = () => {
   });
   return (
     <YStack>
-      <FieldTextArea form={form} name="textArea" label="textArea" />
+      <FieldTextArea form={form} {...args} />
       <Button onPress={form.handleSubmit}>Submit</Button>
     </YStack>
   );
 };
+
+form.args = {
+  label: 'Sample Text Area',
+  name: 'sampleTextArea',
+  defaultValue: 'This is a sample text area',
+  onChangeText: action('onChangeText'),
+  textAreaProps: {
+    placeholder: 'Enter some text here...',
+    disabled: false,
+  },
+};

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

@@ -21,7 +21,7 @@
 
 import React from 'react';
 import { useAssets } from '../../hooks';
-import { SimpleImage } from './index';
+import { Props, SimpleImage } from './index';
 import { YStack } from 'tamagui';
 
 export default {
@@ -75,27 +75,45 @@ export default {
 // }
 // export const withRequire = () => <WithRequire />;
 
-export const withYStack = () => (
+export const withYStack = (args: Props) => (
   <YStack>
-    <YStack width="50%" height={200} backgroundColor="red" />
-    <YStack width="50%" height={200} backgroundColor="blue" />
+    <YStack {...args} />
+    <YStack {...args} backgroundColor="blue" />
     <SimpleImage
       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"
       width="50%"
+      {...args}
     />
   </YStack>
 );
 
-export const withTamagui = () => (
+withYStack.args = {
+  height: 200,
+  width: '50%',
+  backgroundColor: 'green',
+  // loader: 'ImageLoader',
+  loading: 'lazy',
+};
+
+export const withTamagui = (args: Props) => (
   <YStack>
     <SimpleImage
       backgroundColor="$green9"
       height="$19"
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Inukshuk_Park_05.jpg/500px-Inukshuk_Park_05.jpg"
       width="100%"
+      {...args}
     />
   </YStack>
 );
+
+withTamagui.args = {
+  height: '$20',
+  width: '100%',
+  backgroundColor: '$red8',
+  // loader: 'ImageLoader',
+  loading: 'lazy',
+};

package/src/images/SimpleImage/index.tsx

@@ -30,7 +30,7 @@ import { Stack, createComponent } from 'tamagui';
 import { StyleSheet } from 'react-native';
 import { useAssets } from '../../hooks/useAssets';
 
-type Props = Omit<SolitoImageProps, 'height' | 'width' | 'src' | 'fill' | 'style' | 'alt'> &
+export type Props = Omit<SolitoImageProps, 'height' | 'width' | 'src' | 'fill' | 'style' | 'alt'> &
   Omit<StackProps, 'height' | 'width'> & {
     alt?: string;
     height?: number | string;

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

@@ -1,3 +1,24 @@
+/**
+ * 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 React from 'react';
 import { Text } from 'tamagui';
 import { UL } from './index';
@@ -6,10 +27,14 @@ export default {
   title: 'mdx/UL',
   component: UL,
   parameters: { status: { type: 'beta' } },
+  controls: true,
 };
 
-export const main = () => (
+export const main = (args) => (
   <UL>
     <Text>Hello world</Text>
   </UL>
 );
+
+const mainArgs = {};
+main.args = mainArgs;

package/src/organize/SimpleAccordion/SimpleAccordion.stories.tsx

@@ -1,24 +1,3 @@
-/**
- * File: /src/organize/SimpleAccordion/SimpleAccordion.stories.tsx
- * Project: @multiplatform.one/components
- * File Created: 13-10-2023 12:02:11
- * Author: Lalit rajak
- * -----
- * BitSpur (c) Copyright 2021 - 2023
- *
- * 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 { AccordionItem, SimpleAccordion } from './index';
 import { YStack, Text, XStack, H5, Accordion } from 'tamagui';
@@ -32,36 +11,21 @@ export default {
   },
 };
 
-export const main = (args) => (
-  <SimpleAccordion {...args}>
-    <AccordionItem trigger={() => <Text>Trigger Apple </Text>} value="apple">
-      <YStack padding="$4">
-        <Text> Apple Content</Text>
-      </YStack>
-    </AccordionItem>
-    <AccordionItem trigger={() => <Text>Trigger Banana </Text>} value="banana">
-      <YStack padding="$4">
-        <Text>Banana Content</Text>
-      </YStack>
-    </AccordionItem>
-    <AccordionItem
-      trigger={(open) => (
-        <XStack>
-          <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
-            <ChevronRight />
-          </YStack>
-          <H5 color="$color10">Folders</H5>
-        </XStack>
-      )}
-      value="orange"
-    >
-      <YStack padding="$4">
-        <Text>Orange Content</Text>
-      </YStack>
-    </AccordionItem>
-    <Accordion.Item value="pipe">
-      <Accordion.Trigger flexDirection="row" justifyContent="space-between">
-        {({ open }) => (
+export const main = (args) => {
+  return (
+    <SimpleAccordion {...args}>
+      <AccordionItem trigger={() => <Text>Trigger Apple </Text>} value="apple">
+        <YStack padding="$4">
+          <Text> Apple Content</Text>
+        </YStack>
+      </AccordionItem>
+      <AccordionItem trigger={() => <Text>Trigger Banana </Text>} value="banana">
+        <YStack padding="$4">
+          <Text>Banana Content</Text>
+        </YStack>
+      </AccordionItem>
+      <AccordionItem
+        trigger={(open) => (
           <XStack>
             <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
               <ChevronRight />
@@ -69,12 +33,29 @@ export const main = (args) => (
             <H5 color="$color10">Folders</H5>
           </XStack>
         )}
-      </Accordion.Trigger>
-      <Accordion.Content>
+        value="orange"
+      >
         <YStack padding="$4">
           <Text>Orange Content</Text>
         </YStack>
-      </Accordion.Content>
-    </Accordion.Item>
-  </SimpleAccordion>
-);
+      </AccordionItem>
+      <Accordion.Item value="pipe">
+        <Accordion.Trigger flexDirection="row" justifyContent="space-between">
+          {({ open }) => (
+            <XStack>
+              <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
+                <ChevronRight />
+              </YStack>
+              <H5 color="$color10">Folders</H5>
+            </XStack>
+          )}
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <YStack padding="$4">
+            <Text>Orange Content</Text>
+          </YStack>
+        </Accordion.Content>
+      </Accordion.Item>
+    </SimpleAccordion>
+  );
+};

package/src/organize/SimpleCarousel/Carousel.stories.tsx

@@ -18,7 +18,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SimpleCarousel } from './index';
+import { SimpleCarousel, CarouselProps } from './index';
 import React from 'react';
 import { SimpleImage } from '../../images/SimpleImage';
 
@@ -35,11 +35,17 @@ export default {
 const mail = require('../../../assets/mail.png');
 const pentagon = require('../../../assets/pentagon.svg');
 
-export const Main = () => (
-  <SimpleCarousel speed={5000} defaultSlide={4}>
+export const Main = (args: CarouselProps) => (
+  <SimpleCarousel speed={args.speed} {...args} defaultSlide={4}>
     <SimpleImage src={mail} height={300} resizeMode="cover" />
     <SimpleImage src={pentagon} height={300} resizeMode="cover" />
     <SimpleImage src={mail} height={300} resizeMode="cover" />
     <SimpleImage src={pentagon} height={300} resizeMode="cover" />
   </SimpleCarousel>
 );
+
+Main.args = {
+  speed: 3000,
+  showCenterIndicator: true,
+  showSideArrows: true,
+};

package/src/organize/SimpleCarousel/index.tsx

@@ -24,7 +24,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons';
 import type { IconProps } from '@tamagui/helpers-icon';
 
-type CarouselProps = YStackProps & {
+export type CarouselProps = YStackProps & {
   children: React.ReactNode;
   speed?: number;
   showCenterIndicator?: boolean;

package/src/organize/SimpleInput/SimpleInput.stories.tsx

@@ -1,47 +1,35 @@
-/**
- * File: /src/organize/SimpleInput/SimpleInput.stories.tsx
- * Project: @multiplatform.one/components
- * File Created: 13-10-2023 09:40:26
- * Author: Lalit rajak
- * -----
- * BitSpur (c) Copyright 2021 - 2023
- *
- * 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 { SimpleInput } from '.';
-import { YStack } from 'tamagui';
-import { Key, Eye } from '@tamagui/lucide-icons';
+import { SimpleInput, SimpleInputProps } from '.';
+import type { Meta } from '@storybook/react';
 
-export default {
+const meta: Meta = {
   title: 'organize/SimpleInput',
   component: SimpleInput,
   parameters: { status: { type: 'beta' } },
+  argTypes: {
+    inputType: {
+      control: {},
+    },
+  },
+};
+
+export const main = (args: SimpleInputProps) => <SimpleInput {...args} />;
+
+const mainArgs: SimpleInputProps = {
+  inputType: 'TEXT',
 };
 
-export const password = () => (
-  <YStack justifyContent="center" alignItems="center">
-    <SimpleInput password size="$3" iconAfter={Key} passwordWithoutIcon />
-  </YStack>
-);
+main.args = mainArgs;
+
+export const passwordInputType = (args: SimpleInputProps) => <SimpleInput {...args} />;
 
-export const iconBefore = () => <SimpleInput password width={800} height={50} iconBefore={Key} />;
+const passwordInputTypeArgs: SimpleInputProps = {
+  inputType: 'PASSWORD',
+  secureTextEntry: true,
+};
 
-export const iconAfter = () => (
-  <SimpleInput width={250} height={50} iconAfter={Eye} placeholder="icon after input box" />
-);
+passwordInputType.args = passwordInputTypeArgs;
 
-export const circular = () => <SimpleInput placeholder="icon after input box" circular password />;
+main.args = mainArgs;
 
-export const passwordWithoutIcon = () => <SimpleInput password passwordWithoutIcon />;
+export default meta;