mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Ivan VasilovandJoshen Lim
e02181aba8
* Initial work. * Cleanup the listbox component. * Set the endpoint correctly. * Add checks for permissions on the realtime inspector. * Make the select for choosing tokens. * Make the JWT input work with the toggle. * Change the icon for broadcast. * Add a modal for sending an event. * Fix the events table to use react-data-grid. * Remove table id. * Refactor the no-results component. * Fix the listening state to match the new designs. * Add a functional no results component. * Remove unnecessary index page on realtime * First round of small styling and interaction behaviours fixes * Another round of small styling fixes * One more styling fix * Another style fix * One last styling fixes * Add line * last last fix * Rename events to messages. * Rename all files related to realtime messages to use the message wording. * Update the icon for realtime in the left sidebar. * Minor fix for the shimmer line. * Make the Realtime icons use currentColor. * Listen to all schemas by default. * Add all schemas option to the schema filter. * Fix the colors for error rows in the realtime table. * Fix the system icon to sit in center. * Use the correct icon for the right bar navigation. * Remove the realtime icon since it's not used anywhere. * Fix the filter popover colors. * Remove the side panel background color. * Add link to documentation on the filtering panel. * Refactor the RLS popover to the new design. * Minor styling fixes. * Add code editor to the send message modal. * Update the wording per Terry suggestions. * Remove default channel + fix filter button styling * Small styling fixes * Update messagestable * Deprecate all schema selector, extend existing schema selector * remove unnecessary divs * Last few fixes * okay last few * Small padding issue * Improve label --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
import { observer } from 'mobx-react-lite'
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
// Observer is so that components listen to mobx store changes
export default observer(ComponentA)