Skip to content

Commit

Permalink
feat: chakra-ui support (refinedev#2835)
Browse files Browse the repository at this point in the history 
* feat(chakra): add base package

* feat(chakra): add base layout components

* refactor(chakra): colors improments

* feat(chakra): nested menu support on sider

* refactor(chakra): list

* feat(chakra): breadcrumb

* feat(chakra): edit button

* feat(chakra): delete button

* chore(chakra example): use edit and delete button on list page

* fix(chakra): create button size and hideText version

* fix(chakra): breadcrumb spacing

* feat(chakra): crud create

* feat(chakra): implement create page

* fix(chakra): remove invalid props on create page

* feat(chakra): edit crud

* chore(chakra): deleted copy folder

* feat(chakra): implement edit page

* feat(chakra): clone button

* feat(chakra): export button

* feat(chakra): import button

* feat(chakra): list button

* feat(chakra): refresh button

* feat(chakra): save button

* feat(chakra): show button

* fix(chakra): button sizes

* fix(chakra): all fields

* fix(chakra): pagination component

* chore(chakra example): update pagination position

* fix(chakra example): edit category default value

* chore(chakra example): implement sorter and filter

* feat(chakra): add usePagination hook and remove old pagination component

* feat(chakra example): use new usePagination hook

* feat: add new theme variables

* fix: update main layout

* feat: add collapsable feature to sider

* refactor(chakra): filter dropdown

* fix(chakra): fix layout width

* fix: layout fix problem and develop sider items

* fix: button paddings

* fix: navbutton paddings

* fix(sider): collapsed view

* fix(sider): tooltip view

* fix(sider): add active style and default open index

* feat(chakra): add ready page

* feat(chakra): add error page

* feat(chakra example): use ReadPage and ErrorComponent

* feat(sider): add drawer sider for mobile view

* fix: drawer sider issues

* fix: add overflow for layout content

* fix: layout view

* feat: add transtion to sider

* fix(base-example): add whiteSpace prop to table

* fix: make all button sizes the same

* fix: crud component title sizes

* fix: make bold user name in header

* fix: update the theme

* feat(chakra): add base auth pages

* feat(chakra auth example): add base

* feat(chakra): login page

* feat(chakra): register page

* feat(chakra): forgot password page

* feat(chakra): update password page

* feat(example): add show page

* fix: chakra imports

* fix(crud): show component

* refactor(chakra): auth formProps types

* fix(example): base example edit page

* fix(crud): crud components

* fix: refresh button loading issue

* fix: update table whitespace prop

* fix: update pagination component button size

* fix: update the base example table title spaces

* fix(buttons): use isLoading instead of loading

* refactor: fix example console errors

* refactor: the example pagination component

* fix: add missing exports

* fix(chakra auth example): table vertical scroll

* feat: add dark mode

* feat: add custom theme example

* fix: change theme import name in examples

* fix(chakra base example): remove unuse import

* fix(chakra auth example): refactor pagination

* feat(chakra): add useDrawerForm example

* fix: remove primary color

* refactor(chakra): set green color schema on auth pages buttons

* fix(chakra): auth pages button and links color

* fix: update sider view

* fix: update icon size 20 instead of 18

* chore(chakra drawerForm example): rename useDrawerForm -> drawerForm

* fix: chakra examples

* fix: breadcrumb spacing

* fix: error page

* feat(chakra): add modalForm example

* fix: ready page

* chore: rename form examples

* feat: add useForm example

* feat: add notification provider

* fix: add notification provider to examples

* test: add tests enviroment

* feat: table examples

* fix: remove options on customization example

* fix: package versions

* fix: missing breadcrumb export

* fix: add locales to datefield

* feat: add multipart upload example for chakra

* refactor(chakra): base example

* fix: isLazy prop to delete button popover

* test(delete-button): use find by test id instead of text

* refactor(chakra): fix table examples

* chore: add changeset

* test: fix chakra header test

* fix(crud): fix custom title no render issue

* feat(buttons): add accessControl props feature

* feat(chakra): add upload examples

* chore: update version

Co-authored-by: Salih <[email protected]>
  • Loading branch information
@yildirayunlu @salihozdemir
yildirayunlu and salihozdemir authored Oct 31, 2022
1 parent 9f90d20 commit e479bef
Show file tree
Hide file tree
Showing 303 changed files with 14,847 additions and 43 deletions.
5 changes: 5 additions & 0 deletions .changeset/itchy-buses-turn.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@pankod/refine-ui-tests": patch
---

Used find by test id instead of find by text on delete button tests.
23 changes: 23 additions & 0 deletions examples/authentication/chakra-ui/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
17 changes: 17 additions & 0 deletions examples/authentication/chakra-ui/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/src/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>refine chakra-ui authentication example</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions examples/authentication/chakra-ui/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "refine-chakra-ui-authentication-example",
"private": true,
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@pankod/refine-chakra-ui": "^1.0.0",
"@pankod/refine-core": "^3.86.2",
"@pankod/refine-react-router-v6": "^3.36.2",
"@pankod/refine-simple-rest": "^3.35.0",
"@pankod/refine-react-table": "^4.9.0",
"@pankod/refine-react-hook-form": "^3.33.2",
"@tabler/icons": "^1.1.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.0.7",
"typescript": "^4.7.4",
"vite": "^2.8.0"
},
"version": "3.25.0"
}
150 changes: 150 additions & 0 deletions examples/authentication/chakra-ui/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import { AuthProvider, Refine } from "@pankod/refine-core";
import {
AuthPage,
ChakraProvider,
Layout,
ErrorComponent,
ReadyPage,
refineTheme,
notificationProvider,
} from "@pankod/refine-chakra-ui";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router-v6";
import { IconBrandGoogle, IconBrandGithub } from "@tabler/icons";

