-
This collection has no documents yet.
+
This collection has no documents yet.
Create your first{' '}
- {singular(collection)} by
- clicking the button below.
+
+ {singular(collection)}
+ {' '}
+ by clicking the button below.
-
-
+
-
+
+
To learn more about how documents work{' '}
-
+
{collectionName && (
diff --git a/packages/outstatic/src/client/pages/settings.tsx b/packages/outstatic/src/client/pages/settings.tsx
index 7849fc7f..caecb284 100644
--- a/packages/outstatic/src/client/pages/settings.tsx
+++ b/packages/outstatic/src/client/pages/settings.tsx
@@ -1,7 +1,7 @@
import { AdminLayout } from '@/components'
import { MetadataBuilder } from '@/components/MetadataBuilder'
+import { Button } from '@/components/ui/button'
import useOutstatic from '@/utils/hooks/useOutstatic'
-import { clsx } from 'clsx'
import { useState } from 'react'
export default function Settings() {
@@ -17,17 +17,9 @@ export default function Settings() {
Metadata
-
diff --git a/packages/outstatic/src/components/index.ts b/packages/outstatic/src/components/index.ts
index c994f737..e22e4942 100644
--- a/packages/outstatic/src/components/index.ts
+++ b/packages/outstatic/src/components/index.ts
@@ -1,25 +1,23 @@
import AdminHeader from './AdminHeader'
import AdminLayout from './AdminLayout'
-import Input from './Input'
+import DocumentSettings from './DocumentSettings'
+import DocumentTitleInput from './DocumentTitleInput'
+import DocumentsTable from './DocumentsTable'
import MDEImageMenu from './MDEImageMenu'
import MDEMenu from './MDEMenu'
import MDEMenuButton from './MDEMenuButton'
import MDEditor from './MDEditor'
-import DocumentSettings from './DocumentSettings'
-import DocumentTitleInput from './DocumentTitleInput'
-import DocumentsTable from './DocumentsTable'
import Sidebar from './Sidebar'
export {
AdminHeader,
AdminLayout,
- Input,
- MDEditor,
+ DocumentSettings,
+ DocumentTitleInput,
+ DocumentsTable,
MDEImageMenu,
MDEMenu,
MDEMenuButton,
- DocumentSettings,
- DocumentsTable,
- DocumentTitleInput,
+ MDEditor,
Sidebar
}
diff --git a/packages/outstatic/src/components/ui/button.tsx b/packages/outstatic/src/components/ui/button.tsx
new file mode 100644
index 00000000..c56e76dc
--- /dev/null
+++ b/packages/outstatic/src/components/ui/button.tsx
@@ -0,0 +1,61 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/utils/ui'
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default:
+ 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+ destructive:
+ 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+ outline:
+ 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+ secondary:
+ 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
+ select:
+ 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground appearance-none'
+ },
+ size: {
+ default: 'h-9 px-4 py-2',
+ sm: 'h-8 rounded-md px-3 text-xs',
+ lg: 'h-10 rounded-md px-8',
+ icon: 'h-9 w-9'
+ }
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default'
+ }
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes
,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button'
+ return (
+ <>
+
+
+ )
+ }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/packages/outstatic/src/components/ui/card.tsx b/packages/outstatic/src/components/ui/card.tsx
new file mode 100644
index 00000000..efe79f35
--- /dev/null
+++ b/packages/outstatic/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react'
+
+import { cn } from '@/utils/ui'
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/packages/outstatic/src/components/Input/index.tsx b/packages/outstatic/src/components/ui/input.tsx
similarity index 72%
rename from packages/outstatic/src/components/Input/index.tsx
rename to packages/outstatic/src/components/ui/input.tsx
index f57625dd..8c865e44 100644
--- a/packages/outstatic/src/components/Input/index.tsx
+++ b/packages/outstatic/src/components/ui/input.tsx
@@ -17,16 +17,16 @@ const sizes = {
small: {
label: 'mb-1 block text-sm font-medium text-gray-900',
input:
- 'block w-full 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'
+ '"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
},
medium: {
label: 'block mb-2 text-sm font-medium text-gray-900',
input:
- 'block p-2 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-sm outline-none focus:ring-blue-500 focus:border-blue-500'
+ '"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
}
}
-const InputField = ({
+const Input = ({
label,
placeholder = '',
helperText,
@@ -85,4 +85,4 @@ const InputField = ({
)
}
-export default InputField
+export default Input
diff --git a/packages/outstatic/src/components/TextArea/index.tsx b/packages/outstatic/src/components/ui/text-area.tsx
similarity index 79%
rename from packages/outstatic/src/components/TextArea/index.tsx
rename to packages/outstatic/src/components/ui/text-area.tsx
index d984f035..a9130207 100644
--- a/packages/outstatic/src/components/TextArea/index.tsx
+++ b/packages/outstatic/src/components/ui/text-area.tsx
@@ -1,4 +1,4 @@
-import { useFormContext, RegisterOptions } from 'react-hook-form'
+import { RegisterOptions, useFormContext } from 'react-hook-form'
export type TextAreaProps = {
label?: string
@@ -46,7 +46,7 @@ export default function TextArea({
readOnly={readOnly}
placeholder={placeholder}
aria-describedby={id}
- className="block w-full 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"
+ className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
/>
diff --git a/packages/outstatic/src/styles.css b/packages/outstatic/src/styles.css
index 3a24b960..cc181116 100644
--- a/packages/outstatic/src/styles.css
+++ b/packages/outstatic/src/styles.css
@@ -2,6 +2,65 @@
@tailwind components;
@tailwind utilities;
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 240 5.9% 10%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 72.22% 50.59%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 240 5% 64.9%;
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 240 10% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 240 10% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 240 10% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 240 5.9% 10%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 240 3.7% 15.9%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 240 3.7% 15.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 85.7% 97.3%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 240 4.9% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ /* font-feature-settings: "rlig" 1, "calt" 1; */
+ font-synthesis-weight: none;
+ text-rendering: optimizeLegibility;
+ }
+}
+
.react-datepicker__input-container input {
@apply block w-full cursor-pointer rounded border border-gray-300 bg-white text-base shadow-sm md:text-sm;
}
@@ -39,7 +98,7 @@
}
input.react-datepicker-time__input {
- @apply block cursor-pointer appearance-none rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm font-normal leading-loose text-gray-700 focus:border-blue-500 focus:ring-blue-500 outline-none;
+ @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2;
}
.react-datepicker-time__caption {
diff --git a/packages/outstatic/src/utils/ui.ts b/packages/outstatic/src/utils/ui.ts
new file mode 100644
index 00000000..fed2fe91
--- /dev/null
+++ b/packages/outstatic/src/utils/ui.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/packages/outstatic/tailwind.config.js b/packages/outstatic/tailwind.config.js
index 65c6deef..54b10797 100644
--- a/packages/outstatic/tailwind.config.js
+++ b/packages/outstatic/tailwind.config.js
@@ -9,6 +9,47 @@ module.exports = {
],
theme: {
extend: {
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive) /
)',
+ foreground: 'hsl(var(--destructive-foreground) / )'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))'
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))'
+ }
+ },
+ borderRadius: {
+ xl: `calc(var(--radius) + 4px)`,
+ lg: `var(--radius)`,
+ md: `calc(var(--radius) - 2px)`,
+ sm: 'calc(var(--radius) - 4px)'
+ },
animation: {
draw: 'draw 8s cubic-bezier(.34,.06,.13,.92) infinite'
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index beb096c3..24e84699 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,7 +20,7 @@ importers:
lint-staged: 13.3.0
prettier: 2.8.8
prettier-plugin-tailwindcss: 0.1.13_prettier@2.8.8
- turbo: 1.12.5
+ turbo: 1.13.0
apps/dev:
specifiers:
@@ -386,6 +386,8 @@ importers:
'@graphql-codegen/typescript-react-apollo': ^3.2.14
'@hapi/iron': ^7.0.0
'@hookform/resolvers': ^2.9.7
+ '@radix-ui/react-icons': ^1.3.0
+ '@radix-ui/react-slot': ^1.0.2
'@tailwindcss/typography': ^0.5.4
'@testing-library/jest-dom': ^5.16.5
'@testing-library/react': ^13.3.0
@@ -420,6 +422,7 @@ importers:
ai: ^2.2.16
camelcase: ^6.3.0
change-case: ^5.4.2
+ class-variance-authority: ^0.7.0
clsx: ^1.2.1
concurrently: ^7.6.0
cookie: ^0.5.0
@@ -482,6 +485,8 @@ importers:
'@dnd-kit/utilities': 3.2.2_react@18.2.0
'@hapi/iron': 7.0.1
'@hookform/resolvers': 2.9.11_react-hook-form@7.51.1
+ '@radix-ui/react-icons': 1.3.0_react@18.2.0
+ '@radix-ui/react-slot': 1.0.2_plwvpmfwkh5xonezcq2rvxtefq
'@tiptap/core': 2.1.10_@tiptap+pm@2.1.10
'@tiptap/extension-bubble-menu': 2.1.10_mkj3vq75s4scmbo726flpoxg6y
'@tiptap/extension-code-block': 2.1.10_mkj3vq75s4scmbo726flpoxg6y
@@ -499,6 +504,7 @@ importers:
ai: 2.2.37_react@18.2.0
camelcase: 6.3.0
change-case: 5.4.3
+ class-variance-authority: 0.7.0
clsx: 1.2.1
cookie: 0.5.0
cross-fetch: 4.0.0_encoding@0.1.13
@@ -3516,6 +3522,14 @@ packages:
react-dom: 18.2.0_react@18.2.0
dev: false
+ /@radix-ui/react-icons/1.3.0_react@18.2.0:
+ resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+ peerDependencies:
+ react: ^16.x || ^17.x || ^18.x
+ dependencies:
+ react: 18.2.0
+ dev: false
+
/@radix-ui/react-id/1.0.1_plwvpmfwkh5xonezcq2rvxtefq:
resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
peerDependencies:
@@ -13156,64 +13170,64 @@ packages:
yargs: 17.7.2
dev: true
- /turbo-darwin-64/1.12.5:
- resolution: {integrity: sha512-0GZ8reftwNQgIQLHkHjHEXTc/Z1NJm+YjsrBP+qhM/7yIZ3TEy9gJhuogDt2U0xIWwFgisTyzbtU7xNaQydtoA==}
+ /turbo-darwin-64/1.13.0:
+ resolution: {integrity: sha512-ctHeJXtQgBcgxnCXwrJTGiq57HtwF7zWz5NTuSv//5yeU01BtQIt62ArKfjudOhRefWJbX3Z5srn88XTb9hfww==}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
- /turbo-darwin-arm64/1.12.5:
- resolution: {integrity: sha512-8WpOLNNzvH6kohQOjihD+gaWL+ZFNfjvBwhOF0rjEzvW+YR3Pa7KjhulrjWyeN2yMFqAPubTbZIGOz1EVXLuQA==}
+ /turbo-darwin-arm64/1.13.0:
+ resolution: {integrity: sha512-/Q9/pNFkF9w83tNxwMpgapwLYdQ12p8mpty2YQRoUiS9ClWkcqe136jR0mtuMqzlNlpREOFZaoyIthjt6Sdo0g==}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
- /turbo-linux-64/1.12.5:
- resolution: {integrity: sha512-INit73+bNUpwqGZCxgXCR3I+cQsdkQ3/LkfkgSOibkpg+oGqxJRzeXw3sp990d7SCoE8QOcs3iw+PtiFX/LDAA==}
+ /turbo-linux-64/1.13.0:
+ resolution: {integrity: sha512-hgbT7o020BGV4L7Sd8hhFTd5zVKPKxbsr0dPfel/9NkdTmptz2aGZ0Vb2MAa18SY3XaCQpDxmdYuOzvvRpo5ZA==}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
- /turbo-linux-arm64/1.12.5:
- resolution: {integrity: sha512-6lkRBvxtI/GQdGtaAec9LvVQUoRw6nXFp0kM+Eu+5PbZqq7yn6cMkgDJLI08zdeui36yXhone8XGI8pHg8bpUQ==}
+ /turbo-linux-arm64/1.13.0:
+ resolution: {integrity: sha512-WK01i2wDZARrV+HEs495A3hNeGMwQR5suYk7G+ceqqW7b+dOTlQdvUjnI3sg7wAnZPgjafFs/hoBaZdJjVa/nw==}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
- /turbo-windows-64/1.12.5:
- resolution: {integrity: sha512-gQYbOhZg5Ww0bQ/bC0w/4W6yQRwBumUUnkB+QPo15VznwxZe2a7bo6JM+9Xy9dKLa/kn+p7zTqme4OEp6M3/Yg==}
+ /turbo-windows-64/1.13.0:
+ resolution: {integrity: sha512-hJgSZJZwlWHNwLEthaqJqJWGm4NqF5X/I7vE0sPE4i/jeDl8f0n1hcOkgJkJiNXVxhj+qy/9+4dzbPLKT9imaQ==}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
- /turbo-windows-arm64/1.12.5:
- resolution: {integrity: sha512-auvhZ9FrhnvQ4mgBlY9O68MT4dIfprYGvd2uPICba/mHUZZvVy5SGgbHJ0KbMwaJfnnFoPgLJO6M+3N2gDprKw==}
+ /turbo-windows-arm64/1.13.0:
+ resolution: {integrity: sha512-L/ErxYoXeq8tmjU/AIGicC9VyBN1zdYw8JlM4yPmMI0pJdY8E4GaYK1IiIazqq7M72lmQhU/WW7fV9FqEktwrw==}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
- /turbo/1.12.5:
- resolution: {integrity: sha512-FATU5EnhrYG8RvQJYFJnDd18DpccDjyvd53hggw9T9JEg9BhWtIEoeaKtBjYbpXwOVrJQMDdXcIB4f2nD3QPPg==}
+ /turbo/1.13.0:
+ resolution: {integrity: sha512-r02GtNmkOPcQvUzVE6lg474QVLyU02r3yh3lUGqrFHf5h5ZEjgDGWILsAUqplVqjri1Y/oOkTssks4CObTAaiw==}
hasBin: true
optionalDependencies:
- turbo-darwin-64: 1.12.5
- turbo-darwin-arm64: 1.12.5
- turbo-linux-64: 1.12.5
- turbo-linux-arm64: 1.12.5
- turbo-windows-64: 1.12.5
- turbo-windows-arm64: 1.12.5
+ turbo-darwin-64: 1.13.0
+ turbo-darwin-arm64: 1.13.0
+ turbo-linux-64: 1.13.0
+ turbo-linux-arm64: 1.13.0
+ turbo-windows-64: 1.13.0
+ turbo-windows-arm64: 1.13.0
dev: true
/type-check/0.4.0: