@multiplatform.one/components 0.7.1 → 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 @@
+/**
+ * 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, XStack, Switch, Input, Label } from 'tamagui';
+import { Text, YStack, XStack, Switch, Input, Label } from 'tamagui';
 import type { Meta } from '@storybook/react';
 
 const meta: Meta = {
@@ -10,7 +31,9 @@ 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>
@@ -18,7 +41,10 @@ export const main = () => (
 );
 
 export const closeOnHoverOut = () => (
-  <SimplePopover trigger={<Button>click here</Button>} closeOnHoverOut>
+  <SimplePopover
+    // trigger={<Button>click here</Button>}
+    closeOnHoverOut
+  >
     <YStack>
       <Text>popover content will close on hoverOut</Text>
     </YStack>
@@ -28,7 +54,7 @@ export const closeOnHoverOut = () => (
 function Open() {
   return (
     <SimplePopover
-      trigger={<Button>hover on it to get Popover</Button>}
+      // trigger={<Button>hover on it to get Popover</Button>}
       triggerOnHover
       arrow={false}
       triggerStyle={{ als: 'center', ai: 'center' }}
@@ -55,7 +81,11 @@ const OnCondition = (props) => {
     <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>}>
+      <SimplePopover
+        open={open}
+        onOpenChange={setOpen}
+        // trigger={<Button>Popup will open here</Button>}
+      >
         <Text>Conditional popover</Text>
       </SimplePopover>
     </YStack>

package/src/panels/SimplePopover/index.tsx

@@ -1,10 +1,32 @@
+/**
+ * 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 {
-  PopoverProps,
-  PopoverContentProps,
   PopoverArrowProps,
-  YStackProps,
-  TamaguiElement,
+  PopoverContentProps,
+  PopoverProps,
+  PopoverTriggerProps,
   StackProps,
+  TamaguiElement,
+  YStackProps,
 } from 'tamagui';
 import { Adapt, Popover, PopperAnchor, View, getState, useComposedRefs, usePopoverContext } from 'tamagui';
 import React from 'react';
@@ -22,10 +44,6 @@ export interface PopoverCustomProps {
   setOpen?: (open: boolean) => void;
 }
 
-export interface PopoverTriggerProps {
-  trigger: ReactNode;
-}
-
 export interface PopoverOpen {
   triggerElement: ReactNode;
 }
@@ -66,17 +84,19 @@ export function SimplePopover({
 
   return (
     <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>
-      )}
+      {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>
       )}
@@ -115,7 +135,7 @@ export function SimplePopover({
         zi={9999999999}
         {...contentStyle}
       >
-        {arrow && <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"}