task/TUP-272 - core components fixup

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

apps/tup-ui/project.json

@@ -19,7 +19,7 @@
       "options": {
         "commands": [
           {
-            "command": "npx vite build"
+            "command": "npx vite build --emptyOutDir"
           }
         ],
         "cwd": "apps/tup-ui"

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.

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 {

libs/core-components/.babelrc

@@ -3,8 +3,7 @@
     [
       "@nrwl/react/babel",
       {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
+        "runtime": "automatic"
       }
     ]
   ],

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'.

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',
 };

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"
+    }
+  }
 }

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": []
 }

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';

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';
+}