import { PostCreate, PostEdit, PostList, PostShow } from "./pages";

const App: React.FC = () => {
const authProvider: AuthProvider = {
login: async ({ providerName, email }) => {
if (providerName === "google") {
window.location.href =
"https://accounts.google.com/o/oauth2/v2/auth";
return Promise.resolve(false);
}

if (providerName === "github") {
window.location.href =
"https://github.com/login/oauth/authorize";
return Promise.resolve(false);
}

if (email) {
localStorage.setItem("email", email);
return Promise.resolve();
}

return Promise.reject();
},
register: (params) => {
if (params.email && params.password) {
localStorage.setItem("email", params.email);
return Promise.resolve();
}
return Promise.reject();
},
updatePassword: (params) => {
if (params.newPassword) {
//we can update password here
return Promise.resolve();
}
return Promise.reject();
},
forgotPassword: (params) => {
if (params.email) {
//we can send email with reset password link here
return Promise.resolve();
}
return Promise.reject();
},
logout: () => {
localStorage.removeItem("email");
return Promise.resolve();
},
checkError: () => Promise.resolve(),
checkAuth: () =>
localStorage.getItem("email")
? Promise.resolve()
: Promise.reject(),
getPermissions: () => Promise.resolve(["admin"]),
getUserIdentity: () =>
Promise.resolve({
id: 1,
name: "Jane Doe",
avatar: "https://unsplash.com/photos/IWLOvomUmWU/download?force=true&w=640",
}),
};

return (
<ChakraProvider theme={refineTheme}>
<Refine
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
authProvider={authProvider}
notificationProvider={notificationProvider()}
routerProvider={{
...routerProvider,
routes: [
{
path: "/register",
element: (
<AuthPage
type="register"
providers={[
{
name: "google",
label: "Sign in with Google",
icon: <IconBrandGoogle />,
},
{
name: "github",
label: "Sign in with GitHub",
icon: <IconBrandGithub />,
},
]}
/>
),
},
{
path: "/forgot-password",
element: <AuthPage type="forgotPassword" />,
},
{
path: "/update-password",
element: <AuthPage type="updatePassword" />,
},
],
}}
LoginPage={() => (
<AuthPage
providers={[
{
name: "google",
label: "Sign in with Google",
icon: <IconBrandGoogle />,
},
{
name: "github",
label: "Sign in with GitHub",
icon: <IconBrandGithub />,
},
]}
/>
)}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
Layout={Layout}
resources={[
{
name: "posts",
list: PostList,
show: PostShow,
edit: PostEdit,
create: PostCreate,
},
]}
/>
</ChakraProvider>
);
};

