Initial tailwind preset package from create-package script (#47)

## **Description**

This PR creates the initial `@metamask/design-system-tailwind-preset`
package using the `create-package` script. It sets up the necessary
structure and dependencies for the package.

## **Related issues**

Partially fixes:
#34

## **Manual testing steps**

1. Navigate to the package directory.
2. Verify the contents of the README file.
3. Check the `package.json` to ensure consistent naming of the package.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pulled and built the branch, ran
the app, and tested the code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and/or screenshots.


## Related
- #41

README.md

@@ -8,6 +8,7 @@ This repository contains the following packages [^fn1]:
 
 <!-- start package list -->
 
+- [`@metamask/design-system-tailwind-preset`](packages/design-system-tailwind-preset)
 - [`@metamask/metamask-module-template`](packages/metamask-module-template)
 - [`@metamask/storybook-react`](packages/storybook-react)
 
@@ -21,6 +22,7 @@ Or, in graph form [^fn1]:
 %%{ init: { 'flowchart': { 'curve': 'bumpX' } } }%%
 graph LR;
 linkStyle default opacity:0.5
+  design_system_tailwind_preset(["@metamask/design-system-tailwind-preset"]);
   metamask_module_template(["@metamask/metamask-module-template"]);
   storybook_react(["@metamask/storybook-react"]);
 ```

packages/design-system-tailwind-preset/CHANGELOG.md

@@ -0,0 +1,10 @@
+# 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/metamask-design-system/

packages/design-system-tailwind-preset/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 MetaMask
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

packages/design-system-tailwind-preset/README.md

@@ -0,0 +1,15 @@
+# `@metamask/design-system-tailwind-preset`
+
+Design system tailwind css preset
+
+## Installation
+
+`yarn add @metamask/design-system-tailwind-preset`
+
+or
+
+`npm install @metamask/design-system-tailwind-preset`
+
+## Contributing
+
+This package is part of a monorepo. Instructions for contributing can be found in the [monorepo README](https://github.com/MetaMask/metamask-design-system#readme).

packages/design-system-tailwind-preset/jest.config.js

@@ -0,0 +1,26 @@
+/*
+ * For a detailed explanation regarding each configuration property and type check, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+const merge = require('deepmerge');
+const path = require('path');
+
+const baseConfig = require('../../jest.config.packages');
+
+const displayName = path.basename(__dirname);
+
+module.exports = merge(baseConfig, {
+  // The display name when running multiple projects
+  displayName,
+
+  // An object that configures minimum threshold enforcement for coverage results
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+});

packages/design-system-tailwind-preset/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@metamask/design-system-tailwind-preset",
+  "version": "0.0.0",
+  "description": "Design system tailwind css preset",
+  "keywords": [
+    "MetaMask",
+    "Ethereum"
+  ],
+  "homepage": "https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-tailwind-preset#readme",
+  "bugs": {
+    "url": "https://github.com/MetaMask/metamask-design-system/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MetaMask/metamask-design-system.git"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.cts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
+    "build:docs": "typedoc",
+    "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-tailwind-preset",
+    "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-tailwind-preset",
+    "publish:preview": "yarn npm publish --tag preview",
+    "since-latest-release": "../../scripts/since-latest-release.sh",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter",
+    "test:clean": "NODE_OPTIONS=--experimental-vm-modules jest --clearCache",
+    "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
+  },
+  "devDependencies": {
+    "@metamask/auto-changelog": "^3.4.4",
+    "@types/jest": "^27.4.1",
+    "deepmerge": "^4.2.2",
+    "jest": "^27.5.1",
+    "ts-jest": "^27.1.4",
+    "typedoc": "^0.24.8",
+    "typedoc-plugin-missing-exports": "^2.0.0",
+    "typescript": "~5.2.2"
+  },
+  "engines": {
+    "node": "^18.18 || >=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

packages/design-system-tailwind-preset/src/index.test.ts

@@ -0,0 +1,9 @@
+import greeter from '.';
+
+describe('Test', () => {
+  it('greets', () => {
+    const name = 'Huey';
+    const result = greeter(name);
+    expect(result).toBe('Hello, Huey!');
+  });
+});

packages/design-system-tailwind-preset/src/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Example function that returns a greeting for the given name.
+ *
+ * @param name - The name to greet.
+ * @returns The greeting.
+ */
+export default function greeter(name: string): string {
+  return `Hello, ${name}!`;
+}

packages/design-system-tailwind-preset/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.packages.build.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "references": [],
+  "include": ["../../types", "./src"]
+}

packages/design-system-tailwind-preset/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.packages.json",
+  "compilerOptions": {
+    "baseUrl": "./"
+  },
+  "references": [],
+  "include": ["../../types", "./src"]
+}

packages/design-system-tailwind-preset/typedoc.json

@@ -0,0 +1,7 @@
+{
+  "entryPoints": ["./src/index.ts"],
+  "excludePrivate": true,
+  "hideGenerator": true,
+  "out": "docs",
+  "tsconfig": "./tsconfig.build.json"
+}

tsconfig.build.json

@@ -1,5 +1,6 @@
 {
   "references": [
+    { "path": "./packages/design-system-tailwind-preset/tsconfig.build.json" },
     { "path": "./packages/metamask-module-template/tsconfig.build.json" }
   ],
   "files": [],

tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": { "esModuleInterop": true, "noEmit": true },
   "references": [
     { "path": "./packages/metamask-module-template" },
-    { "path": "./packages/storybook-react" }
+    { "path": "./packages/storybook-react" },
+    { "path": "./packages/design-system-tailwind-preset" }
   ],
   "files": [],
   "include": ["./types"]

yarn.lock

@@ -1448,6 +1448,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/design-system-tailwind-preset@workspace:packages/design-system-tailwind-preset":
+  version: 0.0.0-use.local
+  resolution: "@metamask/design-system-tailwind-preset@workspace:packages/design-system-tailwind-preset"
+  dependencies:
+    "@metamask/auto-changelog": "npm:^3.4.4"
+    "@types/jest": "npm:^27.4.1"
+    deepmerge: "npm:^4.2.2"
+    jest: "npm:^27.5.1"
+    ts-jest: "npm:^27.1.4"
+    typedoc: "npm:^0.24.8"
+    typedoc-plugin-missing-exports: "npm:^2.0.0"
+    typescript: "npm:~5.2.2"
+  languageName: unknown
+  linkType: soft
+
 "@metamask/design-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "@metamask/design-tokens@npm:4.0.0"