supabase / supabase-ui-web Goto Github PK

View Code? Open in Web Editor NEW

73.0 20.0 25.0 1.91 MB

Home Page: https://ui.supabase.com

License: Apache License 2.0

JavaScript 36.83% CSS 4.00% TypeScript 41.19% MDX 17.98%

supabase-ui-web's Introduction

Supabase UI Website

Supabase UI is being deprecated. We are moving the components to the main mono repo at github.com/supabase/supabase.

This website will probably be removed/taken down in preference for a storybook documentation site.

The auth component has been moved to it's own repo and package. github.com/supabase-community/auth-ui. You can also read the docs for auth ui here.

An open source UI component library inspired by Tailwind and AntDesign.

Vision

We have compiled repetitive UI patterns into components that we use across the Supabase suite of apps and examples. This library gives us a consistent brand, and accelerates our development/prototyping.

We know there is already a large supply of UI libraries available online. This library is primarily to serve Supabase, but we hope that it can also be beneficial for apps that are built with Supabase.

For example, we provide full components (like Auth widgets), which you can simply drop into your website.

Over time, this library will expand to include a broader range of components and customization. By that stage we hope it will be beneficial even to developers outside of the Supabase ecosystem.

Key Features

Tailwind friendly

We have compiled a group of aesthetically pleasing components with design inspiration from existing UI libraries and Tailwind UI examples.

We try to allow Tailwind CSS classes be used for animations and we strongly encourage you to use a Tailwind config with Supabase UI.

Open source

Supabase UI is open source, and MIT licensed (fully permissive).

Supabase UI uses libraries which are also permissively licensed, if they are lightweight, modular, and active. This is better for the ecosystem, rather than doing everything ourselves. These libraries include:

Tailwind CSS
Feather Icons
Libraries which handle design patterns like context menus, toast messages and interactive tables.

supabase-ui-web's People

Contributors

Stargazers

Watchers

supabase-ui-web's Issues

Sidepanel Code Block bugs

Bug report

Describe the bug

As I open a sidepanel demo, the code blocks on the page do not dim with the rest of the website, similar to issue #42, except the code blocks do NOT dim at all

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to The sidepanel demonstration page
Scroll down to any of the side panel demonstrations
Press the 'Open sidepanel' button
As the sidepanel opens, the code blocks do not dim with the rest of the website

Expected behavior

A clear and concise description of what you expected to happen.

Anything on the website behind the sidepanel fades

Screenshots

If applicable, add screenshots to help explain your problem.

System information

OS: Windows 11
Browser (if applies) Brave

Additional context

Add any other context about the problem here.

Warning in development

Bug report

Describe the bug

When we execute the project in development will get some warnings.

To Reproduce

Clone repository
npm install
npm run dev
See warnings

Expected behavior

We should not have warnings

Screenshots

System information

OS: macOS
Browser (if applies): n/a
Version of supabase-js: n/a
Version of Node.js: v14.17.0

The Auth demo is sending out magic link emails

Bug report

Describe the bug

The auth demo is actually sending out magic link emails. I'm not sure if that's intentional. If it is, feel free to close this bug report. 😃

To Reproduce

Go to https://ui.supabase.io/components/auth#getting-started
Click on "Send magic link"
enter email and submit

Expected behavior

I think there should be some kind of error instead of actually sending out an email

chore: Icon docs are missing from official docs

Chore

Describe the chore

Official docs are missing Icon components available as well as how to use examples.

Dropdown

Improve documentation

Link

https://ui.supabase.io/components/dropdown

Describe the problem

The dropdown 'Bottom Center's menu is hidden behind the snippet code on documentation

Describe the improvement

I am not sure what is the problem because I have seen your snippet syntax layout has z-index: 0 on it.

Additional context

`/components/*` pages are broken

Bug report

When navigating to a component page, like https://ui.supabase.com/components/icon, there is an error and the page is not loaded

Describe the bug

The following errors were found on the console :

framework.6fff953eb0f638171baa.js:1 Error: Minified React error supabase/ui#130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at $i (framework.6fff953eb0f638171baa.js:1:119995)
    at framework.6fff953eb0f638171baa.js:1:68185
    at Io (framework.6fff953eb0f638171baa.js:1:79830)
    at Qu (framework.6fff953eb0f638171baa.js:1:126020)
    at Pi (framework.6fff953eb0f638171baa.js:1:111371)
    at xi (framework.6fff953eb0f638171baa.js:1:111299)
    at _i (framework.6fff953eb0f638171baa.js:1:111162)
    at vi (framework.6fff953eb0f638171baa.js:1:108128)
    at framework.6fff953eb0f638171baa.js:1:57507
    at t.unstable_runWithPriority (framework.6fff953eb0f638171baa.js:1:3875)

Error: Expected `string` for value, got `undefined`
    at n (%5Bslug%5D-fd042bad38272f37fcbf.js:1:10080)
    at Object.s [as highlight] (%5Bslug%5D-fd042bad38272f37fcbf.js:1:1109431)
    at D.astGenerator (%5Bslug%5D-fd042bad38272f37fcbf.js:1:1427540)
    at bc (%5Bslug%5D-fd042bad38272f37fcbf.js:1:1427660)
    at ro (framework.6fff953eb0f638171baa.js:1:71739)
    at Qu (framework.6fff953eb0f638171baa.js:1:124197)
    at Pi (framework.6fff953eb0f638171baa.js:1:111371)
    at xi (framework.6fff953eb0f638171baa.js:1:111299)
    at _i (framework.6fff953eb0f638171baa.js:1:111162)
    at vi (framework.6fff953eb0f638171baa.js:1:108128)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to 'https://ui.supabase.com/components/auth'

Expected behavior

The page should load and display contentn

Screenshots

System information

OS: macos
Browser (if applies) Chrome

Additional context

Drop down menu shows behind code block

Bug report

Describe the bug

Drop down menu shows behind code block.

To Reproduce

1.https://ui.supabase.io/components/dropdown
2. Scroll to Placement
3. Click on Bottom Left / Bottom Center / Bottom Right button.

Expected behavior

It should show drop downs in front of code block.

Screenshots

System information

OS: Windows 10
Browser: Edge

Replace favicon

Improve documentation

Link

All the app

Describe the problem

We have default icon for NextJS APP

Describe the improvement

Replace the icon to be consistence with ecosystem of Supabase

Auth Route Error

Bug report

Describe the bug

When clicking on 'Auth' under 'Supabase Connected' the page does not load and the following error shows:

'An unexpected error has occurred.'

To Reproduce

Go to https://ui.supabase.io/
Click on 'Auth' under 'Supabase Connected' on the left hand side menu

Expected behaviour

The Auth guide/example page should load.

Screenshots

System information

OS: macOS
Browser: Google Chrome

List of supabase icons

Feature request

Is your feature request related to a problem? Please describe.

A list of all of the supabase icons. Also, be able to search for the icon that you are looking for.

How to change the OAuth2 Scope for discord authentication in Supabase UI

Discussed in supabase/supabase#3547

^{Originally posted by Krish-Nerkar October 15, 2021}
I'm using Supabase UI to authenticate with discord, and i was playing around with the nextjs-auth example, i couldn't figure out how to change the authentication scopes for discord OAuth2

Supabase UI - auth modal - signUp with gmail doesn't work properly - it throws no error when I register with existing email

Bug report

I confirm this is a bug with Supabase, not with my own application.
I confirm I have searched the Docs, GitHub [Discussions]
https://github.com/orgs/supabase/discussions/18380 - similar but there another issue

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

https://github.com/nicitaacom/19_spotify-clone/tree/issue-supabase-signUp-with-gmail

Git clone https://github.com/nicitaacom/19_spotify-clone/tree/issue-supabase-signUp-with-gmail
Paste env

NEXT_PUBLIC_SUPABASE_URL='https://eqhntdpwtnhqzcnpxegh.supabase.co'
NEXT_PUBLIC_SUPABASE_ANON_KEY='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVxaG50ZHB3dG5ocXpjbnB4ZWdoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTY2OTcwNjksImV4cCI6MjAxMjI3MzA2OX0.9DVxtenbS-JZixJOJUAhAeQYRlP2FdnmYV-Ymhi7y3Q'

