From 8b33597257f888e15e2eafb6a87c4ceb8427fe09 Mon Sep 17 00:00:00 2001 From: Copple <10214025+kiwicopple@users.noreply.github.com> Date: Mon, 18 Apr 2022 21:54:55 +0200 Subject: [PATCH] A simple, working demo --- DEVELOPERS.md | 10 + apps/docs/next.config.js | 4 +- apps/docs/package.json | 8 +- apps/docs/pages/index.tsx | 10 - apps/docs/postcss.config.js | 1 + apps/docs/src/components/Sidebar.tsx | 30 + apps/docs/src/pages/_app.tsx | 9 + apps/docs/src/pages/index.tsx | 13 + apps/docs/src/styles/tailwind.css | 3 + apps/docs/tailwind.config.js | 1 + apps/web/{ => src}/pages/index.tsx | 0 package-lock.json | 2244 +++++++++++++++++++++++- package.json | 5 +- packages/config/postcss.config.js | 6 + packages/config/tailwind.config.js | 7 + packages/ui/index.tsx | 9 +- packages/ui/layouts/SidebarLayout.tsx | 196 +++ packages/ui/layouts/SidebarLayout2.tsx | 238 +++ packages/ui/package.json | 6 +- packages/ui/postcss.config.js | 1 + packages/ui/tailwind.config.js | 1 + 21 files changed, 2714 insertions(+), 88 deletions(-) delete mode 100644 apps/docs/pages/index.tsx create mode 100644 apps/docs/postcss.config.js create mode 100644 apps/docs/src/components/Sidebar.tsx create mode 100644 apps/docs/src/pages/_app.tsx create mode 100644 apps/docs/src/pages/index.tsx create mode 100644 apps/docs/src/styles/tailwind.css create mode 100644 apps/docs/tailwind.config.js rename apps/web/{ => src}/pages/index.tsx (100%) create mode 100644 packages/config/postcss.config.js create mode 100644 packages/config/tailwind.config.js create mode 100644 packages/ui/layouts/SidebarLayout.tsx create mode 100644 packages/ui/layouts/SidebarLayout2.tsx create mode 100644 packages/ui/postcss.config.js create mode 100644 packages/ui/tailwind.config.js diff --git a/DEVELOPERS.md b/DEVELOPERS.md index 3f86b0ffef7..209432ae8f8 100644 --- a/DEVELOPERS.md +++ b/DEVELOPERS.md @@ -11,6 +11,7 @@ - [Supabase Studio Development Server](#supabase-studio-development-server) - [Finally](#finally) - [Community Channels](#community-channels) +- [Monorepo](#monorepo) ## Development Setup @@ -165,3 +166,12 @@ Did you have an issue, like a merge conflict, or don't know how to open a pull r ## Community Channels Stuck somewhere? Have any questions? please join the [Discord Community Server](https://discord.supabase.com/) or the [Github Discussions](https://github.com/supabase/supabase/discussions). We are here to help! + + +## Monorepo + +This is a monorepo, using Turborepo. You must be using NPM 7 or higher. + +- Install a package: `npm install -w=`. eg: + - `npm install @supabase/ui -w ui`: installs into `./packages/ui` + - `npm install @supabase/ui -w docs`: installs into `./packages/docs` \ No newline at end of file diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js index 53e0a424874..834bc1820e9 100644 --- a/apps/docs/next.config.js +++ b/apps/docs/next.config.js @@ -1,5 +1,5 @@ -const withTM = require("next-transpile-modules")(["ui"]); +const withTM = require('next-transpile-modules')(['ui']) module.exports = withTM({ reactStrictMode: true, -}); +}) diff --git a/apps/docs/package.json b/apps/docs/package.json index e1f00bd00f4..33989c8ff84 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -9,18 +9,18 @@ "lint": "next lint" }, "dependencies": { - "next": "12.0.8", + "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2", "ui": "*" }, "devDependencies": { + "@types/node": "^17.0.12", + "@types/react": "17.0.39", "config": "*", - "eslint": "7.32.0", + "eslint": "8.9.0", "next-transpile-modules": "9.0.0", "tsconfig": "*", - "@types/node": "^17.0.12", - "@types/react": "17.0.37", "typescript": "^4.5.3" } } diff --git a/apps/docs/pages/index.tsx b/apps/docs/pages/index.tsx deleted file mode 100644 index 0d1dabc123c..00000000000 --- a/apps/docs/pages/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Button } from "ui"; - -export default function Docs() { - return ( -
-

Docs

-
- ); -} diff --git a/apps/docs/postcss.config.js b/apps/docs/postcss.config.js new file mode 100644 index 00000000000..29c447cb54b --- /dev/null +++ b/apps/docs/postcss.config.js @@ -0,0 +1 @@ +module.exports = require('config/postcss.config') diff --git a/apps/docs/src/components/Sidebar.tsx b/apps/docs/src/components/Sidebar.tsx new file mode 100644 index 00000000000..a8d7ce26a6f --- /dev/null +++ b/apps/docs/src/components/Sidebar.tsx @@ -0,0 +1,30 @@ +const navigation = [ + { name: 'Guides', href: '#', icon: null, current: true }, + { name: 'Reference', href: '#', icon: null, current: false }, + { name: 'Examples', href: '#', icon: null, current: false }, + { name: 'API', href: '#', icon: null, current: false }, + { name: 'Forum', href: '#', icon: null, current: false }, +] + +function classNames(...classes: string[]) { + return classes.filter(Boolean).join(' ') +} + +export default function Sidebar() { + return ( + + ) +} diff --git a/apps/docs/src/pages/_app.tsx b/apps/docs/src/pages/_app.tsx new file mode 100644 index 00000000000..3f1a17de101 --- /dev/null +++ b/apps/docs/src/pages/_app.tsx @@ -0,0 +1,9 @@ +import React from 'react' +import Docs from '.' +import '../styles/tailwind.css' + +const Index = () => { + return +} + +export default Index diff --git a/apps/docs/src/pages/index.tsx b/apps/docs/src/pages/index.tsx new file mode 100644 index 00000000000..e9aeb501c96 --- /dev/null +++ b/apps/docs/src/pages/index.tsx @@ -0,0 +1,13 @@ +import { Button, Layouts } from 'ui' +import Sidebar from '../components/Sidebar' + +export default function Docs() { + return ( + }> + <> +

Docs

+ + + +
+ Workflow +
+
+ + {sidebarContent} +
+ + + + + + + {/* Static sidebar for desktop */} +
+ {/* Sidebar component, swap this element with another sidebar if you like */} +
+
+ Workflow +
+
+ {sidebarContent} +
+
+
+
+
+ +
+
+
+ +
+
+ 🔎 +
+ +
+
+
+
+ + + {/* Profile dropdown */} + +
+ + Open user menu + + +
+ + + {userNavigation.map((item) => ( + + {({ active }) => ( + + {item.name} + + )} + + ))} + + + +
+
+
+ +
+
+
+

Dashboard

+
+
+ {/* Replace with your content */} + {children} + {/* /End replace */} +
+
+
+
+ + + ) +} diff --git a/packages/ui/layouts/SidebarLayout2.tsx b/packages/ui/layouts/SidebarLayout2.tsx new file mode 100644 index 00000000000..0160a34a2bd --- /dev/null +++ b/packages/ui/layouts/SidebarLayout2.tsx @@ -0,0 +1,238 @@ + +import { Fragment, useState } from 'react' +import { Dialog, Menu, Transition } from '@headlessui/react' + +const navigation = [ + { name: 'Dashboard', href: '#', icon: null, current: true }, + { name: 'Team', href: '#', icon: null, current: false }, + { name: 'Projects', href: '#', icon: null, current: false }, + { name: 'Calendar', href: '#', icon: null, current: false }, + { name: 'Documents', href: '#', icon: null, current: false }, + { name: 'Reports', href: '#', icon: null, current: false }, +] +const userNavigation = [ + { name: 'Your Profile', href: '#' }, + { name: 'Settings', href: '#' }, + { name: 'Sign out', href: '#' }, +] + +function classNames(...classes: string[]) { + return classes.filter(Boolean).join(' ') +} + +export default function SidebarLayout({children}: {children: React.ReactNode}) { + const [sidebarOpen, setSidebarOpen] = useState(false) + + return ( + <> +
+ + + + + + +
+ +
+ +
+ +
+ Workflow +
+
+ +
+
+ + + + + + {/* Static sidebar for desktop */} +
+ {/* Sidebar component, swap this element with another sidebar if you like */} +
+
+ Workflow +
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+ Icon +
+ +
+
+
+
+ + + {/* Profile dropdown */} + +
+ + Open user menu + + +
+ + + {userNavigation.map((item) => ( + + {({ active }) => ( + + {item.name} + + )} + + ))} + + + +
+
+
+ +
+
+
+

Dashboard

+
+
+ {/* Replace with your content */} + {children} + {/* /End replace */} +
+
+
+
+
+ + ) +} diff --git a/packages/ui/package.json b/packages/ui/package.json index ac547a1db25..38fd64eaa5a 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -4,11 +4,15 @@ "main": "./index.tsx", "types": "./index.tsx", "license": "MIT", + "dependencies": { + "@headlessui/react": "^1.5.0", + "@supabase/ui": "^0.37.0-alpha.50" + }, "devDependencies": { "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", - "tsconfig": "*", "config": "*", + "tsconfig": "*", "typescript": "^4.5.3" } } diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js new file mode 100644 index 00000000000..29c447cb54b --- /dev/null +++ b/packages/ui/postcss.config.js @@ -0,0 +1 @@ +module.exports = require('config/postcss.config') diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js new file mode 100644 index 00000000000..9c2af498997 --- /dev/null +++ b/packages/ui/tailwind.config.js @@ -0,0 +1 @@ +module.exports = require('config/tailwind.config')