Skip to content

Commit

Permalink
Feat/add some shadcn (#209)
Browse files Browse the repository at this point in the history
  • Loading branch information
@avitorio
avitorio authored Mar 22, 2024
1 parent 703af34 commit 8f1bb44
Show file tree
Hide file tree
Showing 24 changed files with 565 additions and 303 deletions.
5 changes: 5 additions & 0 deletions .changeset/rotten-needles-lick.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"outstatic": patch
---

Feat/add some shadcn
3 changes: 3 additions & 0 deletions packages/outstatic/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@
"@dnd-kit/utilities": "^3.2.2",
"@hapi/iron": "^7.0.0",
"@hookform/resolvers": "^2.9.7",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-slot": "^1.0.2",
"@tiptap/core": "2.1.10",
"@tiptap/extension-bubble-menu": "2.1.10",
"@tiptap/extension-code-block": "2.1.10",
Expand All @@ -50,6 +52,7 @@
"ai": "^2.2.16",
"camelcase": "^6.3.0",
"change-case": "^5.4.2",
"class-variance-authority": "^0.7.0",
"clsx": "^1.2.1",
"cookie": "^0.5.0",
"cross-fetch": "^4.0.0",
Expand Down
189 changes: 98 additions & 91 deletions ...c/client/pages/add-custom-field/index.tsx → ...tic/src/client/pages/add-custom-field.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { AdminLayout, Input } from '@/components'
import { AdminLayout } from '@/components'
import Alert from '@/components/Alert'
import Modal from '@/components/Modal'
import TagInput from '@/components/TagInput'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import Input from '@/components/ui/input'
import { useCreateCommitMutation } from '@/graphql/generated'
import { CustomField, CustomFields, customFieldTypes } from '@/types'
import { createCommitApi } from '@/utils/createCommitApi'
Expand Down Expand Up @@ -204,17 +207,14 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
<span className="capitalize">{collection}</span> Fields
</h1>
{Object.keys(customFields).length > 0 ? (
<button
type="button"
<Button
onClick={() => {
methods.reset()
setShowAddModal(true)
}}
>
<div className="cursor-pointer rounded-lg border px-5 py-2.5 text-sm font-medium focus:outline-none focus:ring-4 border-gray-600 bg-gray-800 text-white hover:border-gray-600 hover:bg-gray-700 focus:ring-gray-700 no-underline">
Add Custom Field
</div>
</button>
Add Custom Field
</Button>
) : null}
</div>
{!loading ? (
Expand All @@ -236,18 +236,19 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
</div>
<div className="relative">
<div className="mb-20 max-w-2xl p-8 px-4 md:p-8 text-black bg-white rounded-lg border border-gray-200 shadow-md prose prose-base">
<p>Here you can add Custom Fields to your collections.</p>
<h3>Add Custom Fields to your collections.</h3>
<p>
Create your first Custom Field by clicking the button
below.
</p>

<div
className="inline-block rounded-lg border px-5 py-2.5 text-sm font-medium focus:outline-none focus:ring-4 border-gray-600 bg-gray-800 text-white hover:border-gray-600 hover:bg-gray-700 focus:ring-gray-700 no-underline hover:cursor-pointer"
onClick={() => setShowAddModal(true)}
<Button
onClick={() => {
setShowAddModal(true)
}}
>
Add Custom Field
</div>
</Button>
<p>
To learn more about how Custom Fields work checkout{' '}
<a
Expand All @@ -268,53 +269,57 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
{customFields &&
Object.entries(customFields).map(([name, field]) => {
return (
<div
<Card
key={name}
className="relative flex p-6 justify-between items-center max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-slate-100"
// className="relative flex p-6 justify-between items-center max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-slate-100"
>
<button
type="button"
onClick={() => {
methods.reset()
setSelectedField(name)
setShowAddModal(true)
}}
className="text-left"
>
<span className="block text-xl cursor-pointer font-bold tracking-tight text-gray-900 capitalize hover:text-blue-500 mb-2">
{field.title}
{/* This span allows for full card click */}
<span className="absolute top-0 bottom-0 left-0 right-16"></span>
</span>
<span className="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">
{field.fieldType}
</span>
{field.required ? (
<span className="bg-red-100 text-red-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">
required
<CardContent className="relative flex p-6 justify-between items-center max-w-sm">
<button
type="button"
onClick={() => {
methods.reset()
setSelectedField(name)
setShowAddModal(true)
}}
className="text-left"
>
<span className="block text-xl cursor-pointer font-bold tracking-tight text-gray-900 capitalize hover:text-blue-500 mb-2">
{field.title}
{/* This span allows for full card click */}
<span className="absolute top-0 bottom-0 left-0 right-16"></span>
</span>
) : null}
</button>
<button
className="z-10 inline-block text-gray-500 hover:bg-white focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg text-sm p-1.5"
type="button"
onClick={() => {
setShowDeleteModal(true)
setSelectedField(name)
}}
>
<span className="sr-only">Delete content</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
<span className="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">
{field.fieldType}
</span>
{field.required ? (
<span className="bg-red-100 text-red-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">
required
</span>
) : null}
</button>
<Button
variant="ghost"
size="icon"
className="z-10"
type="button"
onClick={() => {
setShowDeleteModal(true)
setSelectedField(name)
}}
>
<path fill="none" d="M0 0h24v24H0z" />
<path d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z" />
</svg>
</button>
</div>
<span className="sr-only">Delete content</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z" />
<path d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z" />
</svg>
</Button>
</CardContent>
</Card>
)
})}
</div>
Expand Down Expand Up @@ -391,29 +396,31 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
>
Field type
</label>
<select
{...methods.register('fieldType')}
name="fieldType"
id="fieldType"
className="block cursor-pointer appearance-none rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 outline-none focus:border-blue-500 focus:ring-blue-500"
defaultValue={
selectedField
? customFields[selectedField].fieldType
: 'String'
}
>
{customFieldTypes.map((type) => {
return (
<option
key={type}
value={type}
disabled={!!selectedField}
>
{type}
</option>
)
})}
</select>
<Button asChild variant="select">
<select
{...methods.register('fieldType')}
name="fieldType"
id="fieldType"
className="block cursor-pointer appearance-none rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 outline-none focus:border-blue-500 focus:ring-blue-500"
defaultValue={
selectedField
? customFields[selectedField].fieldType
: 'String'
}
>
{customFieldTypes.map((type) => {
return (
<option
key={type}
value={type}
disabled={!!selectedField}
>
{type}
</option>
)
})}
</select>
</Button>
</div>
</div>

Expand Down Expand Up @@ -490,10 +497,10 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
</code>
</div>
<div className="flex items-center space-x-2 rounded-b border-t p-6">
<button
<Button
type="submit"
disabled={adding}
className="flex rounded-lg bg-red-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none"
// className="flex rounded-lg bg-red-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none"
>
{adding ? (
<>
Expand Down Expand Up @@ -524,18 +531,19 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
) : (
'Add'
)}
</button>
<button
</Button>
<Button
type="button"
className="rounded-lg border border-gray-200 px-5 py-2.5 text-sm font-medium focus:z-10 focus:outline-none focus:ring-4 order-gray-600 bg-gray-800 text-white hover:border-gray-600 hover:bg-gray-700 focus:ring-gray-700"
variant="outline"
// className="rounded-lg border border-gray-200 px-5 py-2.5 text-sm font-medium focus:z-10 focus:outline-none focus:ring-4 order-gray-600 bg-gray-800 text-white hover:border-gray-600 hover:bg-gray-700 focus:ring-gray-700"
onClick={() => {
setHasChanges(false)
setSelectedField('')
setShowAddModal(false)
}}
>
Cancel
</button>
</Button>
</div>
</form>
</Modal>
Expand All @@ -559,10 +567,9 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
</div>

<div className="flex items-center space-x-2 rounded-b border-t p-6">
<button
type="button"
<Button
variant="destructive"
disabled={deleting}
className="flex rounded-lg bg-red-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none"
onClick={() => {
setDeleting(true)
deleteField(selectedField)
Expand Down Expand Up @@ -595,17 +602,17 @@ export default function AddCustomField({ collection }: AddCustomFieldProps) {
) : (
'Delete'
)}
</button>
<button
</Button>
<Button
variant="outline"
type="button"
className="rounded-lg border border-gray-200 px-5 py-2.5 text-sm font-medium focus:z-10 focus:outline-none focus:ring-4 order-gray-600 bg-gray-800 text-white hover:border-gray-600 hover:bg-gray-700 focus:ring-gray-700"
onClick={() => {
setShowDeleteModal(false)
setSelectedField('')
}}
>
Cancel
</button>
</Button>
</div>
</Modal>
)}
Expand Down
Loading

0 comments on commit 8f1bb44

Please sign in to comment.