docs(feedback): 📝 add new docs

adaptui · Jan 31, 2022 · 0de1528 · 0de1528 · vercel · Jan 31, 2022
1 parent e32223d
commit 0de1528
Show file tree

Hide file tree

Showing 6 changed files with 350 additions and 88 deletions.
diff --git a/pages/docs/components/feedback/circular-progress.mdx b/pages/docs/components/feedback/circular-progress.mdx
@@ -1,4 +1,9 @@
-import { ComponentLinks } from "@/components/index";
+import {
+  ComponentLinks,
+  InteractiveCodeblock,
+  PropsTable,
+  Codeblock,
+} from "@/components/index";
 
 # CircularProgress
 
@@ -17,75 +22,90 @@ and indeterminate processes.
 import {
   CircularProgress,
   CircularProgressBar,
-  CircularProgressWrapper,
+  CircularProgressBarWrapper,
+  CircularProgressHint,
+  useCircularProgressProps,
+  useCircularProgressState,
+  CircularProgressTrack,
+  CircularProgressTrackWrapper,
 } from "@renderlesskit/react-tailwind";
 ```
 
-- **CircularProgress** - main progress component
-- **CircularProgressBar** - progress bar component
-- **CircularProgressWrapper** - progress track component
-
 ## Usage
 
-```jsx live
-<CircularProgress value={40} />
-```
+<InteractiveCodeblock
+  children={({ spreadProps }) =>
+    `<CircularProgress value={40} ${spreadProps} />`
+  }
+  themeProps={{ size: "circularProgress.barWrapper.common.size" }}
+/>
 
 ## Min max values
 
-```jsx live
-<CircularProgress min={10} max={40} value={35} />
-```
+<Codeblock
+  live
+  children={`<CircularProgress min={10} max={40} value={35} />`}
+/>
 
 ## Indeterminate progress
 
 By setting the value prop to null, progress' state becomes indeterminate
 
-```jsx live
-<CircularProgress value={null} />
-```
+<Codeblock live children={`<CircularProgress value={null} />`} />
 
 ## CircularProgress sizes
 
-CircularProgress comes with 3 sizes `sm` `md` & `lg`
+CircularProgress comes with 3 sizes `sm` `md` `lg` & `xl`
 
-```jsx live
+<Codeblock
+  live
+  children={`
 <div className="flex items-center space-x-2">
   <CircularProgress size="sm" value={20} />
   <CircularProgress size="md" value={30} />
   <CircularProgress size="lg" value={40} />
+  <CircularProgress size="xl" value={50} />
 </div>
-```
+`}
+/>
+
+## CircularProgress Hint
+
+CircularProgress comes with A11y hint that can be used with label to indicate
+the progress status.
+
+<Codeblock live children={`<CircularProgress value={50} hint={50}/>`} />
 
 ## Customizing CircularProgress
 
 To customize the appearance of the CircularProgress component we can simply pass
-down children components (CircularProgressWrapper, CircularProgressBar) for more
-control.
-
-```jsx live noInline
-const CustomProgress = () => {
-  const [value, setValue] = React.useState(10);
-
-  return (
-    <>
-      <CircularProgress value={value} size="lg">
-        <CircularProgressWrapper>
-          <CircularProgressBar
-            trackStyle="text-red-300"
-            innerTrackStyle="text-red-800"
-          />
-        </CircularProgressWrapper>
-      </CircularProgress>
-
-      <br />
-      <ButtonGroup size="sm">
-        <Button onClick={() => setValue(prev => prev + 10)}>+</Button>
-        <Button onClick={() => setValue(prev => prev - 10)}>-</Button>
-      </ButtonGroup>
-    </>
-  );
-};
-
-export default CustomProgress;
-```
+down children components (CircularProgressTrack, CircularProgressBar,
+CircularProgressHint) for more control.
+
+<Codeblock
+  live
+  children={`
+<CircularProgress value={40}>
+  <CircularProgressTrack className="text-red-300" />
+  <CircularProgressBar className="text-red-700" />
+  <CircularProgressHint className="text-red-900" />
+</CircularProgress>
+`}
+/>
+
+## API Reference
+
+<PropsTable
+  data={[
+    {
+      name: "size",
+      themeKey: "circularProgress.barWrapper.common.size",
+      default: "md",
+    },
+    {
+      name: "hint",
+      type: "React.ReactNode",
+      description: "Hint component to display info center of the progressbar",
+    },
+  ]}
+/>
diff --git a/pages/docs/components/feedback/meta.json b/pages/docs/components/feedback/meta.json
@@ -1,5 +1,7 @@
 {
-  "spinner": "Spinner",
+  "circular-progress": "CircularProgress",
+  "meter": "Meter",
   "progress": "Progress",
-  "circular-progress": "CircularProgress"
+  "show-more": "Show More",
+  "spinner": "Spinner"
 }
diff --git a/pages/docs/components/feedback/meter.mdx b/pages/docs/components/feedback/meter.mdx
@@ -0,0 +1,129 @@
+import {
+  ComponentLinks,
+  InteractiveCodeblock,
+  PropsTable,
+  Codeblock,
+} from "@/components/index";
+
+# Meter
+
+Meter is used to display finite value that are within a known range eg., CPU
+usage.
+
+<ComponentLinks github="meter" theme="meter" story="feedback-meter" />
+
+## Imports
+
+```js
+import {
+  Meter,
+  MeterBar,
+  MeterBarWrapper,
+  MeterHint,
+  MeterLabel,
+  useMeterProps,
+  useMeterState,
+  MeterTrack,
+  MeterWrapper,
+} from "@renderlesskit/react-tailwind";
+```
+
+## Usage
+
+<InteractiveCodeblock
+  children={({ spreadProps }) =>
+    `<Meter value={40} max={100} ${spreadProps} />`
+  }
+  themeProps={{ size: "meter.track.size" }}
+/>
+
+## Min max values
+
+<Codeblock live children={`<Meter value={35} max={100} />`} />
+
+## Meter sizes
+
+Meter comes with 4 sizes `sm` `md` `lg` & `xl`
+
+<Codeblock
+  live
+  children={`
+<div className="flex flex-col space-y-2">
+  <Meter size="sm" value={20} max={100} />
+  <Meter size="md" value={30} max={100} />
+  <Meter size="lg" value={40} max={100} />
+  <Meter size="xl" value={50} max={100} />
+</div>
+`}
+/>
+
+## Meter Label
+
+Meter also comes with A11y label that can also be used to describe the meter.
+
+<Codeblock
+  live
+  children={`<Meter value={50} max={100} label="Charging..."/>`}
+/>
+
+## Meter Hint
+
+Meter comes with A11y hint that can be used with label to indicate the meter
+status.
+
+<Codeblock
+  live
+  children={`<Meter value={50} max={100} label="Charging..." hint={50}/>`}
+/>
+
+## Meter Interval
+
+Meter has an interval that can be used to indicate multiple range of the meter.
+
+<Codeblock
+  live
+  children={`<Meter value={50} max={100} label="Charging..." hint={50} intervals={4} /> `}
+/>
+
+## Customizing Meter
+
+To customize the appearance of the Meter component we can simply pass down
+children components (MeterTrack, MeterBar) for more control.
+
+<Codeblock
+  live
+  children={`
+<Meter value={40} max={100}>
+  <MeterTrack className="bg-red-300" />
+  <MeterBar className="bg-red-800" />
+</Meter>
+`}
+/>
+
+## API Reference
+
+<PropsTable
+  data={[
+    { name: "size", themeKey: "meter.track.size", default: "md" },
+    {
+      name: "intervals",
+      type: "number",
+      description: "No of intervals for the meter.",
+    },
+    {
+      name: "flatBorders",
+      type: "boolean",
+      description: "If true, meter bar intervals will have flat broders",
+    },
+    {
+      name: "hint",
+      type: "React.ReactNode",
+      description: "Hint component to display info center of the meterbar",
+    },
+    {
+      name: "label",
+      type: "React.ReactNode",
+      description: "Label slot to pass the label",
+    },
+
+]} />