@multiplatform.one/components 1.0.1 → 1.0.2

package/src/panels/SimpleSheet/index.tsx

@@ -1,108 +1,40 @@
+/**
+ * File: /src/panels/SimpleSheet/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 25-01-2024 09:49:47
+ * Author: Lalit rajak
+ * -----
+ * 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 { SizeTokens, SheetProps } from 'tamagui';
-import { Button, XStack, YStack } from 'tamagui';
-import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons';
+import type { SheetProps, DialogOverlayProps, YStackProps } from 'tamagui';
 import { Sheet } from '@tamagui/sheet';
-import { create } from 'zustand';
-
-type SimpleSheetProps = SheetProps & { sheetElement?: React.ReactNode } & { modal?: boolean } & {
-  buttonSize?: SizeTokens | undefined;
-};
-
-type ComponentProps = SheetProps & { innerSheetElement?: React.ReactNode } & {
-  innerSheetButtonSize?: SizeTokens | undefined;
-};
-
-interface State {
-  position: number;
-  open: boolean;
-  innerOpen: boolean;
-}
-
-interface Action {
-  setPosition: (position: number) => void;
-  setOpen: (open: boolean) => void;
-  setInnerOpen: (innerOpen: boolean) => void;
-}
 
-const useStore = create<State & Action>((set) => ({
-  position: 0,
-  open: false,
-  innerOpen: false,
-  setPosition: (position) => set({ position }),
-  setOpen: (open) => set({ open }),
-  setInnerOpen: (innerOpen) => set({ innerOpen }),
-}));
-
-export const SimpleSheet = ({
-  children,
-  sheetElement,
-  modal,
-  innerSheetElement,
-  buttonSize,
-  innerSheetButtonSize,
-  ...props
-}: SimpleSheetProps & ComponentProps) => {
-  const { position, open, innerOpen, setPosition, setOpen, setInnerOpen } = useStore();
-  return (
-    <>
-      <XStack space>
-        <Button onPress={() => setOpen(true)}>{children}</Button>
-      </XStack>
-      <Sheet
-        forceRemoveScrollEnabled={open}
-        modal={modal || false}
-        open={open}
-        onOpenChange={setOpen}
-        snapPoints={[85, 50, 25]}
-        dismissOnSnapToBottom
-        position={position}
-        onPositionChange={setPosition}
-        zIndex={100_000}
-        {...props}
-      >
-        <Sheet.Overlay />
-        <Sheet.Handle />
-        <Sheet.Frame>
-          {sheetElement || (
-            <YStack f={1} p="$4" space="$5" jc="center" ai="center">
-              <Button size={buttonSize || '$6'} circular icon={ChevronDown} onPress={() => setOpen(false)} />
-              {(modal || innerSheetElement) && (
-                <>
-                  <InnerSheet
-                    open={innerOpen}
-                    onOpenChange={setInnerOpen}
-                    innerSheetElement={innerSheetElement}
-                    innerSheetButtonSize={innerSheetButtonSize}
-                    {...props}
-                  />
-                  <Button size={buttonSize || '$6'} circular icon={ChevronUp} onPress={() => setInnerOpen(true)} />
-                </>
-              )}
-            </YStack>
-          )}
-        </Sheet.Frame>
-      </Sheet>
-    </>
-  );
+export type SimpleSheetProps = SheetProps & {
+  overlayStyle?: DialogOverlayProps;
+  frameStyle?: YStackProps;
 };
 
-function InnerSheet({ innerSheetElement, innerSheetButtonSize, ...props }: ComponentProps) {
+export function SimpleSheet({ children, overlayStyle, frameStyle, ...props }: SimpleSheetProps) {
   return (
-    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
-      <Sheet.Overlay />
+    <Sheet zIndex={100_000} {...props}>
+      <Sheet.Overlay animation="lazy" enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} {...overlayStyle} />
       <Sheet.Handle />
-      <Sheet.Frame f={1} jc="center" ai="center" space="$5">
-        <Sheet.ScrollView p="$4" space>
-          <Button
-            size={innerSheetButtonSize || '$8'}
-            circular
-            als="center"
-            icon={ChevronDown}
-            onPress={() => props.onOpenChange?.(false)}
-          />
-          {innerSheetElement}
-        </Sheet.ScrollView>
+      <Sheet.Frame padding="$4" justifyContent="center" alignItems="center" gap="$5" {...frameStyle}>
+        {children}
       </Sheet.Frame>
     </Sheet>
   );

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

@@ -21,7 +21,7 @@
 
 import React from 'react';
 import { SimpleTooltip } from './index';
-import { Text } from 'tamagui';
+import { Button, Label, Switch, Text, XStack, YStack } from 'tamagui';
 import type { Meta } from '@storybook/react';
 
 const meta: Meta = {
@@ -30,11 +30,22 @@ const meta: Meta = {
   parameters: { status: { type: 'beta' } },
 };
 
-export const main = () => (
-  <SimpleTooltip trigger={<Text>Tool Tip</Text>}>
-    <Text fontSize={15} fontWeight="700">
-      tool tip content
-    </Text>
-  </SimpleTooltip>
-);
+function Tooltip() {
+  const [arrow, setArrow] = React.useState(true);
+  return (
+    <YStack gap="$4">
+      <XStack gap padding="$4" alignItems="center">
+        <Switch size="$3" checked={arrow} onCheckedChange={setArrow}>
+          <Switch.Thumb animation="bouncy" />
+        </Switch>
+        <Label>arrow</Label>
+        <SimpleTooltip arrow={arrow} trigger={<Button>?</Button>}>
+          <Text>tooltip content</Text>
+        </SimpleTooltip>
+      </XStack>
+    </YStack>
+  );
+}
+
+export const main = () => <Tooltip />;
 export default meta;

package/src/panels/SimpleTooltip/index.tsx

@@ -20,25 +20,40 @@
  */
 
 import React from 'react';
