Fix z-index and Update docs

patrick-kw-chiu · May 31, 2024 · 5e9f245 · 5e9f245
1 parent d1f31eb
commit 5e9f245
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 29 deletions.
diff --git a/docs/components/Accordion.tsx b/docs/components/Accordion.tsx
@@ -1,6 +1,11 @@
 import { useState } from 'react';
 
-const Accordion = ({ label = '', children, defaultOpened = false }) => {
+const Accordion = ({
+  label = '',
+  children,
+  defaultOpened = false,
+  style = {},
+}) => {
   const [open, setOpen] = useState(defaultOpened);
 
   return (
@@ -12,7 +17,7 @@ const Accordion = ({ label = '', children, defaultOpened = false }) => {
     >
       <div
         className="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-text-xl"
-        style={{ cursor: 'pointer', paddingBottom: '0.5rem' }}
+        style={{ cursor: 'pointer', paddingBottom: '0.5rem', ...style }}
         onClick={() => setOpen(!open)}
       >
         ► {label}

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -23,7 +23,7 @@
     "@lit/react": "^1.0.2",
     "@mui/material": "^5.15.4",
     "@next/third-parties": "^14.2.3",
-    "annotative-code": "^0.1.26",
+    "annotative-code": "^0.1.29",
     "next": "^14.2.3",
     "nextra": "latest",
     "nextra-theme-docs": "latest",

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -1,4 +1,5 @@
 import { GoogleAnalytics } from '@next/third-parties/google';
+import './styles.css';
 
 export default function MyApp({ Component, pageProps }) {
   return (

diff --git a/docs/pages/props/annotation.mdx b/docs/pages/props/annotation.mdx
@@ -22,12 +22,17 @@ const content = \`{{content}}\`
 
 const annotation = {{annotation}}
 
-<annotative-code languageFn={languageFn} content={content} />`;
+<annotative-code
+  languageFn={languageFn}
+  content={content}
+  annotation={annotation}
+/>`;
 
 export const javaScriptContent = `const projectName = '\_\_\_\_projectName\_\_\_\_';
 console.log({ projectName })`;
 
 export const styleMap = { padding: '8px' };
+export const innerAccordionStyle = { paddingBottom: 0, fontSize: '1rem' };
 
 <Accordion label={'Quick Example:'}>
   <AnnotativeCode
@@ -50,21 +55,26 @@ export const styleMap = { padding: '8px' };
 
 ### Config Options
 
-| Option            | Type   | Default Value | Description                                                                                                           |
-| ----------------- | ------ | ------------- | --------------------------------------------------------------------------------------------------------------------- |
-| [\*type](#type)   | string | `'string'`    | `type` defines <br />- Styling of the annotation (powered by highlight.js)<br />- Input knob if `knob` is not defined |
-| [\*value](#value) | string | n/a           | 321                                                                                                                   |
+| Option          | Type   | Default Value | Description                                                                                                           |
+| --------------- | ------ | ------------- | --------------------------------------------------------------------------------------------------------------------- |
+| [\*type](#type) | string | `"string"`    | `type` defines <br />- Styling of the annotation (powered by highlight.js)<br />- Input knob if `knob` is not defined |
+| \*value         | any    | n/a           | The default value passed to the annotation placeholder and the input knob                                             |
+| [\*knob](#knob) | string | `"string"`    | `knob` defines the input knob e.g. `select`, `date` and `color`                                                       |
 
 #### type
 
 `type` defines
 
 - Styling of the annotation. This part is powered by highlight.js' CSS themes
-- Input type if `knob` is not defined. The following `type`s include a default input knob. The other `type`s would use a `string` input knob, if not further defined
-  - `'string'`
-  - `'boolean'`
-  - `'number'`
-  - `'integer'`
+- Input type if `knob` is not defined.
+  - The following `type`s include a default input knob
+    - `string`
+    - `boolean`
+    - `number`
+      - Optional: `min` and `max`
+    - `integer`
+      - Optional: `min` and `max`
+  - The other `type`s would use a `string` input knob, if `knob` is not defined
 
 Available options are mirrored from highlight.js' CSS class, which could be found [here](https://github.com/patrick-kw-chiu/annotative-code/blob/main/src/annotative/types/types.ts#L27-L60).
 
@@ -101,7 +111,7 @@ export const typeAnnotation = {
     styleMap={styleMap}
   />
   <br />
-  <Accordion label={'Source Code:'}>
+  <Accordion label={'Source Code:'} style={innerAccordionStyle}>
     <AnnotativeCode
       languageFn={languageFn}
       themeCss={themeCss}
@@ -113,4 +123,72 @@ export const typeAnnotation = {
   </Accordion>
 </Accordion>
 
-#### value
+#### knob
+
+`knob` defines custom input knob other than the basic
+`string`, `boolean`, `number` and `integer` types.
+Some `knob` needs to supplement other options e.g.
+for `knob: 'select'`, you also need to pass the available `options`.
+
+- `select`
+  - Required: `options`
+- `date`
+  - Optional: `min` and `max`
+- `time`
+- `datetime-local`
+  - Optional: `min` and `max`
+- `range`
+  - Required: `min` and `max`
+- `color`
+
+export const knobContent = `const fruitSelect = '\_\_\_\_fruitSelect\_\_\_\_';
+const expiryDate = \_\_\_\_expiryDate\_\_\_\_;
+const timeToEat = \_\_\_\_timeToEat\_\_\_\_;
+const dateTimeLocal = \_\_\_\_dateTimeLocal\_\_\_\_;`;
+
+export const knobAnnotation = {
+  fruitSelect: {
+    type: 'string',
+    value: '🍎 apple',
+    knob: 'select',
+    options: ['🍎 apple', '🍊 orange', '🍌 banana'],
+  },
+  expiryDate: {
+    type: 'string',
+    value: '2024-05-30',
+    knob: 'date',
+    min: '2024-05-20',
+  },
+  timeToEat: {
+    type: 'string',
+    value: '10:30',
+    knob: 'time',
+  },
+  dateTimeLocal: {
+    type: 'string',
+    value: '2024-05-30T22:30',
+    knob: 'datetime-local',
+    min: '2024-05-20T01:30',
+  },
+};
+
+<Accordion label={'Quick Example:'} defaultOpened>
+  <AnnotativeCode
+    languageFn={languageFn}
+    themeCss={themeCss}
+    content={knobContent}
+    annotation={knobAnnotation}
+    styleMap={styleMap}
+  />
+  <br />
+  <Accordion label={'Source Code:'} style={innerAccordionStyle}>
+    <AnnotativeCode
+      languageFn={languageFn}
+      themeCss={themeCss}
+      content={content
+        .replace('{{annotation}}', JSON.stringify(knobAnnotation, null, 2))
+        .replace('{{content}}', knobContent)}
+      styleMap={styleMap}
+    />
+  </Accordion>
+</Accordion>
diff --git a/docs/pages/styles.css b/docs/pages/styles.css
@@ -0,0 +1,7 @@
+ul {
+  margin-top: 0 !important;
+}
+
+.nextra-nav-container {
+  z-index: 500 !important;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "annotative-code",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "Supercharge your code demo with interactive input knobs",
   "type": "module",
   "main": "bin/annotative-code.js",

diff --git a/src/annotative/annotative-base-component.ts b/src/annotative/annotative-base-component.ts
@@ -57,7 +57,7 @@ export class AnnotativeBaseComponent extends LitElement {
         right: 0;
         padding: 4px 6px;
         cursor: pointer;
-        z-index: 20;
+        z-index: 21;
       }
 
       #copy-button:hover {

diff --git a/src/annotative/components/annotation.ts b/src/annotative/components/annotation.ts
@@ -135,7 +135,7 @@ export class AnnotativeAnnotation extends LitElement {
       this._showPopup = false;
 
       (annotationElement.value.offsetParent as HTMLElement).style.zIndex =
-        '10';
+        '20';
       return;
     }
 
@@ -144,7 +144,7 @@ export class AnnotativeAnnotation extends LitElement {
     this._showPopup = true;
     this._popupStyle = style;
 
-    (annotationElement.value.offsetParent as HTMLElement).style.zIndex = '11';
+    (annotationElement.value.offsetParent as HTMLElement).style.zIndex = '22';
   }
 
   override render() {

diff --git a/src/annotative/types/types.ts b/src/annotative/types/types.ts
@@ -78,8 +78,8 @@ export interface AnnotationConfig {
     | 'range'
     | 'color';
   // type - number
-  min?: number;
-  max?: number;
+  min?: number | string;
+  max?: number | string;
   // knob - select
   options?: (boolean | string | number)[];
   // knob - textarea