@jobber/components-native 0.101.7 → 0.101.8

package/src/BottomSheet/docs/BottomSheetBasicExample.tsx

@@ -0,0 +1,63 @@
+import React, { useRef } from "react";
+import { View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import {
+  BottomSheet,
+  BottomSheetOption,
+  Button,
+  Heading,
+  Text,
+} from "@jobber/components-native";
+import type { BottomSheetRef } from "@jobber/components-native";
+
+export function BottomSheetBasicExample() {
+  const bottomSheetRef = useRef<BottomSheetRef>(null);
+
+  return (
+    <SafeAreaProvider>
+      <BottomSheetModalProvider>
+        <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={() => bottomSheetRef.current?.open()}
+          />
+          <Button
+            label="Close Bottom Sheet"
+            onPress={() => bottomSheetRef.current?.close()}
+          />
+        </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>
+      </BottomSheetModalProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/BottomSheet/docs/BottomSheetHeaderFooterExample.tsx

@@ -0,0 +1,65 @@
+import React, { useRef } from "react";
+import { View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import {
+  BottomSheet,
+  BottomSheetOption,
+  Button,
+  Heading,
+  Text,
+} from "@jobber/components-native";
+import type { BottomSheetRef } from "@jobber/components-native";
+
+export function BottomSheetHeaderFooterExample() {
+  const bottomSheetRef = useRef<BottomSheetRef>(null);
+
+  return (
+    <SafeAreaProvider>
+      <BottomSheetModalProvider>
+        <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={() => bottomSheetRef.current?.open()}
+          />
+          <Button
+            label="Close Bottom Sheet"
+            onPress={() => bottomSheetRef.current?.close()}
+          />
+        </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>
+      </BottomSheetModalProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/BottomSheet/docs/index.ts

@@ -0,0 +1,2 @@
+export { BottomSheetBasicExample } from "./BottomSheetBasicExample";
+export { BottomSheetHeaderFooterExample } from "./BottomSheetHeaderFooterExample";

package/src/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { fn } from "storybook/test";
 import { Button } from "@jobber/components-native";
+import { ButtonBasicExample, ButtonCancelExample } from "./docs";
 
 const meta = {
   title: "Components/Actions/Button",
@@ -10,10 +10,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => <Button {...args} />;
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ButtonBasicExample,
   args: {
     label: "New Job",
     onPress: fn(),
@@ -21,7 +19,7 @@ export const Basic: Story = {
 };
 
 export const Cancel: Story = {
-  render: BasicTemplate,
+  render: ButtonCancelExample,
   args: {
     label: "Cancel",
     variation: "cancel",

package/src/Button/docs/ButtonBasicExample.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { Button } from "@jobber/components-native";
+import type { ButtonProps } from "@jobber/components-native";
+
+export function ButtonBasicExample(props: Partial<ButtonProps>) {
+  return (
+    <Button
+      label="New Job"
+      onPress={action("console.log")("New Job button pressed")}
+      {...props}
+    />
+  );
+}

package/src/Button/docs/ButtonCancelExample.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { Button } from "@jobber/components-native";
+import type { ButtonProps } from "@jobber/components-native";
+
+export function ButtonCancelExample(props: Partial<ButtonProps>) {
+  return (
+    <Button
+      label="Cancel"
+      variation="cancel"
+      onPress={action("console.log")("Cancel button pressed")}
+      {...props}
+    />
+  );
+}

package/src/Button/docs/index.ts

@@ -0,0 +1,2 @@
+export { ButtonBasicExample } from "./ButtonBasicExample";
+export { ButtonCancelExample } from "./ButtonCancelExample";

package/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,11 +1,12 @@
-import React from "react";
+import type React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { SafeAreaProvider } from "react-native-safe-area-context";
 import { action } from "storybook/actions";
+import { ButtonGroup } from "@jobber/components-native";
 import {
-  AtlantisOverlayProvider,
-  ButtonGroup,
-} from "@jobber/components-native";
+  ButtonGroupBasicExample,
+  ButtonGroupPrimaryExample,
+  ButtonGroupSecondaryExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Actions/ButtonGroup",
@@ -32,52 +33,12 @@ type SecondaryActionStory = StoryObj<
 >;
 
 export const Basic: ButtonGroupStory = {
-  render: args => (
-    <SafeAreaProvider>
-      <AtlantisOverlayProvider>
-        <ButtonGroup {...args}>
-          <ButtonGroup.PrimaryAction
-            label={"Create"}
-            icon={"plus"}
-            onPress={() => action("console.log")("create")}
-          />
-          <ButtonGroup.PrimaryAction
-            label={"Edit"}
-            icon={"edit"}
-            onPress={() => action("console.log")("edit")}
-          />
-          <ButtonGroup.SecondaryAction
-            label={"Delete"}
-            icon={"trash"}
-            onPress={() => action("console.log")("delete")}
-          />
-        </ButtonGroup>
-      </AtlantisOverlayProvider>
-    </SafeAreaProvider>
-  ),
+  render: ButtonGroupBasicExample,
   args: {},
 };
 
 export const Primary: PrimaryActionStory = {
-  render: args => (
-    <SafeAreaProvider>
-      <AtlantisOverlayProvider>
-        <ButtonGroup>
-          <ButtonGroup.PrimaryAction {...args} />
-          <ButtonGroup.SecondaryAction
-            label={"Edit"}
-            icon={"edit"}
-            onPress={() => action("console.log")("edit")}
-          />
-          <ButtonGroup.SecondaryAction
-            label={"Delete"}
-            icon={"trash"}
-            onPress={() => action("console.log")("delete")}
-          />
-        </ButtonGroup>
-      </AtlantisOverlayProvider>
-    </SafeAreaProvider>
-  ),
+  render: ButtonGroupPrimaryExample,
   args: {
     label: "Create",
     icon: "plus",
@@ -86,23 +47,7 @@ export const Primary: PrimaryActionStory = {
 };
 
 export const Secondary: SecondaryActionStory = {
-  render: args => (
-    <SafeAreaProvider>
-      <AtlantisOverlayProvider>
-        <ButtonGroup
-          bottomSheetHeading="What would you like to do"
-          showCancelInBottomSheet={true}
-        >
-          <ButtonGroup.PrimaryAction
-            label={"Click that ellipsis >>>"}
-            buttonType={"secondary"}
-            onPress={() => action("alert")("No, not me. The ellipsis!")}
-          />
-          <ButtonGroup.SecondaryAction {...args} />
-        </ButtonGroup>
-      </AtlantisOverlayProvider>
-    </SafeAreaProvider>
-  ),
+  render: ButtonGroupSecondaryExample,
   args: {
     label: "Create",
     icon: "plus",

package/src/ButtonGroup/docs/ButtonGroupBasicExample.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import {
+  AtlantisOverlayProvider,
+  ButtonGroup,
+} from "@jobber/components-native";
+import type { ButtonGroupProps } from "../ButtonGroup";
+
+export function ButtonGroupBasicExample(props: Partial<ButtonGroupProps>) {
+  return (
+    <SafeAreaProvider>
+      <AtlantisOverlayProvider>
+        <ButtonGroup {...props}>
+          <ButtonGroup.PrimaryAction
+            label={"Create"}
+            icon={"plus"}
+            onPress={() => action("console.log")("create")}
+          />
+          <ButtonGroup.PrimaryAction
+            label={"Edit"}
+            icon={"edit"}
+            onPress={() => action("console.log")("edit")}
+          />
+          <ButtonGroup.SecondaryAction
+            label={"Delete"}
+            icon={"trash"}
+            onPress={() => action("console.log")("delete")}
+          />
+        </ButtonGroup>
+      </AtlantisOverlayProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/ButtonGroup/docs/ButtonGroupPrimaryExample.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import {
+  AtlantisOverlayProvider,
+  ButtonGroup,
+} from "@jobber/components-native";
+import type { ButtonGroupPrimaryActionProps } from "../index";
+
+export function ButtonGroupPrimaryExample(
+  props: Partial<ButtonGroupPrimaryActionProps>,
+) {
+  return (
+    <SafeAreaProvider>
+      <AtlantisOverlayProvider>
+        <ButtonGroup>
+          <ButtonGroup.PrimaryAction
+            label="Create"
+            icon="plus"
+            onPress={() => action("console.log")("create")}
+            {...props}
+          />
+          <ButtonGroup.SecondaryAction
+            label={"Edit"}
+            icon={"edit"}
+            onPress={() => action("console.log")("edit")}
+          />
+          <ButtonGroup.SecondaryAction
+            label={"Delete"}
+            icon={"trash"}
+            onPress={() => action("console.log")("delete")}
+          />
+        </ButtonGroup>
+      </AtlantisOverlayProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/ButtonGroup/docs/ButtonGroupSecondaryExample.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import {
+  AtlantisOverlayProvider,
+  ButtonGroup,
+} from "@jobber/components-native";
+import type { ButtonGroupSecondaryActionProps } from "../index";
+
+export function ButtonGroupSecondaryExample(
+  props: Partial<ButtonGroupSecondaryActionProps>,
+) {
+  return (
+    <SafeAreaProvider>
+      <AtlantisOverlayProvider>
+        <ButtonGroup
+          bottomSheetHeading="What would you like to do"
+          showCancelInBottomSheet={true}
+        >
+          <ButtonGroup.PrimaryAction
+            label={"Click that ellipsis >>>"}
+            buttonType={"secondary"}
+            onPress={() => action("alert")("No, not me. The ellipsis!")}
+          />
+          <ButtonGroup.SecondaryAction
+            label="Create"
+            icon="plus"
+            onPress={() => action("console.log")("create")}
+            {...props}
+          />
+        </ButtonGroup>
+      </AtlantisOverlayProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/ButtonGroup/docs/index.ts

@@ -0,0 +1,3 @@
+export { ButtonGroupBasicExample } from "./ButtonGroupBasicExample";
+export { ButtonGroupPrimaryExample } from "./ButtonGroupPrimaryExample";
+export { ButtonGroupSecondaryExample } from "./ButtonGroupSecondaryExample";

package/src/Card/Card.stories.tsx

@@ -1,7 +1,11 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
-import { Card, Content, Text } from "@jobber/components-native";
+import { Card } from "@jobber/components-native";
+import {
+  CardBasicExample,
+  CardElevationExample,
+  CardPressableExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Layouts and Structure/Card",
@@ -16,60 +20,22 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => (
-  <Card {...args}>
-    <Content childSpacing={"small"}>
-      <Content spacing={"none"} childSpacing={"none"}>
-        <Text variation={"subdued"}>Address</Text>
-        <Text>12345 Fake Street</Text>
-      </Content>
-      <Content spacing={"none"} childSpacing={"none"}>
-        <Text variation={"subdued"}>Phone</Text>
-        <Text>555-555-5555</Text>
-      </Content>
-    </Content>
-  </Card>
-);
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: CardBasicExample,
   args: {
     header: { title: "Client" },
   },
 };
 
-const ElevationTemplate = (args: Story["args"]) => (
-  <Content spacing="none" direction="horizontal">
-    <Card header={{ title: "Properties" }}>
-      <Content>
-        <Card {...args}>
-          <Content childSpacing="none">
-            <Text>10130 103 St NW</Text>
-            <Text>Edmonton, Alberta</Text>
-            <Text>T5J 3N9</Text>
-          </Content>
-        </Card>
-        <Card {...args}>
-          <Content childSpacing="none">
-            <Text>10520 Jasper Ave NW</Text>
-            <Text>Edmonton, Alberta</Text>
-            <Text>T5J 3N9</Text>
-          </Content>
-        </Card>
-      </Content>
-    </Card>
-  </Content>
-);
-
 export const Elevation: Story = {
-  render: ElevationTemplate,
+  render: CardElevationExample,
   args: {
     elevation: "base",
   },
 };
 
 export const Pressable: Story = {
-  render: BasicTemplate,
+  render: CardPressableExample,
   args: {
     header: {
       title: "Your address",

package/src/Card/docs/CardBasicExample.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Card, Content, Text } from "@jobber/components-native";
+
+export function CardBasicExample(props: Partial<ComponentProps<typeof Card>>) {
+  return (
+    <Card header={{ title: "Client" }} {...props}>
+      <Content childSpacing={"small"}>
+        <Content spacing={"none"} childSpacing={"none"}>
+          <Text variation={"subdued"}>Address</Text>
+          <Text>12345 Fake Street</Text>
+        </Content>
+        <Content spacing={"none"} childSpacing={"none"}>
+          <Text variation={"subdued"}>Phone</Text>
+          <Text>555-555-5555</Text>
+        </Content>
+      </Content>
+    </Card>
+  );
+}

package/src/Card/docs/CardElevationExample.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Card, Content, Text } from "@jobber/components-native";
+
+export function CardElevationExample(
+  props: Partial<ComponentProps<typeof Card>>,
+) {
+  return (
+    <Content spacing="none" direction="horizontal">
+      <Card header={{ title: "Properties" }}>
+        <Content>
+          <Card elevation="base" {...props}>
+            <Content childSpacing="none">
+              <Text>10130 103 St NW</Text>
+              <Text>Edmonton, Alberta</Text>
+              <Text>T5J 3N9</Text>
+            </Content>
+          </Card>
+          <Card elevation="base" {...props}>
+            <Content childSpacing="none">
+              <Text>10520 Jasper Ave NW</Text>
+              <Text>Edmonton, Alberta</Text>
+              <Text>T5J 3N9</Text>
+            </Content>
+          </Card>
+        </Content>
+      </Card>
+    </Content>
+  );
+}

package/src/Card/docs/CardPressableExample.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { action } from "storybook/actions";
+import { Card, Content, Text } from "@jobber/components-native";
+
+export function CardPressableExample(
+  props: Partial<ComponentProps<typeof Card>>,
+) {
+  return (
+    <Card
+      header={{
+        title: "Your address",
+        actionItem: { iconName: "plus2" },
+        onPress: () => action("alert")("🏡"),
+      }}
+      footer={{
+        title: "View All",
+        onPress: () => action("alert")("View all"),
+      }}
+      {...props}
+    >
+      <Content childSpacing={"small"}>
+        <Content spacing={"none"} childSpacing={"none"}>
+          <Text variation={"subdued"}>Address</Text>
+          <Text>12345 Fake Street</Text>
+        </Content>
+        <Content spacing={"none"} childSpacing={"none"}>
+          <Text variation={"subdued"}>Phone</Text>
+          <Text>555-555-5555</Text>
+        </Content>
+      </Content>
+    </Card>
+  );
+}

package/src/Card/docs/index.ts

@@ -0,0 +1,3 @@
+export { CardBasicExample } from "./CardBasicExample";
+export { CardElevationExample } from "./CardElevationExample";
+export { CardPressableExample } from "./CardPressableExample";