@jobber/components-native 0.101.7 → 0.101.8

package/src/Text/docs/TextMultiLevelNesting.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Text } from "@jobber/components-native";
+
+export function TextMultiLevelNesting() {
+  return (
+    <Text>
+      Level 1{" "}
+      <Text>
+        contains <Text emphasis="strong">Level 2</Text>
+      </Text>{" "}
+      done.
+    </Text>
+  );
+}

package/src/Text/docs/TextNestedBold.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from "@jobber/components-native";
+
+export function TextNestedBold() {
+  return (
+    <Text>
+      This is <Text emphasis="strong">bold</Text> inside a sentence.
+    </Text>
+  );
+}

package/src/Text/docs/TextNestedMixedStyles.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Text } from "@jobber/components-native";
+
+export function TextNestedMixedStyles() {
+  return (
+    <Text>
+      Start, <Text italic>italic segment</Text>, and a
+      <Text emphasis="strong"> bold segment</Text>.
+    </Text>
+  );
+}

package/src/Text/docs/index.ts

@@ -0,0 +1,4 @@
+export { TextBasic } from "./TextBasic";
+export { TextNestedBold } from "./TextNestedBold";
+export { TextNestedMixedStyles } from "./TextNestedMixedStyles";
+export { TextMultiLevelNesting } from "./TextMultiLevelNesting";

package/src/TextList/TextList.stories.tsx

