Merge pull request #24 from vtex-apps/feature/all-components

Show complete list of components with documentation
vtex-apps · Aug 29, 2019 · e1e0c14 · e1e0c14
2 parents 0eeb913 + bbab039
commit e1e0c14
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Support for displaying a complete list of available components on `ComponentsGrid`.
 
 ## [0.20.1] - 2019-08-29
 

diff --git a/react/ComponentsGrid.tsx b/react/ComponentsGrid.tsx
@@ -44,8 +44,14 @@ const ComponentsGrid: FC<OuterProps> = ({ ComponentsListQuery }) => {
     route: { params },
   } = useRuntime()
 
-  const componentsListForCategory =
-    ComponentsListQuery.componentsList[params.category]
+  const [category] = params.category.split('-')
+  const shouldShowAllComponents = category === 'all'
+
+  const componentsListFromCategory = shouldShowAllComponents
+    ? Object.keys(ComponentsListQuery.componentsList).flatMap(
+        category => ComponentsListQuery.componentsList[category]
+      )
+    : ComponentsListQuery.componentsList[category]
 
   return (
     <div className="pv9 w-90 center">
@@ -56,19 +62,28 @@ const ComponentsGrid: FC<OuterProps> = ({ ComponentsListQuery }) => {
         <FormattedMessage id="docs/lorem" />
       </p>
       <div className="flex flex-wrap">
-        {componentsListForCategory &&
-          componentsListForCategory.map(component => (
-            <div key={slug(component.title)} className="w-50 w-25-l">
-              <ComponentGridItem
-                title={component.title}
-                description={component.description}
-                link={`${params.category}/${
-                  component.appName
-                }/${(component.file && removeFileExtension(component.file)) ||
-                  ''}`}
-              />
-            </div>
-          ))}
+        {componentsListFromCategory &&
+          componentsListFromCategory.map(component => {
+            const hasTitleAndDescription = !!(
+              component.appName && component.description
+            )
+
+            return (
+              hasTitleAndDescription && (
+                <div key={slug(component.title)} className="w-50 w-30-l">
+                  <ComponentGridItem
+                    title={component.title}
+                    description={component.description}
+                    link={`${params.category}/${
+                      component.appName
+                    }/${(component.file &&
+                      removeFileExtension(component.file)) ||
+                      ''}`}
+                  />
+                </div>
+              )
+            )
+          })}
       </div>
     </div>
   )

diff --git a/react/package.json b/react/package.json
@@ -36,8 +36,8 @@
     "react-dom": "^16.8.6",
     "react-intl": "^2.9.0",
     "typescript": "3.5.2",
-    "vtex.render-runtime": "http://vtex.vteximg.com.br/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.docs-graphql": "http://vtex.vteximg.com.br/_v/public/typings/v1/[email protected]/public/_types/react",
+    "vtex.render-runtime": "http://vtex.vteximg.com.br/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.store-drawer": "http://vtex.vteximg.com.br/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.styleguide": "http://vtex.vteximg.com.br/_v/public/typings/v1/[email protected]/public/_types/react"
   }

diff --git a/react/tsconfig.json b/react/tsconfig.json
@@ -1,16 +1,10 @@
 {
   "compilerOptions": {
-    "types": [
-      "node",
-      "jest"
-    ],
+    "types": ["node", "jest"],
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "jsx": "react",
-    "lib": [
-      "es2017",
-      "dom"
-    ],
+    "lib": ["es2019", "dom"],
     "module": "es6",
     "moduleResolution": "node",
     "sourceMap": true,
@@ -21,12 +15,6 @@
   "typeAcquisition": {
     "enable": false
   },
-  "include": [
-    "./**/*.tsx",
-    "./typings",
-    "./typings.d.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["./**/*.tsx", "./typings", "./typings.d.ts"],
+  "exclude": ["node_modules"]
 }