-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(dev): merge recent developments (#11)
build: package markdown path fixup, add homepage url. docs: completed existed components documents. perf: cornered shape naming & `sm` size params of badge component. fix: loader bar-bounce component visibility. fix: docs site header logo wrong height. Signed-off-by: Ricco Xie <ricco@riccox.com>
- Loading branch information
Showing
29 changed files
with
2,287 additions
and
20 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import _ from "lodash"; | ||
| import React, { useCallback, useState } from "react"; | ||
|
|
||
| interface Props { | ||
| position: "top" | "bottom" | "left" | "right"; | ||
| labelText?: string; | ||
| content?: string; | ||
|
|
||
| pauseScroll?: boolean; | ||
| overlay?: boolean; | ||
| overlayClickClose?: boolean; | ||
| } | ||
|
|
||
| export const DrawerDemo = ({ | ||
| position = "left", | ||
| pauseScroll = false, | ||
| overlay = true, | ||
| overlayClickClose = true, | ||
| labelText = "Open Drawer", | ||
| content = "Your content", | ||
| }: Props) => { | ||
| const [drawerId] = useState(_.uniqueId("sira-demo-drawer-")); | ||
|
|
||
| const toggleDrawer = useCallback(() => { | ||
| let ele = document.getElementById(drawerId); | ||
| let show = ele!.classList.contains("show"); | ||
| if (show) { | ||
| ele!.classList.remove("show"); | ||
| } else { | ||
| ele!.classList.add("show"); | ||
| } | ||
| }, [drawerId]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <label className="btn solid success w-fit" onClick={toggleDrawer}> | ||
| {labelText} | ||
| </label> | ||
| {overlay && ( | ||
| <label | ||
| className="drawer-overlay" | ||
| onClick={overlayClickClose ? toggleDrawer : () => {}} | ||
| ></label> | ||
| )} | ||
| <div | ||
| className={`drawer ${position} ${pauseScroll ? "pause-scroll" : ""}`} | ||
| id={drawerId} | ||
| > | ||
| <div className="content flex flex-col h-full"> | ||
| <label | ||
| className="btn sm circle ghost absolute right-2 top-2" | ||
| onClick={toggleDrawer} | ||
| > | ||
| ✕ | ||
| </label> | ||
| <h2 className="text-xl">{content}</h2> | ||
| </div> | ||
| </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,45 @@ | ||
| import React from "react"; | ||
|
|
||
| interface Props { | ||
| position: | ||
| | "top" | ||
| | "bottom" | ||
| | "left" | ||
| | "right" | ||
| | "top-left" | ||
| | "top-right" | ||
| | "bottom-left" | ||
| | "bottom-right" | ||
| | "left-top" | ||
| | "right-top" | ||
| | "left-bottom" | ||
| | "right-bottom"; | ||
| labelText?: string; | ||
| className?: string; | ||
| divider?: boolean; | ||
| } | ||
|
|
||
| export const DropdownDemo = ({ | ||
| position = "bottom", | ||
| divider = false, | ||
| labelText = "Open Dropdown", | ||
| className = "", | ||
| }: Props) => { | ||
| return ( | ||
| <div className={`dropdown success ${className}`}> | ||
| <label className="btn solid" tabIndex={0}> | ||
| {labelText} | ||
| </label> | ||
| <div className={`menu ${position}`}> | ||
| <a className="item text-sm">Profile</a> | ||
| {divider && <div className="divider" role="separator"></div>} | ||
| <a className="item text-sm" tabIndex={-1}> | ||
| Account settings | ||
| </a> | ||
| <a className="item text-sm" tabIndex={-1}> | ||
| Subscriptions | ||
| </a> | ||
| </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,58 @@ | ||
| import React, { useCallback, useState } from "react"; | ||
| import _ from "lodash"; | ||
|
|
||
| interface Props { | ||
| labelText?: string; | ||
| pauseScroll?: boolean; | ||
| overlay?: boolean; | ||
| } | ||
|
|
||
| export const ModalDemo = ({ | ||
| labelText = "Open Modal", | ||
| pauseScroll = false, | ||
| overlay = true, | ||
| }: Props) => { | ||
| const [eleId] = useState(_.uniqueId("sira-demo-modal-")); | ||
|
|
||
| const toggle = useCallback(() => { | ||
| let ele = document.getElementById(eleId); | ||
| let show = ele!.classList.contains("show"); | ||
| if (show) { | ||
| ele!.classList.remove("show"); | ||
| } else { | ||
| ele!.classList.add("show"); | ||
| } | ||
| }, [eleId]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <label className="btn success solid" onClick={toggle}> | ||
| {labelText} | ||
| </label> | ||
| {overlay && <label className="modal-overlay" onClick={toggle}></label>} | ||
| <div | ||
| className={`modal ${ | ||
| pauseScroll ? "pause-scroll" : "" | ||
| } flex flex-col gap-5`} | ||
| id={eleId} | ||
| > | ||
| <button className="absolute right-4 top-3" onClick={toggle}> | ||
| ✕ | ||
| </button> | ||
| <h2 className="text-xl">Modal title</h2> | ||
| <span> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur | ||
| dolorum voluptate ratione dicta. Maxime cupiditate, est commodi | ||
| consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis | ||
| iste quasi alias! | ||
| </span> | ||
| <div className="flex gap-3"> | ||
| <button className="btn solid danger flex-1">Delete</button> | ||
| <button className="btn solid bw flex-1" onClick={toggle}> | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </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 |
|---|---|---|
| @@ -1,4 +1,21 @@ | ||
| { | ||
| "overview": "Overview", | ||
| "button": "Button" | ||
| "accordion": "Accordion", | ||
| "avatar": "Avatar", | ||
| "badge": "Badge", | ||
| "breadcrumbs": "Breadcrumbs", | ||
| "button": "Button", | ||
| "checkbox": "Checkbox", | ||
| "drawer": "Drawer", | ||
| "dropdown": "Dropdown", | ||
| "input": "Input", | ||
| "loader": "Loader", | ||
| "modal": "Modal", | ||
| "prompt": "Prompt", | ||
| "radio": "Radio", | ||
| "select": "Select", | ||
| "switch": "Switch", | ||
| "table": "Table", | ||
| "tabs": "Tabs", | ||
| "tooltip": "Tooltip" | ||
| } |
Oops, something went wrong.
a71a853There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
sira – ./
sira-git-main-riccox.vercel.app
sira.vercel.app
sira-riccox.vercel.app
sira.riccox.com