Add RovingFocusGroup component with RovingFocusRoot

Author: kotAPI

src/core/utils/RovingFocusGroup/context/RovingFocusRootContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const RovingFocusRootContext = createContext({});

src/core/utils/RovingFocusGroup/fragments/RovingFocusRoot.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const RovingFocusRoot = ({ children }: { children: React.ReactNode }) => {
+    return <div>RovingFocusRoot</div>;
+};
+
+export default RovingFocusRoot;

src/core/utils/RovingFocusGroup/index.tsx

@@ -0,0 +1,7 @@
+import RovingFocusRoot from './fragments/RovingFocusRoot';
+
+const RovingFocusGroup = {
+    Root: RovingFocusRoot
+};
+
+export default RovingFocusGroup;

src/core/utils/RovingFocusGroup/stories/RovingFocusGroup.stories.tsx

@@ -0,0 +1,24 @@
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import React from 'react';
+
+import RovingFocusGroup from '../index';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'WIP/RovingFocusGroup',
+    component: RovingFocusGroup,
+    render: () => <>
+        <SandboxEditor className="space-y-2">
+            <RovingFocusGroup.Root>
+                <div>RovingFocusGroup</div>
+            </RovingFocusGroup.Root>
+        </SandboxEditor>
+    </>
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const All = {
+    args: {
+        className: ''
+    }
+};