From 69d271bfe42b8f69374fdacf1a73f38bafdd8835 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.feitsma@mediamonks.com>
Date: Wed, 6 Mar 2024 11:53:12 +0100
Subject: [PATCH] First draft useScreenOrientation

---
 src/hooks/useMediaQuery/useMediaQuery.mdx     |  2 +-
 src/hooks/useMediaQuery/useMediaQuery.ts      |  4 +--
 .../useScreenOrientation.mdx                  | 30 ++++++++++++++++
 .../useScreenOrientation.stories.tsx          | 35 +++++++++++++++++++
 .../useScreenOrientation.ts                   | 19 ++++++++++
 src/index.ts                                  |  1 +
 6 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useScreenOrientation/useScreenOrientation.mdx
 create mode 100644 src/hooks/useScreenOrientation/useScreenOrientation.stories.tsx
 create mode 100644 src/hooks/useScreenOrientation/useScreenOrientation.ts

diff --git a/src/hooks/useMediaQuery/useMediaQuery.mdx b/src/hooks/useMediaQuery/useMediaQuery.mdx
index ae4c965..4e2c5ff 100644
--- a/src/hooks/useMediaQuery/useMediaQuery.mdx
+++ b/src/hooks/useMediaQuery/useMediaQuery.mdx
@@ -9,7 +9,7 @@ Hook that returns true when the media query matches.
 ## Reference
 
 ```ts
-function useMediaQuery(mediaQueryOrVariableName: string, defaultValue = false): boolean;
+function useMediaQuery(mediaQueryOrVariableName: string, defaultValue?: boolean): boolean;
 ```
 
 ## Usage
diff --git a/src/hooks/useMediaQuery/useMediaQuery.ts b/src/hooks/useMediaQuery/useMediaQuery.ts
index 4bbb7fe..f3399b1 100644
--- a/src/hooks/useMediaQuery/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery/useMediaQuery.ts
@@ -53,8 +53,8 @@ export function getMediaQueryList(
  */
 export function useMediaQuery(
   mediaQueryOrVariableName: MediaQueryValues,
-  defaultValue = false,
-): boolean {
+  defaultValue?: boolean,
+): boolean | undefined {
   const [mediaQueryList, setMediaQueryList] = useState<MediaQueryList | undefined>(() =>
     getMediaQueryList(mediaQueryOrVariableName),
   );
diff --git a/src/hooks/useScreenOrientation/useScreenOrientation.mdx b/src/hooks/useScreenOrientation/useScreenOrientation.mdx
new file mode 100644
index 0000000..9caa1bd
--- /dev/null
+++ b/src/hooks/useScreenOrientation/useScreenOrientation.mdx
@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Hooks / useScreenOrientation" />
+
+# useScreenOrientation
+
+`useScreenOrientation` is a custom React hook for handling screen orientation changes. It listens
+for window resizing events, determining the screen's current orientation (portrait or landscape).
+This hook is useful for building UIs that adapt based on device orientation, enhancing user
+experience across various devices.
+
+## Reference
+
+```ts
+function useScreenOrientation(): { isLandscape: boolean; isPortait: boolean };
+```
+
+### Returns
+
+- An object with 2 values: isLandscape and isPortrait, both booleans where the later is the opposite
+  of the first.
+
+## Usage
+
+```tsx
+function DemoComponent() {
+  const { isLandscape } = useScreenOrientation();
+  return <div>Orientation: {isLandscape ? 'Landscape' : 'Portrait'}</div>;
+}
+```
diff --git a/src/hooks/useScreenOrientation/useScreenOrientation.stories.tsx b/src/hooks/useScreenOrientation/useScreenOrientation.stories.tsx
new file mode 100644
index 0000000..a6886fb
--- /dev/null
+++ b/src/hooks/useScreenOrientation/useScreenOrientation.stories.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable react/jsx-no-literals */
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactElement } from 'react';
+import { useScreenOrientation } from './useScreenOrientation.js';
+
+const meta = {
+  title: 'Hooks / useScreenOrientation',
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function DemoComponent(): ReactElement {
+  const { isLandscape } = useScreenOrientation();
+
+  return (
+    <div>
+      <div className="alert alert-primary">
+        <h4 className="alert-heading">Instructions</h4>
+        <p className="mb-0">Resize the viewport to see the useScreenOrientation hook in action.</p>
+      </div>
+
+      <div>
+        <div>Orientation: {isLandscape ? 'Landscape' : 'Portrait'}</div>
+      </div>
+    </div>
+  );
+}
+
+export const Demo: Story = {
+  render() {
+    return <DemoComponent />;
+  },
+};
diff --git a/src/hooks/useScreenOrientation/useScreenOrientation.ts b/src/hooks/useScreenOrientation/useScreenOrientation.ts
new file mode 100644
index 0000000..c86404c
--- /dev/null
+++ b/src/hooks/useScreenOrientation/useScreenOrientation.ts
@@ -0,0 +1,19 @@
+import { useMediaQuery } from '../useMediaQuery/useMediaQuery.js';
+
+/**
+ * This hook observes the orientation of the of the screen.
+ *
+ * @returns An object with 2 values: isLandscape and isPortrait, both booleans where the later is the opposite of the first.
+ */
+
+export function useScreenOrientation(): {
+  isLandscape: boolean | undefined;
+  isPortrait: boolean | undefined;
+} {
+  const isLandscape = useMediaQuery('(orientation: landscape)');
+
+  return {
+    isLandscape,
+    isPortrait: !isLandscape,
+  };
+}
diff --git a/src/index.ts b/src/index.ts
index 815250e..419e4c9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,6 +22,7 @@ export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.js';
 export * from './hooks/useRefs/utils/unwrapRefs/unwrapRefs.types.js';
 export * from './hooks/useRefs/utils/validateAndUnwrapRefs/validateAndUnwrapRefs.js';
 export * from './hooks/useResizeObserver/useResizeObserver.js';
+export * from './hooks/useScreenOrientation/useScreenOrientation.js';
 export * from './hooks/useStaticValue/useStaticValue.js';
 export * from './hooks/useToggle/useToggle.js';
 export * from './lifecycle/components/CrossFlow/CrossFlow.js';