Publish v1.2.5

yamankatby · Dec 1, 2021 · 310857e · 310857e · vercel · Dec 1, 2021
1 parent f4be3bc
commit 310857e
Show file tree

Hide file tree

Showing 12 changed files with 348 additions and 362 deletions.
diff --git a/core/package.json b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-native-material/core",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Modular and customizable Material Design UI components for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

diff --git a/docs/docs/api/stack.md b/docs/docs/api/stack.md
@@ -0,0 +1,68 @@
+# Stack
+
+API documentation for the React Native Stack component. Learn about the available props.
+
+## Import
+
+```js
+import { Stack } from "@react-native-material/core";
+// or
+import Stack from "@react-native-material/core/Stack";
+```
+
+## Props
+
+```ts
+interface StackProps extends ViewProps {
+  /**
+   * The direction of the stack.
+   * - `column` - Vertical stack.
+   * - `row` - Horizontal stack.
+   * - `row-reverse` - Horizontal stack with reverse order of children.
+   * - `column-reverse` - Vertical stack with reverse order of children.
+   *
+   * @default "column"
+   */
+  direction?: ViewStyle["flexDirection"];
+
+  /**
+   * The alignment of the stack items along the stack's main axis.
+   *
+   * @default "flex-start"
+   */
+  justify?: ViewStyle["justifyContent"];
+
+  /**
+   * The alignment of the stack items along the stack's cross axis.
+   *
+   * @default "stretch"
+   */
+  align?: ViewStyle["alignItems"];
+
+  /**
+   * Whether the stack items forced in a single line or can be flowed into multiple lines.
+   *
+   * @default "nowrap"
+   */
+  wrap?: ViewStyle["flexWrap"];
+
+  /**
+   * The spacing between the stack items.
+   *
+   * @default 0
+   */
+  spacing?: number;
+
+  /**
+   * A React.Node to render between each stack item.
+   *
+   * @default 0
+   */
+  divider?: React.ReactNode;
+}
+
+export function getValidChildren(children: React.ReactNode) {
+  return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement[];
+}
+
+```
diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md
@@ -4,16 +4,15 @@ Avatars are found throughout material design with uses in everything from tables
 
 ```js with-preview
 import React from "react";
-import { View } from "react-native";
-import { Avatar } from "@react-native-material/core";
+import { VStack, Avatar } from "@react-native-material/core";
 import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 
 const App = () => (
-  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+  <VStack style={{ flex: 1 }} justify="center" align="center" spacing={4}>
     <Avatar label="Kent Dodds" autoColor/>
-    <Avatar image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }} style={{ marginTop: 16 }}/>
-    <Avatar icon={props => <Icon name="account" {...props} />} style={{ marginTop: 16 }}/>
-  </View>
+    <Avatar image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }}/>
+    <Avatar icon={props => <Icon name="account" {...props} />}/>
+  </VStack>
 );
 
 export default App;
@@ -25,152 +24,146 @@ export default App;
 
 ```js with-preview
 import React from "react";
-import { View } from "react-native";
-import { Avatar } from "@react-native-material/core";
+import { VStack, Avatar } from "@react-native-material/core";
 import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 
-export default function App() {
-  return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Avatar label="Kent Dodds"/>
-      <Avatar label="UN" initials={false} style={{ marginTop: 16 }}/>
-      <Avatar label="Jed Watson" autoColor style={{ marginTop: 16 }}/>
-      <Avatar label="Tim Neutkens" autoColor style={{ marginTop: 16 }}/>
-    </View>
-  );
-}
+const App = () => (
+  <VStack style={{ flex: 1 }} justify="center" align="center" spacing={4}>
+    <Avatar label="Kent Dodds"/>
+    <Avatar label="UN" initials={false}/>
+    <Avatar label="Jed Watson" autoColor/>
+    <Avatar label="Tim Neutkens" autoColor/>
+  </VStack>
+);
+
+export default App;
 ```
 
 ## Image avatars
 
 ```js with-preview
 import React from "react";
-import { View, Image } from "react-native";
-import { Avatar } from "@react-native-material/core";
-
-export default function App() {
-  return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Avatar image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }}/>
-      <Avatar
-        image={
-          <Image
-            source={{ uri: "https://mui.com/static/images/avatar/2.jpg" }}
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              borderRadius: 28,
-            }}
-          />
-        }
-        style={{ marginTop: 16 }}
-      />
-    </View>
-  );
-}
+import { Image } from "react-native";
+import { VStack, Avatar } from "@react-native-material/core";
+
+const App = () => (
+  <VStack style={{ flex: 1 }} justify="center" align="center" spacing={4}>
+    <Avatar image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }}/>
+    <Avatar
+      image={
+        <Image
+          source={{ uri: "https://mui.com/static/images/avatar/2.jpg" }}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: 28,
+          }}
+        />
+      }
+    />
+  </VStack>
+);
 
