Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v0.8.5 - work in progress (DO NOT MERGE) #65

Open
wants to merge 14 commits into
base: develop
Choose a base branch
from
Open

v0.8.5 - work in progress (DO NOT MERGE) #65

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0c28f8b
Merge pull request #57 from rizzui/develop
idris95 Dec 30, 2023
5bb4b1a
Merge pull request #58 from rizzui/develop
tareqmahmud Jan 10, 2024
e5fef82
v0.8.5 - work in progress, using pnpm, docusaurus upgraded
idris95 May 14, 2024
66ecf53
drawer, modal, dorpdown headless ui updated with new props
md-nahid May 15, 2024
6b605b5
select and tab headless updated
md-nahid May 16, 2024
44f8c5b
drawer resizable and press esc key to close added
md-nahid May 16, 2024
9ea72c5
turbo repo updated
md-nahid Jun 6, 2024
4b89da5
multiselect searchable select added
md-nahid Jun 14, 2024
ce1b118
all ok
md-nahid Jun 24, 2024
2998377
multiselect done
md-nahid Jun 24, 2024
23518b2
multi select ok
md-nahid Jun 24, 2024
5329c09
radial progress bar
md-nahid Jun 24, 2024
c5298a1
form validation added
md-nahid Jun 25, 2024
ba1a360
v0.8.5
md-nahid Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint
pnpm lint

yarn test
pnpm test

yarn build
pnpm build
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"cSpell.words": ["Popconfirm", "Progressbar", "rizzui", "testid"]
}
12 changes: 7 additions & 5 deletions apps/docs/docs/Inputs/select.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ sidebar_position: 10
---

import Paper from "@site/src/components/paper";
import SelectBox, {
SelectBoxClearable,
CustomOptionSelectBox,
} from "@site/src/components/select";
import SelectBox, { SelectBoxClearable, CustomOptionSelectBox } from "@site/src/components/select";

# Select

