Skip to content

Commit

Permalink
refactor: react 19 compatible ref's
Browse files Browse the repository at this point in the history
  • Loading branch information
ht-lovrozagar committed Aug 20, 2024
1 parent 6e2e55b commit f6655ad
Show file tree
Hide file tree
Showing 235 changed files with 4,519 additions and 9,289 deletions.
13 changes: 0 additions & 13 deletions .eslintignore

This file was deleted.

125 changes: 0 additions & 125 deletions .eslintrc.json

This file was deleted.

6 changes: 0 additions & 6 deletions .prettierignore

This file was deleted.

29 changes: 0 additions & 29 deletions .prettierrc.json

This file was deleted.

2 changes: 2 additions & 0 deletions .todo
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
- feat: menubar
- feat: pagination
- feat: resizeable
- feat: framer motion useIsMOtionReduced
- fix: empty select/combobox content

-refactor: collapsible to use css height: calc-size(auto) when better browser support
-also see what can be done with starting style and and transition behaviour when better browser support
84 changes: 63 additions & 21 deletions app.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,69 @@
import { Tabs, TabsTrigger, TabsTriggerList, TextArea } from '@/components'
import React, { useState } from 'react'
import {
Button,
Combobox,
ComboboxContent,
ComboboxItem,
ComboboxTrigger,
Drawer,
DrawerContent,
DrawerTrigger,
Popover,
PopoverContent,
PopoverTrigger,
Select,
SelectContent,
SelectItem,
SelectTrigger,
} from "@/components";
import { DrawerClose } from "@/components/drawer/components/drawer-close";
import { DrawerDescription } from "@/components/drawer/components/drawer-description";
import { DrawerHeader } from "@/components/drawer/components/drawer-header";
import { DrawerTitle } from "@/components/drawer/components/drawer-title";
import React, { useState } from "react";

const App = () => {
const [state, setValue] = useState('')
const [state, setValue] = useState("");

return (
<div className='h-screen w-full flex flex-col justify-center items-center gap-8'>
<Tabs value={state} onValueChange={setValue}>
<TabsTriggerList>
<TabsTrigger asChild value={1}>
{({ isSelected, ChildrenContainer, Cursor }) => (
<span>
<ChildrenContainer>Text</ChildrenContainer>
{isSelected ? <Cursor /> : null}
</span>
)}
</TabsTrigger>
<TabsTrigger value={2}>Trigger 2</TabsTrigger>
</TabsTriggerList>
</Tabs>
<TextArea />
<div className="h-screen w-full flex justify-center items-center gap-8">
{/* <Popover shouldForwardOutsideInteraction>
<PopoverTrigger>Trigger</PopoverTrigger>
<PopoverContent>
<Button>Button</Button>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger>Trigger</PopoverTrigger>
<PopoverContent>
<Button>Button</Button>
</PopoverContent>
</Popover>
<Select>
<SelectTrigger>Trigger</SelectTrigger>
<SelectContent hasScroll={false}>
<SelectItem value='item-1'>Item</SelectItem>
<SelectItem value='item-2'>Item 2</SelectItem>
</SelectContent>
</Select> */}
{/* <Combobox>
<ComboboxTrigger>Trigger</ComboboxTrigger>
<ComboboxContent hasScroll={false} emptyContent={'No data.'}>
<ComboboxItem value='item-1'>Item</ComboboxItem>
<ComboboxItem value='item-2'>Item 2</ComboboxItem>
</ComboboxContent>
</Combobox> */}
<Drawer>
<DrawerTrigger>Trigger</DrawerTrigger>
<DrawerContent>
<DrawerClose>X</DrawerClose>
<DrawerHeader>
<DrawerTitle>Title</DrawerTitle>
<DrawerDescription>Description</DrawerDescription>
</DrawerHeader>
</DrawerContent>
</Drawer>
</div>
)
}
);
};

export { App }
export { App };
36 changes: 19 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@renderui/core",
"version": "1.5.3",
"version": "1.5.5",
"private": false,
"description": "React UI library with highly modular and ready-out-of-the-box components",
"license": "MIT",
Expand Down Expand Up @@ -39,36 +39,38 @@
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@renderui/utils": "^0.2.0",
"@types/react": "npm:types-react@rc",
"@types/react-dom": "npm:types-react-dom@rc",
"cmdk": "^1.0.0",
"next-themes": "^0.3.0",
"react-aria": "^3.33.1",
"react-hotkeys-hook": "^4.5.0",
"sonner": "^1.5.0"
"sonner": "^1.5.0",
"vaul": "^0.9.1"
},
"overrides": {
"@types/react": "npm:types-react@rc",
"@types/react-dom": "npm:types-react-dom@rc"
},
"devDependencies": {
"@changesets/cli": "^2.26.0",
"@types/react": "^18.2.63",
"@types/react-dom": "^18.2.20",
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"@vitejs/plugin-react": "4.2.1",
"autoprefixer": "^10.4.17",
"bunchee": "^5.1.5",
"eslint": "^8.57.0",
"eslint-config-hardcore": "^45.3.0",
"eslint-plugin-no-relative-import-paths": "^1.5.3",
"framer-motion": "^11.0.5",
"bunchee": "^5.3.2",
"framer-motion": "^11.3.28",
"postcss": "^8.4.35",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^19.0.0-rc-fb9a90fa48-20240614",
"react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.0",
"types-react": "^19.0.0-rc.1",
"types-react-dom": "^19.0.0-rc.1",
"typescript": "^5.5.4",
"vite": "^5.1.4"
},
"peerDependencies": {
"framer-motion": "^11.0.5",
"react": "^18.0",
"react-dom": "^18.0.0"
"framer-motion": "^11.3.28",
"react": "^19.0.0-rc-fb9a90fa48-20240614",
"react-dom": "^19.0.0-rc-fb9a90fa48-20240614"
},
"publishConfig": {
"access": "public"
Expand Down
20 changes: 10 additions & 10 deletions src/components/_shared/components/icons/caret-sort-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react'
import React from "react";

const CaretSortIcon = (props: React.ComponentPropsWithoutRef<'svg'>) => {
const CaretSortIcon = (props: React.ComponentPropsWithRef<"svg">) => {
return (
<svg width='15' height='15' viewBox='0 0 15 15' fill='none' {...props}>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" {...props}>
<path
d='M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z'
fill='currentColor'
fillRule='evenodd'
clipRule='evenodd'
d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
/>
</svg>
)
}
);
};

export { CaretSortIcon }
export { CaretSortIcon };
20 changes: 10 additions & 10 deletions src/components/_shared/components/icons/check-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react'
import React from "react";

const CheckIcon = (props: React.ComponentPropsWithoutRef<'svg'>) => {
const CheckIcon = (props: React.ComponentPropsWithRef<"svg">) => {
return (
<svg width='15' height='15' viewBox='0 0 15 15' fill='none' {...props}>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" {...props}>
<path
d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z'
fill='currentColor'
fillRule='evenodd'
clipRule='evenodd'
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
/>
</svg>
)
}
);
};

export { CheckIcon }
export { CheckIcon };
Loading

0 comments on commit f6655ad

Please sign in to comment.