From 26ef0c76ac52b48b024e2498877fc0399fc89d91 Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 6 Nov 2024 22:21:58 -0800 Subject: [PATCH] a little nicer looking, but i still don't really understand where to set colors... I stole a bunch of things from [this](https://github.com/danielagg/shadcn-data-table-resize-columns) repository I found online, and that seems to have helped. I'm still having trouble with colors and tailwind and shadcn... The buttons also only misalign on firefox, not chrome... --- mast-react-vite/components.json | 4 +- mast-react-vite/src/App.tsx | 39 ++++- .../src/components/ui/checkbox.tsx | 27 ++++ .../src/components/ui/data-table.tsx | 19 ++- mast-react-vite/src/components/ui/input.tsx | 25 ++++ mast-react-vite/src/components/ui/table.tsx | 46 +++--- mast-react-vite/src/index.css | 135 +++++++++--------- mast-react-vite/tailwind.config.js | 126 +++++++++------- 8 files changed, 267 insertions(+), 154 deletions(-) create mode 100644 mast-react-vite/src/components/ui/checkbox.tsx create mode 100644 mast-react-vite/src/components/ui/input.tsx diff --git a/mast-react-vite/components.json b/mast-react-vite/components.json index 0b03196..d296ddc 100644 --- a/mast-react-vite/components.json +++ b/mast-react-vite/components.json @@ -6,7 +6,7 @@ "tailwind": { "config": "tailwind.config.js", "css": "src/index.css", - "baseColor": "zinc", + "baseColor": "slate", "cssVariables": true, "prefix": "" }, @@ -17,4 +17,4 @@ "lib": "@/lib", "hooks": "@/hooks" } -} \ No newline at end of file +} diff --git a/mast-react-vite/src/App.tsx b/mast-react-vite/src/App.tsx index 9e4f898..1ef7c54 100644 --- a/mast-react-vite/src/App.tsx +++ b/mast-react-vite/src/App.tsx @@ -1,6 +1,5 @@ import { useState } from 'react' import { useCachedState, useQuery } from "@vlcn.io/react"; -import './App.css' import { ColumnDef, flexRender, @@ -9,13 +8,13 @@ import { } from "@tanstack/react-table" import { DataTable } from "@/components/ui/data-table" import * as addParser from '../../parser/add_parser.js'; +import { Checkbox } from "@/components/ui/checkbox" +import { Input } from "@/components/ui/input" function Marshall(parsed) { let project = ""; const tags = []; - console.log(parsed); for (const attr of parsed.attributes) { - console.log(attr); switch (attr.type) { case 'project': project = attr.value; @@ -37,6 +36,31 @@ type Todo = { } export const columns: ColumnDef[] = [ + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-[2px]" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-[2px]" + /> + ), + enableSorting: false, + enableHiding: false, + size: 20, + }, { accessorKey: "description", header: "Description", @@ -47,11 +71,10 @@ export const columns: ColumnDef[] = [ }, { accessorKey: "tags", - header: "tags", + header: "Tags", cell: ({ row }) => { - console.log("Tags Parsing: " + row.getValue("tags")) const formatted = JSON.parse(row.getValue("tags")) - return
{formatted.join(", ")}
+ return
{formatted.join(", ")}
} }, ] @@ -76,11 +99,13 @@ function App({ ctx }) { return ( <> - + setNewText(e.target.value)} /> + ) } diff --git a/mast-react-vite/src/components/ui/checkbox.tsx b/mast-react-vite/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..8d02b28 --- /dev/null +++ b/mast-react-vite/src/components/ui/checkbox.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { cn } from "@/lib/utils" +import { CheckIcon } from "@radix-ui/react-icons" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/mast-react-vite/src/components/ui/data-table.tsx b/mast-react-vite/src/components/ui/data-table.tsx index f791a1f..d7103c5 100644 --- a/mast-react-vite/src/components/ui/data-table.tsx +++ b/mast-react-vite/src/components/ui/data-table.tsx @@ -1,7 +1,10 @@ "use client" +import { useState } from "react" + import { ColumnDef, + ColumnSizingState, flexRender, getCoreRowModel, useReactTable, @@ -25,21 +28,33 @@ export function DataTable({ columns, data, }: DataTableProps) { + const [colSizing, setColSizing] = useState({}); const table = useReactTable({ data, columns, + enableColumnResizing: true, + columnResizeMode: "onChange", getCoreRowModel: getCoreRowModel(), + onColumnSizingChange: setColSizing, + state: { + columnSizing: colSizing, + }, }) return ( -
+
{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( - + {header.isPlaceholder ? null : flexRender( diff --git a/mast-react-vite/src/components/ui/input.tsx b/mast-react-vite/src/components/ui/input.tsx new file mode 100644 index 0000000..8c73d8b --- /dev/null +++ b/mast-react-vite/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/mast-react-vite/src/components/ui/table.tsx b/mast-react-vite/src/components/ui/table.tsx index c0df655..3eb913a 100644 --- a/mast-react-vite/src/components/ui/table.tsx +++ b/mast-react-vite/src/components/ui/table.tsx @@ -1,6 +1,6 @@ -import * as React from "react" +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const Table = React.forwardRef< HTMLTableElement, @@ -13,16 +13,16 @@ const Table = React.forwardRef< {...props} /> -)) -Table.displayName = "Table" +)); +Table.displayName = "Table"; const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -)) -TableHeader.displayName = "TableHeader" +)); +TableHeader.displayName = "TableHeader"; const TableBody = React.forwardRef< HTMLTableSectionElement, @@ -33,8 +33,8 @@ const TableBody = React.forwardRef< className={cn("[&_tr:last-child]:border-0", className)} {...props} /> -)) -TableBody.displayName = "TableBody" +)); +TableBody.displayName = "TableBody"; const TableFooter = React.forwardRef< HTMLTableSectionElement, @@ -48,8 +48,8 @@ const TableFooter = React.forwardRef< )} {...props} /> -)) -TableFooter.displayName = "TableFooter" +)); +TableFooter.displayName = "TableFooter"; const TableRow = React.forwardRef< HTMLTableRowElement, @@ -63,8 +63,8 @@ const TableRow = React.forwardRef< )} {...props} /> -)) -TableRow.displayName = "TableRow" +)); +TableRow.displayName = "TableRow"; const TableHead = React.forwardRef< HTMLTableCellElement, @@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
[role=checkbox]]:translate-y-[2px]", + "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className )} {...props} /> -)) -TableHead.displayName = "TableHead" +)); +TableHead.displayName = "TableHead"; const TableCell = React.forwardRef< HTMLTableCellElement, @@ -87,14 +87,11 @@ const TableCell = React.forwardRef< >(({ className, ...props }, ref) => ( [role=checkbox]]:translate-y-[2px]", - className - )} + className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} /> -)) -TableCell.displayName = "TableCell" +)); +TableCell.displayName = "TableCell"; const TableCaption = React.forwardRef< HTMLTableCaptionElement, @@ -105,8 +102,8 @@ const TableCaption = React.forwardRef< className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} /> -)) -TableCaption.displayName = "TableCaption" +)); +TableCaption.displayName = "TableCaption"; export { Table, @@ -117,4 +114,5 @@ export { TableRow, TableCell, TableCaption, -} +}; + diff --git a/mast-react-vite/src/index.css b/mast-react-vite/src/index.css index e7d4bb2..1ccdc44 100644 --- a/mast-react-vite/src/index.css +++ b/mast-react-vite/src/index.css @@ -1,72 +1,77 @@ @tailwind base; @tailwind components; @tailwind utilities; - -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { + +@layer base { :root { - color: #213547; - background-color: #ffffff; + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; } } + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + diff --git a/mast-react-vite/tailwind.config.js b/mast-react-vite/tailwind.config.js index f2a9bd1..8f05307 100644 --- a/mast-react-vite/tailwind.config.js +++ b/mast-react-vite/tailwind.config.js @@ -1,60 +1,78 @@ /** @type {import('tailwindcss').Config} */ -export default { - darkMode: ["class"], - content: [ - "./index.html", - "./src/**/.{js,ts,jsx,tsx}", +module.exports = { + darkMode: ["class"], + content: [ + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', ], + prefix: "", theme: { - extend: { - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - }, - colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' - }, - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))' - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' - }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' - } - } - } + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + 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: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, }, plugins: [require("tailwindcss-animate")], } +