Update docs readme and intro for next version (#240)

* Update AMA readme with next package docs

* fix highlighting

* Update AMA intro doc and title

* add missing quotes on height

README.md

@@ -7,45 +7,85 @@
 [![github][github-image]][github-url] [![npm][npm-image]][npm-url] [![docs][docs-image]][docs-url] [![Maintenance Status][maintenance-image]](#maintenance-status)
 
 A.M.A. stands for **A**ccessible **M**obile **A**pp and is react native library that aim offers the best accessibility tooling experience and guides to guide you through accessibility best practices while you code your app.
-That's why we created A.M.A., a set of [components](https://commerce.nearform.com/open-source/react-native-ama/components/),
-[hooks](https://commerce.nearform.com/open-source/react-native-ama/components/) designed to enforce minimum accessibility requirements.
-This is combined with extensive [guidelines](https://commerce.nearform.com/open-source/react-native-ama/guidelines/) to help you how accessibility should work when manually testing your app.
+That's why we created A.M.A., a set of components and hooks designed to enforce minimum accessibility requirements.
+This is combined with extensive [guidelines](https://commerce.nearform.com/open-source/react-native-ama/guidelines/) to help you understand how accessibility should work when manually testing your app. Finally we have provided a [checklist](https://commerce.nearform.com/open-source/react-native-ama/checklist/) which condenses these guidelines, explaining their intended functionality against specific features or components.
 
-![Example of runtime failure detected by AMA](https://github.com/FormidableLabs/react-native-ama/blob/main/docs/ama/ama-demo.png?raw=true)
+While in development AMA also provides run time accessibility checks against components
 
-This is an example of a runtime failure detected by AMA.
+#### Example of AMA checks performed in development:
 
-## Installation
+<img alt="Example of runtime failure detected by AMA" src="https://github.com/FormidableLabs/react-native-ama/blob/main/website/docs/ama/ama-demo.png?raw=true" height=700 />
+
+> [!NOTE]  
+> This is an example of a runtime failure detected by AMA with additional information and links to guidelines provided in the console.
+
+**Example of additional console info**:
+<img alt="Example of console warning by AMA" src="https://github.com/FormidableLabs/react-native-ama/blob/main/website/docs/ama-console-error.png?raw=true" width=550 />
+
+## Getting started
+
+AMA is made of the following packages:
+
+- `@react-native-ama/core`: the core components and hooks, providers and consumers used by AMA packages
+- `@react-native-ama/animations`: to create accessible animations
+- `@react-native-ama/react-native`: for accessibility-first React Native replacement components
+- `@react-native-ama/forms`: to create accessible forms
+- `@react-native-ama/lists`: to create accessible lists
+- `@react-native-ama/extras`: extra compound components and hooks beyond the scope of the base React Native components for building accessible react native apps
+
+The `core` package, is the minimum installable setup for AMA to function. This package contains the AMA context provider and consumer as well various other hooks and utilities for focusing, WCAG checks, accessibility tree management, etc.
+
+Start off by installing `core` and wrapping your app in the `<AMAProvider>`. Then add any other AMA packages you wish to make use of for building an accessible mobile app.
+
+**1. Install the `core` package**:
 
 ```sh
-yarn add -D react-native-ama
-# or
-npm install -D react-native-ama
+yarn add @react-native-ama/core
+```
+
+#### or
+
+```sh
+npm install @react-native-ama/core
+```
+
+**2. Wrap App in `<AMAProvider>`**
+
+```jsx {2-4,6,8-9}
+import { AMAProvider } from '@react-native-ama/core';
+
+export const App = () => {
+  return (
+    <AMAProvider>
+      <YourApp />
+    </AMAProvider>
+  );
+};
 ```
 
 ## 📃 [Documentation](https://commerce.nearform.com/open-source/react-native-ama)
 
-The documentation contains everything you need to know about `react-native-ama` and contains several sections in order of importance when you first get started:
+The documentation contains everything you need to know about `@react-native-ama/...`. It contains several sections in order of importance when you first get started:
 
 - **[Getting started](https://commerce.nearform.com/open-source/react-native-ama/)** — contains the "Getting Started" guide.
-- **[Components](https://commerce.nearform.com/open-source/react-native-ama/components)** — overview of all the components available `react-native-ama`.
-- **[Hooks](https://commerce.nearform.com/open-source/react-native-ama/hooks/useAMAContext)** — overview of all the hooks available
-- **[Guidelines](https://commerce.nearform.com/open-source/react-native-ama/guidelines)** — guidelines enforced by AMA components
+- **[Packages](https://commerce.nearform.com/open-source/react-native-ama/core/packages/)** — documentation for each package under React Native AMA
+- **[Guidelines](https://commerce.nearform.com/open-source/react-native-ama/guidelines/)** — guidelines enforced by AMA components
+- **[Checklist](https://commerce.nearform.com/open-source/react-native-ama/checklist/)** — guidelines enforced by AMA components
 
-_You can find the raw markdown files inside this repository's `docs` folder._
+_You can find the raw markdown files inside this repository's `docs` folders._
 
 ## 🤝 Contributing
 
 Please see our [Contributing](./CONTRIBUTING.md) guide.
 
 ## Maintenance Status
 
-**Active:** Formidable is actively working on this project, and we expect to continue work on this project for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
+**Active:** NearForm (Previously Formidable) is actively working on this project, and we expect to continue work on this project for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
 
 [github-image]: https://github.com/FormidableLabs/react-native-ama/workflows/Run%20Tests/badge.svg
 [github-url]: https://github.com/FormidableLabs/react-native-ama/actions
-[npm-image]: https://img.shields.io/npm/v/react-native-ama
-[npm-url]: https://www.npmjs.com/package/react-native-ama
+[npm-image]: https://img.shields.io/npm/v/@react-native-ama/core
+[npm-url]: https://www.npmjs.com/package/@react-native-ama/core
 [docs-image]: https://img.shields.io/badge/docs-visit%20site-blue
 [docs-url]: https://commerce.nearform.com/open-source/react-native-ama/
 [maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg?color=brightgreen&style=flat

packages/core/docs/core.md

@@ -41,10 +41,10 @@ For more detailed information about the config file, please refer to [this docum
 
 You must include the [AMAProvider](./AMAProvider.md) in your app, as some components and hooks require it.
 
-```jsx {1-4,8-9}
+```jsx {2-4,6,8-9}
 import { AMAProvider } from '@react-native-ama/core';
 
-const App = () => {
+export const App = () => {
   return (
     <AMAProvider>
       <YourApp />

website/docs/ama/intro.md

@@ -1,6 +1,6 @@
 ---
 slug: /
-title: React Native AMA
+title: AMA Introduction
 sidebar_position: 0
 displayed_sidebar: docs
 ---
@@ -9,22 +9,23 @@ displayed_sidebar: docs
 
 A.M.A. stands for **A**ccessible **M**obile **A**pp and is a React native library that offers the best accessibility tooling experience and guides to guide you through accessibility best practices while you code your app.
 
-That's why we created A.M.A., a set of [components](https://formidable.com/open-source/react-native-ama/components/) and
-[hooks](https://formidable.com/open-source/react-native-ama/components/) designed to enforce minimum accessibility requirements.
-This is combined with extensive [guidelines](https://formidable.com/open-source/react-native-ama/guidelines/) to help you understand how accessibility should work when manually testing your app.
+That's why we created A.M.A., a set of components and hooks designed to enforce minimum accessibility requirements.
+This is combined with extensive [guidelines](https://commerce.nearform.com/open-source/react-native-ama/guidelines/) to help you understand how accessibility should work when manually testing your app. Finally we have provided a [checklist](https://commerce.nearform.com/open-source/react-native-ama/checklist/) which condenses these guidelines, explaining their intended functionality against specific features or components.
 
-:::info
-
-The library does not perform any accessibility checks on the production build!
+AMA consists of a family of packages under the npm `@react-native-ama` namespace. These packages are designed to work together to build up an accessible mobile app allowing developers to subscribe to the bits they need without installing the full set of packages from the start. All packages leverage the `@react-native-ama/core` package to provide accessible mobile app functionality. This package must be installed first before any others can work.
 
-:::
-
-## Run time dev tooling
+## Run time dev tooling (Accessibility Checks)
 
 Adopting an "accessibility-first" approach is the best way to ensure that digital experiences are inclusive for everyone. By prioritizing accessibility in the early stages of code development, you avoid needing time-consuming and expensive retroactive fixes.
 
 React Native provides the necessary tools to create accessible apps[^1]. However, it leaves the developer on their own to determine what and when to use them. AMA solves this issue[^1] by conducting accessibility checks during your app's runtime [^1].
 
+:::info
+
+The library does not perform any accessibility checks on the production build!
+
+:::
+
 ### Example of a failed accessibility check
 
 If AMA detects an accessibility issue:
@@ -33,13 +34,14 @@ 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/website/docs/ama/ama-demo.png?raw=true)
+<img alt="Example of runtime failure detected by AMA" src="https://github.com/FormidableLabs/react-native-ama/blob/main/website/docs/ama/ama-demo.png?raw=true" height="900" />
+
 _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/website/docs/ama-console-error.png?raw=true)
-_Additional information and guideline link provided by AMA_
+_Additional information and guideline link provided by AMA in the console_
 
 [^1]: The accessibility support in React Native is [not fully complete](https://github.com/facebook/react-native/projects/15).
 [^1]: AMA can help catch common accessibility issues, but a full manual test is still necessary.