@@ -1,5 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { TextList } from "@jobber/components-native";
+import {
+  TextListBasic,
+  TextListChildSpacing,
+  TextListEmphasis,
+  TextListLevels,
+  TextListSpacing,
+} from "./docs";
 
 const meta = {
   title: "Components/Lists and Tables/TextList",
@@ -12,12 +19,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
+  render: TextListBasic,
   args: {
     items: ["Item uno", "Item dos", "Item tres"],
   },
 };
 
 export const Levels: Story = {
+  render: TextListLevels,
   args: {
     items: [
       "This is the first item",
@@ -29,6 +38,7 @@ export const Levels: Story = {
 };
 
 export const Emphasis: Story = {
+  render: TextListEmphasis,
   args: {
     items: [
       "This is the first item",
@@ -40,6 +50,7 @@ export const Emphasis: Story = {
 };
 
 export const Spacing: Story = {
+  render: TextListSpacing,
   args: {
     items: [
       "This is the first item",
@@ -51,6 +62,7 @@ export const Spacing: Story = {
 };
 
 export const ChildSpacing: Story = {
+  render: TextListChildSpacing,
   args: {
     items: [
       "This is the first item",

package/src/TextList/docs/TextListBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { TextList } from "@jobber/components-native";
+
+type TextListProps = ComponentProps<typeof TextList>;
+
+export function TextListBasic(props: Partial<TextListProps>) {
+  return <TextList items={["Item uno", "Item dos", "Item tres"]} {...props} />;
+}

package/src/TextList/docs/TextListChildSpacing.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { TextList } from "@jobber/components-native";
+
+type TextListProps = ComponentProps<typeof TextList>;
+
+export function TextListChildSpacing(props: Partial<TextListProps>) {
+  return (
+    <TextList
+      items={[
+        "This is the first item",
+        "This is the second item",
+        "This is the third item",
+      ]}
+      childSpacing="large"
+      {...props}
+    />
+  );
+}

package/src/TextList/docs/TextListEmphasis.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { TextList } from "@jobber/components-native";
+
+type TextListProps = ComponentProps<typeof TextList>;
+
+export function TextListEmphasis(props: Partial<TextListProps>) {
+  return (
+    <TextList
+      items={[
+        "This is the first item",
+        "This is the second item",
+        "This is the third item",
+      ]}
+      emphasis="strong"
+      {...props}
+    />
+  );
+}

package/src/TextList/docs/TextListLevels.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { TextList } from "@jobber/components-native";
+
+type TextListProps = ComponentProps<typeof TextList>;
+
+export function TextListLevels(props: Partial<TextListProps>) {
+  return (
+    <TextList
+      items={[
+        "This is the first item",
+        "This is the second item",
+        "This is the third item",
+      ]}
+      level="textSupporting"
+      {...props}
+    />
+  );
+}

package/src/TextList/docs/TextListSpacing.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { TextList } from "@jobber/components-native";
+
+type TextListProps = ComponentProps<typeof TextList>;
+
+export function TextListSpacing(props: Partial<TextListProps>) {
+  return (
+    <TextList
+      items={[
+        "This is the first item",
+        "This is the second item",
+        "This is the third item",
+      ]}
+      spacing="large"
+      {...props}
+    />
+  );
+}

package/src/TextList/docs/index.ts

@@ -0,0 +1,5 @@
+export { TextListBasic } from "./TextListBasic";
+export { TextListLevels } from "./TextListLevels";
+export { TextListEmphasis } from "./TextListEmphasis";
+export { TextListSpacing } from "./TextListSpacing";
+export { TextListChildSpacing } from "./TextListChildSpacing";

package/src/ThumbnailList/ThumbnailList.stories.tsx

@@ -1,10 +1,6 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import {
-  AtlantisOverlayProvider,
-  ThumbnailList,
-} from "@jobber/components-native";
+import { ThumbnailList } from "@jobber/components-native";
+import { ThumbnailListBasic } from "./docs";
 
 const meta = {
   title: "Components/Images and Icons/ThumbnailList",
@@ -17,63 +13,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const BasicTemplate = (args: Story["args"]) => (
-  <SafeAreaProvider>
-    <AtlantisOverlayProvider>
-      <ThumbnailList {...args} />
-    </AtlantisOverlayProvider>
-  </SafeAreaProvider>
-);
-
-const files = [
-  {
-    contentType: "image/png",
-    fileName: "image.png",
-    thumbnailUrl: "https://picsum.photos/250",
-    url: "https://picsum.photos/250",
-    fileSize: 1024,
-  },
-  {
-    contentType: "image/png",
-    fileName: "atlantis.png",
-    thumbnailUrl: "https://picsum.photos/250",
-    url: "https://picsum.photos/250",
-    fileSize: 1024,
-  },
-  {
-    contentType: "image/png",
-    fileName: "components.png",
-    thumbnailUrl: "https://picsum.photos/250",
-    url: "https://picsum.photos/250",
-    fileSize: 1024,
-  },
-  {
-    contentType: "image/png",
-    fileName: "storybook.png",
-    thumbnailUrl: "https://picsum.photos/250",
-    url: "https://picsum.photos/250",
-    fileSize: 1024,
-  },
-  {
-    contentType: "image/png",
-    fileName: "storybook2.png",
-    thumbnailUrl: "https://picsum.photos/250",
-    url: "https://picsum.photos/250",
-    fileSize: 1024,
-  },
-  {
-    contentType: "image/png",
-    fileName: "components2.png",
-    thumbnailUrl: "https://picsum.photos/250",
-    url: "https://picsum.photos/250",
-    fileSize: 1024,
-  },
-];
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: ThumbnailListBasic,
   args: {
-    files,
     rowCount: 2,
   },
 };

package/src/ThumbnailList/docs/ThumbnailListBasic.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import {
+  AtlantisOverlayProvider,
+  ThumbnailList,
+} from "@jobber/components-native";
+import type { ThumbnailListProps } from "@jobber/components-native";
+
+const files = [
+  {
+    contentType: "image/png",
+    fileName: "image.png",
+    thumbnailUrl: "https://picsum.photos/250",
+    url: "https://picsum.photos/250",
+    fileSize: 1024,
+  },
+  {
+    contentType: "image/png",
+    fileName: "atlantis.png",
+    thumbnailUrl: "https://picsum.photos/250",
+    url: "https://picsum.photos/250",
+    fileSize: 1024,
+  },
+  {
+    contentType: "image/png",
+    fileName: "components.png",
+    thumbnailUrl: "https://picsum.photos/250",
+    url: "https://picsum.photos/250",
+    fileSize: 1024,
+  },
+  {
+    contentType: "image/png",
+    fileName: "storybook.png",
+    thumbnailUrl: "https://picsum.photos/250",
+    url: "https://picsum.photos/250",
+    fileSize: 1024,
+  },
+  {
+    contentType: "image/png",
+    fileName: "storybook2.png",
+    thumbnailUrl: "https://picsum.photos/250",
+    url: "https://picsum.photos/250",
+    fileSize: 1024,
+  },
+  {
+    contentType: "image/png",
+    fileName: "components2.png",
+    thumbnailUrl: "https://picsum.photos/250",
+    url: "https://picsum.photos/250",
+    fileSize: 1024,
+  },
+];
+
+export function ThumbnailListBasic(props: Partial<ThumbnailListProps>) {
+  return (
+    <SafeAreaProvider>
+      <AtlantisOverlayProvider>
+        <ThumbnailList files={files} rowCount={2} {...props} />
+      </AtlantisOverlayProvider>
+    </SafeAreaProvider>
+  );
+}

package/src/ThumbnailList/docs/index.ts

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

package/src/Toast/Toast.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Button, Toast, showToast } from "@jobber/components-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { ToastBasic } from "./docs";
 
 interface ToastStoryArgs {
   message: string;
@@ -15,10 +16,13 @@ const meta = {
   decorators: [
     Story => {
       return (
-        // eslint-disable-next-line react/forbid-elements -- This is a storybook decorator so it doesn't affect react-native stuff
-        <div style={{ height: "90vh" }}>
-          <Story />
-        </div>
+        <SafeAreaProvider>
+          {/* eslint-disable-next-line react/forbid-elements -- This is a
+          storybook decorator so it doesn't affect react-native stuff */}
+          <div style={{ height: "90vh" }}>
+            <Story />
+          </div>
+        </SafeAreaProvider>
       );
     },
   ],
@@ -28,23 +32,8 @@ export default meta;
 
 type Story = StoryObj<ToastStoryArgs>;
 
-const Template = (args: Story["args"]) => (
-  <>
-    <Button
-      label="Show toast"
-      onPress={() =>
-        showToast({
-          message: args?.message ?? "Showed toast",
-          bottomTabsVisible: false,
-        })
-      }
-    />
-    <Toast />
-  </>
-);
-
 export const Basic: Story = {
-  render: Template,
+  render: ToastBasic,
   args: {
     message: "Showed toast",
   },

package/src/Toast/docs/ToastBasic.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Button, Toast, showToast } from "@jobber/components-native";
+
+interface ToastStoryArgs {
+  message?: string;
+}
+
+export function ToastBasic(props: Partial<ToastStoryArgs>) {
+  return (
+    <>
+      <Button
+        label="Show toast"
+        onPress={() =>
+          showToast({
+            message: props.message ?? "Showed toast",
+            bottomTabsVisible: false,
+          })
+        }
+      />
+      <Toast />
+    </>
+  );
+}

package/src/Toast/docs/index.ts

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

package/src/Typography/Typography.stories.tsx

@@ -1,11 +1,9 @@
-import React from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Typography } from "@jobber/components-native";
+import { TypographyBasic } from "./docs";
 
-type TypographyStoryArgs = Pick<
-  React.ComponentProps<typeof Typography>,
-  "transform"
->;
+type TypographyStoryArgs = Pick<ComponentProps<typeof Typography>, "transform">;
 
 const meta = {
   title: "Components/Text and Typography/Typography",
@@ -20,16 +18,12 @@ export default meta;
 
 type Story = StoryObj<TypographyStoryArgs>;
 
-const BasicTemplate = (args: Story["args"]) => (
-  <Typography transform={args?.transform}>Some type here</Typography>
-);
-
 export const Basic: Story = {
-  render: BasicTemplate,
+  render: TypographyBasic,
 };
 
 export const Transform: Story = {
-  render: BasicTemplate,
+  render: TypographyBasic,
   args: {
     transform: "uppercase",
   },

package/src/Typography/docs/TypographyBasic.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComponentProps } from "react";
+import { Typography } from "@jobber/components-native";
+
+type TypographyStoryArgs = Pick<ComponentProps<typeof Typography>, "transform">;
+
+export function TypographyBasic(props: Partial<TypographyStoryArgs>) {
+  return <Typography transform={props.transform}>Some type here</Typography>;
+}

package/src/Typography/docs/index.ts

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