Initialize the squared component package

squared will become a common React component library for Squareone
applications that build upon the design tokens from Rubin Style
Dictionary.

.changeset/kind-impalas-crash.md

@@ -0,0 +1,5 @@
+---
+'@lsst-sqre/squared': minor
+---
+
+This is the first release of the Squared React component library for Squareone.

README.md

@@ -14,6 +14,7 @@ Squareone is a monorepo for [Rubin Observatory](https://rubinobservatory.org) Da
 
 - `@lsst-sqre/eslint-config` is a shared ESLint configuration for Squareone applications and packages.
 - `@lsst-sqre/rubin-style-dictonary` is a design token package based on the [Rubin Observatory Visual Identity Manual](https://docushare.lsst.org/docushare/dsweb/Get/Document-37294/20210212%20Visual%20Identity%20Manual%20—V7.pdf), build with [style-dictionary](https://amzn.github.io/style-dictionary/).
+- `@lsst-sqre/squared` is a React component library for Squareone's applications. Squared implements the Rubin Observatory Visual Identity Manual via design tokens from the Rubin Style Dictionary (`@lsst-sqre/rubin-style-dictionary`).
 - `@lsst-sqre/tsconfig` is a shared TypeScript configuration for Squareone applications and packages.
 
 ## Technology stack

packages/squared/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@lsst-sqre/eslint-config'],
+};

packages/squared/README.md

@@ -0,0 +1,3 @@
+# @lsst-sqre/squared
+
+Squared in a React component library for Squareone's applications. Squared implements the Rubin Observatory Visual Identity Manual via design tokens from the Rubin Style Dictionary (`@lsst-sqre/rubin-style-dictionary`) and uses a base CSS stylesheet from `@lsst-sqre/global-css`.

packages/squared/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@lsst-sqre/squared",
+  "description": "A React component library for Squareone / Rubin Data Management.",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lsst-sqre/rubin-style-dictionary": "workspace:*",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.6"
+  },
+  "devDependencies": {
+    "@lsst-sqre/eslint-config": "workspace:*",
+    "@lsst-sqre/tsconfig": "workspace:*",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.35.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.1.6"
+  }
+}

packages/squared/src/Button.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface ButtonProps {
+  children: React.ReactNode;
+}
+
+export function Button(props: ButtonProps) {
+  return <button>{props.children}</button>;
+}
+
+Button.displayName = 'Button';

packages/squared/src/index.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export { Button, type ButtonProps } from './Button';

packages/squared/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@lsst-sqre/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}