@jobber/components-native 0.101.6 → 0.101.8

package/src/InputFieldWrapper/docs/InputFieldWrapperBasic.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { InputFieldWrapper } from "@jobber/components-native";
+import type { InputFieldWrapperProps } from "@jobber/components-native";
+
+export function InputFieldWrapperBasic(props: Partial<InputFieldWrapperProps>) {
+  return (
+    <InputFieldWrapper
+      placeholder="Enter a value in cents"
+      prefix={{ icon: "invoice" }}
+      {...props}
+    >
+      {props.children}
+    </InputFieldWrapper>
+  );
+}

package/src/InputFieldWrapper/docs/InputFieldWrapperClearable.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { InputFieldWrapper, Text } from "@jobber/components-native";
+import type { InputFieldWrapperProps } from "@jobber/components-native";
+
+type ClearableStoryProps = Pick<InputFieldWrapperProps, "showClearAction">;
+
+export function InputFieldWrapperClearable(
+  props: Partial<ClearableStoryProps>,
+) {
+  const [value, setValue] = useState("cucumber");
+
+  function handleClear() {
+    setValue("");
+  }
+
+  return (
+    <InputFieldWrapper
+      showClearAction={props.showClearAction}
+      onClear={handleClear}
+    >
+      <Text>{value}</Text>
+    </InputFieldWrapper>
+  );
+}

package/src/InputFieldWrapper/docs/InputFieldWrapperDisabled.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { InputFieldWrapper } from "@jobber/components-native";
+import type { InputFieldWrapperProps } from "@jobber/components-native";
+
+export function InputFieldWrapperDisabled(
+  props: Partial<InputFieldWrapperProps>,
+) {
+  return (
+    <InputFieldWrapper
+      placeholder="Enter a value in cents"
+      prefix={{ icon: "invoice" }}
+      disabled={true}
+      {...props}
+    >
+      {props.children}
+    </InputFieldWrapper>
+  );
+}

package/src/InputFieldWrapper/docs/InputFieldWrapperInvalid.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { InputFieldWrapper } from "@jobber/components-native";
+import type { InputFieldWrapperProps } from "@jobber/components-native";
+
+export function InputFieldWrapperInvalid(
+  props: Partial<InputFieldWrapperProps>,
+) {
+  return (
+    <InputFieldWrapper
+      placeholder="Enter a value in cents"
+      prefix={{ icon: "invoice" }}
+      invalid={true}
+      {...props}
+    >
+      {props.children}
+    </InputFieldWrapper>
+  );
+}

package/src/InputFieldWrapper/docs/InputFieldWrapperPrefixAndSuffix.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { InputFieldWrapper } from "@jobber/components-native";
+import type { InputFieldWrapperProps } from "@jobber/components-native";
+
+export function InputFieldWrapperPrefixAndSuffix(
+  props: Partial<InputFieldWrapperProps>,
+) {
+  return (
+    <InputFieldWrapper
+      placeholder="Invoice Total"
+      prefix={{ label: "$", icon: "invoice" }}
+      placeholderMode="mini"
+      {...props}
+    >
+      {props.children}
+    </InputFieldWrapper>
+  );
+}

package/src/InputFieldWrapper/docs/index.ts

@@ -0,0 +1,5 @@
+export { InputFieldWrapperBasic } from "./InputFieldWrapperBasic";
+export { InputFieldWrapperPrefixAndSuffix } from "./InputFieldWrapperPrefixAndSuffix";
+export { InputFieldWrapperDisabled } from "./InputFieldWrapperDisabled";
+export { InputFieldWrapperInvalid } from "./InputFieldWrapperInvalid";
+export { InputFieldWrapperClearable } from "./InputFieldWrapperClearable";

package/src/InputNumber/InputNumber.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 { InputNumber } from "@jobber/components-native";
+import { InputNumberBasic, InputNumberInvalid } from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputNumber",
@@ -11,12 +12,10 @@ const meta = {
   },
 } satisfies Meta<typeof InputNumber>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof InputNumber>>>;
