@jobber/components-native 0.101.7 → 0.101.8

package/src/ContentOverlay/docs/ContentOverlayBasic.tsx

@@ -0,0 +1,54 @@
+import React, { useRef } from "react";
+import type { ComponentProps } 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 type { ContentOverlayRef } from "@jobber/components-native";
+import {
+  Button,
+  ContentOverlay,
+  Heading,
+  Text,
+} from "@jobber/components-native";
+
+type ContentOverlayProps = ComponentProps<typeof ContentOverlay>;
+
+export function ContentOverlayBasic(props: Partial<ContentOverlayProps>) {
+  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")}
+          {...props}
+        >
+          <View style={{ padding: 16 }}>
+            <Text>This is the content inside the overlay.</Text>
+          </View>
+        </ContentOverlay>
+      </BottomSheetModalProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/ContentOverlay/docs/index.ts

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

package/src/Disclosure/Disclosure.stories.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Disclosure } from "@jobber/components-native";
+import { DisclosureBasic } from "./docs";
 
 const meta = {
   title: "Components/Layouts and Structure/Disclosure",
@@ -12,30 +13,13 @@ const meta = {
 } satisfies Meta<typeof Disclosure>;
 export default meta;
 type DisclosureStoryArgs = Pick<
-  React.ComponentProps<typeof Disclosure>,
+  ComponentProps<typeof Disclosure>,
   "header" | "content" | "isEmpty"
 >;
 type Story = StoryObj<DisclosureStoryArgs>;
 
-const BasicTemplate = (args: Story["args"]) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Disclosure
-      header={args?.header ?? "Advanced Instructions"}
-      content={
-        args?.content ??
-        "For every 2 team members you add, your profits will triple."
-      }
-      isEmpty={args?.isEmpty ?? false}
-      open={open}
-      onToggle={() => setOpen(!open)}
-    />
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: DisclosureBasic,
   args: {
     header: "Advanced Instructions",
     content: "For every 2 team members you add, your profits will triple.",

package/src/Disclosure/docs/DisclosureBasic.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import type { ComponentProps } from "react";
+import { Disclosure } from "@jobber/components-native";
+
+type DisclosureProps = ComponentProps<typeof Disclosure>;
+
+export function DisclosureBasic(props: Partial<DisclosureProps>) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Disclosure
+      header={props.header ?? "Advanced Instructions"}
+      content={
+        props.content ??
+        "For every 2 team members you add, your profits will triple."
+      }
+      isEmpty={props.isEmpty ?? false}
+      {...props}
+      open={open}
+      onToggle={() => setOpen(!open)}
+    />
+  );
+}

package/src/Disclosure/docs/index.ts

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

package/src/Divider/Divider.stories.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Content, Divider, Heading, Text } from "@jobber/components-native";
+import type { ComponentProps } from "react";
+import { Divider } from "@jobber/components-native";
+import { DividerHorizontal, DividerVertical } from "./docs";
 
 const meta = {
   title: "Components/Layouts and Structure/Divider",
@@ -11,54 +11,10 @@ const meta = {
   },
 } satisfies Meta<typeof Divider>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof Divider>>>;
