task/TUP-272 - core components fixup (#7)

* feat(core-components): copy & polish from cepv2 These comp…s: - were copied from cepv2 - were made more modular - have react-based dependencies Not cepv2 comp…s were copied, because some are not easy to make modular. Comp…s were copied May 4, 2022. Some have since changed in CEPv2, e.g.: - Button - Paginator - (maybe) Message * feat(comp…s): cepv2 update but w/ new styles paths Source: TACC/Core-Portal#639 * feat(comp…s): 2nd cepv2 update (no path updates) * feat(comp…s): cepv2 update: button tests, unmerged Source: TACC/Core-Portal#640 * fix(comp…s): fix core-styles paths (libs → lib) * feat(comp…s): update all paths to core-styles src Some of these may be able to use dist... I haven't checked yet. * feat(comp…s): fix paths that can use styles dist One of the paths is still src/lib/_imports. CMS has this problem often. To use src/lib/_imports instead of dist, see TUP-274. * fix(styles): all src/lib imports to use rel. paths Avoid users needing resolution paths specific to core-styles hierarchy. * fix(styles): src/lib rel. paths need no _imports/ Hotfix previous commit: aab21ba "fix(styles): all src/lib imports to use rel. paths" * fix(tup-ui): load CSS from correct path * Convert Button and dependencies to TS * Add reactstrap global * Replace temporary Message component to exports * Use Button from core-components in tup-ui * Added babel-plugin-postcss for core-components * Formatting * linting * Formatting * Task/tup 272 core components vite (#8) * Vite library build for core-components * Icon allows react node children * Add testing-library/react * Fix tests * Fix test * Formatting * vite output directory * clean tup-ui on build Co-authored-by: Wesley Bomar <wbomar@tacc.utexas.edu>
TACC · Jun 16, 2022 · fb99d12 · fb99d12
1 parent 1f6a0ce
commit fb99d12
Show file tree

Hide file tree

Showing 96 changed files with 3,638 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,9 @@
-
-
 # Tacc
 
 This project was generated using [Nx](https://nx.dev).
 
 Things to try:
+
 - `npx nx serve tup-ui` to run the app
 - `npx nx build core-components` to create a distributable library for the core components.
 - `npx nx build core-styles` to build the style library.
@@ -84,8 +83,6 @@ Run `nx graph` to see a diagram of the dependencies of your projects.
 
 Visit the [Nx Documentation](https://nx.dev) to learn more.
 
-
-
 ## ☁ Nx Cloud
 
 ### Distributed Computation Caching & Distributed Task Execution

diff --git a/apps/tup-ui/project.json b/apps/tup-ui/project.json
@@ -19,7 +19,7 @@
       "options": {
         "commands": [
           {
-            "command": "npx vite build"
+            "command": "npx vite build --emptyOutDir"
           }
         ],
         "cwd": "apps/tup-ui"

diff --git a/apps/tup-ui/src/App.tsx b/apps/tup-ui/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Message } from '@tacc/core-components';
+import { Button, Message } from '@tacc/core-components';
 
 function App() {
   const [count, setCount] = useState(0);
@@ -10,9 +10,13 @@ function App() {
         <p>Hello Vite + React!</p>
         <Message />
         <p>
-          <button type="button" onClick={() => setCount((count) => count + 1)}>
+          <Button
+            onClick={() => setCount((count) => count + 1)}
+            size="long"
+            type="primary"
+          >
             count is: {count}
-          </button>
+          </Button>
         </p>
         <p>
           Edit <code>App.tsx</code> and save to test HMR updates.

diff --git a/apps/tup-ui/src/styles/README.md b/apps/tup-ui/src/styles/README.md
@@ -14,7 +14,7 @@ Global stylesheets may `@import` project stylesheets, e.g.:
 **`index.css`**
 
 ```
-@import url('styles/.../settings/color.css');
+@import url('@tacc/core-styles/.../settings/color.css');
 ```
 
 ### Import from Component Stylesheets
@@ -24,7 +24,7 @@ Component stylesheets may `@import` project stylesheets, e.g.:
 **`components/(.../)SomeProjectComponent.module.css`**
 
 ```
-@import url('styles/tools/media-queries.css');
+@import url('@tacc/core-styles/.../tools/media-queries.css');
 
 @media screen and (--short-and-above) and (--medium-and-above) {
   selector {

diff --git a/libs/core-components/.babelrc b/libs/core-components/.babelrc
@@ -3,8 +3,7 @@
     [
       "@nrwl/react/babel",
       {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
+        "runtime": "automatic"
       }
     ]
   ],

diff --git a/libs/core-components/.browserslistrc b/libs/core-components/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.
diff --git a/libs/core-components/README.md b/libs/core-components/README.md
diff --git a/libs/core-components/jest.config.ts b/libs/core-components/jest.config.ts
@@ -3,8 +3,9 @@ export default {
   displayName: 'core-components',
   preset: '../../jest.preset.js',
   transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/core-components',
+  coverageDirectory: '../../coverage/apps/tup-ui',
 };
diff --git a/libs/core-components/package.json b/libs/core-components/package.json
@@ -1,4 +1,14 @@
 {
   "name": "@tacc/core-components",
-  "version": "0.0.1"
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/core-components.umd.js",
+  "module": "./dist/core-components.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/core-components.umd.js",
+      "require": "./dist/core-components.umd.js"
+    }
+  }
 }
diff --git a/libs/core-components/project.json b/libs/core-components/project.json
@@ -2,26 +2,27 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/core-components/src",
   "projectType": "library",
-  "tags": [],
   "targets": {
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx vite"
+          }
+        ],
+        "cwd": "libs/core-components"
+      }
+    },
     "build": {
-      "executor": "@nrwl/web:rollup",
-      "outputs": ["{options.outputPath}"],
+      "executor": "nx:run-commands",
       "options": {
-        "outputPath": "dist/libs/core-components",
-        "tsConfig": "libs/core-components/tsconfig.lib.json",
-        "project": "libs/core-components/package.json",
-        "entryFile": "libs/core-components/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
+        "commands": [
           {
-            "glob": "libs/core-components/README.md",
-            "input": ".",
-            "output": "."
+            "command": "npx vite build --emptyOutDir"
           }
-        ]
+        ],
+        "cwd": "libs/core-components"
       }
     },
     "lint": {
@@ -39,5 +40,6 @@
         "passWithNoTests": true
       }
     }
-  }
+  },
+  "tags": []
 }
diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts
@@ -1 +1,4 @@
+export { default as Button } from './lib/Button';
+export { default as Icon } from './lib/Icon';
+export { default as LoadingSpinner } from './lib/LoadingSpinner';
 export { default as Message } from './lib/core-components';
diff --git a/libs/core-components/src/lib/Button/Button.module.css b/libs/core-components/src/lib/Button/Button.module.css
@@ -0,0 +1,57 @@
+.root {
+  composes: c-button from '@tacc/core-styles/dist/components/c-button.css';
+}
+
+.primary {
+  composes: c-button--primary from '@tacc/core-styles/dist/components/c-button.css';
+}
+.secondary {
+  composes: c-button--secondary from '@tacc/core-styles/dist/components/c-button.css';
+}
+.tertiary {
+  composes: c-button--tertiary from '@tacc/core-styles/dist/components/c-button.css';
+}
+.active {
+  composes: c-button--is-active from '@tacc/core-styles/dist/components/c-button.css';
+}
+
+.size-small {
+  composes: c-button--size-small from '@tacc/core-styles/dist/components/c-button.css';
+}
+.width-short {
+  composes: c-button--width-short from '@tacc/core-styles/dist/components/c-button.css';
+}
+.width-medium {
+  composes: c-button--width-medium from '@tacc/core-styles/dist/components/c-button.css';
+}
+.width-long {
+  composes: c-button--width-long from '@tacc/core-styles/dist/components/c-button.css';
+}
+
+.as-link {
+  composes: c-button--as-link from '@tacc/core-styles/dist/components/c-button.css';
+}
+
+.icon--before {
+  composes: c-button__icon--before from '@tacc/core-styles/dist/components/c-button.css';
+}
+.icon--after {
+  composes: c-button__icon--after from '@tacc/core-styles/dist/components/c-button.css';
+}
+
+.loading {
+  composes: c-button--is-busy from '@tacc/core-styles/dist/components/c-button.css';
+}
+.root {
+  position: relative;
+}
+.root .loading-over-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.text {
+  composes: c-button__text from '@tacc/core-styles/dist/components/c-button.css';
+}