Split ama (#125)

.eslintrc.js

@@ -6,14 +6,18 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/no-unused-vars': 'off',
+    'react-hooks/rules-of-hooks': 'off',
   },
-  extends: ['@react-native-community'],
+  parserOptions: {
+    project: ['./tsconfig.json'],
+  },
+  extends: ['@react-native'],
   plugins: ['jest', 'import'],
   ignorePatterns: [
-    'metro.config.js',
-    'dist/**/*',
-    'website/**/*',
-    'coverage/**/*',
-    '__mocks__/**/*',
+    '**/**/metro.config.js',
+    '**/dist/**/*',
+    '**/website/**/*',
+    '**/coverage/**/*',
+    '**/__mocks__/**/*',
   ],
 };

.gitattributes

@@ -0,0 +1 @@
+*.excalidraw filter=lfs diff=lfs merge=lfs -text

.github/workflows/release.yml

@@ -31,7 +31,7 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: Install Dependencies
-        run: yarn install && yarn run example
+        run: yarn install && yarn run example:bare
 
       - name: Build library
         run: yarn run build

.github/workflows/run-tests.yml

@@ -33,10 +33,5 @@ jobs:
       - name: TypeScript Check
         run: yarn ts:check
 
-      - name: TypeScript Example Check
-        run: |
-          yarn example
-          yarn example ts:check
-
-      - name: Tests
-        run: yarn test
+      # - name: Core Tests
+      #   run: yarn test

.gitignore

@@ -37,3 +37,5 @@ DerivedData
 *.xcuserstate
 /coverage/
 .vscode
+coverage
+.expo

.husky/post-checkout

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-checkout'.\n"; exit 2; }
+git lfs post-checkout "$@"

.husky/post-commit

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-commit'.\n"; exit 2; }
+git lfs post-commit "$@"

.husky/post-merge

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-merge'.\n"; exit 2; }
+git lfs post-merge "$@"

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn lint && yarn ts:check && yarn example ts:check
+# TODO: Restore
+#yarn lint && yarn ts:check && yarn example ts:check

.husky/pre-push

@@ -1,4 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn test && yarn coverage
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/pre-push'.\n"; exit 2; }
+git lfs pre-push "$@"
+
+# TODO: Restore me
+# yarn test && yarn coverage

.nvmrc

@@ -0,0 +1 @@
+v16

CONTRIBUTING.md

@@ -14,7 +14,7 @@ Then you can lint and test after making your changes:
 # Lint and tests
 $ yarn lint
 $ yarn ts:check