-import type { TooltipProps, ThemeProps } from 'tamagui';
+import type { TooltipProps, ThemeProps, PopoverContentProps, PopoverTriggerProps, PopoverArrowProps } from 'tamagui';
 import { Theme, Tooltip } from 'tamagui';
 
-type SimpleToolTipProps = TooltipProps & { trigger: React.ReactNode; themeStyle?: ThemeProps };
+type SimpleToolTipProps = TooltipProps & {
+  trigger: React.ReactNode;
+  themeStyle?: ThemeProps;
+  contentStyle?: PopoverContentProps;
+  triggerStyle?: PopoverTriggerProps;
+  arrow: boolean;
+  arrowStyle?: PopoverArrowProps;
+};
 
-export function SimpleTooltip({ Icon, children, themeStyle, trigger, ...props }: SimpleToolTipProps & { Icon?: any }) {
+export function SimpleTooltip({
+  Icon,
+  children,
+  trigger,
+  arrow,
+  themeStyle,
+  triggerStyle,
+  contentStyle,
+  arrowStyle,
+  ...props
+}: SimpleToolTipProps & { Icon?: any }) {
   return (
     <Tooltip {...props}>
-      <Tooltip.Trigger cursor="pointer" ai="center" jc="center">
-        {trigger}
-      </Tooltip.Trigger>
+      <Tooltip.Trigger {...triggerStyle}>{trigger}</Tooltip.Trigger>
       <Theme inverse {...themeStyle}>
         <Tooltip.Content
-          enterStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}
-          exitStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}
+          enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
           scale={1}
           x={0}
           y={0}
-          o={1}
+          opacity={1}
           animation={[
             'quick',
             {
@@ -47,8 +62,9 @@ export function SimpleTooltip({ Icon, children, themeStyle, trigger, ...props }:
               },
             },
           ]}
+          {...contentStyle}
         >
-          <Tooltip.Arrow />
+          {arrow && <Tooltip.Arrow {...arrowStyle} />}
           {children}
         </Tooltip.Content>
       </Theme>

package/src/tints.tsx

@@ -0,0 +1,150 @@
+/*
+ *  File: /src/hooks/useTint.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 22-04-2024 16:34:20
+ *  Author: Nate Wienert
+ *  Author: Clay Risser
+ *  Reference: https://github.com/tamagui/tamagui/blob/v1.94.5/packages/logo/src/tints.tsx
+ *  -----
+ *  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 { Dispatch, SetStateAction } from 'react';
+import type { ThemeName, ThemeProps } from 'tamagui';
+import { Theme } from 'tamagui';
+import { useState, createContext, useContext, useMemo } from 'react';
+
+export type TintFamily = string | number | symbol;
+
+export interface TintFamilies {
+  [family: TintFamily]: ThemeName[];
+}
+
+export interface TintFamiliesContextValue {
+  families: TintFamilies;
+  family: TintFamily;
+  tintIndex: number;
+  setFamily: Dispatch<SetStateAction<TintFamily>>;
+  setTintIndex: (next: number) => void;
+}
+
+export interface Tint {
+  families: TintFamilies;
+  name: TintFamily;
+  tints: ThemeName[];
+}
+
+const defaultTintFamiliesContextValue: TintFamiliesContextValue = {
+  setFamily: () => {
+    return;
+  },
+  setTintIndex: (_next: number) => {
+    return;
+  },
+  family: 'tamagui',
+  tintIndex: -3,
+  families: {
+    easter: ['yellow', 'pink', 'yellow', 'pink', 'yellow', 'pink', 'yellow'],
+    halloween: ['orange', 'gray', 'orange', 'gray', 'orange', 'gray', 'orange'] as ThemeName[],
+    lunar: ['yellow', 'red', 'red', 'red', 'red', 'red', 'yellow'],
+    tamagui: ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'],
+    valentine: ['pink', 'red', 'pink', 'red', 'pink', 'red', 'pink'],
+    xmas: ['red', 'green', 'red', 'green', 'red', 'green', 'red'],
+  },
+};
+
+const TintFamiliesContext = createContext<TintFamiliesContextValue>(defaultTintFamiliesContextValue);
+
+export interface TintFamiliesProviderProps {
+  children: React.ReactNode;
+  defaultFamily?: TintFamily;
+  defaultIndex?: number;
+  families?: TintFamilies;
+}
+
+export function TintFamiliesProvider(props: TintFamiliesProviderProps) {
+  const [family, setFamily] = useState<TintFamily>(props.defaultFamily || defaultTintFamiliesContextValue.family);
+  const [tintIndex, setTintIndex] = useState<number>(props.defaultIndex || defaultTintFamiliesContextValue.tintIndex);
+  const families = props.families || defaultTintFamiliesContextValue.families;
+  const value = useMemo(
+    () => ({
+      families,
+      family,
+      tintIndex,
+      setFamily,
+      setTintIndex: (next: number) => {
+        setTintIndex(next % families[family].length);
+      },
+    }),
+    [family, setFamily, families, tintIndex, setTintIndex],
+  );
+  return <TintFamiliesContext.Provider value={value}>{props.children}</TintFamiliesContext.Provider>;
+}
+
+export function useTint(altOffset = -1) {
+  const { families, family, setFamily, setTintIndex, tintIndex } = useContext(TintFamiliesContext);
+  const tints = families[family];
+  const tintAltIndex = Math.abs((tintIndex + altOffset) % tints.length);
+  const familiesNames = useMemo(() => Object.keys(families), [families]);
+  return {
+    families,
+    familiesNames,
+    name: family,
+    tint: tints[tintIndex] as ThemeName,
+    tintAlt: tints[tintAltIndex] as ThemeName,
+    tintAltIndex,
+    tintIndex,
+    tints,
+    setFamily,
+    setTintIndex,
+    setNextTint: () => {
+      setTintIndex(tintIndex + 1);
+    },
+    setNextTintFamily: () => {
+      setFamily(
+        (family: TintFamily) => familiesNames[(familiesNames.indexOf(family as string) + 1) % familiesNames.length],
+      );
+    },
+  } as const;
+}
+
+export interface ThemeTintProps extends ThemeProps {
+  disable?: boolean;
+}
+
+export function ThemeTint({ disable, children, ...rest }: ThemeTintProps) {
+  const curTint = useTint().tint;
+  return (
+    <Theme {...rest} name={disable ? null : curTint}>
+      {children}
+    </Theme>
+  );
+}
+
+export interface ThemeTintAltProps extends ThemeProps {
+  disable?: boolean;
+  offset?: number;
+}
+
+export function ThemeTintAlt({ children, disable, offset = 1, ...rest }: ThemeTintAltProps) {
+  const curTint = useTint(offset).tintAlt;
+  const name = disable ? null : curTint;
+  return (
+    <Theme name={name} {...rest}>
+      {children}
+    </Theme>
+  );
+}

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

@@ -1,10 +1,10 @@
 /**
  * File: /src/code/Code/Code.stories.tsx
  * Project: @multiplatform.one/components
- * File Created: 22-06-2023 05:33:09
+ * File Created: 04-04-2024 15:50:39
  * Author: Clay Risser
  * -----
- * BitSpur (c) Copyright 2021 - 2023
+ * 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.