From 9a6b880b3b640e1314cb0e3bf513165e277ba82c Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Sat, 30 Apr 2022 11:32:13 -0600
Subject: [PATCH] Add a progress bar to unsupported page

---
 .changeset/friendly-apes-carry.md |  5 +++++
 apps/docs/pages/unsupported.tsx   | 24 +++++++++++++++++++++++-
 packages/gui/src/index.ts         |  1 +
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/friendly-apes-carry.md

diff --git a/.changeset/friendly-apes-carry.md b/.changeset/friendly-apes-carry.md
new file mode 100644
index 00000000..a643a794
--- /dev/null
+++ b/.changeset/friendly-apes-carry.md
@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add all properties export
diff --git a/apps/docs/pages/unsupported.tsx b/apps/docs/pages/unsupported.tsx
index e78b5491..b38893f3 100644
--- a/apps/docs/pages/unsupported.tsx
+++ b/apps/docs/pages/unsupported.tsx
@@ -1,6 +1,14 @@
-import { unsupportedProperties } from '@compai/css-gui'
+import { allProperties, unsupportedProperties } from '@compai/css-gui'
 
 export default function UnsupportedProperties() {
+  const allPropertiesCount = allProperties.length
+  const unsupportedPropertiesCount = unsupportedProperties.length
+  const implementedPropertiesCount =
+    allPropertiesCount - unsupportedPropertiesCount
+  const percentageComplete = Math.round(
+    (implementedPropertiesCount / allPropertiesCount) * 100
+  )
+
   return (
     <div>
       <h1>Unsupported properties</h1>
@@ -8,6 +16,20 @@ export default function UnsupportedProperties() {
         CSS GUI is a work in progress, below is an up to date listing of
         properties that haven&apos;t been implemented yet.
       </p>
+      <label htmlFor="progress" sx={{ fontWeight: 500 }}>
+        So far, we've implemented {implementedPropertiesCount} out of{' '}
+        {allPropertiesCount} properties ({percentageComplete}%).
+        <br />
+        <progress
+          id="progress"
+          max="100"
+          value={percentageComplete}
+          sx={{ width: '100%' }}
+        >
+          {percentageComplete}%
+        </progress>
+      </label>
+
       <ul>
         {unsupportedProperties.map(({ property, url }) => {
           return (
diff --git a/packages/gui/src/index.ts b/packages/gui/src/index.ts
index 307fc215..9923d593 100644
--- a/packages/gui/src/index.ts
+++ b/packages/gui/src/index.ts
@@ -19,6 +19,7 @@ export { Layout } from './components/ui/Layout'
 
 export { theme } from './components/ui/theme'
 export { unsupportedProperties } from './data/properties'
+export { allProperties } from './data/css-properties'
 
 export * from './lib'
 export * from './types/theme'