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/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/index.css

@@ -1,23 +1,23 @@
 /* SETTINGS */
-@import url('@tacc/core-styles/lib/_imports/settings/border.css');
+@import url('@tacc/core-styles/dist/settings/border.css');
 /* below, import local styles (if any) */
 
 /* GENERIC */
-/* @import url('@tacc/core-styles/lib/_imports/generics/*.css'); */
+/* @import url('@tacc/core-styles/dist/generics/*.css'); */
 /* below, import local styles (if any) */
 
 /* ELEMENTS */
-/* @import url('@tacc/core-styles/lib/_imports/elements/*.css'); */
+/* @import url('@tacc/core-styles/dist/elements/*.css'); */
 /* below, import local styles (if any) */
 
 /* OBJECTS */
-@import url('@tacc/core-styles/lib/_imports/objects/o-flex-item-table-wrap.css');
+@import url('@tacc/core-styles/dist/objects/o-flex-item-table-wrap.css');
 /* below, import local styles (if any) */
 
 /* COMPONENTS */
-/* @import url('@tacc/core-styles/lib/_imports/components/*.css'); */
+/* @import url('@tacc/core-styles/dist/components/*.css'); */
 /* below, import local styles (if any) */
 
 /* TRUMPS */
-/* @import url('@tacc/core-styles/lib/_imports/trumps/*.css'); */
+/* @import url('@tacc/core-styles/dist/trumps/*.css'); */
 /* below, import local styles (if any) */

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 {

apps/tup-ui/vite.config.ts

@@ -11,10 +11,7 @@ export default defineConfig({
         __dirname,
         '../../libs/core-components/src/index.ts'
       ),
-      '@tacc/core-styles': path.resolve(
-        __dirname,
-        '../../libs/core-styles/src/'
-      ),
+      '@tacc/core-styles': path.resolve(__dirname, '../../libs/core-styles/'),
     },
   },
   build: {

libs/core-components/.babelrc

@@ -8,5 +8,11 @@
       }
     ]
   ],
-  "plugins": []
+  "plugins": [
+    [
+      "babel-plugin-postcss",
+      {
+      }
+    ]
+  ]
 }

libs/core-components/project.json

@@ -21,6 +21,12 @@
             "input": ".",
             "output": "."
           }
+        ],
+        "globals": [
+          {
+            "moduleId": "reactstrap",
+            "global": "reactstrap"
+          }
         ]
       }
     },

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

libs/core-components/src/lib/Button/Button.test.js

