@fountain-ui/core 2.0.0-beta.2 → 2.0.0-beta.20

package/src/TextField/OutlinedTextField.tsx

@@ -34,7 +34,6 @@ const useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextF
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: theme.palette.background.default,
             borderRadius: theme.shape.roundness,
         },
         input: {
@@ -80,6 +79,7 @@ const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(fu
     } = props;
 
     const theme = useTheme();
+
     const styles = useStyles();
 
     const hasActiveOutline = focused || error;

package/src/Tooltip/Tooltip.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Text, View, ViewProps } from 'react-native';
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { rgb } from '@fountain-ui/utils';
+import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
 import type TooltipProps from './TooltipProps';
 import UpArrow from './UpArrow';
 
-const defaultOpacity = 0.8;
+const DEFAULT_OPACITY = 0.8;
 const initialLayout = { width: 0, height: 0, x: 0, y: 0 };
 
-const animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 export default function Tooltip(props: TooltipProps) {
     const {
@@ -29,13 +30,13 @@ export default function Tooltip(props: TooltipProps) {
 
     const theme = useTheme();
 
-    const [layout, setLayout] = React.useState(initialLayout);
+    const [layout, setLayout] = useState(initialLayout);
 
-    const scale = Animated.useSharedValue(0);
+    const scale = useSharedValue(0);
 
-    const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     const [r, g, b] = rgb(theme.palette.primary.main);
 
@@ -52,15 +53,15 @@ export default function Tooltip(props: TooltipProps) {
         overflow: visible ? undefined : 'hidden',
     };
 
-    React.useEffect(() => {
-        const nextValue = visible ? 1 : 0;
+    useEffect(() => {
+        const nextScaleValue = visible ? 1 : 0;
 
-        scale.value = Animated.withTiming(nextValue, animationTimingConfig);
+        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
     }, [visible]);
 
     const touchableStyle: ViewProps['style'] = {
         alignItems: 'center',
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,
+        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
         borderRadius: theme.shape.roundness,
         flexDirection: 'row',
         padding: theme.spacing(2),
@@ -77,8 +78,8 @@ export default function Tooltip(props: TooltipProps) {
     ]);
 
     const buttonElem = (
-        <TouchableWithoutFeedback
-            disallowInterruption={true}
+        <ButtonBase
+            pressEffect={'none'}
             onPress={onClose}
         >
             <View style={css(touchableStyle)}>
@@ -94,14 +95,14 @@ export default function Tooltip(props: TooltipProps) {
                     height={20}
                 />
             </View>
-        </TouchableWithoutFeedback>
+        </ButtonBase>
     );
 
     const arrowElem = (
         <UpArrow
             upsideDown={placement === 'top'}
             fill={theme.palette.primary.main}
-            opacity={defaultOpacity}
+            opacity={DEFAULT_OPACITY}
         />
     );
 
@@ -112,7 +113,7 @@ export default function Tooltip(props: TooltipProps) {
             <Animated.View
                 onLayout={(event) => setLayout(event.nativeEvent.layout)}
                 style={[
-                    tooltipAnimatedStyle,
+                    animatedStyle,
                     tooltipLayoutStyle,
                     tooltipStyle,
                 ]}

package/src/animated/AnimatedPressable.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
+import { Animated } from 'react-native';
 import Pressable from '../Pressable';
 
-// @ts-ignore
 export default Animated.createAnimatedComponent(Pressable);

package/src/hooks/index.ts

@@ -3,5 +3,7 @@ export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
 export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
+export { default as useImperativeState } from './useImperativeState';
+export { default as useSyncAnimatedValue } from './useSyncAnimatedValue';
 export { default as useThrottle } from './useThrottle';
 export { default as useValidWindowDimensions } from './useValidWindowDimensions';

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,6 +1,14 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import {
+    runOnJS,
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useHeight } from '../internal/hooks';
 import useElevationStyle from './useElevationStyle';
@@ -23,7 +31,6 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -37,15 +44,14 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { translucent, keyboardDismissMode }: Required<Options> = {
+    const { keyboardDismissMode }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -57,30 +63,47 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
 
     const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
-    });
-
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
+    const animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
+        if (Platform.OS === 'web') {
+            return {
+                transform,
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform,
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform,
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
+    }, [
+        /**
+         * FIXME: Consider add `elevationStyle` to dependencies.
+         */
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
 
     const onScrollViewChanged = (nextIndex: number) => {
         const prevIndex = indexRef.current;
@@ -100,16 +123,14 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(0, ANIMATION_CONFIG);
         }
     };
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(Keyboard.dismiss)();
             }
             lastTranslateY.value = translateY.value;
         },
@@ -131,15 +152,11 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(0, ANIMATION_CONFIG);
                     }
                 }
 
@@ -170,17 +187,15 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    });
+    }, [keyboardDismissMode, appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];
 

