feat(store): skin store setup (#298)

packages/react/src/index.ts

@@ -3,5 +3,8 @@
 // Media
 export { Video, type VideoProps } from './media/video';
 
+// Slices (re-export for convenience)
+export { media } from '@videojs/core/dom';
+
 // Store
 export * from '@videojs/store/react';

packages/react/src/skins/frosted/index.ts

@@ -0,0 +1,13 @@
+'use client';
+
+export { Skin, type SkinProps } from './skin';
+
+export {
+  create as createStore,
+  extendConfig,
+  Provider,
+  useRequest,
+  useSelector,
+  useStore,
+  useTasks,
+} from './store';

packages/react/src/skins/frosted/skin.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+export interface SkinProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * @example
+ * ```tsx
+ * import { Video } from '@videojs/react';
+ * import { Provider, Skin } from '@videojs/react/skins/frosted';
+ *
+ * function App() {
+ *   return (
+ *     <Provider>
+ *       <Skin>
+ *         <Video src="video.mp4" />
+ *       </Skin>
+ *     </Provider>
+ *   );
+ * }
+ * ```
+ */
+export function Skin({ children, className }: SkinProps): React.JSX.Element {
+  return <div className={`vjs-frosted-skin ${className ?? ''}`.trim()}>{children}</div>;
+}
+
+export namespace Skin {
+  export type Props = SkinProps;
+}

packages/react/src/skins/frosted/store.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import type { AnySlice, StoreConfig } from '@videojs/store';
+
+import { media } from '@videojs/core/dom';
+import { extendConfig as extendBaseConfig } from '@videojs/store';
+import { createStore } from '@videojs/store/react';
+
+const baseConfig = {
+  slices: [...media.all],
+  displayName: 'FrostedSkin',
+};
+
+/**
+ * Extends frosted skin config.
+ *
+ * @example
+ * ```ts
+ * import { createStore } from '@videojs/store/react';
+ * import { extendConfig } from '@videojs/react/skins/frosted';
+ * import { chaptersSlice } from './slices/chapters';
+ *
+ * const { Provider, useSelector } = createStore(
+ *   extendConfig({ slices: [chaptersSlice] })
+ * );
+ * ```
+ */
+export function extendConfig<S extends AnySlice<HTMLMediaElement>[] = []>(
+  extension?: Partial<StoreConfig<HTMLMediaElement, S>>,
+) {
+  return extendBaseConfig(baseConfig, extension);
+}
+
+export const {
+  Provider,
+  create,
+  useStore,
+  useSelector,
+  useRequest,
+  useTasks,
+} = createStore(baseConfig);