@@ -0,0 +1,163 @@
+// WARNING: Relies on `Icon` because of `getByRole('img')`
+import React from 'react';
+import { render } from '@testing-library/react';
+import Button, * as BTN from './Button';
+
+import '@testing-library/jest-dom/extend-expect';
+
+const TEST_TEXT = '…';
+const TEST_TYPE = 'primary';
+const TEST_SIZE = 'medium';
+
+function testClassnamesByType(type, size, getByRole, getByTestId) {
+  const root = getByRole('button');
+  const text = getByTestId('text');
+  const typeClassName = BTN.TYPE_MAP[type];
+  const sizeClassName = BTN.SIZE_MAP[size];
+  expect(root.className).toMatch('root');
+  expect(root.className).toMatch(new RegExp(typeClassName));
+  expect(root.className).toMatch(new RegExp(sizeClassName));
+  expect(text.className).toMatch('text');
+}
+
+function muteTypeNotLinkNoSizeLog(type, size) {
+  if (type !== 'link' && !size) console.debug = jest.fn();
+}
+
+function isPropertyLimitation(type, size) {
+  let isLimited = false;
+
+  if (
+    (type === 'primary' && size === 'small') ||
+    (type !== 'link' && !size) ||
+    (type === 'link' && size)
+  )
+    isLimited = true;
+
+  return isLimited;
+}
+
+describe('Button', () => {
+  it('uses given text', () => {
+    muteTypeNotLinkNoSizeLog();
+    const { getByTestId } = render(<Button>{TEST_TEXT}</Button>);
+    expect(getByTestId('text').textContent).toEqual(TEST_TEXT);
+  });
+
+  describe('icons exist as expected when', () => {
+    test('only `iconNameBefore` is given', () => {
+      muteTypeNotLinkNoSizeLog();
+      const { queryByTestId } = render(
+        <Button iconNameBefore="folder">{TEST_TEXT}</Button>
+      );
+      expect(queryByTestId('icon-before')).toBeInTheDocument();
+      expect(queryByTestId('icon-after')).not.toBeInTheDocument();
+    });
+    test('only `iconNameAfter` is given', () => {
+      muteTypeNotLinkNoSizeLog();
+      const { queryByTestId } = render(
+        <Button iconNameAfter="folder">{TEST_TEXT}</Button>
+      );
+      expect(queryByTestId('icon-before')).not.toBeInTheDocument();
+      expect(queryByTestId('icon-after')).toBeInTheDocument();
+    });
+    test('both `iconNameAfter` and `iconNameBefore` are given', () => {
+      muteTypeNotLinkNoSizeLog();
+      const { queryByTestId } = render(
+        <Button iconNameBefore="folder" iconNameAfter="file">
+          {TEST_TEXT}
+        </Button>
+      );
+      expect(queryByTestId('icon-before')).toBeInTheDocument();
+      expect(queryByTestId('icon-after')).toBeInTheDocument();
+    });
+  });
+
+  describe('all type & size combinations render accurately', () => {
+    it.each(BTN.TYPES)('type is "%s"', (type) => {
+      muteTypeNotLinkNoSizeLog();
+      if (isPropertyLimitation(type, TEST_SIZE)) {
+        return Promise.resolve();
+      }
+      const { getByRole, getByTestId } = render(
+        <Button type={type} size={TEST_SIZE}>
+          {TEST_TEXT}
+        </Button>
+      );
+
+      testClassnamesByType(type, TEST_SIZE, getByRole, getByTestId);
+    });
+    it.each(BTN.SIZES)('size is "%s"', (size) => {
+      muteTypeNotLinkNoSizeLog();
+      if (isPropertyLimitation(TEST_TYPE, size)) {
+        return Promise.resolve();
+      }
+      const { getByRole, getByTestId } = render(
+        <Button type={TEST_TYPE} size={size}>
+          {TEST_TEXT}
+        </Button>
+      );
+
+      testClassnamesByType(TEST_TYPE, size, getByRole, getByTestId);
+    });
+  });
+
+  describe('loading', () => {
+    it('does not render button without text', () => {
+      muteTypeNotLinkNoSizeLog();
+      const { queryByTestId } = render(
+        <Button data-testid="no button here">{TEST_TEXT}</Button>
+      );
+      const el = queryByTestId('no button here');
+      expect(el).toBeNull();
+    });
+    it('disables button when in loading state', () => {
+      muteTypeNotLinkNoSizeLog();
+      const { queryByText } = render(
+        <Button isLoading={true}>Loading Button</Button>
+      );
+      const el = queryByText('Loading Button');
+      expect(el).toBeDisabled();
+    });
+  });
+
+  describe('property limitation', () => {
+    test('type is "link" & ANY size`', () => {
+      console.warn = jest.fn();
+      const { getByRole, getByTestId } = render(
+        <Button type="link" size={TEST_SIZE}>
+          {TEST_TEXT}
+        </Button>
+      );
+      const expectedType = 'link';
+      const expectedSize = '';
+
+      testClassnamesByType(expectedType, expectedSize, getByRole, getByTestId);
+      expect(console.warn).toHaveBeenCalled();
+    });
+    test('type is "primary" & size is "small"', () => {
+      console.error = jest.fn();
+      const { getByRole, getByTestId } = render(
+        <Button type="primary" size="small">
+          {TEST_TEXT}
+        </Button>
+      );
+      const expectedType = 'secondary';
+      const expectedSize = 'small';
+
+      testClassnamesByType(expectedType, expectedSize, getByRole, getByTestId);
+      expect(console.error).toHaveBeenCalled();
+    });
+    test('type is not "link" & NO size`', () => {
+      console.debug = jest.fn();
+      const { getByRole, getByTestId } = render(
+        <Button type="primary">{TEST_TEXT}</Button>
+      );
+      const expectedType = 'primary';
+      const expectedSize = 'short';
+
+      testClassnamesByType(expectedType, expectedSize, getByRole, getByTestId);
+      expect(console.debug).toHaveBeenCalled();
+    });
+  });
+});