pnpm i - pnpm dev
Click Sign up in top right corner
signUp with existing email address - [email protected]
You got success message instead of error message

Expected behavior

I wait email with verification link
I got no email on my gmail

I wait error message
I got success message

On temp mail like [email protected] - it works fine

System information

    "@supabase/auth-helpers-nextjs": "^0.8.3",
    "@supabase/auth-helpers-react": "^0.4.2",
    "@supabase/auth-ui-react": "^0.4.6",
    "@supabase/auth-ui-shared": "^0.1.8",
     "next": "14.0.1-canary.2",

Additional context

Ask about additional context if needed

chore: official docs favicon uses vercel logo instead of supabase logo

Chore

Describe the chore

Need to update favicon src

Mobile navigation

Bug report

Describe the bug

It is not a bug but a miss behavior, the page does not go to the top when i change route as you can

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to any component page from mobile
Click on drawer
Scroll down to any other component
See error

Expected behavior

The drawer should move from the page and we should see the page from the beginning

Screenshots

System information

OS: ios
Browser: safari
Version of supabase-js: supabase/ui v1.0
Version of Node.js: not applicable

Additional context

Add any other context about the problem here.

Assign Me: Dark Mode Docs / Implementation!

Feature request

Is your feature request related to a problem? Please describe.

I see on the docs that dark mode setup is coming soon - is there an ETA on this? I don't want to overstep anybody.

Describe the solution you'd like

You can assign me this task and I'll finish it, as long as what remains to be defined is clear!

Describe alternatives you've considered

Light mode :(

Additional context

Aforementioned documentation link: https://ui.supabase.com/

SidePanel examples don't work right

Improve documentation

Link

https://ui.supabase.com/components/sidepanel

Describe the problem

When you click on the Modal examples I think they take as a reference the top of the page, and as you scroll down you can see the modals

Describe the improvement

Fix the code

Additional context

Menu items marked as coming soon on ui.supabase.com behave as clickable items but are not clickable

Bug report

Describe the bug

Two menu items (Dark mode setup and Theming) in the ui.supabase.com website are marked as coming soon and are not clickable. But they look and react to mouse events as if they are clickable.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to ui.supabase.com
Go to: The side menu
Scroll down to: the menu items named Dark mode setup (coming soon) and Theming (coming soon)
See error: hover over above menu items. They hover and have cursor pointer. Attempt to click on them. Nothing happens.

Expected behavior

If they are clicked to do something. Or have them as non clickable menu items.

Screenrecording

supabase.mov

System information

OS: macOS
Browser: chrome

Additional context

I have prepared a fix for this, if this is yet to be handled 😊

Code Block Delayed Blur

Bug report

Describe the bug

A clear and concise description of what the bug is.

Code blocks turn dark a little later than the rest of the page when opening a modal

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to the Modal page on the UI Docs
Scroll down to any demonstration of a modal
Press on the 'open modal' button
Watch closely as the page turns dim, the code block stays normal, the modal starts opening, and then the code block dims

Expected behavior

A clear and concise description of what you expected to happen.
Everything on the page dims at the same time after you open a modal

Screenshots

If applicable, add screenshots to help explain your problem.

System information

OS: Windows 11
Browser (if applies) Brave

Additional context

Add any other context about the problem here.

supabase / supabase-ui-web Goto Github PK

supabase-ui-web's Introduction

Supabase UI Website

Vision

Key Features

Tailwind friendly

Open source

supabase-ui-web's People

Contributors

Stargazers

Watchers

Forkers

supabase-ui-web's Issues

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Bug report

Describe the bug

To Reproduce

Expected behavior

Chore

Describe the chore

Improve documentation

Link

Describe the problem

Describe the improvement

Additional context

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Improve documentation

Link

Describe the problem

Describe the improvement

Bug report

Describe the bug

To Reproduce

Expected behaviour

Screenshots

System information

Feature request

Is your feature request related to a problem? Please describe.

Discussed in supabase/supabase#3547

Bug report

Describe the bug

To Reproduce

Expected behavior

System information

Additional context

Chore

Describe the chore

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

Feature request

Is your feature request related to a problem? Please describe.