Publish v1.2.9

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-material/core",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Modular and customizable Material Design UI components for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

core/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useBoolean } from './use-boolean';

core/src/hooks/use-boolean.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from "react"
+
+type InitialState = boolean | (() => boolean)
+
+/**
+ * React hook to manage boolean (on - off) states
+ *
+ * @param initialState the initial boolean state value
+ */
+export function useBoolean(initialState: InitialState = false) {
+  const [value, setValue] = useState(initialState)
+
+  const on = useCallback(() => {
+    setValue(true)
+  }, [])
+
+  const off = useCallback(() => {
+    setValue(false)
+  }, [])
+
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev)
+  }, [])
+
+  return [value, { on, off, toggle }] as const
+}

core/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./base";
+export * from "./hooks";
 export { default as ActivityIndicator, ActivityIndicatorProps } from "./ActivityIndicator";
 export { default as AppBar, AppBarProps } from "./AppBar";
 export { default as Avatar, AvatarProps } from "./Avatar";

docs/docs/api/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "API",
+  "position": 4
+}

docs/docs/api/dialog-actions.md

@@ -0,0 +1,20 @@
+# DialogActions
+
+API documentation for the React Native DialogActions component. Learn about the available props.
+
+## Import
+
+```js
+import { DialogActions } from "@react-native-material/core";
+// or
+import DialogActions from "@react-native-material/core/DialogActions";
+```
+
+## Props
+
+```ts
+interface DialogActionsProps {
+
+}
+
+```

docs/docs/api/dialog-content.md

@@ -0,0 +1,19 @@
+# DialogContent
+
+API documentation for the React Native DialogContent component. Learn about the available props.
+
+## Import
+
+```js
+import { DialogContent } from "@react-native-material/core";
+// or
+import DialogContent from "@react-native-material/core/DialogContent";
+```
+
+## Props
+
+```ts
+interface DialogContentProps {
+}
+
+```

docs/docs/api/dialog-header.md

@@ -0,0 +1,20 @@
+# DialogHeader
+
+API documentation for the React Native DialogHeader component. Learn about the available props.
+
+## Import
+
+```js
+import { DialogHeader } from "@react-native-material/core";
+// or
+import DialogHeader from "@react-native-material/core/DialogHeader";
+```
+
+## Props
+
+```ts
+interface DialogHeaderProps {
+  title: string | React.ReactNode | ((props: { color: string }) => React.ReactNode | null) | null;
+}
+
+```

docs/docs/api/dialog.md

@@ -0,0 +1,22 @@
+# Dialog
+
+API documentation for the React Native Dialog component. Learn about the available props.
+
+## Import
+
+```js
+import { Dialog } from "@react-native-material/core";
+// or
+import Dialog from "@react-native-material/core/Dialog";
+```
+
+## Props
+
+```ts
+interface DialogProps {
+  visible?: boolean;
+
+  onDismiss?: () => void;
+}
+
+```

docs/docs/api/portal.md

@@ -0,0 +1,17 @@
+# Portal
+
+API documentation for the React Native Portal component. Learn about the available props.
+
+## Import
+
+```js
+import { Portal } from "@react-native-material/core";
+// or
+import Portal from "@react-native-material/core/Portal";
+```
+
+## Props
+
+```ts
+null
+```

docs/docs/components/dialog.md

