@jobber/components-native 0.101.6 → 0.101.8

package/dist/tsconfig.json

@@ -3,6 +3,7 @@
     "compilerOptions": {
         "outDir": "./dist",
         "module": "ESNext",
+        "moduleResolution": "bundler",
         "skipLibCheck": true,
         "declaration": true,
         "declarationDir": "./dist/types",

package/dist/types/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.d.ts

@@ -5,8 +5,7 @@ declare const BottomSheetKeyboardAwareScrollView: import("react").NamedExoticCom
     disableScrollOnKeyboardHide?: boolean;
     enabled?: boolean;
     extraKeyboardSpace?: number;
-    mode?: import("react-native-keyboard-controller").KeyboardAwareScrollViewMode;
-    ScrollViewComponent?: import("react-native-keyboard-controller/lib/typescript/components/ScrollViewWithBottomPadding").AnimatedScrollViewComponent;
+    ScrollViewComponent?: React.ComponentType<import("react-native").ScrollViewProps>;
 } & import("react-native").ScrollViewProps & import("react").RefAttributes<BottomSheetScrollViewMethods>>;
 export { BottomSheetKeyboardAwareScrollView };
 export type { KeyboardAwareScrollViewProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.101.6",
+  "version": "0.101.8",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -29,7 +29,7 @@
     "./jestSetup.js"
   ],
   "scripts": {
-    "clean": "rm -rf dist/* tsconfig.tsbuildinfo",
+    "clean": "rm -rf dist/* tsconfig.build.tsbuildinfo",
     "build": "pnpm run build:clean && pnpm run compile && pnpm run build:llm-docs:bundle",
     "build:llm-docs:bundle": "pnpm run build:llm-docs:clean && pnpm run build:llm-docs:mobile",
     "build:llm-docs:mobile": "pnpm run --filter @jobber/atlantis-site generate:llm-docs -- --platform mobile --out ../components-native/dist/docs",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@jobber/design": "0.98.0",
+    "@jobber/design": "0.99.0",
     "@jobber/hooks": "2.19.4",
     "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native/babel-preset": "^0.82.1",
@@ -109,5 +109,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "e2f47074cb070d5d3297cbdee855e920d8b49e95"
+  "gitHead": "6290db9d722109c8a82f97a2d0f6159beeb4ff01"
 }

package/src/ActionItem/ActionItem.stories.tsx

