Add UI package

packages/snaps-ui/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+  },
+};

packages/snaps-ui/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+[Unreleased]: https://github.com/MetaMask/snaps-monorepo/

packages/snaps-ui/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2022 MetaMask
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

packages/snaps-ui/README.md

@@ -0,0 +1,12 @@
+# @metamask/snaps-ui
+
+A MetaMask Snaps UI library.
+
+## Installation
+
+Use Node.js `16.0.0` or later. We recommend using [nvm](https://github.com/nvm-sh/nvm) for managing Node.js versions.
+
+Install a dependency in your snap project using `yarn` or `npm`:
+
+- `npm install @metamask/snaps-ui`
+- `yarn add @metamask/snaps-ui`

packages/snaps-ui/jest.config.js

@@ -0,0 +1,14 @@
+const deepmerge = require('deepmerge');
+
+const baseConfig = require('../../jest.config.base');
+
+module.exports = deepmerge(baseConfig, {
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+});

packages/snaps-ui/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@metamask/snaps-ui",
+  "version": "0.24.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MetaMask/snaps-monorepo.git"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "test": "jest && yarn posttest",
+    "posttest": "jest-it-up --margin 0.25",
+    "test:ci": "yarn test",
+    "lint:eslint": "eslint . --cache --ext js,ts",
+    "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --ignore-path ../../.gitignore",
+    "lint": "yarn lint:eslint && yarn lint:misc --check",
+    "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
+    "lint:changelog": "yarn auto-changelog validate",
+    "build": "tsc --project tsconfig.build.json",
+    "build:clean": "yarn clean && yarn build",
+    "clean": "rimraf '*.tsbuildinfo' 'dist/*'",
+    "publish:package": "../../scripts/publish-package.sh"
+  },
+  "dependencies": {
+    "@metamask/utils": "^3.3.1",
+    "superstruct": "^0.16.7"
+  },
+  "devDependencies": {
+    "@lavamoat/allow-scripts": "^2.0.3",
+    "@metamask/auto-changelog": "^2.6.0",
+    "@metamask/eslint-config": "^11.0.0",
+    "@metamask/eslint-config-jest": "^11.0.0",
+    "@metamask/eslint-config-nodejs": "^11.0.1",
+    "@metamask/eslint-config-typescript": "^11.0.0",
+    "@types/jest": "^27.5.1",
+    "@types/semver": "^7.3.10",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "deepmerge": "^4.2.2",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.1.5",
+    "eslint-plugin-jsdoc": "^39.6.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.0.2",
+    "jest-it-up": "^2.0.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-packagejson": "^2.2.11",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^29.0.0",
+    "typescript": "~4.8.4"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

packages/snaps-ui/src/builder.test.ts

@@ -0,0 +1,243 @@
+import {
+  copyable,
+  divider,
+  heading,
+  panel,
+  spacer,
+  spinner,
+  text,
+} from './builder';
+import { NodeType } from './nodes';
+
+describe('copyable', () => {
+  it('creates a copyable component', () => {
+    expect(copyable({ text: 'Hello, world!' })).toStrictEqual({
+      type: NodeType.Copyable,
+      text: 'Hello, world!',
+    });
+
+    expect(copyable({ text: 'foo bar' })).toStrictEqual({
+      type: NodeType.Copyable,
+      text: 'foo bar',
+    });
+  });
+
+  it('creates a copyable component using the shorthand form', () => {
+    expect(copyable('Hello, world!')).toStrictEqual({
+      type: NodeType.Copyable,
+      text: 'Hello, world!',
+    });
+
+    expect(copyable('foo bar')).toStrictEqual({
+      type: NodeType.Copyable,
+      text: 'foo bar',
+    });
+  });
+
+  it('validates the args', () => {
+    // @ts-expect-error - Invalid args.
+    expect(() => copyable({ text: 'foo', bar: 'baz' })).toThrow(
+      'Invalid copyable component: At path: bar -- Expected a value of type `never`, but received: `"baz"`.',
+    );
+
+    // @ts-expect-error - Invalid args.
+    expect(() => copyable({})).toThrow(
+      'Invalid copyable component: At path: text -- Expected a string, but received: undefined.',
+    );
+  });
+});
+
+describe('divider', () => {
+  it('creates a divider component', () => {
+    expect(divider()).toStrictEqual({
+      type: NodeType.Divider,
+    });
+  });
+
+  it('validates the args', () => {
+    // @ts-expect-error - Invalid args.
+    expect(() => divider({ bar: 'baz' })).toThrow(
+      'Invalid divider component: At path: bar -- Expected a value of type `never`, but received: `"baz"`.',
+    );
+  });
+});
+
+describe('heading', () => {
+  it('creates a heading component', () => {
+    expect(heading({ text: 'Hello, world!' })).toStrictEqual({
+      type: NodeType.Heading,
+      text: 'Hello, world!',
+    });
+
+    expect(heading({ text: 'foo bar' })).toStrictEqual({
+      type: NodeType.Heading,
+      text: 'foo bar',
+    });
+  });
+
+  it('creates a heading component using the shorthand form', () => {
+    expect(heading('Hello, world!')).toStrictEqual({
+      type: NodeType.Heading,
+      text: 'Hello, world!',
+    });
+
+    expect(heading('foo bar')).toStrictEqual({
+      type: NodeType.Heading,
+      text: 'foo bar',
+    });
+  });
+
+  it('validates the args', () => {
+    // @ts-expect-error - Invalid args.
+    expect(() => heading({ text: 'foo', bar: 'baz' })).toThrow(
+      'Invalid heading component: At path: bar -- Expected a value of type `never`, but received: `"baz"`.',
+    );
+
+    // @ts-expect-error - Invalid args.
+    expect(() => heading({})).toThrow(
+      'Invalid heading component: At path: text -- Expected a string, but received: undefined.',
+    );
+  });
+});
+
+describe('panel', () => {
+  it('creates a panel component', () => {
+    expect(
+      panel({ children: [heading({ text: 'Hello, world!' })] }),
+    ).toStrictEqual({
+      type: NodeType.Panel,
+      children: [
+        {
+          type: NodeType.Heading,
+          text: 'Hello, world!',
+        },
+      ],
+    });
+
+    expect(
+      panel({
+        children: [panel({ children: [heading({ text: 'Hello, world!' })] })],
+      }),
+    ).toStrictEqual({
+      type: NodeType.Panel,
+      children: [
+        {
+          type: NodeType.Panel,
+          children: [
+            {
+              type: NodeType.Heading,
+              text: 'Hello, world!',
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('creates a panel component using the shorthand form', () => {
+    expect(panel([heading('Hello, world!')])).toStrictEqual({
+      type: NodeType.Panel,
+      children: [
+        {
+          type: NodeType.Heading,
+          text: 'Hello, world!',
+        },
+      ],
+    });
+
+    expect(panel([panel([heading('Hello, world!')])])).toStrictEqual({
+      type: NodeType.Panel,
+      children: [
+        {
+          type: NodeType.Panel,
+          children: [
+            {
+              type: NodeType.Heading,
+              text: 'Hello, world!',
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('validates the args', () => {
+    // @ts-expect-error - Invalid args.
+    expect(() => panel({ children: [], bar: 'baz' })).toThrow(
+      'Invalid panel component: At path: bar -- Expected a value of type `never`, but received: `"baz"`.',
+    );
+
+    // @ts-expect-error - Invalid args.
+    expect(() => panel({})).toThrow(
+      'Invalid panel component: At path: children -- Expected an array value, but received: undefined.',
+    );
+  });
+});
+
+describe('spacer', () => {
+  it('creates a spacer component', () => {
+    expect(spacer()).toStrictEqual({
+      type: NodeType.Spacer,
+    });
+  });
+
+  it('validates the args', () => {
+    // @ts-expect-error - Invalid args.
+    expect(() => spacer({ bar: 'baz' })).toThrow(
+      'Invalid spacer component: At path: bar -- Expected a value of type `never`, but received: `"baz"`.',
+    );
+  });
+});
+
+describe('spinner', () => {
+  it('creates a spinner component', () => {
+    expect(spinner()).toStrictEqual({
+      type: NodeType.Spinner,
+    });
+  });
+
+  it('validates the args', () => {
+    // @ts-expect-error - Invalid args.
+    expect(() => spinner({ bar: 'baz' })).toThrow(
+      'Invalid spinner component: At path: bar -- Expected a value of type `never`, but received: `"baz"`.',
+    );
+  });
+});
+
+describe('text', () => {
+  it('creates a text component', () => {
+    expect(text({ text: 'Hello, world!' })).toStrictEqual({
+      type: NodeType.Text,
+      text: 'Hello, world!',
+    });
+
+    expect(text({ text: 'foo bar' })).toStrictEqual({
+      type: NodeType.Text,
+      text: 'foo bar',
+    });
+  });
+
+  it('creates a text component using the shorthand form', () => {
+    expect(text('Hello, world!')).toStrictEqual({
+      type: NodeType.Text,
+      text: 'Hello, world!',
+    });
+
+    expect(text('foo bar')).toStrictEqual({
+      type: NodeType.Text,
+      text: 'foo bar',
+    });
+  });
+
+  it('validates the args', () => {
+    // @ts-expect-error - Invalid args.
+    expect(() => text({ text: 'foo', bar: 'baz' })).toThrow(
+      'Invalid text component: At path: bar -- Expected a value of type `never`, but received: `"baz"`.',
+    );
+
+    // @ts-expect-error - Invalid args.
+    expect(() => text({})).toThrow(
+      'Invalid text component: At path: text -- Expected a string, but received: undefined.',
+    );
+  });
+});