@@ -0,0 +1,143 @@
+# Dialog
+
+Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
+
+A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a
+decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a
+required action has been taken.
+
+Dialogs are purposefully interruptive, so they should be used sparingly.
+
+[`💬 Feedback`](https://github.com/yamankatby/react-native-material/labels/component%3A%20Dialog)
+[`🎨 Material Design`](https://material.io/components/dialogs)
+
+## Import
+
+```js
+import { Dialog, DialogHeader, DialogContent, DialogActions } from "@react-native-material/core";
+```
+
+## Usage
+
+Simple Alert Dialog
+
+```js with-preview
+import React, { useState } from "react";
+import {
+  ThemeProvider,
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogContent,
+  DialogActions,
+  Text,
+} from "@react-native-material/core";
+
+const App = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button
+        title="Open Alert Dialog"
+        style={{ margin: 16 }}
+        onPress={() => setVisible(true)}
+      />
+      <Dialog visible={visible} onDismiss={() => setVisible(false)}>
+        <DialogHeader title="Dialog Header" />
+        <DialogContent>
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum
+            eligendi inventore, laboriosam laudantium minima minus nesciunt
+            pariatur sequi.
+          </Text>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            title="Cancel"
+            compact
+            variant="text"
+            onPress={() => setVisible(false)}
+          />
+          <Button
+            title="Ok"
+            compact
+            variant="text"
+            onPress={() => setVisible(false)}
+          />
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+const AppProvider = () => (
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+);
+
+export default AppProvider;
+```
+
+Form Dialog
+
+```js with-preview
+import React, { useState } from "react";
+import {
+  ThemeProvider,
+  VStack,
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogContent,
+  DialogActions,
+  Text,
+  TextInput
+} from "@react-native-material/core";
+
+const App = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button
+        title="Open Form Dialog"
+        style={{ margin: 16 }}
+        onPress={() => setVisible(true)}
+      />
+      <Dialog visible={visible} onDismiss={() => setVisible(false)}>
+        <DialogHeader title="Dialog Header"/>
+        <DialogContent>
+          <VStack spacing={2}>
+            <Text>Lorem ipsum dolor sit amet, consectetur adipisicing.</Text>
+            <TextInput label="Email" variant="standard"/>
+          </VStack>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            title="Cancel"
+            compact
+            variant="text"
+            onPress={() => setVisible(false)}
+          />
+          <Button
+            title="Ok"
+            compact
+            variant="text"
+            onPress={() => setVisible(false)}
+          />
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+const AppProvider = () => (
+  <ThemeProvider>
+    <App/>
+  </ThemeProvider>
+);
+
+export default AppProvider;
+```

docs/docs/components/portal.md

@@ -0,0 +1,14 @@
+# Portal
+
+The portal component renders its children into a new "subtree" outside of current DOM hierarchy.
+
+The children of the portal component will be appended to the `container` specified. The component is used internally by
+the `Modal` and `Popper` components.
+
+[`💬 Feedback`](https://github.com/yamankatby/react-native-material/labels/component%3A%20Portal)
+
+## Import
+
+```js
+import { Portal } from "@react-native-material/core";
+```

docs/docs/hooks/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Hooks",
+  "position": 3
+}

docs/docs/hooks/use-boolean.md

@@ -0,0 +1,66 @@
+# useBoolean
+
+`useBoolean` is a custom hook used to manage a boolean value with `on`, `off`
+and `toggle` functions.
+
+## Import
+
+```js
+import { useBoolean } from '@chakra-ui/react'
+```
+
+## Return value
+
+The `useBoolean` hook returns a stateful boolean value and an object with the following function to update it:
+
+| Name     | Type         | Description                                     |
+| -------- | ------------ | ----------------------------------------------- |
+| `on`     | `() => void` | A function to set the boolean value to `true`.  |
+| `off`    | `() => void` | A function to set the boolean value to `false`. |
+| `toggle` | `() => void` | A function to negate the boolean state.         |
+
+## Usage
+
+### Usage of toggle method
+
+```js with-preview
+import React from "react";
+import { VStack, Button, Text, useBoolean } from "@react-native-material/core";
+
+const App = () => {
+  const [flag, setFlag] = useBoolean();
+
+  return (
+    <VStack style={{ margin: 16 }} align="flex-start" spacing={2}>
+      <Text>Boolean state: {flag.toString()}</Text>
+      <Button title="Toggle" onPress={setFlag.toggle}/>
+    </VStack>
+  );
+};
+
+export default App;
+```
+
+### Usage of on and off methods
+
+```js with-preview
+import React from "react";
+import { View } from "react-native";
+import { Text, useBoolean } from "@react-native-material/core";
+
+const App = () => {
+  const [flag, setFlag] = useBoolean();
+
+  return (
+    <View style={{ margin: 16 }} onMouseEnter={setFlag.on} onMouseLeave={setFlag.off}>
+      <Text>Boolean state: {flag.toString()}</Text>
+    </View>
+  );
+};
+
+export default App;
+```
+
+## Parameters
+
+The hook `useBoolean` accepts the initial boolean value, by default is `false`.