From 506a070c68fb326b5a69abbe297fcb1a30b89b08 Mon Sep 17 00:00:00 2001 From: Ziyad <137479354+ZiyadBoshima@users.noreply.github.com> Date: Sat, 20 Apr 2024 18:23:30 +0200 Subject: [PATCH] feat: implement a quick add button (#223) Co-authored-by: Andre Vitorio --- .changeset/perfect-berries-battle.md | 5 + packages/outstatic/package.json | 1 + .../src/components/Sidebar/index.tsx | 42 +++- .../outstatic/src/components/ui/tooltip.tsx | 30 +++ pnpm-lock.yaml | 196 +++++++++++++++--- 5 files changed, 243 insertions(+), 31 deletions(-) create mode 100644 .changeset/perfect-berries-battle.md create mode 100644 packages/outstatic/src/components/ui/tooltip.tsx diff --git a/.changeset/perfect-berries-battle.md b/.changeset/perfect-berries-battle.md new file mode 100644 index 00000000..00124fca --- /dev/null +++ b/.changeset/perfect-berries-battle.md @@ -0,0 +1,5 @@ +--- +'outstatic': patch +--- + +Add new post button to sidebar diff --git a/packages/outstatic/package.json b/packages/outstatic/package.json index 3727b294..122c4f57 100644 --- a/packages/outstatic/package.json +++ b/packages/outstatic/package.json @@ -35,6 +35,7 @@ "@hookform/resolvers": "^2.9.7", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-tooltip": "^1.0.7", "@tiptap/core": "2.1.10", "@tiptap/extension-bubble-menu": "2.1.10", "@tiptap/extension-code-block": "2.1.10", diff --git a/packages/outstatic/src/components/Sidebar/index.tsx b/packages/outstatic/src/components/Sidebar/index.tsx index b3cb793a..6e9c119f 100644 --- a/packages/outstatic/src/components/Sidebar/index.tsx +++ b/packages/outstatic/src/components/Sidebar/index.tsx @@ -3,7 +3,15 @@ import { OUTSTATIC_VERSION } from '@/utils/constants' import generateUniqueId from '@/utils/generateUniqueId' import useOutstatic from '@/utils/hooks/useOutstatic' import cookies from 'js-cookie' +import { Plus } from 'lucide-react' import { useEffect, useState } from 'react' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger +} from '@/components/ui/tooltip' +import { singular } from 'pluralize' type SidebarProps = { isOpen: boolean @@ -89,8 +97,11 @@ const Sidebar = ({ isOpen = false }: SidebarProps) => { <> {collections.map((collection) => (
  • - -
    +
    + { > {collection} -
    - + + + + +
    + + + +
    +     + +

    + Create new{' '} + + {singular(collection)} + +

    +     +     +     +
    • ))} diff --git a/packages/outstatic/src/components/ui/tooltip.tsx b/packages/outstatic/src/components/ui/tooltip.tsx new file mode 100644 index 00000000..85d6ae82 --- /dev/null +++ b/packages/outstatic/src/components/ui/tooltip.tsx @@ -0,0 +1,30 @@ +'use client' + +import * as React from 'react' +import * as TooltipPrimitive from '@radix-ui/react-tooltip' + +import { cn } from '@/utils/ui' + +const TooltipProvider = TooltipPrimitive.Provider + +const Tooltip = TooltipPrimitive.Root + +const TooltipTrigger = TooltipPrimitive.Trigger + +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)) +TooltipContent.displayName = TooltipPrimitive.Content.displayName + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 88460f70..0e24a5b6 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.13.0 + turbo: 1.13.2 apps/dev: specifiers: @@ -372,7 +372,7 @@ importers: dependencies: eslint-config-next: 13.4.4 eslint-config-prettier: 8.10.0 - eslint-config-turbo: 1.13.0 + eslint-config-turbo: 1.13.2 eslint-plugin-react: 7.32.2 packages/outstatic: @@ -392,6 +392,7 @@ importers: '@hookform/resolvers': ^2.9.7 '@radix-ui/react-icons': ^1.3.0 '@radix-ui/react-slot': ^1.0.2 + '@radix-ui/react-tooltip': ^1.0.7 '@tailwindcss/typography': ^0.5.4 '@testing-library/jest-dom': ^5.16.5 '@testing-library/react': ^13.3.0 @@ -496,6 +497,7 @@ importers: '@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_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-tooltip': 1.0.7_v3omkd3j3j4hvjwcwz3tjxjnne '@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 @@ -3333,6 +3335,27 @@ packages: '@babel/runtime': 7.24.1 dev: false + /@radix-ui/react-arrow/1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne: + resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-primitive': 1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne + '@types/react': 18.2.69 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-compose-refs/1.0.1_4aprenwzvd25d3zno6rr4bqbqq: resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: @@ -3480,6 +3503,36 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-popper/1.1.3_v3omkd3j3j4hvjwcwz3tjxjnne: + resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@floating-ui/react-dom': 2.0.8_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-arrow': 1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne + '@radix-ui/react-compose-refs': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-context': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-primitive': 1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne + '@radix-ui/react-use-callback-ref': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-use-layout-effect': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-use-rect': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-use-size': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/rect': 1.0.1 + '@types/react': 18.2.69 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-portal/1.0.4_v3omkd3j3j4hvjwcwz3tjxjnne: resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==} peerDependencies: @@ -3559,6 +3612,38 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-tooltip/1.0.7_v3omkd3j3j4hvjwcwz3tjxjnne: + resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-context': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-dismissable-layer': 1.0.5_v3omkd3j3j4hvjwcwz3tjxjnne + '@radix-ui/react-id': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-popper': 1.1.3_v3omkd3j3j4hvjwcwz3tjxjnne + '@radix-ui/react-portal': 1.0.4_v3omkd3j3j4hvjwcwz3tjxjnne + '@radix-ui/react-presence': 1.0.1_v3omkd3j3j4hvjwcwz3tjxjnne + '@radix-ui/react-primitive': 1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne + '@radix-ui/react-slot': 1.0.2_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-use-controllable-state': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@radix-ui/react-visually-hidden': 1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne + '@types/react': 18.2.69 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-use-callback-ref/1.0.1_4aprenwzvd25d3zno6rr4bqbqq: resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: @@ -3617,6 +3702,63 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-use-rect/1.0.1_4aprenwzvd25d3zno6rr4bqbqq: + resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/rect': 1.0.1 + '@types/react': 18.2.69 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-size/1.0.1_4aprenwzvd25d3zno6rr4bqbqq: + resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-use-layout-effect': 1.0.1_4aprenwzvd25d3zno6rr4bqbqq + '@types/react': 18.2.69 + react: 18.2.0 + dev: false + + /@radix-ui/react-visually-hidden/1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne: + resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-primitive': 1.0.3_v3omkd3j3j4hvjwcwz3tjxjnne + '@types/react': 18.2.69 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + + /@radix-ui/rect/1.0.1: + resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} + dependencies: + '@babel/runtime': 7.24.1 + dev: false + /@remirror/core-constants/2.0.2: resolution: {integrity: sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ==} dev: false @@ -6775,12 +6917,12 @@ packages: eslint: '>=7.0.0' dev: false - /eslint-config-turbo/1.13.0: - resolution: {integrity: sha512-xV13WrEjAJLeo6yqR1YEv5R5WPwNMyw8f4FlK2C4zWMr7e8ZiRg81jajltabEOZdeVboHIQ6gGn+FnSmgdVSSQ==} + /eslint-config-turbo/1.13.2: + resolution: {integrity: sha512-TzvsMwNJx/P4JYw79iFqbyQApnyT050gW7dBxnNeNVl3pVMnT2rwaFo9Q3Hc49Tp5NANxEwYN9RStF50P/IwGA==} peerDependencies: eslint: '>6.6.0' dependencies: - eslint-plugin-turbo: 1.13.0 + eslint-plugin-turbo: 1.13.2 dev: false /eslint-import-resolver-node/0.3.9: @@ -7074,8 +7216,8 @@ packages: semver: 6.3.1 string.prototype.matchall: 4.0.11 - /eslint-plugin-turbo/1.13.0: - resolution: {integrity: sha512-y9YRXMSOc43SijAFFkDnrFpstV2k/w6Qmbr5mO/w7tUGzDWkHc87btLa0e/L2PJxod5bzNwsmzeyj8c/AsMMCQ==} + /eslint-plugin-turbo/1.13.2: + resolution: {integrity: sha512-QNaihF0hTRjfOBd1SLHrftm8V3pOU35CNS/C0/Z6qY1xxdL1PSv4IctEIldSMX7/A1jOPYwMPO7wYwPXgjgp/g==} peerDependencies: eslint: '>6.6.0' dependencies: @@ -13304,64 +13446,64 @@ packages: yargs: 17.7.2 dev: true - /turbo-darwin-64/1.13.0: - resolution: {integrity: sha512-ctHeJXtQgBcgxnCXwrJTGiq57HtwF7zWz5NTuSv//5yeU01BtQIt62ArKfjudOhRefWJbX3Z5srn88XTb9hfww==} + /turbo-darwin-64/1.13.2: + resolution: {integrity: sha512-CCSuD8CfmtncpohCuIgq7eAzUas0IwSbHfI8/Q3vKObTdXyN8vAo01gwqXjDGpzG9bTEVedD0GmLbD23dR0MLA==} cpu: [x64] os: [darwin] requiresBuild: true dev: true optional: true - /turbo-darwin-arm64/1.13.0: - resolution: {integrity: sha512-/Q9/pNFkF9w83tNxwMpgapwLYdQ12p8mpty2YQRoUiS9ClWkcqe136jR0mtuMqzlNlpREOFZaoyIthjt6Sdo0g==} + /turbo-darwin-arm64/1.13.2: + resolution: {integrity: sha512-0HySm06/D2N91rJJ89FbiI/AodmY8B3WDSFTVEpu2+8spUw7hOJ8okWOT0e5iGlyayUP9gr31eOeL3VFZkpfCw==} cpu: [arm64] os: [darwin] requiresBuild: true dev: true optional: true - /turbo-linux-64/1.13.0: - resolution: {integrity: sha512-hgbT7o020BGV4L7Sd8hhFTd5zVKPKxbsr0dPfel/9NkdTmptz2aGZ0Vb2MAa18SY3XaCQpDxmdYuOzvvRpo5ZA==} + /turbo-linux-64/1.13.2: + resolution: {integrity: sha512-7HnibgbqZrjn4lcfIouzlPu8ZHSBtURG4c7Bedu7WJUDeZo+RE1crlrQm8wuwO54S0siYqUqo7GNHxu4IXbioQ==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /turbo-linux-arm64/1.13.0: - resolution: {integrity: sha512-WK01i2wDZARrV+HEs495A3hNeGMwQR5suYk7G+ceqqW7b+dOTlQdvUjnI3sg7wAnZPgjafFs/hoBaZdJjVa/nw==} + /turbo-linux-arm64/1.13.2: + resolution: {integrity: sha512-sUq4dbpk6SNKg/Hkwn256Vj2AEYSQdG96repio894h5/LEfauIK2QYiC/xxAeW3WBMc6BngmvNyURIg7ltrePg==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /turbo-windows-64/1.13.0: - resolution: {integrity: sha512-hJgSZJZwlWHNwLEthaqJqJWGm4NqF5X/I7vE0sPE4i/jeDl8f0n1hcOkgJkJiNXVxhj+qy/9+4dzbPLKT9imaQ==} + /turbo-windows-64/1.13.2: + resolution: {integrity: sha512-DqzhcrciWq3dpzllJR2VVIyOhSlXYCo4mNEWl98DJ3FZ08PEzcI3ceudlH6F0t/nIcfSItK1bDP39cs7YoZHEA==} cpu: [x64] os: [win32] requiresBuild: true dev: true optional: true - /turbo-windows-arm64/1.13.0: - resolution: {integrity: sha512-L/ErxYoXeq8tmjU/AIGicC9VyBN1zdYw8JlM4yPmMI0pJdY8E4GaYK1IiIazqq7M72lmQhU/WW7fV9FqEktwrw==} + /turbo-windows-arm64/1.13.2: + resolution: {integrity: sha512-WnPMrwfCXxK69CdDfS1/j2DlzcKxSmycgDAqV0XCYpK/812KB0KlvsVAt5PjEbZGXkY88pCJ1BLZHAjF5FcbqA==} cpu: [arm64] os: [win32] requiresBuild: true dev: true optional: true - /turbo/1.13.0: - resolution: {integrity: sha512-r02GtNmkOPcQvUzVE6lg474QVLyU02r3yh3lUGqrFHf5h5ZEjgDGWILsAUqplVqjri1Y/oOkTssks4CObTAaiw==} + /turbo/1.13.2: + resolution: {integrity: sha512-rX/d9f4MgRT3yK6cERPAkfavIxbpBZowDQpgvkYwGMGDQ0Nvw1nc0NVjruE76GrzXQqoxR1UpnmEP54vBARFHQ==} hasBin: true optionalDependencies: - 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 + turbo-darwin-64: 1.13.2 + turbo-darwin-arm64: 1.13.2 + turbo-linux-64: 1.13.2 + turbo-linux-arm64: 1.13.2 + turbo-windows-64: 1.13.2 + turbo-windows-arm64: 1.13.2 dev: true /type-check/0.4.0: