├── .eslintignore ├── .eslintrc ├── .expo-shared └── assets.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── App.tsx ├── LICENSE ├── README.md ├── app.json ├── assets ├── adaptive-icon.png ├── favicon.png ├── icon.png └── splash.png ├── babel.config.js ├── babel.js ├── docs └── assets │ └── logo.png ├── jest.config.js ├── package.json ├── src ├── components │ ├── Button │ │ ├── Button.tsx │ │ └── __tests__ │ │ │ ├── Button.test.tsx │ │ │ └── __snapshots__ │ │ │ └── Button.test.tsx.snap │ ├── CoreTextInput │ │ └── CoreTextInput.tsx │ ├── LoginForm │ │ ├── LoginForm.tsx │ │ └── __tests__ │ │ │ └── LoginForm.test.tsx │ ├── PressableImage │ │ ├── PressableImage.tsx │ │ └── __tests__ │ │ │ ├── PressableImage.test.tsx │ │ │ └── __snapshots__ │ │ │ └── PressableImage.test.tsx.snap │ └── Url │ │ ├── Url.tsx │ │ └── __tests__ │ │ └── Url.test.tsx ├── containers │ ├── CreateAccount │ │ └── CreateAccount.tsx │ ├── LoginContainer │ │ └── LoginContainer.tsx │ ├── NavigationMenu │ │ └── NavigationMenu.tsx │ └── ProfileCard │ │ └── ProfileCard.tsx ├── index.tsx └── styles │ └── DefaultViewStyle.tsx ├── storybook ├── addons.js ├── index.js ├── rn-addons.js └── stories │ ├── Button │ └── Button.stories.tsx │ ├── CenterView │ ├── index.js │ └── style.js │ ├── CoreTextInput │ └── CoreTextInput.stories.tsx │ ├── CreateAccount │ └── CreateAccount.stories.tsx │ ├── LoginForm │ └── LoginForm.stories.tsx │ ├── NavigationMenu │ └── NavigationMenu.stories.tsx │ ├── ProfileCard │ └── ProfileCard.stories.tsx │ ├── Welcome │ ├── Welcome.stories.js │ └── index.js │ └── index.js ├── tsconfig.build.json ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | # generated by bob 3 | lib/ -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "extends": ["@callstack"], 6 | "plugins": ["react-native"], 7 | "rules": { 8 | "one-var": "off", 9 | "no-multi-assign": "off", 10 | "no-nested-ternary": "off", 11 | "no-undef": "off", 12 | "global-require": "off", 13 | 14 | "import/no-extraneous-dependencies": "off", 15 | "import/first": "off", 16 | 17 | "react-native/no-unused-styles": "error", 18 | "react-native/split-platform-components": "off", 19 | "react-native/no-raw-text": "off" 20 | }, 21 | "settings": { 22 | "import/extensions": [".js", ".ts", ".tsx"], 23 | "import/parsers": { 24 | "@typescript-eslint/parser": [".ts", ".tsx"] 25 | }, 26 | "import/resolver": { 27 | "node": { 28 | "extensions": [".js", ".ts", ".tsx"] 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | package-lock.json 13 | # macOS 14 | .DS_Store 15 | # generated by bob 16 | lib/ -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | lib 2 | /.* 3 | node_modules 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "semi": true, 5 | "singleQuote": true, 6 | "printWidth": 80 7 | 8 | } 9 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | export { default } from './storybook'; 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 OSLabs Beta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | acrn-logo 3 |

4 |

acrn-rn

5 |

6 | An accessibility first component library and development environment for React Native.
7 |