package/src/hooks/useFadeInAppBar.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import { useMemo } from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { rgb } from '@fountain-ui/utils';
 import { useHeight } from '../internal/hooks';
@@ -18,7 +19,6 @@ export interface Options {
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface FadeInAppBar {
@@ -26,8 +26,8 @@ export interface FadeInAppBar {
     titleStyle: ViewStyleProp;
     onAppBarLayout: OnLayoutCallback;
     onScroll: OnScroll;
-    dy: Animated.SharedValue<number>;
-    normalized: Animated.SharedValue<number>;
+    dy: SharedValue<number>;
+    normalized: SharedValue<number>;
 }
 
 const defaultOptions: Required<Options> = {
@@ -35,7 +35,6 @@ const defaultOptions: Required<Options> = {
     fadeInEndY: (appBarHeight) => appBarHeight,
     floating: true,
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
 const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;
@@ -46,7 +45,6 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         fadeInEndY,
         floating,
         keyboardDismissMode,
-        translucent,
     }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
@@ -60,7 +58,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
 
     const [appBarHeight, onAppBarLayout] = useHeight();
 
-    const [fromOffsetY, toOffsetY] = React.useMemo(() => {
+    const [fromOffsetY, toOffsetY] = useMemo(() => {
         const endY = typeof fadeInEndY === 'function'
             ? fadeInEndY(appBarHeight)
             : fadeInEndY;
@@ -72,30 +70,46 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         return [beginY, endY];
     }, [fadeInBeginY, fadeInBeginY, appBarHeight]);
 
-    const dy = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const normalized = Animated.useSharedValue<number>(0);
-
-    const backgroundColor = theme.palette.background.default;
-    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
-
-    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
-        elevation: normalized.value >= 1 ? 6 : 0,
-        shadowColor: '#000',
-        shadowOffset,
-        shadowRadius: 4.65,
-        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
-    }));
-
-    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({
+    const dy = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const normalized = useSharedValue<number>(0);
+
+    const originalBackgroundColor = theme.palette.background.default;
+    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);
+
+    const animatedAppBarStyle = useAnimatedStyle(() => {
+        const [r, g, b] = rgbValues;
+        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
+
+        if (Platform.OS === 'web') {
+            return { backgroundColor };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                backgroundColor,
+                elevation: normalized.value >= 1 ? 6 : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                backgroundColor,
+                shadowColor: '#000',
+                shadowOffset,
+                shadowRadius: 4.65,
+                shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
+            };
+        }
+        return {};
+    }, [rgbValues]);
+
+    const animatedTitleStyle = useAnimatedStyle(() => ({
         opacity: normalized.value,
-    }));
+    }), []);
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
-                Animated.runOnJS(Keyboard.dismiss)();
+                runOnJS(Keyboard.dismiss)();
             }
         },
         onScroll: (event) => {
@@ -114,11 +128,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    });
+    }, [keyboardDismissMode]);
 
     const appBarStyle = [
         animatedAppBarStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         floating ? styles.floating : undefined,
     ];
 

package/src/hooks/useImperativeState.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+
+export interface ImperativeState<T> {
+    hasChanged: () => boolean;
+    get: () => T;
+    set: (nextState: T) => void;
+}
+
+export default function useImperativeState<T>(initialValue: T): ImperativeState<T> {
+    return useMemo<ImperativeState<T>>(() => {
+        let prevState: T = initialValue;
+        let currentState: T = initialValue;
+
+        return {
+            hasChanged: () => prevState !== currentState,
+            get: () => currentState,
+            set: (nextState) => {
+                prevState = currentState;
+                currentState = nextState;
+            },
+        };
+    }, []);
+};

package/src/hooks/useSyncAnimatedValue.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import type { SyncAnimatedValue } from '../types';
+
+export interface SyncAnimatedValueConfig {
+    initialValue: number;
+    shouldSyncAlways?: boolean;
+}
+
+export default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue {
+    const {
+        initialValue,
+        shouldSyncAlways = false,
+    } = config;
+
+    const animatedValue = useRef(new Animated.Value(initialValue)).current;
+
+    const indexRef = useRef<number>(initialValue);
+
+    useEffect(() => {
+        const maybeId = shouldSyncAlways ? animatedValue.addListener((newValue) => {
+            indexRef.current = newValue.value;
+        }) : undefined;
+
+        return () => {
+            if (maybeId != null) {
+                animatedValue.removeListener(maybeId);
+            }
+        };
+    }, [shouldSyncAlways]);
+
+    return {
+        animatedValue,
+        initialValue,
+        getCurrentValue: () => indexRef.current,
+    };
+};

