feat: TUP-700 @tacc/core-components - package

README.md

@@ -22,14 +22,10 @@ This project was generated using [Nx](https://nx.dev).
 The TUP dashboard is accessed at http://localhost:8000/portal.
 To bring containers down after development, run `npx nx down tup-cms`.
 
-<!--
-
 Other useful commands:
 
 - `npx nx build core-components` to create a distributable library for the core components.
 
--->
-
 ## Contributing
 
 To contribute, first read [How to Contirbute](./docs/contributing.md).

libs/core-components/.gitignore

@@ -0,0 +1,4 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist

libs/core-components/README.md

@@ -1,7 +1,74 @@
-# core-components
+# TACC: Core-Components
 
 This library was generated with [Nx](https://nx.dev).
 
-## Running unit tests
+Reusable components for TACC WMA Workspace Portals & Websites
+
+## Table of Contents
+
+- [Related Repositories](#related-repositories)
+- [Project Architecture](#project-architecture)
+- [Prerequisites](#prerequisites)
+- [Getting Started](#getting-started)
+- [Developing](#developing)
+- [Contributing](#contributing)
+- [Testing](#testing)
+
+## Related Repositories
+
+- [Core Styles], the shared UI pattern code for TACC WMA CMS Websites
+
+## Project Architecture
+
+| directory | contents                     |
+| --------- | ---------------------------- |
+| `src/lib` | components, tests, [stories] |
+
+## Prerequisites
+
+- [Node.js]
+
+## Getting Started
+
+> **Important**
+> To develop a new or existing custom CMS website for a TACC client, do **not** clone this repository. Instead, read [Develop a Custom Project]. To develop on the Core CMS (upon which our other CMS are built) continute reading.
+
+Set up a new local CMS instance.
+
+0. [Clone this Repository.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
+1. Enter the Repository Clone:
+
+   ```sh
+   cd tup-ui
+   ```
+
+2. Install Dependencies:
+
+   ```sh
+   npm install
+   ```
+
+## Developing
+
+The components are [React components](https://react.dev/learn) that should be [written in TypeScript](https://react.dev/learn/typescript#typescript-with-react-components).
+
+| command         | task               | service                       |
+| --------------- | ------------------ | ----------------------------- |
+| `npm test`      | execute unit tests | [Vitest](https://vitest.dev/) |
+| `npm run build` | build components   | [Vite](https://vitejs.dev/)   |
+
+## Testing
+
+### Unit Tests
 
 Run `nx test core-components` to execute the unit tests via [Vitest](https://vitest.dev/).
+
+### End-to-End Tests
+
+Perform manually by installing and testing the components in a separate respository. See [different approaches to testing your own packages](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-1kdg).
+
+<!-- Link Aliases -->
+
+[core styles]: https://github.com/TACC/Core-Styles
+[node.js]: https://nodejs.org/
+[stories]: https://storybook.js.org/docs/get-started/whats-a-story

libs/core-components/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@tacc/core-components",
+  "version": "0.0.1",
+  "license": "MIT",
+  "author": "TACC ACI WMA <[email protected]>",
+  "description": "React component library for TACC applications.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "// start": "nx serve",
+    "build": "nx build",
+    "test": "nx test",
+    "prepublishOnly": "npm run build"
+  },
+  "homepage": "https://github.com/TACC/tup-ui/libs/core-components",
+  "repository": "[email protected]:TACC/tup-ui.git",
+  "peerDependencies": {
+    "@tacc/core-styles": "^2.23.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "formik": "^2.2.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-resize-detector": "^7.1.2",
+    "react-table": "^7.8.0",
+    "reactstrap": "^9.1.5",
+    "uuid": "^8.3.2"
+  },
+  "sideEffects": [
+    "libs/core-componets/**/*.css"
+  ]
+}

libs/core-components/project.json

@@ -5,6 +5,14 @@
   "projectType": "library",
   "tags": [],
   "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "libs/core-components/dist"
+      }
+    },
     "lint": {
       "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"]

libs/core-components/tsconfig.json

@@ -5,10 +5,12 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "types": ["vitest"]
+    "types": ["vite/client", "vitest"],
+    "composite": true,
+    "declaration": true
   },
   "files": [],
-  "include": [],
+  "include": ["src"],
   "references": [
     {
       "path": "./tsconfig.lib.json"

libs/core-components/vite.config.ts

@@ -1,31 +1,61 @@
 /// <reference types="vitest" />
+import { extname, relative, resolve } from 'path';
+import { fileURLToPath } from 'node:url';
+import { glob } from 'glob';
+
 import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 import react from '@vitejs/plugin-react-swc';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   cacheDir: '../../node_modules/.vite/core-components',
 
   plugins: [
     react(),
+    dts(),
+    libInjectCss(),
     viteTsConfigPaths({
       root: '../../',
     }),
   ],
 
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [
-  //    viteTsConfigPaths({
-  //      root: '../../',
-  //    }),
-  //  ],
-  // },
+  build: {
+    reportCompressedSize: true,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react/jsx-runtime'],
+      input: Object.fromEntries(
+        // https://rollupjs.org/configuration-options/#input
+        glob
+          .sync(resolve(__dirname, 'src/**/!(*.test).{ts,tsx,js,jsx}'))
+          .map((file) => [
+            // This removes `...src/` as well as the file extension from each
+            // file, so e.g. ...src/nested/foo.js becomes nested/foo
+            relative(
+              resolve(__dirname, 'src'),
+              file.slice(0, file.length - extname(file).length)
+            ),
+            // This expands the relative paths to absolute paths, so e.g.
+            // ...src/nested/foo becomes /project/src/nested/foo.js
+            fileURLToPath(new URL(file, import.meta.url)),
+          ])
+      ),
+      output: {
+        assetFileNames: 'assets/[name][extname]',
+        entryFileNames: '[name].js',
+      },
+    },
+  },
 
   test: {
     reporters: ['default'],
     coverage: {
-      reportsDirectory: '../../coverage/apps/tup-ui',
+      reportsDirectory: '../../coverage/libs/core-components',
       provider: 'v8',
     },
     globals: true,