-$ yarn example ts:check
+$ yarn example:bare ts:check
 $ yarn test
 
 ```

babel.base.js

@@ -0,0 +1,40 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: './',
+        extensions: [
+          '.ios.ts',
+          '.android.ts',
+          '.ts',
+          '.ios.tsx',
+          '.android.tsx',
+          '.tsx',
+          '.jsx',
+          '.js',
+          '.json',
+          'jpg',
+          'jpeg',
+        ],
+        alias: {
+          '@react-native-ama/core/src': `${__dirname}/packages/core/src`,
+          '@react-native-ama/core': `${__dirname}/packages/core/src`,
+          '@react-native-ama/internal/src': `${__dirname}/packages/internal/src`,
+          '@react-native-ama/internal': `${__dirname}/packages/internal/src`,
+          '@react-native-ama/animations/src': `${__dirname}/packages/animations/src`,
+          '@react-native-ama/animations': `${__dirname}/packages/animations/src`,
+          '@react-native-ama/extras/src': `${__dirname}/packages/extras/src`,
+          '@react-native-ama/extras': `${__dirname}/packages/extras/src`,
+          '@react-native-ama/lists/src': `${__dirname}/packages/lists/src`,
+          '@react-native-ama/lists': `${__dirname}/packages/lists/src`,
+          '@react-native-ama/react-native/src': `${__dirname}/packages/react-native/src`,
+          '@react-native-ama/react-native': `${__dirname}/packages/react-native/src`,
+          '@react-native-ama/internal/src': `${__dirname}/packages/internal/src`,
+          '@react-native-ama/internal': `${__dirname}/packages/internal/src`,
+        },
+      },
+    ],
+  ],
+};

docs/ama/config-file.md

@@ -0,0 +1,104 @@
+# Config file
+
+AMA comes with predefined rules and severity for the built-in components and hooks. Those rules have been created to improve the accessibility of those elements and should always be respected.
+
+Customizing log levels can be done via the `ama.config.json` file to handle edge cases that are out of our control, and require breaking a rule or two.
+
+:::info
+
+The library does not perform any accessibility checks on the production build!
+
+:::
+
+## The log levels
+
+AMA guidelines are categorised as:
+
+- <Must /> and <MustNot />: Those best practices are <b>enforced</b> and AMA overlays an error when fail
+- <Should /> and <ShouldNot />: Those best practices are <b>preferred</b> and AMA prints only prints a warning message when fail
+
+The possible log levels are:
+
+- **error**: The AMA error overlay when a check fails
+- **warn**: A `console.warn` is performed when a check fails
+
+### AMA Rules
+
+| Log key                                                               | Guideline   | Default | Can override |
+| --------------------------------------------------------------------- | ----------- | ------- | ------------ |
+| [BOTTOM_SHEET_CLOSE_ACTION](../guidelines/bottomsheet)                | <Must />    | error   | <Yes />      |
+| [CONTRAST_FAILED](../guidelines/contrast)                             | <Must />    | error   | <Yes />      |
+| [CONTRAST_FAILED_AAA](../guidelines/contrast)                         | <Should />  | warn    | <Yes />      |
+| [FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE](../guidelines/lists-grids)    | <Should />  | warn    | <Yes />      |
+| [FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE](../guidelines/lists-grids)      | <Must />    | error   | <Yes />      |
+| [MINIMUM_SIZE](../guidelines/minimum-size.md)                         | <Must />    | error   | <Yes />      |
+| [NO_ACCESSIBILITY_LABEL](../guidelines/accessibility-label)[^1]       | <Must />    | error   | <No />       |
+| [NO_ACCESSIBILITY_ROLE](../guidelines/accessibility-rol) [^1]         | <Must />    | error   | <No />       |
+| [NO_FORM_LABEL](../guidelines/forms)                                  | <Must />    | error   | <Yes />      |
+| [NO_FORM_ERROR](../guidelines/forms)                                  | <Must />    | error   | <Yes />      |
+| [NO_KEYBOARD_TRAP](../guidelines/keyboard-trap.md) [^1]               | <MustNot /> | error   | <No />       |
+| [UPPERCASE_TEXT_NO_ACCESSIBILITY_LABEL](../guidelines/uppercase-text) | <MustNot /> | error   | <Yes />      |
+| [NO_UPPERCASE_TEXT](../guidelines/uppercase-text)                     | <MustNot /> | error   | <Yes />      |
+
+:::note
+
+Rules marked with <No /> are considered bad practices and cannot be turned off!
+:::
+
+### Constants
+
+Elements that perform a contrast check do it on all the children up to the level specified by `CONTRAST_CHECKER_MAX_DEPTH`.
+
+| Constant key               | Default value |
+| -------------------------- | ------------- |
+| CONTRAST_CHECKER_MAX_DEPTH | 5             |
+
+```json
+{
+  "CONTRAST_CHECKER_MAX_DEPTH": 0
+}
+```
+
+:::tip
+This can be turned off by specifying a level of **0**
+:::
+
+### accessibilityLabelExceptions
+
+AMA performs various checks, including one for [uppercase](/guideliens/uppercase). This rule allows specifying a list of approved all-caps accessibility labels.
+
+```json
+{
+  "accessibilityLabelExceptions": ["FAQ"]
+}
+```
+
+## Customising the log levels
+
+Create a JSON file called `ama.config.json` in the project's root folder to customise the log rules, then specify the custom log level for the wanted key.
+
+### Example
+
+The JSON file does not need to contain all log keys. AMA uses the default rule if a key is not present:
+
+```json
+{
+  "CONTRAST_FAILED": "warn",
+  "CONTRAST_CHECKER_MAX_DEPTH": 0,
+  "accessibilityLabelExceptions": ["FAQ"]
+}
+```
+
+:::caution
+
+Whenever the `ama.rules.json` file is updated, update the copy within the `node_modules` folder and restart the development server.
+
+```bash
+cp ama.rules.json node_modules/react-native-ama/
+
+yarn start
+```
+
+:::
+
+[^1]: The rule cannot be overridden

docs/ama/getting-started.md

@@ -0,0 +1,40 @@
+---
+sidebar_position: 1
+---
+
+# Getting started
+
+AMA is made of the following packages:
+
+- `react-native-ama` the core components and hooks
+- `react-native-ama/animations` to create accessible animations
+- `react-native-ama/forms` to create accessible forms
+- `react-native-ama/lists` to create accessible lists
+- `react-native-ama/react-native` for accessibility-first React Native replacement components
+
+### Config File
+
+If you install the `react-native-ama` package, the ama.rules.json file should be generated automatically. In case it doesn't generate automatically:
+
+```bash
+
+echo "{}" >> ama.rules.json
+cd node_modules/react-native-ama
+ln -s ../../ama.rules.json .
+```
+
+### Jest
+
+When running a test, if jest fails with the following error:
+
+> Cannot find module './../../ama.rules.json' from 'node_modules/react-native-ama/dist/commonjs/internal/logger.js'
+
+add those lines to the `.jest.config.js` file:
+
+```js
+jest.mock('react-native-ama/dist/commonjs/internal/logger.js', () => {
+  return {
+    getContrastCheckerMaxDepth: () => 5,
+  };
+});
+```

docs/ama/intro.md

@@ -0,0 +1,45 @@
+---
+slug: /
+title: React Native AMA
+sidebar_position: 0
+---
+
+# Accessibility as a First-Class Citizen with React Native AMA
+
+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.
+
+:::info
+
+The library does not perform any accessibility checks on the production build!
+
+:::
+
+## Run time dev tooling
+
+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].
+
+### Example of a failed accessibility check
+
+If AMA detects an accessibility issue:
+
+- Highlight the offending component
+- 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_
+
+<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_
+
+[^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.
+[^1]: Runtime checks are performed **ONLY** in the dev build when **DEV** is true. In production mode, the checking code is stripped away.

docs/introduction/usage.md → docs/ama/usage.md

@@ -1,14 +1,22 @@
 # Usage
 
+## Installation
+
+```bash npm2yarn
+npm install -D react-native-ama
+```
+
 ## The provider
 
 You need to add the [AMAProvider](../components/AMAProvider) to your app as is needed by some components/hooks.
 
-```jsx
+```jsx {1-4,8-9}
+import { AMAProvider } from 'react-native-ama';
+
 const App = () => {
   return (
     <AMAProvider>
-      <AppNavigator />
+      <YourApp />
     </AMAProvider>
   );
 };