package/src/hooks/useThrottle.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useRef } from 'react';
 
 export interface ThrottleOptions {
     periodMillis: number;
@@ -8,9 +8,9 @@ export interface ThrottleOptions {
 export default function useThrottle(options: ThrottleOptions) {
     const { periodMillis, callback } = options;
 
-    const lastExecMillisRef = React.useRef(0);
+    const lastExecMillisRef = useRef(0);
 
-    return React.useCallback((...args) => {
+    return useCallback((...args: any[]) => {
         const now = Date.now();
         const millisAfterExecuted = now - lastExecMillisRef.current;
         lastExecMillisRef.current = now;

package/src/hooks/useValidWindowDimensions/index.ios.ts

@@ -1,15 +1,21 @@
-import { useState, useEffect } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useEffect, useState } from 'react';
+import type { ScaledSize } from 'react-native';
+import { Dimensions } from 'react-native';
 
-export default function useValidWindowDimensions() {
-    const window = useWindowDimensions();
-    const [validWindow, setValidWindow] = useState(window);
+export default function useValidWindowDimensions(): ScaledSize {
+    const [window, setWindow] = useState<ScaledSize>(() => Dimensions.get('window'));
 
     useEffect(() => {
-        if (window.width !== 0 && window.height !== 0) {
-            setValidWindow(window);
-        }
-    }, [window]);
+        const subscription = Dimensions.addEventListener('change', (newDimension) => {
+            const { window: newWindow } = newDimension;
 
-    return validWindow;
+            if (newWindow.width !== 0 && newWindow.height !== 0) {
+                setWindow(newWindow);
+            }
+        });
+
+        return subscription.remove;
+    }, []);
+
+    return window;
 }

package/src/index.ts

@@ -6,6 +6,8 @@ export * from './hooks';
 
 export * from './utils';
 
+export * from './store';
+
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 

package/src/internal/hooks/index.ts

@@ -1,2 +1 @@
 export { default as useHeight } from './useHeight';
-export { default as useWidth } from './useWidth';

package/src/internal/hooks/useHeight.ts

@@ -1,13 +1,13 @@
-import React from 'react';
+import { useState } from 'react';
 import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useWorkletCallback } from 'react-native-reanimated';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
-    const [height, setHeight] = React.useState<number>(initialHeight);
+    const [height, setHeight] = useState<number>(initialHeight);
 
-    const onLayout = Animated.useWorkletCallback((e) => {
+    const onLayout = useWorkletCallback((e) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);
 

package/src/internal/icons/CheckboxChecked.tsx

@@ -3,16 +3,8 @@ import { Path } from 'react-native-svg';
 import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
-    <React.Fragment>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z"
-        />
-        <Path
-            d="M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z"
-            fill="#FFFFFF"
-        />
-    </React.Fragment>,
+    <Path
+        d="M7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7ZM8.8589 13.5018L8.32857 14.0321L7.79824 13.5018L4.96967 10.6732L6.03033 9.61252L8.32857 11.9108L13.7697 6.46967L14.8303 7.53033L8.8589 13.5018Z"
+    />,
     'CheckboxChecked',
 );

package/src/store/MockStore.ts

@@ -0,0 +1,17 @@
+import { MonoStore, StoreSubscription } from './types';
+
+export default class MockStore<T> implements MonoStore<T> {
+
+    dispatch(data: T): void {
+        // do nothing
+    }
+
+    removeAllListeners(): void {
+        // do nothing
+    }
+
+    subscribe(listener: (data: T) => void): StoreSubscription {
+        return () => void 0;
+    }
+
+};

package/src/store/SimpleStore.ts

@@ -0,0 +1,43 @@
+import { MonoStore, StoreSubscription } from './types';
+
+function refEqual(a: any, b: any): boolean {
+    return a === b;
+}
+
+export default class SimpleStore<T> implements MonoStore<T> {
+
+    private data: T;
+
+    private listeners: Array<(data: T) => void> = [];
+
+    constructor(initialData: T) {
+        this.data = initialData;
+    }
+
+    subscribe(listener: (data: T) => void): StoreSubscription {
+        this.listeners.push(listener);
+
+        return () => {
+            const index = this.listeners.indexOf(listener);
+            this.listeners.splice(index, 1);
+        };
+    }
+
+    dispatch(data: T): void {
+        // Do not dispatch if data ref is equal
+        if (refEqual(this.data, data)) {
+            return;
+        }
+
+        this.data = data;
+        for (const id in this.listeners) {
+            const listener = this.listeners[id];
+            listener?.(data);
+        }
+    }
+
+    removeAllListeners(): void {
+        this.listeners.splice(0, this.listeners.length);
+    }
+
+};