feat: add component catalog base

.eslintrc.js

@@ -42,7 +42,8 @@ module.exports = {
         named: 'never',
         asyncArrow: 'always'
       }
-    ]
+    ],
+    'no-use-before-define': 'off'
   },
   settings: {
     next: {

.prettierignore

@@ -8,3 +8,7 @@ dist
 
 # Changelogs
 CHANGELOG.md
+
+.carbon
+
+.vscode

package.json

@@ -27,7 +27,9 @@
     "services:build": "npm --workspaces --if-present run service:build",
     "lint": "scripts/lint",
     "nightly": "scripts/nightly",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "format": "prettier --write '**/*.{js,md,scss,ts}'",
+    "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}'"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.2.1",

services/web-app/components/my-component/ComponentCatalog.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import ComponentCatalogItem from './ComponentCatalogItem'
+
+// In this component we will map through the Component Catalog Items
+const ComponentCatalog = () => {
+  return (
+    <section aria-label="Component Catalog">
+      <ComponentCatalogItem />
+    </section>
+  )
+}
+
+export default ComponentCatalog

services/web-app/components/my-component/ComponentCatalogItem.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Tag } from '@carbon/react'
+import styles from './my-component.module.scss'
+import {
+  Svg12Stable,
+  Svg10ArrowNorthwest,
+  Svg14Download,
+  Svg14License,
+  Svg16Carbon,
+  Svg32TagCarbon
+} from '@/icons/index.js'
+import { Add16 } from '@carbon/icons-react'
+
+const ComponentCatalogItem = () => {
+  return (
+    <article className={styles.componentCatalogItem}>
+      <div className={styles.componentCatalogItemImage}>
+        <Add16 aria-label="Add" className="my-custom-class" />
+      </div>
+      <div className={styles.componentCatalogItemContent}>
+        <p className={styles.componentCatalogItemSponsor}>
+          {'Super Sponsor'}
+          <Svg10ArrowNorthwest className={styles.componentCatalogItemSponsorIcon} />
+        </p>
+        <header className={styles.componentCatalogItemName}>{'The best component ever'}</header>
+        <p className={styles.componentCatalogItemDescription}>
+          {
+            "This component is so powerful. It's actually the best component in the world if you didn't know"
+          }
+        </p>
+        <footer className={styles.componentCatalogItemInfo}>
+          <Svg12Stable className={styles.componentCatalogItemStatusIcon} />
+          <div className={styles.componentCatalogItemStatus}>{'Stable'}</div>
+          <Svg14Download className={styles.componentCatalogItemDownloadsIcon} />
+          <div className={styles.componentCatalogItemDownloads}>{'1,234'}</div>
+          <Svg14License className={styles.componentCatalogItemLicenseIcon} />
+          <div className={styles.componentCatalogItemLicense}>{'Apache 2.0'}</div>
+          <Svg16Carbon className={styles.componentCatalogItemReviewedIcon} />
+          <div className={styles.componentCatalogItemReviewed}>{'Reviewed'}</div>
+        </footer>
+      </div>
+      <div className={styles.componentCatalogItemTags}>
+        <Tag aria-hidden="true">{'Design only'}</Tag>
+        <Svg32TagCarbon className={styles.componentCatalogItemTagsSponsor} />
+      </div>
+    </article>
+  )
+}
+
+export default ComponentCatalogItem

services/web-app/components/my-component/ComponentCatalogSearch.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Search } from '@carbon/react'
+import styles from './my-component.module.scss'
+
+function ComponentCatalogSearch({ value, onChange }) {
+  function handleOnChange(event) {
+    onChange(event.target.value)
+  }
+
+  return (
+    <div className={styles.componentCatalogSearch}>
+      <Search
+        id="component-index-search"
+        labelText="Search component index by name, keyword, or domain"
+        placeHolderText="Component name, keyword, domain"
+        value={value}
+        onChange={handleOnChange}
+        size="md"
+      />
+    </div>
+  )
+}
+
+export default ComponentCatalogSearch

services/web-app/components/my-component/ComponentCatalogSort.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Button, Dropdown } from '@carbon/react'
+import { SvgLeftContentSwitcher, SvgRightContentSwitcher } from '@/icons/index.js'
+
+import styles from './my-component.module.scss'
+
+function ComponentCatalogSort() {
+  const options = ['hi', 'bye']
+
+  return (
+    <div className={styles.componentCatalogSortContainer}>
+      <div className={styles.componentCatalogSortDropdownText}>
+        <Dropdown
+          id="component-index-sort"
+          initialSelectedItem="Most used"
+          items={options}
+          light
+          className={styles.componentCatalogSortDropdown}
+          // onChange={({ selectedItem }) => {
+          //   onChange(selectedItem);
+          // }}
+          type="inline"
+          titleText="Sort by:"
+          label="Most used"
+        />
+      </div>
+      <div>
+        <Dropdown
+          className={styles.componentCatalogSortToggle}
+          id="component-index-sort"
+          initialSelectedItem="hola"
+          items={options}
+          light
+          // onChange={({ selectedItem }) => {
+          //   onChange(selectedItem);
+          // }}
+          type="inline"
+          titleText="Sort by:"
+          label="hello"
+        />
+      </div>
+      <div className={styles.componentCatalogSortSwitcher}>
+        <Button
+          size="md"
+          kind="ghost"
+          renderIcon={SvgLeftContentSwitcher}
+          iconDescription="Icon Description"
+          hasIconOnly
+        />
+        <Button
+          size="md"
+          kind="secondary"
+          renderIcon={SvgRightContentSwitcher}
+          iconDescription="Icon Description"
+          hasIconOnly
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ComponentCatalogSort

services/web-app/components/my-component/index.js

@@ -5,6 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import MyComponent from './my-component'
+import { Column, Grid, Pagination } from '@carbon/react'
 
-export default MyComponent
+import ComponentCatalogItem from './ComponentCatalogItem'
+import ComponentCatalogSearch from './ComponentCatalogSearch'
+import ComponentCatalogSort from './ComponentCatalogSort'
+import styles from './my-component.module.scss'
+
+const ComponentCatalogIndexPage = () => {
+  return (
+    <Grid>
+      <Column xl={16} lg={16} md={8} sm={4} className={styles.componentCatalogIndexContainer}>
+        <ComponentCatalogSearch />
+        <ComponentCatalogSort />
+        <ComponentCatalogItem />
+        <Pagination
+          className={styles.componentCatalogPaginationContainer}
+          backwardText="Previous page"
+          forwardText="Next page"
+          itemsPerPageText="Items per page:"
+          page={1}
+          pageNumberText="Page Number"
+          pageSize={10}
+          pageSizes={[10, 20, 30, 40, 50]}
+          totalItems={103}
+        />
+      </Column>
+    </Grid>
+  )
+}
+
+export default ComponentCatalogIndexPage