Update Radix Popover version

lib/.eslintrc.json

@@ -4,20 +4,65 @@
     "browser": true,
     "window": true
   },
-  "extends": ["airbnb", "prettier", "plugin:jest/recommended"],
-  "plugins": ["jest", "react-hooks"],
+  "extends": [
+    "airbnb",
+    "prettier",
+    "plugin:jest/recommended",
+    "plugin:storybook/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": [
+    "jest",
+    "react-hooks"
+  ],
   "rules": {
     "linebreak-style": 0,
-    "no-use-before-define": ["error", { "functions": false }],
-    "no-underscore-dangle": ["error", { "allow": ["_options", "_links"] }],
+    "no-use-before-define": [
+      "error",
+      {
+        "functions": false
+      }
+    ],
+    "no-underscore-dangle": [
+      "error",
+      {
+        "allow": [
+          "_options",
+          "_links"
+        ]
+      }
+    ],
     "react/jsx-one-expression-per-line": "allow",
     "no-nested-ternary": "off",
     "import/extensions": "allow",
-    "import/no-unresolved": ["error", { "ignore": ["react", "styled-components"] }],
-    "react/prop-types": [2, { "ignore": ["children"] }],
+    "import/no-unresolved": [
+      "error",
+      {
+        "ignore": [
+          "react",
+          "styled-components"
+        ]
+      }
+    ],
+    "react/prop-types": [
+      2,
+      {
+        "ignore": [
+          "children"
+        ]
+      }
+    ],
     "react/self-closing-comp": "allow",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ]
   }
 }

lib/.storybook/components/ExampleContainer.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 const ExampleContainer = ({ children, pseudoState, expanded = false }: Props): JSX.Element => (
-  <DivContainer className={pseudoState} expanded={expanded}>
+  <DivContainer className={`${pseudoState}-all`} expanded={expanded}>
     {children}
   </DivContainer>
 );

lib/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-pseudo-states",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

lib/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import { HalstackProvider } from "../src/HalstackContext";
+import styled from "styled-components";
+import type { Preview } from "@storybook/react";
+import React from "react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <HalstackProvider>
+        <Container>
+          <Story />
+        </Container>
+      </HalstackProvider>
+    ),
+  ],
+};
+
+const Container = styled.div`
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+`;
+
+export default preview;