Merge pull request #26 from Teradata/feat/husky

Feat/husky

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+## Description
+
+<!-- Talk about the great work you've done! -->
+
+### What's included?
+
+<!-- List features included in this PR -->
+
+- One
+- Two
+- Three
+
+#### Test Steps
+
+<!-- Add instructions on how to test your changes -->
+
+- [ ] `npm run start`
+- [ ] then this
+- [ ] finally this
+
+#### General Tests for Every PR
+
+- [ ] `npm run start` still works.
+- [ ] `npm run lint` passes.
+- [ ] `npm test` passes and code coverage is not lower.
+- [ ] `npm run build` still works.
+
+##### Screenshots or link to StackBlitz/Plunker

.github/workflows/ci.yml

@@ -22,8 +22,7 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npm run format:check -- --base=${{ github.event.pull_request.base.sha }}
-      - run: npx nx affected --target=scsslint --base=${{ github.event.pull_request.base.sha }}
-      - run: npx nx affected --target=lint --base=${{ github.event.pull_request.base.sha }}
+      - run: npm run lint
 
   test:
     runs-on: ubuntu-latest
@@ -40,21 +39,6 @@ jobs:
       - run: npm ci
       - run: npx nx affected --target=test --base=${{ github.event.pull_request.base.sha }}
 
-  e2e:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-      - run: npm ci
-      - run: NODE_OPTIONS=--max_old_space_size=4096 npx nx affected --target=e2e --base=${{ github.event.pull_request.base.sha }}
-
   build:
     runs-on: ubuntu-latest
 
@@ -69,4 +53,3 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npx nx affected --target=build --base=${{ github.event.pull_request.base.sha }}
-      - run: npx nx affected --target=build-scss --base=${{ github.event.pull_request.base.sha }}

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.prettierignore

@@ -1,4 +1,5 @@
 # Add files here to ignore them from prettier formatting
 /dist
 /coverage
-/.nx/cache
+/.nx/cache
+/docs

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

libs/react-components/.storybook/manager.js

@@ -5,4 +5,4 @@ import './theme.css';
 
 addons.setConfig({
   theme: tdTheme,
-});
+});

libs/react-components/.storybook/preview-head.html

@@ -1,2 +1,5 @@
 <!-- Loads font awesome icons -->
-<script src="https://kit.fontawesome.com/17a35e44e3.js" crossorigin="anonymous"></script>
+<script
+  src="https://kit.fontawesome.com/17a35e44e3.js"
+  crossorigin="anonymous"
+></script>

libs/react-components/.storybook/preview.ts

@@ -17,7 +17,7 @@ const preview: Preview = {
     },
   },
 
-  tags: ['autodocs']
+  tags: ['autodocs'],
 };
 
 export default preview;

libs/react-components/.storybook/theme.css

@@ -1,25 +1,25 @@
 /* Storybook theme overrides */
 .sidebar-header {
-    max-width: 213px;
-  }
-  #root > div > div[role='main'] > div {
-    box-shadow: none;
-  }
+  max-width: 213px;
+}
+#root > div > div[role='main'] > div {
+  box-shadow: none;
+}
 
-  #root > div > div[role='main'] > div {
-    border: 1px solid rgba(0, 0, 0, 0.12);
-  }
+#root > div > div[role='main'] > div {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
 
-  #storybook-explorer-tree .sidebar-item[data-selected='true'],
-  #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
-    color: var(--cv-light-on-primary);
-  }
+#storybook-explorer-tree .sidebar-item[data-selected='true'],
+#storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+  color: var(--cv-light-on-primary);
+}
 
-  #storybook-explorer-tree .sidebar-item[data-selected='true'],
-  #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
-    color: var(--cv-light-on-primary);
-  }
+#storybook-explorer-tree .sidebar-item[data-selected='true'],
+#storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+  color: var(--cv-light-on-primary);
+}
 
-  #storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
-    color: var(--cv-light-secondary);
-  }
+#storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
+  color: var(--cv-light-secondary);
+}

libs/react-components/.storybook/theme.js

@@ -38,4 +38,4 @@ export default create({
   brandTitle: 'Teradata Design System',
   // brandUrl: 'https://teradata.lol',
   brandImage,
-});
+});

libs/react-components/project.json

@@ -28,6 +28,13 @@
           "quiet": true
         }
       }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/react-components/**/*.tsx"]
+      }
     }
   }
 }

libs/react-components/src/lib/components/Alert/Alert.stories.tsx

@@ -28,8 +28,8 @@ export const ActionElements: Story = {
   render: (args) => {
     return (
       <Alert {...args}>
-          <IconButton slot="action-items" icon="close" />
+        <IconButton slot="action-items" icon="close" />
       </Alert>
     );
   },
-};
+};

libs/react-components/src/lib/components/Alert/index.tsx

