From 8f402c82522775dc00c978bd4ba718c89d422932 Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Tue, 2 Jan 2024 16:24:41 +0800 Subject: [PATCH] @sd/assets/react --- apps/landing/src/app/Downloads/Platform.tsx | 4 +- apps/landing/src/app/Downloads/index.tsx | 2 +- apps/landing/src/app/Footer.tsx | 2 +- .../landing/src/app/NavBar/MobileDropdown.tsx | 8 +- apps/landing/src/app/NavBar/index.tsx | 2 +- apps/landing/src/app/docs/[...slug]/page.tsx | 2 +- apps/landing/src/app/team/TeamMember.tsx | 2 +- apps/landing/src/components/Footer.tsx | 2 +- apps/landing/src/components/NavBar.tsx | 2 +- apps/landing/src/utils/util.ts | 2 +- .../src/components/explorer/FileThumb.tsx | 2 +- .../src/components/icons/FolderIcon.tsx | 2 +- apps/mobile/src/components/icons/Icon.tsx | 2 +- apps/mobile/src/components/job/JobGroup.tsx | 2 +- .../src/screens/onboarding/GetStarted.tsx | 2 +- apps/storybook-solid/.gitignore | 24 + apps/storybook-solid/.storybook/main.ts | 37 + .../.storybook/preview-head.html | 3 + apps/storybook-solid/.storybook/preview.ts | 12 + apps/storybook-solid/index.html | 13 + apps/storybook-solid/package.json | 30 + apps/storybook-solid/postcss.config.js | 10 + apps/storybook-solid/public/vite.svg | 1 + apps/storybook-solid/tailwind.config.js | 1 + apps/storybook-solid/tsconfig.json | 20 + apps/storybook-solid/vite.config.ts | 4 + .../Explorer/FilePath/LayeredFileIcon.tsx | 2 +- .../$libraryId/Explorer/FilePath/Original.tsx | 3 +- .../$libraryId/Explorer/FilePath/Thumb.tsx | 4 +- .../Layout/Sidebar/JobManager/JobGroup.tsx | 2 +- interface/app/$libraryId/Search/index.tsx | 2 +- interface/app/$libraryId/Search/util.tsx | 2 +- interface/app/$libraryId/ephemeral.tsx | 2 +- interface/app/$libraryId/saved-search/$id.tsx | 2 +- .../$libraryId/settings/client/account.tsx | 2 +- .../app/$libraryId/settings/client/usage.tsx | 2 +- .../$libraryId/settings/resources/about.tsx | 2 +- interface/app/onboarding/Layout.tsx | 2 +- interface/app/onboarding/alpha.tsx | 4 +- interface/app/onboarding/full-disk.tsx | 4 +- interface/app/onboarding/login.tsx | 2 +- interface/components/Folder.tsx | 2 +- interface/components/Icon.tsx | 2 +- packages/assets/icons/index.ts | 346 -- packages/assets/images/index.ts | 30 - packages/assets/package.json | 5 + packages/assets/react/icons/index.ts | 174 + packages/assets/react/images/index.ts | 16 + packages/assets/react/svgs/brands/index.ts | 16 + packages/assets/react/svgs/ext/Code/index.ts | 22 + .../assets/react/svgs/ext/Extras/index.ts | 289 ++ packages/assets/react/svgs/ext/index.ts | 11 + packages/assets/{ => react}/util/index.ts | 14 +- packages/assets/react/videos/index.ts | 6 + packages/assets/scripts/generate.mjs | 83 +- packages/assets/solid/icons/index.ts | 174 + packages/assets/solid/images/index.ts | 16 + packages/assets/solid/svgs/brands/index.ts | 16 + packages/assets/solid/svgs/ext/Code/index.ts | 22 + .../assets/solid/svgs/ext/Extras/index.ts | 289 ++ packages/assets/solid/svgs/ext/index.ts | 11 + packages/assets/solid/util/index.ts | 73 + packages/assets/solid/videos/index.ts | 6 + packages/assets/svgs/ext/Code/index.ts | 42 - packages/assets/svgs/ext/Extras/index.ts | 576 --- packages/assets/videos/index.ts | 3 - packages/config/package.json | 7 + packages/config/solid.tsconfig.json | 23 + packages/config/vite-solid/index.ts | 21 + .../vite-solid/relativeAliasResolver.ts | 82 + packages/ui-solid/.eslintrc.js | 7 + packages/ui-solid/package.json | 54 + packages/ui-solid/postcss.config.js | 3 + packages/ui-solid/src/Button.stories.tsx | 66 + packages/ui-solid/src/Button.tsx | 116 + packages/ui-solid/src/index.ts | 1 + packages/ui-solid/style/colors.scss | 117 + packages/ui-solid/style/index.js | 1 + packages/ui-solid/style/postcss.config.js | 1 + packages/ui-solid/style/style.scss | 65 + packages/ui-solid/style/tailwind.js | 213 + packages/ui-solid/style/tailwind.pcss | 4 + packages/ui-solid/tailwind.config.js | 5 + packages/ui-solid/tsconfig.json | 8 + pnpm-lock.yaml | 4137 ++++++++++++++--- 85 files changed, 5663 insertions(+), 1742 deletions(-) create mode 100644 apps/storybook-solid/.gitignore create mode 100644 apps/storybook-solid/.storybook/main.ts create mode 100644 apps/storybook-solid/.storybook/preview-head.html create mode 100644 apps/storybook-solid/.storybook/preview.ts create mode 100644 apps/storybook-solid/index.html create mode 100644 apps/storybook-solid/package.json create mode 100644 apps/storybook-solid/postcss.config.js create mode 100644 apps/storybook-solid/public/vite.svg create mode 100644 apps/storybook-solid/tailwind.config.js create mode 100644 apps/storybook-solid/tsconfig.json create mode 100644 apps/storybook-solid/vite.config.ts delete mode 100644 packages/assets/icons/index.ts delete mode 100644 packages/assets/images/index.ts create mode 100644 packages/assets/react/icons/index.ts create mode 100644 packages/assets/react/images/index.ts create mode 100644 packages/assets/react/svgs/brands/index.ts create mode 100644 packages/assets/react/svgs/ext/Code/index.ts create mode 100644 packages/assets/react/svgs/ext/Extras/index.ts create mode 100644 packages/assets/react/svgs/ext/index.ts rename packages/assets/{ => react}/util/index.ts (90%) create mode 100644 packages/assets/react/videos/index.ts create mode 100644 packages/assets/solid/icons/index.ts create mode 100644 packages/assets/solid/images/index.ts create mode 100644 packages/assets/solid/svgs/brands/index.ts create mode 100644 packages/assets/solid/svgs/ext/Code/index.ts create mode 100644 packages/assets/solid/svgs/ext/Extras/index.ts create mode 100644 packages/assets/solid/svgs/ext/index.ts create mode 100644 packages/assets/solid/util/index.ts create mode 100644 packages/assets/solid/videos/index.ts delete mode 100644 packages/assets/svgs/ext/Code/index.ts delete mode 100644 packages/assets/svgs/ext/Extras/index.ts delete mode 100644 packages/assets/videos/index.ts create mode 100644 packages/config/solid.tsconfig.json create mode 100644 packages/config/vite-solid/index.ts create mode 100644 packages/config/vite-solid/relativeAliasResolver.ts create mode 100644 packages/ui-solid/.eslintrc.js create mode 100644 packages/ui-solid/package.json create mode 100644 packages/ui-solid/postcss.config.js create mode 100644 packages/ui-solid/src/Button.stories.tsx create mode 100644 packages/ui-solid/src/Button.tsx create mode 100644 packages/ui-solid/src/index.ts create mode 100644 packages/ui-solid/style/colors.scss create mode 100644 packages/ui-solid/style/index.js create mode 100644 packages/ui-solid/style/postcss.config.js create mode 100644 packages/ui-solid/style/style.scss create mode 100644 packages/ui-solid/style/tailwind.js create mode 100644 packages/ui-solid/style/tailwind.pcss create mode 100644 packages/ui-solid/tailwind.config.js create mode 100644 packages/ui-solid/tsconfig.json diff --git a/apps/landing/src/app/Downloads/Platform.tsx b/apps/landing/src/app/Downloads/Platform.tsx index e7b5decc3..7fa3d77c0 100644 --- a/apps/landing/src/app/Downloads/Platform.tsx +++ b/apps/landing/src/app/Downloads/Platform.tsx @@ -1,7 +1,7 @@ 'use client'; import { AndroidLogo, Globe, Icon, LinuxLogo, WindowsLogo } from '@phosphor-icons/react'; -import { Apple, Docker } from '@sd/assets/svgs/brands'; +import { Apple, Docker } from '@sd/assets/react/svgs/brands'; import { ComponentProps, FunctionComponent, useEffect, useState } from 'react'; import { Tooltip } from '@sd/ui'; @@ -86,7 +86,7 @@ export function Platform({ platform, ...props }: ComponentProps<'a'> & PlatformP href={`${BASE_DL_LINK}/${platform.os}/${links[0].arch}`} {...props} /> - ) + ) : (props: any) => } diff --git a/apps/landing/src/app/NavBar/index.tsx b/apps/landing/src/app/NavBar/index.tsx index fdb4f2e10..70c1d7aff 100644 --- a/apps/landing/src/app/NavBar/index.tsx +++ b/apps/landing/src/app/NavBar/index.tsx @@ -1,4 +1,4 @@ -import { Discord, Github } from '@sd/assets/svgs/brands'; +import { Discord, Github } from '@sd/assets/react/svgs/brands'; import Image from 'next/image'; import Link from 'next/link'; import { PropsWithChildren } from 'react'; diff --git a/apps/landing/src/app/docs/[...slug]/page.tsx b/apps/landing/src/app/docs/[...slug]/page.tsx index acc448e07..2a5512152 100644 --- a/apps/landing/src/app/docs/[...slug]/page.tsx +++ b/apps/landing/src/app/docs/[...slug]/page.tsx @@ -1,6 +1,6 @@ import { allDocs } from '@contentlayer/generated'; import { CaretRight } from '@phosphor-icons/react/dist/ssr'; -import { Github } from '@sd/assets/svgs/brands'; +import { Github } from '@sd/assets/react/svgs/brands'; import { Metadata } from 'next'; import { getMDXComponent } from 'next-contentlayer/hooks'; import Link from 'next/link'; diff --git a/apps/landing/src/app/team/TeamMember.tsx b/apps/landing/src/app/team/TeamMember.tsx index 7dcf136c1..dc8bdd849 100644 --- a/apps/landing/src/app/team/TeamMember.tsx +++ b/apps/landing/src/app/team/TeamMember.tsx @@ -1,4 +1,4 @@ -import { Dribbble, Github, Gitlab, Twitch, Twitter } from '@sd/assets/svgs/brands'; +import { Dribbble, Github, Gitlab, Twitch, Twitter } from '@sd/assets/react/svgs/brands'; import clsx from 'clsx'; import Image from 'next/image'; import NextLink from 'next/link'; diff --git a/apps/landing/src/components/Footer.tsx b/apps/landing/src/components/Footer.tsx index a1e882b9a..276094d32 100644 --- a/apps/landing/src/components/Footer.tsx +++ b/apps/landing/src/components/Footer.tsx @@ -5,7 +5,7 @@ import { Opencollective, Twitch, Twitter -} from '@sd/assets/svgs/brands'; +} from '@sd/assets/react/svgs/brands'; import Image from 'next/image'; import Link from 'next/link'; import { PropsWithChildren } from 'react'; diff --git a/apps/landing/src/components/NavBar.tsx b/apps/landing/src/components/NavBar.tsx index 2c96d9f76..315431532 100644 --- a/apps/landing/src/components/NavBar.tsx +++ b/apps/landing/src/components/NavBar.tsx @@ -1,5 +1,5 @@ import { Book, Chat, DotsThreeVertical, MapPin, User } from '@phosphor-icons/react/dist/ssr'; -import { Academia, Discord, Github } from '@sd/assets/svgs/brands'; +import { Academia, Discord, Github } from '@sd/assets/react/svgs/brands'; import clsx from 'clsx'; import Image from 'next/image'; import Link from 'next/link'; diff --git a/apps/landing/src/utils/util.ts b/apps/landing/src/utils/util.ts index 55d40df78..752f246eb 100644 --- a/apps/landing/src/utils/util.ts +++ b/apps/landing/src/utils/util.ts @@ -7,7 +7,7 @@ export function getWindow(): (Window & typeof globalThis) | null { } export function toTitleCase(str: string) { - return str + return (str ?? '') .toLowerCase() .replace(/(?:^|[\s-/])\w/g, function (match) { return match.toUpperCase(); diff --git a/apps/mobile/src/components/explorer/FileThumb.tsx b/apps/mobile/src/components/explorer/FileThumb.tsx index a8b9e65f1..da9cbfdd8 100644 --- a/apps/mobile/src/components/explorer/FileThumb.tsx +++ b/apps/mobile/src/components/explorer/FileThumb.tsx @@ -1,4 +1,4 @@ -import { getIcon } from '@sd/assets/util'; +import { getIcon } from '@sd/assets/react/util'; import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react'; import { Image, View } from 'react-native'; import { DocumentDirectoryPath } from 'react-native-fs'; diff --git a/apps/mobile/src/components/icons/FolderIcon.tsx b/apps/mobile/src/components/icons/FolderIcon.tsx index 474cf703e..2214329d4 100644 --- a/apps/mobile/src/components/icons/FolderIcon.tsx +++ b/apps/mobile/src/components/icons/FolderIcon.tsx @@ -1,4 +1,4 @@ -import { Folder, Folder_Light } from '@sd/assets/icons'; +import { Folder, Folder_Light } from '@sd/assets/react/icons'; import { Image } from 'react-native'; type FolderProps = { diff --git a/apps/mobile/src/components/icons/Icon.tsx b/apps/mobile/src/components/icons/Icon.tsx index 4248a34c7..63032d19e 100644 --- a/apps/mobile/src/components/icons/Icon.tsx +++ b/apps/mobile/src/components/icons/Icon.tsx @@ -1,4 +1,4 @@ -import { getIcon, iconNames } from '@sd/assets/util'; +import { getIcon, iconNames } from '@sd/assets/react/util'; import { Image, ImageProps } from 'react-native'; import { isDarkTheme } from '@sd/client'; diff --git a/apps/mobile/src/components/job/JobGroup.tsx b/apps/mobile/src/components/job/JobGroup.tsx index 141bcba92..327df9847 100644 --- a/apps/mobile/src/components/job/JobGroup.tsx +++ b/apps/mobile/src/components/job/JobGroup.tsx @@ -1,4 +1,4 @@ -import { Folder } from '@sd/assets/icons'; +import { Folder } from '@sd/assets/react/icons'; import dayjs from 'dayjs'; import { DotsThreeVertical, Pause, Play, Stop } from 'phosphor-react-native'; import { useMemo, useState } from 'react'; diff --git a/apps/mobile/src/screens/onboarding/GetStarted.tsx b/apps/mobile/src/screens/onboarding/GetStarted.tsx index bc9550c59..ba3febaae 100644 --- a/apps/mobile/src/screens/onboarding/GetStarted.tsx +++ b/apps/mobile/src/screens/onboarding/GetStarted.tsx @@ -1,5 +1,5 @@ import { useNavigation, useRoute } from '@react-navigation/native'; -import { AppLogo, BloomOne } from '@sd/assets/images'; +import { AppLogo, BloomOne } from '@sd/assets/react/images'; import { MotiView } from 'moti'; import { CaretLeft } from 'phosphor-react-native'; import { Image, KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native'; diff --git a/apps/storybook-solid/.gitignore b/apps/storybook-solid/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/apps/storybook-solid/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/apps/storybook-solid/.storybook/main.ts b/apps/storybook-solid/.storybook/main.ts new file mode 100644 index 000000000..2df20bead --- /dev/null +++ b/apps/storybook-solid/.storybook/main.ts @@ -0,0 +1,37 @@ +import type { StorybookConfig } from 'storybook-solidjs-vite'; + +const config: StorybookConfig = { + stories: [ + { + directory: '../../../packages/ui-solid/src/**', + titlePrefix: 'UI', + files: '*.stories.*' + } + // { + // directory: '../../../interface-solid/app/**', + // titlePrefix: 'Interface', + // files: '*.stories.*' + // } + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + { + name: '@storybook/addon-styling', + options: { + // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md + // For more details on this addon's options. + postCss: true + } + } + ], + framework: { + name: 'storybook-solidjs-vite', + options: {} + }, + docs: { + autodocs: 'tag' + } +}; +export default config; diff --git a/apps/storybook-solid/.storybook/preview-head.html b/apps/storybook-solid/.storybook/preview-head.html new file mode 100644 index 000000000..b617b7b8d --- /dev/null +++ b/apps/storybook-solid/.storybook/preview-head.html @@ -0,0 +1,3 @@ + diff --git a/apps/storybook-solid/.storybook/preview.ts b/apps/storybook-solid/.storybook/preview.ts new file mode 100644 index 000000000..5ab64b01e --- /dev/null +++ b/apps/storybook-solid/.storybook/preview.ts @@ -0,0 +1,12 @@ +import '@sd/ui/style/style.scss'; + +/** Autogenerated by Storybook */ +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/ + } + } +}; diff --git a/apps/storybook-solid/index.html b/apps/storybook-solid/index.html new file mode 100644 index 000000000..ef80c79b3 --- /dev/null +++ b/apps/storybook-solid/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/apps/storybook-solid/package.json b/apps/storybook-solid/package.json new file mode 100644 index 000000000..470fb5c9a --- /dev/null +++ b/apps/storybook-solid/package.json @@ -0,0 +1,30 @@ +{ + "name": "@sd/storybook", + "private": true, + "scripts": { + "dev": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "dependencies": { + "@storybook/addon-essentials": "^7.6.6", + "@storybook/addon-interactions": "^7.6.6", + "@storybook/addon-links": "^7.6.6", + "@storybook/blocks": "^7.6.6", + "@storybook/testing-library": "^0.2.2", + "solid-js": "^1.8.7", + "storybook": "^7.6.6", + "storybook-solidjs": "^1.0.0-beta.2", + "eslint-plugin-storybook": "^0.6.15", + "storybook-solidjs-vite": "^1.0.0-beta.2" + }, + "devDependencies": { + "@sd/config": "workspace:*", + "@sd/ui": "workspace:*", + "autoprefixer": "^10.4.16", + "postcss": "^8.4.31", + "postcss-pseudo-companion-classes": "^0.1.1", + "tailwindcss": "^3.3.5", + "typescript": "^5.2.2", + "vite": "^4.5.0" + } +} diff --git a/apps/storybook-solid/postcss.config.js b/apps/storybook-solid/postcss.config.js new file mode 100644 index 000000000..de2771441 --- /dev/null +++ b/apps/storybook-solid/postcss.config.js @@ -0,0 +1,10 @@ +module.exports = { + plugins: { + 'tailwindcss': {}, + 'autoprefixer': {}, + 'postcss-pseudo-companion-classes': { + prefix: 'sb-pseudo--', + restrictTo: [':hover', ':focus'] + } + } +}; diff --git a/apps/storybook-solid/public/vite.svg b/apps/storybook-solid/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/apps/storybook-solid/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storybook-solid/tailwind.config.js b/apps/storybook-solid/tailwind.config.js new file mode 100644 index 000000000..198f2f062 --- /dev/null +++ b/apps/storybook-solid/tailwind.config.js @@ -0,0 +1 @@ +module.exports = require('@sd/ui/tailwind')('web'); diff --git a/apps/storybook-solid/tsconfig.json b/apps/storybook-solid/tsconfig.json new file mode 100644 index 000000000..fbafb8f40 --- /dev/null +++ b/apps/storybook-solid/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js" + } +} diff --git a/apps/storybook-solid/vite.config.ts b/apps/storybook-solid/vite.config.ts new file mode 100644 index 000000000..08ce6cc1d --- /dev/null +++ b/apps/storybook-solid/vite.config.ts @@ -0,0 +1,4 @@ +import baseConfig from '../../packages/config/vite-solid'; + +// https://vitejs.dev/config/ +export default baseConfig; diff --git a/interface/app/$libraryId/Explorer/FilePath/LayeredFileIcon.tsx b/interface/app/$libraryId/Explorer/FilePath/LayeredFileIcon.tsx index 4656dc4b9..424ae527b 100644 --- a/interface/app/$libraryId/Explorer/FilePath/LayeredFileIcon.tsx +++ b/interface/app/$libraryId/Explorer/FilePath/LayeredFileIcon.tsx @@ -1,4 +1,4 @@ -import { getLayeredIcon } from '@sd/assets/util'; +import { getLayeredIcon } from '@sd/assets/react/util'; import clsx from 'clsx'; import { forwardRef, type ImgHTMLAttributes } from 'react'; import { type ObjectKindKey } from '@sd/client'; diff --git a/interface/app/$libraryId/Explorer/FilePath/Original.tsx b/interface/app/$libraryId/Explorer/FilePath/Original.tsx index f1f7a83d0..ef0f90025 100644 --- a/interface/app/$libraryId/Explorer/FilePath/Original.tsx +++ b/interface/app/$libraryId/Explorer/FilePath/Original.tsx @@ -1,7 +1,6 @@ -import { getIcon, iconNames } from '@sd/assets/util'; +import { getIcon, iconNames } from '@sd/assets/react/util'; import clsx from 'clsx'; import { - memo, SyntheticEvent, useEffect, useMemo, diff --git a/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx b/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx index 02170cbe5..b6d65e25d 100644 --- a/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx +++ b/interface/app/$libraryId/Explorer/FilePath/Thumb.tsx @@ -1,4 +1,4 @@ -import { getIcon, getIconByName } from '@sd/assets/util'; +import { getIcon, getIconByName } from '@sd/assets/react/util'; import clsx from 'clsx'; import { forwardRef, @@ -155,7 +155,7 @@ export const FileThumb = forwardRef((props, ref) = ? [ 'min-h-full min-w-full object-cover object-center', _childClassName - ] + ] : className, props.frame && !(itemData.kind === 'Video' && props.blackBars) ? frameClassName diff --git a/interface/app/$libraryId/Layout/Sidebar/JobManager/JobGroup.tsx b/interface/app/$libraryId/Layout/Sidebar/JobManager/JobGroup.tsx index a70704736..e9758359e 100644 --- a/interface/app/$libraryId/Layout/Sidebar/JobManager/JobGroup.tsx +++ b/interface/app/$libraryId/Layout/Sidebar/JobManager/JobGroup.tsx @@ -1,5 +1,5 @@ import { DotsThreeVertical, Eye, Pause, Play, Stop, Trash } from '@phosphor-icons/react'; -import { Folder } from '@sd/assets/icons'; +import { Folder } from '@sd/assets/react/icons'; import { useQueryClient } from '@tanstack/react-query'; import clsx from 'clsx'; import dayjs from 'dayjs'; diff --git a/interface/app/$libraryId/Search/index.tsx b/interface/app/$libraryId/Search/index.tsx index 8153c43ef..31b8b17aa 100644 --- a/interface/app/$libraryId/Search/index.tsx +++ b/interface/app/$libraryId/Search/index.tsx @@ -1,5 +1,5 @@ import { CaretRight, FunnelSimple, Icon, Plus } from '@phosphor-icons/react'; -import { IconTypes } from '@sd/assets/util'; +import { IconTypes } from '@sd/assets/react/util'; import clsx from 'clsx'; import { memo, PropsWithChildren, useDeferredValue, useState } from 'react'; import { useLibraryMutation } from '@sd/client'; diff --git a/interface/app/$libraryId/Search/util.tsx b/interface/app/$libraryId/Search/util.tsx index be4a4948a..3db0a6a37 100644 --- a/interface/app/$libraryId/Search/util.tsx +++ b/interface/app/$libraryId/Search/util.tsx @@ -1,5 +1,5 @@ import { CircleDashed, Folder, Icon, Tag } from '@phosphor-icons/react'; -import { IconTypes } from '@sd/assets/util'; +import { IconTypes } from '@sd/assets/react/util'; import clsx from 'clsx'; import { Icon as SDIcon } from '~/components'; diff --git a/interface/app/$libraryId/ephemeral.tsx b/interface/app/$libraryId/ephemeral.tsx index 4053ef246..8666b2c9d 100644 --- a/interface/app/$libraryId/ephemeral.tsx +++ b/interface/app/$libraryId/ephemeral.tsx @@ -1,6 +1,6 @@ import { ArrowLeft, ArrowRight, Info } from '@phosphor-icons/react'; import * as Dialog from '@radix-ui/react-dialog'; -import { iconNames } from '@sd/assets/util'; +import { iconNames } from '@sd/assets/react/util'; import clsx from 'clsx'; import { memo, Suspense, useDeferredValue, useMemo } from 'react'; import { useLocation } from 'react-router'; diff --git a/interface/app/$libraryId/saved-search/$id.tsx b/interface/app/$libraryId/saved-search/$id.tsx index 74c12d7ab..7db62d633 100644 --- a/interface/app/$libraryId/saved-search/$id.tsx +++ b/interface/app/$libraryId/saved-search/$id.tsx @@ -1,5 +1,5 @@ import { MagnifyingGlass } from '@phosphor-icons/react'; -import { getIcon, iconNames } from '@sd/assets/util'; +import { getIcon, iconNames } from '@sd/assets/react/util'; import { useMemo } from 'react'; import { FilePathOrder, diff --git a/interface/app/$libraryId/settings/client/account.tsx b/interface/app/$libraryId/settings/client/account.tsx index 16fa22646..06828bc31 100644 --- a/interface/app/$libraryId/settings/client/account.tsx +++ b/interface/app/$libraryId/settings/client/account.tsx @@ -1,5 +1,5 @@ import { Envelope, User } from '@phosphor-icons/react'; -import { iconNames } from '@sd/assets/util'; +import { iconNames } from '@sd/assets/react/util'; import { auth, useBridgeQuery } from '@sd/client'; import { Button, Card } from '@sd/ui'; import { Icon, TruncatedText } from '~/components'; diff --git a/interface/app/$libraryId/settings/client/usage.tsx b/interface/app/$libraryId/settings/client/usage.tsx index 4e8e336c5..fb49367df 100644 --- a/interface/app/$libraryId/settings/client/usage.tsx +++ b/interface/app/$libraryId/settings/client/usage.tsx @@ -1,4 +1,4 @@ -import { iconNames } from '@sd/assets/util'; +import { iconNames } from '@sd/assets/react/util'; import { memo, useEffect, useMemo, useState } from 'react'; import { byteSize, useDiscoveredPeers, useLibraryQuery, useNodes } from '@sd/client'; import { Card } from '@sd/ui'; diff --git a/interface/app/$libraryId/settings/resources/about.tsx b/interface/app/$libraryId/settings/resources/about.tsx index 38371141d..892df1e66 100644 --- a/interface/app/$libraryId/settings/resources/about.tsx +++ b/interface/app/$libraryId/settings/resources/about.tsx @@ -1,5 +1,5 @@ import { Globe } from '@phosphor-icons/react'; -import { AppLogo } from '@sd/assets/images'; +import { AppLogo } from '@sd/assets/react/images'; import { Discord, Github } from '@sd/assets/svgs/brands'; import { useBridgeQuery, useDebugStateEnabler } from '@sd/client'; import { Button, Divider } from '@sd/ui'; diff --git a/interface/app/onboarding/Layout.tsx b/interface/app/onboarding/Layout.tsx index 98455949d..86501d7e7 100644 --- a/interface/app/onboarding/Layout.tsx +++ b/interface/app/onboarding/Layout.tsx @@ -1,4 +1,4 @@ -import { BloomOne } from '@sd/assets/images'; +import { BloomOne } from '@sd/assets/react/images'; import clsx from 'clsx'; import { Navigate, Outlet } from 'react-router'; import { useDebugState } from '@sd/client'; diff --git a/interface/app/onboarding/alpha.tsx b/interface/app/onboarding/alpha.tsx index 95ede77ea..1e741f710 100644 --- a/interface/app/onboarding/alpha.tsx +++ b/interface/app/onboarding/alpha.tsx @@ -1,5 +1,5 @@ -import { AlphaBg, AlphaBg_Light, AppLogo } from '@sd/assets/images'; -import { Discord } from '@sd/assets/svgs/brands'; +import { AlphaBg, AlphaBg_Light, AppLogo } from '@sd/assets/react/images'; +import { Discord } from '@sd/assets/react/svgs/brands'; import { Button, ButtonLink } from '@sd/ui'; import { useIsDark } from '~/hooks'; import { usePlatform } from '~/util/Platform'; diff --git a/interface/app/onboarding/full-disk.tsx b/interface/app/onboarding/full-disk.tsx index e537363fc..0c5c894b0 100644 --- a/interface/app/onboarding/full-disk.tsx +++ b/interface/app/onboarding/full-disk.tsx @@ -1,4 +1,4 @@ -import { Fda } from '@sd/assets/videos'; +import { fda } from '@sd/assets/react/videos'; import { useNavigate } from 'react-router'; import { Button } from '@sd/ui'; import { Icon } from '~/components'; @@ -19,7 +19,7 @@ export const FullDisk = () => { files. Your files are only available to you.
-
} + +
+
+

Hovered

+ + {(variant) => ( + + )} + +
+ +
+

Focused

+ + {(variant) => ( + + )} + +
+ + + ); +}; diff --git a/packages/ui-solid/src/Button.tsx b/packages/ui-solid/src/Button.tsx new file mode 100644 index 000000000..5a3953382 --- /dev/null +++ b/packages/ui-solid/src/Button.tsx @@ -0,0 +1,116 @@ +import { cva, cx, VariantProps } from 'class-variance-authority'; +import { ComponentProps, JSX, splitProps } from 'solid-js'; + +export interface ButtonBaseProps extends VariantProps {} + +export type ButtonProps = ButtonBaseProps & ComponentProps<'button'> & { href?: undefined }; + +export type LinkButtonProps = ButtonBaseProps & ComponentProps<'a'> & { href?: string }; + +type Button = { + (props: ButtonProps): JSX.Element; + (props: LinkButtonProps): JSX.Element; +}; + +const hasHref = (props: ButtonProps | LinkButtonProps): props is LinkButtonProps => 'href' in props; + +export const buttonStyles = cva( + [ + 'cursor-default items-center rounded-md border outline-none transition-colors duration-100', + 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70', + 'focus:ring-none focus:ring-offset-none cursor-pointer ring-offset-app-box' + ], + { + variants: { + size: { + icon: '!p-1', + lg: 'text-md px-3 py-1.5 font-medium', + md: 'px-2.5 py-1.5 text-sm font-medium', + sm: 'px-2 py-1 text-sm font-medium', + xs: 'px-1.5 py-0.5 text-xs font-normal' + }, + variant: { + default: [ + 'bg-transparent hover:bg-app-hover active:bg-app-selected', + 'border-transparent hover:border-app-line active:border-app-line' + ], + subtle: [ + 'border-transparent hover:border-app-line/50 active:border-app-line active:bg-app-box/30' + ], + outline: [ + 'border-sidebar-line/60 hover:border-sidebar-line active:border-sidebar-line/30' + ], + dotted: [ + `rounded border border-dashed border-sidebar-line/70 text-center text-xs font-medium text-ink-faint transition hover:border-sidebar-line hover:bg-sidebar-selected/5` + ], + gray: [ + 'bg-app-button hover:bg-app-hover focus:bg-app-selected', + 'border-app-line hover:border-app-line focus:ring-1 focus:ring-accent' + ], + accent: [ + 'border border-accent bg-accent text-white shadow-md shadow-app-shade/10 hover:bg-accent-faint focus:outline-none', + 'focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected' + ], + colored: ['text-white shadow-sm hover:bg-opacity-90 active:bg-opacity-100'], + bare: '' + }, + rounding: { + none: 'rounded-none', + left: 'rounded-l-md rounded-r-none', + right: 'rounded-l-none rounded-r-md', + both: 'rounded-md' + } + }, + defaultVariants: { + size: 'sm', + variant: 'default' + } + } +); + +export function Button(props: ButtonProps | LinkButtonProps) { + const [_, otherProps] = splitProps(props, ['size', 'variant', 'rounding', 'class']); + + const buttonClasses = () => + buttonStyles({ + size: props.size, + variant: props.variant, + rounding: props.rounding, + class: props.class + }); + + return ( + <> + {hasHref(props) ? ( + + ) : ( +