Expand Down Expand Up @@ -57,7 +54,10 @@ export default function App() {
You can clear **Select** value using clearable property.

<Paper>
<SelectBoxClearable clearable className="w-full max-w-md" />
<SelectBoxClearable
clearable
className="w-full max-w-md"
/>
</Paper>

```tsx
Expand Down Expand Up @@ -183,6 +183,8 @@ Here is the API documentation of the **Select** component.
| size | [SelectSizes](#select-sizes) | The size of the component. "sm" is equivalent to the dense select styling. | `"md"` |
| rounded | [SelectRounded](#select-rounded) | The rounded variants are: | `"md"` |
| inPortal | `boolean` | Whether select options is rendered on the portal or not | `"true"` |
| modal | `boolean` | Whether the body scrollbar is hidden or not when dropdown is visible. | `"false"` |
| gap | `number` | Sets the gap between trigger and dropdown if portal is true | `"6"` |
| placeholder | `string` | Set select placeholder text | `"Select..."` |
| disabled | `boolean` | Whether the select is disabled or not | \_\_ |
| clearable | `boolean` | Add clearable option | \_\_ |
Expand Down
30 changes: 24 additions & 6 deletions apps/docs/docs/buttons/button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,10 +161,16 @@ You can set the loading state of the **Button** component using **isLoading** pr
<Paper>
<div className="flex items-center justify-around gap-4 w-full flex-wrap">
<Button isLoading={true}>Primary</Button>
<Button isLoading={true} color="secondary">
<Button
isLoading={true}
color="secondary"
>
Secondary
</Button>
<Button isLoading={true} color="danger">
<Button
isLoading={true}
color="danger"
>
Danger
</Button>
</div>
Expand All @@ -177,10 +183,16 @@ export default function App() {
return (
<>
<Button isLoading={true}>Primary</Button>
<Button isLoading={true} color="secondary">
<Button
isLoading={true}
color="secondary"
>
Secondary
</Button>
<Button isLoading={true} color="danger">
<Button
isLoading={true}
color="danger"
>
Danger
</Button>
</>
Expand Down Expand Up @@ -215,7 +227,10 @@ You can set any Icon at any possition.
<Paper>
<Button>
<span>View Details</span>{" "}
<ArrowRightIcon strokeWidth="2" className="h-4 w-4 ml-2" />
<ArrowRightIcon
strokeWidth="2"
className="h-4 w-4 ml-2"
/>
</Button>
</Paper>

Expand All @@ -227,7 +242,10 @@ export default function App() {
return (
<Button>
<span>View Details</span>{" "}
<ArrowRightIcon strokeWidth="2" className="h-4 w-4 ml-2" />
<ArrowRightIcon
strokeWidth="2"
className="h-4 w-4 ml-2"
/>
</Button>
);
}
Expand Down
74 changes: 37 additions & 37 deletions apps/docs/docs/navigation/dropdown.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,12 @@ A simple dropdown with component **Dropdown**.
<Paper>
<Dropdown>
<Dropdown.Trigger>
<Button variant="outline">
Settings <ChevronDownIcon className="ml-2 w-5" />
<Button
as="span"
variant="outline"
>
Settings
<ChevronDownIcon className="ml-2 w-5" />
</Button>
</Dropdown.Trigger>
<Dropdown.Menu className="text-sm font-inter">
Expand All @@ -53,7 +57,10 @@ export default function App() {
return (
<Dropdown>
<Dropdown.Trigger>
<Button variant="outline">
<Button
as="span"
variant="outline"
>
Settings <ChevronDownIcon className="ml-2 w-5" />
</Button>
</Dropdown.Trigger>
Expand All @@ -77,7 +84,11 @@ You can use **placement** and icon.
<Paper>
<Dropdown placement="bottom-end">
<Dropdown.Trigger>
<ActionIcon variant="outline" rounded="full">
<ActionIcon
as="span"
variant="outline"
rounded="full"
>
<AdjustmentsHorizontalIcon className="h-5 w-5" />
</ActionIcon>
</Dropdown.Trigger>
Expand Down Expand Up @@ -139,7 +150,10 @@ export default function App() {
return (
<Dropdown placement="bottom-end">
<Dropdown.Trigger>
<ActionIcon variant="outline" rounded="full">
<ActionIcon
variant="outline"
rounded="full"
>
<AdjustmentsHorizontalIcon className="h-5 w-5" />
</ActionIcon>
</Dropdown.Trigger>
Expand Down Expand Up @@ -209,27 +223,19 @@ The variation is limitless. You can style your **Dropdown** as you want to do.
src="https://randomuser.me/api/portraits/women/40.jpg"
/>
<span className="ml-2 text-start">
<Text className="text-gray-900 font-medium leading-tight">
Mary Hoops
</Text>
<Text className="text-gray-900 font-medium leading-tight">Mary Hoops</Text>
<Text>maryhe@demo.io</Text>
</span>
</Dropdown.Item>
<div className="mt-3 mb-2 pt-2">
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
Account Settings
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
Support
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
License
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Support</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">License</Dropdown.Item>
</div>
<div className="mt-2 pt-2">
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
Sign Out
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Sign Out</Dropdown.Item>
</div>
</Dropdown.Menu>
</Dropdown>
Expand All @@ -255,27 +261,19 @@ export default function App() {
src="https://randomuser.me/api/portraits/women/40.jpg"
/>
<span className="ml-2 text-start">
<Text className="text-gray-900 font-medium leading-tight">
Mary Hoops
</Text>
<Text className="text-gray-900 font-medium leading-tight">Mary Hoops</Text>
<Text>maryhe@demo.io</Text>
</span>
</Dropdown.Item>
<div className="mt-3 mb-2 pt-2">
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
Account Settings
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
Support
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
License
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Support</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">License</Dropdown.Item>
</div>
<div className="mt-2 pt-2">
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
Sign Out
</Dropdown.Item>
<Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Sign Out</Dropdown.Item>
</div>
</Dropdown.Menu>
</Dropdown>
Expand All @@ -297,14 +295,16 @@ Here is the API documentation of the Dropdown component. You can use the followi

<div className="overflow-x-auto">

| Props | Type | Description | Default |
| :-------: | :--------------------------------------: | :------------------------------------------------------------: | :--------------: |
| children | \_\_ | Use **Dropdown.Trigger** & **Dropdown.Menu** as childrens | \_\_ |
| rounded | [DropdownRounded](#dropdown-rounded) | The rounded variants supported by this component are: | `"md"` |
| shadow | [DropdownShadows](#dropdown-shadows) | The shadow variants supported by this component are: | `"md"` |
| placement | [DropdownPlacement](#dropdown-placement) | The dropdown menu placements: | `"bottom-start"` |
| inPortal | `boolean` | Whether the **Dropdown.Menu** is rendered on the portal or not | `"true"` |
| className | `string` | Add classes to the main wrapper of this component | \_\_ |
| Props | Type | Description | Default |
| :-------: | :--------------------------------------: | :---------------------------------------------------------------------: | :--------------: |
| children | \_\_ | Use **Dropdown.Trigger** & **Dropdown.Menu** as childrens | \_\_ |
| rounded | [DropdownRounded](#dropdown-rounded) | The rounded variants supported by this component are: | `"md"` |
| shadow | [DropdownShadows](#dropdown-shadows) | The shadow variants supported by this component are: | `"md"` |
| placement | [DropdownPlacement](#dropdown-placement) | The dropdown menu placements. Won't work if **inPortal** prop is false. | `"bottom-start"` |
| inPortal | `boolean` | Whether the **Dropdown.Menu** is rendered on the portal or not | `"true"` |
| modal | `boolean` | Whether the body scrollbar is hidden or not when dropdown is visible. | `"false"` |
| gap | `number` | Sets the gap between trigger and dropdown if portal is true | `"6"` |
| className | `string` | Add classes to the main wrapper of this component | \_\_ |

</div>

Expand Down
12 changes: 8 additions & 4 deletions apps/docs/docs/navigation/tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,16 +72,20 @@ You can use icon in the tab list item
<Tab>
<Tab.List>
<Tab.ListItem>
<UserIcon className="h-4 w-4" /> My Account
<UserIcon className="h-4 w-4" />
<span>My Account</span>
</Tab.ListItem>
<Tab.ListItem>
<BuildingOfficeIcon className="h-4 w-4" /> Company
<BuildingOfficeIcon className="h-4 w-4" />
<span>Company</span>
</Tab.ListItem>
<Tab.ListItem>
<UsersIcon className="h-4 w-4" /> Team Member
<UsersIcon className="h-4 w-4" />
<span>Team Member</span>
</Tab.ListItem>
<Tab.ListItem>
<CreditCardIcon className="h-4 w-4" /> Billing
<CreditCardIcon className="h-4 w-4" />
<span>Billing</span>
</Tab.ListItem>
</Tab.List>
<Tab.Panels>
Expand Down
Loading