Bootstrap project and add initial annotation components

.babelrc.js

@@ -0,0 +1,33 @@
+export default {
+  presets: [
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        importSource: 'preact',
+      },
+    ],
+    [
+      '@babel/preset-env',
+      {
+        bugfixes: true,
+        modules: false, // Produce ES module output
+      },
+    ],
+  ],
+  env: {
+    development: {
+      presets: [
+        [
+          '@babel/preset-react',
+          {
+            development: true,
+            runtime: 'automatic',
+            importSource: 'preact',
+          },
+        ],
+      ],
+    },
+  },
+};

.github/dependabot.yml

@@ -0,0 +1,27 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: weekly
+    time: "10:00"
+  open-pull-requests-limit: 10
+  groups:
+    babel:
+      patterns:
+        - '@babel/*'
+    eslint:
+      patterns:
+        - 'eslint*'
+        - 'typescript-eslint'
+    rollup:
+      patterns:
+        - 'rollup'
+        - '@rollup/*'
+    typescript-types:
+      patterns:
+        - '@types/*'
+    vitest:
+      patterns:
+        - 'vitest'
+        - '@vitest/*'

.github/wip.yml

@@ -0,0 +1,8 @@
+locations:
+- title
+- label_name
+- commit_subject
+terms:
+- do not merge
+- fixup
+- wip

.github/workflows/continuous-integration.yml

@@ -0,0 +1,33 @@
+name: Continuous integration
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+    - name: Cache the node_modules dir
+      uses: actions/cache@v4
+      with:
+        path: node_modules
+        key: ${{ runner.os }}-node_modules-${{ hashFiles('yarn.lock') }}
+    - name: Install
+      run: yarn install --immutable && yarn playwright install chromium
+    - name: Format
+      run: yarn checkformatting
+    - name: Lint
+      run: yarn lint
+    - name: Typecheck
+      run: yarn typecheck
+    - name: Test
+      run: yarn test
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v4
+      with:
+        files: ./coverage/coverage-final.json
+        token: ${{ secrets.CODECOV_TOKEN }}
+

.github/workflows/npm-publish.yml

@@ -0,0 +1,24 @@
+name: Publish annotation-ui package
+on:
+  release:
+    types:
+      - published
+jobs:
+  build-and-publish-package:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+    - name: Setup Nodejs
+      uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+        registry-url: 'https://registry.npmjs.org'
+    - name: Install
+      run: yarn install --immutable
+    - name: Build lib files
+      run: yarn build
+    - name: Publish package
+      run: npm publish --access public
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,28 @@
+/build/
+lib/
+node_modules/
+coverage/
+
+.eslintcache
+
+# This project uses Yarn rather than npm to manage the lockfile.
+package-lock.json
+
+.tox
+
+# yalc related files
+yalc.lock
+.yalc/
+
+# See https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored.
+# This is the "If you're not using Zero-Installs" list.
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# TypeScript cache
+*.tsbuildinfo

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-3.6.0.cjs
+nodeLinker: node-modules

Makefile

@@ -0,0 +1,52 @@
+.PHONY: default
+default: help
+
+.PHONY: help
+help:
+	@echo "make help              Show this help message"
+	@echo "make build             Build the package"
+	@echo "make checkformatting   Check code formatting"
+	@echo "make clean             Delete development artefacts (cached files etc.)"
+	@echo "make format            Automatically format code"
+	@echo "make lint              Run the code linter(s) and print any warnings"
+	@echo "make sure              Make sure that the formatter, linter, tests, etc all pass"
+	@echo "make test              Run the unit tests once"
+
+.PHONY: test
+test: node_modules/.uptodate
+ifdef ARGS
+	yarn test $(ARGS)
+else
+	yarn test
+endif
+
+.PHONY: lint
+lint: node_modules/.uptodate
+	yarn run lint
+	yarn run typecheck
+
+.PHONY: clean
+clean:
+	rm -f node_modules/.uptodate
+	rm -rf lib
+	rm -rf build
+
+.PHONY: format
+format: node_modules/.uptodate
+	yarn run format
+
+.PHONY: checkformatting
+checkformatting: node_modules/.uptodate
+	yarn run checkformatting
+
+.PHONY: sure
+sure: checkformatting lint test
+
+.PHONY: build
+build: node_modules/.uptodate
+	yarn run build
+
+node_modules/.uptodate: package.json yarn.lock
+	yarn install
+	yarn playwright install chromium
+	@touch $@

README.md

@@ -0,0 +1,32 @@
+# `@hypothesis/annotation-ui`
+
+UI components to simplify rendering Hypothesis annotation cards in Preact + Tailwind-based applications.
+
+### Installation
+
+Your project must have `preact` and `tailwindcss` as dependencies.
+
+```sh
+$ yarn add preact tailwindcss
+$ yarn add @hypothesis/annotation-ui
+```
+
+### tailwindcss configuration
+
+Update your project's tailwind configuration:
+
+```js
+export default {
+  content: [
+    // Be sure to add this project's component source to your
+    // tailwind content globs
+    './node_modules/@hypothesis/annotation-ui',
+  ],
+  // ...
+```
+
+## Usage
+
+```js
+import { MarkdownView, StyledText } from '@hypothesis/annotation-ui';
+```

codecov.yml

@@ -0,0 +1,14 @@
+coverage:
+  status:
+    project:
+      default:
+        target: 100%
+        threshold: 0%
+    patch:
+      default:
+        # basic
+        target: 100%
+        threshold: 0%
+        # advanced
+        if_ci_failed: error
+        only_pulls: false

eslint.config.js

@@ -0,0 +1,12 @@
+import hypothesisBase from 'eslint-config-hypothesis/base';
+import hypothesisJSX from 'eslint-config-hypothesis/jsx';
+import hypothesisTS from 'eslint-config-hypothesis/ts';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig(
+  globalIgnores(['.yalc/**', 'lib/**', 'build/**']),
+
+  hypothesisBase,
+  hypothesisJSX,
+  hypothesisTS,
+);

gulpfile.js

@@ -0,0 +1,25 @@
+import { buildCSS, runTests } from '@hypothesis/frontend-build';
+import gulp from 'gulp';
+
+import tailwindConfig from './tailwind.config.js';
+
+// The following tasks bundle assets for the pattern library for use locally
+// during development. Bundled JS and CSS are not published with the package.
+
+gulp.task('build-test-css', () =>
+  buildCSS(['./test/tailwind.scss'], { tailwindConfig }),
+);
+
+// Some (eg. a11y) tests rely on CSS bundles. We assume that JS will always take
+// longer to build than CSS, so build in parallel.
+gulp.task(
+  'test',
+  gulp.parallel('build-test-css', () =>
+    runTests({
+      bootstrapFile: 'test/bootstrap.js',
+      rollupConfig: 'rollup-tests.config.js',
+      vitestConfig: 'vitest.config.js',
+      testsPattern: 'src/**/*-test.js',
+    }),
+  ),
+);