8 | 9 | --- 10 | 11 | ![build-badge][build] 12 | [![Version][version-badge]][package] 13 | [![MIT License][license-badge]][license] 14 | [![PRs Welcome][prs-welcome-badge]][prs-welcome] 15 | 16 | ## Features 17 | 18 | - Customizable accessibility presets for indiviual components, as well as containers designed to provide standalone accessible experiences. 19 | - Works on both iOS and Android 20 | - Sandbox Expo based Storybook environment for developers to build and test components 21 | - Preconfigured tools to create and package your own component library 22 | 23 | ## Try it Out 24 | 25 | - `git clone` this respository and `yarn install` 26 | - Run `yarn storybook` to launch the Storybook server 27 | - Run `yarn web`, `yarn ios`, or `yarn android` to launch the Storybook app in Expo and begin building or testing components 28 | 29 | ## Using the Components 30 | 31 | - Simply `npm install acrn-rn` in your React Native project and import any of the components or containers listed in `node_modules/acrn-rn/src/index.tsx` 32 | 33 | ## Building and Demoing Your Own Components 34 | 35 | - Create a folder for your component in the `src` directory 36 | - To view your components in Storybook, create a `stories.tsx` file for your component in `/storybook/stories/` and import it in `/storybook/stories/index.js` 37 | - If you plan on importing your components into other projects, create an entry for your component in `/src/index.tsx`. You can then use `yarn prepare` to build your `src` directory for CommonJS, ES modules, and Typescript, configuring the `"react-native-builder-bob"` field in your `package.json` as needed 38 | 39 | ## Testing Your Components with Jest 40 | 41 | - create a `__tests__` subdirectory in the directory containing your component and place a `test.tsx` file inside 42 | - simply run `yarn test` or `yarn test ` to execute the tests in your `__tests__` directories 43 | 44 | ## Configuring Your Expo App 45 | 46 | - Adjust any fields in `app.json` to configure your expo app as needed. 47 | - Keep in mind that `"entryPoint"` must be specified in order to prevent Expo's default behavior, which attempts to launch from the `"main"` field in your `package.json` 48 | - The default entrypoint provided by `expo-init` is `./node_modules/expo/AppEntry.js`, which will attempt to look for an `App.tsx` file in the root directory of your project 49 | 50 | 51 | 52 | [build-badge]: https://img.shields.io/circleci/project/github/callstack/react-native-paper/main.svg?style=flat-square 53 | [build]: https://img.shields.io/badge/build-passing-success 54 | [version-badge]: https://img.shields.io/npm/v/acrn-rn 55 | [package]: https://www.npmjs.com/package/acrn-rn 56 | [license-badge]: https://img.shields.io/npm/l/react-native-paper.svg?style=flat-square 57 | [license]: https://opensource.org/licenses/MIT 58 | [prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square 59 | [prs-welcome]: http://makeapullrequest.com 60 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "acrn", 4 | "slug": "acrn", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "entryPoint": "./node_modules/expo/AppEntry.js", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "updates": { 15 | "fallbackToCacheTimeout": 0 16 | }, 17 | "assetBundlePatterns": ["**/*"], 18 | "ios": { 19 | "supportsTablet": true 20 | }, 21 | "android": { 22 | "adaptiveIcon": { 23 | "foregroundImage": "./assets/adaptive-icon.png", 24 | "backgroundColor": "#FFFFFF" 25 | } 26 | }, 27 | "web": { 28 | "favicon": "./assets/favicon.png" 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/acrn/407a2e3ac3a45640b85ce7f3e1993b0ec5fac225/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/acrn/407a2e3ac3a45640b85ce7f3e1993b0ec5fac225/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/acrn/407a2e3ac3a45640b85ce7f3e1993b0ec5fac225/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/acrn/407a2e3ac3a45640b85ce7f3e1993b0ec5fac225/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | sourceMaps: true, 6 | plugins: ['@babel/transform-react-jsx-source'], 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /babel.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./lib/module/babel/index.js'); 2 | -------------------------------------------------------------------------------- /docs/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/acrn/407a2e3ac3a45640b85ce7f3e1993b0ec5fac225/docs/assets/logo.png -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-expo', 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "acrn-rn", 3 | "version": "1.0.2", 4 | "description": "An accessibility first component library for React Native", 5 | "keywords": [ 6 | "android", 7 | "ios", 8 | "react native", 9 | "component library", 10 | "accessibility" 11 | ], 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/oslabs-beta/acrn" 15 | }, 16 | "license": "MIT", 17 | "main": "lib/commonjs/index.js", 18 | "module": "lib/module/index.js", 19 | "source": "src/index.tsx", 20 | "react-native": "src/index.tsx", 21 | "types": "lib/typescript/index.d.ts", 22 | "files": [ 23 | "src", 24 | "lib", 25 | "babel.js" 26 | ], 27 | "scripts": { 28 | "android": "expo start --android", 29 | "build-storybook": "build-storybook", 30 | "eject": "expo eject", 31 | "format": "prettier -w .", 32 | "ios": "expo start --ios", 33 | "lint": "eslint --ext '.js,.ts,.tsx' .", 34 | "prepare": "bob build", 35 | "start": "expo start", 36 | "storybook": "start-storybook -p 7007", 37 | "test": "jest", 38 | "tsc": "tsc --noEmit", 39 | "web": "expo start --web" 40 | }, 41 | "devDependencies": { 42 | "@babel/core": "^7.17.9", 43 | "@babel/preset-env": "^7.16.11", 44 | "@babel/preset-typescript": "^7.16.7", 45 | "@babel/runtime": "^7.10.3", 46 | "@callstack/eslint-config": "^9.0.0", 47 | "@react-navigation/native": "^6.0.10", 48 | "@react-navigation/native-stack": "^6.6.1", 49 | "@storybook/addon-actions": "^5.3", 50 | "@storybook/addon-essentials": "^6.4.20", 51 | "@storybook/addon-interactions": "^6.4.20", 52 | "@storybook/addon-knobs": "^5.3", 53 | "@storybook/addon-links": "^5.3", 54 | "@storybook/addon-ondevice-actions": "^5.3.23", 55 | "@storybook/addon-ondevice-knobs": "^5.3.25", 56 | "@storybook/react": "^6.4.20", 57 | "@storybook/react-native": "^5.3.25", 58 | "@storybook/react-native-server": "^5.3.23", 59 | "@storybook/testing-library": "^0.0.9", 60 | "@testing-library/react-native": "^9.1.0", 61 | "@types/color": "^3.0.0", 62 | "@types/jest": "^24.0.13", 63 | "@types/node": "^13.1.0", 64 | "@types/react": "~17.0.21", 65 | "@types/react-dom": "^16.8.4", 66 | "@types/react-native": "^0.66.1", 67 | "@types/react-native-vector-icons": "^6.4.1", 68 | "@types/react-test-renderer": "^17.0.1", 69 | "@typescript-eslint/eslint-plugin": "^5.9.0", 70 | "@typescript-eslint/parser": "^5.9.0", 71 | "babel-cli": "^6.26.0", 72 | "babel-core": "^7.0.0-bridge.0", 73 | "babel-jest": "^26.6.3", 74 | "babel-loader": "^8.2.3", 75 | "babel-test": "^0.1.1", 76 | "eslint": "^6.7.2", 77 | "eslint-config-callstack-io": "^1.1.1", 78 | "eslint-plugin-prettier": "^3.0.0", 79 | "eslint-plugin-react-native": "^3.5.0", 80 | "expo": "~44.0.0", 81 | "expo-status-bar": "~1.2.0", 82 | "jest": "^27.5.1", 83 | "jest-expo": "^44.0.1", 84 | "metro-react-native-babel-preset": "^0.70.1", 85 | "prettier": "^2.5.0", 86 | "react": "^17.0.2", 87 | "react-dom": "17.0.2", 88 | "react-native": "0.64.3", 89 | "react-native-builder-bob": "^0.17.1", 90 | "react-native-safe-area-context": "3.3.2", 91 | "react-native-screens": "~3.10.1", 92 | "react-native-testing-library": "^1.5.0", 93 | "react-native-vector-icons": "~6.3.0", 94 | "react-native-web": "0.17.1", 95 | "react-test-renderer": "^17.0.2", 96 | "ts-jest": "^27.1.4", 97 | "ts-node": "^10.7.0", 98 | "typescript": "^4.6.3" 99 | }, 100 | "peerDependencies": { 101 | "react": "*", 102 | "react-native": "*", 103 | "react-native-vector-icons": "*" 104 | }, 105 | "react-native-builder-bob": { 106 | "source": "src", 107 | "output": "lib", 108 | "targets": [ 109 | "commonjs", 110 | "module", 111 | [ 112 | "typescript", 113 | { 114 | "project": "tsconfig.build.json" 115 | } 116 | ] 117 | ] 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/components/Button/Button.tsx: -------------------------------------------------------------------------------- 1 | import { PressableProps, Pressable, Text, StyleSheet } from 'react-native'; 2 | import React from 'react'; 3 | 4 | interface Props extends PressableProps { 5 | /** 6 | * text displayed inside button 7 | */ 8 | text: string; 9 | accessibilityLabel?: string; 10 | } 11 | 12 | /** 13 | * ## Usage 14 | * ```js 15 | * import React from 'react'; 16 | * import { PressableProps, Pressable, Text } from 'react-native'; 17 | * import { Button } from 'acrn-rn'; 18 | * 19 | * const [credentialsAreSubmittable, setCredentialsAreSubmittable] = useState(false); 20 | * 21 | * const MyComponent = () => ( 22 | *