-
-const HorizontalTemplate = (args: Story["args"]) => (
-  <View
-    style={{
-      display: "flex",
-      gap: 16,
-    }}
-  >
-    <Content>Some amazing content</Content>
-    <Divider {...args} />
-    <Content>Even more amazing content</Content>
-  </View>
-);
-
-const VerticalTemplate = (args: Story["args"]) => (
-  <View>
-    <View style={{ marginBottom: 16 }}>
-      <Heading>Summary</Heading>
-    </View>
-    <View
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        height: 40,
-        gap: 16,
-      }}
-    >
-      <Content spacing="small">
-        <Heading level="subHeading">Today</Heading>
-        <Text>{"\n"}$104.13</Text>
-      </Content>
-      <Divider {...args} direction="vertical" />
-      <Content spacing="small">
-        <Heading level="subHeading">Tomorrow</Heading>
-        <Text>{"\n"}$262.42</Text>
-      </Content>
-      <Divider {...args} direction="vertical" />
-      <Content spacing="small">
-        <Heading level="subHeading">Next Week</Heading>
-        <Text>{"\n"}$123.23</Text>
-      </Content>
-    </View>
-  </View>
-);
+type Story = StoryObj<Partial<ComponentProps<typeof Divider>>>;
 
 export const Horizontal: Story = {
-  render: HorizontalTemplate,
+  render: DividerHorizontal,
   args: {
     size: "base",
     direction: "horizontal",
@@ -66,7 +22,7 @@ export const Horizontal: Story = {
 };
 
 export const Vertical: Story = {
-  render: VerticalTemplate,
+  render: DividerVertical,
   args: {
     size: "base",
     direction: "vertical",

package/src/Divider/docs/DividerHorizontal.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { View } from "react-native";
+import { Content, Divider } from "@jobber/components-native";
+
+type DividerProps = ComponentProps<typeof Divider>;
+
+export function DividerHorizontal(props: Partial<DividerProps>) {
+  return (
+    <View
+      style={{
+        display: "flex",
+        gap: 16,
+      }}
+    >
+      <Content>Some amazing content</Content>
+      <Divider size="base" direction="horizontal" {...props} />
+      <Content>Even more amazing content</Content>
+    </View>
+  );
+}

package/src/Divider/docs/DividerVertical.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { View } from "react-native";
+import { Content, Divider, Heading, Text } from "@jobber/components-native";
+
+type DividerProps = ComponentProps<typeof Divider>;
+
+export function DividerVertical(props: Partial<DividerProps>) {
+  return (
+    <View>
+      <View style={{ marginBottom: 16 }}>
+        <Heading>Summary</Heading>
+      </View>
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          height: 40,
+          gap: 16,
+        }}
+      >
+        <Content spacing="small">
+          <Heading level="subHeading">Today</Heading>
+          <Text>{"\n"}$104.13</Text>
+        </Content>
+        <Divider size="base" direction="vertical" {...props} />
+        <Content spacing="small">
+          <Heading level="subHeading">Tomorrow</Heading>
+          <Text>{"\n"}$262.42</Text>
+        </Content>
+        <Divider size="base" direction="vertical" {...props} />
+        <Content spacing="small">
+          <Heading level="subHeading">Next Week</Heading>
+          <Text>{"\n"}$123.23</Text>
+        </Content>
+      </View>
+    </View>
+  );
+}

package/src/Divider/docs/index.ts

@@ -0,0 +1,2 @@
+export { DividerHorizontal } from "./DividerHorizontal";
+export { DividerVertical } from "./DividerVertical";

package/src/EmptyState/EmptyState.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
 import { EmptyState } from "@jobber/components-native";
+import { EmptyStateBasic } from "./docs";
 
 const meta = {
   title: "Components/Status and Feedback/EmptyState",
@@ -13,6 +14,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
+  render: EmptyStateBasic,
   args: {
     icon: "home",
     title: "Title",

package/src/EmptyState/docs/EmptyStateBasic.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { EmptyState } from "@jobber/components-native";
+import type { EmptyStateProps } from "@jobber/components-native";
+
+export function EmptyStateBasic(props: Partial<EmptyStateProps>) {
+  return (
+    <EmptyState
+      icon="home"
+      title="Title"
+      description="Description"
+      primaryAction={{
+        label: "Click Me",
+        onPress: () => {
+          action("alert")("👋");
+        },
+      }}
+      secondaryAction={{
+        label: "Don't Forget About Me",
+        onPress: () => {
+          action("alert")("👋");
+        },
+      }}
+      {...props}
+    />
+  );
+}

package/src/EmptyState/docs/index.ts

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

package/src/Flex/Flex.stories.tsx

@@ -1,14 +1,7 @@
-import React from "react";
-import { View } from "react-native";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import {
-  Card,
-  Content,
-  Flex,
-  Icon,
-  StatusLabel,
-  Text,
-} from "@jobber/components-native";
+import { Flex } from "@jobber/components-native";
+import { FlexMultiRow, FlexNested } from "./docs";
 
 const meta = {
   title: "Components/Layouts and Structure/Flex",
@@ -22,57 +15,13 @@ const meta = {
 } satisfies Meta<typeof Flex>;
 export default meta;
 type FlexStoryArgs = Pick<
-  React.ComponentProps<typeof Flex>,
+  ComponentProps<typeof Flex>,
   "template" | "align" | "gap"
 >;
 type Story = StoryObj<FlexStoryArgs>;
 
-const NestedTemplate = (args: Story["args"]) => (
-  <Flex
-    template={args?.template ?? ["grow", "shrink"]}
-    align={args?.align}
-    gap={args?.gap}
-  >
-    <Flex align={"flex-start"} template={["shrink", "grow"]}>
-      <Icon name="quote" />
-      <View>
-        <Flex template={["grow", "shrink"]}>
-          <Text emphasis="strong">Dylan Tec</Text>
-          <StatusLabel text="Success" status="success" />
-        </Flex>
-        <Text>Sep 03 | $100 | Quote #93</Text>
-      </View>
-    </Flex>
-    <Icon name="arrowRight" />
-  </Flex>
-);
-
-const MultiRowTemplate = (args: Story["args"]) => (
-  <Flex
-    template={args?.template ?? ["grow", "grow"]}
-    align={args?.align}
-    gap={args?.gap}
-  >
-    {[
-      "Cash",
-      "Cheque",
-      "Credit card",
-      "Bank transfer",
-      "Money order",
-      "Pigeon Mail",
-      "Other",
-    ].map(name => (
-      <Card key={name}>
-        <Content>
-          <Text emphasis="strong">{name}</Text>
-        </Content>
-      </Card>
-    ))}
-  </Flex>
-);
-
 export const Nested: Story = {
-  render: NestedTemplate,
+  render: FlexNested,
   args: {
     template: ["grow", "shrink"],
     align: "center",
@@ -80,7 +29,7 @@ export const Nested: Story = {
 };
 
 export const MultiRow: Story = {
-  render: MultiRowTemplate,
+  render: FlexMultiRow,
   args: {
     template: ["grow", "grow"],
     gap: "small",

package/src/Flex/docs/FlexMultiRow.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Card, Content, Flex, Text } from "@jobber/components-native";
+import type { FlexProps } from "@jobber/components-native";
+
+export function FlexMultiRow(props: Partial<FlexProps>) {
+  return (
+    <Flex template={["grow", "grow"]} gap="small" {...props}>
+      {[
+        "Cash",
+        "Cheque",
+        "Credit card",
+        "Bank transfer",
+        "Money order",
+        "Pigeon Mail",
+        "Other",
+      ].map(name => (
+        <Card key={name}>
+          <Content>
+            <Text emphasis="strong">{name}</Text>
+          </Content>
+        </Card>
+      ))}
+    </Flex>
+  );
+}

package/src/Flex/docs/FlexNested.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { View } from "react-native";
+import { Flex, Icon, StatusLabel, Text } from "@jobber/components-native";
+import type { FlexProps } from "@jobber/components-native";
+
+export function FlexNested(props: Partial<FlexProps>) {
+  return (
+    <Flex template={["grow", "shrink"]} align="center" {...props}>
+      <Flex align={"flex-start"} template={["shrink", "grow"]}>
+        <Icon name="quote" />
+        <View>
+          <Flex template={["grow", "shrink"]}>
+            <Text emphasis="strong">Dylan Tec</Text>
+            <StatusLabel text="Success" status="success" />
+          </Flex>
+          <Text>Sep 03 | $100 | Quote #93</Text>
+        </View>
+      </Flex>
+      <Icon name="arrowRight" />
+    </Flex>
+  );
+}

package/src/Flex/docs/index.ts

@@ -0,0 +1,2 @@
+export { FlexNested } from "./FlexNested";
+export { FlexMultiRow } from "./FlexMultiRow";

package/src/Form/Form.stories.tsx

@@ -1,13 +1,8 @@
-import React from "react";
+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 {
-  AtlantisOverlayProvider,
-  Content,
-  Form,
-  InputText,
-} from "@jobber/components-native";
+import { Form } from "@jobber/components-native";
+import { FormBasic } from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/Form",
@@ -25,51 +20,12 @@ interface NativeFormStoryArgs {
     lastName: string;
     nickName: string;
   };
-  secondaryActions?: React.ComponentProps<typeof Form>["secondaryActions"];
+  secondaryActions?: ComponentProps<typeof Form>["secondaryActions"];
 }
 type Story = StoryObj<NativeFormStoryArgs>;
 
-const BasicTemplate = (args: Story["args"]) => (
-  <SafeAreaProvider>
-    <AtlantisOverlayProvider>
-      <Form
-        initialValues={args?.initialValues}
-        secondaryActions={args?.secondaryActions}
-        onSubmit={value =>
-          new Promise(resolve => {
-            setTimeout(
-              () => resolve(action("alert")(JSON.stringify(value, undefined))),
-              1000,
-            );
-          })
-        }
-        onSubmitError={() => undefined}
-        onSubmitSuccess={() => undefined}
-      >
-        <Content>
-          <InputText
-            name="firstName"
-            placeholder="First name"
-            validations={{ required: "Please add a first name" }}
-          />
-          <InputText
-            name="lastName"
-            placeholder="Last name"
-            validations={{ required: "Please add a last name" }}
-          />
-          <InputText
-            name="nickName"
-            placeholder="Nick name"
-            validations={{ required: "Please add a nick name" }}
-          />
-        </Content>
-      </Form>
-    </AtlantisOverlayProvider>
-  </SafeAreaProvider>
-);
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: FormBasic,
   args: {
     initialValues: {
       firstName: "Greatest",
@@ -80,7 +36,7 @@ export const Basic: Story = {
 };
 
 export const WithSecondaryActions: Story = {
-  render: BasicTemplate,
+  render: FormBasic,
   args: {
     initialValues: {
       firstName: "Test",

package/src/Form/docs/FormBasic.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import {
+  AtlantisOverlayProvider,
+  Content,
+  Form,
+  InputText,
+} from "@jobber/components-native";
+import type { FormProps } from "@jobber/components-native";
+
+type FormStoryArgs = Pick<
+  FormProps<{ firstName: string; lastName: string; nickName: string }, unknown>,
+  "initialValues" | "secondaryActions"
+>;
+
+export function FormBasic(props: Partial<FormStoryArgs>) {
+  return (
+    <SafeAreaProvider>
+      <AtlantisOverlayProvider>
+        <Form
+          initialValues={
+            props.initialValues ?? {
+              firstName: "Greatest",
+              lastName: "Ever",
+              nickName: "",
+            }
+          }
+          secondaryActions={props.secondaryActions}
+          onSubmit={value =>
+            new Promise(resolve => {
+              setTimeout(
+                () =>
+                  resolve(action("alert")(JSON.stringify(value, undefined))),
+                1000,
+              );
+            })
+          }
+          onSubmitError={() => undefined}
+          onSubmitSuccess={() => undefined}
+        >
+          <Content>
+            <InputText
+              name="firstName"
+              placeholder="First name"
+              validations={{ required: "Please add a first name" }}
+            />
+            <InputText
+              name="lastName"
+              placeholder="Last name"
+              validations={{ required: "Please add a last name" }}
+            />
+            <InputText
+              name="nickName"
+              placeholder="Nick name"
+              validations={{ required: "Please add a nick name" }}
+            />
+          </Content>
+        </Form>
+      </AtlantisOverlayProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/Form/docs/index.ts

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

package/src/FormField/FormField.stories.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { FormProvider, useForm } from "react-hook-form";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { FormField, InputText, Text } from "@jobber/components-native";
+import { FormField } from "@jobber/components-native";
+import { FormFieldBasic, FormFieldWithValidations } from "./docs";
 
 const meta = {
   title: "Components/Private/FormField",
@@ -17,56 +16,15 @@ interface NativeFormFieldStoryArgs {
 }
 type Story = StoryObj<NativeFormFieldStoryArgs>;
 
-const BasicTemplate = (args: Story["args"]) => {
-  return (
-    <FormField name={args?.name ?? "name"}>
-      {field => {
-        return <InputText value={field.value} placeholder="Enter name here" />;
-      }}
-    </FormField>
-  );
-};
-
-const WithValidationsTemplate = (args: Story["args"]) => {
-  const methods = useForm({ mode: "onChange" });
-
-  return (
-    <FormProvider {...methods}>
-      <FormField
-        name={args?.name ?? "validations"}
-        validations={{
-          maxLength: {
-            value: 5,
-            message: "Should not exceed 5 characters",
-          },
-        }}
-      >
-        {(field, error) => {
-          return (
-            <>
-              {error && <Text variation="error">{error.message}</Text>}
-              <InputText
-                value={field.value}
-                placeholder="Should not exceed 5 characters"
-                onChangeText={field.onChange}
-              />
-            </>
-          );
-        }}
-      </FormField>
-    </FormProvider>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: FormFieldBasic,
   args: {
     name: "name",
   },
 };
 
 export const WithValidations: Story = {
-  render: WithValidationsTemplate,
+  render: FormFieldWithValidations,
   args: {
     name: "validations",
   },