@multiplatform.one/components 0.7.0 → 0.7.2

package/src/panels/SimpleDialog/index.tsx

@@ -1,5 +1,34 @@
+/**
+ * File: /src/panels/SimpleDialog/index.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, { useEffect } from 'react';
-import type { DialogProps, DialogTitleProps, DialogDescriptionProps, DialogContentProps } from 'tamagui';
+import type {
+  DialogProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogContentProps,
+  DialogPortalProps,
+  DialogOverlayProps,
+  SizeTokens,
+} from 'tamagui';
 import type { ReactNode } from 'react';
 import { Adapt, Button, Dialog, Sheet, Unspaced } from 'tamagui';
 import { X } from '@tamagui/lucide-icons';
@@ -8,11 +37,17 @@ export type SimpleDialogProps = DialogProps & {
   contentStyle?: DialogContentProps;
   description?: ReactNode;
   descriptionStyle?: DialogDescriptionProps;
+  portalStyle?: DialogPortalProps;
   open?: boolean;
   title?: ReactNode;
   titleStyle?: DialogTitleProps;
   trigger?: ReactNode;
+  withoutCloseButton?: boolean;
+  overlayStyle?: DialogOverlayProps;
   onOpenChange?: (open: boolean) => void;
+  asLeftSideSheet?: boolean;
+  asRightSideSheet?: boolean;
+  transitionWidth?: number | SizeTokens | undefined;
 };
 
 export function SimpleDialog({
@@ -23,6 +58,12 @@ export function SimpleDialog({
   title,
   titleStyle,
   trigger,
+  portalStyle,
+  withoutCloseButton,
+  overlayStyle,
+  asLeftSideSheet,
+  asRightSideSheet,
+  transitionWidth,
   ...props
 }: SimpleDialogProps) {
   const [open, setOpen] = React.useState(props.open);
@@ -51,8 +92,19 @@ export function SimpleDialog({
           <Sheet.Overlay />
         </Sheet>
       </Adapt>
-      <Dialog.Portal>
-        <Dialog.Overlay key="overlay" animation="bouncy" o={0.5} enterStyle={{ o: 0 }} exitStyle={{ o: 0 }} />
+      <Dialog.Portal
+        {...(asRightSideSheet && { jc: 'flex-start', ai: 'flex-end' })}
+        {...(asLeftSideSheet && { jc: 'flex-start', ai: 'flex-start' })}
+        {...portalStyle}
+      >
+        <Dialog.Overlay
+          key="overlay"
+          animation="bouncy"
+          o={0.5}
+          enterStyle={{ o: 0 }}
+          exitStyle={{ o: 0 }}
+          {...overlayStyle}
+        />
         <Dialog.Content
           bordered
           elevate
@@ -65,19 +117,36 @@ export function SimpleDialog({
               },
             },
           ]}
-          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
-          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          enterStyle={{ x: 0, y: -150, opacity: 0, scale: 0.4 }}
+          exitStyle={{ x: 0, y: -150, opacity: 0, scale: 0.4 }}
           space
+          {...(asRightSideSheet && {
+            enterStyle: { x: transitionWidth || 200, opacity: 0 },
+            exitStyle: { x: transitionWidth || 200, opacity: 0 },
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+          })}
+          {...(asLeftSideSheet && {
+            enterStyle: { x: -(transitionWidth || 100), opacity: 0 },
+            exitStyle: { x: -(transitionWidth || 100), opacity: 0 },
+            animation: 'bouncy',
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+          })}
           {...contentStyle}
         >
           {title && <Dialog.Title {...titleStyle}>{title}</Dialog.Title>}
           {description && <Dialog.Description {...descriptionStyle}>{description}</Dialog.Description>}
           {children}
-          <Unspaced>
-            <Dialog.Close asChild space>
-              <Button pos="absolute" t="$3" r="$3" size="$2" circular space icon={X} />
-            </Dialog.Close>
-          </Unspaced>
+          {!withoutCloseButton && (
+            <Unspaced>
+              <Dialog.Close asChild space>
+                <Button pos="absolute" t="$3" r="$3" size="$2" circular space icon={X} />
+              </Dialog.Close>
+            </Unspaced>
+          )}
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog>

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

@@ -1,6 +1,27 @@
-import React from 'react';
+/**
+ * File: /src/panels/SimplePopover/SimplePopover.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 10-08-2023 10:50:11
+ * 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, { useState } from 'react';
 import { SimplePopover } from './index';
-import { Text, YStack, Button } from 'tamagui';
+import { Text, YStack, XStack, Switch, Input, Label } from 'tamagui';
 import type { Meta } from '@storybook/react';
 
 const meta: Meta = {
@@ -10,10 +31,97 @@ const meta: Meta = {
 };
 
 export const main = () => (
-  <SimplePopover trigger={<Button>Click here to get a Popover</Button>}>
+  <SimplePopover
+  // trigger={<Button>Click here to get a Popover</Button>}
+  >
     <YStack>
       <Text>popover content</Text>
     </YStack>
   </SimplePopover>
 );
+
+export const closeOnHoverOut = () => (
+  <SimplePopover
+    // trigger={<Button>click here</Button>}
+    closeOnHoverOut
+  >
+    <YStack>
+      <Text>popover content will close on hoverOut</Text>
+    </YStack>
+  </SimplePopover>
+);
+
+function Open() {
+  return (
+    <SimplePopover
+      // trigger={<Button>hover on it to get Popover</Button>}
+      triggerOnHover
+      arrow={false}
+      triggerStyle={{ als: 'center', ai: 'center' }}
+    >
+      <YStack>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
+          <Text key={i}>{i}</Text>
+        ))}
+      </YStack>
+    </SimplePopover>
+  );
+}
+
+export const openOnHover = () => (
+  <XStack jc="space-around">
+    <Open />
+    <Open />
+  </XStack>
+);
+
+const OnCondition = (props) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <YStack space>
+      <Label>change the switch to get popover</Label>
+      <Switch checked={props.open} onCheckedChange={setOpen} />
+      <SimplePopover
+        open={open}
+        onOpenChange={setOpen}
+        // trigger={<Button>Popup will open here</Button>}
+      >
+        <Text>Conditional popover</Text>
+      </SimplePopover>
+    </YStack>
+  );
+};
+
+export const openOnChangingTheCondition = (args) => <OnCondition {...args} />;
+
+const ConditionalPopover = () => {
+  const [open, setOpen] = useState(false);
+  const [inputVal, setInputVal] = useState('');
+
+  function handleInput(val) {
+    if (val === 'show') setOpen(true);
+    else setOpen(false);
+    setInputVal(val);
+  }
+
+  return (
+    <YStack space>
+      <SimplePopover
+        open={open}
+        onOpenChange={setOpen}
+        triggerElement={
+          <YStack>
+            <Input value={inputVal} onChangeText={handleInput} placeholder="type show to get popup" />
+          </YStack>
+        }
+        arrow={true}
+      >
+        <Text>Conditional popover</Text>
+      </SimplePopover>
+    </YStack>
+  );
+};
+
+export const openOnAnyCondition = (args) => <ConditionalPopover {...args} />;
+
 export default meta;

package/src/panels/SimplePopover/index.tsx

@@ -1,21 +1,109 @@
-import type { PopoverProps, PopoverContentProps, PopoverArrowProps } from 'tamagui';
-import { Adapt, Popover } from 'tamagui';
+/**
+ * File: /src/panels/SimplePopover/index.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 type {
+  PopoverArrowProps,
+  PopoverContentProps,
+  PopoverProps,
+  PopoverTriggerProps,
+  StackProps,
+  TamaguiElement,
+  YStackProps,
+} from 'tamagui';
+import { Adapt, Popover, PopperAnchor, View, getState, useComposedRefs, usePopoverContext } from 'tamagui';
 import React from 'react';
 import type { ReactNode } from 'react';
+import { YStack } from 'tamagui';
 
-export type SimplePopoverProps = PopoverProps & {
+export interface PopoverCustomProps {
   contentStyle?: PopoverContentProps;
   arrowStyle?: PopoverArrowProps;
-  trigger: ReactNode;
-};
+  triggerStyle?: YStackProps;
+  triggerOnHover?: boolean;
+  closeOnHoverOut?: boolean;
+  arrow?: boolean;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+}
+
+export interface PopoverOpen {
+  triggerElement: ReactNode;
+}
+
+export type ExclusiveTriggerProps = PopoverTriggerProps | PopoverOpen;
+
+export type SimplePopoverProps = PopoverProps & PopoverCustomProps & ExclusiveTriggerProps;
+
+export const SimplePopoverTrigger = React.forwardRef<TamaguiElement, StackProps>((props: StackProps, forwardedRef) => {
+  const context = usePopoverContext();
+  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+
+  const trigger = (
+    <View
+      aria-haspopup="dialog"
+      aria-expanded={context.open}
+      data-state={getState(context.open)}
+      {...props}
+      ref={composedTriggerRef}
+    />
+  );
+
+  return context.hasCustomAnchor ? trigger : <PopperAnchor asChild>{trigger}</PopperAnchor>;
+});
+
+export function SimplePopover({
+  children,
+  contentStyle,
+  triggerStyle,
+  arrowStyle,
+  arrow = true,
+  triggerOnHover,
+  closeOnHoverOut,
+  ...props
+}: SimplePopoverProps) {
+  const [open, setOpen] = React.useState(false);
+  const trigger = 'trigger' in props;
 
-export function SimplePopover({ children, trigger, contentStyle, arrowStyle, ...props }: SimplePopoverProps) {
   return (
-    <Popover size="$5" allowFlip {...props}>
-      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+    <Popover size="$5" allowFlip open={open} onOpenChange={setOpen} {...props}>
+      {trigger &&
+        props.trigger &&
+        ((
+          <Popover.Trigger asChild>
+            {triggerOnHover ? (
+              <YStack onHoverIn={() => setOpen(true)} onHoverOut={() => setOpen(false)} {...triggerStyle}>
+                {props.trigger}
+              </YStack>
+            ) : (
+              props.trigger
+            )}
+          </Popover.Trigger>
+        ) as any)}
+      {!trigger && 'triggerElement' in props && 'open' in props && (
+        <SimplePopoverTrigger asChild>{props.triggerElement}</SimplePopoverTrigger>
+      )}
+
       <Adapt when="sm" platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom>
-          <Popover.Sheet.Frame padding="$4">
+          <Popover.Sheet.Frame padding="$4" onMouseEnter={() => setOpen(true)}>
             <Adapt.Contents />
           </Popover.Sheet.Frame>
           <Popover.Sheet.Overlay />
@@ -25,22 +113,29 @@ export function SimplePopover({ children, trigger, contentStyle, arrowStyle, ...
         borderWidth={1}
         borderColor="$borderColor"
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+        exitStyle={!triggerOnHover ? { x: 0, y: -10, opacity: 0 } : undefined}
         x={0}
         y={0}
         opacity={1}
-        animation={[
-          'quick',
-          {
-            opacity: {
-              overshootClamping: true,
-            },
-          },
-        ]}
+        animation={
+          !triggerOnHover
+            ? [
+                'quick',
+                {
+                  opacity: {
+                    overshootClamping: true,
+                  },
+                },
+              ]
+            : undefined
+        }
         elevate
+        onHoverIn={triggerOnHover ? () => setOpen(true) : undefined}
+        onHoverOut={triggerOnHover || closeOnHoverOut ? () => setOpen(false) : undefined}
+        zi={9999999999}
         {...contentStyle}
       >
-        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+        {arrow && <Popover.Arrow borderWidth={1} borderColor="$borderColor" {...arrowStyle} />}
         {children}
       </Popover.Content>
     </Popover>

package/src/panels/SimpleTooltip/SimpleTooltip.stories.tsx

@@ -1,6 +1,27 @@
+/**
+ * File: /src/panels/SimpleTooltip/SimpleTooltip.stories.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 React from 'react';
 import { SimpleTooltip } from './index';
-import { Text, YStack } from 'tamagui';
+import { Text } from 'tamagui';
 import type { Meta } from '@storybook/react';
 
 const meta: Meta = {
@@ -10,17 +31,10 @@ const meta: Meta = {
 };
 
 export const main = () => (
-  <SimpleTooltip
-    element={
-      <YStack>
-        <Text fontSize={15} fontWeight="700">
-          tool tip is working fine
-        </Text>
-      </YStack>
-    }
-    // themeStyle={{ color: 'red' }}
-  >
-    <Text>Tool Tip</Text>
+  <SimpleTooltip trigger={<Text>Tool Tip</Text>}>
+    <Text fontSize={15} fontWeight="700">
+      tool tip content
+    </Text>
   </SimpleTooltip>
 );
 export default meta;

package/src/panels/SimpleTooltip/index.tsx

@@ -1,23 +1,35 @@
+/**
+ * File: /src/panels/SimpleTooltip/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 React from 'react';
-import type { TooltipProps, ThemeProps, ParagraphProps } from 'tamagui';
-import { Paragraph, Theme, Tooltip } from 'tamagui';
+import type { TooltipProps, ThemeProps } from 'tamagui';
+import { Theme, Tooltip } from 'tamagui';
 
-type SimpleToolTipProps = TooltipProps & { element: React.ReactNode } & { themeStyle?: ThemeProps } & {
-  paragraphStyle?: ParagraphProps;
-};
+type SimpleToolTipProps = TooltipProps & { trigger: React.ReactNode; themeStyle?: ThemeProps };
 
-export function SimpleTooltip({
-  Icon,
-  children,
-  element,
-  themeStyle,
-  paragraphStyle,
-  ...props
-}: SimpleToolTipProps & { Icon?: any }) {
+export function SimpleTooltip({ Icon, children, themeStyle, trigger, ...props }: SimpleToolTipProps & { Icon?: any }) {
   return (
     <Tooltip {...props}>
-      <Tooltip.Trigger cursor="pointer" ai="center">
-        {children}
+      <Tooltip.Trigger cursor="pointer" ai="center" jc="center">
+        {trigger}
       </Tooltip.Trigger>
       <Theme inverse {...themeStyle}>
         <Tooltip.Content
@@ -37,9 +49,7 @@ export function SimpleTooltip({
           ]}
         >
           <Tooltip.Arrow />
-          <Paragraph ai="center" size="$2" lineHeight="$1" {...paragraphStyle}>
-            {element}
-          </Paragraph>
+          {children}
         </Tooltip.Content>
       </Theme>
     </Tooltip>

package/types/code/Code/Code.stories.d.ts

@@ -1,3 +1,23 @@
+/**
+ * File: /src/code/Code/Code.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 { Code } from './index';
 import type { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta;

package/types/code/Code/Code.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.stories.d.ts","sourceRoot":"","sources":["../../../src/code/Code/Code.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,IAAI,CAKtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Code.stories.d.ts","sourceRoot":"","sources":["../../../src/code/Code/Code.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,IAAI,CAKtC,CAAC;AAEF,eAAe,IAAI,CAAC"}