refactor(store): rename slice to feature (#318)

packages/react/src/index.ts

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

packages/react/src/media/tests/video.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { createSlice } from '@videojs/store';
+import { createFeature } from '@videojs/store';
 import { createStore } from '@videojs/store/react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -12,7 +12,7 @@ describe('video', () => {
     muted = false;
   }
 
-  const mockSlice = createSlice<MockMedia>()({
+  const mockFeature = createFeature<MockMedia>()({
     initialState: { volume: 1, muted: false },
     getSnapshot: ({ target }) => ({
       volume: target.volume,
@@ -23,7 +23,7 @@ describe('video', () => {
   });
 
   function createTestStore() {
-    return createStore({ slices: [mockSlice] });
+    return createStore({ features: [mockFeature] });
   }
 
   it('renders a video element', () => {

packages/react/src/media/video.tsx

@@ -22,7 +22,7 @@ export interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {
  * import { createStore, media } from '@videojs/react';
  *
  * const { Provider } = createStore({
- *   slices: media.all
+ *   features: media.all
  * });
  *
  * function App() {

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

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

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

@@ -1,33 +0,0 @@
-'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

@@ -1,34 +0,0 @@
-'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, useSnapshot } = 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, useSnapshot, useRequest, useTasks } = createStore(baseConfig);