Skip to content

Commit

Permalink
feat: install shadcn/ui (#23)
Browse files Browse the repository at this point in the history
* feat: install shadcn/ui

* chore: format the code

* chore: add paths and uninstall unused modules

* chore: format

* chore: update login and signup to shadui component

* chore: tables for links

* chore: move into datagrids folder

* chore: parse to zod

* chore: update backend imports

* chore: update names

* chore: frontend show links

* chore: links

* chore: format

* chore: links
  • Loading branch information
Michael-Liendo authored Aug 16, 2024
1 parent 4897cb4 commit 59bcf5b
Show file tree
Hide file tree
Showing 61 changed files with 4,266 additions and 533 deletions.
17 changes: 17 additions & 0 deletions client/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
4 changes: 2 additions & 2 deletions client/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
Expand Down
28 changes: 23 additions & 5 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,37 @@
},
"dependencies": {
"@linx/shared": "^0.0.1",
"classnames": "^2.5.1",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@tanstack/react-table": "^8.20.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^1.0.0",
"lucide-react": "^0.427.0",
"path": "^0.12.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^6.24.1",
"react-router-dom": "^6.24.1"
"react-router-dom": "^6.24.1",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^22.3.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.39",
"tailwindcss": "^3.4.4",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",
"typescript": "^5.2.2",
"vite": "^5.3.1"
}
Expand Down
8 changes: 7 additions & 1 deletion client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import { Routes } from './Routes';
import { AuthProvider } from './context/AuthContext';
import { LinksProvider } from './context/LinxContext';
import { ThemeProvider } from './context/ThemeContext';

function App() {
return (
<>
<AuthProvider>
<Routes />
<LinksProvider>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<Routes />
</ThemeProvider>
</LinksProvider>
</AuthProvider>
</>
);
Expand Down
3 changes: 1 addition & 2 deletions client/src/Routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import useAuth from './hooks/Auth';
import HomeApp from './pages/(app)/Home';
import Login from './pages/(auth)/Login';
import Signup from './pages/(auth)/Signup';
import Home from './pages/home';

export enum PublicRoutesEnum {
Home = '/',
Expand Down Expand Up @@ -56,6 +55,6 @@ const PublicRoutes = [
<Route
key={PublicRoutesEnum.Home}
path={PublicRoutesEnum.Home}
Component={Home}
element={<>hello</>}
/>,
];
29 changes: 0 additions & 29 deletions client/src/components/Button.tsx

This file was deleted.

61 changes: 0 additions & 61 deletions client/src/components/TextField.tsx

This file was deleted.

124 changes: 124 additions & 0 deletions client/src/components/data-table.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import {
type ColumnDef,
type ColumnFiltersState,
type SortingState,
type VisibilityState,
flexRender,
getCoreRowModel,
getFacetedRowModel,
getFacetedUniqueValues,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table';
import * as React from 'react';

import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from './ui/table';

import { DataTablePagination } from './datagrids/links/links-table-pagination';
import { DataTableToolbar } from './datagrids/links/links-table-toolbar';

interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
}

export function DataTable<TData, TValue>({
columns,
data,
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[],
);
const [sorting, setSorting] = React.useState<SortingState>([]);

const table = useReactTable({
data,
columns,
state: {
sorting,
columnVisibility,
rowSelection,
columnFilters,
},
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
});

return (
<div className="space-y-4">
<DataTableToolbar table={table} />
<div className="rounded-md border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<DataTablePagination table={table} />
</div>
);
}
Loading

0 comments on commit 59bcf5b

Please sign in to comment.