@jobber/components-native 0.101.7 → 0.101.8

package/src/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,13 @@
-import React, { useState } from "react";
+import type React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Checkbox, CheckboxGroup } from "@jobber/components-native";
+import {
+  CheckboxBasicExample,
+  CheckboxControlledExample,
+  CheckboxGroupBasicExample,
+  CheckboxGroupControlledExample,
+  CheckboxGroupLabelledExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Selections/Checkbox",
@@ -14,37 +21,23 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 type CheckboxGroupStory = StoryObj<React.ComponentProps<typeof CheckboxGroup>>;
 
-const BasicTemplate = (args: Story["args"]) => <Checkbox {...args} />;
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: CheckboxBasicExample,
   args: {
     label: "Check me out",
     name: "storyCheckbox",
   },
 };
 
-const ControlledTemplate = (args: Story["args"]) => {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <Checkbox
-      {...args}
-      checked={checked}
-      onChange={() => setChecked(!checked)}
-    />
-  );
-};
-
 export const Controlled: Story = {
-  render: ControlledTemplate,
+  render: CheckboxControlledExample,
   args: {
     label: "Check me out",
   },
 };
 
 export const Indeterminate: Story = {
-  render: BasicTemplate,
+  render: CheckboxBasicExample,
   args: {
     label: "Label",
     name: "storyCheckbox",
@@ -53,7 +46,7 @@ export const Indeterminate: Story = {
 };
 
 export const Disabled: Story = {
-  render: BasicTemplate,
+  render: CheckboxBasicExample,
   args: {
     label: "Label",
     name: "storyCheckbox",
@@ -61,56 +54,23 @@ export const Disabled: Story = {
   },
 };
 
-const CheckboxGroupTemplate = (args: CheckboxGroupStory["args"]) => (
-  <CheckboxGroup {...args}>
-    <Checkbox name="checkbox1" label="Mustard" />
-    <Checkbox name="checkbox2" label="Relish" />
-    <Checkbox name="checkbox3" label="Ketchup" />
-  </CheckboxGroup>
-);
-
 export const CheckboxGroupExample: CheckboxGroupStory = {
-  render: CheckboxGroupTemplate,
+  render: CheckboxGroupBasicExample,
   args: {
     name: "testgroup",
   },
 };
 
 export const LabelledCheckboxGroup: CheckboxGroupStory = {
-  render: CheckboxGroupTemplate,
+  render: CheckboxGroupLabelledExample,
   args: {
     name: "testgroup",
     label: "Select all",
   },
 };
 
-const ControlledCheckboxGroupTemplate = (args: CheckboxGroupStory["args"]) => {
-  const [checkboxGroupState, setCheckboxGroupState] = useState<
-    NonNullable<React.ComponentProps<typeof CheckboxGroup>["state"]>
-  >({
-    parentChecked: false,
-    childrenChecked: {
-      relish: true,
-      ketchup: true,
-      mustard: false,
-    },
-  });
-
-  return (
-    <CheckboxGroup
-      {...args}
-      state={checkboxGroupState}
-      onChange={state => setCheckboxGroupState(state)}
-    >
-      <Checkbox name="mustard" label="Mustard" />
-      <Checkbox name="relish" label="Relish" />
-      <Checkbox name="ketchup" label="Ketchup" />
-    </CheckboxGroup>
-  );
-};
-
 export const ControlledCheckboxGroup: CheckboxGroupStory = {
-  render: ControlledCheckboxGroupTemplate,
+  render: CheckboxGroupControlledExample,
   args: {
     name: "testgroup",
     label: "All",
@@ -118,7 +78,7 @@ export const ControlledCheckboxGroup: CheckboxGroupStory = {
 };
 
 export const DisabledCheckboxGroup: CheckboxGroupStory = {
-  render: CheckboxGroupTemplate,
+  render: CheckboxGroupBasicExample,
   args: {
     name: "testgroup",
     label: "Label",

package/src/Checkbox/docs/CheckboxBasicExample.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Checkbox } from "@jobber/components-native";
+
+export function CheckboxBasicExample(
+  props: Partial<ComponentProps<typeof Checkbox>>,
+) {
+  return <Checkbox label="Check me out" name="storyCheckbox" {...props} />;
+}

package/src/Checkbox/docs/CheckboxControlledExample.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import type { ComponentProps } from "react";
+import { Checkbox } from "@jobber/components-native";
+
+export function CheckboxControlledExample(
+  props: Partial<ComponentProps<typeof Checkbox>>,
+) {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      label="Check me out"
+      {...props}
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+    />
+  );
+}

package/src/Checkbox/docs/CheckboxGroupBasicExample.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Checkbox, CheckboxGroup } from "@jobber/components-native";
+
+export function CheckboxGroupBasicExample(
+  props: Partial<ComponentProps<typeof CheckboxGroup>>,
+) {
+  return (
+    <CheckboxGroup name="testgroup" {...props}>
+      <Checkbox name="checkbox1" label="Mustard" />
+      <Checkbox name="checkbox2" label="Relish" />
+      <Checkbox name="checkbox3" label="Ketchup" />
+    </CheckboxGroup>
+  );
+}

package/src/Checkbox/docs/CheckboxGroupControlledExample.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import type { ComponentProps } from "react";
+import { Checkbox, CheckboxGroup } from "@jobber/components-native";
+
+export function CheckboxGroupControlledExample(
+  props: Partial<ComponentProps<typeof CheckboxGroup>>,
+) {
+  const [checkboxGroupState, setCheckboxGroupState] = useState<
+    NonNullable<ComponentProps<typeof CheckboxGroup>["state"]>
+  >({
+    parentChecked: false,
+    childrenChecked: {
+      relish: true,
+      ketchup: true,
+      mustard: false,
+    },
+  });
+
+  return (
+    <CheckboxGroup
+      name="testgroup"
+      label="All"
+      {...props}
+      state={checkboxGroupState}
+      onChange={state => setCheckboxGroupState(state)}
+    >
+      <Checkbox name="mustard" label="Mustard" />
+      <Checkbox name="relish" label="Relish" />
+      <Checkbox name="ketchup" label="Ketchup" />
+    </CheckboxGroup>
+  );
+}

package/src/Checkbox/docs/CheckboxGroupLabelledExample.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Checkbox, CheckboxGroup } from "@jobber/components-native";
+
+export function CheckboxGroupLabelledExample(
+  props: Partial<ComponentProps<typeof CheckboxGroup>>,
+) {
+  return (
+    <CheckboxGroup name="testgroup" label="Select all" {...props}>
+      <Checkbox name="checkbox1" label="Mustard" />
+      <Checkbox name="checkbox2" label="Relish" />
+      <Checkbox name="checkbox3" label="Ketchup" />
+    </CheckboxGroup>
+  );
+}

package/src/Checkbox/docs/index.ts

@@ -0,0 +1,5 @@
+export { CheckboxBasicExample } from "./CheckboxBasicExample";
+export { CheckboxControlledExample } from "./CheckboxControlledExample";
+export { CheckboxGroupBasicExample } from "./CheckboxGroupBasicExample";
+export { CheckboxGroupLabelledExample } from "./CheckboxGroupLabelledExample";
+export { CheckboxGroupControlledExample } from "./CheckboxGroupControlledExample";

package/src/Chip/Chip.stories.tsx

@@ -1,8 +1,12 @@
-import React from "react";
-import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
-import { Chip, useAtlantisTheme } from "@jobber/components-native";
+import { Chip } from "@jobber/components-native";
+import {
+  ChipAccentExample,
+  ChipBasicExample,
+  ChipDismissableExample,
+  ChipInactiveBackgroundColorExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Selections/Chip",
@@ -14,14 +18,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => (
-  <View style={{ display: "flex", flexDirection: "row" }}>
-    <Chip {...args} />
-  </View>
-);
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ChipBasicExample,
   args: {
     label: "Active chip",
     onPress: () => action("alert")("hi!"),
@@ -30,57 +28,8 @@ export const Basic: Story = {
   },
 };
 
-const AccentTemplate = (args: Story["args"]) => {
-  const { tokens } = useAtlantisTheme();
-
-  return (
-    <View
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        gap: tokens["space-small"],
-      }}
-    >
-      <Chip {...args} />
-      <Chip
-        label="Select requests"
-        accent="request"
-        icon="request"
-        onPress={() => action("alert")("Requests")}
-        accessibilityLabel={"Select Requests"}
-        isActive={true}
-      />
-      <Chip
-        label="Select quotes"
-        accent="quote"
-        icon="quote"
-        onPress={() => action("alert")("Quotes")}
-        accessibilityLabel={"Select Quotes"}
-        isActive={true}
-      />
-      <Chip
-        label="Select jobs"
-        accent="job"
-        icon="job"
-        onPress={() => action("alert")("Jobs")}
-        accessibilityLabel={"Select Jobs"}
-        isActive={true}
-      />
-      <Chip
-        label="Select invoices"
-        accent="invoice"
-        icon="invoice"
-        onPress={() => action("alert")("Invoices")}
-        accessibilityLabel={"Select Invoices"}
-        isActive={true}
-      />
-    </View>
-  );
-};
-
 export const Accent: Story = {
-  render: AccentTemplate,
+  render: ChipAccentExample,
   args: {
     label: "Select clients",
     accent: "client",
@@ -92,7 +41,7 @@ export const Accent: Story = {
 };
 
 export const Dismissable: Story = {
-  render: BasicTemplate,
+  render: ChipDismissableExample,
   args: {
     label: "Test Chip",
     accent: "client",
@@ -104,7 +53,7 @@ export const Dismissable: Story = {
 };
 
 export const InactiveBackgroundColor: Story = {
-  render: BasicTemplate,
+  render: ChipInactiveBackgroundColorExample,
   args: {
     label: "Inactive Chip",
     accent: "client",

package/src/Chip/docs/ChipAccentExample.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { View } from "react-native";
+import { action } from "storybook/actions";
+import type { ComponentProps } from "react";
+import { Chip, useAtlantisTheme } from "@jobber/components-native";
+
+export function ChipAccentExample(props: Partial<ComponentProps<typeof Chip>>) {
+  const { tokens } = useAtlantisTheme();
+
+  return (
+    <View
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: tokens["space-small"],
+      }}
+    >
+      <Chip
+        label="Select clients"
+        accent="client"
+        icon="clients"
+        onPress={() => action("alert")("Clients")}
+        accessibilityLabel="Select clients"
+        isActive={true}
+        {...props}
+      />
+      <Chip
+        label="Select requests"
+        accent="request"
+        icon="request"
+        onPress={() => action("alert")("Requests")}
+        accessibilityLabel={"Select Requests"}
+        isActive={true}
+      />
+      <Chip
+        label="Select quotes"
+        accent="quote"
+        icon="quote"
+        onPress={() => action("alert")("Quotes")}
+        accessibilityLabel={"Select Quotes"}
+        isActive={true}
+      />
+      <Chip
+        label="Select jobs"
+        accent="job"
+        icon="job"
+        onPress={() => action("alert")("Jobs")}
+        accessibilityLabel={"Select Jobs"}
+        isActive={true}
+      />
+      <Chip
+        label="Select invoices"
+        accent="invoice"
+        icon="invoice"
+        onPress={() => action("alert")("Invoices")}
+        accessibilityLabel={"Select Invoices"}
+        isActive={true}
+      />
+    </View>
+  );
+}

package/src/Chip/docs/ChipBasicExample.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { View } from "react-native";
+import { action } from "storybook/actions";
+import { Chip } from "@jobber/components-native";
+
+export function ChipBasicExample(props: Partial<ComponentProps<typeof Chip>>) {
+  return (
+    <View style={{ display: "flex", flexDirection: "row" }}>
+      <Chip
+        label="Active chip"
+        onPress={() => action("alert")("hi!")}
+        accessibilityLabel="Active chip"
+        isActive={true}
+        {...props}
+      />
+    </View>
+  );
+}

package/src/Chip/docs/ChipDismissableExample.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View } from "react-native";
+import { action } from "storybook/actions";
+import type { ComponentProps } from "react";
+import { Chip } from "@jobber/components-native";
+
+export function ChipDismissableExample(
+  props: Partial<ComponentProps<typeof Chip>>,
+) {
+  return (
+    <View style={{ display: "flex", flexDirection: "row" }}>
+      <Chip
+        label="Test Chip"
+        accent="client"
+        icon="clients"
+        onPress={() => action("alert")("Clients")}
+        accessibilityLabel="Select clients"
+        isDismissible={true}
+        {...props}
+      />
+    </View>
+  );
+}

package/src/Chip/docs/ChipInactiveBackgroundColorExample.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View } from "react-native";
+import { action } from "storybook/actions";
+import type { ComponentProps } from "react";
+import { Chip } from "@jobber/components-native";
+
+export function ChipInactiveBackgroundColorExample(
+  props: Partial<ComponentProps<typeof Chip>>,
+) {
+  return (
+    <View style={{ display: "flex", flexDirection: "row" }}>
+      <Chip
+        label="Inactive Chip"
+        accent="client"
+        icon="clients"
+        onPress={() => action("alert")("Clients")}
+        accessibilityLabel="Select clients"
+        inactiveBackgroundColor="surface"
+        {...props}
+      />
+    </View>
+  );
+}

package/src/Chip/docs/index.ts

@@ -0,0 +1,4 @@
+export { ChipBasicExample } from "./ChipBasicExample";
+export { ChipAccentExample } from "./ChipAccentExample";
+export { ChipDismissableExample } from "./ChipDismissableExample";
+export { ChipInactiveBackgroundColorExample } from "./ChipInactiveBackgroundColorExample";

package/src/Content/Content.stories.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Card, Content, Text } from "@jobber/components-native";
+import { Content } from "@jobber/components-native";
+import { ContentHorizontal, ContentVertical } from "./docs";
 
 const meta = {
   title: "Components/Layouts and Structure/Content",
@@ -18,30 +18,15 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => (
-  <Card>
-    <Content {...args}>
-      <Text>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque totam
-        neque quam nemo dolores illo eaque qui possimus consequuntur libero.
-      </Text>
-      <Text>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque totam
-        neque quam nemo dolores illo eaque qui possimus consequuntur libero.
-      </Text>
-    </Content>
-  </Card>
-);
-
 export const Vertical: Story = {
-  render: BasicTemplate,
+  render: ContentVertical,
   args: {
     direction: "vertical",
   },
 };
 
 export const Horizontal: Story = {
-  render: BasicTemplate,
+  render: ContentHorizontal,
   args: {
     direction: "horizontal",
   },

package/src/Content/docs/ContentHorizontal.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Card, Content, Text } from "@jobber/components-native";
+
+export function ContentHorizontal(
+  props: Partial<ComponentProps<typeof Content>>,
+) {
+  return (
+    <Card>
+      <Content direction="horizontal" {...props}>
+        <Text>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque totam
+          neque quam nemo dolores illo eaque qui possimus consequuntur libero.
+        </Text>
+        <Text>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque totam
+          neque quam nemo dolores illo eaque qui possimus consequuntur libero.
+        </Text>
+      </Content>
+    </Card>
+  );
+}

package/src/Content/docs/ContentVertical.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import { Card, Content, Text } from "@jobber/components-native";
+
+export function ContentVertical(
+  props: Partial<ComponentProps<typeof Content>>,
+) {
+  return (
+    <Card>
+      <Content direction="vertical" {...props}>
+        <Text>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque totam
+          neque quam nemo dolores illo eaque qui possimus consequuntur libero.
+        </Text>
+        <Text>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque totam
+          neque quam nemo dolores illo eaque qui possimus consequuntur libero.
+        </Text>
+      </Content>
+    </Card>
+  );
+}

package/src/Content/docs/index.ts

@@ -0,0 +1,2 @@
+export { ContentVertical } from "./ContentVertical";
+export { ContentHorizontal } from "./ContentHorizontal";

package/src/ContentOverlay/ContentOverlay.stories.tsx

@@ -1,16 +1,8 @@
-import React, { useRef } from "react";
-import { View } from "react-native";
+import type { ComponentProps } 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 { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import type { ContentOverlayRef } from "@jobber/components-native";
-import {
-  Button,
-  ContentOverlay,
-  Heading,
-  Text,
-} from "@jobber/components-native";
+import { ContentOverlay } from "@jobber/components-native";
+import { ContentOverlayBasic } from "./docs";
 
 const meta = {
   title: "Components/Overlays/ContentOverlay",
@@ -20,53 +12,15 @@ export default meta;
 
 interface ContentOverlayStoryArgs {
   title: string;
-  onClose?: React.ComponentProps<typeof ContentOverlay>["onClose"];
-  onOpen?: React.ComponentProps<typeof ContentOverlay>["onOpen"];
+  onClose?: ComponentProps<typeof ContentOverlay>["onClose"];
+  onOpen?: ComponentProps<typeof ContentOverlay>["onOpen"];
   fullScreen?: boolean;
 }
 
 type Story = StoryObj<ContentOverlayStoryArgs>;
 
-const BasicTemplate = () => {
-  const contentOverlayRef = useRef<ContentOverlayRef>(null);
-
-  const openContentOverlay = () => {
-    contentOverlayRef.current?.open?.();
-  };
-
-  const closeContentOverlay = () => {
-    contentOverlayRef.current?.close?.();
-  };
-
-  return (
-    <SafeAreaProvider>
-      <BottomSheetModalProvider>
-        <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-          <Heading>Basic ContentOverlay</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 Content Overlay" onPress={openContentOverlay} />
-          <Button label="Close Content Overlay" onPress={closeContentOverlay} />
-        </View>
-        <ContentOverlay
-          ref={contentOverlayRef}
-          title="Content Overlay Title"
-          onClose={() => action("console.log")("closed content overlay")}
-          onOpen={() => action("console.log")("opened content overlay")}
-        >
-          <View style={{ padding: 16 }}>
-            <Text>This is the content inside the overlay.</Text>
-          </View>
-        </ContentOverlay>
-      </BottomSheetModalProvider>
-    </SafeAreaProvider>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ContentOverlayBasic,
   args: {
     title: "Overlay Title",
     onClose: () => action("alert")("Overlay Dismissed"),