feat(api-improvement): separated components and wrote readme

Author: XantreDev

README.md

@@ -1,21 +1,88 @@
 # react-native-skia-ui
 
-Cross platform UI primitives implemented with `@shopify/react-native-skia`
+Cross platform UI primitives implemented with `@shopify/react-native-skia`.
+This library provides functionality of system UI components like `ActivityIndicator` for Android, IOS and Web.
+Components are ported from flutter and are implemented using `@shopify/react-native-skia` and `react-native-reanimated`.
 
 ## Installation
 
 ```sh
 npm install react-native-skia-ui
 ```
 
+### Peer Dependencies
+
+This library has the following peer dependencies:
+
+- `@shopify/react-native-skia`
+- `react-native-reanimated`
+
+If you don't have them installed, you can install them with:
+
+```sh
+npm install @shopify/react-native-skia react-native-reanimated
+```
+
 ## Usage
 
+For now, the library only provides a few components:
+
+- `DeterminateMaterialCircularProgressIndicator`
+- `IndeterminateMaterialCircularProgressIndicator`
+- `MaterialCircularProgressIndicator` (blend of the two above)
+
 ```js
-import { multiply } from 'react-native-skia-ui';
+import * as React from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  DeterminateMaterialCircularProgressIndicator,
+  IndeterminateMaterialCircularProgressIndicator,
+} from 'react-native-skia-ui/material-circular-progress-indicator';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+
+export default function App() {
+  const progress = useSharedValue(0);
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      progress.value = withTiming(Math.random(), { duration: 1000 });
+    }, 1000);
 
-// ...
+    return () => clearInterval(id);
+  });
+  return (
+    <View style={styles.container}>
+      <Text>DeterminateMaterialCircularProgressIndicator</Text>
+      <DeterminateMaterialCircularProgressIndicator
+        size={56}
+        valueColor="green"
+        strokeWidth={5}
+        strokeCap="round"
+        value={progress}
+      />
+      <DeterminateMaterialCircularProgressIndicator
+        size={100}
+        valueColor="blue"
+        strokeWidth={4}
+        strokeCap="round"
+        value={progress}
+      />
+      <Text>IndeterminateMaterialCircularProgressIndicator</Text>
+      <IndeterminateMaterialCircularProgressIndicator
+        size={40}
+        valueColor="black"
+      />
 
-const result = await multiply(3, 7);
+      <IndeterminateMaterialCircularProgressIndicator
+        size={100}
+        valueColor="red"
+        backgroundColor={'#f0f0f0'}
+        strokeWidth={8}
+        strokeCap="round"
+      />
+    </View>
+  );
+}
 ```
 
 ## Contributing

example/babel.config.js

@@ -4,17 +4,29 @@ const pak = require('../package.json');
 module.exports = function (api) {
   api.cache(true);
 
+  const exports = pak.exports;
+  if (!exports) {
+    throw new Error('The package.json must have a "exports" field');
+  }
+
+  const aliases = Object.entries(exports).reduce((acc, [_key, value]) => {
+    const key = _key.startsWith('.') ? _key.slice(1) : _key;
+    // We only care about the "source" field
+    if (value.source) {
+      const aliasName = pak.name + key;
+      acc[`^${aliasName}$`] = path.join(__dirname, '..', value.source);
+    }
+    return acc;
+  }, {});
+
   return {
     presets: ['babel-preset-expo'],
     plugins: [
       [
         'module-resolver',
         {
           extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
-          },
+          alias: aliases,
         },
       ],
       'react-native-reanimated/plugin',

example/src/App.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 
-import { StyleSheet, View } from 'react-native';
-import { MaterialCircularProgressIndicator } from '../../src/material-circular-progress-indicator';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  DeterminateMaterialCircularProgressIndicator,
+  IndeterminateMaterialCircularProgressIndicator,
+} from 'react-native-skia-ui/material-circular-progress-indicator';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
 
 export default function App() {
@@ -15,14 +18,34 @@ export default function App() {
   });
   return (
     <View style={styles.container}>
-      <MaterialCircularProgressIndicator
+      <Text>DeterminateMaterialCircularProgressIndicator</Text>
+      <DeterminateMaterialCircularProgressIndicator
         size={56}
         valueColor="green"
         strokeWidth={5}
         strokeCap="round"
         value={progress}
       />
-      <MaterialCircularProgressIndicator size={40} valueColor="black" />
+      <DeterminateMaterialCircularProgressIndicator
+        size={100}
+        valueColor="blue"
+        strokeWidth={4}
+        strokeCap="round"
+        value={progress}
+      />
+      <Text>IndeterminateMaterialCircularProgressIndicator</Text>
+      <IndeterminateMaterialCircularProgressIndicator
+        size={40}
+        valueColor="black"
+      />
+
+      <IndeterminateMaterialCircularProgressIndicator
+        size={100}
+        valueColor="red"
+        backgroundColor={'#f0f0f0'}
+        strokeWidth={8}
+        strokeCap="round"
+      />
     </View>
   );
 }