-
-const BasicTemplate = (args: Story["args"]) => <InputNumber {...args} />;
+type Story = StoryObj<Partial<ComponentProps<typeof InputNumber>>>;
 
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: InputNumberBasic,
   args: {
     placeholder: "Quantity",
     value: 12,
@@ -24,7 +23,7 @@ export const Basic: Story = {
 };
 
 export const Invalid: Story = {
-  render: BasicTemplate,
+  render: InputNumberInvalid,
   args: {
     placeholder: "Area",
     invalid: "Enter a number",

package/src/InputNumber/docs/InputNumberBasic.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { InputNumber } from "@jobber/components-native";
+import type { InputNumberProps } from "@jobber/components-native";
+
+export function InputNumberBasic(props: Partial<InputNumberProps>) {
+  return <InputNumber placeholder="Quantity" value={12} {...props} />;
+}

package/src/InputNumber/docs/InputNumberInvalid.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { InputNumber } from "@jobber/components-native";
+import type { InputNumberProps } from "@jobber/components-native";
+
+export function InputNumberInvalid(props: Partial<InputNumberProps>) {
+  return (
+    <InputNumber
+      placeholder="Area"
+      invalid="Enter a number"
+      suffix={{ label: "meters" }}
+      clearable="never"
+      {...props}
+    />
+  );
+}

package/src/InputNumber/docs/index.ts

@@ -0,0 +1,2 @@
+export { InputNumberBasic } from "./InputNumberBasic";
+export { InputNumberInvalid } from "./InputNumberInvalid";

package/src/InputPassword/InputPassword.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 { InputPassword } from "@jobber/components-native";
+import { InputPasswordBasic } from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputPassword",
@@ -11,12 +12,10 @@ const meta = {
   },
 } satisfies Meta<typeof InputPassword>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof InputPassword>>>;
-
-const BasicTemplate = (args: Story["args"]) => <InputPassword {...args} />;
+type Story = StoryObj<Partial<ComponentProps<typeof InputPassword>>>;
 
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: InputPasswordBasic,
   args: {
     placeholder: "Password",
   },

package/src/InputPassword/docs/InputPasswordBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { InputPassword } from "@jobber/components-native";
+
+type InputPasswordProps = ComponentProps<typeof InputPassword>;
+
+export function InputPasswordBasic(props: Partial<InputPasswordProps>) {
+  return <InputPassword placeholder="Password" {...props} />;
+}

package/src/InputPassword/docs/index.ts

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

package/src/InputPressable/InputPressable.stories.tsx

@@ -1,7 +1,14 @@
-import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { action } from "storybook/actions";
 import { InputPressable } from "@jobber/components-native";
+import {
+  InputPressableBasic,
+  InputPressableClearable,
+  InputPressableClickableSuffix,
+  InputPressableDisabled,
+  InputPressableInvalid,
+  InputPressablePrefixOrSuffix,
+} from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputPressable",
@@ -13,17 +20,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const ClearableTemplate = (args: Story["args"]) => {
-  const [value, setValue] = useState("Cucumber");
-
-  function handleClear() {
-    setValue("");
-  }
-
-  return <InputPressable {...args} value={value} onClear={handleClear} />;
-};
-
 export const Basic: Story = {
+  render: InputPressableBasic,
   args: {
     placeholder: "Placeholder",
     value: "Mango",
@@ -32,6 +30,7 @@ export const Basic: Story = {
 };
 
 export const PrefixOrSuffix: Story = {
+  render: InputPressablePrefixOrSuffix,
   args: {
     placeholder: "Selected date",
     value: "2021-01-01",
@@ -41,17 +40,11 @@ export const PrefixOrSuffix: Story = {
 };
 
 export const ClickableSuffix: Story = {
-  render: () => (
-    <InputPressable
-      placeholder="Placeholder"
-      value="input value"
-      onPress={() => action("alert")("👍")}
-      suffix={{ icon: "dropdown", onPress: () => action("alert")("👍") }}
-    />
-  ),
+  render: InputPressableClickableSuffix,
 };
 
 export const Disabled: Story = {
+  render: InputPressableDisabled,
   args: {
     placeholder: "Favourite fruit",
     disabled: true,
@@ -60,6 +53,7 @@ export const Disabled: Story = {
 };
 
 export const Invalid: Story = {
+  render: InputPressableInvalid,
   args: {
     placeholder: "Favourite fruit",
     value: "Cucumber",
@@ -68,7 +62,7 @@ export const Invalid: Story = {
 };
 
 export const Clearable: Story = {
-  render: ClearableTemplate,
+  render: InputPressableClearable,
   args: {
     placeholder: "Favourite fruit",
     clearable: "always",

package/src/InputPressable/docs/InputPressableBasic.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { action } from "storybook/actions";
+import { InputPressable } from "@jobber/components-native";
+
+type InputPressableProps = ComponentProps<typeof InputPressable>;
+
+export function InputPressableBasic(props: Partial<InputPressableProps>) {
+  return (
+    <InputPressable
+      placeholder="Placeholder"
+      value="Mango"
+      onPress={() => action("alert")("👍")}
+      {...props}
+    />
+  );
+}

package/src/InputPressable/docs/InputPressableClearable.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import type { ComponentProps } from "react";
+import { InputPressable } from "@jobber/components-native";
+
+type InputPressableProps = ComponentProps<typeof InputPressable>;
+
+export function InputPressableClearable(props: Partial<InputPressableProps>) {
+  const [value, setValue] = useState("Cucumber");
+
+  function handleClear() {
+    setValue("");
+  }
+
+  return (
+    <InputPressable
+      placeholder="Favourite fruit"
+      clearable="always"
+      {...props}
+      value={value}
+      onClear={handleClear}
+    />
+  );
+}

package/src/InputPressable/docs/InputPressableClickableSuffix.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { action } from "storybook/actions";
+import { InputPressable } from "@jobber/components-native";
+
+export function InputPressableClickableSuffix() {
+  return (
+    <InputPressable
+      placeholder="Placeholder"
+      value="input value"
+      onPress={() => action("alert")("👍")}
+      suffix={{ icon: "dropdown", onPress: () => action("alert")("👍") }}
+    />
+  );
+}

package/src/InputPressable/docs/InputPressableDisabled.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { InputPressable } from "@jobber/components-native";
+
+type InputPressableProps = ComponentProps<typeof InputPressable>;
+
+export function InputPressableDisabled(props: Partial<InputPressableProps>) {
+  return (
+    <InputPressable
+      placeholder="Favourite fruit"
+      disabled={true}
+      value="Mango"
+      {...props}
+    />
+  );
+}

package/src/InputPressable/docs/InputPressableInvalid.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { InputPressable } from "@jobber/components-native";
+
+type InputPressableProps = ComponentProps<typeof InputPressable>;
+
+export function InputPressableInvalid(props: Partial<InputPressableProps>) {
+  return (
+    <InputPressable
+      placeholder="Favourite fruit"
+      value="Cucumber"
+      invalid="That isn't a fruit!"
+      {...props}
+    />
+  );
+}

package/src/InputPressable/docs/InputPressablePrefixOrSuffix.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { action } from "storybook/actions";
+import { InputPressable } from "@jobber/components-native";
+
+type InputPressableProps = ComponentProps<typeof InputPressable>;
+
+export function InputPressablePrefixOrSuffix(
+  props: Partial<InputPressableProps>,
+) {
+  return (
+    <InputPressable
+      placeholder="Selected date"
+      value="2021-01-01"
+      prefix={{ icon: "calendar" }}
+      onPress={() => action("alert")("📅")}
+      {...props}
+    />
+  );
+}

package/src/InputPressable/docs/index.ts

@@ -0,0 +1,6 @@
+export { InputPressableBasic } from "./InputPressableBasic";
+export { InputPressablePrefixOrSuffix } from "./InputPressablePrefixOrSuffix";
+export { InputPressableClickableSuffix } from "./InputPressableClickableSuffix";
+export { InputPressableDisabled } from "./InputPressableDisabled";
+export { InputPressableInvalid } from "./InputPressableInvalid";
+export { InputPressableClearable } from "./InputPressableClearable";

package/src/InputSearch/InputSearch.stories.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { action } from "storybook/actions";
 import { InputSearch } from "@jobber/components-native";
+import { InputSearchBasic } from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputSearch",
@@ -14,25 +14,11 @@ const meta = {
 export default meta;
 
 type Story = StoryObj<
-  Pick<React.ComponentProps<typeof InputSearch>, "placeholder" | "prefix">
+  Pick<ComponentProps<typeof InputSearch>, "placeholder" | "prefix">
 >;
 
-const BasicTemplate = (args: Story["args"]) => {
-  const [value, setValue] = useState("");
-
-  return (
-    <InputSearch
-      placeholder={args?.placeholder}
-      prefix={args?.prefix}
-      value={value}
-      onChange={newValue => setValue(newValue)}
-      onDebouncedChange={() => action("alert")(value)}
-    />
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: InputSearchBasic,
   args: {
     placeholder: "Search",
     prefix: {

package/src/InputSearch/docs/InputSearchBasic.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { action } from "storybook/actions";
+import { InputSearch } from "@jobber/components-native";
+import type { InputSearchProps } from "@jobber/components-native";
+
+type InputSearchStoryArgs = Pick<InputSearchProps, "placeholder" | "prefix">;
+
+export function InputSearchBasic(props: Partial<InputSearchStoryArgs>) {
+  const [value, setValue] = useState("");
+
+  return (
+    <InputSearch
+      placeholder={props.placeholder}
+      prefix={props.prefix}
+      value={value}
+      onChange={newValue => setValue(newValue)}
+      onDebouncedChange={() => action("alert")(value)}
+    />
+  );
+}

package/src/InputSearch/docs/index.ts

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

package/src/InputText/InputText.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 { Button, InputText } from "@jobber/components-native";
+import { InputText } from "@jobber/components-native";
+import { InputTextBasic, InputTextInvalid, InputTextToolbar } from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputText",
@@ -11,14 +12,10 @@ const meta = {
   },
 } satisfies Meta<typeof InputText>;
 export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof InputText>>>;
-
-const BasicTemplate = (args: Story["args"]) => {
-  return <InputText {...args} />;
-};
+type Story = StoryObj<Partial<ComponentProps<typeof InputText>>>;
 
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: InputTextBasic,
   args: {
     name: "age",
     placeholder: "Age in words",
@@ -26,7 +23,7 @@ export const Basic: Story = {
 };
 
 export const Invalid: Story = {
-  render: BasicTemplate,
+  render: InputTextInvalid,
   args: {
     placeholder: "What is your favorite fruit?",
     defaultValue: "Tomato",
@@ -35,27 +32,8 @@ export const Invalid: Story = {
 };
 
 export const Toolbar: Story = {
-  render: BasicTemplate,
+  render: InputTextToolbar,
   args: {
     placeholder: "Write your message",
-    toolbar: (
-      <>
-        <Button
-          label="Rewrite"
-          size="small"
-          icon="sparkles"
-          variation="cancel"
-          fullWidth={false}
-        />
-        <Button
-          accessibilityLabel="Undo"
-          size="small"
-          icon="redo"
-          type="tertiary"
-          variation="cancel"
-          fullWidth={false}
-        />
-      </>
-    ),
   },
 };

package/src/InputText/docs/InputTextBasic.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { InputText } from "@jobber/components-native";
+import type { InputTextProps } from "@jobber/components-native";
+
+export function InputTextBasic(props: Partial<InputTextProps>) {
+  return <InputText name="age" placeholder="Age in words" {...props} />;
+}

package/src/InputText/docs/InputTextInvalid.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { InputText } from "@jobber/components-native";
+import type { InputTextProps } from "@jobber/components-native";
+
+export function InputTextInvalid(props: Partial<InputTextProps>) {
+  return (
+    <InputText
+      placeholder="What is your favorite fruit?"
+      defaultValue="Tomato"
+      invalid="That's not a fruit"
+      {...props}
+    />
+  );
+}

package/src/InputText/docs/InputTextToolbar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Button, InputText } from "@jobber/components-native";
+import type { InputTextProps } from "@jobber/components-native";
+
+export function InputTextToolbar(props: Partial<InputTextProps>) {
+  return (
+    <InputText
+      placeholder="Write your message"
+      toolbar={
+        <>
+          <Button
+            label="Rewrite"
+            size="small"
+            icon="sparkles"
+            variation="cancel"
+            fullWidth={false}
+          />
+          <Button
+            accessibilityLabel="Undo"
+            size="small"
+            icon="redo"
+            type="tertiary"
+            variation="cancel"
+            fullWidth={false}
+          />
+        </>
+      }
+      {...props}
+    />
+  );
+}

package/src/InputText/docs/index.ts

@@ -0,0 +1,3 @@
+export { InputTextBasic } from "./InputTextBasic";
+export { InputTextInvalid } from "./InputTextInvalid";
+export { InputTextToolbar } from "./InputTextToolbar";