├── .gitignore ├── LICENSE ├── Makefile ├── README.md ├── docs ├── accessibility.md ├── css-style-guide.md ├── js-guide.md └── typechecking-faqs.md ├── packages ├── convert-to-es-modules │ ├── README.md │ ├── index.js │ ├── package.json │ ├── src │ │ ├── convert-exports.js │ │ ├── convert-imports.js │ │ ├── sort-imports.js │ │ └── util.js │ ├── test │ │ ├── convert-exports-test.js │ │ ├── convert-imports-test.js │ │ └── sort-imports-test.js │ └── yarn.lock └── eslint-config-hypothesis │ ├── .prettierrc │ ├── CHANGELOG.md │ ├── README.md │ ├── base.js │ ├── index.js │ ├── jsx.js │ ├── package.json │ ├── react.js │ └── ts.js └── tools ├── print-change-list.py └── requirements.txt /.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013-2016 Hypothes.is Project and contributors 2 | 3 | Redistribution and use in source and binary forms, with or without 4 | modification, are permitted provided that the following conditions are met: 5 | 6 | 1. Redistributions of source code must retain the above copyright notice, this 7 | list of conditions and the following disclaimer. 8 | 2. Redistributions in binary form must reproduce the above copyright notice, 9 | this list of conditions and the following disclaimer in the documentation 10 | and/or other materials provided with the distribution. 11 | 12 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 13 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 14 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 15 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 16 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 17 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 18 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 19 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 20 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 21 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 22 | 23 | 24 | Subcomponents 25 | 26 | The project includes a number of subcomponents with separate 27 | copyright notices and license terms. Your use of the code for the these 28 | subcomponents is subject to the terms and conditions of the following licenses. 29 | 30 | For the AngularJS subcomponents: 31 | 32 | Copyright (c) 2014-2016 Google, Inc. http://angular.io 33 | 34 | Permission is hereby granted, free of charge, to any person obtaining a copy 35 | of this software and associated documentation files (the "Software"), to deal 36 | in the Software without restriction, including without limitation the rights 37 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 38 | copies of the Software, and to permit persons to whom the Software is 39 | furnished to do so, subject to the following conditions: 40 | 41 | The above copyright notice and this permission notice shall be included in 42 | all copies or substantial portions of the Software. 43 | 44 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 45 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 46 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 47 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 48 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 49 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 50 | THE SOFTWARE. 51 | 52 | For the annotator subcomponent: 53 | 54 | Copyright 2012 Aron Carroll, Rufus Pollock, and Nick Stenning. 55 | 56 | Permission is hereby granted, free of charge, to any person obtaining a copy 57 | of this software and associated documentation files (the "Software"), to deal 58 | in the Software without restriction, including without limitation the rights 59 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 60 | copies of the Software, and to permit persons to whom the Software is 61 | furnished to do so, subject to the following conditions: 62 | 63 | The above copyright notice and this permission notice shall be included in 64 | all copies or substantial portions of the Software. 65 | 66 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 67 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 68 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 69 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 70 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 71 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 72 | THE SOFTWARE. 73 | 74 | For the KaTeX subcomponent: 75 | 76 | The MIT License (MIT) 77 | 78 | Copyright (c) 2015 Khan Academy 79 | 80 | Permission is hereby granted, free of charge, to any person obtaining a copy 81 | of this software and associated documentation files (the "Software"), to deal 82 | in the Software without restriction, including without limitation the rights 83 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 84 | copies of the Software, and to permit persons to whom the Software is 85 | furnished to do so, subject to the following conditions: 86 | 87 | The above copyright notice and this permission notice shall be included in all 88 | copies or substantial portions of the Software. 89 | 90 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 91 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 92 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 93 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 94 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 95 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 96 | SOFTWARE. 97 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | .PHONY: deps 2 | deps: 3 | pip3 install -r tools/requirements.txt 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Hypothesis Front-end Toolkit 2 | ============================ 3 | 4 | This repository contains shared tools, documentation and resources for 5 | front-end projects in Hypothesis. 6 | 7 | ## Documentation 8 | 9 | The `docs/` folder contains our style guides and other documentation which is 10 | useful when writing Hypothesis code across different projects. 11 | 12 | * [JavaScript guide](docs/js-guide.md) 13 | * The [CSS Style Guide](docs/css-style-guide.md) 14 | * Guidelines for [creating accessible web user interfaces](docs/accessibility.md) 15 | 16 | ## Packages 17 | 18 | The `packages/` folder contains a set of npm packages that provide resources such 19 | as base config files for front-end tooling, utility scripts etc. that are 20 | useful across multiple Hypothesis projects. These include: 21 | 22 | - [**eslint-config-hypothesis**](packages/eslint-config-hypothesis) - A [shareable configuration](http://eslint.org/docs/developer-guide/shareable-configs) 23 | for ESLint 24 | 25 | ### Publishing package updates 26 | 27 | Prerequisites: 28 | 29 | - Set up an npm account with 2FA enabled, and ask a lead developer to add you to 30 | the [Hypothesis](https://www.npmjs.com/settings/hypothesis/packages) 31 | organization in npm 32 | - Ensure that the package you want to publish is associated with the `developers` 33 | team in this organization 34 | 35 | To publish a new version of a package: 36 | 37 | 1. Ensure any changes you want to include have been merged. Then check out the 38 | `main` branch of the repository and switch to the package's directory. 39 | 2. Add an entry for the new version of the package in the changelog. 40 | See https://keepachangelog.com/en/1.0.0/ for details of the format that we use. 41 | 3. Run `npm version` with appropriate flags (eg. `npm version minor`) to update 42 | the package version. 43 | 4. Commit and push the changes from the previous step 44 | 5. Run `npm publish` to publish the new version 45 | -------------------------------------------------------------------------------- /docs/accessibility.md: -------------------------------------------------------------------------------- 1 | Accessibility Guidance 2 | ====================== 3 | 4 | This document provides guidance and links to useful resources and tools for 5 | creating web-based content & interfaces which are accessible to the widest 6 | possible range of users. 7 | 8 | It is not intended to be exhaustive but rather to highlight important best 9 | practices and provide a shared reference which is useful when implementing or 10 | reviewing UI changes. 11 | 12 | ## Guidelines 13 | 14 | ### Mobile 15 | 16 | 1. **Use media queries to adapt layout to display size** - Use `@media` queries 17 | to adjust the layout depending on screen size to provide more usable 18 | interfaces on small screens. 19 | 1. **Make interactive controls big enough to tap.** Make sure any UI controls 20 | that respond to taps are large enough to tap easily with a finger. 21 | 22 | * Interactive controls should generally be at least 44x44px in size on 23 | touch-screen devices. 24 | * Use `@media (pointer: coarse)` to adjust the size of tap-able items on 25 | devices with touch screens. 26 | 1. **Use semantic markup.** Use appropriate semantic HTML elements for 27 | individual items on a page (headings, links, buttons) as well as regions 28 | (navigation, main content, header and footer). This enables the user agent to 29 | provide various affordances such as smarter hit testing. 30 | 1. **Use large font sizes for input fields.** Input fields should use a 16px font or 31 | larger to make them easily readable and to prevent iOS Safari "zooming in" 32 | when the field is focused. 33 | 34 | ### Assistive Technology (eg. Screen Readers) 35 | 36 | 1. **Use semantic markup.** Use appropriate semantic HTML elements for 37 | individual items on a page (headings, links, buttons) as well as regions 38 | (navigation, main content, header and footer). Use of these elements helps 39 | assistive technology to: 40 | 41 | 1. Provide helpful descriptions of items. 42 | 1. Identify major landmarks on the page for faster navigation. 43 | 1. Identify important elements of a particular type (forms, links, headings) 44 | for faster navigation. 45 | 1. Group elements together appropriately for navigation. 46 | 1. **Associate text labels with items.** 47 | * Ensure that any buttons or links which do not have an explicit text label 48 | have an accessible label set via the `aria-label` attribute. 49 | * Ensure that form elements have either a placeholder or associated `