@@ -1,14 +1,15 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
+import { ActionItem } from "@jobber/components-native";
 import {
-  ActionItem,
-  AutoLink,
-  Card,
-  Content,
-  InputDate,
-  Text,
-} from "@jobber/components-native";
+  ActionItemActionAlignmentExample,
+  ActionItemBasicExample,
+  ActionItemInACardExample,
+  ActionItemInteractiveChildrenExample,
+  ActionItemMixedComponentsExample,
+  ActionItemNoActionExample,
+  ActionItemTitleOnlyExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Layouts and Structure/ActionItem",
@@ -23,88 +24,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => {
-  return (
-    <ActionItem {...args}>
-      <Text>Service Checklist</Text>
-    </ActionItem>
-  );
-};
-
-const InACardTemplate = (args: Story["args"]) => {
-  return (
-    <Card>
-      <ActionItem icon="work" {...args}>
-        <Text>Service Checklist</Text>
-      </ActionItem>
-      <ActionItem icon="address" {...args}>
-        <Text>Address</Text>
-      </ActionItem>
-      <ActionItem icon="quote" title="Quote #64" {...args} />
-    </Card>
-  );
-};
-
-const MixedComponentsTemplate = (args: Story["args"]) => {
-  return (
-    <Card>
-      <Content>
-        <InputDate placeholder="Start date" />
-      </Content>
-      <ActionItem {...args}>
-        <Text>Casey Young</Text>
-      </ActionItem>
-    </Card>
-  );
-};
-
-const ActionAlignmentTemplate = (args: Story["args"]) => {
-  return (
-    <Card>
-      <ActionItem {...args}>
-        <Text>
-          Cut front, back and area behind garage. Give the customer a heads up.
-        </Text>
-      </ActionItem>
-    </Card>
-  );
-};
-
-const TitleOnlyTemplate = (args: Story["args"]) => {
-  return (
-    <Card>
-      <ActionItem {...args} />
-    </Card>
-  );
-};
-
-const InteractiveChildrenTemplate = (args: Story["args"]) => {
-  return (
-    <Card>
-      <ActionItem {...args}>
-        <Content spacing="none">
-          <Text>You can tap this link or the whole ActionItem</Text>
-          <AutoLink>{"www.getjobber.com"}</AutoLink>
-        </Content>
-      </ActionItem>
-    </Card>
-  );
-};
-
-const NoActionTemplate = (args: Story["args"]) => {
-  return (
-    <Card>
-      <ActionItem {...args}>
-        <Text>Nathaniel Lewis</Text>
-        <Text>Christian Carlino</Text>
-        <Text>Lorna Erikssen</Text>
-      </ActionItem>
-    </Card>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ActionItemBasicExample,
   args: {
     icon: "work",
     onPress: () => action("alert")("👍"),
@@ -112,14 +33,14 @@ export const Basic: Story = {
 };
 
 export const InACard: Story = {
-  render: InACardTemplate,
+  render: ActionItemInACardExample,
   args: {
     onPress: () => action("alert")("👍"),
   },
 };
 
 export const MixedComponents: Story = {
-  render: MixedComponentsTemplate,
+  render: ActionItemMixedComponentsExample,
   args: {
     onPress: () => action("alert")("👍"),
     icon: "person",
@@ -128,7 +49,7 @@ export const MixedComponents: Story = {
 };
 
 export const ActionAlignment: Story = {
-  render: ActionAlignmentTemplate,
+  render: ActionItemActionAlignmentExample,
   args: {
     onPress: () => action("alert")("👍"),
     actionIconAlignment: "flex-start",
@@ -137,7 +58,7 @@ export const ActionAlignment: Story = {
 };
 
 export const TitleOnly: Story = {
-  render: TitleOnlyTemplate,
+  render: ActionItemTitleOnlyExample,
   args: {
     title: "Add client",
     icon: "person",
@@ -147,7 +68,7 @@ export const TitleOnly: Story = {
 };
 
 export const InteractiveChildren: Story = {
-  render: InteractiveChildrenTemplate,
+  render: ActionItemInteractiveChildrenExample,
   args: {
     onPress: () => action("alert")("Tapped the entire action item"),
     icon: "presentation",
@@ -156,7 +77,7 @@ export const InteractiveChildren: Story = {
 };
 
 export const NoAction: Story = {
-  render: NoActionTemplate,
+  render: ActionItemNoActionExample,
   args: {
     icon: "userSwitch",
     title: "Team",

package/src/ActionItem/ActionItemGroup.stories.tsx

@@ -1,14 +1,10 @@
-import React from "react";
+import type React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { action } from "storybook/actions";
+import { ActionItemGroup } from "@jobber/components-native";
 import {
-  ActionItem,
-  ActionItemGroup,
-  Card,
-  Content,
-  Text,
-  Typography,
-} from "@jobber/components-native";
+  ActionItemGroupBasicExample,
+  ActionItemGroupMixedComponentsExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Layouts and Structure/ActionItemGroup",
@@ -27,83 +23,10 @@ type Story = StoryObj<
   }
 >;
 
-const BasicTemplate = () => {
-  return (
-    <ActionItemGroup>
-      <Card>
-        <ActionItem
-          title={"Request #13"}
-          icon={"request"}
-          onPress={() => action("alert")("request")}
-        />
-        <ActionItem
-          title={"Quote #64"}
-          icon={"quote"}
-          onPress={() => action("alert")("quote")}
-        />
-        <ActionItem
-          title={"Job #12"}
-          icon={"job"}
-          onPress={() => action("alert")("job")}
-        />
-        <ActionItem
-          title={"Invoice #72"}
-          icon={"invoice"}
-          onPress={() => action("alert")("invoice")}
-        >
-          <Text>$250.00</Text>
-        </ActionItem>
-      </Card>
-    </ActionItemGroup>
-  );
-};
-
-const MixedComponentsTemplate = () => {
-  return (
-    <Card>
-      <ActionItemGroup>
-        <ActionItem
-          title={"Stephen Campbell"}
-          icon={"person"}
-          onPress={() => action("alert")("client")}
-        />
-        <Content>
-          <Typography fontFamily="display">Client name</Typography>
-          <Text>Stephen Campbell</Text>
-          <Typography fontFamily="display">Client type</Typography>
-          <Text>Residential</Text>
-        </Content>
-        <ActionItem
-          title={"Request #13"}
-          icon={"request"}
-          onPress={() => action("alert")("request")}
-        />
-        <ActionItem
-          title={"Quote #64"}
-          icon={"quote"}
-          onPress={() => action("alert")("quote")}
-        />
-        <ActionItem
-          title={"Job #12"}
-          icon={"job"}
-          onPress={() => action("alert")("job")}
-        />
-        <ActionItem
-          title={"Invoice #72"}
-          icon={"invoice"}
-          onPress={() => action("alert")("invoice")}
-        >
-          <Text>$250.00</Text>
-        </ActionItem>
-      </ActionItemGroup>
-    </Card>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ActionItemGroupBasicExample,
 };
 
 export const MixedComponents: Story = {
-  render: MixedComponentsTemplate,
+  render: ActionItemGroupMixedComponentsExample,
 };

package/src/ActionItem/docs/ActionItemActionAlignmentExample.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { ActionItem, Card, Text } from "@jobber/components-native";
+import type { ActionItemProps } from "@jobber/components-native";
+
+export function ActionItemActionAlignmentExample(
+  props: Partial<ActionItemProps>,
+) {
+  return (
+    <Card>
+      <ActionItem
+        actionIconAlignment="flex-start"
+        title="Service Details"
+        onPress={() => action("alert")("👍")}
+        {...props}
+      >
+        <Text>
+          Cut front, back and area behind garage. Give the customer a heads up.
+        </Text>
+      </ActionItem>
+    </Card>
+  );
+}

package/src/ActionItem/docs/ActionItemBasicExample.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { ActionItem, Text } from "@jobber/components-native";
+import type { ActionItemProps } from "@jobber/components-native";
+
+export function ActionItemBasicExample(props: Partial<ActionItemProps>) {
+  return (
+    <ActionItem icon="work" onPress={() => action("alert")("👍")} {...props}>
+      <Text>Service Checklist</Text>
+    </ActionItem>
+  );
+}

package/src/ActionItem/docs/ActionItemGroupBasicExample.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { action } from "storybook/actions";
+import {
+  ActionItem,
+  ActionItemGroup,
+  Card,
+  Text,
+} from "@jobber/components-native";
+
+export function ActionItemGroupBasicExample() {
+  return (
+    <ActionItemGroup>
+      <Card>
+        <ActionItem
+          title={"Request #13"}
+          icon={"request"}
+          onPress={() => action("alert")("request")}
+        />
+        <ActionItem
+          title={"Quote #64"}
+          icon={"quote"}
+          onPress={() => action("alert")("quote")}
+        />
+        <ActionItem
+          title={"Job #12"}
+          icon={"job"}
+          onPress={() => action("alert")("job")}
+        />
+        <ActionItem
+          title={"Invoice #72"}
+          icon={"invoice"}
+          onPress={() => action("alert")("invoice")}
+        >
+          <Text>$250.00</Text>
+        </ActionItem>
+      </Card>
+    </ActionItemGroup>
+  );
+}

package/src/ActionItem/docs/ActionItemGroupMixedComponentsExample.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { action } from "storybook/actions";
+import {
+  ActionItem,
+  ActionItemGroup,
+  Card,
+  Content,
+  Text,
+  Typography,
+} from "@jobber/components-native";
+
+export function ActionItemGroupMixedComponentsExample() {
+  return (
+    <Card>
+      <ActionItemGroup>
+        <ActionItem
+          title={"Stephen Campbell"}
+          icon={"person"}
+          onPress={() => action("alert")("client")}
+        />
+        <Content>
+          <Typography fontFamily="display">Client name</Typography>
+          <Text>Stephen Campbell</Text>
+          <Typography fontFamily="display">Client type</Typography>
+          <Text>Residential</Text>
+        </Content>
+        <ActionItem
+          title={"Request #13"}
+          icon={"request"}
+          onPress={() => action("alert")("request")}
+        />
+        <ActionItem
+          title={"Quote #64"}
+          icon={"quote"}
+          onPress={() => action("alert")("quote")}
+        />
+        <ActionItem
+          title={"Job #12"}
+          icon={"job"}
+          onPress={() => action("alert")("job")}
+        />
+        <ActionItem
+          title={"Invoice #72"}
+          icon={"invoice"}
+          onPress={() => action("alert")("invoice")}
+        >
+          <Text>$250.00</Text>
+        </ActionItem>
+      </ActionItemGroup>
+    </Card>
+  );
+}

package/src/ActionItem/docs/ActionItemInACardExample.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { ActionItem, Card, Text } from "@jobber/components-native";
+import type { ActionItemProps } from "@jobber/components-native";
+
+export function ActionItemInACardExample(props: Partial<ActionItemProps>) {
+  return (
+    <Card>
+      <ActionItem icon="work" onPress={() => action("alert")("👍")} {...props}>
+        <Text>Service Checklist</Text>
+      </ActionItem>
+      <ActionItem
+        icon="address"
+        onPress={() => action("alert")("👍")}
+        {...props}
+      >
+        <Text>Address</Text>
+      </ActionItem>
+      <ActionItem
+        icon="quote"
+        title="Quote #64"
+        onPress={() => action("alert")("👍")}
+        {...props}
+      />
+    </Card>
+  );
+}

package/src/ActionItem/docs/ActionItemInteractiveChildrenExample.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { action } from "storybook/actions";
+import {
+  ActionItem,
+  AutoLink,
+  Card,
+  Content,
+  Text,
+} from "@jobber/components-native";
+import type { ActionItemProps } from "@jobber/components-native";
+
+export function ActionItemInteractiveChildrenExample(
+  props: Partial<ActionItemProps>,
+) {
+  return (
+    <Card>
+      <ActionItem
+        icon="presentation"
+        actionIcon="link"
+        onPress={() => action("alert")("Tapped the entire action item")}
+        {...props}
+      >
+        <Content spacing="none">
+          <Text>You can tap this link or the whole ActionItem</Text>
+          <AutoLink>{"www.getjobber.com"}</AutoLink>
+        </Content>
+      </ActionItem>
+    </Card>
+  );
+}

package/src/ActionItem/docs/ActionItemMixedComponentsExample.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { action } from "storybook/actions";
+import {
+  ActionItem,
+  Card,
+  Content,
+  InputDate,
+  Text,
+} from "@jobber/components-native";
+import type { ActionItemProps } from "@jobber/components-native";
+
+export function ActionItemMixedComponentsExample(
+  props: Partial<ActionItemProps>,
+) {
+  const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+
+  return (
+    <Card>
+      <Content>
+        <InputDate
+          placeholder="Start date"
+          value={startDate}
+          onChange={setStartDate}
+        />
+      </Content>
+      <ActionItem
+        icon="person"
+        title="Assigned to"
+        onPress={() => action("alert")("👍")}
+        {...props}
+      >
+        <Text>Casey Young</Text>
+      </ActionItem>
+    </Card>
+  );
+}

package/src/ActionItem/docs/ActionItemNoActionExample.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { ActionItem, Card, Text } from "@jobber/components-native";
+import type { ActionItemProps } from "@jobber/components-native";
+
+export function ActionItemNoActionExample(props: Partial<ActionItemProps>) {
+  return (
+    <Card>
+      <ActionItem icon="userSwitch" title="Team" {...props}>
+        <Text>Nathaniel Lewis</Text>
+        <Text>Christian Carlino</Text>
+        <Text>Lorna Erikssen</Text>
+      </ActionItem>
+    </Card>
+  );
+}

package/src/ActionItem/docs/ActionItemTitleOnlyExample.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { ActionItem, Card } from "@jobber/components-native";
+import type { ActionItemProps } from "@jobber/components-native";
+
+export function ActionItemTitleOnlyExample(props: Partial<ActionItemProps>) {
+  return (
+    <Card>
+      <ActionItem
+        title="Add client"
+        icon="person"
+        actionIcon="add"
+        onPress={() => action("alert")("👍")}
+        {...props}
+      />
+    </Card>
+  );
+}

package/src/ActionItem/docs/index.ts

@@ -0,0 +1,9 @@
+export { ActionItemBasicExample } from "./ActionItemBasicExample";
+export { ActionItemInACardExample } from "./ActionItemInACardExample";
+export { ActionItemMixedComponentsExample } from "./ActionItemMixedComponentsExample";
+export { ActionItemActionAlignmentExample } from "./ActionItemActionAlignmentExample";
+export { ActionItemTitleOnlyExample } from "./ActionItemTitleOnlyExample";
+export { ActionItemInteractiveChildrenExample } from "./ActionItemInteractiveChildrenExample";
+export { ActionItemNoActionExample } from "./ActionItemNoActionExample";
+export { ActionItemGroupBasicExample } from "./ActionItemGroupBasicExample";
+export { ActionItemGroupMixedComponentsExample } from "./ActionItemGroupMixedComponentsExample";

package/src/ActionLabel/ActionLabel.stories.tsx

@@ -1,6 +1,11 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { ActionLabel } from "@jobber/components-native";
+import {
+  ActionLabelBasicExample,
+  ActionLabelColorExample,
+  ActionLabelDarkBackgroundExample,
+  ActionLabelDisabledExample,
+} from "./docs";
 
 const meta = {
   title: "Components/Actions/ActionLabel",
@@ -12,24 +17,18 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => {
-  const { children, ...actionLabelProps } = args ?? {};
-
-  return <ActionLabel {...actionLabelProps}>{children}</ActionLabel>;
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ActionLabelBasicExample,
   args: { children: "I am a label text" },
 };
 
 export const Color: Story = {
-  render: BasicTemplate,
+  render: ActionLabelColorExample,
   args: { variation: "learning", children: "Learning" },
 };
 
 export const DarkBackground: Story = {
-  render: BasicTemplate,
+  render: ActionLabelDarkBackgroundExample,
   args: { variation: "onPrimary", children: "Light Me Up" },
   parameters: {
     backgrounds: { default: "dark" },
@@ -37,6 +36,6 @@ export const DarkBackground: Story = {
 };
 
 export const Disabled: Story = {
-  render: BasicTemplate,
+  render: ActionLabelDisabledExample,
   args: { disabled: true, children: "Disabled" },
 };

package/src/ActionLabel/docs/ActionLabelBasicExample.tsx

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

package/src/ActionLabel/docs/ActionLabelColorExample.tsx

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