@jobber/components-native 0.101.6 → 0.101.8

package/src/FormField/docs/FormFieldBasic.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { FormField, InputText } from "@jobber/components-native";
+
+type FormFieldProps = ComponentProps<typeof FormField>;
+
+export function FormFieldBasic(props: Partial<FormFieldProps>) {
+  return (
+    <FormField name={props.name ?? "name"} {...props}>
+      {field => {
+        return <InputText value={field.value} placeholder="Enter name here" />;
+      }}
+    </FormField>
+  );
+}

package/src/FormField/docs/FormFieldWithValidations.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { FormField, InputText, Text } from "@jobber/components-native";
+
+type FormFieldProps = ComponentProps<typeof FormField>;
+
+export function FormFieldWithValidations(props: Partial<FormFieldProps>) {
+  const methods = useForm({ mode: "onChange" });
+
+  return (
+    <FormProvider {...methods}>
+      <FormField
+        name={props.name ?? "validations"}
+        validations={{
+          maxLength: {
+            value: 5,
+            message: "Should not exceed 5 characters",
+          },
+        }}
+        {...props}
+      >
+        {(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>
+  );
+}

package/src/FormField/docs/index.ts

@@ -0,0 +1,2 @@
+export { FormFieldBasic } from "./FormFieldBasic";
+export { FormFieldWithValidations } from "./FormFieldWithValidations";

package/src/FormatFile/FormatFile.stories.tsx

@@ -1,7 +1,7 @@
-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 { AtlantisOverlayProvider, FormatFile } from "@jobber/components-native";
+import { FormatFile } from "@jobber/components-native";
+import { FormatFileBasic } from "./docs";
 
 const meta = {
   title: "Components/Images and Icons/FormatFile",
@@ -12,38 +12,10 @@ const meta = {
   },
 } satisfies Meta<typeof FormatFile>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof FormatFile>>>;
-
-const BasicTemplate = (args: Story["args"]) => (
-  <SafeAreaProvider>
-    <AtlantisOverlayProvider>
-      <FormatFile
-        file={
-          args?.file ?? {
-            fileName: "image.png",
-            contentType: "image/png",
-            url: "https://picsum.photos/250",
-            thumbnailUrl: "https://picsum.photos/250",
-            fileSize: 1024,
-          }
-        }
-        styleInGrid={args?.styleInGrid}
-        accessibilityLabel={args?.accessibilityLabel}
-        accessibilityHint={args?.accessibilityHint}
-        onTap={args?.onTap}
-        onRemove={args?.onRemove}
-        onPreviewPress={args?.onPreviewPress}
-        bottomSheetOptionsSuffix={args?.bottomSheetOptionsSuffix}
-        testID={args?.testID}
-        showFileTypeIndicator={args?.showFileTypeIndicator}
-        createThumbnail={args?.createThumbnail}
-      />
-    </AtlantisOverlayProvider>
-  </SafeAreaProvider>
-);
+type Story = StoryObj<Partial<ComponentProps<typeof FormatFile>>>;
 
 export const Image: Story = {
-  render: BasicTemplate,
+  render: FormatFileBasic,
   args: {
     file: {
       fileName: "image.png",
@@ -56,7 +28,7 @@ export const Image: Story = {
 };
 
 export const ImageGrid: Story = {
-  render: BasicTemplate,
+  render: FormatFileBasic,
   args: {
     file: {
       fileName: "image.png",
@@ -70,7 +42,7 @@ export const ImageGrid: Story = {
 };
 
 export const Video: Story = {
-  render: BasicTemplate,
+  render: FormatFileBasic,
   args: {
     file: {
       fileName: "video.mp4",
@@ -83,7 +55,7 @@ export const Video: Story = {
 };
 
 export const PDF: Story = {
-  render: BasicTemplate,
+  render: FormatFileBasic,
   args: {
     file: {
       fileName: "document.pdf",

package/src/FormatFile/docs/FormatFileBasic.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { AtlantisOverlayProvider, FormatFile } from "@jobber/components-native";
+import type { FormatFileProps } from "@jobber/components-native";
+
+export function FormatFileBasic(props: Partial<FormatFileProps<unknown>>) {
+  return (
+    <SafeAreaProvider>
+      <AtlantisOverlayProvider>
+        <FormatFile
+          file={
+            props.file ?? {
+              fileName: "image.png",
+              contentType: "image/png",
+              url: "https://picsum.photos/250",
+              thumbnailUrl: "https://picsum.photos/250",
+              fileSize: 1024,
+            }
+          }
+          {...props}
+        />
+      </AtlantisOverlayProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/FormatFile/docs/index.ts

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

package/src/Glimmer/Glimmer.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Content, Flex, Glimmer } from "@jobber/components-native";
+import { Glimmer } from "@jobber/components-native";
+import { GlimmerBasic, GlimmerInDepth } from "./docs";
 
 const meta = {
   title: "Components/Status and Feedback/Glimmer",
@@ -20,12 +22,10 @@ const meta = {
   ],
 } satisfies Meta<typeof Glimmer>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof Glimmer>>>;
-
-const BasicTemplate = (args: Story["args"]) => <Glimmer {...args} />;
+type Story = StoryObj<Partial<ComponentProps<typeof Glimmer>>>;
 
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: GlimmerBasic,
   args: {
     shape: "rectangle",
     size: "base",
@@ -33,33 +33,8 @@ export const Basic: Story = {
   },
 };
 
-const InDepthTemplate = (args: Story["args"]) => (
-  <Content spacing="none">
-    <Flex template={["shrink", "grow"]}>
-      <Glimmer {...args} />
-      <Content spacing="none" childSpacing="small">
-        <Glimmer size="large" width="30%" />
-        <Glimmer size="small" width="40%" />
-      </Content>
-    </Flex>
-
-    <Content spacing="none" childSpacing="small">
-      <Glimmer size="small" width="80%" />
-      <Glimmer size="small" />
-      <Glimmer size="small" width="70%" />
-    </Content>
-
-    <Flex template={["shrink", "shrink", "shrink", "shrink"]}>
-      <Glimmer size="largest" shape="square" />
-      <Glimmer size="largest" shape="square" />
-      <Glimmer size="largest" shape="square" />
-      <Glimmer size="largest" shape="square" />
-    </Flex>
-  </Content>
-);
-
 export const InDepth: Story = {
-  render: InDepthTemplate,
+  render: GlimmerInDepth,
   args: {
     size: "larger",
     shape: "circle",

package/src/Glimmer/docs/GlimmerBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Glimmer } from "@jobber/components-native";
+
+type GlimmerProps = ComponentProps<typeof Glimmer>;
+
+export function GlimmerBasic(props: Partial<GlimmerProps>) {
+  return <Glimmer shape="rectangle" size="base" timing="base" {...props} />;
+}

package/src/Glimmer/docs/GlimmerInDepth.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Content, Flex, Glimmer } from "@jobber/components-native";
+
+type GlimmerProps = ComponentProps<typeof Glimmer>;
+
+export function GlimmerInDepth(props: Partial<GlimmerProps>) {
+  return (
+    <Content spacing="none">
+      <Flex template={["shrink", "grow"]}>
+        <Glimmer size="larger" shape="circle" {...props} />
+        <Content spacing="none" childSpacing="small">
+          <Glimmer size="large" width="30%" />
+          <Glimmer size="small" width="40%" />
+        </Content>
+      </Flex>
+
+      <Content spacing="none" childSpacing="small">
+        <Glimmer size="small" width="80%" />
+        <Glimmer size="small" />
+        <Glimmer size="small" width="70%" />
+      </Content>
+
+      <Flex template={["shrink", "shrink", "shrink", "shrink"]}>
+        <Glimmer size="largest" shape="square" />
+        <Glimmer size="largest" shape="square" />
+        <Glimmer size="largest" shape="square" />
+        <Glimmer size="largest" shape="square" />
+      </Flex>
+    </Content>
+  );
+}

package/src/Glimmer/docs/index.ts

@@ -0,0 +1,2 @@
+export { GlimmerBasic } from "./GlimmerBasic";
+export { GlimmerInDepth } from "./GlimmerInDepth";

package/src/Heading/Heading.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Content, Divider, Heading } from "@jobber/components-native";
+import { Heading } from "@jobber/components-native";
+import { HeadingLevels } from "./docs";
 
 const meta = {
   title: "Components/Text and Typography/Heading",
@@ -11,23 +12,9 @@ const meta = {
   },
 } satisfies Meta<typeof Heading>;
 export default meta;
-type Story = StoryObj<Pick<React.ComponentProps<typeof Heading>, "level">>;
-
-const LevelsTemplate = (args: Story["args"]) => {
-  return (
-    <Content>
-      <Heading level={args?.level ?? "title"}>New client</Heading>
-      <Divider size="base" />
-      <Heading level="subtitle">Client details</Heading>
-      <Divider size="base" />
-      <Heading level="heading">Additional details</Heading>
-      <Divider size="base" />
-      <Heading level="subHeading">Receives SMS</Heading>
-    </Content>
-  );
-};
+type Story = StoryObj<Pick<ComponentProps<typeof Heading>, "level">>;
 
 export const Levels: Story = {
-  render: LevelsTemplate,
+  render: HeadingLevels,
   args: { level: "title" },
 };

package/src/Heading/docs/HeadingLevels.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Content, Divider, Heading } from "@jobber/components-native";
+
+type HeadingProps = ComponentProps<typeof Heading>;
+
+export function HeadingLevels(props: Partial<HeadingProps>) {
+  return (
+    <Content>
+      <Heading level="title" {...props}>
+        New client
+      </Heading>
+      <Divider size="base" />
+      <Heading level="subtitle">Client details</Heading>
+      <Divider size="base" />
+      <Heading level="heading">Additional details</Heading>
+      <Divider size="base" />
+      <Heading level="subHeading">Receives SMS</Heading>
+    </Content>
+  );
+}

package/src/Heading/docs/index.ts

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

package/src/Icon/Icon.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Icon } from "@jobber/components-native";
+import { IconBasic } from "./docs";
 
 const meta = {
   title: "Components/Images and Icons/Icon",
@@ -11,14 +12,10 @@ const meta = {
   },
 } satisfies Meta<typeof Icon>;
 export default meta;
-type Story = StoryObj<Pick<React.ComponentProps<typeof Icon>, "name">>;
-
-const BasicTemplate = (args: Story["args"]) => (
-  <Icon name={args?.name ?? "gift"} />
-);
+type Story = StoryObj<Pick<ComponentProps<typeof Icon>, "name">>;
 
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: IconBasic,
   args: {
     name: "gift",
   },

package/src/Icon/docs/IconBasic.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { Icon } from "@jobber/components-native";
+import type { IconProps } from "@jobber/components-native";
+
+export function IconBasic(props: Partial<IconProps>) {
+  return <Icon name="gift" {...props} />;
+}

package/src/Icon/docs/index.ts

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

package/src/IconButton/IconButton.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
 import { IconButton } from "@jobber/components-native";
+import { IconButtonBasic } from "./docs";
 
 const meta = {
   title: "Components/Actions/IconButton",
@@ -13,6 +14,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
+  render: IconButtonBasic,
   args: {
     accessibilityLabel: "New Job",
     name: "remove",

package/src/IconButton/docs/IconButtonBasic.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { action } from "storybook/actions";
+import { IconButton } from "@jobber/components-native";
+
+type IconButtonProps = ComponentProps<typeof IconButton>;
+
+export function IconButtonBasic(props: Partial<IconButtonProps>) {
+  return (
+    <IconButton
+      accessibilityLabel="New Job"
+      name="remove"
+      onPress={() => action("alert")("👍")}
+      {...props}
+    />
+  );
+}

package/src/IconButton/docs/index.ts

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

package/src/InputCurrency/InputCurrency.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { InputCurrency } from "@jobber/components-native";
+import { InputCurrencyBasic } from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputCurrency",
@@ -12,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
+  render: InputCurrencyBasic,
   args: {
     placeholder: "Unit Price",
   },

package/src/InputCurrency/docs/InputCurrencyBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { InputCurrency } from "@jobber/components-native";
+
+type InputCurrencyProps = ComponentProps<typeof InputCurrency>;
+
+export function InputCurrencyBasic(props: Partial<InputCurrencyProps>) {
+  return <InputCurrency placeholder="Unit Price" {...props} />;
+}

package/src/InputCurrency/docs/index.ts

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

package/src/InputDate/InputDate.stories.tsx

@@ -1,6 +1,11 @@
-import React, { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { InputDate } from "@jobber/components-native";
+import {
+  InputDateBasic,
+  InputDateEmptyValueLabel,
+  InputDateInvalid,
+} from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputDate",
@@ -11,20 +16,14 @@ const meta = {
   },
 } satisfies Meta<typeof InputDate>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof InputDate>>>;
-
-const BasicTemplate = (args: Story["args"]) => {
-  const [date, setDate] = useState(new Date("11/11/2011"));
-
-  return <InputDate {...args} value={date} onChange={setDate} />;
-};
+type Story = StoryObj<Partial<ComponentProps<typeof InputDate>>>;
 
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: InputDateBasic,
 };
 
 export const EmptyValueLabel: Story = {
-  render: BasicTemplate,
+  render: InputDateEmptyValueLabel,
   args: {
     placeholder: "Start date",
     emptyValueLabel: "Unscheduled",
@@ -32,7 +31,7 @@ export const EmptyValueLabel: Story = {
 };
 
 export const Invalid: Story = {
-  render: BasicTemplate,
+  render: InputDateInvalid,
   args: {
     placeholder: "Start date",
     invalid: "Start Date is required",

package/src/InputDate/docs/InputDateBasic.tsx

@@ -0,0 +1,9 @@
+import React, { useState } from "react";
+import { InputDate } from "@jobber/components-native";
+import type { InputDateProps } from "@jobber/components-native";
+
+export function InputDateBasic(props: Partial<InputDateProps>) {
+  const [date, setDate] = useState(new Date("11/11/2011"));
+
+  return <InputDate {...props} value={date} onChange={setDate} />;
+}

package/src/InputDate/docs/InputDateEmptyValueLabel.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { InputDate } from "@jobber/components-native";
+import type { InputDateProps } from "@jobber/components-native";
+
+export function InputDateEmptyValueLabel(props: Partial<InputDateProps>) {
+  const [date, setDate] = useState(new Date("11/11/2011"));
+
+  return (
+    <InputDate
+      placeholder="Start date"
+      emptyValueLabel="Unscheduled"
+      {...props}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}

package/src/InputDate/docs/InputDateInvalid.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { InputDate } from "@jobber/components-native";
+import type { InputDateProps } from "@jobber/components-native";
+
+export function InputDateInvalid(props: Partial<InputDateProps>) {
+  const [date, setDate] = useState(new Date("11/11/2011"));
+
+  return (
+    <InputDate
+      placeholder="Start date"
+      invalid="Start Date is required"
+      {...props}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}

package/src/InputDate/docs/index.ts

@@ -0,0 +1,3 @@
+export { InputDateBasic } from "./InputDateBasic";
+export { InputDateEmptyValueLabel } from "./InputDateEmptyValueLabel";
+export { InputDateInvalid } from "./InputDateInvalid";

package/src/InputEmail/InputEmail.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { InputEmail } from "@jobber/components-native";
+import { InputEmailBasic } from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputEmail",
@@ -11,14 +12,10 @@ const meta = {
   },
 } satisfies Meta<typeof InputEmail>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof InputEmail>>>;
-
-const BasicTemplate = (args: Story["args"]) => {
-  return <InputEmail {...args} />;
-};
+type Story = StoryObj<Partial<ComponentProps<typeof InputEmail>>>;
 
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: InputEmailBasic,
   args: {
     placeholder: "Enter your email",
   },

package/src/InputEmail/docs/InputEmailBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { InputEmail } from "@jobber/components-native";
+
+type InputEmailProps = ComponentProps<typeof InputEmail>;
+
+export function InputEmailBasic(props: Partial<InputEmailProps>) {
+  return <InputEmail placeholder="Enter your email" {...props} />;
+}

package/src/InputEmail/docs/index.ts

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

package/src/InputFieldWrapper/InputFieldWrapper.stories.tsx

@@ -1,6 +1,13 @@
-import React, { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { InputFieldWrapper, Text } from "@jobber/components-native";
+import { InputFieldWrapper } from "@jobber/components-native";
+import {
+  InputFieldWrapperBasic,
+  InputFieldWrapperClearable,
+  InputFieldWrapperDisabled,
+  InputFieldWrapperInvalid,
+  InputFieldWrapperPrefixAndSuffix,
+} from "./docs";
 
 const meta = {
   title: "Components/Private/InputFieldWrapper",
@@ -13,10 +20,11 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 type ClearableStory = StoryObj<
-  Pick<React.ComponentProps<typeof InputFieldWrapper>, "showClearAction">
+  Pick<ComponentProps<typeof InputFieldWrapper>, "showClearAction">
 >;
 
 export const Basic: Story = {
+  render: InputFieldWrapperBasic,
   args: {
     placeholder: "Enter a value in cents",
     prefix: { icon: "invoice" },
@@ -24,6 +32,7 @@ export const Basic: Story = {
 };
 
 export const PrefixAndSuffix: Story = {
+  render: InputFieldWrapperPrefixAndSuffix,
   args: {
     placeholder: "Invoice Total",
     prefix: { label: "$", icon: "invoice" },
@@ -32,6 +41,7 @@ export const PrefixAndSuffix: Story = {
 };
 
 export const Disabled: Story = {
+  render: InputFieldWrapperDisabled,
   args: {
     placeholder: "Enter a value in cents",
     prefix: { icon: "invoice" },
@@ -40,6 +50,7 @@ export const Disabled: Story = {
 };
 
 export const Invalid: Story = {
+  render: InputFieldWrapperInvalid,
   args: {
     placeholder: "Enter a value in cents",
     prefix: { icon: "invoice" },
@@ -47,27 +58,8 @@ export const Invalid: Story = {
   },
 };
 
-const ClearableTemplate = (
-  args: React.ComponentProps<typeof InputFieldWrapper>,
-) => {
-  const [value, setValue] = useState("cucumber");
-
-  function handleClear() {
-    setValue("");
-  }
-
-  return (
-    <InputFieldWrapper {...args} onClear={handleClear}>
-      <Text>{value}</Text>
-    </InputFieldWrapper>
-  );
-};
-
 export const Clearable: ClearableStory = {
-  render: args =>
-    ClearableTemplate({
-      showClearAction: args.showClearAction,
-    }),
+  render: InputFieldWrapperClearable,
   args: {
     showClearAction: true,
   },