export default App;
62 changes: 62 additions & 0 deletions examples/authentication/chakra-ui/src/components/pagination/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { FC } from "react";
import { HStack, Button, Box } from "@chakra-ui/react";
import { IconChevronRight, IconChevronLeft } from "@tabler/icons";
import { IconButton, usePagination } from "@pankod/refine-chakra-ui";

type PaginationProps = {
current: number;
pageCount: number;
setCurrent: (page: number) => void;
};

export const Pagination: FC<PaginationProps> = ({
current,
pageCount,
setCurrent,
}) => {
const pagination = usePagination({
current,
pageCount,
});

return (
<Box display="flex" justifyContent="flex-end">
<HStack my="3" spacing="1">
{pagination?.prev && (
<IconButton
aria-label="previous page"
onClick={() => setCurrent(current - 1)}
disabled={!pagination?.prev}
variant="outline"
>
<IconChevronLeft size="18" />
</IconButton>
)}

{pagination?.items.map((page) => {
if (typeof page === "string")
return <span key={page}>...</span>;

return (
<Button
key={page}
onClick={() => setCurrent(page)}
variant={page === current ? "solid" : "outline"}
>
{page}
</Button>
);
})}
{pagination?.next && (
<IconButton
aria-label="next page"
onClick={() => setCurrent(current + 1)}
variant="outline"
>
<IconChevronRight size="18" />
</IconButton>
)}
</HStack>
</Box>
);
};
106 changes: 106 additions & 0 deletions examples/authentication/chakra-ui/src/components/table/columnFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React, { useState } from "react";
import {
Input,
Menu,
IconButton,
MenuButton,
MenuList,
VStack,
HStack,
} from "@pankod/refine-chakra-ui";
import { IconFilter, IconX, IconCheck } from "@tabler/icons";

import { ColumnButtonProps } from "../../interfaces";

export const ColumnFilter: React.FC<ColumnButtonProps> = ({ column }) => {
// eslint-disable-next-line
const [state, setState] = useState(null as null | { value: any });

if (!column.getCanFilter()) {
return null;
}

const open = () =>
setState({
value: column.getFilterValue(),
});

const close = () => setState(null);

// eslint-disable-next-line
const change = (value: any) => setState({ value });

const clear = () => {
column.setFilterValue(undefined);
close();
};

const save = () => {
if (!state) return;
column.setFilterValue(state.value);
close();
};

const renderFilterElement = () => {
// eslint-disable-next-line
const FilterComponent = (column.columnDef?.meta as any)?.filterElement;

if (!FilterComponent && !!state) {
return (
<Input
borderRadius="md"
size="sm"
autoComplete="off"
value={state.value}
onChange={(e) => change(e.target.value)}
/>
);
}

return (
<FilterComponent
value={state?.value}
onChange={(e: any) => change(e.target.value)}
/>
);
};

return (
<Menu isOpen={!!state} onClose={close}>
<MenuButton
onClick={open}
as={IconButton}
aria-label="Options"
icon={<IconFilter size="16" />}
variant="ghost"
size="xs"
/>
<MenuList p="2">
{!!state && (
<VStack align="flex-start">
{renderFilterElement()}
<HStack spacing="1">
<IconButton
aria-label="Clear"
size="sm"
colorScheme="red"
onClick={clear}
>
<IconX size={18} />
</IconButton>
<IconButton
aria-label="Save"
size="sm"
onClick={save}
variant="solid"
colorScheme="primary"
>
<IconCheck size={18} />
</IconButton>
</HStack>
</VStack>
)}
</MenuList>
</Menu>
);
};
Loading

0 comments on commit e479bef

Please sign in to comment.