@multiplatform.one/components 0.7.0 → 0.7.2

package/src/forms/SimpleForm/SimpleForm.stories.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/forms/SimpleForm/SimpleForm.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 17-09-2023 13:57:00
+ * Author: Clay Risser
+ * -----
+ * 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 { SimpleForm } from './index';
 import { FormInput } from '../FormInput';
@@ -5,7 +26,7 @@ import { FormSelectSimple } from '../FormSelectSimple';
 import { FormSubmitButton } from '../FormSubmitButton';
 import { FormTextArea } from '../FormTextArea';
 import { FormSwitch } from '../FormSwitch';
-import { FormRadioGroup } from '../FormRadioGroup';
+// import { FormRadioGroup } from '../FormRadioGroup';
 import { Select } from 'tamagui';
 import { action } from '@storybook/addon-actions';
 
@@ -46,7 +67,8 @@ export const main = () => (
     </FormSelectSimple>
     <FormTextArea name="bio" label="Bio" />
     <FormSwitch name="isAwesome" label="Is Awesome" />
-    <FormRadioGroup
+    {/* TODO: fix type error below */}
+    {/* <FormRadioGroup
       radioElements={[
         { label: 'male', value: 'male' },
         { label: 'female', value: 'female' },
@@ -55,7 +77,7 @@ export const main = () => (
       label="Gender"
       horizontal
       spacingProps={{ space: true }}
-    />
+    /> */}
     <FormSubmitButton onSubmit={action('onSubmit')}>Submit</FormSubmitButton>
   </SimpleForm>
 );

package/src/hooks/useAssets/index.native.ts

@@ -1,5 +1,5 @@
 import type { Asset } from 'expo-asset';
-import type { StaticImageData } from 'next/dist/client/image';
+import type { StaticImageData } from 'next/image';
 import { useAssets as expoUseAssets } from 'expo-asset';
 
 const logger = console;

package/src/hooks/useAssets/index.ts

