pheralb / superui

🚀 A Tailwindcss component library.

💚 Supabase Launch Week 5 Hackathon:

• ✅ Supabase Auth - User authentication.
• ✅ Supabase Database - save the information of each user-created component.

💖 Maintainers:

	✌️ Socials
Pablo Hdez	GitHub - Twitter
Nacho Aldama	GitHub - Twitter
David Huertas	GitHub - Twitter
Juan Rojas	GitHub - Twitter

📹 Video:

• https://streamable.com/j3lxtb.

📦 Packages:

• 🚀 Turborepo - The High-performance Build System for JavaScript & TypeScript Codebases.
• ⚡️ Nextjs - The React Framework for Production.
• ⚒️ React 18 - A JavaScript library for building user interfaces.
• 💙 Typescript - A superset of JavaScript.
• 💚 Supabase - Build in a weekend. Scale to millions.
• 💅 Chakra UI for docs - Create accessible React apps with speed.
• 💨 TailwindCSS for library - Rapidly build modern websites without ever leaving your HTML.
• 💖 React-Icons - A flexible icon family for everyone.
• ⬛ CodeSandbox Sandpack - A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

🚀 Getting Started:

1. Clone the repository:

git clone https://github.com/pheralb/superui.git

2. Install dependencies:

cd superui
npm install

3. Create a Supabase database with the following query:

create table components (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  title text check (char_length(title) > 3),
  description text,
  code text,
  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);

create table public.users (
  id uuid not null primary key, -- UUID from auth.users
  email text,
  raw_user_meta_data text
);

🔨 trigger functions:

Trigger function to adding users when register for the first time:

create or replace function public.handle_new_user() 
returns trigger as $$
begin
  insert into public.users (id, email)
  values (new.id, new.email,new.raw_user_meta_data);
  return new;
end;
$$ language plpgsql security definer;

create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

4. Copy Supabase URL & Anon api key from your database and create a .env file in the /app folder with the following content:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

5. Run the following command to start the development server:

npm run dev

And ready 🥳, go to localhost:3001.

🔑 License:

• MIT License.

superui's Issues

UI: Circular progress component

Package types in Monaco

• Remove plugin in prod
• Add package to @types to fix error

Toast

UI: Aside menu

Aside menu with the show/hidde button enabled on small screens

How does "My components" works?

Been checking around the library and it's great, but I don't get how "my components" section works, it has to be accepted to get into the official component list?

UI: Modals

Example using React Aria
Documentation

Fix errors in Pin Component

Due to how value handling is written, some values ​​are lost when typing fast.

• Use useState to handle values.
• Keep onKeyUp for delete logic.
• Fire handleSubmit after last value.

UI: Footer

Docs

• Progress @Davidr2998
• Overlay @ikurotime
• Modal @ikurotime
• Command Menu @nachoaldamav
• Toast @ikurotime

How to make a doc:

1. Create MDX file in /app/docs
2. Start adding meta information, check another file for reference
3. The first line should be the module import
4. Add examples
5. To import examples, create a component in /app/src/demo/{component}
6. Add that component to /app/component/mdx/index.tsx
7. Use the Element in the MDX file, you can find references in another files.

UI: SuperUI Context

CMDK Component

Use CMDK to create a Component

https://www.npmjs.com/package/cmdk

UI: Navbar

500 when trying to preview my component

Buenas! jugueteando un poco con la librería (brutal, por cierto), me he encontrado con un 500 al intentar visualizar mi componente. No sé si es un bug conocido, pero por si acaso aquí os lo dejo!

Grabacion.de.pantalla.2023-06-02.a.las.8.53.08.mov

Install Tailwind in app

• Add tailwindcss dependency
• Create tailwind config file
• Add SuperUI to content array
• Tailwind styles

UI: Toast

Example repo