-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
18bd863
commit a056e2b
Showing
31 changed files
with
1,670 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| import React from 'react'; | ||
| import CodeBlock from '@theme/CodeBlock'; | ||
| import styles from './styles.module.css'; | ||
| import Link from '@docusaurus/Link'; | ||
|
|
||
| const REFERENCE_PROPS = { | ||
| config: { | ||
| path: '../reference/interfaces/UIConfig', | ||
| name: 'UIConfig', | ||
| }, | ||
| iconPack: { | ||
| path: '../reference/#iconpack', | ||
| name: 'IconPack', | ||
| }, | ||
| // participant: { | ||
| // path: '../reference/participant', | ||
| // name: 'Participant', | ||
| // }, | ||
| states: { | ||
| path: '../reference/interfaces/States', | ||
| name: 'States', | ||
| }, | ||
| notification: { | ||
| path: '../reference/interfaces/Notification', | ||
| name: 'Notification', | ||
| }, | ||
| // poll: { | ||
| // path: '../reference/poll', | ||
| // name: 'Poll', | ||
| // }, | ||
| plugins: { | ||
| path: '/web-core/reference/DytePlugin', | ||
| name: 'DytePlugin[]', | ||
| }, | ||
| plugin: { | ||
| path: '/web-core/reference/DytePlugin', | ||
| name: 'DytePlugin', | ||
| }, | ||
| }; | ||
|
|
||
| const WEB_CORE_TYPE_REFERENCES = { | ||
| DyteClient: { | ||
| path: '/web-core/reference/DyteClient', | ||
| name: 'DyteClient', | ||
| }, | ||
| }; | ||
|
|
||
| function PropType({ prop }) { | ||
| if (prop.name === 'participant') { | ||
| return ( | ||
| <pre className={styles.propType}> | ||
| <code> | ||
| <Link href="/web-core/reference/DyteParticipant"> | ||
| DyteParticipant | ||
| </Link>{' '} | ||
| | <Link href="/web-core/reference/DyteSelf">DyteSelf</Link> | ||
| </code> | ||
| </pre> | ||
| ); | ||
| } | ||
|
|
||
| if (prop.type === 'Peer[]') { | ||
| return ( | ||
| <pre className={styles.propType}> | ||
| <code> | ||
| ( | ||
| <Link href="/web-core/reference/DyteParticipant"> | ||
| DyteParticipant | ||
| </Link>{' '} | ||
| | <Link href="/web-core/reference/DyteSelf">DyteSelf</Link>)[] | ||
| </code> | ||
| </pre> | ||
| ); | ||
| } | ||
|
|
||
| const ref = REFERENCE_PROPS[prop.name] || WEB_CORE_TYPE_REFERENCES[prop.type]; | ||
|
|
||
| if (ref) { | ||
| return ( | ||
| <pre className={styles.propType}> | ||
| <code> | ||
| <Link href={ref.path}>{ref.name}</Link> | ||
| </code> | ||
| </pre> | ||
| ); | ||
| } | ||
|
|
||
| return <CodeBlock language="ts">{prop.type}</CodeBlock>; | ||
| } | ||
|
|
||
| function PropCard({ prop }) { | ||
| return ( | ||
| <div className={styles.card}> | ||
| <h4> | ||
| <code>{prop.name}</code> | ||
| </h4> | ||
| <div> | ||
| {prop.required && ( | ||
| <p> | ||
| <code data-code="required">required</code> | ||
| </p> | ||
| )} | ||
| <p className={styles.docs}>{prop.docs}</p> | ||
| {prop.default && prop.default.length > 0 && ( | ||
| <div> | ||
| <h5>Default</h5> | ||
| <CodeBlock language="ts">{prop.default}</CodeBlock> | ||
| </div> | ||
| )} | ||
| <div> | ||
| <h5>Type</h5> | ||
| <PropType prop={prop} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function PropsTable({ of }) { | ||
| const doc = UIKitDocs.components.find((component) => component.tag === of); | ||
|
|
||
| if (!doc) return null; | ||
|
|
||
| const { props } = doc; | ||
|
|
||
| // brings required props to start | ||
| props.sort((a) => (a.required ? -1 : 1)); | ||
|
|
||
| return ( | ||
| <div className={styles.root}> | ||
| <div className={styles.props}> | ||
| {props.map((prop) => ( | ||
| <PropCard prop={prop} key={prop.name} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| .card h5 { | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .card h3 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .card h4 { | ||
| font-weight: 600; | ||
| padding: 12px 0; | ||
| margin: 12px 0; | ||
| border-bottom: 1px solid var(--docs-color-border); | ||
| } | ||
|
|
||
| .props { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 6px; | ||
|
|
||
| display: grid; | ||
| grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .docs { | ||
| color: var(--docs-color-text-100); | ||
| font-size: 90%; | ||
| } | ||
|
|
||
| .propType { | ||
| background-color: var(--docs-color-code-background); | ||
| padding: var(--ifm-pre-padding); | ||
| border: 1px solid var(--code-border-color); | ||
| border-radius: var(--ifm-code-border-radius); | ||
| } | ||
|
|
||
| .default { | ||
| font-size: 90%; | ||
| } | ||
|
|
||
| .default > span { | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| @media screen and (max-width: 996px) { | ||
| .props { | ||
| grid-template-columns: repeat(1, minmax(0, 1fr)); | ||
| gap: 0px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React, { forwardRef } from 'react'; | ||
| import * as Select from '@radix-ui/react-select'; | ||
| import clsx from 'clsx'; | ||
| import { Check, ChevronDown, ChevronUp } from 'react-feather'; | ||
|
|
||
| const SectionsMenu = forwardRef( | ||
| ({ defaultValue = '', values = [], children, className, ...props }, ref) => { | ||
| return ( | ||
| <Select.Root defaultValue={defaultValue} ref={ref} {...props}> | ||
| <Select.Trigger | ||
| aria-title="Select Section" | ||
| className={clsx('sections-menu-trigger', className)} | ||
| > | ||
| <Select.Value /> | ||
| <Select.Icon> | ||
| <ChevronDown className="sections-menu-scrollButton" /> | ||
| </Select.Icon> | ||
| </Select.Trigger> | ||
|
|
||
| <Select.Content className={clsx('sections-menu-content', className)}> | ||
| <Select.ScrollUpButton className="sections-menu-scrollButton"> | ||
| <ChevronUp /> | ||
| </Select.ScrollUpButton> | ||
|
|
||
| <Select.Viewport> | ||
| <Select.Group> | ||
| {values.map(({ docId, name, icon: Icon, disabled = false }) => ( | ||
| <Select.Item | ||
| value={docId} | ||
| key={docId} | ||
| className={clsx('sections-menu-item')} | ||
| disabled={disabled} | ||
| > | ||
| <Select.ItemText> | ||
| <div className="item-text"> | ||
| {Icon && <Icon />} | ||
| <span>{name}</span> | ||
| </div> | ||
| </Select.ItemText> | ||
| <Select.ItemIndicator className="flex items-center"> | ||
| <Check className="item-indicator" /> | ||
| </Select.ItemIndicator> | ||
| </Select.Item> | ||
| ))} | ||
| {children} | ||
| </Select.Group> | ||
| </Select.Viewport> | ||
|
|
||
| <Select.ScrollDownButton className="sections-menu-scrollButton"> | ||
| <ChevronDown /> | ||
| </Select.ScrollDownButton> | ||
| </Select.Content> | ||
| </Select.Root> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export default SectionsMenu; |
Oops, something went wrong.