Skip to content

Commit

Permalink
Update package dependencies and refactor code
Browse files Browse the repository at this point in the history
Updated several package dependencies across the project, including '@headlessui/react', '@heroicons/react' and '@paljs/admin'. Additionally, refactored code to accommodate for the updated versions of these dependencies. The changes involve adjustments in the way components, icons and functionalities are imported and used in the project.
  • Loading branch information
AhmedElywa committed Jun 13, 2024
1 parent 3210e4c commit eea818e
Show file tree
Hide file tree
Showing 11 changed files with 228 additions and 65 deletions.
6 changes: 6 additions & 0 deletions packages/admin/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @paljs/admin

## 7.0.1

### Patch Changes

- upgrade tailwend packages

## 7.0.0

### Major Changes
Expand Down
6 changes: 3 additions & 3 deletions packages/admin/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@paljs/admin",
"version": "7.0.0",
"version": "7.0.1",
"main": "index.js",
"module": "./esm/index.js",
"types": "index.d.ts",
Expand All @@ -23,8 +23,8 @@
"build:css": "cross-env NODE_ENV=production tailwindcss build -o ./dist/style.css"
},
"dependencies": {
"@headlessui/react": "^1.5.0",
"@heroicons/react": "^1.0.5",
"@headlessui/react": "^2.0.4",
"@heroicons/react": "^2.1.3",
"@paljs/types": "workspace:*",
"react-beautiful-dnd": "13.1.0",
"react-hook-form": "7.51.5",
Expand Down
4 changes: 2 additions & 2 deletions packages/admin/src/PrismaTable/Form/Inputs.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint @typescript-eslint/no-non-null-assertion: 0 */
import React, { useContext, useState } from 'react';
import { useQuery } from '@apollo/client';
import { SearchIcon, XCircleIcon } from '@heroicons/react/outline';
import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/outline';

import Modal from '../../components/Modal';
import { useEnum } from '../useSchema';
Expand Down Expand Up @@ -181,7 +181,7 @@ const defaultInputs: Omit<FormInputs, 'Upload' | 'Editor'> = {
)}
onClick={() => setModal(!modal)}
>
<SearchIcon className="h-5 w-5" />
<MagnifyingGlassIcon className="h-5 w-5" />
</button>
<input className={classNames(inputClasses, 'mx-2 flex-1')} value={getDisplayName(state, model)} disabled />
{!field.required && (
Expand Down
6 changes: 3 additions & 3 deletions packages/admin/src/PrismaTable/Table/Filters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useFilter } from './useFilter';
import { useEnum, useModel } from '../useSchema';
import { AdminSchemaField, AdminSchemaModel } from '../../types';
import { TableContext } from '../Context';
import { SearchCircleIcon, TrashIcon } from '@heroicons/react/solid';
import { MagnifyingGlassCircleIcon, TrashIcon } from '@heroicons/react/24/solid';
import { buttonClasses, classNames, inputClasses } from '../../components/css';
import { randString } from './utils';
import { getDate } from '../Form/getDate';
Expand Down Expand Up @@ -161,7 +161,7 @@ const DefaultFilter: React.FC<FilterComponentsProps> = ({ filterValue, setFilter
return (
<div className="flex items-center">
<span>{name}</span>{' '}
{filterValue && filterValue[name] && <SearchCircleIcon className="h-5 w-5 text-green-500" />}
{filterValue && filterValue[name] && <MagnifyingGlassCircleIcon className="h-5 w-5 text-green-500" />}
</div>
);
};
Expand Down Expand Up @@ -260,7 +260,7 @@ const ObjectFilter: React.FC<FilterComponentsProps> = ({ field, filterValue, set
name: (
<div className="flex items-center">
<span className="truncate">{item.title}</span>{' '}
{filter[item.name] && <SearchCircleIcon className="h-5 w-5 text-green-500" />}
{filter[item.name] && <MagnifyingGlassCircleIcon className="h-5 w-5 text-green-500" />}
</div>
),
}));
Expand Down
28 changes: 14 additions & 14 deletions packages/admin/src/PrismaTable/Table/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,20 @@ import { TableContext } from '../Context';
import Spinner from '../../components/Spinner';
import Checkbox from '../../components/Checkbox';
import { ListConnect } from './ListConnect';
import { PencilAltIcon, EyeIcon, TrashIcon, PlusIcon } from '@heroicons/react/outline';
import { PencilSquareIcon, EyeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';

import {
ChevronLeftIcon,
ChevronRightIcon,
ChevronDoubleLeftIcon,
ChevronDoubleRightIcon,
ArrowNarrowDownIcon,
ArrowNarrowUpIcon,
SearchCircleIcon,
} from '@heroicons/react/solid';
MagnifyingGlassCircleIcon,
ArrowDownIcon,
ArrowUpIcon,
} from '@heroicons/react/24/solid';
import { Filter } from './Filters';
import { buttonClasses, classNames } from '../../components/css';
import { Popover, Transition } from '@headlessui/react';
import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react';
import { TableParentRecord } from '../..';

interface TableProps {
Expand Down Expand Up @@ -172,7 +172,7 @@ export const Table: React.FC<TableProps> = ({
className={classNames(buttonClasses, 'bg-transparent text-blue-600 hover:bg-blue-100 hover:bg-opacity-25')}
onClick={() => model && push(`${pagesPath}${modelName}?${actions.update ? 'update' : 'view'}=${id}`)}
>
{actions.update ? <PencilAltIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
{actions.update ? <PencilSquareIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
</button>
),
Delete: ({ id }: { id: any }) => (
Expand Down Expand Up @@ -212,7 +212,7 @@ export const Table: React.FC<TableProps> = ({
</div>
)}
<Popover className="relative w-full">
<Popover.Button
<PopoverButton
className={classNames(
buttonClasses,
'flex items-center rounded-md py-2 px-2 bg-blue-500 text-white active:bg-blue-600 shadow hover:bg-blue-800',
Expand All @@ -222,7 +222,7 @@ export const Table: React.FC<TableProps> = ({
{!!filters.length && (
<span className="rounded-full bg-yellow-400 px-2 rtl:mr-2 ltr:ml-2">{filters.length}</span>
)}
</Popover.Button>
</PopoverButton>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
Expand All @@ -232,9 +232,9 @@ export const Table: React.FC<TableProps> = ({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-10 mt-1">
<PopoverPanel className="absolute z-10 mt-1">
{model && <Filter filters={filters} setAllFilters={setAllFilters} model={model} />}
</Popover.Panel>
</PopoverPanel>
</Transition>
</Popover>
</div>
Expand Down Expand Up @@ -295,16 +295,16 @@ export const Table: React.FC<TableProps> = ({
<span>
{column.isSorted ? (
column.isSortedDesc ? (
<ArrowNarrowDownIcon className="h-5 w-5" />
<ArrowDownIcon className="h-5 w-5" />
) : (
<ArrowNarrowUpIcon className="h-5 w-5" />
<ArrowUpIcon className="h-5 w-5" />
)
) : (
''
)}
</span>
{filters.filter(Boolean).find((item) => item.id === column.id) ? (
<SearchCircleIcon className="h-5 w-5 text-green-500" />
<MagnifyingGlassCircleIcon className="h-5 w-5 text-green-500" />
) : (
''
)}
Expand Down
4 changes: 2 additions & 2 deletions packages/admin/src/Settings/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useRef, useState } from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { ChevronUpIcon, ChevronDownIcon, MenuIcon } from '@heroicons/react/solid';
import { ChevronUpIcon, ChevronDownIcon, Bars3Icon } from '@heroicons/react/24/solid';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';

import UpdateModel from './UpdateModel';
Expand Down Expand Up @@ -136,7 +136,7 @@ export const Settings: React.FC<{
dir === 'rtl' ? 'space-x-reverse' : '',
)}
>
<MenuIcon className="w-5 h-5 text-blue-700" />
<Bars3Icon className="w-5 h-5 text-blue-700" />
<span>{field.title}</span>
</div>
{field.id === openedField ? (
Expand Down
36 changes: 29 additions & 7 deletions packages/admin/src/components/Modal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';

interface ModalProps {
on: boolean;
Expand All @@ -8,13 +9,34 @@ interface ModalProps {
const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({ children, on, toggle }) => {
if (!on) return <></>;
return (
<div
style={{ zIndex: 2000 }}
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none"
>
<div className="absolute inset-0 w-full h-full bg-black bg-opacity-25" onClick={toggle} />
<div className="relative w-full my-6 mx-auto lg:w-10/12 max-w-full">{children}</div>
</div>
<Transition as={Dialog} className="relative z-50" show={on} onClose={toggle}>
<div className="fixed inset-0 overflow-y-auto">
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black/30" />
</TransitionChild>
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="flex min-h-screen items-center justify-center px-4 pb-20 pt-4">
<DialogPanel className="inline-block transform align-middle transition-all w-full sm:w-[700px]">
{children}
</DialogPanel>
</div>
</TransitionChild>
</div>
</Transition>
);
};

Expand Down
38 changes: 17 additions & 21 deletions packages/admin/src/components/Select.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { SelectorIcon, CheckIcon } from '@heroicons/react/solid';
import { Listbox, Transition } from '@headlessui/react';
import { ArrowsUpDownIcon, CheckIcon } from '@heroicons/react/24/solid';
import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react';
import { classNames } from './css';

export interface Option {
Expand Down Expand Up @@ -33,7 +33,7 @@ const Select: React.FC<SelectProps> = ({ options, value, className, onChange, di
<>
<div className="relative">
<span className="inline-block w-full rounded-md shadow-sm">
<Listbox.Button
<ListboxButton
className={classNames(
'cursor-default flex items-center justify-between relative w-full rounded-md border border-gray-300 font-bold text-gray-500 bg-gray-50 px-3 py-2',
dir === 'rtl' ? 'text-right' : 'text-left',
Expand All @@ -43,32 +43,28 @@ const Select: React.FC<SelectProps> = ({ options, value, className, onChange, di
<span className="block truncate">
{!value ? 'Select...' : Array.isArray(value) ? value.map((v) => v.name).join(', ') : value?.name}
</span>
<SelectorIcon className="h-5 w-5 text-gray-400" />
</Listbox.Button>
<ArrowsUpDownIcon className="h-5 w-5 text-gray-400" />
</ListboxButton>
</span>

<Transition
show={open}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
className={classNames(popupFullWidth ? 'w-full' : '', 'z-50 absolute')}
style={{ minWidth: '120px' }}
>
<Listbox.Options
<Transition show={open} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
<ListboxOptions
static
className="mt-1 rounded-md bg-white shadow-lg max-h-60 py-1 text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5"
className={classNames(
popupFullWidth ? 'w-full' : '',
'mt-1 min-w-[120px] z-50 absolute rounded-md bg-white shadow-lg max-h-60 py-1 text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5',
)}
>
{options.map((item) => (
<Listbox.Option key={item.id + item.name} value={item} disabled={item.unavailable}>
{({ active }) => {
<ListboxOption key={item.id + item.name} value={item} disabled={item.unavailable}>
{({ focus }) => {
const selected =
(Array.isArray(value) && !!value.find((v) => v.id === item.id)) ||
(!Array.isArray(value) && value?.id === item.id);
return (
<div
className={classNames(
active
focus
? 'text-white bg-blue-600'
: item.unavailable
? 'bg-gray-300 text-gray-900'
Expand All @@ -82,7 +78,7 @@ const Select: React.FC<SelectProps> = ({ options, value, className, onChange, di
{selected && (
<span
className={classNames(
active ? 'text-white' : 'text-blue-600',
focus ? 'text-white' : 'text-blue-600',
'absolute inset-y-0 left-0 flex items-center pl-1.5',
)}
>
Expand All @@ -92,9 +88,9 @@ const Select: React.FC<SelectProps> = ({ options, value, className, onChange, di
</div>
);
}}
</Listbox.Option>
</ListboxOption>
))}
</Listbox.Options>
</ListboxOptions>
</Transition>
</div>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@heroicons/react": "1.x",
"@material-ui/core": "4.x",
"@material-ui/icons": "4.x",
"@paljs/admin": "7.0.0",
"@paljs/admin": "7.0.1",
"@paljs/nexus": "7.0.0",
"@prisma/client": "3.x",
"apollo-server-micro": "3.x",
Expand Down
2 changes: 1 addition & 1 deletion packages/create/examples/full-stack-nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"@heroicons/react": "1.x",
"@material-ui/core": "4.x",
"@material-ui/icons": "4.x",
"@paljs/admin": "7.0.0",
"@paljs/admin": "7.0.1",
"@paljs/nexus": "7.0.0",
"@prisma/client": "5.x",
"apollo-server-micro": "3.x",
Expand Down
Loading

0 comments on commit eea818e

Please sign in to comment.