mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 01:15:03 +03:00
chore: dead code deletion in packages/ui (#47385)
## Problem There's still more unused code in the repository which slows down everything: - checkouts - tooling - probably builds (not sure how good turbopack is at handling this) ## Solution - remove old unused code <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Cleaned up several UI building blocks and related styling, including typography, menus, buttons, loading states, side panels, form layout, input adornments, spinner, theme context, and mobile detection. * Removed some previously available UI helpers and variants from the public component set. * **Style** * Simplified or removed multiple CSS modules and visual rules across the design system. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Gildas Garcia authored and GitHub committed
1 parent
d582d3cd8f
commit
c1646f9a95
29 files changed
-1268
No files matched your search
@@ -1,35 +0,0 @@
|
||||
/*
|
||||
Button sizes
|
||||
*/
|
||||
|
||||
.sbui-btn--tiny {
|
||||
@apply px-2.5 py-1.5 text-xs;
|
||||
}
|
||||
.sbui-btn--small {
|
||||
@apply px-3 py-2 text-sm leading-4;
|
||||
}
|
||||
.sbui-btn--medium {
|
||||
@apply px-4 py-2 text-sm;
|
||||
}
|
||||
.sbui-btn--large {
|
||||
@apply px-4 py-2 text-base;
|
||||
}
|
||||
.sbui-btn--xlarge {
|
||||
@apply px-6 py-3 text-base;
|
||||
}
|
||||
|
||||
/*
|
||||
Button varients
|
||||
*/
|
||||
|
||||
.dark .sbui-btn-primary {
|
||||
text-shadow: 0px 0px 4px rgba(38 111 78 / 50%);
|
||||
}
|
||||
|
||||
.dark .sbui-btn-default {
|
||||
text-shadow: 0px 0px 4px rgba(31 31 31 / 50%);
|
||||
}
|
||||
|
||||
.dark .sbui-btn-secondary {
|
||||
text-shadow: 0px 0px 4px rgba(42 42 42 / 50%);
|
||||
}
|
||||
@@ -6,9 +6,6 @@ import styleHandler from '../../lib/theme/styleHandler'
|
||||
import { cn } from '../../lib/utils/cn'
|
||||
import { IconContext } from './IconContext'
|
||||
|
||||
// @ts-ignore
|
||||
// import IconStyles from './Icon.module.css'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | number
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
.sbui-loading {
|
||||
@apply transition-all relative;
|
||||
}
|
||||
|
||||
.sbui-loading--active .sbui-loading-content {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.sbui-loading-content {
|
||||
@apply transition-opacity duration-300;
|
||||
}
|
||||
|
||||
.sbui-loading-spinner {
|
||||
@apply text-brand-300 animate-spin;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
.sbui-menu__item {
|
||||
@apply px-4 py-2;
|
||||
@apply cursor-pointer;
|
||||
@apply hover:bg-gray-100 dark:hover:bg-dark-700 transition-colors duration-150;
|
||||
}
|
||||
|
||||
.sbui-menu__group {
|
||||
@apply px-4 py-2;
|
||||
}
|
||||
|
||||
.sbui-menu__content {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.sbui-menu__item--active {
|
||||
@apply bg-gray-100;
|
||||
@apply dark:bg-gray-600;
|
||||
|
||||
@apply text-gray-900;
|
||||
@apply dark:text-white;
|
||||
}
|
||||
|
||||
.sbui-menu__item--active .sbui-menu__content {
|
||||
@apply text-gray-600;
|
||||
@apply dark:text-white;
|
||||
}
|
||||
|
||||
.sbui-menu__item--active--bar {
|
||||
@apply border-l-4 border-brand-300;
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
.sbui-menu__item--rounded {
|
||||
@apply rounded-sm;
|
||||
}
|
||||
@@ -4,7 +4,6 @@ import React from 'react'
|
||||
|
||||
import styleHandler from '../../lib/theme/styleHandler'
|
||||
import { cn } from '../../lib/utils/cn'
|
||||
import Typography from '../Typography'
|
||||
import { MenuContextProvider, useMenuContext } from './MenuContext'
|
||||
|
||||
interface MenuProps {
|
||||
@@ -104,27 +103,6 @@ export function Group({ children, icon, title }: GroupProps) {
|
||||
)
|
||||
}
|
||||
|
||||
interface MiscProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function Misc({ children }: MiscProps) {
|
||||
return (
|
||||
<div
|
||||
// className={MenuStyles['sbui-menu__misc']}
|
||||
>
|
||||
<Typography.Text>
|
||||
<span
|
||||
// className={MenuStyles['sbui-menu__content']}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
</Typography.Text>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Menu.Item = Item
|
||||
Menu.Group = Group
|
||||
Menu.Misc = Misc
|
||||
export default Menu
|
||||
@@ -1,124 +0,0 @@
|
||||
/*
|
||||
Side Panel animations imported first as so placement styles are not affected.
|
||||
*/
|
||||
|
||||
/* overlay animation */
|
||||
.sbui-sidepanel-overlay--enter {
|
||||
@apply ease-out duration-200;
|
||||
}
|
||||
.sbui-sidepanel-overlay--enterFrom {
|
||||
@apply opacity-0;
|
||||
}
|
||||
.sbui-sidepanel-overlay--enterTo {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.sbui-sidepanel-overlay--leave {
|
||||
@apply ease-in duration-200;
|
||||
}
|
||||
.sbui-sidepanel-overlay--leaveFrom {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.sbui-sidepanel-overlay--leaveTo {
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
/* panel animation */
|
||||
.sbui-sidepanel--enter {
|
||||
@apply transform transition ease-in-out duration-200 lg:duration-300;
|
||||
}
|
||||
.sbui-sidepanel--enterFrom {
|
||||
@apply translate-x-full;
|
||||
}
|
||||
.sbui-sidepanel--enterFrom--left {
|
||||
@apply -translate-x-full;
|
||||
}
|
||||
.sbui-sidepanel--enterTo {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
.sbui-sidepanel--leave {
|
||||
@apply transform transition ease-in-out duration-200 lg:duration-300;
|
||||
}
|
||||
.sbui-sidepanel--leaveFrom {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
.sbui-sidepanel--leaveTo {
|
||||
@apply translate-x-full;
|
||||
}
|
||||
.sbui-sidepanel--leaveTo--left {
|
||||
@apply -translate-x-full;
|
||||
}
|
||||
|
||||
/* .sbui-sidepanel-overlay-container {
|
||||
@apply fixed inset-0 transition-opacity;
|
||||
} */
|
||||
|
||||
/* .sbui-sidepanel-overlay {
|
||||
@apply absolute inset-0 bg-surface-100 opacity-75;
|
||||
} */
|
||||
|
||||
.sbui-sidepanel--left {
|
||||
@apply left-0 pr-10;
|
||||
}
|
||||
|
||||
.sbui-sidepanel--right {
|
||||
@apply right-0 pl-10;
|
||||
}
|
||||
|
||||
.sbui-sidepanel--medium {
|
||||
@apply w-screen max-w-md h-full;
|
||||
}
|
||||
|
||||
.sbui-sidepanel--wide {
|
||||
@apply w-screen max-w-2xl h-full;
|
||||
}
|
||||
|
||||
/* .sbui-sidepanel-fixed {
|
||||
@apply fixed inset-0 overflow-hidden;
|
||||
} */
|
||||
|
||||
/* .sbui-sidepanel-absolute {
|
||||
@apply absolute inset-0 overflow-hidden;
|
||||
} */
|
||||
|
||||
/* .sbui-sidepanel-container {
|
||||
@apply absolute inset-y-0 max-w-full flex h-screen;
|
||||
} */
|
||||
|
||||
/* .sbui-sidepanel {
|
||||
@apply h-full flex flex-col bg-white dark:bg-dark-700 shadow-xl;
|
||||
} */
|
||||
|
||||
.sbui-sidepanel-header {
|
||||
@apply space-y-1 py-6 px-4 bg-gray-50 dark:bg-dark-600 sm:px-6;
|
||||
}
|
||||
|
||||
.sbui-sidepanel-close-container {
|
||||
@apply h-7 flex items-center;
|
||||
}
|
||||
|
||||
.sbui-sidepanel-close-container button,
|
||||
.dark .sbui-sidepanel-close-container button {
|
||||
@apply text-gray-300;
|
||||
@apply hover:text-gray-400;
|
||||
|
||||
/* @apply dark:text-dark-400; */
|
||||
/* @apply dark:hover:text-dark-300; */
|
||||
|
||||
@apply hover:bg-transparent;
|
||||
}
|
||||
|
||||
/* .sbui-sidepanel-content {
|
||||
@apply relative flex-1 px-4 sm:px-6;
|
||||
} */
|
||||
|
||||
.sbui-sidepanel-footer-container {
|
||||
@apply p-4 bg-gray-50 dark:bg-dark-600;
|
||||
}
|
||||
|
||||
.sbui-sidepanel-footer {
|
||||
@apply flex shrink-0;
|
||||
}
|
||||
|
||||
.sbui-sidepanel__trigger {
|
||||
@apply border-none bg-transparent p-0 focus:ring-0;
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { xor } from 'lodash'
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useMemo,
|
||||
useState,
|
||||
type Dispatch,
|
||||
type PropsWithChildren,
|
||||
type SetStateAction,
|
||||
} from 'react'
|
||||
|
||||
export interface TabGroup {
|
||||
tabIds: string[]
|
||||
activeId: string
|
||||
}
|
||||
|
||||
interface TabsContextValue {
|
||||
tabGroups: TabGroup[]
|
||||
setTabGroups: Dispatch<SetStateAction<TabGroup[]>>
|
||||
}
|
||||
|
||||
const TabsContext = createContext<TabsContextValue>({
|
||||
tabGroups: [],
|
||||
setTabGroups: () => {},
|
||||
})
|
||||
|
||||
/**
|
||||
* Tracks active Tab IDs across the site so that tabs
|
||||
* with the same ID stay in sync (eg. JS vs TS tabs).
|
||||
*/
|
||||
const TabsProvider = ({ children }: PropsWithChildren<{}>) => {
|
||||
const [tabGroups, setTabGroups] = useState<TabGroup[]>([])
|
||||
|
||||
return <TabsContext.Provider value={{ tabGroups, setTabGroups }}>{children}</TabsContext.Provider>
|
||||
}
|
||||
|
||||
export interface UseTabGroupValue {
|
||||
/**
|
||||
* The active tab ID for the tab group.
|
||||
* This value is shared with all matching tab
|
||||
* groups within the context.
|
||||
*/
|
||||
groupActiveId?: string
|
||||
|
||||
/**
|
||||
* Set the active tab ID for the tab group.
|
||||
* Value will be shared with all matching tab
|
||||
* groups within the context.
|
||||
*/
|
||||
setGroupActiveId?(id: string): void
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to retrieve and set the active tab ID for
|
||||
* the current tab group.
|
||||
* The value will be shared with all matching tab
|
||||
* groups within the context.
|
||||
*
|
||||
* Silently fails if no `TabsProvider` is set.
|
||||
*/
|
||||
export const useTabGroup = (tabIds: string[]): UseTabGroupValue => {
|
||||
const tabsContext = useContext(TabsContext)
|
||||
|
||||
if (!tabsContext) {
|
||||
return {}
|
||||
}
|
||||
|
||||
const { tabGroups, setTabGroups } = tabsContext
|
||||
|
||||
const groupActiveId = useMemo(
|
||||
() => tabGroups.find((group) => xor(group.tabIds, tabIds).length === 0)?.activeId,
|
||||
[tabGroups]
|
||||
)
|
||||
|
||||
const setGroupActiveId = useCallback((id: string) => {
|
||||
setTabGroups((groups) => {
|
||||
// Clone the array
|
||||
const newGroups = groups.concat()
|
||||
|
||||
const existingGroupIndex = groups.findIndex((group) => xor(group.tabIds, tabIds).length === 0)
|
||||
|
||||
const tabGroup: TabGroup = {
|
||||
tabIds,
|
||||
activeId: id,
|
||||
}
|
||||
|
||||
// If this group already exists, replace it
|
||||
// Otherwise add to the end
|
||||
if (existingGroupIndex !== -1) {
|
||||
newGroups.splice(existingGroupIndex, 1, tabGroup)
|
||||
} else {
|
||||
newGroups.push(tabGroup)
|
||||
}
|
||||
|
||||
return newGroups
|
||||
})
|
||||
}, [])
|
||||
|
||||
return { groupActiveId, setGroupActiveId }
|
||||
}
|
||||
|
||||
export default TabsProvider
|
||||
Whitespace-only changes.
@@ -1,3 +0,0 @@
|
||||
a.sbui-typography-link {
|
||||
@apply text-sm text-brand-400 dark:text-brand-400 cursor-pointer;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
// @ts-ignore
|
||||
// import LinkStyles from './Link.module.css'
|
||||
|
||||
interface Props {
|
||||
children?: React.ReactNode
|
||||
target?: '_blank' | '_self' | '_parent' | '_top' | 'framename'
|
||||
href?: string
|
||||
className?: string
|
||||
style?: React.CSSProperties
|
||||
onClick?: any
|
||||
}
|
||||
|
||||
function Link({ children, target = '_blank', href, onClick, style }: Props) {
|
||||
// let classes = [
|
||||
// LinkStyles['sbui-typography'],
|
||||
// LinkStyles['sbui-typography-link'],
|
||||
// ]
|
||||
// if (className) {
|
||||
// classes.push(className)
|
||||
// }
|
||||
|
||||
return (
|
||||
<a
|
||||
onClick={onClick}
|
||||
// className={classes.join(' ')}
|
||||
href={href}
|
||||
target={target}
|
||||
rel="noopener noreferrer"
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export default Link
|
||||
@@ -1,75 +0,0 @@
|
||||
.sbui-typography-text {
|
||||
@apply text-sm;
|
||||
@apply text-typography-body-light dark:text-typography-body-dark;
|
||||
}
|
||||
|
||||
.sbui-typography-text-small {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.sbui-typography-text-secondary {
|
||||
@apply text-typography-body-secondary-light;
|
||||
@apply dark:text-typography-body-secondary-dark;
|
||||
}
|
||||
|
||||
.sbui-typography-text-success {
|
||||
@apply text-green-500;
|
||||
@apply dark:text-green-500;
|
||||
}
|
||||
|
||||
.sbui-typography-text-warning {
|
||||
@apply text-yellow-500;
|
||||
@apply dark:text-yellow-500;
|
||||
}
|
||||
|
||||
.sbui-typography-text-danger {
|
||||
@apply text-red-500;
|
||||
@apply dark:text-red-500;
|
||||
}
|
||||
|
||||
.sbui-typography-text-disabled {
|
||||
@apply text-gray-300;
|
||||
@apply dark:text-gray-400;
|
||||
/* color: rgba(0,0,0,.25); */
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sbui-typography-text-underline {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.sbui-typography-text-strikethrough {
|
||||
@apply line-through;
|
||||
}
|
||||
|
||||
.sbui-typography-text strong {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
mark.sbui-typography-text {
|
||||
padding: 0;
|
||||
background-color: #ffe58f;
|
||||
}
|
||||
|
||||
code.sbui-typography-text {
|
||||
/* margin: 0 .2em; */
|
||||
padding: 0.05em 0.4em 0.05em;
|
||||
/* font-size: 85%; */
|
||||
background: hsla(0, 0%, 58.8%, 0.1);
|
||||
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
kbd.sbui-typography-text {
|
||||
/* margin: 0 .2em; */
|
||||
padding: 0.15em 0.4em 0.1em;
|
||||
/* font-size: 90%; */
|
||||
background: hsla(0, 0%, 58.8%, 0.06);
|
||||
border: solid hsla(0, 0%, 39.2%, 0.2);
|
||||
border-width: 1px 1px 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
// @ts-ignore
|
||||
// import TextStyles from './Text.module.css'
|
||||
|
||||
export interface Props {
|
||||
className?: string
|
||||
children: any
|
||||
style?: React.CSSProperties
|
||||
type?: 'default' | 'secondary' | 'success' | 'warning' | 'danger'
|
||||
disabled?: boolean
|
||||
mark?: boolean
|
||||
code?: boolean
|
||||
keyboard?: boolean
|
||||
underline?: boolean
|
||||
strikethrough?: boolean
|
||||
strong?: boolean
|
||||
small?: boolean
|
||||
}
|
||||
|
||||
function Text({ children, style, mark, code, keyboard, strong }: Props) {
|
||||
// let classes = [TextStyles['sbui-typography-text']]
|
||||
// if (className) {
|
||||
// classes.push(className)
|
||||
// }
|
||||
|
||||
// if (type) {
|
||||
// classes.push(TextStyles[`sbui-typography-text-${type}`])
|
||||
// }
|
||||
|
||||
// if (disabled) {
|
||||
// classes.push(TextStyles[`sbui-typography-text-disabled`])
|
||||
// }
|
||||
|
||||
// if (underline) {
|
||||
// classes.push(TextStyles[`sbui-typography-text-underline`])
|
||||
// }
|
||||
|
||||
// if (strikethrough) {
|
||||
// classes.push(TextStyles[`sbui-typography-text-strikethrough`])
|
||||
// }
|
||||
|
||||
// if (small) {
|
||||
// classes.push(TextStyles['sbui-typography-text-small'])
|
||||
// }
|
||||
|
||||
if (code)
|
||||
return (
|
||||
<code
|
||||
style={style}
|
||||
// className={classes.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
if (mark)
|
||||
return (
|
||||
<mark
|
||||
style={style}
|
||||
// className={classes.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</mark>
|
||||
)
|
||||
if (keyboard)
|
||||
return (
|
||||
<kbd
|
||||
style={style}
|
||||
// className={classes.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</kbd>
|
||||
)
|
||||
if (strong)
|
||||
return (
|
||||
<strong
|
||||
style={style}
|
||||
// className={classes.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</strong>
|
||||
)
|
||||
return (
|
||||
<span
|
||||
style={style}
|
||||
// className={classes.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default Text
|
||||
@@ -1,27 +0,0 @@
|
||||
.sbui-typography-title {
|
||||
@apply text-gray-900;
|
||||
@apply dark:text-white;
|
||||
}
|
||||
|
||||
h1.sbui-typography-title {
|
||||
@apply text-5xl;
|
||||
}
|
||||
|
||||
h2.sbui-typography-title {
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
h3.sbui-typography-title {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h4.sbui-typography-title {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
h5.sbui-typography-title {
|
||||
@apply text-base;
|
||||
}
|
||||
/* a {
|
||||
@apply text-blue-600 underline;
|
||||
} */
|
||||
@@ -1,30 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
// @ts-ignore
|
||||
// import TitleStyles from './Title.module.css'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
level?: 1 | 2 | 3 | 4 | 5
|
||||
children: any
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
function Title({ level = 1, children, style }: Props) {
|
||||
// let classes = [TitleStyles['sbui-typography-title']]
|
||||
// if (className) {
|
||||
// classes.push(className)
|
||||
// }
|
||||
const CustomTag: any = `h${level}`
|
||||
|
||||
return (
|
||||
<CustomTag
|
||||
style={style}
|
||||
// className={classes.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</CustomTag>
|
||||
)
|
||||
}
|
||||
|
||||
export default Title
|
||||
@@ -1,96 +0,0 @@
|
||||
/* marker fix */
|
||||
.sbui-typography li::marker {
|
||||
display: none;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.sbui-typography-container {
|
||||
@apply prose prose-sm lg:prose-lg;
|
||||
}
|
||||
|
||||
.sbui-typography {
|
||||
@apply text-base;
|
||||
@apply text-gray-400;
|
||||
}
|
||||
|
||||
/* .sbui-typography--prose-sm {
|
||||
@apply prose prose-sm;
|
||||
}
|
||||
|
||||
.sbui-typography--prose-lg {
|
||||
@apply prose prose-lg;
|
||||
}
|
||||
|
||||
.sbui-typography--prose-xl {
|
||||
@apply prose prose-xl;
|
||||
}
|
||||
|
||||
.sbui-typography--prose-2xl {
|
||||
@apply prose prose-2xl;
|
||||
} */
|
||||
|
||||
.sbui-typography code {
|
||||
padding: 0.05em 0.4em 0.05em;
|
||||
background: hsla(0, 0%, 58.8%, 0.1);
|
||||
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
dark mode styles
|
||||
|
||||
default styles are handled by tailwind config
|
||||
*/
|
||||
|
||||
.dark .sbui-typography {
|
||||
@apply text-gray-200;
|
||||
}
|
||||
|
||||
.dark .sbui-typography h1 {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography h2 {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography h3 {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography h4 {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography h5 {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography strong {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography li::before {
|
||||
@apply text-gray-300;
|
||||
}
|
||||
|
||||
.dark .sbui-typography a {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography blockquote {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography code {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark .sbui-typography figcaption {
|
||||
@apply text-gray-600;
|
||||
}
|
||||
|
||||
.dark .sbui-typography::selection {
|
||||
/* @apply bg-brand-300; */
|
||||
backgroundcolor: '#6f7bb635';
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import Link from './Link'
|
||||
import Text from './Text'
|
||||
import Title from './Title'
|
||||
// @ts-ignore
|
||||
import TypographyStyles from './Typography.module.css'
|
||||
|
||||
function Typography({ children, tag = 'div', style }: any) {
|
||||
// let classes = [
|
||||
// TypographyStyles['sbui-typography'],
|
||||
// TypographyStyles['sbui-typography-container'],
|
||||
// ]
|
||||
// if (className) {
|
||||
// classes.push(className)
|
||||
// }
|
||||
let CustomTag: any = `${tag}`
|
||||
return (
|
||||
<CustomTag
|
||||
style={style}
|
||||
// className={classes.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</CustomTag>
|
||||
)
|
||||
}
|
||||
|
||||
Typography.Title = Title
|
||||
Typography.Text = Text
|
||||
Typography.Link = Link
|
||||
|
||||
export default Typography
|
||||
@@ -1,4 +0,0 @@
|
||||
import Typography from './Typography'
|
||||
|
||||
export default Typography
|
||||
export { default as Typography } from './Typography'
|
||||
@@ -1,19 +0,0 @@
|
||||
import * as React from 'react'
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener('change', onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener('change', onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
/* .sbui-formlayout {
|
||||
@apply grid gap-2;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout--flex {
|
||||
@apply flex justify-between;
|
||||
}
|
||||
|
||||
.sbui-formlayout--flex-right div:last-child {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.sbui-formlayout--flex-left div:first-child {
|
||||
@apply order-2;
|
||||
}
|
||||
|
||||
.sbui-formlayout--flex-left div:last-child {
|
||||
@apply order-1;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout--non-responsive {
|
||||
@apply grid grid-cols-12 gap-4;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout--responsive {
|
||||
@apply md:grid md:grid-cols-12 md:gap-4;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout__label-container-horizontal {
|
||||
@apply justify-between col-span-12;
|
||||
}
|
||||
|
||||
.sbui-formlayout__label-container-vertical {
|
||||
@apply col-span-4;
|
||||
}
|
||||
|
||||
.sbui-formlayout__content-container-horizontal {
|
||||
@apply col-span-12;
|
||||
}
|
||||
|
||||
.sbui-formlayout__content-container-vertical {
|
||||
@apply col-span-8;
|
||||
}
|
||||
|
||||
.sbui-formlayout__content-container-vertical--align-right {
|
||||
@apply text-right;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout__label {
|
||||
@apply block text-sm text-input-label-light dark:text-input-label-dark;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout__label-opt,
|
||||
.sbui-formlayout__label .sbui-formlayout__label-before,
|
||||
.sbui-formlayout__label .sbui-formlayout__label-after {
|
||||
@apply text-sm text-gray-400 dark:text-gray-300;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout__error {
|
||||
@apply mt-2 text-sm text-red-500;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout__description {
|
||||
@apply mt-2 text-sm text-gray-400 dark:text-gray-300;
|
||||
} */
|
||||
|
||||
/* .sbui-formlayout__content-container--width-25 {
|
||||
width:
|
||||
} */
|
||||
|
||||
/*
|
||||
Layout sizes
|
||||
*/
|
||||
|
||||
/* .sbui-formlayout--tiny .sbui-formlayout__label, */
|
||||
/* .sbui-formlayout--tiny .sbui-formlayout__label-opt, */
|
||||
/* .sbui-formlayout--tiny .sbui-formlayout__error, */
|
||||
/* .sbui-formlayout--tiny .sbui-formlayout__description {
|
||||
@apply text-xs;
|
||||
} */
|
||||
/* .sbui-formlayout--small .sbui-formlayout__label, */
|
||||
/* .sbui-formlayout--small .sbui-formlayout__label-opt, */
|
||||
/* .sbui-formlayout--small .sbui-formlayout__error, */
|
||||
/* .sbui-formlayout--small .sbui-formlayout__description {
|
||||
@apply text-sm leading-4;
|
||||
} */
|
||||
/* .sbui-formlayout--medium .sbui-formlayout__label, */
|
||||
/* .sbui-formlayout--medium .sbui-formlayout__label-opt, */
|
||||
/* .sbui-formlayout--medium .sbui-formlayout__error, */
|
||||
/* .sbui-formlayout--medium .sbui-formlayout__description {
|
||||
@apply text-sm;
|
||||
} */
|
||||
/* .sbui-formlayout--large .sbui-formlayout__label, */
|
||||
/* .sbui-formlayout--large .sbui-formlayout__label-opt, */
|
||||
/* .sbui-formlayout--large .sbui-formlayout__error, */
|
||||
/* .sbui-formlayout--large .sbui-formlayout__description {
|
||||
@apply text-base;
|
||||
} */
|
||||
/* .sbui-formlayout--xlarge .sbui-formlayout__label, */
|
||||
/* .sbui-formlayout--xlarge .sbui-formlayout__label-opt, */
|
||||
/* .sbui-formlayout--xlarge .sbui-formlayout__error, */
|
||||
/* .sbui-formlayout--xlarge .sbui-formlayout__description {
|
||||
@apply text-base;
|
||||
} */
|
||||
@@ -1,217 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
// @ts-ignore
|
||||
import defaultTheme from '../../theme/defaultTheme'
|
||||
import { cn } from '../../utils'
|
||||
|
||||
// @ts-ignore
|
||||
// import FormLayoutStyles from './FormLayout.module.css'
|
||||
|
||||
type Props = {
|
||||
align?: 'left' | 'right'
|
||||
children?: any
|
||||
className?: string
|
||||
descriptionText?: string | React.ReactNode
|
||||
error?: string | React.ReactNode
|
||||
id?: string
|
||||
label?: string | React.ReactNode
|
||||
labelOptional?: string | React.ReactNode
|
||||
layout?: 'horizontal' | 'vertical' | 'flex'
|
||||
style?: React.CSSProperties
|
||||
// flex?: boolean
|
||||
responsive?: boolean
|
||||
size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
|
||||
beforeLabel?: string
|
||||
afterLabel?: string | React.ReactNode
|
||||
nonBoxInput?: boolean
|
||||
labelLayout?: 'horizontal' | 'vertical'
|
||||
}
|
||||
|
||||
export function FormLayout({
|
||||
align = 'left',
|
||||
children,
|
||||
className,
|
||||
descriptionText,
|
||||
error,
|
||||
id,
|
||||
label,
|
||||
labelOptional,
|
||||
layout = 'vertical',
|
||||
style,
|
||||
// flex = false,
|
||||
labelLayout,
|
||||
responsive = true,
|
||||
size = 'medium',
|
||||
beforeLabel,
|
||||
afterLabel,
|
||||
nonBoxInput = label ? false : true,
|
||||
}: Props) {
|
||||
// _error is used label && to delay the error string beind removed too soon
|
||||
// once it has animated out, the string will be removed
|
||||
// const [_error, _setError] = useState(error)
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!error) {
|
||||
// console.log('no error')
|
||||
// setTimeout(function () {
|
||||
// _setError(error)
|
||||
// }, 500)
|
||||
// } else {
|
||||
// console.log('has error')
|
||||
// _setError(error)
|
||||
// }
|
||||
// // Update the document title using the browser API
|
||||
// }, [error])
|
||||
|
||||
const __styles = defaultTheme.form_layout
|
||||
|
||||
const flex = layout === 'flex'
|
||||
|
||||
let containerClasses: Array<string> = []
|
||||
|
||||
containerClasses.push(__styles.size[size])
|
||||
|
||||
let labelContainerClasses: Array<string> = []
|
||||
let dataInputContainerClasses: Array<string> = []
|
||||
|
||||
if (layout !== 'horizontal' && !labelLayout && !flex) {
|
||||
labelContainerClasses.push(__styles.labels_horizontal_layout)
|
||||
} else if (labelLayout === 'horizontal') {
|
||||
labelContainerClasses.push(__styles.labels_horizontal_layout)
|
||||
} else if (labelLayout === 'vertical') {
|
||||
labelContainerClasses.push(__styles.labels_vertical_layout)
|
||||
} else {
|
||||
labelContainerClasses.push(__styles.labels_vertical_layout)
|
||||
}
|
||||
|
||||
if (layout !== 'horizontal') {
|
||||
dataInputContainerClasses.push(__styles.data_input_horizontal_layout)
|
||||
} else {
|
||||
dataInputContainerClasses.push(__styles.data_input_vertical_layout)
|
||||
if (align === 'right') {
|
||||
dataInputContainerClasses.push(__styles.data_input_vertical_layout__align_right)
|
||||
}
|
||||
}
|
||||
|
||||
if (flex) {
|
||||
containerClasses.push(__styles.flex[align].base)
|
||||
if (align === 'left') {
|
||||
labelContainerClasses.push(__styles.flex.left.labels)
|
||||
dataInputContainerClasses.push(__styles.flex.left.data_input)
|
||||
}
|
||||
if (align === 'right') {
|
||||
labelContainerClasses.push(__styles.flex.right.labels)
|
||||
dataInputContainerClasses.push(__styles.flex.right.data_input)
|
||||
}
|
||||
} else {
|
||||
containerClasses.push(
|
||||
__styles.container,
|
||||
responsive ? __styles.responsive : __styles.non_responsive
|
||||
)
|
||||
}
|
||||
|
||||
if (className) {
|
||||
containerClasses.push(className)
|
||||
}
|
||||
|
||||
const labelled = Boolean(label || beforeLabel || afterLabel)
|
||||
|
||||
// console.log('error', error)
|
||||
|
||||
const renderError = error && (
|
||||
<p
|
||||
data-state={error ? 'show' : 'hide'}
|
||||
className={[__styles.error.base, __styles.error.size[size]].join(' ')}
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
)
|
||||
|
||||
const renderDescription = descriptionText && (
|
||||
<div
|
||||
className={[__styles.description.base, __styles.description.size[size]].join(' ')}
|
||||
id={id + '-description'}
|
||||
>
|
||||
{descriptionText}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={containerClasses.join(' ')}>
|
||||
{flex && <div className={__styles.flex[align].content}>{children}</div>}
|
||||
{labelled || labelOptional || layout === 'horizontal' ? (
|
||||
<div
|
||||
// direction={
|
||||
// (layout && layout === 'horizontal') ||
|
||||
// (flex && layout && layout === 'vertical')
|
||||
// ? 'vertical'
|
||||
// : 'horizontal'
|
||||
// }
|
||||
className={labelContainerClasses.join(' ')}
|
||||
>
|
||||
{labelled && (
|
||||
<label
|
||||
className={cn(__styles.label.base, __styles.label.size[size], 'break-all')}
|
||||
htmlFor={id}
|
||||
>
|
||||
{beforeLabel && (
|
||||
<span
|
||||
className={[__styles.label_before.base, __styles.label_before.size[size]].join(
|
||||
' '
|
||||
)}
|
||||
id={id + '-before'}
|
||||
>
|
||||
{beforeLabel}
|
||||
</span>
|
||||
)}
|
||||
{label}
|
||||
{afterLabel && (
|
||||
<span
|
||||
className={[__styles.label_after.base, __styles.label_after.size[size]].join(' ')}
|
||||
id={id + '-after'}
|
||||
>
|
||||
{afterLabel}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
)}
|
||||
{labelOptional && (
|
||||
<span
|
||||
className={[__styles.label_optional.base, __styles.label_optional.size[size]].join(
|
||||
' '
|
||||
)}
|
||||
id={id + '-optional'}
|
||||
>
|
||||
{labelOptional}
|
||||
</span>
|
||||
)}
|
||||
{flex && (
|
||||
<>
|
||||
{renderDescription}
|
||||
{renderError}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
{!flex && (
|
||||
<div className={dataInputContainerClasses.join(' ')} style={style}>
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
nonBoxInput && label && layout === 'vertical'
|
||||
? __styles.non_box_data_input_spacing_vertical
|
||||
: nonBoxInput && label && layout === 'horizontal'
|
||||
? __styles.non_box_data_input_spacing_horizontal
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
{renderError}
|
||||
{renderDescription}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { FormLayout } from './FormLayout'
|
||||
@@ -1,3 +0,0 @@
|
||||
.sbui-input-error-icon {
|
||||
@apply inset-y-0 right-3 pr-2 pl-2 flex items-center pointer-events-none;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { AlertCircle } from 'lucide-react'
|
||||
import React from 'react'
|
||||
|
||||
import styleHandler from '../theme/styleHandler'
|
||||
|
||||
interface Props {
|
||||
style?: React.CSSProperties
|
||||
size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
|
||||
}
|
||||
|
||||
const sizeMap = {
|
||||
tiny: 14,
|
||||
small: 16,
|
||||
medium: 20,
|
||||
large: 24,
|
||||
xlarge: 32,
|
||||
}
|
||||
|
||||
export default function InputErrorIcon({ style, size = 'medium' }: Props) {
|
||||
const __styles = styleHandler('inputErrorIcon')
|
||||
|
||||
return (
|
||||
<div className={__styles.base} style={style}>
|
||||
<AlertCircle size={sizeMap[size]} strokeWidth={2} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
.sbui-input-icon-container {
|
||||
@apply absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none;
|
||||
/* set the default color of the icon */
|
||||
@apply text-gray-600;
|
||||
@apply dark:text-white;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
import styleHandler from '../theme/styleHandler'
|
||||
import { cn } from '../utils'
|
||||
|
||||
export default function InputIconContainer({
|
||||
icon,
|
||||
className,
|
||||
size,
|
||||
}: {
|
||||
icon: React.ReactNode
|
||||
className?: string
|
||||
size: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
|
||||
}) {
|
||||
const __styles = styleHandler('inputIconContainer')
|
||||
return <div className={cn(__styles.base, __styles.size[size], className)}>{icon}</div>
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
// export function() {
|
||||
// return (
|
||||
|
||||
// )
|
||||
// }
|
||||
@@ -1,52 +0,0 @@
|
||||
html {
|
||||
background: #009688;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.spin-loader {
|
||||
border-radius: 80%;
|
||||
display: block;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: relative;
|
||||
animation: spin 0.675s linear 0s infinite normal;
|
||||
background: #26a69a;
|
||||
}
|
||||
.spin-loader:before,
|
||||
.spin-loader:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.spin-loader:before {
|
||||
border-radius: 0 90px 90px 0;
|
||||
height: 50px;
|
||||
width: 50%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: #005041;
|
||||
background-image: linear-gradient(#26a69a, #005041);
|
||||
}
|
||||
.spin-loader:after {
|
||||
border-radius: 80%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
background: #009688;
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import React, { createContext, useLayoutEffect, useMemo } from 'react'
|
||||
|
||||
import { mergeDeep } from './../../lib/utils'
|
||||
import defaultTheme from './defaultTheme'
|
||||
|
||||
// import useDarkMode from './utils/useDarkMode'
|
||||
|
||||
interface ThemeContextInterface {
|
||||
theme?: any
|
||||
// mode?: 'light' | 'dark'
|
||||
// toggleMode?: any
|
||||
}
|
||||
|
||||
export const ThemeContext = createContext<ThemeContextInterface>({
|
||||
theme: defaultTheme,
|
||||
// mode: 'light',
|
||||
// toggleMode: true,
|
||||
})
|
||||
|
||||
interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode
|
||||
/**
|
||||
* Defines the styles used throughout the library
|
||||
*/
|
||||
theme?: object
|
||||
/**
|
||||
* Defines dark mode as the default theme
|
||||
*/
|
||||
// dark?: boolean
|
||||
/**
|
||||
* Allows the change of theme, reading user's preferences and saving them
|
||||
*/
|
||||
// usePreferences?: boolean
|
||||
}
|
||||
|
||||
const themeWrapper: React.FC<Props> = ({
|
||||
children,
|
||||
theme: customTheme,
|
||||
// dark,
|
||||
// usePreferences = false,
|
||||
}) => {
|
||||
const mergedTheme = mergeDeep(defaultTheme, customTheme)
|
||||
// const [mode, setMode, toggleMode] = useDarkMode(usePreferences)
|
||||
|
||||
// useLayoutEffect(() => {
|
||||
// if (dark) {
|
||||
// if (setMode != null) {
|
||||
// setMode('dark')
|
||||
// }
|
||||
// document.documentElement.classList.add(`dark`)
|
||||
// }
|
||||
// }, [dark])
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
theme: mergedTheme,
|
||||
// mode,
|
||||
// toggleMode,
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
// console.log('defaultTheme', defaultTheme)
|
||||
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
|
||||
}
|
||||
|
||||
export default themeWrapper
|
||||
@@ -1,8 +0,0 @@
|
||||
export interface AnimationTailwindClasses {
|
||||
enter?: string
|
||||
enterFrom?: string
|
||||
enterTo?: string
|
||||
leave?: string
|
||||
leaveFrom?: string
|
||||
leaveTo?: string
|
||||
}
|
||||
Reference in new issue
Block a user