FormidableLabs · JDMathew · Jul 25, 2024 · Jul 1, 2024 · Jul 1, 2024 · Jul 2, 2024
diff --git a/docs/checklist/focus.gif b/docs/checklist/focus.gif
diff --git a/docs/checklist/text.gif b/docs/checklist/text.gif
diff --git a/examples/expo/App.tsx b/examples/expo/App.tsx
@@ -2,6 +2,7 @@ import 'react-native-gesture-handler';
 
 import { AMAProvider } from '@react-native-ama/core';
 import { StatusBar } from 'expo-status-bar';
+import React from 'react';
 
 import { AppNavigator } from './src/AppNavigation';
 

diff --git a/examples/shared/src/screens/BottomSheet.screen.tsx b/examples/shared/src/screens/BottomSheet.screen.tsx
@@ -9,7 +9,7 @@ import { FormScreen } from './Form.screen';
 
 type TimedActionProps = {};
 
-export const BottomSheetScreen: React.FC<TimedActionProps> = ({ children }) => {
+export const BottomSheetScreen: React.FC<TimedActionProps> = () => {
   const [modalVisible, setModalVisible] = useState(false);
 
   return (

diff --git a/examples/shared/src/screens/Form.screen.tsx b/examples/shared/src/screens/Form.screen.tsx
@@ -1,5 +1,5 @@
 import { Form, TextInput } from '@react-native-ama/forms';
-import { SwitchListItem, Text } from '@react-native-ama/react-native';
+import { Text } from '@react-native-ama/react-native';
 import * as React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 

diff --git a/packages/animations/docs/animations.md b/packages/animations/docs/animations.md
@@ -0,0 +1,17 @@
+---
+slug: /
+title: The animations package
+sidebar_position: 1
+---
+
+# Intro
+
+The animations package `@react-native-ama/animations` offers hooks and components needed to handle accessibility within animations using react-native Animated or react-native-reanimated.
+
+## Installation
+
+Install the `@react-native-ama/animations` package with your favourite package manager:
+
+```bash npm2yarn
+npm install @react-native-ama/animations
+```
diff --git a/packages/animations/docs/index.md b/packages/animations/docs/index.md
diff --git a/packages/core/docs/core.md b/packages/core/docs/core.md
@@ -6,14 +6,14 @@ sidebar_position: 1
 
 # Intro
 
-The core package `react-native-ama` offers essential hooks and components needed to create an app with accessibility in mind.
+The core package `@react-native-ama/core` offers essential hooks and components needed to create an app with accessibility in mind.
 
 ## Installation
 
-Install the `react-native-ama` package with your favourite package manager:
+Install the `@react-native-ama/core` package with your favourite package manager:
 
 ```bash npm2yarn
-npm install -D react-native-ama
+npm install  @react-native-ama/core
 ```
 
 ### Config File

diff --git a/packages/extras/docs/extras.md b/packages/extras/docs/extras.md
@@ -0,0 +1,17 @@
+---
+slug: /
+title: The extras package
+sidebar_position: 1
+---
+
+# Intro
+
+The `@react-native-ama/extras` package offers extra accessible hooks and components which are often used when building react-native apps, such as BottomSheets and Carousels.
+
+## Installation
+
+Install the `@react-native-ama/extras` package with your favourite package manager:
+
+```bash npm2yarn
+npm install @react-native-ama/extras
+```
diff --git a/packages/forms/docs/FormField.md b/packages/forms/docs/FormField.md
@@ -39,20 +39,20 @@ import { Form } from 'react-native-ama';
 
 The component extends the React Native [TouchableWithoutFeedbackProps](https://reactnative.dev/docs/touchablewithoutfeedback#props).
 
-### `id` 
+### `id`
 
-The field ID. This info is stored, with the field `ref`, inside the [<Form />](./Form) component.
+The field ID. This info is stored, with the field `ref`, inside the [`<Form />`](./Form) component.
 
 | Type   | Default   |
-|--------|-----------|
+| ------ | --------- |
 | string | undefined |
 
 ### `ref`
 
 The field reference.
 
 | Type            | Default   |
-|-----------------|-----------|
+| --------------- | --------- |
 | React.RefObject | undefined |
 
 ### `hasValidation`

diff --git a/packages/forms/docs/forms.md b/packages/forms/docs/forms.md
@@ -1,6 +1,6 @@
 ---
 slug: /
-title: The Forms package
+title: The forms package
 sidebar_position: 1
 ---
 
@@ -13,7 +13,7 @@ The `@react-native-ama/forms` package offers essential hooks and components need
 Install the `@react-native-ama/forms` package with your favourite package manager:
 
 ```bash npm2yarn
-npm install -D @react-native-ama/forms
+npm install @react-native-ama/forms
 ```
 
 ## Usage

diff --git a/packages/forms/docs/useTextInput.md b/packages/forms/docs/useTextInput.md
@@ -2,10 +2,16 @@
 
 This hook can be used to create a custom TextInput with all the [accessibility improvements](#accessibility-improvements) needed.
 
+:::note
+
+To use `useTextInput` it must be wrapped by the `<Form>` provider component from this package.
+:::
+
 ## Usage
 
 ```jsx
-import { useTextInput } from 'react-native-ama';
+// MyTextInput
+import { useTextInput } from '@react-native-ama/forms';
 
 const MyTextInput = () => {
   const { ref, ...rest } = useTextInput({ ...requiredProps });
@@ -83,7 +89,7 @@ This parameter specifies the next form field to focus on when the next button is
 
 ### `id`
 
-The field ID. This info is stored, with the field `ref`, inside the [<Form />](./Form) component.
+The field ID. This info is stored, with the field `ref`, inside the [`<Form />`](./Form.md) component.
 
 | Type   | Default   |
 | ------ | --------- |
@@ -97,7 +103,15 @@ The ID of the next field to focus when the user taps on the `next` button of the
 | ------ | --------- |
 | string | undefined |
 
-### <Required /> `hasValidation`
+### `required`
+
+This property is used to set the input as required and will display and error if a value has not been set
+
+| Type    | Default   |
+| ------- | --------- |
+| boolean | undefined |
+
+### `hasValidation`
 
 This property is used to know if the input can display an error, in case of failed validation; and if so is used to:
 

diff --git a/packages/lists/docs/lists.md b/packages/lists/docs/lists.md
@@ -0,0 +1,17 @@
+---
+slug: /
+title: The lists package
+sidebar_position: 1
+---
+
+# Intro
+
+The `@react-native-ama/lists` package offers essential hooks and components needed to create accessible lists.
+
+## Installation
+
+Install the `@react-native-ama/lists` package with your favourite package manager:
+
+```bash npm2yarn
+npm install @react-native-ama/lists
+```
diff --git a/packages/react-native/docs/index.md b/packages/react-native/docs/index.md
diff --git a/packages/react-native/docs/react-native.md b/packages/react-native/docs/react-native.md
@@ -0,0 +1,17 @@
+---
+slug: /
+title: The react-native package
+sidebar_position: 1
+---
+
+# Intro
+
+The `@react-native-ama/react-native` package offers essential hooks and components which extend the base react-native components with accessibility built in.
+
+## Installation
+
+Install the `@react-native-ama/react-native` package with your favourite package manager:
+
+```bash npm2yarn
+npm install @react-native-ama/react-native
+```
diff --git a/tsconfig.json b/tsconfig.json
@@ -25,6 +25,7 @@
     "skipLibCheck": true
   },
   "exclude": [
+    "website",
     "**/**/dist",
     "**/**/node_modules",
     "node_modules",

diff --git a/website/README.md b/website/README.md
@@ -1,6 +1,6 @@
 # Website
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+This website is built using [Docusaurus 3](https://docusaurus.io/), a modern static website generator.
 
 ### Installation
 

diff --git a/website/babel.config.js b/website/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  ...require('../babel.base'),
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
 };
diff --git a/docs/ama-console-error.png → website/docs/ama-console-error.png b/docs/ama-console-error.png → website/docs/ama-console-error.png
diff --git a/docs/ama/ama-console-error.png → website/docs/ama/ama-console-error.png b/docs/ama/ama-console-error.png → website/docs/ama/ama-console-error.png
diff --git a/docs/ama/ama-demo.png → website/docs/ama/ama-demo.png b/docs/ama/ama-demo.png → website/docs/ama/ama-demo.png
diff --git a/docs/ama/config-file.md → website/docs/ama/config-file.md b/docs/ama/config-file.md → website/docs/ama/config-file.md
diff --git a/docs/ama/getting-started.md → website/docs/ama/getting-started.md b/docs/ama/getting-started.md → website/docs/ama/getting-started.md
diff --git a/docs/ama/intro.md → website/docs/ama/intro.md b/docs/ama/intro.md → website/docs/ama/intro.md
@@ -32,12 +32,12 @@ If AMA detects an accessibility issue:
 - Show a banner to inform that something went wrong
 - Provide a guideline link to the issue
 
-![Example of a failed accessibility check by AMA](https://github.com/FormidableLabs/react-native-ama/blob/main/docs/ama-demo.png?raw=true)
+![Example of a failed accessibility check by AMA](https://github.com/FormidableLabs/react-native-ama/blob/main/website/docs/ama/ama-demo.png?raw=true)
 _Example of a failed accessibility check by AMA_
 
 <br />
 
-![Additional information and guideline link provided by AMA](https://github.com/FormidableLabs/react-native-ama/blob/main/docs/ama-console-error.png?raw=true)
+![Additional information and guideline link provided by AMA](https://github.com/FormidableLabs/react-native-ama/blob/main/website/docs/ama-console-error.png?raw=true)
 _Additional information and guideline link provided by AMA_
 
 [^1]: The accessibility support in React Native is [not fully complete](https://github.com/facebook/react-native/projects/15).

diff --git a/docs/ama/usage.md → website/docs/ama/usage.md b/docs/ama/usage.md → website/docs/ama/usage.md
diff --git a/docs/checklist/bottom-sheet-drawer.md → ...ite/docs/checklist/bottom-sheet-drawer.md b/docs/checklist/bottom-sheet-drawer.md → ...ite/docs/checklist/bottom-sheet-drawer.md
diff --git a/docs/checklist/bottom-tab-navigator.md → ...te/docs/checklist/bottom-tab-navigator.md b/docs/checklist/bottom-tab-navigator.md → ...te/docs/checklist/bottom-tab-navigator.md
diff --git a/docs/checklist/bottomsheet.excalidraw → ...ite/docs/checklist/bottomsheet.excalidraw b/docs/checklist/bottomsheet.excalidraw → ...ite/docs/checklist/bottomsheet.excalidraw
diff --git a/docs/checklist/bottomsheet.png → website/docs/checklist/bottomsheet.png b/docs/checklist/bottomsheet.png → website/docs/checklist/bottomsheet.png
diff --git a/docs/checklist/button.md → website/docs/checklist/button.md b/docs/checklist/button.md → website/docs/checklist/button.md
diff --git a/docs/checklist/button.png → website/docs/checklist/button.png b/docs/checklist/button.png → website/docs/checklist/button.png
diff --git a/docs/checklist/buttons.excalidraw → website/docs/checklist/buttons.excalidraw b/docs/checklist/buttons.excalidraw → website/docs/checklist/buttons.excalidraw
diff --git a/docs/checklist/carousel.md → website/docs/checklist/carousel.md b/docs/checklist/carousel.md → website/docs/checklist/carousel.md
diff --git a/docs/checklist/checklist.md → website/docs/checklist/checklist.md b/docs/checklist/checklist.md → website/docs/checklist/checklist.md
@@ -1,5 +1,4 @@
 ---
-slug: /
 sidebar_position: 0
 ---
 

diff --git a/docs/checklist/focus.excalidraw → website/docs/checklist/focus.excalidraw b/docs/checklist/focus.excalidraw → website/docs/checklist/focus.excalidraw
diff --git a/website/docs/checklist/focus.gif b/website/docs/checklist/focus.gif
diff --git a/docs/checklist/focus.md → website/docs/checklist/focus.md b/docs/checklist/focus.md → website/docs/checklist/focus.md
diff --git a/docs/checklist/form-disabled.png → website/docs/checklist/form-disabled.png b/docs/checklist/form-disabled.png → website/docs/checklist/form-disabled.png
diff --git a/docs/checklist/form-error.png → website/docs/checklist/form-error.png b/docs/checklist/form-error.png → website/docs/checklist/form-error.png
diff --git a/docs/checklist/form-focused.png → website/docs/checklist/form-focused.png b/docs/checklist/form-focused.png → website/docs/checklist/form-focused.png
diff --git a/docs/checklist/form-selected.png → website/docs/checklist/form-selected.png b/docs/checklist/form-selected.png → website/docs/checklist/form-selected.png
diff --git a/docs/checklist/form.excalidraw → website/docs/checklist/form.excalidraw b/docs/checklist/form.excalidraw → website/docs/checklist/form.excalidraw
diff --git a/docs/checklist/forms.md → website/docs/checklist/forms.md b/docs/checklist/forms.md → website/docs/checklist/forms.md
diff --git a/docs/checklist/grid.excalidraw → website/docs/checklist/grid.excalidraw b/docs/checklist/grid.excalidraw → website/docs/checklist/grid.excalidraw
diff --git a/docs/checklist/grid.png → website/docs/checklist/grid.png b/docs/checklist/grid.png → website/docs/checklist/grid.png
diff --git a/docs/checklist/headers.excalidraw → website/docs/checklist/headers.excalidraw b/docs/checklist/headers.excalidraw → website/docs/checklist/headers.excalidraw
diff --git a/docs/checklist/headers.png → website/docs/checklist/headers.png b/docs/checklist/headers.png → website/docs/checklist/headers.png
diff --git a/docs/checklist/headings.md → website/docs/checklist/headings.md b/docs/checklist/headings.md → website/docs/checklist/headings.md
diff --git a/docs/checklist/list-grids.md → website/docs/checklist/list-grids.md b/docs/checklist/list-grids.md → website/docs/checklist/list-grids.md
diff --git a/docs/checklist/tabbar.excalidraw → website/docs/checklist/tabbar.excalidraw b/docs/checklist/tabbar.excalidraw → website/docs/checklist/tabbar.excalidraw
diff --git a/docs/checklist/tabbar.png → website/docs/checklist/tabbar.png b/docs/checklist/tabbar.png → website/docs/checklist/tabbar.png
diff --git a/docs/checklist/text.excalidraw → website/docs/checklist/text.excalidraw b/docs/checklist/text.excalidraw → website/docs/checklist/text.excalidraw
diff --git a/website/docs/checklist/text.gif b/website/docs/checklist/text.gif
diff --git a/docs/checklist/text.md → website/docs/checklist/text.md b/docs/checklist/text.md → website/docs/checklist/text.md
diff --git a/docs/checklist/timed-actions.md → website/docs/checklist/timed-actions.md b/docs/checklist/timed-actions.md → website/docs/checklist/timed-actions.md
diff --git a/docs/guidelines/accessibility-hint.md → ...ite/docs/guidelines/accessibility-hint.md b/docs/guidelines/accessibility-hint.md → ...ite/docs/guidelines/accessibility-hint.md
diff --git a/docs/guidelines/accessibility-label.md → ...te/docs/guidelines/accessibility-label.md b/docs/guidelines/accessibility-label.md → ...te/docs/guidelines/accessibility-label.md
diff --git a/docs/guidelines/accessibility-role.md → ...ite/docs/guidelines/accessibility-role.md b/docs/guidelines/accessibility-role.md → ...ite/docs/guidelines/accessibility-role.md
diff --git a/docs/guidelines/accessibility-states.md → ...e/docs/guidelines/accessibility-states.md b/docs/guidelines/accessibility-states.md → ...e/docs/guidelines/accessibility-states.md
diff --git a/docs/guidelines/android-list-feature.gif → .../docs/guidelines/android-list-feature.gif b/docs/guidelines/android-list-feature.gif → .../docs/guidelines/android-list-feature.gif
diff --git a/docs/guidelines/animations.md → website/docs/guidelines/animations.md b/docs/guidelines/animations.md → website/docs/guidelines/animations.md
diff --git a/docs/guidelines/bottomsheet.md → website/docs/guidelines/bottomsheet.md b/docs/guidelines/bottomsheet.md → website/docs/guidelines/bottomsheet.md
diff --git a/docs/guidelines/carousel.md → website/docs/guidelines/carousel.md b/docs/guidelines/carousel.md → website/docs/guidelines/carousel.md
diff --git a/docs/guidelines/contrast.md → website/docs/guidelines/contrast.md b/docs/guidelines/contrast.md → website/docs/guidelines/contrast.md
diff --git a/docs/guidelines/email-field-with-error.png → ...ocs/guidelines/email-field-with-error.png b/docs/guidelines/email-field-with-error.png → ...ocs/guidelines/email-field-with-error.png
diff --git a/docs/guidelines/focus.md → website/docs/guidelines/focus.md b/docs/guidelines/focus.md → website/docs/guidelines/focus.md
diff --git a/docs/guidelines/forms.md → website/docs/guidelines/forms.md b/docs/guidelines/forms.md → website/docs/guidelines/forms.md
diff --git a/docs/guidelines/grouping.md → website/docs/guidelines/grouping.md b/docs/guidelines/grouping.md → website/docs/guidelines/grouping.md
diff --git a/docs/guidelines/guidelines.md → website/docs/guidelines/guidelines.md b/docs/guidelines/guidelines.md → website/docs/guidelines/guidelines.md
@@ -1,5 +1,4 @@
 ---
-slug: /
 sidebar_position: 1
 ---
 

diff --git a/docs/guidelines/headers.md → website/docs/guidelines/headers.md b/docs/guidelines/headers.md → website/docs/guidelines/headers.md
diff --git a/docs/guidelines/lists-grids.md → website/docs/guidelines/lists-grids.md b/docs/guidelines/lists-grids.md → website/docs/guidelines/lists-grids.md
diff --git a/docs/guidelines/minimum-size.md → website/docs/guidelines/minimum-size.md b/docs/guidelines/minimum-size.md → website/docs/guidelines/minimum-size.md
diff --git a/docs/guidelines/next-key.jpg → website/docs/guidelines/next-key.jpg b/docs/guidelines/next-key.jpg → website/docs/guidelines/next-key.jpg
diff --git a/docs/guidelines/pour.md → website/docs/guidelines/pour.md b/docs/guidelines/pour.md → website/docs/guidelines/pour.md
diff --git a/docs/guidelines/text.md → website/docs/guidelines/text.md b/docs/guidelines/text.md → website/docs/guidelines/text.md
diff --git a/docs/guidelines/timed-actions.md → website/docs/guidelines/timed-actions.md b/docs/guidelines/timed-actions.md → website/docs/guidelines/timed-actions.md
diff --git a/...uidelines/type-of-accessibility-issues.md → ...uidelines/type-of-accessibility-issues.md b/...uidelines/type-of-accessibility-issues.md → ...uidelines/type-of-accessibility-issues.md
-Original file line number
+Diff line change
@@ -1,5 +1,4 @@
     ---
-    slug: /
     sidebar_position: 0
     ---
@@ Expand Down @@