@jobber/components-native 0.101.6 → 0.101.8

package/src/ActionLabel/docs/ActionLabelDarkBackgroundExample.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { View } from "react-native";
+import { ActionLabel, useAtlantisTheme } from "@jobber/components-native";
+
+export function ActionLabelDarkBackgroundExample(
+  props: Partial<ComponentProps<typeof ActionLabel>>,
+) {
+  const { children, ...actionLabelProps } = props;
+  const { tokens } = useAtlantisTheme();
+  console.log({ tokens });
+
+  return (
+    <View
+      style={{
+        backgroundColor: tokens["color-surface--reverse"],
+        padding: tokens["space-base"],
+      }}
+    >
+      <ActionLabel variation="onPrimary" {...actionLabelProps}>
+        {children ?? "Light Me Up"}
+      </ActionLabel>
+    </View>
+  );
+}

package/src/ActionLabel/docs/ActionLabelDisabledExample.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { ActionLabel } from "@jobber/components-native";
+
+export function ActionLabelDisabledExample(
+  props: Partial<ComponentProps<typeof ActionLabel>>,
+) {
+  const { children, ...actionLabelProps } = props;
+
+  return (
+    <ActionLabel disabled {...actionLabelProps}>
+      {children ?? "Disabled"}
+    </ActionLabel>
+  );
+}

package/src/ActionLabel/docs/index.ts

@@ -0,0 +1,4 @@
+export { ActionLabelBasicExample } from "./ActionLabelBasicExample";
+export { ActionLabelColorExample } from "./ActionLabelColorExample";
+export { ActionLabelDarkBackgroundExample } from "./ActionLabelDarkBackgroundExample";
+export { ActionLabelDisabledExample } from "./ActionLabelDisabledExample";

package/src/ActivityIndicator/ActivityIndicator.stories.tsx

@@ -1,11 +1,6 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import {
-  ActivityIndicator,
-  Content,
-  Divider,
-  Heading,
-} from "@jobber/components-native";
+import { ActivityIndicator } from "@jobber/components-native";
+import { ActivityIndicatorBasicExample } from "./docs";
 
 const meta = {
   title: "Components/Status and Feedback/ActivityIndicator",
@@ -17,18 +12,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => (
-  <Content>
-    <Heading level="subtitle">Small</Heading>
-    <ActivityIndicator size="small" />
-    <Divider size="base" />
-    <Heading level="subtitle">Large</Heading>
-    <ActivityIndicator {...args} />
-  </Content>
-);
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ActivityIndicatorBasicExample,
   args: {
     size: "large",
   },

package/src/ActivityIndicator/docs/ActivityIndicatorBasicExample.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import {
+  ActivityIndicator,
+  Content,
+  Divider,
+  Heading,
+} from "@jobber/components-native";
+
+export function ActivityIndicatorBasicExample(
+  props: Partial<ComponentProps<typeof ActivityIndicator>>,
+) {
+  return (
+    <Content>
+      <Heading level="subtitle">Small</Heading>
+      <ActivityIndicator size="small" />
+      <Divider size="base" />
+      <Heading level="subtitle">Large</Heading>
+      <ActivityIndicator size="large" {...props} />
+    </Content>
+  );
+}

package/src/ActivityIndicator/docs/index.ts

@@ -0,0 +1 @@
+export { ActivityIndicatorBasicExample } from "./ActivityIndicatorBasicExample";

package/src/AtlantisThemeContext/AtlantisThemeContext.stories.tsx

@@ -1,13 +1,10 @@
-import React from "react";
-import { View } from "react-native";
+import type React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { AtlantisThemeContextProvider } from "@jobber/components-native";
 import {
-  AtlantisThemeContextProvider,
-  Button,
-  Content,
-  Text,
-  useAtlantisTheme,
-} from "@jobber/components-native";
+  AtlantisThemeContextBasicExample,
+  AtlantisThemeContextForceThemeForProviderExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Themes/AtlantisThemeContext",
@@ -26,70 +23,10 @@ type Story = StoryObj<
   }
 >;
 
