Merge pull request #77 from components-ai/properties-progress

Add a progress bar to unsupported page

.changeset/friendly-apes-carry.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add all properties export

apps/docs/pages/unsupported.tsx

@@ -1,13 +1,35 @@
-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>
       <p>
         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 (

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'