src/material-circular-progress-indicator/MaterialCircularProgressIndicator.tsx

@@ -27,7 +27,7 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated';
-import type { SetOptional } from 'type-fest';
+import type { SetNonNullable, SetOptional } from 'type-fest';
 import {
   K_INTERMEDIATE_CIRCULAR_DURATION,
   offsetTween,
@@ -152,7 +152,7 @@ const Content_ = ({
   }));
 
   useAnimatedReaction(
-    () => stopped.value,
+    () => stopped.value || value.value !== undefined,
     (shouldStop) => {
       if (shouldStop) {
         // stopping the animation
@@ -238,17 +238,35 @@ const Content_ = ({
   );
 };
 
+export type InternalOrSharedProps = OrPlainValueProp<
+  InternalProps,
+  | 'size'
+  | 'value'
+  | 'strokeWidth'
+  | 'backgroundColor'
+  | 'valueColor'
+  | 'stopped'
+>;
+
+export type DefaultedKeys = 'strokeWidth' | 'backgroundColor';
 export type MaterialCircularProgressIndicatorProps = SetOptional<
-  OrPlainValueProp<
-    InternalProps,
-    | 'size'
-    | 'value'
-    | 'strokeWidth'
-    | 'backgroundColor'
-    | 'valueColor'
-    | 'stopped'
-  >,
-  'strokeWidth' | 'stopped' | 'value' | 'backgroundColor'
+  InternalOrSharedProps,
+  DefaultedKeys | 'stopped' | 'value'
+>;
+/*
+type SetRequiredAndNonNullable<T, K extends keyof T> = SetRequired<
+  SetNonNullable<T, K>,
+  K
+>; */
+
+export type DeterminateMaterialCircularProgressIndicatorProps = SetOptional<
+  SetNonNullable<Omit<InternalOrSharedProps, 'stopped'>, 'value'>,
+  DefaultedKeys
+>;
+
+export type IndeterminateMaterialCircularProgressIndicatorProps = SetOptional<
+  Omit<InternalOrSharedProps, 'value'>,
+  DefaultedKeys | 'stopped'
 >;
 
 const useToSharedValueOptional = <T,>(
@@ -270,6 +288,13 @@ const useToSharedValue = <T,>(value: T | SharedValue<T>) =>
     return value;
   }, [value]);
 
+/**
+ *
+ * @description Component has two modes: determinate and indeterminate. Which are controlled by the `value` prop.
+ * If `value` is undefined, the progress indicator will be indeterminate.
+ * If `value` is a number between 0 and 1, the progress indicator will be determinate.
+ * Not all props applies to both modes. For more type safety, use `DeterminateMaterialCircularProgressIndicator` and `IndeterminateMaterialCircularProgressIndicator` instead.
+ */
 export const MaterialCircularProgressIndicator = (
   props: MaterialCircularProgressIndicatorProps
 ) => (
@@ -283,3 +308,31 @@ export const MaterialCircularProgressIndicator = (
     valueColor={useToSharedValue(props.valueColor)}
   />
 );
+
+export const IndeterminateMaterialCircularProgressIndicator = (
+  props: IndeterminateMaterialCircularProgressIndicatorProps
+) => (
+  <Content_
+    {...props}
+    size={useToSharedValue(props.size)}
+    value={useSharedValue(undefined)}
+    stopped={useToSharedValueOptional(props.stopped, false)}
+    strokeWidth={useToSharedValueOptional(props.strokeWidth, 4)}
+    backgroundColor={useToSharedValue(props.backgroundColor)}
+    valueColor={useToSharedValue(props.valueColor)}
+  />
+);
+
+export const DeterminateMaterialCircularProgressIndicator = (
+  props: DeterminateMaterialCircularProgressIndicatorProps
+) => (
+  <Content_
+    {...props}
+    size={useToSharedValue(props.size)}
+    value={useToSharedValue(props.value)}
+    stopped={useSharedValue(false)}
+    strokeWidth={useToSharedValueOptional(props.strokeWidth, 4)}
+    backgroundColor={useToSharedValue(props.backgroundColor)}
+    valueColor={useToSharedValue(props.valueColor)}
+  />
+);

src/material-circular-progress-indicator/index.ts

@@ -1,4 +1,13 @@
 export {
   MaterialCircularProgressIndicator,
-  type MaterialCircularProgressIndicatorProps,
+  DeterminateMaterialCircularProgressIndicator,
+  IndeterminateMaterialCircularProgressIndicator,
+} from './MaterialCircularProgressIndicator';
+
+export type {
+  DefaultedKeys,
+  MaterialCircularProgressIndicatorProps,
+  DeterminateMaterialCircularProgressIndicatorProps,
+  IndeterminateMaterialCircularProgressIndicatorProps,
+  InternalOrSharedProps,
 } from './MaterialCircularProgressIndicator';