selfhosted
/
jackson
mirror of https://github.com/boxyhq/jackson.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Automatic class sorting with prettier plugin for tailwind (#105) 

* Install prettier plugin

* Apply sorting

* removed headwind

Co-authored-by: Deepak Prabhakara <deepak@boxyhq.com>
This commit is contained in:
Aswin V 2022-02-23 23:07:24 +05:30 committed by GitHub
parent 74c8797048
commit 370834cf4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 61 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/extensions.json vendored
View File

@ -5,7 +5,6 @@
"esbenp.prettier-vscode", // prettier plugin
"dbaeumer.vscode-eslint", // eslint plugin
"bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
"heybourn.headwind", // automatically sort tailwind classes in predictable order, kinda like "prettier for tailwind",
"ban.spellright", // Spell check for docs
"fabianlauer.vs-code-xml-format" // xml formatter
]

24
components/Layout.tsx
View File

@ -14,7 +14,7 @@ const navigation = [
{
path: '/admin/saml/config',
text: <span className='ml-4'>SAML Configurations</span>,
icon: <ShieldCheckIcon className='w-5 h-5' aria-hidden />,
icon: <ShieldCheckIcon className='h-5 w-5' aria-hidden />,
},
];
@ -67,10 +67,10 @@ function Layout({ children }: { children: ReactNode }) {
</Head>
<header
role='banner'
className='fixed left-0 right-0 z-10 p-5 bg-white border-b md:px-12 dark:bg-gray-900 border-gray-900/10 dark:border-gray-300/10'>
className='fixed left-0 right-0 z-10 border-b border-gray-900/10 bg-white p-5 dark:border-gray-300/10 dark:bg-gray-900 md:px-12'>
<div className='flex items-center justify-between'>
<Link href='/'>
<a title='Go to dashboard' className='flex items-center ml-10 font-bold leading-10 md:ml-0'>
<a title='Go to dashboard' className='ml-10 flex items-center font-bold leading-10 md:ml-0'>
<Image src={Logo} alt='BoxyHQ' layout='fixed' width={36} height={36} />
<h1 className='ml-2 text-secondary hover:text-primary dark:text-white'>Jackson</h1>
</a>
@ -78,7 +78,7 @@ function Layout({ children }: { children: ReactNode }) {
<div className='relative'>
<button
type='button'
className='flex items-center justify-center w-8 h-8 uppercase rounded-full bg-secondary text-cyan-50'
className='flex h-8 w-8 items-center justify-center rounded-full bg-secondary uppercase text-cyan-50'
aria-label='user settings'
aria-expanded={isOpen}
onClick={() => setIsOpen(!isOpen)}>
@ -86,14 +86,14 @@ function Layout({ children }: { children: ReactNode }) {
</button>
{isOpen && (
<ul
className='absolute right-0 z-50 py-1 overflow-hidden text-sm font-semibold bg-white rounded-lg shadow-lg top-full ring-1 ring-slate-900/10 w-36 text-slate-700 dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300'
className='dark:highlight-white/5 absolute right-0 top-full z-50 w-36 overflow-hidden rounded-lg bg-white py-1 text-sm font-semibold text-slate-700 shadow-lg ring-1 ring-slate-900/10 dark:bg-slate-800 dark:text-slate-300 dark:ring-0'
ref={userDropDownRef}>
<li>
<button
type='button'
className='flex items-center justify-center w-full h-8 px-2 py-1 cursor-pointer'
className='flex h-8 w-full cursor-pointer items-center justify-center px-2 py-1'
onClick={() => signOut()}>
<LogoutIcon className='w-5 h-5' aria-hidden />
<LogoutIcon className='h-5 w-5' aria-hidden />
Log out
</button>
</li>
@ -109,17 +109,17 @@ function Layout({ children }: { children: ReactNode }) {
)}
<nav role='navigation'>
<button
className={`w-10 h-10 inline-flex items-center justify-center absolute top-5 md:hidden`}
className={`absolute top-5 inline-flex h-10 w-10 items-center justify-center md:hidden`}
aria-expanded={isSideNavOpen}
aria-controls='menu'
onClick={() => setIsSideNavOpen((curState) => !curState)}>
<span className='sr-only'>Menu</span>
<MenuIcon aria-hidden='true' className='w-6 h-6 text-black dark:text-slate-50'></MenuIcon>
<MenuIcon aria-hidden='true' className='h-6 w-6 text-black dark:text-slate-50'></MenuIcon>
</button>
<ul
className={`fixed top-0 bottom-0 left-0 w-60 p-6 border-r border-gray-900/10 dark:border-gray-300/10 transition-transform ${
className={`fixed top-0 bottom-0 left-0 w-60 border-r border-gray-900/10 p-6 transition-transform dark:border-gray-300/10 ${
isSideNavOpen ? 'translate-x-0' : '-translate-x-full'
} md:translate-x-0 md:top-20 md:translate-y-[2px] bg-white dark:bg-gray-900`}
} bg-white dark:bg-gray-900 md:top-20 md:translate-x-0 md:translate-y-[2px]`}
id='menu'
ref={ref}>
{navigation.map(({ path, text, icon }, index) => (
@ -137,7 +137,7 @@ function Layout({ children }: { children: ReactNode }) {
</header>
<main
role='main'
className='relative top-[81px] h-[calc(100%_-_81px)] md:left-60 md:w-[calc(100%_-_theme(space.60))] p-6 overflow-auto'>
className='relative top-[81px] h-[calc(100%_-_81px)] overflow-auto p-6 md:left-60 md:w-[calc(100%_-_theme(space.60))]'>
{children}
</main>
{/* <footer role="contentinfo">

28
components/saml/AddEdit.tsx
View File

@ -189,7 +189,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
{/* Or use router.back() */}
<Link href='/admin/saml/config'>
<a className='link-primary'>
<ArrowLeftIcon aria-hidden className='w-4 h-4' />
<ArrowLeftIcon aria-hidden className='h-4 w-4' />
<span className='ml-2'>Back to Configurations</span>
</a>
</Link>
@ -198,7 +198,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
{samlConfig?.name || samlConfig?.product || 'New SAML Configuration'}
</h2>
<form onSubmit={saveSAMLConfiguration}>
<div className='bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 p-6 rounded-xl md:w-3/4 min-w-[28rem] md:max-w-lg'>
<div className='min-w-[28rem] rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-800 md:w-3/4 md:max-w-lg'>
{fieldCatalog
.filter(({ attributes: { showOnlyInEditView } }) => (isEditView ? true : !showOnlyInEditView))
.map(
@ -229,11 +229,11 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
<div className='mb-6 ' key={key}>
<label
htmlFor={key}
className='block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300'>
className='mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300'>
{_label}
</label>
{type === 'pre' ? (
<pre className='block w-full p-2 overflow-auto text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'>
<pre className='block w-full overflow-auto rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500'>
{value}
</pre>
) : type === 'textarea' ? (
@ -245,7 +245,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
readOnly={readOnly}
maxLength={maxLength}
onChange={handleChange}
className={`block p-2 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${
className={`block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 ${
isArray ? 'whitespace-pre' : ''
}`}
rows={rows}
@ -260,7 +260,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
readOnly={readOnly}
maxLength={maxLength}
onChange={handleChange}
className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
className='block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500'
/>
)}
</div>
@ -278,14 +278,14 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
} transition-opacity motion-reduce:transition-none`}>
{status === 'SUCCESS' && (
<span className='inline-flex items-center text-primary'>
<CheckCircleIcon aria-hidden className='w-5 h-5 mr-1'></CheckCircleIcon>
<CheckCircleIcon aria-hidden className='mr-1 h-5 w-5'></CheckCircleIcon>
Saved
</span>
)}
{/* TODO: also display error message once we standardise the response format */}
{status === 'ERROR' && (
<span className='inline-flex items-center text-red-900'>
<ExclamationCircleIcon aria-hidden className='w-5 h-5 mr-1'></ExclamationCircleIcon>
<ExclamationCircleIcon aria-hidden className='mr-1 h-5 w-5'></ExclamationCircleIcon>
ERROR
</span>
)}
@ -293,14 +293,14 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
</div>
</div>
{samlConfig?.clientID && samlConfig.clientSecret && (
<section className='flex items-center p-6 mt-10 text-red-900 bg-red-100 rounded'>
<section className='mt-10 flex items-center rounded bg-red-100 p-6 text-red-900'>
<div className='flex-1'>
<h6 className='mb-1 font-medium'>Delete this configuration</h6>
<p className='font-light'>All your apps using this configuration will stop working.</p>
</div>
<button
type='button'
className='inline-block px-4 py-2 text-sm font-bold leading-6 text-white bg-red-700 rounded hover:bg-red-800'
className='inline-block rounded bg-red-700 px-4 py-2 text-sm font-bold leading-6 text-white hover:bg-red-800'
onClick={toggleDelConfirm}
data-modal-toggle='popup-modal'>
Delete
@ -315,18 +315,18 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
visible={delModalVisible}
onCancel={toggleDelConfirm}
customFooter={
<div className='inline-flex ml-auto'>
<div className='ml-auto inline-flex'>
<button
type='button'
onClick={toggleDelConfirm}
className='inline-block px-4 py-2 text-sm font-bold leading-6 bg-gray-200 border-2 rounded text-secondary/90 hover:bg-gray-300'>
className='inline-block rounded border-2 bg-gray-200 px-4 py-2 text-sm font-bold leading-6 text-secondary/90 hover:bg-gray-300'>
Cancel
</button>
<button
type='button'
disabled={userNameEntry !== samlConfig?.product}
onClick={deleteConfiguration}
className='ml-1.5 bg-red-700 hover:bg-red-800 disabled:bg-slate-400 text-white text-sm font-bold py-2 px-4 rounded leading-6 inline-block'>
className='ml-1.5 inline-block rounded bg-red-700 py-2 px-4 text-sm font-bold leading-6 text-white hover:bg-red-800 disabled:bg-slate-400'>
Delete
</button>
</div>
@ -341,7 +341,7 @@ const AddEdit = ({ samlConfig }: AddEditProps) => {
<input
id='nameOfProd'
required
className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:white dark:border-gray-600 dark:placeholder-gray-400 d dark:focus:ring-blue-500 dark:focus:border-blue-500'
className='dark:white d block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500'
value={userNameEntry}
onChange={({ target }) => {
setUserNameEntry(target.value);

20
package-lock.json generated
View File

@ -44,6 +44,7 @@
"lint-staged": "12.3.4",
"postcss": "8.4.6",
"prettier": "2.5.1",
"prettier-plugin-tailwindcss": "0.1.7",
"swagger-jsdoc": "6.1.0",
"tailwindcss": "3.0.22",
"ts-node": "10.5.0",
@ -7251,6 +7252,18 @@
"node": ">=10.13.0"
}
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.7.tgz",
"integrity": "sha512-tmBr45hCLuit2Cz9Pwow0/Jl1bGivYGsfcF29O+3sKcE++ybjz9dfie565S3ZsvAeV8uYer9SRMBWDsHPly2Lg==",
"dev": true,
"engines": {
"node": ">=12.17.0"
},
"peerDependencies": {
"prettier": ">=2.2.0"
}
},
"node_modules/pretty-format": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@ -16202,6 +16215,13 @@
"version": "2.5.1",
"dev": true
},
"prettier-plugin-tailwindcss": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.7.tgz",
"integrity": "sha512-tmBr45hCLuit2Cz9Pwow0/Jl1bGivYGsfcF29O+3sKcE++ybjz9dfie565S3ZsvAeV8uYer9SRMBWDsHPly2Lg==",
"dev": true,
"requires": {}
},
"pretty-format": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",

3
package.json
View File

@ -76,6 +76,7 @@
"lint-staged": "12.3.4",
"postcss": "8.4.6",
"prettier": "2.5.1",
"prettier-plugin-tailwindcss": "0.1.7",
"swagger-jsdoc": "6.1.0",
"tailwindcss": "3.0.22",
"ts-node": "10.5.0",
@ -85,4 +86,4 @@
"engines": {
"node": ">=14.18.1"
}
}
}

2
pages/_document.tsx
View File

@ -5,7 +5,7 @@ class MyDocument extends Document {
return (
<Html lang='en' className='h-full'>
<Head />
<body className='h-full antialiased bg-white theme-default dark:bg-gray-900 selection:bg-primary/20 selection:text-secondary'>
<body className='theme-default h-full bg-white antialiased selection:bg-primary/20 selection:text-secondary dark:bg-gray-900'>
<Main />
<NextScript />
</body>

2
pages/admin/saml/config/edit/[id].tsx
View File

@ -13,7 +13,7 @@ const EditSAMLConfiguration: NextPage = () => {
if (error) {
return (
<div className='px-4 py-3 text-red-700 bg-red-100 border border-red-400 rounded'>
<div className='rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700'>
{error.info ? JSON.stringify(error.info) : error.status}
</div>
);

22
pages/admin/saml/config/index.tsx
View File

@ -9,7 +9,7 @@ const SAMLConfigurations: NextPage = () => {
if (error) {
return (
<div className='px-4 py-3 text-red-700 bg-red-100 border border-red-400 rounded'>
<div className='rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700'>
{error.info ? JSON.stringify(error.info) : error.status}
</div>
);
@ -22,7 +22,7 @@ const SAMLConfigurations: NextPage = () => {
if (!Array.isArray(data)) {
return (
<div>
<div className='px-4 py-3 text-red-700 bg-red-100 border border-red-400 rounded'>Nothing to show</div>
<div className='rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700'>Nothing to show</div>
</div>
);
}
@ -30,10 +30,10 @@ const SAMLConfigurations: NextPage = () => {
return (
<div>
<div className='flex items-center justify-between'>
<h2 className='font-bold md:text-2xl text-primary dark:text-white'>SAML Configurations</h2>
<h2 className='font-bold text-primary dark:text-white md:text-2xl'>SAML Configurations</h2>
<Link href={'/admin/saml/config/new'}>
<a className='btn-primary'>
<span className='inline-block mr-1 md:mr-2' aria-hidden>
<span className='mr-1 inline-block md:mr-2' aria-hidden>
+
</span>
Add Configuration
@ -42,16 +42,16 @@ const SAMLConfigurations: NextPage = () => {
</div>
<div className='mt-6 overflow-auto rounded-lg shadow-md'>
<table className='min-w-full'>
<thead className='shadow-md bg-gray-50 dark:bg-gray-700 sm:rounded-lg'>
<thead className='bg-gray-50 shadow-md dark:bg-gray-700 sm:rounded-lg'>
<tr>
<th
scope='col'
className='px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400'>
className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:text-gray-400'>
Tenant
</th>
<th
scope='col'
className='px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400'>
className='px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:text-gray-400'>
Product
</th>
<th></th>
@ -59,17 +59,17 @@ const SAMLConfigurations: NextPage = () => {
</thead>
<tbody>
{data.map((provider) => (
<tr key={provider.clientID} className='bg-white border-b dark:bg-gray-800 dark:border-gray-700'>
<td className='px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white'>
<tr key={provider.clientID} className='border-b bg-white dark:border-gray-700 dark:bg-gray-800'>
<td className='whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900 dark:text-white'>
{provider.tenant}
</td>
<td className='px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400'>
<td className='whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-400'>
{provider.product}
</td>
<td>
<Link href={`/admin/saml/config/edit/${provider.clientID}`}>
<a className='link-primary'>
<PencilAltIcon className='w-5 h-5 text-secondary' />
<PencilAltIcon className='h-5 w-5 text-secondary' />
</a>
</Link>
</td>