@@ -4,22 +4,22 @@ import React from 'react';
 import '@covalent/components/icon';
 
 interface AlertProps {
-    /** 
-     * Icon of the alert 
-     */
-    icon: string;
-    /**
-     * Title of the alert
-     */
-    titleText: string;
-    /**
-     * Description of the alert
-     */
-    descriptionText: string;
-    /** 
-     * State of the button
-     */
-    state: string;
+  /**
+   * Icon of the alert
+   */
+  icon: string;
+  /**
+   * Title of the alert
+   */
+  titleText: string;
+  /**
+   * Description of the alert
+   */
+  descriptionText: string;
+  /**
+   * State of the button
+   */
+  state: string;
 }
 const AlertComponent = createComponent({
   tagName: 'cv-alert',
@@ -28,10 +28,8 @@ const AlertComponent = createComponent({
 });
 
 const Alert: React.FC<AlertProps> = (props) => {
-  return (
-      <AlertComponent {...props}></AlertComponent>
-  );
+  return <AlertComponent {...props}></AlertComponent>;
 };
 
 Alert.displayName = 'Alert';
-export default Alert;
+export default Alert;

libs/react-components/src/lib/components/Breadcrumb/index.tsx

@@ -9,15 +9,15 @@ interface BreadcrumbProps {
 
 const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
   return (
-      <nav className={styles.breadcrumb}>
-        <ul>
-            {items.map((item, index) => (
-                <li key={index}>
-                    <a href={item.link}>{item.label}</a>
-                </li>
-            ))}
-        </ul>
-      </nav>
+    <nav className={styles.breadcrumb}>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <a href={item.link}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
   );
 };
 

libs/react-components/src/lib/components/Breadcrumb/styles.module.scss

@@ -1,48 +1,45 @@
-
-
 .breadcrumb {
-    font-size: .75rem;
-    line-height: 1rem;
-
-    ul {
-        list-style: none;
-        display: inline;
-        padding: 0;
-        margin: 0;
-        li {
-            display: inline-flex;
-            align-items: center;
+  font-size: 0.75rem;
+  line-height: 1rem;
 
-            a {
-                text-decoration: none;
-                color: inherit;
-                font-family: Inter;
-                font-size: 12px;
-                font-style: normal;
-                font-weight: 400;
-                line-height: 20px; 
-                display: inline-flex;
-                align-items: center;
-                color: #00233c;
-                transition: color 250ms;
+  ul {
+    list-style: none;
+    display: inline;
+    padding: 0;
+    margin: 0;
+    li {
+      display: inline-flex;
+      align-items: center;
 
-                &:after {
-                    content: 'chevron_right';
-                    font-family: 'Material Symbols Outlined';
-                    margin:0 .25rem;
-                    color: var(--td-web-primary-navy);
+      a {
+        text-decoration: none;
+        color: inherit;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        display: inline-flex;
+        align-items: center;
+        color: #00233c;
+        transition: color 250ms;
 
-                }
-                &:hover {
-                    color: var(--cv-theme-tertiary);
-                }
-            }
+        &:after {
+          content: 'chevron_right';
+          font-family: 'Material Symbols Outlined';
+          margin: 0 0.25rem;
+          color: var(--td-web-primary-navy);
+        }
+        &:hover {
+          color: var(--cv-theme-tertiary);
+        }
+      }
 
-            &:last-child a {
-                &:after {
-                    display: none;
-                }
-            }
+      &:last-child a {
+        &:after {
+          display: none;
         }
+      }
     }
-}
+  }
+}

libs/react-components/src/lib/components/DropdownMenu/index.tsx

@@ -21,7 +21,9 @@ export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({
   };
   return (
     <li
-      className={`${styles.dropdownMenuItem} ${navItem.navItems ? styles.nested : ''}`}
+      className={`${styles.dropdownMenuItem} ${
+        navItem.navItems ? styles.nested : ''
+      }`}
     >
       {navItem.navItems ? (
         <div

libs/react-components/src/lib/components/Feedback/Feedback.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
     label: 'Did this page help?',
     labelForFeedback: 'Thank you for your feedback!',
     onFeedBack: action('onFeedBack'),
-  }
+  },
 } satisfies Meta<typeof Feedback>;
 
 export default meta;

libs/react-components/src/lib/components/Feedback/styles.module.scss

@@ -1,12 +1,12 @@
 .feedback {
-    display: flex;
-    min-height: 64px;
-    padding: 0px 16px 0px 24px;
-    align-items: center;
-    border-radius: 12px;
-    background-color: var(--cv-theme-surface-container-highest);
+  display: flex;
+  min-height: 64px;
+  padding: 0px 16px 0px 24px;
+  align-items: center;
+  border-radius: 12px;
+  background-color: var(--cv-theme-surface-container-highest);
 }
 
 .feedbackLabel {
-    flex: 1;
-}
+  flex: 1;
+}

libs/react-components/src/lib/components/IconButtonToggle/index.tsx

@@ -51,7 +51,9 @@ export const IconButtonToggle: React.FC<IconButtonToggleProps> = ({
     'aria-haspopup': ariaHasPopup,
     onClick,
   };
-  return <IconButtonToggleComponent {...customProps}></IconButtonToggleComponent>;
+  return (
+    <IconButtonToggleComponent {...customProps}></IconButtonToggleComponent>
+  );
 };
 
 IconButtonToggle.displayName = 'IconButtonToggle';