Merge branch 'feat/11'

apps/docs/constants/host.ts

@@ -0,0 +1,2 @@
+export const SHOWCASE_HOST =
+ "https://headlessui-react-native-showcase.vercel.app";

apps/docs/constants/index.ts

@@ -0,0 +1 @@
+export * from "./host";

apps/docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/docs/next.config.js

@@ -8,7 +8,8 @@ const isDev = process.env.NODE_ENV === "development";
 
 const withNextra = nextra({
  theme: "nextra-theme-docs",
- themeConfig: "./theme.config.jsx",
+ themeConfig: "./theme.config.tsx",
+ defaultShowCopyCode: true,
  mdxOptions: {
  remarkPlugins: [
  [

apps/docs/pages/components/modal.mdx

@@ -1,5 +1,104 @@
+import { SHOWCASE_HOST } from "@/constants";
 import React from "react";
 
-```jsx copy file=<rootDir>/node_modules/headlessui-react-native-example-ui/src/modal/modal-example.tsx
+# Modal (Dialog)
+
+## Installation
+
+To get started, install Headless UI via npm:
+
+```
+npm install headlessui-react-native
+```
+
+## Basic example
+
+Modals are built using the `Modal`, `ModalPanel`, and `ModalTitle` components:
+
+<iframe
+ src={`${SHOWCASE_HOST}/components/modal`}
+ width="100%"
+ height="500px"
+></iframe>
+
+```jsx file=<rootDir>/node_modules/headlessui-react-native-example-ui/src/modal/modal-example.tsx
 
 ```
+
+## Examples
+
+### Showing/hiding the modal
+
+Modals are controlled components, meaning that you have to provide and manage the open state yourself using the `open` prop and the `onClose` callback.
+
+The `onClose` callback is called when an modal is dismissed, which happens when the user presses the Esc key or clicks outside the `ModalPanel`. In this callback set the `open` state back to `false` to close the modal.
+
+```jsx
+import { Modal, ModalPanel, ModalTitle } from 'headlessui-react-native'
+import { useState } from 'react'
+
+function Example() {
+ // The open/closed state lives outside of the `Modal` and is managed by you
+ let [isOpen, setIsOpen] = useState(true)
+
+ function async handleDeactivate() {
+ await fetch('/deactivate-account', { method: 'POST' })
+ setIsOpen(false)
+ }
+
+ return (
+ <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+ <ModalPanel>
+ <ModalTitle>Deactivate account</ModalTitle>
+ <Text>This will permanently deactivate your account</Text>
+ <Text>Are you sure you want to deactivate your account? All of your data will be permanently removed.</Text>
+
+ {/*
+ You can render additional buttons to dismiss your
+ modal by setting `isOpen` to `false`.
+ */}
+ <Button title="Cancel" onPress={() => setIsOpen(false)}/>
+ <Button title="Deactivate" onPress={handleDeactivate}/>
+ </ModalPanel>
+ </Modal>
+ )
+}
+```
+
+For situations where you don't have easy access to your open/close state, Headless UI provides a `CloseButton` component that will close the nearest modal ancestor when clicked.
+
+```jsx
+import { CloseButton } from "headlessui-react-native";
+import { MyModal } from "./my-modal";
+
+function Example() {
+ return (
+ <MyModal>
+ {/* ... */}
+ <CloseButton>Cancel</CloseButton>
+ </MyModal>
+ );
+}
+```
+
+### Scrollable modals
+
+<iframe
+ src={`${SHOWCASE_HOST}/components/modal/scrollable`}
+ width="100%"
+ height="500px"
+></iframe>
+
+```jsx file=<rootDir>/node_modules/headlessui-react-native-example-ui/src/modal/scrollable-modal-example.tsx
+
+```
+
+## Component API
+
+### Modal
+
+### ModalPanel
+
+### ModalTitle
+
+### CloseButton

apps/docs/theme.config.jsx → apps/docs/theme.config.tsx

@@ -1,8 +1,13 @@
-export default {
+import { DocsThemeConfig } from "nextra-theme-docs";
+import React from "react";
+
+const config: DocsThemeConfig = {
  logo: <span>Headlessui React Native</span>,
  project: {
  link: "https://github.com/jamsubu/headlessui-react-native",
  },
  docsRepositoryBase:
  "https://github.com/jamsubu/headlessui-react-native/tree/main/apps/docs",
 };
+
+export default config;

apps/docs/tsconfig.json

@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "noEmit": true,
+ "incremental": true,
+ "module": "esnext",
+ "esModuleInterop": true,
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}

apps/showcase/app/components/modal/index.tsx

@@ -1,3 +1,2 @@
 import { ModalExample } from "headlessui-react-native-example-ui";
-
 export default ModalExample;

apps/showcase/app/components/modal/scrollable.tsx

@@ -0,0 +1,2 @@
+import { ScrollableModalExample } from "headlessui-react-native-example-ui";
+export default ScrollableModalExample;

apps/showcase/package.json

@@ -25,13 +25,12 @@
  "react-native": "0.74.1",
  "react-native-safe-area-context": "4.10.1",
  "react-native-screens": "3.31.1",
- "react-native-web": "^0.19.11",
- "typescript": "~5.3.3"
+ "react-native-web": "^0.19.11"
  },
  "devDependencies": {
  "@babel/core": "^7.20.0",
  "@types/react": "~18.2.45",
- "typescript": "~5.3.3"
+ "typescript": "^5.4.5"
  },
  "private": true
 }

packages/example-ui/src/modal/index.ts

@@ -1 +1,2 @@
 export * from "./modal-example";
+export * from "./scrollable-modal-example";

packages/example-ui/src/modal/scrollable-modal-example.tsx

@@ -0,0 +1,43 @@
+import { Modal, ModalPanel, ModalTitle } from "headlessui-react-native";
+import React, { useState } from "react";
+import { Button, Text, View } from "react-native";
+
+export function ScrollableModalExample() {
+ const [isOpen, setIsOpen] = useState(false);
+ return (
+ <View>
+ <Button title="Open dialog" onPress={() => setIsOpen(true)} />
+ <Modal onClose={() => setIsOpen(false)} isOpen={isOpen}>
+ <View
+ style={{
+ width: "100%",
+ height: "100%",
+ alignItems: "center",
+ justifyContent: "center",
+ padding: 40,
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ }}
+ >
+ <ModalPanel
+ style={{
+ padding: 20,
+ width: 300,
+ backgroundColor: "white",
+ }}
+ scrollable
+ >
+ <ModalTitle style={{ fontSize: 20, fontWeight: "700" }}>
+ Payment successful
+ </ModalTitle>
+ <View style={{ paddingTop: 20, paddingBottom: 20 }}>
+ {Array.from({ length: 20 }).map((_, index) => (
+ <Text key={index}>new line</Text>
+ ))}
+ </View>
+ <Button title="Got it, thanks!" onPress={() => setIsOpen(false)} />
+ </ModalPanel>
+ </View>
+ </Modal>
+ </View>
+ );
+}

yarn.lock

@@ -9482,11 +9482,6 @@ typescript@^5.4.5:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
-typescript@~5.3.3:
- version "5.3.3"
- resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
- integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
-
 ua-parser-js@^1.0.35:
  version "1.0.37"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"