├── .npmrc
├── packages
├── cli
│ ├── README.md
│ ├── bin.js
│ ├── src
│ │ ├── errors.ts
│ │ ├── logger.ts
│ │ └── index.ts
│ ├── package.json
│ └── CHANGELOG.md
├── source-comments
│ ├── src
│ │ ├── __fixtures__
│ │ │ ├── todo.js
│ │ │ ├── fixme.js
│ │ │ └── question.js
│ │ ├── index.test.ts
│ │ ├── __snapshots__
│ │ │ └── index.test.ts.snap
│ │ └── index.ts
│ ├── package.json
│ └── CHANGELOG.md
├── react
│ ├── src
│ │ ├── popover
│ │ │ ├── index.ts
│ │ │ ├── popover.ts
│ │ │ ├── popper.ts
│ │ │ └── utils.ts
│ │ ├── index.ts
│ │ ├── marking
│ │ │ ├── NoteContext.ts
│ │ │ ├── Note.tsx
│ │ │ └── NotePanel.tsx
│ │ ├── icons.tsx
│ │ └── tokens.ts
│ ├── package.json
│ └── CHANGELOG.md
├── source-react
│ ├── src
│ │ ├── __fixtures__
│ │ │ ├── without-purpose.js
│ │ │ ├── with-purpose-fixme.js
│ │ │ ├── with-purpose-todo.js
│ │ │ ├── with-purpose-question.js
│ │ │ ├── with-child-comp.js
│ │ │ └── with-child-func.js
│ │ ├── index.test.ts
│ │ ├── __snapshots__
│ │ │ └── index.test.ts.snap
│ │ └── index.ts
│ ├── package.json
│ └── CHANGELOG.md
├── test-utils
│ ├── src
│ │ ├── index.ts
│ │ └── run-fixtures.ts
│ ├── package.json
│ └── CHANGELOG.md
├── types
│ ├── source
│ │ └── package.json
│ ├── src
│ │ ├── source.ts
│ │ └── index.ts
│ ├── package.json
│ └── CHANGELOG.md
├── output-json
│ ├── src
│ │ └── index.ts
│ ├── package.json
│ └── CHANGELOG.md
├── output-csv
│ ├── src
│ │ └── index.ts
│ ├── package.json
│ └── CHANGELOG.md
└── output-html
│ ├── package.json
│ ├── src
│ ├── index.tsx
│ ├── icons.tsx
│ ├── tokens.ts
│ └── NotePanel.tsx
│ └── CHANGELOG.md
├── pnpm-workspace.yaml
├── test-project
├── next.config.js
├── next-env.d.ts
├── test-file.tsx
├── tsconfig.json
├── pages
│ ├── _app.js
│ ├── index.css
│ └── index.tsx
├── package.json
└── CHANGELOG.md
├── .gitignore
├── babel.config.js
├── .changeset
├── config.json
└── README.md
├── .github
└── workflows
│ ├── main.yml
│ └── changeset-release.yml
├── package.json
├── README.md
└── tsconfig.json
/.npmrc:
--------------------------------------------------------------------------------
1 | save-workspace-protocol = false
--------------------------------------------------------------------------------
/packages/cli/README.md:
--------------------------------------------------------------------------------
1 | # @markings/cli
2 |
--------------------------------------------------------------------------------
/packages/source-comments/src/__fixtures__/todo.js:
--------------------------------------------------------------------------------
1 | // TODO: thing
2 |
--------------------------------------------------------------------------------
/packages/source-comments/src/__fixtures__/fixme.js:
--------------------------------------------------------------------------------
1 | // FIXME: something
2 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "packages/*"
3 | - "test-project"
4 |
--------------------------------------------------------------------------------
/packages/react/src/popover/index.ts:
--------------------------------------------------------------------------------
1 | export { usePopover } from "./popover";
2 |
--------------------------------------------------------------------------------
/packages/source-comments/src/__fixtures__/question.js:
--------------------------------------------------------------------------------
1 | // QUESTION: a question
2 |
--------------------------------------------------------------------------------
/test-project/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require("@preconstruct/next")();
2 |
--------------------------------------------------------------------------------
/packages/cli/bin.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | "use strict";
3 |
4 | require(".");
5 |
--------------------------------------------------------------------------------
/packages/react/src/index.ts:
--------------------------------------------------------------------------------
1 | export { MarkingProvider, Marking } from "./marking/Note";
2 |
--------------------------------------------------------------------------------
/packages/source-react/src/__fixtures__/without-purpose.js:
--------------------------------------------------------------------------------
1 | ;
2 |
--------------------------------------------------------------------------------
/packages/test-utils/src/index.ts:
--------------------------------------------------------------------------------
1 | export { snapshotMarkingsFromFixtures } from "./run-fixtures";
2 |
--------------------------------------------------------------------------------
/test-project/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
--------------------------------------------------------------------------------
/packages/source-react/src/__fixtures__/with-purpose-fixme.js:
--------------------------------------------------------------------------------
1 | ;
2 |
--------------------------------------------------------------------------------
/packages/source-react/src/__fixtures__/with-purpose-todo.js:
--------------------------------------------------------------------------------
1 | ;
2 |
--------------------------------------------------------------------------------
/packages/types/source/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/types.cjs.js",
3 | "module": "dist/types.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/source-react/src/__fixtures__/with-purpose-question.js:
--------------------------------------------------------------------------------
1 | ;
2 |
--------------------------------------------------------------------------------
/packages/source-react/src/__fixtures__/with-child-comp.js:
--------------------------------------------------------------------------------
1 |
2 | Hi
3 | ;
4 |
--------------------------------------------------------------------------------
/packages/source-react/src/__fixtures__/with-child-func.js:
--------------------------------------------------------------------------------
1 |
2 | {(props) => Hi }
3 | ;
4 |
--------------------------------------------------------------------------------
/packages/source-react/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { snapshotMarkingsFromFixtures } from "@markings/test-utils";
2 | import { source } from ".";
3 |
4 | snapshotMarkingsFromFixtures(__dirname, source);
5 |
--------------------------------------------------------------------------------
/packages/source-comments/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { snapshotMarkingsFromFixtures } from "@markings/test-utils";
2 | import { source } from ".";
3 |
4 | snapshotMarkingsFromFixtures(__dirname, source);
5 |
--------------------------------------------------------------------------------
/packages/output-json/src/index.ts:
--------------------------------------------------------------------------------
1 | import { Output } from "@markings/types";
2 |
3 | export const output: Output = {
4 | getFile(markings) {
5 | return JSON.stringify(markings, null, 2);
6 | },
7 | };
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | *.log
4 | .cache
5 | .DS_Store
6 | public
7 | scratchings.js
8 | test-project/output.json
9 | test-project/output.csv
10 | test-project/output.html
11 | .next
12 | .vscode
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | "@babel/preset-env",
4 | "@babel/preset-typescript",
5 | "@babel/preset-react"
6 | ],
7 | plugins: ["@babel/plugin-transform-runtime"]
8 | };
9 |
--------------------------------------------------------------------------------
/packages/cli/src/errors.ts:
--------------------------------------------------------------------------------
1 | export class ExitError extends Error {
2 | code: number;
3 | constructor(code: number) {
4 | super(`The process should exit with code ${code}`);
5 | this.code = code;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/test-project/test-file.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Marking } from "@markings/react";
3 |
4 | // TODO: figure out x
5 |
6 | let x = (
7 |
8 | content
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@0.2.1/schema.json",
3 | "changelog": [
4 | "@changesets/changelog-github",
5 | { "repo": "Thinkmill/markings" }
6 | ],
7 | "commit": false,
8 | "linked": [],
9 | "access": "public"
10 | }
11 |
--------------------------------------------------------------------------------
/packages/output-json/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/output-json",
3 | "version": "0.0.9",
4 | "main": "dist/output-json.cjs.js",
5 | "module": "dist/output-json.esm.js",
6 | "license": "MIT",
7 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/output-json",
8 | "dependencies": {
9 | "@markings/types": "^0.2.0"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/output-csv/src/index.ts:
--------------------------------------------------------------------------------
1 | import stringifyToCsv from "csv-stringify/lib/sync";
2 | import { Output } from "@markings/types";
3 |
4 | export const output: Output = {
5 | getFile(markings) {
6 | return stringifyToCsv(
7 | markings.map(({ location, ...x }) => ({
8 | ...x,
9 | filename: location.filename
10 | })),
11 | { header: true }
12 | );
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/packages/output-csv/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/output-csv",
3 | "version": "0.0.8",
4 | "main": "dist/output-csv.cjs.js",
5 | "module": "dist/output-csv.esm.js",
6 | "license": "MIT",
7 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/output-csv",
8 | "dependencies": {
9 | "@babel/runtime": "^7.8.7",
10 | "@markings/types": "^0.2.0",
11 | "csv-stringify": "^5.3.6"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/test-project/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": false,
6 | "skipLibCheck": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "module": "esnext",
9 | "resolveJsonModule": true,
10 | "jsx": "preserve"
11 | },
12 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
13 | "exclude": ["node_modules"]
14 | }
15 |
--------------------------------------------------------------------------------
/packages/source-comments/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/source-comments",
3 | "version": "0.1.1",
4 | "main": "dist/source-comments.cjs.js",
5 | "module": "dist/source-comments.esm.js",
6 | "license": "MIT",
7 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/source-comments",
8 | "dependencies": {
9 | "@babel/types": "^7.8.7",
10 | "@markings/test-utils": "^0.0.4",
11 | "@markings/types": "^0.2.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with mono-repos or single package repos to help you verion and release your code. You can find the full documentation for it [in our repository](https://github.com/changesets/changesets)
4 |
5 | We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
6 |
--------------------------------------------------------------------------------
/packages/types/src/source.ts:
--------------------------------------------------------------------------------
1 | // this is in a different entrypoint because importing the Babel types is EXPENSIVE(I've seen it take ~10 seconds to type check)
2 | // and it's not providing value to people who aren't writing their own source
3 | // but the main entrypoint will be used
4 |
5 | import { PartialMarking } from ".";
6 | import { Visitor } from "@babel/traverse";
7 |
8 | export type Source = {
9 | type: "babel";
10 | visitor: Visitor<{
11 | addMarking: (marking: PartialMarking) => void;
12 | }>;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/types/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/types",
3 | "version": "0.2.0",
4 | "main": "dist/types.cjs.js",
5 | "module": "dist/types.esm.js",
6 | "license": "MIT",
7 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/types",
8 | "dependencies": {
9 | "@babel/traverse": "^7.8.6",
10 | "@babel/types": "^7.8.7",
11 | "@types/babel__traverse": "^7.0.9"
12 | },
13 | "preconstruct": {
14 | "entrypoints": [
15 | "index.ts",
16 | "source.ts"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/source-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/source-react",
3 | "version": "0.2.1",
4 | "main": "dist/source-react.cjs.js",
5 | "module": "dist/source-react.esm.js",
6 | "license": "MIT",
7 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/source-react",
8 | "dependencies": {
9 | "@babel/runtime": "^7.8.7",
10 | "@babel/traverse": "^7.8.6",
11 | "@babel/types": "^7.8.7",
12 | "@markings/test-utils": "^0.0.4",
13 | "@markings/types": "^0.2.0",
14 | "@types/babel__traverse": "^7.0.9"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/output-html/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/output-html",
3 | "version": "0.2.1",
4 | "main": "dist/output-html.cjs.js",
5 | "module": "dist/output-html.esm.js",
6 | "files": [
7 | "dist/*",
8 | "!**/*.d.ts"
9 | ],
10 | "license": "MIT",
11 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/output-html",
12 | "dependencies": {
13 | "@babel/runtime": "^7.8.7",
14 | "@emotion/react": "^11.0.0",
15 | "@markings/types": "^0.2.0",
16 | "react": "^16.13.0",
17 | "react-dom": "^16.13.0"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^16.9.23",
21 | "@types/react-dom": "^16.9.5"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/test-project/pages/_app.js:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { MarkingProvider } from "@markings/react";
3 |
4 | import "./index.css";
5 |
6 | const config = {
7 | resolveIssueCreatePath: ({ description, purpose }) =>
8 | `https://github.com/thinkmill/markings/issues/new?title=${purpose}&body=${encodeURIComponent(
9 | description
10 | )}`,
11 | resolveIssuePath: (id) =>
12 | `https://github.com/thinkmill/markings/issues/${id}`,
13 | resolvePrPath: (id) => `https://github.com/thinkmill/markings/pull/${id}`,
14 | };
15 |
16 | export default ({ Component, pageProps }) => (
17 |
18 |
19 |
20 | );
21 |
--------------------------------------------------------------------------------
/test-project/pages/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | /* color: #344563;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif; */
6 | margin: 0;
7 | font-feature-settings: "liga";
8 | text-rendering: optimizelegibility;
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | }
12 |
13 | code {
14 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
15 | }
16 |
17 | img {
18 | max-width: 100%;
19 | }
20 |
21 | .stack {
22 | display: flex;
23 | flex-direction: column;
24 | }
25 |
26 | .stack > *:not(style) ~ *:not(style) {
27 | margin-top: 1rem;
28 | }
29 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | pull_request:
8 |
9 | jobs:
10 | typescript:
11 | name: TypeScript
12 | runs-on: ubuntu-latest
13 | steps:
14 | - uses: actions/checkout@master
15 |
16 | - name: Set Node.js 14.x
17 | uses: actions/setup-node@master
18 | with:
19 | node-version: 14.x
20 |
21 | - uses: actions/cache@v1
22 | with:
23 | path: ~/.pnpm-store
24 | key: pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
25 | restore-keys: pnpm-
26 |
27 | - name: Install pnpm
28 | run: npm i -g pnpm
29 |
30 | - name: Install Dependencies
31 | run: pnpm i
32 |
33 | - name: Check Types
34 | run: pnpm run types
35 |
--------------------------------------------------------------------------------
/packages/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/react",
3 | "version": "0.5.1",
4 | "main": "dist/react.cjs.js",
5 | "module": "dist/react.esm.js",
6 | "license": "MIT",
7 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/react",
8 | "dependencies": {
9 | "@babel/runtime": "^7.8.7",
10 | "@emotion/hash": "^0.8.0",
11 | "@emotion/react": "^11.0.0",
12 | "@markings/types": "^0.2.0",
13 | "@popperjs/core": "^2.0.6"
14 | },
15 | "peerDependencies": {
16 | "@types/react": "*",
17 | "@types/react-dom": "*",
18 | "react": "^16.13.0",
19 | "react-dom": "^16.13.0"
20 | },
21 | "devDependencies": {
22 | "@types/react": "^16.9.23",
23 | "@types/react-dom": "^16.9.5",
24 | "react": "^16.13.0",
25 | "react-dom": "^16.13.0"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/source-comments/src/__snapshots__/index.test.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`fixme 1`] = `
4 | // FIXME: something
5 |
6 | ↓ ↓ ↓ ↓ ↓ ↓
7 |
8 | [
9 | {
10 | "description": "something",
11 | "purpose": "fixme",
12 | "location": {
13 | "line": 1
14 | }
15 | }
16 | ]
17 | `;
18 |
19 | exports[`question 1`] = `
20 | // QUESTION: a question
21 |
22 | ↓ ↓ ↓ ↓ ↓ ↓
23 |
24 | [
25 | {
26 | "description": "a question",
27 | "purpose": "question",
28 | "location": {
29 | "line": 1
30 | }
31 | }
32 | ]
33 | `;
34 |
35 | exports[`todo 1`] = `
36 | // TODO: thing
37 |
38 | ↓ ↓ ↓ ↓ ↓ ↓
39 |
40 | [
41 | {
42 | "description": "thing",
43 | "purpose": "todo",
44 | "location": {
45 | "line": 1
46 | }
47 | }
48 | ]
49 | `;
50 |
--------------------------------------------------------------------------------
/packages/output-html/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Output } from "@markings/types";
3 | import { renderToStaticMarkup } from "react-dom/server";
4 | import { NotePanel } from "./NotePanel";
5 |
6 | export const output: Output = {
7 | getFile(markings) {
8 | return `
9 |
10 |
11 |
12 |
16 |
20 |
21 |
22 | ${renderToStaticMarkup( )}
23 |
24 | `;
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/packages/types/src/index.ts:
--------------------------------------------------------------------------------
1 | export const PURPOSES = ["question", "todo", "fixme"] as const;
2 |
3 | export type Purpose = typeof PURPOSES[number];
4 |
5 | export type RecordOfPurposes = { [index: string]: Purpose };
6 |
7 | export type PartialMarking = {
8 | location: {
9 | line: number;
10 | };
11 | purpose: Purpose;
12 | description: string;
13 | };
14 |
15 | export type Marking = {
16 | location: {
17 | line: number;
18 | filename: string;
19 | link?: string;
20 | };
21 | purpose: Purpose;
22 | description: string;
23 | source: string;
24 | package: string;
25 | };
26 |
27 | export type Output = {
28 | getFile: (markings: Marking[]) => Promise | string;
29 | };
30 |
31 | export type Config = {
32 | sources: {
33 | source: string;
34 | include: string[];
35 | }[];
36 | outputs: {
37 | output: string;
38 | filename: string;
39 | }[];
40 | };
41 |
--------------------------------------------------------------------------------
/packages/cli/src/logger.ts:
--------------------------------------------------------------------------------
1 | import chalk from "chalk";
2 | import util from "util";
3 |
4 | export function format(
5 | args: Array,
6 | messageType: "error" | "success" | "info",
7 | scope?: string
8 | ) {
9 | let prefix = {
10 | error: chalk.red("error"),
11 | success: chalk.green("success"),
12 | info: chalk.cyan("info")
13 | }[messageType];
14 | let fullPrefix = "📝 " + prefix + (scope === undefined ? "" : " " + scope);
15 | return (
16 | fullPrefix +
17 | util
18 | .format("", ...args)
19 | .split("\n")
20 | .join("\n" + fullPrefix + " ")
21 | );
22 | }
23 | export function error(message: string, scope?: string) {
24 | console.error(format([message], "error", scope));
25 | }
26 |
27 | export function success(message: string, scope?: string) {
28 | console.log(format([message], "success", scope));
29 | }
30 |
31 | export function info(message: string, scope?: string) {
32 | console.log(format([message], "info", scope));
33 | }
34 |
--------------------------------------------------------------------------------
/packages/test-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/test-utils",
3 | "version": "0.0.4",
4 | "main": "dist/test-utils.cjs.js",
5 | "module": "dist/test-utils.esm.js",
6 | "license": "MIT",
7 | "dependencies": {
8 | "@babel/core": "^7.9.6",
9 | "@babel/parser": "^7.8.6",
10 | "@babel/runtime": "^7.8.7",
11 | "@babel/traverse": "^7.8.6",
12 | "@manypkg/get-packages": "^1.0.0",
13 | "@markings/types": "^0.2.0",
14 | "@types/babel__core": "^7.1.6",
15 | "@types/babel__traverse": "^7.0.9",
16 | "@types/jest-in-case": "^1.0.1",
17 | "@types/parse-github-url": "^1.0.0",
18 | "chalk": "^2.4.2",
19 | "fs-extra": "^8.1.0",
20 | "globby": "^11.0.0",
21 | "jest-in-case": "^1.0.2",
22 | "meow": "^5.0.0",
23 | "normalize-path": "^3.0.0",
24 | "p-limit": "^2.2.1",
25 | "parse-github-url": "^1.0.2"
26 | },
27 | "devDependencies": {
28 | "fixturez": "^1.1.0",
29 | "strip-ansi": "^6.0.0"
30 | },
31 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/test-utils"
32 | }
33 |
--------------------------------------------------------------------------------
/packages/react/src/marking/NoteContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from "react";
2 |
3 | import { Purpose } from "@markings/types";
4 |
5 | type IssueId = number | string;
6 |
7 | export type MarkingType = {
8 | description: string;
9 | issue?: IssueId;
10 | purpose: Purpose;
11 | };
12 |
13 | export type ConfigType = {
14 | resolveIssueCreatePath: ({
15 | description,
16 | purpose,
17 | }: {
18 | description: string;
19 | purpose: Purpose;
20 | }) => string;
21 | resolveIssuePath: (id: IssueId) => string;
22 | resolvePrPath: (id: IssueId) => string;
23 | };
24 | export type ContextType = {
25 | enabled: boolean;
26 | register: (id: string, props: MarkingType) => string | undefined;
27 | unregister: (id: string) => void;
28 | };
29 |
30 | export const MarkingContext = createContext(undefined);
31 |
32 | export const useMarkingRegistry = () => {
33 | const ctx = useContext(MarkingContext);
34 | if (!ctx) {
35 | throw Error("You must wrap the app with the MarkingProvider.");
36 | }
37 | return ctx;
38 | };
39 |
--------------------------------------------------------------------------------
/packages/cli/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/cli",
3 | "version": "0.0.14",
4 | "main": "dist/cli.cjs.js",
5 | "module": "dist/cli.esm.js",
6 | "license": "MIT",
7 | "bin": {
8 | "markings": "./bin.js"
9 | },
10 | "dependencies": {
11 | "@babel/core": "^7.9.6",
12 | "@babel/parser": "^7.8.6",
13 | "@babel/runtime": "^7.8.7",
14 | "@babel/traverse": "^7.8.6",
15 | "@manypkg/get-packages": "^1.0.0",
16 | "@markings/types": "^0.2.0",
17 | "@types/babel__core": "^7.1.6",
18 | "@types/babel__traverse": "^7.0.9",
19 | "@types/normalize-path": "^3.0.0",
20 | "@types/parse-github-url": "^1.0.0",
21 | "chalk": "^2.4.2",
22 | "fs-extra": "^8.1.0",
23 | "globby": "^11.0.0",
24 | "meow": "^5.0.0",
25 | "normalize-path": "^3.0.0",
26 | "p-limit": "^2.2.1",
27 | "parse-bitbucket-url": "^0.3.0",
28 | "parse-github-url": "^1.0.2"
29 | },
30 | "devDependencies": {
31 | "fixturez": "^1.1.0",
32 | "strip-ansi": "^6.0.0"
33 | },
34 | "repository": "https://github.com/Thinkmill/markings/tree/master/packages/cli"
35 | }
36 |
--------------------------------------------------------------------------------
/.github/workflows/changeset-release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | jobs:
9 | release:
10 | name: Release
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Checkout Repo
14 | uses: actions/checkout@master
15 | with:
16 | fetch-depth: 0
17 |
18 | - name: Set Node.js 14.x
19 | uses: actions/setup-node@master
20 | with:
21 | node-version: 14.x
22 |
23 | - uses: actions/cache@v1
24 | with:
25 | path: ~/.pnpm-store
26 | key: pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
27 | restore-keys: pnpm-
28 |
29 | - name: Install pnpm
30 | run: npm i -g pnpm
31 |
32 | - name: Install Dependencies
33 | run: pnpm i
34 |
35 | - name: "Create Pull Request or Publish to npm"
36 | uses: changesets/action@master
37 | with:
38 | publish: pnpm run release
39 | version: pnpm run version
40 | env:
41 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
42 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
43 |
--------------------------------------------------------------------------------
/packages/source-comments/src/index.ts:
--------------------------------------------------------------------------------
1 | import { RecordOfPurposes } from "@markings/types";
2 | import { Source } from "@markings/types/source";
3 |
4 | import * as BabelTypes from "@babel/types";
5 |
6 | let commentPurposes: RecordOfPurposes = {
7 | TODO: "todo",
8 | FIXME: "fixme",
9 | QUESTION: "question",
10 | };
11 | let commentTypes = Object.keys(commentPurposes);
12 |
13 | export const source: Source = {
14 | type: "babel",
15 | visitor: {
16 | Program(path, { addMarking }) {
17 | let comments: BabelTypes.Comment[] = (path.parent as BabelTypes.File)
18 | .comments;
19 | for (let comment of comments) {
20 | if (comment.type === "CommentLine") {
21 | let value = comment.value.trim();
22 | let match = value.match(/([^:]+):(.+)/);
23 | if (match !== null && commentTypes.includes(match[1])) {
24 | addMarking({
25 | description: match[2].trim(),
26 | purpose: commentPurposes[match[1]],
27 | location: {
28 | line: comment.loc.start.line,
29 | },
30 | });
31 | }
32 | } else {
33 | // TODO: source from block comments(potentially with a jsdoc style) too
34 | }
35 | }
36 | },
37 | },
38 | };
39 |
--------------------------------------------------------------------------------
/packages/test-utils/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/test-utils
2 |
3 | ## 0.0.4
4 |
5 | ### Patch Changes
6 |
7 | - [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use updated @markings/types
8 |
9 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
10 | - @markings/types@0.2.0
11 |
12 | ## 0.0.3
13 |
14 | ### Patch Changes
15 |
16 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
17 | - @markings/types@0.1.0
18 |
19 | ## 0.0.2
20 |
21 | ### Patch Changes
22 |
23 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
24 |
25 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
26 | - @markings/types@0.0.7
27 |
28 | ## 0.0.1
29 |
30 | ### Patch Changes
31 |
32 | - [`a417548`](https://github.com/Thinkmill/markings/commit/a4175484f2af47e9db1f17677e6d8a33066267e7) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Initial Release
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/repo",
3 | "version": "1.0.0",
4 | "private": true,
5 | "license": "MIT",
6 | "repository": "https://github.com/Thinkmill/markings",
7 | "dependencies": {
8 | "@babel/core": "^7.9.6",
9 | "@babel/plugin-transform-runtime": "^7.9.6",
10 | "@babel/preset-env": "^7.9.6",
11 | "@babel/preset-react": "^7.9.4",
12 | "@babel/preset-typescript": "^7.9.0",
13 | "@changesets/changelog-github": "^0.2.1",
14 | "@changesets/cli": "^2.5.2",
15 | "@manypkg/cli": "^0.13.0",
16 | "@preconstruct/cli": "^2.0.1",
17 | "@types/fs-extra": "^8.0.1",
18 | "@types/jest": "^25.1.3",
19 | "jest": "^25.1.0",
20 | "jest-watch-typeahead": "^0.4.2",
21 | "typescript": "^3.8.3"
22 | },
23 | "jest": {
24 | "watchPlugins": [
25 | "jest-watch-typeahead/filename",
26 | "jest-watch-typeahead/testname"
27 | ]
28 | },
29 | "preconstruct": {
30 | "packages": [
31 | "packages/*"
32 | ],
33 | "distFilenameStrategy": "unscoped-package-name"
34 | },
35 | "prettier": {},
36 | "scripts": {
37 | "preinstall": "node -e \"!process.env.npm_config_user_agent.startsWith('pnpm/') && !console.log('Use https://pnpm.js.org/ to install dependencies in this repository\\n') && process.exit(1)\"",
38 | "postinstall": "preconstruct dev && manypkg check",
39 | "version": "changeset version && pnpm install --frozen-lockfile=false",
40 | "release": "preconstruct build && changeset publish",
41 | "start": "cd test-project && pnpm run start",
42 | "test": "jest",
43 | "types": "tsc"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/react/src/popover/popover.ts:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 |
3 | import { useMemo, useState } from "react";
4 |
5 | import { Modifier, Options, Placement, usePopper } from "./popper";
6 | import { useClickOutside, useKeyPress } from "./utils";
7 |
8 | type Modifiers = Modifier[];
9 |
10 | // Hook
11 | // ------------------------------
12 |
13 | export const usePopover = (
14 | placement: Placement = "bottom",
15 | modifiers?: Modifiers
16 | ) => {
17 | const [isOpen, setOpen] = useState(false);
18 | const openPopover = () => setOpen(true);
19 | const closePopover = () => setOpen(false);
20 |
21 | // prepare popper instance
22 | const config = useMemo(() => mergePopperConfig(placement, modifiers), [
23 | placement,
24 | modifiers
25 | ]);
26 | const [triggerRef, dialogRef] = usePopper(isOpen, config);
27 |
28 | // close on click outside
29 | useClickOutside({
30 | handler: closePopover,
31 | refs: [triggerRef, dialogRef],
32 | listenWhen: isOpen
33 | });
34 |
35 | // close on esc press
36 | useKeyPress({
37 | targetKey: "Escape",
38 | downHandler: closePopover,
39 | listenWhen: isOpen
40 | });
41 |
42 | return { isOpen, openPopover, closePopover, dialogRef, triggerRef };
43 | };
44 |
45 | // Utils
46 | // ------------------------------
47 |
48 | const mergePopperConfig = (
49 | placement: Placement,
50 | modifiers: Modifiers = []
51 | ) => ({
52 | placement: placement,
53 | modifiers: [
54 | {
55 | name: "offset",
56 | options: {
57 | offset: [0, 8]
58 | }
59 | },
60 | ...modifiers
61 | ]
62 | });
63 |
--------------------------------------------------------------------------------
/test-project/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@markings/test-project",
3 | "version": "1.1.3",
4 | "private": true,
5 | "license": "MIT",
6 | "dependencies": {
7 | "@markings/cli": "^0.0.14",
8 | "@markings/output-csv": "^0.0.8",
9 | "@markings/output-html": "^0.2.1",
10 | "@markings/output-json": "^0.0.9",
11 | "@markings/react": "^0.5.1",
12 | "@markings/source-comments": "^0.1.1",
13 | "@markings/source-react": "^0.2.1",
14 | "@preconstruct/next": "^1.0.1",
15 | "@types/node": "^13.7.7",
16 | "@types/react": "^16.9.23",
17 | "next": "^9.2.2",
18 | "react": "^16.13.0",
19 | "react-dom": "^16.13.0"
20 | },
21 | "scripts": {
22 | "markings": "markings",
23 | "markings:inspect": "NODE_OPTIONS=--inspect-brk markings",
24 | "start": "next"
25 | },
26 | "markings": {
27 | "sources": [
28 | {
29 | "source": "@markings/source-react",
30 | "include": [
31 | "test-file.tsx"
32 | ]
33 | },
34 | {
35 | "source": "@markings/source-comments",
36 | "include": [
37 | "test-file.tsx"
38 | ]
39 | }
40 | ],
41 | "outputs": [
42 | {
43 | "output": "@markings/output-json",
44 | "filename": "output.json"
45 | },
46 | {
47 | "output": "@markings/output-csv",
48 | "filename": "output.csv"
49 | },
50 | {
51 | "output": "@markings/output-html",
52 | "filename": "output.html"
53 | }
54 | ]
55 | },
56 | "repository": "https://github.com/Thinkmill/markings/tree/master/test-project"
57 | }
58 |
--------------------------------------------------------------------------------
/packages/react/src/popover/popper.ts:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect, useRef } from "react";
2 | import {
3 | Instance,
4 | Modifier as _Modifier,
5 | Options as _Options,
6 | Placement as _Placement,
7 | createPopper
8 | } from "@popperjs/core";
9 |
10 | export type Modifier = _Modifier;
11 | export type Options = _Options;
12 | export type Placement = _Placement;
13 |
14 | export const usePopper = (isActive = false, options: Partial) => {
15 | const referenceRef = useRef(null); // target, like
16 | const popperRef = useRef(null); // dialog, tooltip or similar
17 | const instanceRef = useRef(null); // the popper instance
18 |
19 | useLayoutEffect(() => {
20 | if (isActive && referenceRef.current && popperRef.current) {
21 | const popper = createPopper(
22 | referenceRef.current,
23 | popperRef.current,
24 | options
25 | );
26 |
27 | instanceRef.current = popper;
28 |
29 | return () => {
30 | popper.destroy();
31 | instanceRef.current = null;
32 | };
33 | }
34 |
35 | // NOTE: only called when the value of `isActive` changes.
36 | // The effect below will catch changes to the `options` object.
37 | // eslint-disable-next-line react-hooks/exhaustive-deps
38 | }, [isActive]);
39 |
40 | // update options when they change. object as compared by reference
41 | // so consumers must be careful about what they pass through.
42 | useLayoutEffect(() => {
43 | if (instanceRef.current) {
44 | instanceRef.current.setOptions(options);
45 | instanceRef.current.update();
46 | }
47 | }, [options]);
48 |
49 | return [referenceRef, popperRef];
50 | };
51 |
--------------------------------------------------------------------------------
/packages/react/src/icons.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 |
3 | import { jsx } from "@emotion/react";
4 |
5 | type IconProps = {
6 | fill?: string;
7 | size?: number;
8 | };
9 |
10 | const Icon = ({ fill = "currentColor", size = 16, ...props }: IconProps) => {
11 | return (
12 |
23 | );
24 | };
25 |
26 | // Exports
27 | // ------------------------------
28 |
29 | /*
30 | Paths borrowed from https://blueprintjs.com/docs/#icons
31 | */
32 |
33 | export const PinIcon = (props: IconProps) => (
34 |
35 |
39 |
40 | );
41 | export const AddIcon = (props: IconProps) => (
42 |
43 |
47 |
48 | );
49 | export const CrossIcon = (props: IconProps) => (
50 |
51 |
55 |
56 | );
57 |
--------------------------------------------------------------------------------
/packages/output-html/src/icons.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 |
3 | import { jsx } from "@emotion/react";
4 |
5 | type IconProps = {
6 | fill?: string;
7 | size?: number;
8 | };
9 |
10 | const Icon = ({ fill = "currentColor", size = 16, ...props }: IconProps) => {
11 | return (
12 |
23 | );
24 | };
25 |
26 | // Exports
27 | // ------------------------------
28 |
29 | /*
30 | Paths borrowed from https://blueprintjs.com/docs/#icons
31 | */
32 |
33 | export const PinIcon = (props: IconProps) => (
34 |
35 |
39 |
40 | );
41 | export const AddIcon = (props: IconProps) => (
42 |
43 |
47 |
48 | );
49 | export const CrossIcon = (props: IconProps) => (
50 |
51 |
55 |
56 | );
57 |
--------------------------------------------------------------------------------
/packages/output-csv/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/output-csv
2 |
3 | ## 0.0.8
4 |
5 | ### Patch Changes
6 |
7 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
8 | - @markings/types@0.2.0
9 |
10 | ## 0.0.7
11 |
12 | ### Patch Changes
13 |
14 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
15 | - @markings/types@0.1.0
16 |
17 | ## 0.0.6
18 |
19 | ### Patch Changes
20 |
21 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
22 |
23 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
24 | - @markings/types@0.0.7
25 |
26 | ## 0.0.5
27 |
28 | ### Patch Changes
29 |
30 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
31 | - @markings/types@0.0.6
32 |
33 | ## 0.0.4
34 |
35 | ### Patch Changes
36 |
37 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
38 | - @markings/types@0.0.5
39 |
40 | ## 0.0.3
41 |
42 | ### Patch Changes
43 |
44 | - Updated dependencies [[`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa)]:
45 | - @markings/types@0.0.4
46 |
47 | ## 0.0.2
48 |
49 | ### Patch Changes
50 |
51 | - Updated dependencies [[`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
52 | - @markings/types@0.0.3
53 |
54 | ## 0.0.1
55 |
56 | ### Patch Changes
57 |
58 | - [`d33de9f`](https://github.com/Thinkmill/markings/commit/d33de9f36e9c93d4f9d4f4e4428b46be78c0a1d5) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Implement output
59 |
--------------------------------------------------------------------------------
/packages/source-react/src/__snapshots__/index.test.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`with-child-comp 1`] = `
4 |
5 | Hi
6 | ;
7 |
8 | ↓ ↓ ↓ ↓ ↓ ↓
9 |
10 | [
11 | {
12 | "description": "something",
13 | "purpose": "question",
14 | "location": {
15 | "line": 1
16 | }
17 | }
18 | ]
19 | `;
20 |
21 | exports[`with-child-func 1`] = `
22 |
23 | {(props) => Hi }
24 | ;
25 |
26 | ↓ ↓ ↓ ↓ ↓ ↓
27 |
28 | [
29 | {
30 | "description": "something",
31 | "purpose": "question",
32 | "location": {
33 | "line": 1
34 | }
35 | }
36 | ]
37 | `;
38 |
39 | exports[`with-purpose-fixme 1`] = `
40 | ;
41 |
42 | ↓ ↓ ↓ ↓ ↓ ↓
43 |
44 | [
45 | {
46 | "description": "something",
47 | "purpose": "fixme",
48 | "location": {
49 | "line": 1
50 | }
51 | }
52 | ]
53 | `;
54 |
55 | exports[`with-purpose-question 1`] = `
56 | ;
57 |
58 | ↓ ↓ ↓ ↓ ↓ ↓
59 |
60 | [
61 | {
62 | "description": "something",
63 | "purpose": "question",
64 | "location": {
65 | "line": 1
66 | }
67 | }
68 | ]
69 | `;
70 |
71 | exports[`with-purpose-todo 1`] = `
72 | ;
73 |
74 | ↓ ↓ ↓ ↓ ↓ ↓
75 |
76 | [
77 | {
78 | "description": "something",
79 | "purpose": "todo",
80 | "location": {
81 | "line": 1
82 | }
83 | }
84 | ]
85 | `;
86 |
87 | exports[`without-purpose 1`] = `
88 | ;
89 |
90 | ↓ ↓ ↓ ↓ ↓ ↓
91 |
92 | [
93 | {
94 | "description": "something",
95 | "purpose": "todo",
96 | "location": {
97 | "line": 1
98 | }
99 | }
100 | ]
101 | `;
102 |
--------------------------------------------------------------------------------
/packages/output-json/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/output-json
2 |
3 | ## 0.0.9
4 |
5 | ### Patch Changes
6 |
7 | - [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use updated @markings/types
8 |
9 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
10 | - @markings/types@0.2.0
11 |
12 | ## 0.0.8
13 |
14 | ### Patch Changes
15 |
16 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
17 | - @markings/types@0.1.0
18 |
19 | ## 0.0.7
20 |
21 | ### Patch Changes
22 |
23 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
24 | - @markings/types@0.0.7
25 |
26 | ## 0.0.6
27 |
28 | ### Patch Changes
29 |
30 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
31 | - @markings/types@0.0.6
32 |
33 | ## 0.0.5
34 |
35 | ### Patch Changes
36 |
37 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
38 | - @markings/types@0.0.5
39 |
40 | ## 0.0.4
41 |
42 | ### Patch Changes
43 |
44 | - Updated dependencies [[`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa)]:
45 | - @markings/types@0.0.4
46 |
47 | ## 0.0.3
48 |
49 | ### Patch Changes
50 |
51 | - Updated dependencies [[`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
52 | - @markings/types@0.0.3
53 |
54 | ## 0.0.2
55 |
56 | ### Patch Changes
57 |
58 | - Updated dependencies [[`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca)]:
59 | - @markings/types@0.0.2
60 |
61 | ## 0.0.1
62 |
63 | ### Patch Changes
64 |
65 | - [`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Initial release
66 |
67 | - Updated dependencies [[`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272)]:
68 | - @markings/types@0.0.1
69 |
--------------------------------------------------------------------------------
/test-project/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Marking } from "@markings/react";
3 |
4 | export default () => (
5 |
14 |
Markings: Note
15 |
This is the dev environment for building markings' UI.
16 |
17 |
18 | Some content
19 | Some more content
20 |
24 | I should have a related note...
25 |
26 | {childCompArray.map((p, i) => (
27 | 9 ? "todo" : "question"}>
28 | I should have a related note...
29 |
30 | ))}
31 | {childFuncArray.map((p, i) => (
32 | 9 ? "todo" : "question"}>
33 | {(markingProps) => (
34 | I should have a related note...
35 | )}
36 |
37 | ))}
38 |
39 |
40 | );
41 |
42 | const childCompArray = [
43 | "Amet soufflé carrot cake tootsie roll jelly-o chocolate cake.",
44 | "Chocolate bar gummies sweet roll macaroon powder sweet tart croissant.",
45 | "Pastry ice cream bear claw cupcake topping caramels jelly beans chocolate cheesecake.",
46 | "Candy canes pastry cake tart powder.",
47 | "Tootsie roll bear claw sesame snaps candy cheesecake caramels cookie.",
48 | "Lemon drops donut marzipan gummi bears cotton candy cotton candy jelly-o carrot cake.",
49 | ];
50 | const childFuncArray = [
51 | "Lemon drops pastry apple pie biscuit tart tootsie roll.",
52 | "Brownie icing chupa chups cake cookie halvah gummi bears halvah.",
53 | "Sesame snaps donut gingerbread marshmallow topping powder.",
54 | "Biscuit chocolate cheesecake pudding candy canes tart halvah sweet.",
55 | "Sugar plum cake candy carrot cake.",
56 | "Ice cream marzipan liquorice candy canes sesame snaps danish soufflé lollipop candy canes.",
57 | "Lemon drops cotton candy pudding.",
58 | "Pie cake soufflé cupcake jujubes sugar plum.",
59 | "Liquorice lollipop oat cake.",
60 | ];
61 |
--------------------------------------------------------------------------------
/packages/source-react/src/index.ts:
--------------------------------------------------------------------------------
1 | import { Purpose, PURPOSES } from "@markings/types";
2 | import { Source } from "@markings/types/source";
3 | import * as t from "@babel/types";
4 | import { NodePath } from "@babel/traverse";
5 |
6 | let getValueFromJSXAttribute = (
7 | attribute: NodePath
8 | ): string => {
9 | let value = attribute.node.value;
10 | if (value !== null) {
11 | if (value.type === "StringLiteral") {
12 | return value.value;
13 | }
14 | if (value.type === "JSXExpressionContainer") {
15 | let expression = value.expression;
16 | if (expression.type === "StringLiteral") {
17 | return expression.value;
18 | }
19 | }
20 | }
21 | throw attribute.buildCodeFrameError(
22 | "attributes on the Note component must be string literals"
23 | );
24 | };
25 |
26 | export const source: Source = {
27 | type: "babel",
28 | visitor: {
29 | JSXOpeningElement(path, { addMarking }) {
30 | if (
31 | t.isJSXIdentifier(path.node.name) &&
32 | path.node.name.name === "Marking"
33 | ) {
34 | let description: string | undefined;
35 | let purpose: Purpose | undefined;
36 |
37 | for (let attribute of path.get("attributes")) {
38 | if (attribute.isJSXAttribute()) {
39 | if (attribute.node.name.name === "description") {
40 | description = getValueFromJSXAttribute(attribute);
41 | }
42 | if (attribute.node.name.name === "purpose") {
43 | purpose = getValueFromJSXAttribute(attribute) as Purpose;
44 | if (!PURPOSES.includes(purpose)) {
45 | throw attribute.buildCodeFrameError(
46 | `Purpose must be one of ${PURPOSES.join(", ")}`
47 | );
48 | }
49 | }
50 | } else {
51 | throw path.buildCodeFrameError(
52 | "You cannot spread props on a Note component"
53 | );
54 | }
55 | }
56 | if (purpose === undefined) {
57 | purpose = "todo";
58 | }
59 | if (description === undefined) {
60 | throw path.buildCodeFrameError(
61 | "description must be passed to the Note component"
62 | );
63 | }
64 | addMarking({
65 | description,
66 | purpose,
67 | location: {
68 | line: path.node.loc!.start.line,
69 | },
70 | });
71 | }
72 | },
73 | },
74 | };
75 |
--------------------------------------------------------------------------------
/packages/react/src/tokens.ts:
--------------------------------------------------------------------------------
1 | // Color
2 | // ------------------------------
3 |
4 | export const color = {
5 | // Reds
6 | R50: "#FFEBE6",
7 | R75: "#FFBDAD",
8 | R100: "#FF8F73",
9 | R200: "#FF7452",
10 | R300: "#FF5630",
11 | R400: "#DE350B",
12 | R500: "#BF2600",
13 |
14 | // Yellows
15 | Y50: "#FFFAE6",
16 | Y75: "#FFF0B3",
17 | Y100: "#FFE380",
18 | Y200: "#FFC400",
19 | Y300: "#FFAB00",
20 | Y400: "#FF991F",
21 | Y500: "#FF8B00",
22 |
23 | // Greens
24 | G50: "#E3FCEF",
25 | G75: "#ABF5D1",
26 | G100: "#79F2C0",
27 | G200: "#57D9A3",
28 | G300: "#36B37E",
29 | G400: "#00875A",
30 | G500: "#006644",
31 |
32 | // Blues
33 | B50: "#DEEBFF",
34 | B75: "#B3D4FF",
35 | B100: "#4C9AFF",
36 | B200: "#2684FF",
37 | B300: "#0065FF",
38 | B400: "#0052CC",
39 | B500: "#0747A6",
40 |
41 | // Purples
42 | P50: "#EAE6FF",
43 | P75: "#C0B6F2",
44 | P100: "#998DD9",
45 | P200: "#8777D9",
46 | P300: "#6554C0",
47 | P400: "#5243AA",
48 | P500: "#403294",
49 |
50 | // Teals
51 | T50: "#E6FCFF",
52 | T75: "#B3F5FF",
53 | T100: "#79E2F2",
54 | T200: "#00C7E6",
55 | T300: "#00B8D9",
56 | T400: "#00A3BF",
57 | T500: "#008DA6",
58 |
59 | // Neutrals
60 | N0: "#FFFFFF",
61 | N10: "#FAFBFC",
62 | N20: "#F4F5F7",
63 | N30: "#EBECF0",
64 | N40: "#DFE1E6",
65 | N50: "#C1C7D0",
66 | N60: "#B3BAC5",
67 | N70: "#A5ADBA",
68 | N80: "#97A0AF",
69 | N90: "#8993A4",
70 | N100: "#7A869A",
71 | N200: "#6B778C",
72 | N300: "#5E6C84",
73 | N400: "#505F79",
74 | N500: "#42526E",
75 | N600: "#344563",
76 | N700: "#253858",
77 | N800: "#172B4D",
78 | N900: "#091E42"
79 | };
80 |
81 | // Elevation
82 | // ------------------------------
83 |
84 | export const elevation = {
85 | E100: 100,
86 | E200: 200,
87 | E300: 300,
88 | E400: 400,
89 | E500: 500
90 | };
91 |
92 | // Spacing
93 | // ------------------------------
94 |
95 | const BASE_UNIT = 4;
96 |
97 | export const spacing = {
98 | none: 0,
99 | xsmall: BASE_UNIT,
100 | small: BASE_UNIT * 2,
101 | gutter: BASE_UNIT * 3,
102 | medium: BASE_UNIT * 4,
103 | large: BASE_UNIT * 6,
104 | xlarge: BASE_UNIT * 8
105 | };
106 |
107 | // Radii
108 | // ------------------------------
109 |
110 | const BASE_RADII = 4;
111 |
112 | export const radii = {
113 | none: 0,
114 | small: BASE_RADII,
115 | medium: BASE_RADII * 2,
116 | large: BASE_RADII * 3,
117 |
118 | // special cases
119 | circle: "50%",
120 | pill: 9999
121 | };
122 |
--------------------------------------------------------------------------------
/packages/output-html/src/tokens.ts:
--------------------------------------------------------------------------------
1 | // Color
2 | // ------------------------------
3 |
4 | export const color = {
5 | // Reds
6 | R50: "#FFEBE6",
7 | R75: "#FFBDAD",
8 | R100: "#FF8F73",
9 | R200: "#FF7452",
10 | R300: "#FF5630",
11 | R400: "#DE350B",
12 | R500: "#BF2600",
13 |
14 | // Yellows
15 | Y50: "#FFFAE6",
16 | Y75: "#FFF0B3",
17 | Y100: "#FFE380",
18 | Y200: "#FFC400",
19 | Y300: "#FFAB00",
20 | Y400: "#FF991F",
21 | Y500: "#FF8B00",
22 |
23 | // Greens
24 | G50: "#E3FCEF",
25 | G75: "#ABF5D1",
26 | G100: "#79F2C0",
27 | G200: "#57D9A3",
28 | G300: "#36B37E",
29 | G400: "#00875A",
30 | G500: "#006644",
31 |
32 | // Blues
33 | B50: "#DEEBFF",
34 | B75: "#B3D4FF",
35 | B100: "#4C9AFF",
36 | B200: "#2684FF",
37 | B300: "#0065FF",
38 | B400: "#0052CC",
39 | B500: "#0747A6",
40 |
41 | // Purples
42 | P50: "#EAE6FF",
43 | P75: "#C0B6F2",
44 | P100: "#998DD9",
45 | P200: "#8777D9",
46 | P300: "#6554C0",
47 | P400: "#5243AA",
48 | P500: "#403294",
49 |
50 | // Teals
51 | T50: "#E6FCFF",
52 | T75: "#B3F5FF",
53 | T100: "#79E2F2",
54 | T200: "#00C7E6",
55 | T300: "#00B8D9",
56 | T400: "#00A3BF",
57 | T500: "#008DA6",
58 |
59 | // Neutrals
60 | N0: "#FFFFFF",
61 | N10: "#FAFBFC",
62 | N20: "#F4F5F7",
63 | N30: "#EBECF0",
64 | N40: "#DFE1E6",
65 | N50: "#C1C7D0",
66 | N60: "#B3BAC5",
67 | N70: "#A5ADBA",
68 | N80: "#97A0AF",
69 | N90: "#8993A4",
70 | N100: "#7A869A",
71 | N200: "#6B778C",
72 | N300: "#5E6C84",
73 | N400: "#505F79",
74 | N500: "#42526E",
75 | N600: "#344563",
76 | N700: "#253858",
77 | N800: "#172B4D",
78 | N900: "#091E42"
79 | };
80 |
81 | // Elevation
82 | // ------------------------------
83 |
84 | export const elevation = {
85 | E100: 100,
86 | E200: 200,
87 | E300: 300,
88 | E400: 400,
89 | E500: 500
90 | };
91 |
92 | // Spacing
93 | // ------------------------------
94 |
95 | const BASE_UNIT = 4;
96 |
97 | export const spacing = {
98 | none: 0,
99 | xsmall: BASE_UNIT,
100 | small: BASE_UNIT * 2,
101 | gutter: BASE_UNIT * 3,
102 | medium: BASE_UNIT * 4,
103 | large: BASE_UNIT * 6,
104 | xlarge: BASE_UNIT * 8
105 | };
106 |
107 | // Radii
108 | // ------------------------------
109 |
110 | const BASE_RADII = 4;
111 |
112 | export const radii = {
113 | none: 0,
114 | small: BASE_RADII,
115 | medium: BASE_RADII * 2,
116 | large: BASE_RADII * 3,
117 |
118 | // special cases
119 | circle: "50%",
120 | pill: 9999
121 | };
122 |
--------------------------------------------------------------------------------
/packages/types/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/types
2 |
3 | ## 0.2.0
4 |
5 | ### Minor Changes
6 |
7 | - [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Move `Source` type out of main entrypoint and to `@markings/types/source` because `@markings/types` is used by the front-end packages but they do not use the `Source` type and the `Source` type uses a type from Babel and type-checking `@babel/types` takes multiple seconds.
8 |
9 | ## 0.1.0
10 |
11 | ### Minor Changes
12 |
13 | - [`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273) [#30](https://github.com/Thinkmill/markings/pull/30) Thanks [@jesstelford](https://github.com/jesstelford)! - Add support for `fixme` purpose in react sources, and `FIXME` in comment
14 | sources.
15 |
16 | ## 0.0.7
17 |
18 | ### Patch Changes
19 |
20 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
21 |
22 | ## 0.0.6
23 |
24 | ### Patch Changes
25 |
26 | - [`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add links to where a marking is located on GitHub
27 |
28 | ## 0.0.5
29 |
30 | ### Patch Changes
31 |
32 | - [`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove rethink and addition from purposes
33 |
34 | ## 0.0.4
35 |
36 | ### Patch Changes
37 |
38 | - [`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix Purpose type to be only literals
39 |
40 | ## 0.0.3
41 |
42 | ### Patch Changes
43 |
44 | - [`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add package to markings and rename details to description
45 |
46 | ## 0.0.2
47 |
48 | ### Patch Changes
49 |
50 | - [`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix code frame errors
51 |
52 | ## 0.0.1
53 |
54 | ### Patch Changes
55 |
56 | - [`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Initial release
57 |
--------------------------------------------------------------------------------
/packages/react/src/marking/Note.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 |
3 | import { ReactNode, useEffect, useState, ReactElement, useMemo } from "react";
4 |
5 | import { jsx } from "@emotion/react";
6 | import hashString from "@emotion/hash";
7 |
8 | import {
9 | MarkingContext,
10 | MarkingType,
11 | useMarkingRegistry,
12 | ContextType,
13 | } from "./NoteContext";
14 | import { MarkingPanel } from "./NotePanel";
15 |
16 | type RecordOfMarkings = { [id: string]: MarkingType };
17 |
18 | type MarkingProps = {
19 | 'data-marking-id'?: string
20 | };
21 |
22 | type MarkingChildCompOrFunc = { children: ReactNode }
23 | | { children: (markingProps: MarkingProps) => ReactNode };
24 |
25 | type MarkingComponentType = MarkingType & MarkingChildCompOrFunc;
26 |
27 | // Provider
28 | // ------------------------------
29 |
30 | type ProviderProps = {
31 | children: ReactNode;
32 | enabled?: boolean;
33 | // config: ConfigType;
34 | };
35 |
36 | export const MarkingProvider = ({
37 | children,
38 | enabled = true,
39 | }: ProviderProps) => {
40 | const [notes, setNotes] = useState({});
41 |
42 | const ctx: ContextType = useMemo(() => {
43 | return {
44 | enabled,
45 | register: (id, note) => {
46 | setNotes((currentNotes) => ({ ...currentNotes, [id]: note }));
47 | return id;
48 | },
49 | unregister: (id) => {
50 | setNotes(({ [id]: unusedValue, ...restNotes }) => restNotes);
51 | },
52 | };
53 | }, [enabled]);
54 |
55 | return (
56 |
57 | {children}
58 | {typeof window !== "undefined" && enabled && (
59 |
60 | )}
61 |
62 | );
63 | };
64 |
65 | /**
66 | * Registers notes and wraps a unique attribute around the Note component
67 | */
68 | export const Marking = ({
69 | children,
70 | ...props
71 | }: MarkingComponentType): ReactElement => {
72 | const { register, unregister, enabled } = useMarkingRegistry();
73 | if (!enabled) {
74 | if (typeof children === 'function') {
75 | return children({}) as any;
76 | } else {
77 | return children as any;
78 | }
79 | }
80 | // TODO: notes should have a unique id and we should use that instead
81 | const id = useMemo(
82 | () => hashString(JSON.stringify(props)),
83 | Object.values(props)
84 | );
85 |
86 | useEffect(() => {
87 | register(id, props);
88 | return () => {
89 | unregister(id);
90 | };
91 | }, []);
92 |
93 | if (typeof children === 'function') {
94 | return children({ 'data-marking-id': id }) as any;
95 | } else {
96 | return (
97 |
98 | {children}
99 |
100 | );
101 | }
102 | };
103 |
--------------------------------------------------------------------------------
/packages/test-utils/src/run-fixtures.ts:
--------------------------------------------------------------------------------
1 | import jestInCase from "jest-in-case";
2 | import * as babel from "@babel/core";
3 | import { PartialMarking } from "@markings/types";
4 | import { Source } from "@markings/types/source";
5 | import fs from "fs";
6 | import path from "path";
7 | import { promisify } from "util";
8 | import { PluginObj } from "@babel/core";
9 | // @ts-ignore
10 | import { visitors as visitorsUtils, Visitor } from "@babel/traverse";
11 |
12 | const readFile = promisify(fs.readFile);
13 |
14 | const separator = "\n ↓ ↓ ↓ ↓ ↓ ↓\n\n";
15 |
16 | expect.addSnapshotSerializer({
17 | test: (x) => x && x.___raw,
18 | serialize: (val) => val.___raw,
19 | });
20 |
21 | let parserPlugins = [
22 | "asyncGenerators",
23 | "bigInt",
24 | "classPrivateMethods",
25 | "classProperties",
26 | "doExpressions",
27 | "dynamicImport",
28 | "importMeta",
29 | "jsx",
30 | "topLevelAwait",
31 | "throwExpressions",
32 | "nullishCoalescingOperator",
33 | "optionalChaining",
34 | "decorators-legacy",
35 | ] as const;
36 |
37 | function getFixtures(dirname: string) {
38 | const fixturesFolder = path.join(dirname, "__fixtures__");
39 | return fs
40 | .readdirSync(fixturesFolder)
41 | .map((base) => path.join(fixturesFolder, base));
42 | }
43 |
44 | export const snapshotMarkingsFromFixtures = (
45 | dirname: string,
46 | source: Source
47 | ) => {
48 | let cases = getFixtures(dirname).reduce((accum, filename) => {
49 | let skip = false;
50 | let only = false;
51 | let testTitle = filename;
52 | if (filename.indexOf(".skip") !== -1) {
53 | testTitle = filename.replace(".skip", "");
54 | skip = true;
55 | } else if (filename.indexOf(".only") !== -1) {
56 | testTitle = filename.replace(".only", "");
57 | only = true;
58 | }
59 | accum[path.parse(testTitle).name] = {
60 | filename,
61 | only,
62 | skip,
63 | };
64 | return accum;
65 | }, {} as any);
66 |
67 | return jestInCase(
68 | name,
69 | async (opts: { filename: string }) => {
70 | let code = await readFile(opts.filename, "utf-8");
71 |
72 | let markings: PartialMarking[] = [];
73 |
74 | let visitor: Visitor = visitorsUtils.merge(
75 | [source.visitor],
76 | [
77 | {
78 | addMarking: (marking: PartialMarking) => {
79 | markings.push(marking);
80 | },
81 | },
82 | ]
83 | );
84 | babel.transformSync(code, {
85 | code: false,
86 | configFile: false,
87 | babelrc: false,
88 | filename: opts.filename,
89 | parserOpts: {
90 | plugins: parserPlugins.concat(
91 | // @ts-ignore
92 | /\.tsx?$/.test(opts.filename) ? "typescript" : "flow"
93 | ),
94 | },
95 | plugins: [
96 | (): PluginObj => {
97 | return {
98 | visitor,
99 | };
100 | },
101 | ],
102 | });
103 |
104 | expect({
105 | ___raw: `${code}${separator}${JSON.stringify(markings, null, 2)}`,
106 | }).toMatchSnapshot();
107 | },
108 | cases
109 | );
110 | };
111 |
--------------------------------------------------------------------------------
/packages/source-comments/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/source-comments
2 |
3 | ## 0.1.1
4 |
5 | ### Patch Changes
6 |
7 | - [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use updated @markings/types
8 |
9 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e), [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
10 | - @markings/test-utils@0.0.4
11 | - @markings/types@0.2.0
12 |
13 | ## 0.1.0
14 |
15 | ### Minor Changes
16 |
17 | - [`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273) [#30](https://github.com/Thinkmill/markings/pull/30) Thanks [@jesstelford](https://github.com/jesstelford)! - Add support for `fixme` purpose in react sources, and `FIXME` in comment
18 | sources.
19 |
20 | ### Patch Changes
21 |
22 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
23 | - @markings/types@0.1.0
24 | - @markings/test-utils@0.0.3
25 |
26 | ## 0.0.8
27 |
28 | ### Patch Changes
29 |
30 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
31 | - @markings/test-utils@0.0.2
32 | - @markings/types@0.0.7
33 |
34 | ## 0.0.7
35 |
36 | ### Patch Changes
37 |
38 | - Updated dependencies [[`a417548`](https://github.com/Thinkmill/markings/commit/a4175484f2af47e9db1f17677e6d8a33066267e7)]:
39 | - @markings/test-utils@0.0.1
40 |
41 | ## 0.0.6
42 |
43 | ### Patch Changes
44 |
45 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
46 | - @markings/types@0.0.6
47 |
48 | ## 0.0.5
49 |
50 | ### Patch Changes
51 |
52 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
53 | - @markings/types@0.0.5
54 |
55 | ## 0.0.4
56 |
57 | ### Patch Changes
58 |
59 | - [`28a4c54`](https://github.com/Thinkmill/markings/commit/28a4c54dcb2d765234194624ccc9fa8bf70a38b8) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove `:` from description in markings
60 |
61 | - Updated dependencies [[`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa)]:
62 | - @markings/types@0.0.4
63 |
64 | ## 0.0.3
65 |
66 | ### Patch Changes
67 |
68 | - [`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add package to markings and rename details to description
69 |
70 | - Updated dependencies [[`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
71 | - @markings/types@0.0.3
72 |
73 | ## 0.0.2
74 |
75 | ### Patch Changes
76 |
77 | - Updated dependencies [[`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca)]:
78 | - @markings/types@0.0.2
79 |
80 | ## 0.0.1
81 |
82 | ### Patch Changes
83 |
84 | - Updated dependencies [[`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272)]:
85 | - @markings/types@0.0.1
86 |
--------------------------------------------------------------------------------
/packages/react/src/popover/utils.ts:
--------------------------------------------------------------------------------
1 | import {
2 | RefObject,
3 | useCallback,
4 | useEffect,
5 | useState,
6 | useLayoutEffect,
7 | useRef
8 | } from "react";
9 |
10 | // Click Outside
11 | // ------------------------------
12 |
13 | // NOTE: mouse event handler defined here rather than imported from react becase
14 | // the event listener will return a native event, not a synthetic event
15 | type MouseHandler = (event: MouseEvent) => void;
16 | type UseClickOutsideProps = {
17 | handler: MouseHandler;
18 | refs: RefObject[];
19 | listenWhen: boolean;
20 | };
21 |
22 | export const useClickOutside = ({
23 | handler,
24 | refs,
25 | listenWhen
26 | }: UseClickOutsideProps): RefObject => {
27 | const ref = useRef(null);
28 |
29 | const handleMouseDown = useCallback(
30 | (event: MouseEvent) => {
31 | // bail on mouse down "inside" any of the provided refs
32 | if (
33 | refs.some(
34 | ref => ref.current && ref.current.contains(event.target as Node)
35 | )
36 | ) {
37 | return;
38 | }
39 |
40 | handler(event);
41 | },
42 | [handler, refs]
43 | );
44 |
45 | // layout effect is not run on the server
46 | useLayoutEffect(() => {
47 | if (listenWhen) {
48 | document.addEventListener("mousedown", handleMouseDown);
49 |
50 | return () => {
51 | document.removeEventListener("mousedown", handleMouseDown);
52 | };
53 | }
54 | /* eslint-disable react-hooks/exhaustive-deps */
55 | }, [listenWhen, handleMouseDown]);
56 |
57 | return ref;
58 | };
59 |
60 | // Key Press
61 | // ------------------------------
62 |
63 | // NOTE: keyboard event handler defined here rather than imported from react becase
64 | // the event listener will return a native event, not a synthetic event
65 | type KeyboardHandler = (event: KeyboardEvent) => void;
66 | type UseKeyPressProps = {
67 | targetKey: string;
68 | downHandler?: KeyboardHandler;
69 | upHandler?: KeyboardHandler;
70 | listenWhen: boolean;
71 | };
72 |
73 | export const useKeyPress = ({
74 | targetKey,
75 | downHandler,
76 | upHandler,
77 | listenWhen
78 | }: UseKeyPressProps) => {
79 | // Keep track of whether the target key is pressed
80 | const [keyPressed, setKeyPressed] = useState(false);
81 |
82 | // handle key down
83 | const onDown = useCallback(
84 | (event: KeyboardEvent) => {
85 | if (event.key === targetKey) {
86 | setKeyPressed(true);
87 |
88 | if (typeof downHandler === "function") {
89 | downHandler(event);
90 | }
91 | }
92 | },
93 | [targetKey, downHandler]
94 | );
95 |
96 | // handle key up
97 | const onUp = useCallback(
98 | (event: KeyboardEvent) => {
99 | if (event.key === targetKey) {
100 | setKeyPressed(false);
101 |
102 | if (typeof upHandler === "function") {
103 | upHandler(event);
104 | }
105 | }
106 | },
107 | [targetKey, upHandler]
108 | );
109 |
110 | // add event listeners
111 | useEffect(() => {
112 | if (listenWhen) {
113 | window.addEventListener("keydown", onDown);
114 | window.addEventListener("keyup", onUp);
115 |
116 | // Remove event listeners on cleanup
117 | return () => {
118 | window.removeEventListener("keydown", onDown);
119 | window.removeEventListener("keyup", onUp);
120 | };
121 | }
122 | }, [listenWhen, onDown, onUp]);
123 |
124 | return keyPressed;
125 | };
126 |
--------------------------------------------------------------------------------
/packages/output-html/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/output-html
2 |
3 | ## 0.2.1
4 |
5 | ### Patch Changes
6 |
7 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
8 | - @markings/types@0.2.0
9 |
10 | ## 0.2.0
11 |
12 | ### Minor Changes
13 |
14 | - [`0070e0a`](https://github.com/Thinkmill/markings/commit/0070e0a305bdff69e85c41d0f1989329fc9fc330) [#34](https://github.com/Thinkmill/markings/pull/34) Thanks [@nathsimpson](https://github.com/nathsimpson)! - Use emotion 11
15 |
16 | ## 0.1.1
17 |
18 | ### Patch Changes
19 |
20 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
21 | - @markings/types@0.1.0
22 |
23 | ## 0.1.0
24 |
25 | ### Minor Changes
26 |
27 | - [`414dbc1`](https://github.com/Thinkmill/markings/commit/414dbc10cc2f07ec59dae3f612cf8f24fe6b84ce) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Change some dependencies
28 |
29 | ## 0.0.9
30 |
31 | ### Patch Changes
32 |
33 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
34 |
35 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
36 | - @markings/types@0.0.7
37 |
38 | ## 0.0.8
39 |
40 | ### Patch Changes
41 |
42 | - [`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add links to where a marking is located on GitHub
43 |
44 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
45 | - @markings/types@0.0.6
46 |
47 | ## 0.0.7
48 |
49 | ### Patch Changes
50 |
51 | - [`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Show correct number of notes
52 |
53 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
54 | - @markings/types@0.0.5
55 |
56 | ## 0.0.6
57 |
58 | ### Patch Changes
59 |
60 | - [`b80c6b4`](https://github.com/Thinkmill/markings/commit/b80c6b401ac828ae805b9102aa1a6b12680a0e4c) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Improve UI
61 |
62 | ## 0.0.5
63 |
64 | ### Patch Changes
65 |
66 | - [`9a73657`](https://github.com/Thinkmill/markings/commit/9a736573326003a12c09dd38dd76859c78113eb7) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Have one dialog per package
67 |
68 | ## 0.0.4
69 |
70 | ### Patch Changes
71 |
72 | - [`28a4c54`](https://github.com/Thinkmill/markings/commit/28a4c54dcb2d765234194624ccc9fa8bf70a38b8) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Initial release
73 |
74 | - Updated dependencies [[`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa)]:
75 | - @markings/types@0.0.4
76 |
77 | ## 0.0.3
78 |
79 | ### Patch Changes
80 |
81 | - Updated dependencies [[`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
82 | - @markings/types@0.0.3
83 |
84 | ## 0.0.2
85 |
86 | ### Patch Changes
87 |
88 | - Updated dependencies [[`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca)]:
89 | - @markings/types@0.0.2
90 |
91 | ## 0.0.1
92 |
93 | ### Patch Changes
94 |
95 | - Updated dependencies [[`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272)]:
96 | - @markings/types@0.0.1
97 |
--------------------------------------------------------------------------------
/packages/react/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/react
2 |
3 | ## 0.5.1
4 |
5 | ### Patch Changes
6 |
7 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
8 | - @markings/types@0.2.0
9 |
10 | ## 0.5.0
11 |
12 | ### Minor Changes
13 |
14 | - [`0070e0a`](https://github.com/Thinkmill/markings/commit/0070e0a305bdff69e85c41d0f1989329fc9fc330) [#34](https://github.com/Thinkmill/markings/pull/34) Thanks [@nathsimpson](https://github.com/nathsimpson)! - Use emotion 11
15 |
16 | ## 0.4.1
17 |
18 | ### Patch Changes
19 |
20 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
21 | - @markings/types@0.1.0
22 |
23 | ## 0.4.0
24 |
25 | ### Minor Changes
26 |
27 | - [`8443983`](https://github.com/Thinkmill/markings/commit/8443983d78b35637c1666fc1e643eab4bbb28908) [#28](https://github.com/Thinkmill/markings/pull/28) Thanks [@jesstelford](https://github.com/jesstelford)! - Introduce function-as-a-child for React component which doesn't require injecting { display: 'contents' }
28 |
29 | ## 0.3.0
30 |
31 | ### Minor Changes
32 |
33 | - [`414dbc1`](https://github.com/Thinkmill/markings/commit/414dbc10cc2f07ec59dae3f612cf8f24fe6b84ce) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Change some dependencies
34 |
35 | ## 0.2.1
36 |
37 | ### Patch Changes
38 |
39 | - [`fd2f9bd`](https://github.com/Thinkmill/markings/commit/fd2f9bd877c88bd0ae19bd5374fb67d1d830ca4f) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix the return type of `Marking`
40 |
41 | ## 0.2.0
42 |
43 | ### Minor Changes
44 |
45 | - [`e74d039`](https://github.com/Thinkmill/markings/commit/e74d039995cdd85f5d5de3fc8023cd1650e4d157) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add enabled prop to MarkingProvider
46 |
47 | ## 0.1.1
48 |
49 | ### Patch Changes
50 |
51 | - [`601eabb`](https://github.com/Thinkmill/markings/commit/601eabb72c53e4ff10930888808729e6830b7a9b) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix marking location highlighting
52 |
53 | * [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
54 |
55 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Move @types/react and @types/react-dom to devDependencies
56 |
57 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
58 | - @markings/types@0.0.7
59 |
60 | ## 0.1.0
61 |
62 | ### Minor Changes
63 |
64 | - [`d58bc1f`](https://github.com/Thinkmill/markings/commit/d58bc1f587c92a7c595ba062196fc74a8f7ea7a9) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `@markings/react-note` to `@markings/react`
65 |
66 | ## 0.0.4
67 |
68 | ### Patch Changes
69 |
70 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
71 | - @markings/types@0.0.6
72 |
73 | ## 0.0.3
74 |
75 | ### Patch Changes
76 |
77 | - [`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove GitHub data
78 |
79 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
80 | - @markings/types@0.0.5
81 |
82 | ## 0.0.2
83 |
84 | ### Patch Changes
85 |
86 | - Updated dependencies [[`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa)]:
87 | - @markings/types@0.0.4
88 |
89 | ## 0.0.1
90 |
91 | ### Patch Changes
92 |
93 | - [`0810c19`](https://github.com/Thinkmill/markings/commit/0810c19f686f1cc4baa801aa74a1ef7dc24f7c38) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Initial release
94 |
95 | - Updated dependencies [[`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
96 | - @markings/types@0.0.3
97 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 📝 Markings
2 |
3 | Never forget a `// TODO` or `// FIXME` again.
4 |
5 | Notes added to your code are surfaced visually when a page is rendered so they're always visible in context of what you're building.
6 |
7 | Answer _"What's left?"_ with the project wide burn down list of all notes.
8 |
9 | ## Getting Started
10 |
11 | In its simplest form, the Markings CLI generates a report of all `TODO`, `FIXME` & `QUESTION` comments in your code:
12 |
13 | ```
14 | yarn add @markings/cli @markings/source-comments @markings/output-html
15 | ```
16 |
17 | And in your `package.json`*:
18 |
19 | ```json
20 | {
21 | "scripts": {
22 | "report": "markings"
23 | },
24 | "markings": {
25 | "sources": [{
26 | "source": "@markings/source-comments",
27 | "include": "src/**/*.(j|t)s"
28 | }],
29 | "outputs": [{
30 | "output": "@markings/output-html",
31 | "filename": "report.html"
32 | }]
33 | }
34 | }
35 | ```
36 |
37 | Finally, run:
38 |
39 | ```bash
40 | yarn report
41 | ```
42 |
43 | To generate `report.html`, containing all the detected `TODO`, `FIXME` & `QUESTION` comments in your code.
44 |
45 | ### React
46 |
47 | When used within a React codebase, the special `` component allows viewing a report directly in the page.
48 |
49 | ```
50 | yarn add @markings/react @markings/source-react
51 | ```
52 |
53 | Wrap your application in ``
54 |
55 | ```javascript
56 | import { MarkingProvider } from "@markings/react";
57 |
58 | const App = () => (
59 |
60 | ...
61 |
62 | );
63 | ```
64 |
65 | Then add `` components around the components you want to mark
66 |
67 | ```javascript
68 | import { Marking } from "@markings/react";
69 | const MyComponent = () => (
70 |
71 |
Hello world
72 |
76 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
77 |
78 |
79 | );
80 | ```
81 |
82 | Now your page will have an inline report of all the detected ``.
83 |
84 | > ℹ️ The inline report will _not_ include any `TODO` / `FIXME` / `QUESTION` comments.
85 |
86 | To include React `` along side comments in your report output, add `@markings/source-react` to your `package.json`:
87 |
88 | ```json
89 | {
90 | "markings": {
91 | "sources": [{
92 | "source": "@markings/source-comments",
93 | "include": "src/**/*.(j|t)s"
94 | }, {
95 | "source": "@markings/source-react",
96 | "include": "src/**/*.(j|t)s"
97 | }]
98 | }
99 | }
100 | ```
101 |
102 | ## Outputs
103 |
104 | Outputs work with the Markings CLI to generate reports of all discovered markings.
105 |
106 | First, install the cli:
107 |
108 | ```
109 | yarn add @markings/cli
110 | ```
111 |
112 | And in your `package.json`*:
113 |
114 | ```json
115 | {
116 | "scripts": {
117 | "report": "markings"
118 | },
119 | }
120 | ```
121 |
122 | Then, pick one or more outputs. For every output added, a report will be generated.
123 |
124 | ### HTML
125 |
126 | Generate a good looking html report.
127 |
128 | ```
129 | yarn add @markings/output-html
130 | ```
131 |
132 | And in your `package.json`*:
133 |
134 | ```json
135 | {
136 | "markings": {
137 | "outputs": [{
138 | "output": "@markings/output-html",
139 | "filename": "report.html"
140 | }]
141 | }
142 | }
143 | ```
144 |
145 | ### JSON
146 |
147 | Generate a detailed JSON report.
148 |
149 | ```
150 | yarn add @markings/output-json
151 | ```
152 |
153 | And in your `package.json`*:
154 |
155 | ```json
156 | {
157 | "markings": {
158 | "outputs": [{
159 | "output": "@markings/output-json",
160 | "filename": "report.json"
161 | }]
162 | }
163 | }
164 | ```
165 |
166 | ### CSV
167 |
168 | Generate a detailed CSV report.
169 |
170 | ```
171 | yarn add @markings/output-csv
172 | ```
173 |
174 | And in your `package.json`*:
175 |
176 | ```json
177 | {
178 | "markings": {
179 | "outputs": [{
180 | "output": "@markings/output-csv",
181 | "filename": "report.csv"
182 | }]
183 | }
184 | }
185 | ```
186 |
187 | ---
188 |
189 | _* In a monorepo? Place this in your root `package.json`. _
190 |
--------------------------------------------------------------------------------
/packages/cli/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/cli
2 |
3 | ## 0.0.14
4 |
5 | ### Patch Changes
6 |
7 | - [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use updated @markings/types
8 |
9 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
10 | - @markings/types@0.2.0
11 |
12 | ## 0.0.13
13 |
14 | ### Patch Changes
15 |
16 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
17 | - @markings/types@0.1.0
18 |
19 | ## 0.0.12
20 |
21 | ### Patch Changes
22 |
23 | - [`cd3b380`](https://github.com/Thinkmill/markings/commit/cd3b380a1689e4f680b9daafd5685edd675a1a2f) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Support Bitbucket when getting urls to markings
24 |
25 | ## 0.0.11
26 |
27 | ### Patch Changes
28 |
29 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
30 |
31 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
32 | - @markings/types@0.0.7
33 |
34 | ## 0.0.10
35 |
36 | ### Patch Changes
37 |
38 | - [`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add links to where a marking is located on GitHub
39 |
40 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
41 | - @markings/types@0.0.6
42 |
43 | ## 0.0.9
44 |
45 | ### Patch Changes
46 |
47 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
48 | - @markings/types@0.0.5
49 |
50 | ## 0.0.8
51 |
52 | ### Patch Changes
53 |
54 | - [`9a73657`](https://github.com/Thinkmill/markings/commit/9a736573326003a12c09dd38dd76859c78113eb7) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update Babel parser plugins
55 |
56 | ## 0.0.7
57 |
58 | ### Patch Changes
59 |
60 | - Updated dependencies [[`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa)]:
61 | - @markings/types@0.0.4
62 |
63 | ## 0.0.6
64 |
65 | ### Patch Changes
66 |
67 | - [`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add package to markings and rename details to description
68 |
69 | - Updated dependencies [[`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
70 | - @markings/types@0.0.3
71 |
72 | ## 0.0.5
73 |
74 | ### Patch Changes
75 |
76 | - [`a2a0923`](https://github.com/Thinkmill/markings/commit/a2a092304533f03beaddd7062fdd8511f55f2019) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Filter out node_modules and .d.ts files when extracting markings
77 |
78 | ## 0.0.4
79 |
80 | ### Patch Changes
81 |
82 | - [`0c6e806`](https://github.com/Thinkmill/markings/commit/0c6e80673dd9149842a659c5160001d1f7cf972a) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use `transform` from `@babel/core` instead of `@babel/parser` and `@babel/traverse` directly
83 |
84 | ## 0.0.3
85 |
86 | ### Patch Changes
87 |
88 | - [`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix code frame errors
89 |
90 | - Updated dependencies [[`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca)]:
91 | - @markings/types@0.0.2
92 |
93 | ## 0.0.2
94 |
95 | ### Patch Changes
96 |
97 | - [`15870fc`](https://github.com/Thinkmill/markings/commit/15870fc034cfa317eb3192295098f8126a2fb150) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Correctly require sources and outputs
98 |
99 | ## 0.0.1
100 |
101 | ### Patch Changes
102 |
103 | - [`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Initial release
104 |
105 | - Updated dependencies [[`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272)]:
106 | - @markings/types@0.0.1
107 |
--------------------------------------------------------------------------------
/packages/source-react/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/source-react-note
2 |
3 | ## 0.2.1
4 |
5 | ### Patch Changes
6 |
7 | - [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use updated @markings/types
8 |
9 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e), [`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
10 | - @markings/test-utils@0.0.4
11 | - @markings/types@0.2.0
12 |
13 | ## 0.2.0
14 |
15 | ### Minor Changes
16 |
17 | - [`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273) [#30](https://github.com/Thinkmill/markings/pull/30) Thanks [@jesstelford](https://github.com/jesstelford)! - Add support for `fixme` purpose in react sources, and `FIXME` in comment
18 | sources.
19 |
20 | ### Patch Changes
21 |
22 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
23 | - @markings/types@0.1.0
24 | - @markings/test-utils@0.0.3
25 |
26 | ## 0.1.2
27 |
28 | ### Patch Changes
29 |
30 | - [`0ae730f`](https://github.com/Thinkmill/markings/commit/0ae730fd8242b2e8db5f41fcaa9f8c2eb433f6ee) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix `@markings/source-react` to work with `@markings/react`
31 |
32 | ## 0.1.1
33 |
34 | ### Patch Changes
35 |
36 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
37 |
38 | - Updated dependencies [[`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
39 | - @markings/test-utils@0.0.2
40 | - @markings/types@0.0.7
41 |
42 | ## 0.1.0
43 |
44 | ### Minor Changes
45 |
46 | - [`d58bc1f`](https://github.com/Thinkmill/markings/commit/d58bc1f587c92a7c595ba062196fc74a8f7ea7a9) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `@markings/source-react-note` to `@markings/react-note`
47 |
48 | ### Patch Changes
49 |
50 | - Updated dependencies [[`a417548`](https://github.com/Thinkmill/markings/commit/a4175484f2af47e9db1f17677e6d8a33066267e7)]:
51 | - @markings/test-utils@0.0.1
52 |
53 | ## 0.0.7
54 |
55 | ### Patch Changes
56 |
57 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
58 | - @markings/types@0.0.6
59 |
60 | ## 0.0.6
61 |
62 | ### Patch Changes
63 |
64 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
65 | - @markings/types@0.0.5
66 |
67 | ## 0.0.5
68 |
69 | ### Patch Changes
70 |
71 | - [`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Default purpose to todo
72 |
73 | - Updated dependencies [[`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa)]:
74 | - @markings/types@0.0.4
75 |
76 | ## 0.0.4
77 |
78 | ### Patch Changes
79 |
80 | - [`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Add package to markings and rename details to description
81 |
82 | - Updated dependencies [[`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
83 | - @markings/types@0.0.3
84 |
85 | ## 0.0.3
86 |
87 | ### Patch Changes
88 |
89 | - [`0c6e806`](https://github.com/Thinkmill/markings/commit/0c6e80673dd9149842a659c5160001d1f7cf972a) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use `transform` from `@babel/core` instead of `@babel/parser` and `@babel/traverse` directly
90 |
91 | ## 0.0.2
92 |
93 | ### Patch Changes
94 |
95 | - [`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix code frame errors
96 |
97 | - Updated dependencies [[`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca)]:
98 | - @markings/types@0.0.2
99 |
100 | ## 0.0.1
101 |
102 | ### Patch Changes
103 |
104 | - [`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Initial release
105 |
106 | - Updated dependencies [[`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272)]:
107 | - @markings/types@0.0.1
108 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Basic Options */
4 | // "incremental": true, /* Enable incremental compilation */
5 | "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
6 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
7 | // "lib": [], /* Specify library files to be included in the compilation. */
8 | // "allowJs": true, /* Allow javascript files to be compiled. */
9 | // "checkJs": true, /* Report errors in .js files. */
10 | "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
13 | // "sourceMap": true, /* Generates corresponding '.map' file. */
14 | // "outFile": "./", /* Concatenate and emit output to single file. */
15 | // "outDir": "./", /* Redirect output structure to the directory. */
16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
17 | // "composite": true, /* Enable project compilation */
18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
19 | // "removeComments": true, /* Do not emit comments to output. */
20 | "noEmit": true /* Do not emit outputs. */,
21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
23 | "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
24 |
25 | /* Strict Type-Checking Options */
26 | "strict": true /* Enable all strict type-checking options. */,
27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
28 | // "strictNullChecks": true, /* Enable strict null checks. */
29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
34 |
35 | /* Additional Checks */
36 | // "noUnusedLocals": true, /* Report errors on unused locals. */
37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
40 |
41 | /* Module Resolution Options */
42 | "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
46 | // "typeRoots": [], /* List of folders to include type definitions from. */
47 | // "types": [], /* Type declaration files to be included in compilation. */
48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
52 |
53 | /* Source Map Options */
54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
58 |
59 | /* Experimental Options */
60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/packages/cli/src/index.ts:
--------------------------------------------------------------------------------
1 | import * as logger from "./logger";
2 | import fs from "fs-extra";
3 | import nodePath from "path";
4 | import { ExitError } from "./errors";
5 | import { Config, Marking, Output, PartialMarking } from "@markings/types";
6 | import mod from "module";
7 | import globby from "globby";
8 | import { ParserPlugin } from "@babel/parser";
9 | import { transform, PluginObj } from "@babel/core";
10 | import { getPackages, Package } from "@manypkg/get-packages";
11 | // @ts-ignore
12 | import { visitors as visitorsUtils, Visitor } from "@babel/traverse";
13 | // @ts-ignore
14 | import parseBitbucketUrl from "parse-bitbucket-url";
15 | import parseGithubUrl from "parse-github-url";
16 | import normalizePath from "normalize-path";
17 |
18 | let parserPlugins: ParserPlugin[] = [
19 | "asyncGenerators",
20 | "bigInt",
21 | "classPrivateMethods",
22 | "classProperties",
23 | "doExpressions",
24 | "dynamicImport",
25 | "importMeta",
26 | "jsx",
27 | "topLevelAwait",
28 | "throwExpressions",
29 | "nullishCoalescingOperator",
30 | "optionalChaining",
31 | "decorators-legacy",
32 | ];
33 |
34 | function getPackageFromFilename(
35 | repoRoot: string,
36 | filename: string,
37 | packagesByDirectory: Map
38 | ) {
39 | let currentDir = nodePath.dirname(filename);
40 | while (currentDir !== repoRoot) {
41 | let maybeCurrentPackage = packagesByDirectory.get(currentDir);
42 | if (maybeCurrentPackage !== undefined) {
43 | return maybeCurrentPackage;
44 | }
45 | currentDir = nodePath.dirname(currentDir);
46 | }
47 | throw new Error(`could not find package from ${JSON.stringify(filename)}`);
48 | }
49 |
50 | (async (cwd = process.cwd()) => {
51 | let args = process.argv.slice(2);
52 | let packagesPromise = getPackages(cwd);
53 | let packageJsonContent = await fs.readJson(
54 | nodePath.join(cwd, "package.json")
55 | );
56 | let config: Config | undefined = packageJsonContent.markings;
57 | if (!config) {
58 | logger.error("please configure markings before using the cli");
59 | throw new ExitError(1);
60 | }
61 | if (!config.sources.length) {
62 | logger.error("please add a marking source before using the cli");
63 | throw new ExitError(1);
64 | }
65 | if (!config.sources.length) {
66 | logger.error("please add a marking output before using the cli");
67 | throw new ExitError(1);
68 | }
69 |
70 | const req = mod.createRequire
71 | ? mod.createRequire(nodePath.join(cwd, "package.json"))
72 | : mod.createRequireFromPath(nodePath.join(cwd, "package.json"));
73 |
74 | let markings: Marking[] = [];
75 |
76 | let sourcesByFilename = new Map>();
77 |
78 | let addBabelSourceToFile = (filename: string, source: string) => {
79 | if (!sourcesByFilename.has(filename)) {
80 | sourcesByFilename.set(filename, new Set());
81 | }
82 | let sources = sourcesByFilename.get(filename)!;
83 | sources.add(source);
84 | };
85 |
86 | await Promise.all(
87 | config.sources.map(async (sourceConfig) => {
88 | let result = await globby(sourceConfig.include, {
89 | cwd,
90 | absolute: true,
91 | ignore: ["**/node_modules/**/*"],
92 | });
93 |
94 | for (let filename of result) {
95 | if (/\.[jt]sx?$/.test(filename) && !/\.d\.ts$/.test(filename)) {
96 | addBabelSourceToFile(filename, sourceConfig.source);
97 | }
98 | }
99 | })
100 | );
101 | let pkgs = await packagesPromise;
102 | let getUrl = (filename: string, line: number): string | undefined => {
103 | return;
104 | };
105 | if (typeof (pkgs.root.packageJson as any).repository === "string") {
106 | const parsed = parseGithubUrl((pkgs.root.packageJson as any).repository);
107 | if (parsed !== null && parsed.host === "github.com") {
108 | getUrl = (filename, line) => {
109 | return `https://github.com/${parsed.owner}/${parsed.name}/blob/master/${filename}#L${line}`;
110 | };
111 | } else {
112 | let bitbucketParsed = parseBitbucketUrl(
113 | (pkgs.root.packageJson as any).repository
114 | );
115 | getUrl = (filename, line) => {
116 | return `https://bitbucket.org/${bitbucketParsed.owner}/${bitbucketParsed.name}/src/${bitbucketParsed.branch}/${filename}#lines-${line}`;
117 | };
118 | }
119 | }
120 | let packagesByDirectory = new Map(pkgs.packages.map((x) => [x.dir, x]));
121 | // TODO: do extraction work in worker threads
122 | await Promise.all(
123 | [...sourcesByFilename.entries()].map(async ([filename, sources]) => {
124 | let visitorsArray = [...sources].map((x) => req(x).source.visitor);
125 |
126 | let visitor: Visitor = visitorsUtils.merge(
127 | visitorsArray,
128 | [...sources].map((source) => ({
129 | addMarking: (marking: PartialMarking) => {
130 | markings.push({
131 | location: {
132 | line: marking.location.line,
133 | filename,
134 | link: getUrl(
135 | normalizePath(nodePath.relative(pkgs.root.dir, filename)),
136 | marking.location.line
137 | ),
138 | },
139 | description: marking.description,
140 | source: source,
141 | package: getPackageFromFilename(
142 | pkgs.root.dir,
143 | filename,
144 | packagesByDirectory
145 | ).packageJson.name,
146 | purpose: marking.purpose,
147 | });
148 | },
149 | }))
150 | );
151 | let contents = await fs.readFile(filename, "utf8");
152 | transform(contents, {
153 | code: false,
154 | configFile: false,
155 | babelrc: false,
156 | filename,
157 | sourceRoot: cwd,
158 | filenameRelative: nodePath.relative(cwd, filename),
159 | parserOpts: {
160 | plugins: parserPlugins.concat(
161 | /\.tsx?$/.test(filename) ? "typescript" : "flow"
162 | ),
163 | },
164 | plugins: [
165 | (): PluginObj => {
166 | return {
167 | visitor,
168 | };
169 | },
170 | ],
171 | });
172 | })
173 | );
174 | await Promise.all(
175 | config.outputs.map(async (outputConfig) => {
176 | let plugin: Output = req(outputConfig.output).output;
177 | let output = await plugin.getFile(markings);
178 | await fs.writeFile(outputConfig.filename, output);
179 | })
180 | );
181 | })().catch((err) => {
182 | console.log("yes");
183 | if (err instanceof ExitError) {
184 | process.exit(err.code);
185 | } else {
186 | logger.error(err);
187 | process.exit(1);
188 | }
189 | });
190 |
--------------------------------------------------------------------------------
/test-project/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @markings/test-project
2 |
3 | ## 1.1.3
4 |
5 | ### Patch Changes
6 |
7 | - Updated dependencies [[`77cda5d`](https://github.com/Thinkmill/markings/commit/77cda5dd6002a52c80e2fd2888303c050c0afa4e)]:
8 | - @markings/cli@0.0.14
9 | - @markings/output-json@0.0.9
10 | - @markings/source-comments@0.1.1
11 | - @markings/source-react@0.2.1
12 | - @markings/output-csv@0.0.8
13 | - @markings/output-html@0.2.1
14 | - @markings/react@0.5.1
15 |
16 | ## 1.1.2
17 |
18 | ### Patch Changes
19 |
20 | - Updated dependencies [[`0070e0a`](https://github.com/Thinkmill/markings/commit/0070e0a305bdff69e85c41d0f1989329fc9fc330)]:
21 | - @markings/output-html@0.2.0
22 | - @markings/react@0.5.0
23 |
24 | ## 1.1.1
25 |
26 | ### Patch Changes
27 |
28 | - Updated dependencies [[`bb5c58f`](https://github.com/Thinkmill/markings/commit/bb5c58f8f9018900574f68d7057482d067467273)]:
29 | - @markings/source-comments@0.1.0
30 | - @markings/source-react@0.2.0
31 | - @markings/cli@0.0.13
32 | - @markings/output-csv@0.0.7
33 | - @markings/output-html@0.1.1
34 | - @markings/output-json@0.0.8
35 | - @markings/react@0.4.1
36 |
37 | ## 1.1.0
38 |
39 | ### Minor Changes
40 |
41 | - [`8443983`](https://github.com/Thinkmill/markings/commit/8443983d78b35637c1666fc1e643eab4bbb28908) [#28](https://github.com/Thinkmill/markings/pull/28) Thanks [@jesstelford](https://github.com/jesstelford)! - Introduce function-as-a-child for React component which doesn't require injecting { display: 'contents' }
42 |
43 | ### Patch Changes
44 |
45 | - Updated dependencies [[`8443983`](https://github.com/Thinkmill/markings/commit/8443983d78b35637c1666fc1e643eab4bbb28908)]:
46 | - @markings/react@0.4.0
47 |
48 | ## 1.0.17
49 |
50 | ### Patch Changes
51 |
52 | - Updated dependencies [[`414dbc1`](https://github.com/Thinkmill/markings/commit/414dbc10cc2f07ec59dae3f612cf8f24fe6b84ce)]:
53 | - @markings/output-html@0.1.0
54 | - @markings/react@0.3.0
55 |
56 | ## 1.0.16
57 |
58 | ### Patch Changes
59 |
60 | - Updated dependencies [[`cd3b380`](https://github.com/Thinkmill/markings/commit/cd3b380a1689e4f680b9daafd5685edd675a1a2f)]:
61 | - @markings/cli@0.0.12
62 |
63 | ## 1.0.15
64 |
65 | ### Patch Changes
66 |
67 | - Updated dependencies [[`e74d039`](https://github.com/Thinkmill/markings/commit/e74d039995cdd85f5d5de3fc8023cd1650e4d157)]:
68 | - @markings/react@0.2.0
69 |
70 | ## 1.0.14
71 |
72 | ### Patch Changes
73 |
74 | - [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update dependencies
75 |
76 | - Updated dependencies [[`601eabb`](https://github.com/Thinkmill/markings/commit/601eabb72c53e4ff10930888808729e6830b7a9b), [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea), [`844ce8a`](https://github.com/Thinkmill/markings/commit/844ce8a4b005d167c187f8890f3e0eb8d75978ea)]:
77 | - @markings/react@0.1.1
78 | - @markings/cli@0.0.11
79 | - @markings/output-csv@0.0.6
80 | - @markings/output-html@0.0.9
81 | - @markings/source-react@0.1.1
82 | - @markings/source-comments@0.0.8
83 | - @markings/output-json@0.0.7
84 |
85 | ## 1.0.13
86 |
87 | ### Patch Changes
88 |
89 | - Updated dependencies [[`d58bc1f`](https://github.com/Thinkmill/markings/commit/d58bc1f587c92a7c595ba062196fc74a8f7ea7a9), [`d58bc1f`](https://github.com/Thinkmill/markings/commit/d58bc1f587c92a7c595ba062196fc74a8f7ea7a9)]:
90 | - @markings/react@0.1.0
91 | - @markings/source-react@0.1.0
92 | - @markings/source-comments@0.0.7
93 |
94 | ## 1.0.12
95 |
96 | ### Patch Changes
97 |
98 | - Updated dependencies [[`1a91ed5`](https://github.com/Thinkmill/markings/commit/1a91ed542432d652ba2f8f56c26226f9840cd5ed)]:
99 | - @markings/cli@0.0.10
100 | - @markings/output-html@0.0.8
101 | - @markings/output-csv@0.0.5
102 | - @markings/output-json@0.0.6
103 | - @markings/react-note@0.0.4
104 | - @markings/source-comments@0.0.6
105 | - @markings/source-react-note@0.0.7
106 |
107 | ## 1.0.11
108 |
109 | ### Patch Changes
110 |
111 | - Updated dependencies [[`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11), [`b753444`](https://github.com/Thinkmill/markings/commit/b753444c8d0c16fd5be18dfa57fbe40ca294ac11)]:
112 | - @markings/output-html@0.0.7
113 | - @markings/react-note@0.0.3
114 | - @markings/cli@0.0.9
115 | - @markings/output-csv@0.0.4
116 | - @markings/output-json@0.0.5
117 | - @markings/source-comments@0.0.5
118 | - @markings/source-react-note@0.0.6
119 |
120 | ## 1.0.10
121 |
122 | ### Patch Changes
123 |
124 | - Updated dependencies [[`b80c6b4`](https://github.com/Thinkmill/markings/commit/b80c6b401ac828ae805b9102aa1a6b12680a0e4c)]:
125 | - @markings/output-html@0.0.6
126 |
127 | ## 1.0.9
128 |
129 | ### Patch Changes
130 |
131 | - Updated dependencies [[`9a73657`](https://github.com/Thinkmill/markings/commit/9a736573326003a12c09dd38dd76859c78113eb7), [`9a73657`](https://github.com/Thinkmill/markings/commit/9a736573326003a12c09dd38dd76859c78113eb7)]:
132 | - @markings/output-html@0.0.5
133 | - @markings/cli@0.0.8
134 |
135 | ## 1.0.8
136 |
137 | ### Patch Changes
138 |
139 | - Updated dependencies [[`28a4c54`](https://github.com/Thinkmill/markings/commit/28a4c54dcb2d765234194624ccc9fa8bf70a38b8), [`a90d1de`](https://github.com/Thinkmill/markings/commit/a90d1de4e0b1ae0177b1c9dac8629bfece351faa), [`28a4c54`](https://github.com/Thinkmill/markings/commit/28a4c54dcb2d765234194624ccc9fa8bf70a38b8)]:
140 | - @markings/source-comments@0.0.4
141 | - @markings/source-react-note@0.0.5
142 | - @markings/output-html@0.0.4
143 | - @markings/cli@0.0.7
144 | - @markings/output-csv@0.0.3
145 | - @markings/output-json@0.0.4
146 | - @markings/react-note@0.0.2
147 |
148 | ## 1.0.7
149 |
150 | ### Patch Changes
151 |
152 | - Updated dependencies [[`0810c19`](https://github.com/Thinkmill/markings/commit/0810c19f686f1cc4baa801aa74a1ef7dc24f7c38), [`3985c38`](https://github.com/Thinkmill/markings/commit/3985c38bbfead32d7aa6559ca07205621ba3ec2f)]:
153 | - @markings/react-note@0.0.1
154 | - @markings/cli@0.0.6
155 | - @markings/source-comments@0.0.3
156 | - @markings/source-react-note@0.0.4
157 | - @markings/output-csv@0.0.2
158 | - @markings/output-json@0.0.3
159 |
160 | ## 1.0.6
161 |
162 | ### Patch Changes
163 |
164 | - Updated dependencies [[`d33de9f`](https://github.com/Thinkmill/markings/commit/d33de9f36e9c93d4f9d4f4e4428b46be78c0a1d5)]:
165 | - @markings/output-csv@0.0.1
166 |
167 | ## 1.0.5
168 |
169 | ### Patch Changes
170 |
171 | - Updated dependencies [[`a2a0923`](https://github.com/Thinkmill/markings/commit/a2a092304533f03beaddd7062fdd8511f55f2019)]:
172 | - @markings/cli@0.0.5
173 |
174 | ## 1.0.4
175 |
176 | ### Patch Changes
177 |
178 | - Updated dependencies [[`0c6e806`](https://github.com/Thinkmill/markings/commit/0c6e80673dd9149842a659c5160001d1f7cf972a)]:
179 | - @markings/cli@0.0.4
180 | - @markings/source-react-note@0.0.3
181 |
182 | ## 1.0.3
183 |
184 | ### Patch Changes
185 |
186 | - Updated dependencies [[`7d5dbfa`](https://github.com/Thinkmill/markings/commit/7d5dbfa6b57b6ce7166f6cc2efca457e66db9dca)]:
187 | - @markings/cli@0.0.3
188 | - @markings/source-react-note@0.0.2
189 | - @markings/output-json@0.0.2
190 |
191 | ## 1.0.2
192 |
193 | ### Patch Changes
194 |
195 | - Updated dependencies [[`15870fc`](https://github.com/Thinkmill/markings/commit/15870fc034cfa317eb3192295098f8126a2fb150)]:
196 | - @markings/cli@0.0.2
197 |
198 | ## 1.0.1
199 |
200 | ### Patch Changes
201 |
202 | - Updated dependencies [[`dd59614`](https://github.com/Thinkmill/markings/commit/dd596143b68ded17301aafb4301a5b2718ae8272)]:
203 | - @markings/cli@0.0.1
204 | - @markings/output-json@0.0.1
205 | - @markings/source-react-note@0.0.1
206 |
--------------------------------------------------------------------------------
/packages/output-html/src/NotePanel.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 |
3 | import { AllHTMLAttributes, Fragment, HTMLAttributes, useRef } from "react";
4 | import { jsx } from "@emotion/react";
5 |
6 | import { color, radii, spacing, elevation } from "./tokens";
7 |
8 | import { Purpose, Marking } from "@markings/types";
9 |
10 | /**
11 | * Renders all of the UI to do with viewing the list of notes.
12 | */
13 | export const NotePanel = ({ markings }: { markings: Marking[] }) => {
14 | // bail if there are no registered notes
15 | if (!markings.length) {
16 | return No notes found ;
17 | }
18 |
19 | const groupedItems = groupItems(markings);
20 |
21 | return (
22 |
30 | {Object.entries(groupedItems).map(([pkgName, group]) => {
31 | let entries = Object.entries(group);
32 | return (
33 |
34 |
35 |
36 | {plural(
37 | entries.reduce(
38 | (accum, [_purpose, val]) => accum + val.length,
39 | 0
40 | ),
41 | "Note",
42 | "Notes"
43 | )}{" "}
44 | in {pkgName}
45 |
46 |
47 | {entries.map(([purpose, items]) => (
48 |
49 | {purpose}
50 |
51 | {items.map((item, index) => {
52 | let Comp: any = item.location.link ? "a" : "span";
53 | return (
54 | -
55 |
69 |
70 | {item.description}
71 |
72 |
73 |
74 | );
75 | })}
76 |
77 |
78 | ))}
79 |
80 | );
81 | })}
82 |
83 | );
84 | };
85 |
86 | // Styled Components
87 | // ------------------------------
88 |
89 | type SCProps = HTMLAttributes;
90 |
91 | const DIALOG_BG = "white";
92 | const GUTTER_LG = spacing.medium;
93 | const GUTTER_SM = spacing.small;
94 |
95 | const DialogHeader = (props: SCProps) => (
96 |
130 | );
131 |
132 | // groups
133 | const Group = (props: SCProps) => (
134 |
144 | );
145 | const GroupTitle = (props: SCProps) => (
146 |
164 | );
165 |
166 | // items
167 | const Item = (props: HTMLAttributes) => (
168 |
180 | );
181 |
182 | const ItemBody = (props: SCProps) => (
183 |
195 | );
196 |
197 | // Utils
198 | // ------------------------------
199 |
200 | type TGroupedItems = {
201 | [pkgName: string]: {
202 | [Key in Purpose]: Marking[];
203 | };
204 | };
205 |
206 | function groupItemsByPurpose(items: Marking[]) {
207 | // create an object grouped by the purpose property
208 | return items.reduce((acc, note) => {
209 | acc[note.purpose] = acc[note.purpose] || [];
210 | acc[note.purpose].push(note);
211 |
212 | return acc;
213 | }, {} as { [Key in Purpose]: Marking[] });
214 | }
215 |
216 | function groupItems(items: Marking[]): TGroupedItems {
217 | // create an object grouped by the purpose property
218 | let itemsByPackage = items.reduce(
219 | (acc, note) => {
220 | acc[note.package] = acc[note.package] || [];
221 | acc[note.package].push(note);
222 |
223 | return acc;
224 | },
225 | {} as {
226 | [pkgName: string]: Marking[];
227 | }
228 | );
229 | for (let pkgName in itemsByPackage) {
230 | (itemsByPackage as any)[pkgName] = groupItemsByPurpose(
231 | itemsByPackage[pkgName]
232 | );
233 | }
234 | return (itemsByPackage as any) as TGroupedItems;
235 | }
236 |
237 | function plural(n: number, s: string, p: string) {
238 | return `${n} ${n === 1 ? s : p}`;
239 | }
240 |
241 | const Dialog = (props: HTMLAttributes) => (
242 |
268 | );
269 |
270 | // color stuff
271 | type RGB = [number, number, number];
272 | function hexToRgb(hexString: string): RGB {
273 | let hex = hexString.replace("#", "");
274 | let bigint = parseInt(hex, 16);
275 | let r = (bigint >> 16) & 255;
276 | let g = (bigint >> 8) & 255;
277 | let b = bigint & 255;
278 |
279 | return [r, g, b];
280 | }
281 | function luminanace(rgb: RGB) {
282 | var a = rgb.map(function(v) {
283 | v /= 255;
284 | return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
285 | });
286 | return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
287 | }
288 | const foreground = (s: string) =>
289 | luminanace(hexToRgb(s)) > 0.6 ? "black" : "white";
290 |
--------------------------------------------------------------------------------
/packages/react/src/marking/NotePanel.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 |
3 | import {
4 | AllHTMLAttributes,
5 | Fragment,
6 | HTMLAttributes,
7 | forwardRef,
8 | useEffect,
9 | useMemo,
10 | useRef,
11 | useState,
12 | } from "react";
13 | import { createPortal } from "react-dom";
14 | import { jsx } from "@emotion/react";
15 |
16 | import { color, elevation, radii, spacing } from "../tokens";
17 | import { CrossIcon, PinIcon } from "../icons";
18 | import { usePopover } from "../popover";
19 |
20 | import { MarkingType, ConfigType } from "./NoteContext";
21 | import { Purpose } from "@markings/types";
22 |
23 | /**
24 | * Renders all of the UI to do with viewing the list of notes.
25 | */
26 | export const MarkingPanel = ({ notes }: { notes: TItems }) => {
27 | const [activeElement, setActiveElement] = useState(null);
28 | const {
29 | isOpen,
30 | openPopover,
31 | closePopover,
32 | dialogRef,
33 | triggerRef,
34 | } = usePopover("top-end");
35 |
36 | const itemMouseEnter = (id: string) => () => {
37 | const el = document.querySelector(`[data-marking-id="${id}"]`);
38 | if (el) {
39 | setActiveElement(el as HTMLElement);
40 |
41 | el.scrollIntoView({
42 | behavior: "smooth",
43 | block: "nearest",
44 | inline: "start",
45 | });
46 | }
47 | };
48 | const itemMouseLeve = () => {
49 | setActiveElement(null);
50 | };
51 |
52 | if (typeof document === "undefined") {
53 | return null;
54 | }
55 |
56 | const noteCount = Object.keys(notes).length;
57 |
58 | // bail if there are no registered notes
59 | if (!noteCount) {
60 | return null;
61 | }
62 |
63 | const groupedItems = groupItems(notes);
64 |
65 | return createPortal(
66 |
67 | {isOpen && (
68 |
72 |
73 |
74 | {plural(noteCount, "Note", "Notes")}
75 |
76 |
77 |
81 | What is this?
82 |
83 |
84 |
85 |
86 | {Object.entries(groupedItems).map(([purpose, items]) => (
87 |
88 | {purpose}
89 |
90 | {items.map((item) => {
91 | // const href = item.issue
92 | // ? config.resolveIssuePath(item.issue)
93 | // : config.resolveIssueCreatePath(item);
94 | // const anchorTitle = item.issue
95 | // ? "Go to related issue"
96 | // : "Create an issue for this note";
97 |
98 | return (
99 | -
104 |
110 |
111 | {item.description}
112 |
113 | {item.issue}
114 |
115 |
116 | );
117 | })}
118 |
119 |
120 | ))}
121 |
122 | {/*
123 |
124 | What is this? Learn about{" "}
125 | markings .
126 |
127 | */}
128 |
129 | )}
130 |
135 | {isOpen ? : }
136 | {/* {noteCount} */}
137 |
138 | {activeElement && }
139 | ,
140 | document.body
141 | );
142 | };
143 |
144 | // Styled Components
145 | // ------------------------------
146 |
147 | type SCProps = HTMLAttributes;
148 |
149 | /** The button the user clicks to toggle the view panel. */
150 | const Fab = forwardRef((props, ref) => {
151 | return (
152 |
181 | );
182 | });
183 |
184 | const DIALOG_BG = "white";
185 | const GUTTER_LG = spacing.medium;
186 | const GUTTER_SM = spacing.small;
187 |
188 | /** The element that popups up to display all the notes */
189 | const Dialog = forwardRef((props, consumerRef) => {
190 | return (
191 |
219 | );
220 | });
221 | const DialogHeader = (props: SCProps) => (
222 |
256 | );
257 | const DialogFooter = (props: SCProps) => (
258 |
290 | );
291 | const ScrollPane = (props: SCProps) => (
292 |
300 | );
301 |
302 | // groups
303 | const Group = (props: SCProps) => (
304 |
314 | );
315 | const GroupTitle = (props: SCProps) => (
316 |
334 | );
335 |
336 | // items
337 | const Item = (props: HTMLAttributes) => (
338 |
350 | );
351 | const ItemAnchor = (props: AllHTMLAttributes) => (
352 |
367 | );
368 | const ItemBody = (props: SCProps) => (
369 |
381 | );
382 | const ItemSymbol = (props: SCProps) => (
383 |
397 | );
398 |
399 | // issue labels
400 | const ItemMeta = ({ meta }: { meta: any }) => {
401 | if (!(meta.labels && meta.labels.length) || !meta.assignee) {
402 | return null;
403 | }
404 |
405 | return (
406 |
407 |
408 | {meta.labels && meta.labels.length ? (
409 | meta.labels.map((l: any) => (
410 |
411 | {l.name}
412 |
413 | ))
414 | ) : (
415 | {meta.assignee.login}
416 | )}
417 |
418 | );
419 | };
420 | type ItemLabelProps = { bg: string } & SCProps;
421 | const ItemLabel = ({ bg, ...props }: ItemLabelProps) => {
422 | const fg = useMemo(() => foreground(bg), [bg]);
423 | return (
424 |
441 | );
442 | };
443 |
444 | // assignee
445 | type ItemAssigneeProps = {
446 | assignee: { avatar_url: string; login: string };
447 | } & SCProps;
448 | const ItemAssignee = ({ assignee }: ItemAssigneeProps) => {
449 | if (!assignee) {
450 | return null;
451 | }
452 |
453 | return (
454 |
467 | );
468 | };
469 |
470 | /** Overlays the matching element to highlight the region to the user */
471 | type BlanketProps = {
472 | element: HTMLElement;
473 | };
474 | const Blanket = ({ element }: BlanketProps) => {
475 | if (typeof document === "undefined") {
476 | return null;
477 | }
478 |
479 | // we need to use a range here because getBoundingClientRect() on an element with display: contents will have 0 on all the things
480 | // (markings have display: contents because we don't want the elements to affect layout and etc.)
481 | const range = document.createRange();
482 | range.selectNodeContents(element);
483 |
484 | const rect = range.getBoundingClientRect();
485 | // const style = window.getComputedStyle(element);
486 | // const rounding = {
487 | // borderBottomLeftRadius: style['border-bottom-left-radius'],
488 | // borderBottomRightRadius: style['border-bottom-right-radius'],
489 | // borderTopLeftRadius: style['border-top-left-radius'],
490 | // borderTopRightRadius: style['border-top-right-radius'],
491 | // };
492 |
493 | // const gutter = 1;
494 |
495 | return createPortal(
496 |
,
516 | document.body
517 | );
518 | };
519 |
520 | // Utils
521 | // ------------------------------
522 |
523 | type TItems = {
524 | [id: string]: MarkingType;
525 | };
526 |
527 | type TGroupedItems = {
528 | [Key in Purpose]: (MarkingType & { id: string })[];
529 | };
530 |
531 | function groupItems(obj: TItems): TGroupedItems {
532 | // strip children + ensure `purpose` property
533 | let arr = Object.entries(obj).map(([id, data]) => {
534 | if (!data.purpose) {
535 | return { id, purpose: "todo", ...data };
536 | }
537 | return { id, ...data };
538 | });
539 |
540 | // create an object grouped by the purpose property
541 | return arr.reduce((acc, note) => {
542 | acc[note.purpose] = acc[note.purpose] || [];
543 | acc[note.purpose].push(note);
544 |
545 | return acc;
546 | }, {} as TGroupedItems);
547 | }
548 |
549 | function plural(n: number, s: string, p: string) {
550 | return `${n} ${n === 1 ? s : p}`;
551 | }
552 |
553 | // color stuff
554 | type RGB = [number, number, number];
555 | function hexToRgb(hexString: string): RGB {
556 | let hex = hexString.replace("#", "");
557 | let bigint = parseInt(hex, 16);
558 | let r = (bigint >> 16) & 255;
559 | let g = (bigint >> 8) & 255;
560 | let b = bigint & 255;
561 |
562 | return [r, g, b];
563 | }
564 | function luminanace(rgb: RGB) {
565 | var a = rgb.map(function (v) {
566 | v /= 255;
567 | return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
568 | });
569 | return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
570 | }
571 | const foreground = (s: string) =>
572 | luminanace(hexToRgb(s)) > 0.6 ? "black" : "white";
573 |
--------------------------------------------------------------------------------