Merge branch 'feature/cli' into 'main'

feature/cli

See merge request react-native/react-native-material-components!12

Author: computools-anastasiia-nahaiska

CODE_OF_CONDUCT.md

@@ -1,3 +1,4 @@
+
 # Contributor Covenant Code of Conduct
 
 ## Our Pledge

CONTRIBUTING.md

@@ -6,24 +6,15 @@ We want this community to be friendly and respectful to each other. Please follo
 
 ## Development workflow
 
-This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
-
-- The library package in the root directory.
-- An example app in the `example/` directory.
-
 To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
 
 ```sh
 yarn
 ```
 
-> Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development.
-
-The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make.
+> While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development.
 
-It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
-
-You can use various commands from the root directory to work with the project.
+While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app.
 
 To start the packager:
 
@@ -43,12 +34,6 @@ To run the example app on iOS:
 yarn example ios
 ```
 
-To run the example app on Web:
-
-```sh
-yarn example web
-```
-
 Make sure your code passes TypeScript and ESLint. Run the following to verify:
 
 ```sh
@@ -68,6 +53,11 @@ Remember to add tests for your change if possible. Run the unit tests by:
 yarn test
 ```
 
+To edit the Objective-C or Swift files, open `example/ios/ReactNativeMaterialComponentsExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > @computools/react-native-material-components`.
+
+To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `computools-react-native-material-components` under `Android`.
+
+
 ### Commit message convention
 
 We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
@@ -103,7 +93,7 @@ yarn release
 
 The `package.json` file contains various scripts for common tasks:
 
-- `yarn`: setup project by installing dependencies.
+- `yarn bootstrap`: setup project by installing all dependencies and pods.
 - `yarn typecheck`: type-check files with TypeScript.
 - `yarn lint`: lint files with ESLint.
 - `yarn test`: run unit tests with Jest.

README.md

@@ -6,14 +6,35 @@ Computools react native material components package
 
 1. ```yarn add @computools/react-native-material-components```
 
-2. ```yarn add react-native-reanimated```
+2. Add required dependency packages
+```
+yarn add react-native-reanimated
+yarn add react-native-gesture-handler
+yarn add react-native-safe-area-context
+```
 
 3. Add ```react-native-reanimated/plugin``` plugin to your babel.config.js.
 
 _react-native-reanimated/plugin has to be listed last._
 
 See the [documentation](https://docs.swmansion.com/react-native-reanimated/) to learn more info about react-native-reanimated
 
+4. Wrap whole App in ```SafeAreaProvider``` and ```GestureHandlerRootView``` containers.
+
+See the example:
+
+```
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <GestureHandlerRootView style={{flex: 1}}>
+        {/* Rest of your app code */}
+      </GestureHandlerRootView>
+    </SafeAreaProvider>
+  );
+}
+```
+
 # Platform specific setup
 
 - Android
@@ -323,7 +344,102 @@ Outlined card is touchable.
 
 ![divider](https://ik.imagekit.io/Computools/rn-material-components/divider.png?updatedAt=1705067870577)
 </details>
+<details><summary>Sheets</summary>
+<br />
+<details><summary>Bottom Sheet</summary>
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ---- |
+| header | | ReactNode | - |
+| children | - | ReactNode | - |
+| modalHeightCoeff | - | number | 0.4 |
+| animationDuration | - | number | 300 |
+| headerStyle | - | ViewStyle | - |
+| overlayStyle | - | ViewStyle | - |
+| dragHandleStyle | - | ViewStyle | - |
+
+### Usage
+
+1. Create a ref for a bottom sheet of the BottomSheetRef interface.
+2. Pass the bottom sheet ref as ref prop to ```BottomSheet```.
+3. Call ```toggle()``` method from ```ref.current``` to open/close the Bottom Sheet or ```expand()``` to expand the Bottom Sheet completely.
+
+See the example:
+
+```
+import {BottomSheet, type BottomSheetRef} from '@computools/react-native-material-components';
+
+export const MyScreen = () => {
+  const bottomSheetRef = React.useRef<BottomSheetRef>(null);
+
+  const toggleBottomSheet = () => ref.current?.toggle();
+
+  return (
+    <>
+      <View style={styles.container}>
+        <Text onPress={toggleBottomSheet}>TOGGLE BOTTOM SHEET</Text>
+      </View>
+      <BottomSheet ref={ref}>
+        {/* Bottom sheet content here */}
+      </BottomSheet>
+    </>
+  );
+}
+```
+
+**Note:** If you want to use scrollable components as children of Bottom Sheet you need to import them from react-native-gesture-handler. Otherwise they won't scroll on Android.
+
+![left side sheet](https://ik.imagekit.io/Computools/rn-material-components/left-side-sheet.gif?updatedAt=1706170982231)
+</details>
+<details><summary>Side Sheet</summary>
+
+**Properties**
+
+| name | description | type | default |
+| ------ | ------ | ------ | ---- |
+| children | - | ReactNode | - |
+| stickySide | - | 'right' or 'left | 'right' |
+| modalWidthCoeff | up to 1 | number | 0.85 |
+| animationDuration | - | number | 300 |
+| overlayStyle | - | ViewStyle | - |
+
+### Usage
+
+1. Create a ref for a side sheet of the SideSheetRef interface.
+2. Pass the side sheet ref as ref prop to ```SideSheet```.
+3. Call ```toggle()``` method from ```ref.current``` to open/close the Side Sheet.
 
+See the example:
+
+```
+import {SideSheet, type SideSheetRef} from '@computools/react-native-material-components';
+
+export const MyScreen = () => {
+  const sideSheetRef = React.useRef<SideSheetRef>(null);
+
+  const toggleSideSheet = () => ref.current?.toggle();
+
+  return (
+    <>
+      <View style={styles.container}>
+        <Text onPress={toggleSideSheet}>TOGGLE SIDE SHEET</Text>
+      </View>
+      <SideSheet ref={ref}>
+        {/* Side sheet content here */}
+      </SideSheet>
+    </>
+  );
+}
+```
+
+**Note:** If you want to use scrollable components as children of Side Sheet you need to import them from react-native-gesture-handler. Otherwise they won't scroll on Android.
+
+![left side sheet](https://ik.imagekit.io/Computools/rn-material-components/left-side-sheet.gif?updatedAt=1706170982231)
+![right side sheet](https://ik.imagekit.io/Computools/rn-material-components/right-side-sheet.gif?updatedAt=1706171192408)
+</details>
+</details>
 <details><summary>Snackbar</summary>
 <br />
 

android/build.gradle

@@ -0,0 +1,100 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+
+
+def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["ReactNativeMaterialComponents_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ReactNativeMaterialComponents_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  if (major == 7 && minor >= 3) {
+    return true
+  }
+
+  return major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.computools.reactnativematerialcomponents"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "ReactNativeMaterialComponents"
+    codegenJavaPackageName = "com.computools.reactnativematerialcomponents"
+  }
+}

android/gradle.properties

@@ -0,0 +1,5 @@
+ReactNativeMaterialComponents_kotlinVersion=1.7.0
+ReactNativeMaterialComponents_minSdkVersion=21
+ReactNativeMaterialComponents_targetSdkVersion=31
+ReactNativeMaterialComponents_compileSdkVersion=31
+ReactNativeMaterialComponents_ndkversion=21.4.7075529

android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.computools.reactnativematerialcomponents">
+</manifest>

android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

android/src/main/java/com/computools/reactnativematerialcomponents/ReactNativeMaterialComponentsModule.java

@@ -0,0 +1,32 @@
+package com.computools.reactnativematerialcomponents;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.module.annotations.ReactModule;
+
+@ReactModule(name = ReactNativeMaterialComponentsModule.NAME)
+public class ReactNativeMaterialComponentsModule extends ReactContextBaseJavaModule {
+  public static final String NAME = "ReactNativeMaterialComponents";
+
+  public ReactNativeMaterialComponentsModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @Override
+  @NonNull
+  public String getName() {
+    return NAME;
+  }
+
+
+  // Example method
+  // See https://reactnative.dev/docs/native-modules-android
+  @ReactMethod
+  public void multiply(double a, double b, Promise promise) {
+    promise.resolve(a * b);
+  }
+}

android/src/main/java/com/computools/reactnativematerialcomponents/ReactNativeMaterialComponentsPackage.java

@@ -0,0 +1,28 @@
+package com.computools.reactnativematerialcomponents;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class ReactNativeMaterialComponentsPackage implements ReactPackage {
+  @NonNull
+  @Override
+  public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+    List<NativeModule> modules = new ArrayList<>();
+    modules.add(new ReactNativeMaterialComponentsModule(reactContext));
+    return modules;
+  }
+
+  @NonNull
+  @Override
+  public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}

babel.config.js

@@ -1,12 +1,4 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-      },
-    ],
-    'react-native-reanimated/plugin',
-  ],
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };