feat(components): add an Overlay component

* add useScrollbarWidth hook
* add useScrollLock hook
* add a new component to lock scroll with an overlay (it can be useful
especially on small screens to prevent background contents to be
scrolled)

1 files changed, 63 insertions, 0 deletions

diff --git a/src/components/atoms/overlay/overlay.stories.tsx b/src/components/atoms/overlay/overlay.stories.tsx
new file mode 100644
index 0000000..f9c478c
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.stories.tsx
@@ -0,0 +1,63 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useToggle } from '../../../utils/hooks';
+import { Button } from '../buttons';
+import { Overlay } from './overlay';
+
+/**
+ * Overlay - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Overlay',
+  component: Overlay,
+  argTypes: {},
+} as ComponentMeta<typeof Overlay>;
+
+const Template: ComponentStory<typeof Overlay> = ({ isVisible, ...props }) => {
+  const [isActive, toggle] = useToggle(isVisible);
+
+  return (
+    <div>
+      <p>
+        Itaque reprehenderit sint rerum placeat et sapiente similique ut
+        distinctio. Libero illo reprehenderit qui quaerat dolorem. Officiis
+        asperiores sapiente eaque. Aut numquam porro quasi delectus excepturi
+        aut eaque et. Commodi et necessitatibus provident blanditiis rem qui
+        atque.
+      </p>
+      <p>
+        Aut architecto vitae dolor hic explicabo iure quia quae beatae.
+        Exercitationem nulla dignissimos doloribus sunt at nisi. A modi quasi
+        est sed quas repellendus vel sed dolores. Sed neque aperiam adipisci eos
+        autem. Libero omnis quis aut quas omnis magni harum et.
+      </p>
+      <Button onClick={toggle}>Open overlay</Button>
+      <Overlay {...props} isVisible={isActive} onClick={toggle} />
+    </div>
+  );
+};
+
+/**
+ * Overlay Stories - Hidden
+ */
+export const Hidden = Template.bind({});
+Hidden.args = {
+  children: (
+    <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
+      Some modal contents.
+    </div>
+  ),
+  isVisible: false,
+};
+
+/**
+ * Overlay Stories - Visible
+ */
+export const Visible = Template.bind({});
+Visible.args = {
+  children: (
+    <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
+      Some modal contents.
+    </div>
+  ),
+  isVisible: true,
+};