@jobber/components-native 0.101.6 → 0.101.8

package/src/InputTime/InputTime.stories.tsx

@@ -1,13 +1,10 @@
-import React, { useState } 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 { InputTime } from "@jobber/components-native";
 import {
-  AtlantisOverlayProvider,
-  Content,
-  Form,
-  InputTime,
-} from "@jobber/components-native";
+  InputTimeBasic,
+  InputTimeEmptyValue,
+  InputTimeFormControlled,
+} from "./docs";
 
 const meta = {
   title: "Components/Forms and Inputs/InputTime",
@@ -34,74 +31,15 @@ interface NativeInputTimeFormStoryArgs {
 type ControlledStory = StoryObj<NativeInputTimeControlledStoryArgs>;
 type FormStory = StoryObj<NativeInputTimeFormStoryArgs>;
 
-const BasicTemplate = (args: ControlledStory["args"]) => {
-  const [time, setTime] = useState<Date | undefined>(
-    new Date("2023-07-21T16:36:34.873Z"),
-  );
-
-  return (
-    <InputTime
-      placeholder={args?.placeholder}
-      disabled={args?.disabled}
-      invalid={args?.invalid}
-      emptyValueLabel={args?.emptyValueLabel}
-      value={time}
-      onChange={newTime => setTime(newTime)}
-    />
-  );
-};
-
-const EmptyValueTemplate = (args: ControlledStory["args"]) => {
-  const [time, setTime] = useState<Date | undefined>(undefined);
-
-  return (
-    <InputTime
-      placeholder={args?.placeholder}
-      disabled={args?.disabled}
-      invalid={args?.invalid}
-      emptyValueLabel={args?.emptyValueLabel}
-      value={time}
-      onChange={newTime => setTime(newTime)}
-    />
-  );
-};
-
-const FormControlledTemplate = (args: FormStory["args"]) => (
-  <SafeAreaProvider>
-    <AtlantisOverlayProvider>
-      <Form
-        initialValues={{ startTime: new Date("2023-07-21T16:36:34.873Z") }}
-        onSubmit={value =>
-          new Promise(resolve => {
-            setTimeout(
-              () => resolve(action("alert")(JSON.stringify(value, undefined))),
-              1000,
-            );
-          })
-        }
-        onSubmitError={() => undefined}
-        onSubmitSuccess={() => undefined}
-      >
-        <Content>
-          <InputTime
-            name={args?.name ?? "startTime"}
-            placeholder={args?.placeholder}
-          />
-        </Content>
-      </Form>
-    </AtlantisOverlayProvider>
-  </SafeAreaProvider>
-);
-
 export const Basic: ControlledStory = {
-  render: BasicTemplate,
+  render: InputTimeBasic,
   args: {
     placeholder: "Start time",
   },
 };
 
 export const Disabled: ControlledStory = {
-  render: BasicTemplate,
+  render: InputTimeBasic,
   args: {
     placeholder: "Start time",
     disabled: true,
@@ -109,7 +47,7 @@ export const Disabled: ControlledStory = {
 };
 
 export const Invalid: ControlledStory = {
-  render: BasicTemplate,
+  render: InputTimeBasic,
   args: {
     placeholder: "Start time",
     invalid: "Start time is required",
@@ -117,7 +55,7 @@ export const Invalid: ControlledStory = {
 };
 
 export const FormControlled: FormStory = {
-  render: FormControlledTemplate,
+  render: InputTimeFormControlled,
   args: {
     name: "startTime",
     placeholder: "Created time",
@@ -125,7 +63,7 @@ export const FormControlled: FormStory = {
 };
 
 export const EmptyValue: ControlledStory = {
-  render: EmptyValueTemplate,
+  render: InputTimeEmptyValue,
   args: {
     placeholder: "Start time",
     emptyValueLabel: "Unscheduled",

package/src/InputTime/docs/InputTimeBasic.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import type { ComponentProps } from "react";
+import { InputTime } from "@jobber/components-native";
+
+type InputTimeProps = ComponentProps<typeof InputTime>;
+
+interface InputTimeControlledArgs {
+  placeholder?: InputTimeProps["placeholder"];
+  disabled?: InputTimeProps["disabled"];
+  invalid?: InputTimeProps["invalid"];
+  emptyValueLabel?: InputTimeProps["emptyValueLabel"];
+}
+
+export function InputTimeBasic(props: Partial<InputTimeControlledArgs>) {
+  const [time, setTime] = useState<Date | undefined>(
+    new Date("2023-07-21T16:36:34.873Z"),
+  );
+
+  return (
+    <InputTime
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      invalid={props.invalid}
+      emptyValueLabel={props.emptyValueLabel}
+      value={time}
+      onChange={newTime => setTime(newTime)}
+    />
+  );
+}

package/src/InputTime/docs/InputTimeEmptyValue.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import type { ComponentProps } from "react";
+import { InputTime } from "@jobber/components-native";
+
+type InputTimeProps = ComponentProps<typeof InputTime>;
+
+interface InputTimeControlledArgs {
+  placeholder?: InputTimeProps["placeholder"];
+  disabled?: InputTimeProps["disabled"];
+  invalid?: InputTimeProps["invalid"];
+  emptyValueLabel?: InputTimeProps["emptyValueLabel"];
+}
+
+export function InputTimeEmptyValue(props: Partial<InputTimeControlledArgs>) {
+  const [time, setTime] = useState<Date | undefined>(undefined);
+
+  return (
+    <InputTime
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      invalid={props.invalid}
+      emptyValueLabel={props.emptyValueLabel}
+      value={time}
+      onChange={newTime => setTime(newTime)}
+    />
+  );
+}

package/src/InputTime/docs/InputTimeFormControlled.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
+import {
+  AtlantisOverlayProvider,
+  Content,
+  Form,
+  InputTime,
+} from "@jobber/components-native";
+
+interface InputTimeFormStoryArgs {
+  name?: string;
+  placeholder?: string;
+}
+
+export function InputTimeFormControlled(
+  props: Partial<InputTimeFormStoryArgs>,
+) {
+  return (
+    <SafeAreaProvider>
+      <AtlantisOverlayProvider>
+        <Form
+          initialValues={{ startTime: new Date("2023-07-21T16:36:34.873Z") }}
+          onSubmit={value =>
+            new Promise(resolve => {
+              setTimeout(
+                () =>
+                  resolve(action("alert")(JSON.stringify(value, undefined))),
+                1000,
+              );
+            })
+          }
+          onSubmitError={() => undefined}
+          onSubmitSuccess={() => undefined}
+        >
+          <Content>
+            <InputTime
+              name={props.name ?? "startTime"}
+              placeholder={props.placeholder}
+            />
+          </Content>
+        </Form>
+      </AtlantisOverlayProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/InputTime/docs/index.ts

@@ -0,0 +1,3 @@
+export { InputTimeBasic } from "./InputTimeBasic";
+export { InputTimeFormControlled } from "./InputTimeFormControlled";
+export { InputTimeEmptyValue } from "./InputTimeEmptyValue";

package/src/ProgressBar/ProgressBar.stories.tsx

@@ -1,15 +1,11 @@
-import React, { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import {
-  Button,
-  Content,
-  Heading,
-  ProgressBar,
-} from "@jobber/components-native";
+import { ProgressBar } from "@jobber/components-native";
+import { ProgressBarBasic, ProgressBarWithHeader } from "./docs";
 
 type ProgressBarStoryArgs = Partial<
   Pick<
-    React.ComponentProps<typeof ProgressBar>,
+    ComponentProps<typeof ProgressBar>,
     "current" | "total" | "inProgress" | "variation" | "size"
   >
 >;
@@ -28,15 +24,7 @@ export default meta;
 type Story = StoryObj<ProgressBarStoryArgs>;
 
 export const Basic: Story = {
-  render: args => (
-    <ProgressBar
-      current={args?.current ?? 1}
-      inProgress={args?.inProgress}
-      size={args?.size}
-      total={args?.total ?? 5}
-      variation={args?.variation}
-    />
-  ),
+  render: ProgressBarBasic,
   args: {
     total: 5,
     current: 1,
@@ -45,35 +33,7 @@ export const Basic: Story = {
 };
 
 export const WithHeader: Story = {
-  render: args => {
-    const [step, setStep] = useState(1);
-    const totalSteps = 6;
-
-    return (
-      <ProgressBar
-        current={step}
-        inProgress={args?.inProgress}
-        size={args?.size}
-        total={totalSteps}
-        variation={args?.variation}
-        header={
-          <>
-            <Content>
-              <Heading level="heading">Upload progress</Heading>
-            </Content>
-            <Button
-              label="Step Back"
-              onPress={() => setStep(Math.max(0, step - 1))}
-            />
-            <Button
-              label="Step Forward"
-              onPress={() => setStep(Math.min(totalSteps, step + 1))}
-            />
-          </>
-        }
-      />
-    );
-  },
+  render: ProgressBarWithHeader,
   args: {
     total: 6,
     current: 1,

package/src/ProgressBar/docs/ProgressBarBasic.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ProgressBar } from "@jobber/components-native";
+import type { ProgressBarProps } from "@jobber/components-native";
+
+type ProgressBarStoryArgs = Partial<
+  Pick<
+    ProgressBarProps,
+    "current" | "total" | "inProgress" | "variation" | "size"
+  >
+>;
+
+export function ProgressBarBasic(props: ProgressBarStoryArgs) {
+  return (
+    <ProgressBar
+      current={props.current ?? 1}
+      inProgress={props.inProgress}
+      size={props.size}
+      total={props.total ?? 5}
+      variation={props.variation}
+    />
+  );
+}

package/src/ProgressBar/docs/ProgressBarWithHeader.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import {
+  Button,
+  Content,
+  Heading,
+  ProgressBar,
+} from "@jobber/components-native";
+import type { ProgressBarProps } from "@jobber/components-native";
+
+type ProgressBarStoryArgs = Partial<
+  Pick<
+    ProgressBarProps,
+    "current" | "total" | "inProgress" | "variation" | "size"
+  >
+>;
+
+export function ProgressBarWithHeader(props: ProgressBarStoryArgs) {
+  const [step, setStep] = useState(1);
+  const totalSteps = 6;
+
+  return (
+    <ProgressBar
+      current={step}
+      inProgress={props.inProgress}
+      size={props.size}
+      total={totalSteps}
+      variation={props.variation}
+      header={
+        <>
+          <Content>
+            <Heading level="heading">Upload progress</Heading>
+          </Content>
+          <Button
+            label="Step Back"
+            onPress={() => setStep(Math.max(0, step - 1))}
+          />
+          <Button
+            label="Step Forward"
+            onPress={() => setStep(Math.min(totalSteps, step + 1))}
+          />
+        </>
+      }
+    />
+  );
+}

package/src/ProgressBar/docs/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBarBasic } from "./ProgressBarBasic";
+export { ProgressBarWithHeader } from "./ProgressBarWithHeader";

package/src/Select/Select.stories.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Option, Select } from "@jobber/components-native";
+import { Select } from "@jobber/components-native";
+import { SelectBasic, SelectInitialValue } from "./docs";
 
 type SelectStoryArgs = Pick<
-  React.ComponentProps<typeof Select>,
+  ComponentProps<typeof Select>,
   "label" | "defaultValue"
 >;
 
@@ -21,27 +22,14 @@ export default meta;
 type Story = StoryObj<SelectStoryArgs>;
 
 export const Basic: Story = {
-  render: args => (
-    <Select label={args?.label ?? "Favorite number"}>
-      <Option value="1">1</Option>
-      <Option value="2">2</Option>
-    </Select>
-  ),
+  render: SelectBasic,
   args: {
     label: "Favorite number",
   },
 };
 
 export const InitialValue: Story = {
-  render: args => (
-    <Select
-      label={args?.label ?? "Favorite number"}
-      defaultValue={args?.defaultValue ?? "2"}
-    >
-      <Option value="1">1</Option>
-      <Option value="2">2</Option>
-    </Select>
-  ),
+  render: SelectInitialValue,
   args: {
     label: "Favorite number",
     defaultValue: "2",

package/src/Select/docs/SelectBasic.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Option, Select } from "@jobber/components-native";
+import type { SelectProps } from "@jobber/components-native";
+
+type SelectStoryArgs = Pick<SelectProps, "label" | "defaultValue">;
+
+export function SelectBasic(props: Partial<SelectStoryArgs>) {
+  return (
+    <Select label={props.label ?? "Favorite number"} {...props}>
+      <Option value="1">1</Option>
+      <Option value="2">2</Option>
+    </Select>
+  );
+}

package/src/Select/docs/SelectInitialValue.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Option, Select } from "@jobber/components-native";
+import type { SelectProps } from "@jobber/components-native";
+
+type SelectStoryArgs = Pick<SelectProps, "label" | "defaultValue">;
+
+export function SelectInitialValue(props: Partial<SelectStoryArgs>) {
+  return (
+    <Select
+      label={props.label ?? "Favorite number"}
+      defaultValue={props.defaultValue ?? "2"}
+      {...props}
+    >
+      <Option value="1">1</Option>
+      <Option value="2">2</Option>
+    </Select>
+  );
+}

package/src/Select/docs/index.ts

@@ -0,0 +1,2 @@
+export { SelectBasic } from "./SelectBasic";
+export { SelectInitialValue } from "./SelectInitialValue";

package/src/StatusLabel/StatusLabel.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { StatusLabel } from "@jobber/components-native";
+import { StatusLabelBasic } from "./docs";
 
 const meta = {
   title: "Components/Status and Feedback/StatusLabel",
@@ -15,6 +16,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
+  render: StatusLabelBasic,
   args: {
     text: "Success",
     alignment: "start",

package/src/StatusLabel/docs/StatusLabelBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { StatusLabel } from "@jobber/components-native";
+
+type StatusLabelProps = ComponentProps<typeof StatusLabel>;
+
+export function StatusLabelBasic(props: Partial<StatusLabelProps>) {
+  return <StatusLabel text="Success" alignment="start" {...props} />;
+}

package/src/StatusLabel/docs/index.ts

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

package/src/Switch/Switch.stories.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Button, Content, Switch } from "@jobber/components-native";
+import { Switch } from "@jobber/components-native";
+import { SwitchBasic, SwitchControlled } from "./docs";
 
-type SwitchStoryArgs = Pick<React.ComponentProps<typeof Switch>, "label">;
+type SwitchStoryArgs = Pick<ComponentProps<typeof Switch>, "label">;
 
 const meta = {
   title: "Components/Selections/Switch",
@@ -18,27 +19,14 @@ export default meta;
 type Story = StoryObj<SwitchStoryArgs>;
 
 export const Basic: Story = {
-  render: args => <Switch label={args?.label ?? "Toggle example"} />,
+  render: SwitchBasic,
   args: {
     label: "Toggle example",
   },
 };
 
 export const Controlled: Story = {
-  render: args => {
-    const [value, setValue] = useState(false);
-
-    return (
-      <Content>
-        <Button onPress={() => setValue(!value)} label="Toggle Switch" />
-        <Switch
-          label={args?.label ?? "Controlled Toggle example"}
-          value={value}
-          onValueChange={setValue}
-        />
-      </Content>
-    );
-  },
+  render: SwitchControlled,
   args: {
     label: "Controlled Toggle example",
   },

package/src/Switch/docs/SwitchBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Switch } from "@jobber/components-native";
+import type { SwitchProps } from "@jobber/components-native";
+
+type SwitchStoryArgs = Pick<SwitchProps, "label">;
+
+export function SwitchBasic(props: Partial<SwitchStoryArgs>) {
+  return <Switch label={props.label ?? "Toggle example"} {...props} />;
+}

package/src/Switch/docs/SwitchControlled.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { Button, Content, Switch } from "@jobber/components-native";
+import type { SwitchProps } from "@jobber/components-native";
+
+type SwitchStoryArgs = Pick<SwitchProps, "label">;
+
+export function SwitchControlled(props: Partial<SwitchStoryArgs>) {
+  const [value, setValue] = useState(false);
+
+  return (
+    <Content>
+      <Button onPress={() => setValue(!value)} label="Toggle Switch" />
+      <Switch
+        label={props.label ?? "Controlled Toggle example"}
+        {...props}
+        value={value}
+        onValueChange={setValue}
+      />
+    </Content>
+  );
+}

package/src/Switch/docs/index.ts

@@ -0,0 +1,2 @@
+export { SwitchBasic } from "./SwitchBasic";
+export { SwitchControlled } from "./SwitchControlled";

package/src/Text/Text.stories.tsx

@@ -1,9 +1,15 @@
-import React from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Text } from "@jobber/components-native";
+import {
+  TextBasic,
+  TextMultiLevelNesting,
+  TextNestedBold,
+  TextNestedMixedStyles,
+} from "./docs";
 
 type TextStoryArgs = Pick<
-  React.ComponentProps<typeof Text>,
+  ComponentProps<typeof Text>,
   "children" | "level" | "reverseTheme"
 >;
 
@@ -20,16 +26,8 @@ export default meta;
 
 type Story = StoryObj<TextStoryArgs>;
 
-const BasicTemplate = (args: Story["args"]) => {
-  return (
-    <Text level={args?.level} reverseTheme={args?.reverseTheme}>
-      {args?.children}
-    </Text>
-  );
-};
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: TextBasic,
   args: {
     children:
       '"640K is more memory than anyone will ever need on a computer" - Not Bill Gates',
@@ -37,7 +35,7 @@ export const Basic: Story = {
 };
 
 export const SupportingText: Story = {
-  render: BasicTemplate,
+  render: TextBasic,
   args: {
     children:
       "Supporting Text should be used to supplement additional, more important content",
@@ -46,7 +44,7 @@ export const SupportingText: Story = {
 };
 
 export const ReverseTheme: Story = {
-  render: BasicTemplate,
+  render: TextBasic,
   args: {
     children: "Changes Text color for display on a dark background",
     reverseTheme: true,
@@ -57,30 +55,13 @@ export const ReverseTheme: Story = {
 };
 
 export const NestedBold: Story = {
-  render: () => (
-    <Text>
-      This is <Text emphasis="strong">bold</Text> inside a sentence.
-    </Text>
-  ),
+  render: TextNestedBold,
 };
 
 export const NestedMixedStyles: Story = {
-  render: () => (
-    <Text>
-      Start, <Text italic>italic segment</Text>, and a
-      <Text emphasis="strong"> bold segment</Text>.
-    </Text>
-  ),
+  render: TextNestedMixedStyles,
 };
 
 export const MultiLevelNesting: Story = {
-  render: () => (
-    <Text>
-      Level 1{" "}
-      <Text>
-        contains <Text emphasis="strong">Level 2</Text>
-      </Text>{" "}
-      done.
-    </Text>
-  ),
+  render: TextMultiLevelNesting,
 };

package/src/Text/docs/TextBasic.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Text } from "@jobber/components-native";
+
+type TextStoryArgs = Pick<
+  ComponentProps<typeof Text>,
+  "children" | "level" | "reverseTheme"
+>;
+
+export function TextBasic(props: Partial<TextStoryArgs>) {
+  return (
+    <Text level={props.level} reverseTheme={props.reverseTheme}>
+      {props.children ??
+        '"640K is more memory than anyone will ever need on a computer" - Not Bill Gates'}
+    </Text>
+  );
+}