@@ -1,4 +1,4 @@
-import type { StaticImageData } from 'next/dist/client/image';
+import type { StaticImageData } from 'next/image';
 
 export function useAssets(modules: any | any[]): (StaticImageData | undefined)[] {
   const modulesArr: (StaticImageData | undefined)[] = (Array.isArray(modules) ? modules : [modules]).map(

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

@@ -1,3 +1,24 @@
+/**
+ * File: /src/images/SimpleImage/index.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 22-06-2023 05:33:09
+ * Author: Clay Risser
+ * -----
+ * 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 { Platform } from 'react-native';
 import { useAssets } from '../../hooks';

package/src/images/SimpleImage/index.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps, Ref } from 'react';
 import type { Image } from 'expo-image';
 import type { SolitoImageProps } from 'solito/build/image/image.types';
 import type { StackProps } from 'tamagui';
-import type { StaticImageData } from 'next/dist/client/image';
+import type { StaticImageData } from 'next/image';
 import { SolitoImage } from 'solito/image';
 import { Stack, createComponent } from 'tamagui';
 import { StyleSheet } from 'react-native';
@@ -132,13 +132,10 @@ const SimpleImageComponent = forwardRef<Image, Props>(
   },
 );
 
-export const SimpleImage = createComponent<ComponentProps<typeof SimpleImageComponent>>(
-  {
-    Component: SimpleImageComponent as any,
-    acceptsClassName: true,
-  },
-  SimpleImageComponent,
-);
+export const SimpleImage = createComponent<ComponentProps<typeof SimpleImageComponent>>({
+  Component: SimpleImageComponent as any,
+  acceptsClassName: true,
+});
 
 export interface StaticRequire {
   default: StaticImageData;

package/src/mdx/components.tsx

@@ -51,6 +51,7 @@ export const mdxComponents: Components = {
   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') ? (
@@ -67,6 +68,7 @@ export const mdxComponents: Components = {
   },
   hr: (props) => <HR {...sanitizeProps(props)} />,
   ul: ({ children }) => (
+    // @ts-ignore
     <UL marginVertical="$4">{React.Children.toArray(children).map((x) => (typeof x === 'string' ? null : x))}</UL>
   ),
   ol: (props) => <YStack {...sanitizeProps(props)} marginBottom="$3" />,
@@ -75,6 +77,7 @@ export const mdxComponents: Components = {
       {props.children}
     </LI>
   ),
+  // @ts-ignore
   strong: (props) => <Paragraph fontSize="inherit" {...sanitizeProps(props)} fontWeight="700" />,
   img: ({ ...props }) => (
     <YStack marginVertical="$6">
@@ -98,6 +101,7 @@ export const mdxComponents: Components = {
         fontFamily="$silkscreen"
         fontWeight="300"
         lineHeight="$9"
+        // @ts-ignore
         letterSpacing="$0"
         opacity={0.65}
         size="$8"

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

@@ -0,0 +1,52 @@
+/**
+ * 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 } from 'tamagui';
+
+export default {
+  title: 'organize/SimpleAccordion',
+  component: SimpleAccordion,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+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={<Text>Trigger Orange </Text>} value="orange">
+      <YStack padding="$4">
+        <Text>Orange Content</Text>
+      </YStack>
+    </AccordionItem>
+  </SimpleAccordion>
+);

package/src/organize/SimpleAccordion/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * File: /src/organize/SimpleAccordion/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 18-10-2023 15:23:17
+ * 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 type { AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from 'ui';
+import { Accordion } from 'ui';
+import React from 'react';
+
+interface SimpleAccordionProps {
+  children: React.ReactNode;
+  overflow?: 'visible' | 'hidden' | 'scroll';
+  type?: 'single' | 'multiple';
+}
+
+type SimpleAccordionItemProps = AccordionItemProps & {
+  trigger: React.ReactNode;
+  triggerStyle?: AccordionTriggerProps;
+  contentStyle?: AccordionContentProps;
+  children: React.ReactNode;
+};
+
+export function SimpleAccordion({ children, ...props }: SimpleAccordionProps) {
+  return (
+    <Accordion overflow="hidden" type="single" {...props}>
+      {children}
+    </Accordion>
+  );
+}
+
+export function AccordionItem({ trigger, triggerStyle, children, contentStyle, ...props }: SimpleAccordionItemProps) {
+  return (
+    <Accordion.Item {...props}>
+      <Accordion.Trigger flexDirection="row" justifyContent="space-between" {...triggerStyle}>
+        {trigger}
+      </Accordion.Trigger>
+      <Accordion.Content {...contentStyle}>{children}</Accordion.Content>
+    </Accordion.Item>
+  );
+}

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

@@ -0,0 +1,45 @@
+/**
+ * File: /src/organize/SimpleCarousel/Carousel.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 17-10-2023 14:47:51
+ * 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 { SimpleCarousel } from './index';
+import React from 'react';
+import { SimpleImage } from '../../images/SimpleImage';
+
+export default {
+  title: 'organize/SimpleCarousel',
+  component: SimpleCarousel,
+  parameters: {
+    status: {
+      type: 'beta',
+    },
+  },
+};
+
+const mail = require('../../../assets/mail.png');
+const pentagon = require('../../../assets/pentagon.svg');
+
+export const Main = () => (
+  <SimpleCarousel speed={5000} 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>
+);

package/src/organize/SimpleCarousel/index.tsx

@@ -0,0 +1,151 @@
+/**
+ * File: /src/organize/SimpleCarousel/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 17-10-2023 14:46:38
+ * 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 type { YStackProps } from 'tamagui';
+import { Stack, Text, XStack, YStack } from 'tamagui';
+import React, { useEffect, useState, useRef } from 'react';
+import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons';
+import type { IconProps } from '@tamagui/helpers-icon';
+
+type CarouselProps = YStackProps & {
+  children: React.ReactNode;
+  speed?: number;
+  showCenterIndicator?: boolean;
+  showSideArrows?: boolean;
+  defaultSlide?: number;
+  sideArrowStyle?: IconProps;
+};
+
+export function SimpleCarousel({
+  children,
+  speed = 3000,
+  showCenterIndicator = true,
+  showSideArrows = true,
+  defaultSlide,
+  sideArrowStyle,
+  ...props
+}: CarouselProps) {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const childrenCount = React.Children.count(children);
+  const carouselRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const slideInterval = setInterval(() => {
+      setCurrentSlide((prevSlide) => (prevSlide + 1) % childrenCount);
+    }, speed);
+
+    return () => {
+      clearInterval(slideInterval);
+    };
+  }, [children, speed]);
+
+  useEffect(() => {
+    if (defaultSlide !== undefined && defaultSlide <= childrenCount) {
+      setCurrentSlide((defaultSlide - 1 + childrenCount) % childrenCount);
+    }
+  }, [defaultSlide]);
+
+  function handlePressNext() {
+    setCurrentSlide((prevSlide) => (prevSlide + 1) % childrenCount);
+  }
+
+  function handlePressPrev() {
+    setCurrentSlide((prevSlide) => (prevSlide - 1 + childrenCount) % childrenCount);
+  }
+
+  function renderSideArrows() {
+    return (
+      <>
+        <YStack
+          height={carouselRef.current?.clientHeight}
+          bg="$backgroundTransparent"
+          position="absolute"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text onPress={handlePressPrev} cur="pointer">
+            <ChevronLeft color="gray" size="$4" {...sideArrowStyle} />
+          </Text>
+        </YStack>
+        <YStack
+          height={carouselRef.current?.clientHeight}
+          bg="$backgroundTransparent"
+          position="absolute"
+          justifyContent="center"
+          alignItems="center"
+          right={0}
+        >
+          <Text onPress={handlePressNext} cur="pointer">
+            <ChevronRight color="gray" size="$4" {...sideArrowStyle} />
+          </Text>
+        </YStack>
+      </>
+    );
+  }
+
+  function renderCenterIndicator() {
+    return (
+      <YStack
+        height={carouselRef.current?.clientHeight}
+        bg="$backgroundTransparent"
+        position="absolute"
+        justifyContent="flex-end"
+        alignItems="center"
+        left={0}
+        right={0}
+      >
+        <XStack space="$2" ai="center" marginBottom={20}>
+          {Array.from({ length: childrenCount }).map((_, index) => (
+            <Stack
+              height={index === currentSlide ? 4 : 1}
+              bg="$backgroundHover"
+              width={30}
+              key={index}
+              cursor="pointer"
+              marginVertical="$2"
+              onPress={() => setCurrentSlide(index)}
+            />
+          ))}
+        </XStack>
+      </YStack>
+    );
+  }
+
+  return (
+    <YStack overflow="hidden">
+      <XStack
+        transform={[{ translateX: -currentSlide * (carouselRef.current?.clientWidth || 1) }]}
+        // TODO: transitionDuration="transform 0.5s ease"
+        width="100%"
+        animation="lazy"
+        {...props}
+        ref={carouselRef}
+      >
+        {React.Children.map(children, (child, index) => (
+          <YStack key={index} flex-flexGrow={0} flexShrink={0} flexBasis="100%">
+            {child}
+          </YStack>
+        ))}
+      </XStack>
+      {showCenterIndicator && childrenCount > 1 && renderCenterIndicator()}
+      {showSideArrows && childrenCount > 1 && renderSideArrows()}
+    </YStack>
+  );
+}

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

@@ -0,0 +1,47 @@
+/**
+ * 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';
+
+export default {
+  title: 'organize/SimpleInput',
+  component: SimpleInput,
+  parameters: { status: { type: 'beta' } },
+};
+
+export const password = () => (
+  <YStack justifyContent="center" alignItems="center">
+    <SimpleInput password size="$3" iconAfter={Key} passwordWithoutIcon />
+  </YStack>
+);
+
+export const iconBefore = () => <SimpleInput password width={800} height={50} iconBefore={Key} />;
+
+export const iconAfter = () => (
+  <SimpleInput width={250} height={50} iconAfter={Eye} placeholder="icon after input box" />
+);
+
+export const circular = () => <SimpleInput placeholder="icon after input box" circular password />;
+
+export const passwordWithoutIcon = () => <SimpleInput password passwordWithoutIcon />;