-function ChildrenComponent({
-  message = "It is possible to have multiple Atlantis Theme providers.",
-}: {
-  readonly message?: string;
-}) {
-  const { theme, tokens, setTheme } = useAtlantisTheme();
-
-  return (
-    <View
-      style={{
-        backgroundColor: tokens["color-surface"],
-      }}
-    >
-      <Content>
-        <Text>{message}</Text>
-        <Text>{`Current theme: ${theme}`}</Text>
-        <Text>Tokens can be accessed using tokens[token-name]</Text>
-        <Text>{`For example color-surface: ${tokens["color-surface"]}`}</Text>
-        <Button label="Set dark theme" onPress={() => setTheme("dark")} />
-        <Button label="Set light theme" onPress={() => setTheme("light")} />
-      </Content>
-    </View>
-  );
-}
-
-function ForcedDarkThemeComponent() {
-  const { tokens } = useAtlantisTheme();
-
-  return (
-    <View
-      style={{
-        backgroundColor: tokens["color-surface"],
-      }}
-    >
-      <Content>
-        <Text>This will always be a dark theme</Text>
-      </Content>
-    </View>
-  );
-}
-
-const BasicTemplate = (args: Story["args"]) => {
-  return (
-    <AtlantisThemeContextProvider {...args}>
-      <ChildrenComponent />
-    </AtlantisThemeContextProvider>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
-};
-
-const ForceThemeTemplate = (args: Story["args"]) => {
-  return (
-    <AtlantisThemeContextProvider {...args}>
-      <ChildrenComponent message="It is possible to have a provider ignore Theme Changes" />
-      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
-        <ForcedDarkThemeComponent />
-      </AtlantisThemeContextProvider>
-    </AtlantisThemeContextProvider>
-  );
+  render: AtlantisThemeContextBasicExample,
 };
 
 export const ForceThemeForProvider: Story = {
-  render: ForceThemeTemplate,
+  render: AtlantisThemeContextForceThemeForProviderExample,
 };

package/src/AtlantisThemeContext/docs/AtlantisThemeContextBasicExample.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { View } from "react-native";
+import {
+  AtlantisThemeContextProvider,
+  Button,
+  Content,
+  Text,
+  useAtlantisTheme,
+} from "@jobber/components-native";
+import type { AtlantisThemeContextProviderProps } from "@jobber/components-native";
+
+function ChildrenComponent({
+  message = "It is possible to have multiple Atlantis Theme providers.",
+}: {
+  readonly message?: string;
+}) {
+  const { theme, tokens, setTheme } = useAtlantisTheme();
+
+  return (
+    <View style={{ backgroundColor: tokens["color-surface"] }}>
+      <Content>
+        <Text>{message}</Text>
+        <Text>{`Current theme: ${theme}`}</Text>
+        <Text>Tokens can be accessed using tokens[token-name]</Text>
+        <Text>{`For example color-surface: ${tokens["color-surface"]}`}</Text>
+        <Button label="Set dark theme" onPress={() => setTheme("dark")} />
+        <Button label="Set light theme" onPress={() => setTheme("light")} />
+      </Content>
+    </View>
+  );
+}
+
+export function AtlantisThemeContextBasicExample(
+  props: Partial<Omit<AtlantisThemeContextProviderProps, "children">>,
+) {
+  return (
+    <AtlantisThemeContextProvider {...props}>
+      <ChildrenComponent />
+    </AtlantisThemeContextProvider>
+  );
+}

package/src/AtlantisThemeContext/docs/AtlantisThemeContextForceThemeForProviderExample.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { View } from "react-native";
+import {
+  AtlantisThemeContextProvider,
+  Button,
+  Content,
+  Text,
+  useAtlantisTheme,
+} from "@jobber/components-native";
+import type { AtlantisThemeContextProviderProps } from "@jobber/components-native";
+
+function ChildrenComponent({
+  message = "It is possible to have multiple Atlantis Theme providers.",
+}: {
+  readonly message?: string;
+}) {
+  const { theme, tokens, setTheme } = useAtlantisTheme();
+
+  return (
+    <View style={{ backgroundColor: tokens["color-surface"] }}>
+      <Content>
+        <Text>{message}</Text>
+        <Text>{`Current theme: ${theme}`}</Text>
+        <Text>Tokens can be accessed using tokens[token-name]</Text>
+        <Text>{`For example color-surface: ${tokens["color-surface"]}`}</Text>
+        <Button label="Set dark theme" onPress={() => setTheme("dark")} />
+        <Button label="Set light theme" onPress={() => setTheme("light")} />
+      </Content>
+    </View>
+  );
+}
+
+function ForcedDarkThemeComponent() {
+  const { tokens } = useAtlantisTheme();
+
+  return (
+    <View style={{ backgroundColor: tokens["color-surface"] }}>
+      <Content>
+        <Text>This will always be a dark theme</Text>
+      </Content>
+    </View>
+  );
+}
+
+export function AtlantisThemeContextForceThemeForProviderExample(
+  props: Partial<Omit<AtlantisThemeContextProviderProps, "children">>,
+) {
+  return (
+    <AtlantisThemeContextProvider {...props}>
+      <ChildrenComponent message="It is possible to have a provider ignore Theme Changes" />
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <ForcedDarkThemeComponent />
+      </AtlantisThemeContextProvider>
+    </AtlantisThemeContextProvider>
+  );
+}

package/src/AtlantisThemeContext/docs/index.ts

@@ -0,0 +1,2 @@
+export { AtlantisThemeContextBasicExample } from "./AtlantisThemeContextBasicExample";
+export { AtlantisThemeContextForceThemeForProviderExample } from "./AtlantisThemeContextForceThemeForProviderExample";

package/src/AutoLink/AutoLink.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { AutoLink } from "@jobber/components-native";
+import { AutoLinkBasicExample, AutoLinkSkipPhoneNumberExample } from "./docs";
 
 const meta = {
   title: "Components/Text and Typography/AutoLink",
@@ -12,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
+  render: AutoLinkBasicExample,
   args: {
     children:
       "I am a test with a link to getjobber.com! Call me at 902-555-5555 or email me at test@example.com",
@@ -19,6 +21,7 @@ export const Basic: Story = {
 };
 
 export const SkipPhoneNumber: Story = {
+  render: AutoLinkSkipPhoneNumberExample,
   args: {
     phone: false,
     children:

package/src/AutoLink/docs/AutoLinkBasicExample.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import { AutoLink } from "@jobber/components-native";
+
+export function AutoLinkBasicExample(
+  props: Partial<ComponentProps<typeof AutoLink>>,
+) {
+  return (
+    <AutoLink {...props}>
+      {props.children ??
+        "I am a test with a link to getjobber.com! Call me at 902-555-5555 or email me at test@example.com"}
+    </AutoLink>
+  );
+}

package/src/AutoLink/docs/AutoLinkSkipPhoneNumberExample.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import { AutoLink } from "@jobber/components-native";
+
+export function AutoLinkSkipPhoneNumberExample(
+  props: Partial<ComponentProps<typeof AutoLink>>,
+) {
+  return (
+    <AutoLink phone={false} {...props}>
+      {props.children ??
+        "Ignoring phone numbers like 902-555-5555 but still linking getjobber.com!"}
+    </AutoLink>
+  );
+}

package/src/AutoLink/docs/index.ts

@@ -0,0 +1,2 @@
+export { AutoLinkBasicExample } from "./AutoLinkBasicExample";
+export { AutoLinkSkipPhoneNumberExample } from "./AutoLinkSkipPhoneNumberExample";

package/src/Banner/Banner.stories.tsx

@@ -1,7 +1,12 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
-import { Banner, Content, Text, TextList } from "@jobber/components-native";
+import { Banner } from "@jobber/components-native";
+import {
+  BannerActionsInBannersExample,
+  BannerBasicExample,
+  BannerErrorDetailsExample,
+  BannerErrorExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Status and Feedback/Banner",
@@ -17,51 +22,12 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = () => (
-  <Content>
-    <Banner type="success">
-      <Text>Your import is complete</Text>
-    </Banner>
-    <Banner type="notice">
-      <Text>Your import is in progress</Text>
-    </Banner>
-    <Banner type="warning">
-      <Text>Your trial is about to end</Text>
-    </Banner>
-    <Banner type="error">
-      <Text>There was an error with your import</Text>
-    </Banner>
-  </Content>
-);
-
-const ActionsTemplate = (args: Story["args"]) => (
-  <Banner {...args}>{args?.children}</Banner>
-);
-
-const ErrorTemplate = (args: Story["args"]) => (
-  <Banner {...args}>{args?.children}</Banner>
-);
-
-const ErrorDetailsTemplate = (args: Story["args"]) => {
-  const listItems = [
-    "This client already exists",
-    "This phone number doesn't receive SMS",
-  ];
-
-  return (
-    <Banner {...args}>
-      <Text level="text">There was an error submitting your form:</Text>
-      <TextList level="text" items={listItems} />
-    </Banner>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: BannerBasicExample,
 };
 
 export const ActionsInBanners: Story = {
-  render: ActionsTemplate,
+  render: BannerActionsInBannersExample,
   args: {
     type: "notice",
     children: "Your trial has been extended!",
@@ -70,7 +36,7 @@ export const ActionsInBanners: Story = {
 };
 
 export const Error: Story = {
-  render: ErrorTemplate,
+  render: BannerErrorExample,
   args: {
     type: "error",
     children: "Currently offline. Functionality is limited.",
@@ -79,7 +45,7 @@ export const Error: Story = {
 };
 
 export const ErrorDetails: Story = {
-  render: ErrorDetailsTemplate,
+  render: BannerErrorDetailsExample,
   args: {
     type: "error",
     icon: "alert",

package/src/Banner/docs/BannerActionsInBannersExample.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import { action } from "storybook/actions";
+import { Banner } from "@jobber/components-native";
+
+export function BannerActionsInBannersExample(
+  props: Partial<ComponentProps<typeof Banner>>,
+) {
+  return (
+    <Banner
+      type="notice"
+      action={{ label: "View Plans", onPress: () => action("alert")("Plans") }}
+      {...props}
+    >
+      {props.children ?? "Your trial has been extended!"}
+    </Banner>
+  );
+}

package/src/Banner/docs/BannerBasicExample.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Banner, Content, Text } from "@jobber/components-native";
+
+export function BannerBasicExample() {
+  return (
+    <Content>
+      <Banner type="success">
+        <Text>Your import is complete</Text>
+      </Banner>
+      <Banner type="notice">
+        <Text>Your import is in progress</Text>
+      </Banner>
+      <Banner type="warning">
+        <Text>Your trial is about to end</Text>
+      </Banner>
+      <Banner type="error">
+        <Text>There was an error with your import</Text>
+      </Banner>
+    </Content>
+  );
+}

package/src/Banner/docs/BannerErrorDetailsExample.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import { Banner, Text, TextList } from "@jobber/components-native";
+
+export function BannerErrorDetailsExample(
+  props: Partial<ComponentProps<typeof Banner>>,
+) {
+  const listItems = [
+    "This client already exists",
+    "This phone number doesn't receive SMS",
+  ];
+
+  return (
+    <Banner type="error" icon="alert" {...props}>
+      <Text level="text">There was an error submitting your form:</Text>
+      <TextList level="text" items={listItems} />
+    </Banner>
+  );
+}

package/src/Banner/docs/BannerErrorExample.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import { Banner } from "@jobber/components-native";
+
+export function BannerErrorExample(
+  props: Partial<ComponentProps<typeof Banner>>,
+) {
+  return (
+    <Banner type="error" icon="offline" {...props}>
+      {props.children ?? "Currently offline. Functionality is limited."}
+    </Banner>
+  );
+}

package/src/Banner/docs/index.ts

@@ -0,0 +1,4 @@
+export { BannerBasicExample } from "./BannerBasicExample";
+export { BannerActionsInBannersExample } from "./BannerActionsInBannersExample";
+export { BannerErrorExample } from "./BannerErrorExample";
+export { BannerErrorDetailsExample } from "./BannerErrorDetailsExample";

package/src/BottomSheet/BottomSheet.stories.tsx

@@ -1,12 +1,9 @@
-import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { View } from "react-native";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import { action } from "storybook/actions";
-import { Button, Heading, Text } from "@jobber/components-native";
 import { BottomSheet } from "./BottomSheet";
-import type { BottomSheetRef } from "./BottomSheet";
-import { BottomSheetOption } from "./components/BottomSheetOption";
+import {
+  BottomSheetBasicExample,
+  BottomSheetHeaderFooterExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Selections/BottomSheet",
@@ -16,114 +13,12 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = () => {
-  const bottomSheetRef = useRef<BottomSheetRef>(null);
-
-  const openBottomSheet = () => {
-    bottomSheetRef.current?.open();
-  };
-
-  const closeBottomSheet = () => {
-    bottomSheetRef.current?.close();
-  };
-
-  return (
-    <SafeAreaProvider>
-      <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <Heading>Basic BottomSheet</Heading>
-        <Text>
-          Note that due to the differences between React Native Web and React
-          Native, this does not render 100% properly
-        </Text>
-        <Button label="Open Bottom Sheet" onPress={openBottomSheet} />
-        <Button label="Close Bottom Sheet" onPress={closeBottomSheet} />
-      </View>
-      <BottomSheet
-        ref={bottomSheetRef}
-        onClose={() => action("console.log")("closed bottom sheet")}
-        onOpen={() => action("console.log")("opened bottom sheet")}
-      >
-        <BottomSheetOption
-          icon="sendMessage"
-          iconColor="greyBlue"
-          text="Send message"
-          onPress={() => action("alert")("send message")}
-        />
-        <BottomSheetOption
-          icon="phone"
-          iconColor="greyBlue"
-          text="Call a friend"
-          onPress={() => action("alert")("Calling a friend")}
-        />
-        <BottomSheetOption
-          destructive={true}
-          icon="trash"
-          text="Remove"
-          onPress={() => action("alert")("Removed")}
-        />
-      </BottomSheet>
-    </SafeAreaProvider>
-  );
-};
-
-const HeaderFooterInputTextTemplate = () => {
-  const bottomSheetRef = useRef<BottomSheetRef>(null);
-
-  const openBottomSheet = () => {
-    bottomSheetRef.current?.open();
-  };
-
-  const closeBottomSheet = () => {
-    bottomSheetRef.current?.close();
-  };
-
-  return (
-    <SafeAreaProvider>
-      <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <Heading>Basic BottomSheet</Heading>
-        <Text>
-          Note that due to the differences between React Native Web and React
-          Native, this does not render 100% properly
-        </Text>
-        <Button label="Open Bottom Sheet" onPress={openBottomSheet} />
-        <Button label="Close Bottom Sheet" onPress={closeBottomSheet} />
-      </View>
-      <BottomSheet
-        ref={bottomSheetRef}
-        showCancel={true}
-        heading="BottomSheet Header"
-        onClose={() => action("console.log")("closed bottom sheet")}
-        onOpen={() => action("console.log")("opened bottom sheet")}
-      >
-        <BottomSheetOption
-          icon="sendMessage"
-          iconColor="greyBlue"
-          text="Send message"
-          onPress={() => action("alert")("send message")}
-        />
-        <BottomSheetOption
-          icon="phone"
-          iconColor="greyBlue"
-          text="Call a friend"
-          onPress={() => action("alert")("Calling a friend")}
-        />
-        <BottomSheetOption
-          destructive={true}
-          icon="trash"
-          text="Remove"
-          onPress={() => action("alert")("Removed")}
-        />
-      </BottomSheet>
-    </SafeAreaProvider>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: BottomSheetBasicExample,
   args: {} as Story["args"],
 };
 
 export const HeaderFooterInputText: Story = {
-  render: HeaderFooterInputTextTemplate,
+  render: BottomSheetHeaderFooterExample,
   args: {} as Story["args"],
 };