diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css deleted file mode 100644 index 29270e985e0..00000000000 --- a/packages/ui/src/components/Button/Button.module.css +++ /dev/null @@ -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%); -} diff --git a/packages/ui/src/components/Icon/IconBase.tsx b/packages/ui/src/components/Icon/IconBase.tsx index 1920072baf9..0ef5f1bce90 100644 --- a/packages/ui/src/components/Icon/IconBase.tsx +++ b/packages/ui/src/components/Icon/IconBase.tsx @@ -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 diff --git a/packages/ui/src/components/Loading/Loading.module.css b/packages/ui/src/components/Loading/Loading.module.css deleted file mode 100644 index 4f2c5d1503e..00000000000 --- a/packages/ui/src/components/Loading/Loading.module.css +++ /dev/null @@ -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; -} diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css deleted file mode 100644 index 6e1ebefbd6b..00000000000 --- a/packages/ui/src/components/Menu/Menu.module.css +++ /dev/null @@ -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; -} diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index f0218a7a23e..262d2fab14f 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -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 ( -
- - - {children} - - -
- ) -} - Menu.Item = Item Menu.Group = Group -Menu.Misc = Misc export default Menu diff --git a/packages/ui/src/components/SidePanel/SidePanel.module.css b/packages/ui/src/components/SidePanel/SidePanel.module.css deleted file mode 100644 index e6dd02cbbb1..00000000000 --- a/packages/ui/src/components/SidePanel/SidePanel.module.css +++ /dev/null @@ -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; -} diff --git a/packages/ui/src/components/Tabs/TabsProvider.tsx b/packages/ui/src/components/Tabs/TabsProvider.tsx deleted file mode 100644 index f0857803357..00000000000 --- a/packages/ui/src/components/Tabs/TabsProvider.tsx +++ /dev/null @@ -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> -} - -const TabsContext = createContext({ - 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([]) - - return {children} -} - -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 diff --git a/packages/ui/src/components/ThemeProvider/index.tsx b/packages/ui/src/components/ThemeProvider/index.tsx deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/ui/src/components/Typography/Link.module.css b/packages/ui/src/components/Typography/Link.module.css deleted file mode 100644 index 448eb19b3f4..00000000000 --- a/packages/ui/src/components/Typography/Link.module.css +++ /dev/null @@ -1,3 +0,0 @@ -a.sbui-typography-link { - @apply text-sm text-brand-400 dark:text-brand-400 cursor-pointer; -} diff --git a/packages/ui/src/components/Typography/Link.tsx b/packages/ui/src/components/Typography/Link.tsx deleted file mode 100644 index a2d97cda1eb..00000000000 --- a/packages/ui/src/components/Typography/Link.tsx +++ /dev/null @@ -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 ( - - {children} - - ) -} - -export default Link diff --git a/packages/ui/src/components/Typography/Text.module.css b/packages/ui/src/components/Typography/Text.module.css deleted file mode 100644 index 8d587ab58af..00000000000 --- a/packages/ui/src/components/Typography/Text.module.css +++ /dev/null @@ -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; -} diff --git a/packages/ui/src/components/Typography/Text.tsx b/packages/ui/src/components/Typography/Text.tsx deleted file mode 100644 index 468d307b1f6..00000000000 --- a/packages/ui/src/components/Typography/Text.tsx +++ /dev/null @@ -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 ( - - {children} - - ) - if (mark) - return ( - - {children} - - ) - if (keyboard) - return ( - - {children} - - ) - if (strong) - return ( - - {children} - - ) - return ( - - {children} - - ) -} - -export default Text diff --git a/packages/ui/src/components/Typography/Title.module.css b/packages/ui/src/components/Typography/Title.module.css deleted file mode 100644 index ac9e4afb084..00000000000 --- a/packages/ui/src/components/Typography/Title.module.css +++ /dev/null @@ -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; -} */ diff --git a/packages/ui/src/components/Typography/Title.tsx b/packages/ui/src/components/Typography/Title.tsx deleted file mode 100644 index 800852b02b5..00000000000 --- a/packages/ui/src/components/Typography/Title.tsx +++ /dev/null @@ -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 ( - - {children} - - ) -} - -export default Title diff --git a/packages/ui/src/components/Typography/Typography.module.css b/packages/ui/src/components/Typography/Typography.module.css deleted file mode 100644 index 625e033ec44..00000000000 --- a/packages/ui/src/components/Typography/Typography.module.css +++ /dev/null @@ -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'; -} diff --git a/packages/ui/src/components/Typography/Typography.tsx b/packages/ui/src/components/Typography/Typography.tsx deleted file mode 100644 index 059f84acf14..00000000000 --- a/packages/ui/src/components/Typography/Typography.tsx +++ /dev/null @@ -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 ( - - {children} - - ) -} - -Typography.Title = Title -Typography.Text = Text -Typography.Link = Link - -export default Typography diff --git a/packages/ui/src/components/Typography/index.tsx b/packages/ui/src/components/Typography/index.tsx deleted file mode 100644 index fbe8128e16d..00000000000 --- a/packages/ui/src/components/Typography/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import Typography from './Typography' - -export default Typography -export { default as Typography } from './Typography' diff --git a/packages/ui/src/components/shadcn/hooks/useMobile.ts b/packages/ui/src/components/shadcn/hooks/useMobile.ts deleted file mode 100644 index 4331d5c5620..00000000000 --- a/packages/ui/src/components/shadcn/hooks/useMobile.ts +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react' - -const MOBILE_BREAKPOINT = 768 - -export function useIsMobile() { - const [isMobile, setIsMobile] = React.useState(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 -} diff --git a/packages/ui/src/lib/Layout/FormLayout/FormLayout.module.css b/packages/ui/src/lib/Layout/FormLayout/FormLayout.module.css deleted file mode 100644 index 4471eaef357..00000000000 --- a/packages/ui/src/lib/Layout/FormLayout/FormLayout.module.css +++ /dev/null @@ -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; -} */ diff --git a/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx b/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx deleted file mode 100644 index 5ed16265e3f..00000000000 --- a/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx +++ /dev/null @@ -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 = [] - - containerClasses.push(__styles.size[size]) - - let labelContainerClasses: Array = [] - let dataInputContainerClasses: Array = [] - - 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 && ( -

- {error} -

- ) - - const renderDescription = descriptionText && ( -
- {descriptionText} -
- ) - - return ( -
- {flex &&
{children}
} - {labelled || labelOptional || layout === 'horizontal' ? ( -
- {labelled && ( - - )} - {labelOptional && ( - - {labelOptional} - - )} - {flex && ( - <> - {renderDescription} - {renderError} - - )} -
- ) : null} - {!flex && ( -
- <> -
- {children} -
- {renderError} - {renderDescription} - -
- )} -
- ) -} diff --git a/packages/ui/src/lib/Layout/FormLayout/index.tsx b/packages/ui/src/lib/Layout/FormLayout/index.tsx deleted file mode 100644 index ff2fa96f3bc..00000000000 --- a/packages/ui/src/lib/Layout/FormLayout/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { FormLayout } from './FormLayout' diff --git a/packages/ui/src/lib/Layout/InputErrorIcon.module.css b/packages/ui/src/lib/Layout/InputErrorIcon.module.css deleted file mode 100644 index 2cadd14536f..00000000000 --- a/packages/ui/src/lib/Layout/InputErrorIcon.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.sbui-input-error-icon { - @apply inset-y-0 right-3 pr-2 pl-2 flex items-center pointer-events-none; -} diff --git a/packages/ui/src/lib/Layout/InputErrorIcon.tsx b/packages/ui/src/lib/Layout/InputErrorIcon.tsx deleted file mode 100644 index f1a48db0c41..00000000000 --- a/packages/ui/src/lib/Layout/InputErrorIcon.tsx +++ /dev/null @@ -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 ( -
- -
- ) -} diff --git a/packages/ui/src/lib/Layout/InputIconContainer.module.css b/packages/ui/src/lib/Layout/InputIconContainer.module.css deleted file mode 100644 index ac9cbf96c20..00000000000 --- a/packages/ui/src/lib/Layout/InputIconContainer.module.css +++ /dev/null @@ -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; -} diff --git a/packages/ui/src/lib/Layout/InputIconContainer.tsx b/packages/ui/src/lib/Layout/InputIconContainer.tsx deleted file mode 100644 index 240a41f9bd3..00000000000 --- a/packages/ui/src/lib/Layout/InputIconContainer.tsx +++ /dev/null @@ -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
{icon}
-} diff --git a/packages/ui/src/lib/Spinner/index.ts b/packages/ui/src/lib/Spinner/index.ts deleted file mode 100644 index fb38c417455..00000000000 --- a/packages/ui/src/lib/Spinner/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -// export function() { -// return ( - -// ) -// } diff --git a/packages/ui/src/lib/Spinner/styles.module.css b/packages/ui/src/lib/Spinner/styles.module.css deleted file mode 100644 index ed2d7f5c929..00000000000 --- a/packages/ui/src/lib/Spinner/styles.module.css +++ /dev/null @@ -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); - } -} diff --git a/packages/ui/src/lib/theme/themeContext.tsx b/packages/ui/src/lib/theme/themeContext.tsx deleted file mode 100644 index 2126c1ca65a..00000000000 --- a/packages/ui/src/lib/theme/themeContext.tsx +++ /dev/null @@ -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({ - theme: defaultTheme, - // mode: 'light', - // toggleMode: true, -}) - -interface Props extends React.HTMLAttributes { - 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 = ({ - 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 {children} -} - -export default themeWrapper diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts deleted file mode 100644 index 0af236b4966..00000000000 --- a/packages/ui/src/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -export interface AnimationTailwindClasses { - enter?: string - enterFrom?: string - enterTo?: string - leave?: string - leaveFrom?: string - leaveTo?: string -}