+export default App;
 ```
 
 ## Icon avatars
 
 ```js with-preview
 import React from "react";
-import { View } from "react-native";
-import { Avatar } from "@react-native-material/core";
+import { VStack, Avatar } from "@react-native-material/core";
 import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 
-export default function App() {
-  return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Avatar icon={props => <Icon name="account" {...props} />}/>
-      <Avatar
-        icon={props => <Icon name="account" {...props} />}
-        label="Jed Watson"
-        autoColor
-        style={{ marginTop: 16 }}
-      />
-      <Avatar
-        icon={props => <Icon name="calendar" {...props} />}
-        label="Tim Neutkens"
-        autoColor
-        style={{ marginTop: 16 }}
-      />
-    </View>
-  );
-}
+const App = () => (
+  <VStack style={{ flex: 1 }} justify="center" align="center" spacing={4}>
+    <Avatar icon={props => <Icon name="account" {...props} />}/>
+    <Avatar
+      icon={props => <Icon name="account" {...props} />}
+      label="Jed Watson"
+      autoColor
+    />
+    <Avatar
+      icon={props => <Icon name="calendar" {...props} />}
+      label="Tim Neutkens"
+      autoColor
+    />
+  </VStack>
+);
+
+export default App;
 ```
 
 ## Sizes
 
 ```js with-preview
 import React from "react";
-import { View } from "react-native";
-import { Avatar } from "@react-native-material/core";
-
-export default function App() {
-  return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Avatar label="Jed Watson" size={32}/>
-      <Avatar label="Jed Watson" style={{ marginTop: 16 }}/>
-      <Avatar label="Jed Watson" size={72} style={{ marginTop: 16 }}/>
-    </View>
-  );
-}
+import { VStack, Avatar } from "@react-native-material/core";
+
+const App = () => (
+  <VStack style={{ flex: 1 }} justify="center" align="center" spacing={4}>
+    <Avatar label="Jed Watson" size={32}/>
+    <Avatar label="Jed Watson"/>
+    <Avatar label="Jed Watson" size={72}/>
+  </VStack>
+);
+
+export default App;
 ```
 
 ## Coloring
 
 ```js with-preview
 import React from "react";
-import { View } from "react-native";
-import { Avatar } from "@react-native-material/core";
+import { VStack, Avatar } from "@react-native-material/core";
 import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 
-export default function App() {
-  return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Avatar label="Kent Dodds"/>
-      <Avatar icon={props => <Icon name="account" {...props} />} color="primary" style={{ marginTop: 16 }}/>
-      <Avatar
-        icon={props => <Icon name="account" {...props} />}
-        color="primary"
-        tintColor="error"
-        style={{ marginTop: 16 }}
-      />
-      <Avatar
-        icon={props => <Icon name="account" {...props} />}
-        color="orange"
-        tintColor="white"
-        style={{ marginTop: 16 }}
-      />
-    </View>
-  );
-}
+const App = () => (
+  <VStack style={{ flex: 1 }} justify="center" align="center" spacing={4}>
+    <Avatar label="Kent Dodds"/>
+    <Avatar
+      icon={props => <Icon name="account" {...props} />}
+      color="primary"
+    />
+    <Avatar
+      icon={props => <Icon name="account" {...props} />}
+      color="primary"
+      tintColor="error"
+    />
+    <Avatar
+      icon={props => <Icon name="account" {...props} />}
+      color="orange"
+      tintColor="white"
+    />
+  </VStack>
+);
+
+export default App;
 ```
 
 ## Fallbacks
 
 ```js with-preview
 import React from "react";
-import { View } from "react-native";
-import { Avatar } from "@react-native-material/core";
+import { VStack, Avatar } from "@react-native-material/core";
 import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 
-export default function App() {
-  return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Avatar label="Jed Watson"/>
-      <Avatar label="Jed Watson" icon={props => <Icon name="account" {...props} />} style={{ marginTop: 16 }}/>
-      <Avatar
-        label="Jed Watson"
-        icon={props => <Icon name="account" {...props} />}
-        image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }}
-        style={{ marginTop: 16 }}
-      />
-    </View>
-  );
-}
+const App = () => (
+  <VStack style={{ flex: 1 }} justify="center" align="center" spacing={4}>
+    <Avatar label="Jed Watson"/>
+    <Avatar
+      label="Jed Watson"
+      icon={props => <Icon name="account" {...props} />}
+    />
+    <Avatar
+      label="Jed Watson"
+      icon={props => <Icon name="account" {...props} />}
+      image={{ uri: "https://mui.com/static/images/avatar/1.jpg" }}
+    />
+  </VStack>
+);
+
+export default App;
 ```