diff --git a/.changeset/pre.json b/.changeset/pre.json index ff0880674..2c2a42f60 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -32,7 +32,11 @@ "@saas-ui/next-workspaces": "0.3.0", "@saas-ui/props-docs": "2.3.3", "@saas-ui/storybook-addon": "6.0.1", - "@saas-ui/test-utils": "4.2.4" + "@saas-ui/test-utils": "4.2.4", + "next-app": "2.0.14", + "next-pages": "2.0.14", + "react-router-ts": "0.0.1", + "remix-ts": "1.0.0" }, "changesets": [ "afraid-avocados-roll", @@ -67,6 +71,7 @@ "fair-kings-battle", "fair-pants-grab", "famous-clocks-relate", + "fancy-camels-hope", "fast-dolls-jump", "fast-hats-prove", "fifty-balloons-stare", diff --git a/apps/compositions/CHANGELOG.md b/apps/compositions/CHANGELOG.md index 43eb0b62f..99380cebf 100644 --- a/apps/compositions/CHANGELOG.md +++ b/apps/compositions/CHANGELOG.md @@ -1,5 +1,13 @@ # @chakra-ui/compositions +## 1.0.1-next.41 + +### Patch Changes + +- Updated dependencies [a635505] + - @saas-ui/forms@3.0.0-next.41 + - @saas-ui/react@3.0.0-next.41 + ## 1.0.1-next.40 ### Patch Changes diff --git a/apps/compositions/package.json b/apps/compositions/package.json index 29fe91f78..3b40dad5a 100644 --- a/apps/compositions/package.json +++ b/apps/compositions/package.json @@ -1,6 +1,6 @@ { "name": "@chakra-ui/compositions", - "version": "1.0.1-next.40", + "version": "1.0.1-next.41", "description": "Registry for component compositions", "scripts": { "typecheck": "tsc --noEmit" diff --git a/apps/palette/app/layout.tsx b/apps/palette/app/layout.tsx new file mode 100644 index 000000000..bea390dcb --- /dev/null +++ b/apps/palette/app/layout.tsx @@ -0,0 +1,21 @@ +// import '@fontsource/inter/variable.css' +import Providers from '@/providers/providers' + +// const themes: Record = { +// 'Chakra UI': baseTheme, +// 'Saas UI': saasTheme, +// Glass: glassTheme, +// } + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( + + + + + + {children} + + + ) +} diff --git a/apps/palette/app/page.tsx b/apps/palette/app/page.tsx new file mode 100644 index 000000000..5a08a88be --- /dev/null +++ b/apps/palette/app/page.tsx @@ -0,0 +1,36 @@ +import ColorsPage from '@/components' +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Color palette generator', + description: 'Quickly generate custom color palettes for Chakra UI.', + openGraph: { + title: 'Saas UI: Color Palette Generator', + description: 'Quickly generate custom color palettes for Chakra UI.', + url: 'https://palette.saas-ui.dev', + siteName: 'Saas UI: Color Palette Generator for Chakra UI.', + images: [ + { + url: 'https://palette.saas-ui.dev/og-image.jpg', + width: 1200, + height: 630, + alt: 'Saas UI: Color Palette Generator for Chakra UI.', + }, + { + url: 'https://palette.saas-ui.dev/twitter-og-image.jpg', + width: 1012, + height: 506, + alt: 'Saas UI: Color Palette Generator for Chakra UI.', + }, + ], + locale: 'en_US', + type: 'website', + }, + twitter: { + card: 'summary_large_image', + }, +} + +export default function Home() { + return +} diff --git a/apps/palette/next-env.d.ts b/apps/palette/next-env.d.ts index 4f11a03dc..830fb594c 100644 --- a/apps/palette/next-env.d.ts +++ b/apps/palette/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/apps/palette/next.config.js b/apps/palette/next.config.js deleted file mode 100644 index 8cc311d73..000000000 --- a/apps/palette/next.config.js +++ /dev/null @@ -1,26 +0,0 @@ -const withWorkspaces = require('@saas-ui/next-workspaces') -const webpack = require('webpack') - -module.exports = withWorkspaces({ - basePath: '../../', - workspaces: ['packages'], -})({ - reactStrictMode: true, - webpack(config) { - config.module.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack'], - }) - - config.plugins = config.plugins.concat([ - new webpack.NormalModuleReplacementPlugin( - /@saas-ui\/(?!props-docs)([a-z0-9-]+)$/, - (resource) => { - resource.request = resource.request + '/src' - } - ), - ]) - - return config - }, -}) diff --git a/apps/palette/next.config.ts b/apps/palette/next.config.ts new file mode 100644 index 000000000..b973e4b40 --- /dev/null +++ b/apps/palette/next.config.ts @@ -0,0 +1,7 @@ +import type { NextConfig } from 'next' + +export default { + experimental: { + reactCompiler: true, + }, +} satisfies NextConfig diff --git a/apps/palette/package.json b/apps/palette/package.json index 4c1cb229b..ba1f49964 100644 --- a/apps/palette/package.json +++ b/apps/palette/package.json @@ -3,27 +3,30 @@ "version": "1.5.12", "private": true, "scripts": { - "dev": "next dev", - "build": "next build", + "dev": "next dev --turbopack", + "build": "next build --turbopack", "start": "next start", "lint": "next lint", "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js", "typecheck": "tsc --noEmit" }, "dependencies": { - "@chakra-ui/react": "^3.20.0", + "@chakra-ui/react": "^3.25.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@fontsource/inter": "^5.0.20", - "@saas-ui/next-workspaces": "^0.3.0", - "@saas-ui/palette": "workspace:*", "@saas-ui/react": "workspace:*", "@svgr/webpack": "^5.5.0", "@types/lodash.debounce": "^4.0.9", - "framer-motion": "^11.3.28", + "babel-plugin-react-compiler": "19.1.0-rc.2", + "bezier-easing": "^2.1.0", + "chroma-js": "^2.6.0", + "colorizr": "^3.0.8", + "colorjs.io": "^0.5.2", "lodash.debounce": "^4.0.8", "next": "^15.3.2", "next-seo": "^6.5.0", + "next-themes": "^0.4.6", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0" diff --git a/apps/palette/pages/_app.tsx b/apps/palette/pages/_app.tsx deleted file mode 100644 index f68b3a983..000000000 --- a/apps/palette/pages/_app.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react' -import type { AppProps } from 'next/app' -import { extendTheme } from '@chakra-ui/react' -import PaletteProvider, { usePalette } from '@/providers/palette' -import { SaasProvider, baseTheme, theme as saasTheme } from '@saas-ui/react' -import { theme as glassTheme } from '@saas-ui/theme-glass' - -import '@fontsource/inter/variable.css' - -interface ThemeProviderProps { - children: React.ReactNode -} - -const themes: Record = { - 'Chakra UI': baseTheme, - 'Saas UI': saasTheme, - Glass: glassTheme, -} - -function ThemeProvider({ children }: ThemeProviderProps) { - const [{ colors, options }] = usePalette() - const theme = React.useMemo(() => { - return extendTheme( - { - colors, - }, - themes[options.theme] - ) - }, [colors, options.theme]) - - return {children} -} - -function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - - - ) -} - -export default MyApp diff --git a/apps/palette/src/client/components/color-mode-toggle.tsx b/apps/palette/src/client/components/color-mode-toggle.tsx index 7f25ba2f4..67665a2e2 100644 --- a/apps/palette/src/client/components/color-mode-toggle.tsx +++ b/apps/palette/src/client/components/color-mode-toggle.tsx @@ -1,17 +1,19 @@ -import { useColorMode, IconButton } from '@chakra-ui/react' - -import { FiSun, FiMoon } from 'react-icons/fi' +import { ClientOnly, IconButton, Skeleton } from '@saas-ui/react' +import { useTheme } from 'next-themes' +import { FiMoon, FiSun } from 'react-icons/fi' export const ColorModeToggle = () => { - const { colorMode, toggleColorMode } = useColorMode() + const { theme, setTheme } = useTheme() + return ( - : } - /> + }> + setTheme(theme === 'light' ? 'dark' : 'light')} + variant="ghost" + aria-label={theme === 'light' ? 'Enable DarkMode' : 'Enable LightMode'} + > + {theme === 'light' ? : } + + ) } diff --git a/apps/palette/src/client/components/color-picker.tsx b/apps/palette/src/client/components/color-picker.tsx new file mode 100644 index 000000000..c7c9d9c6b --- /dev/null +++ b/apps/palette/src/client/components/color-picker.tsx @@ -0,0 +1,74 @@ +import { useEffect, useId, useState } from 'react' + +import { + Box, + Flex, + Input, + type InputProps, + VisuallyHidden, +} from '@saas-ui/react' + +interface ColorPickerProps extends Omit { + onChange: (value: string) => void +} + +export default function ColorPicker({ onChange, ...props }: ColorPickerProps) { + const id = useId() + + const [inputValue, setInputValue] = useState(props.value as string) + + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + const timeoutId = setTimeout(() => { + onChange?.(inputValue) + }, 150) + return () => clearTimeout(timeoutId) + }, [inputValue]) + + return ( + + + {/* biome-ignore lint/a11y/noLabelWithoutControl: */} + + + setInputValue(e.target.value)} + {...props} + /> + + + ) +} + +// +// +// +// +// +// +// +// +// +// +// +// +// + +// +// +// +// diff --git a/apps/palette/src/client/components/configuration.tsx b/apps/palette/src/client/components/configuration.tsx index cf847c707..f37a18b35 100644 --- a/apps/palette/src/client/components/configuration.tsx +++ b/apps/palette/src/client/components/configuration.tsx @@ -1,48 +1,43 @@ +import { useCallback } from 'react' + import { useEditorContext } from '@/providers/editor' import { Box, - BoxProps, Button, ButtonGroup, - Divider, - FormControl, - FormHelperText, - FormLabel, + Field, HStack, Input, - MenuItemOption, Slider, - SliderFilledTrack, - SliderThumb, - SliderTrack, VStack, -} from '@chakra-ui/react' -import { - Form, - Select, - SelectButton, - SelectList, - SelectOption, } from '@saas-ui/react' -import { useCallback } from 'react' import { FaXTwitter } from 'react-icons/fa6' + +import ColorPicker from './color-picker' import Section from './section' const PaletteConfiguration = () => { const [state, setState] = useEditorContext() - const { theme, color, gray, blackLuminance } = state + const { color, gray, blackLuminance } = state const handleChange = useCallback( (key: string) => { return (e: any) => { - setState((state) => ({ - ...state, - [key]: e.target?.value, - })) + if (typeof e === 'string') { + setState((state) => ({ + ...state, + [key]: e, + })) + } else { + setState((state) => ({ + ...state, + [key]: e.target?.value, + })) + } } }, - [setState] + [setState], ) const onReset = useCallback(() => { @@ -58,108 +53,100 @@ const PaletteConfiguration = () => { }, [setState]) return ( -
null}> + null}>
- - - Theme + + {/* + Theme - - - - Primary color - - + + setState((state) => ({ ...state, theme: theme as string })) + } + > + + {theme} + + + Glass + Chakra UI + Saas UI + + + */} + + Primary color + + - + Select your primary brand color here, all other colors will be generated based of this. - - - - Gray tint - + + + + Gray tint + + - - + Choose a gray tint that compliments your base color to make your theme pop. - - - - Black luminance + + + + Black luminance - setState((state) => ({ - ...state, - blackLuminance: value, - })) - } - value={blackLuminance} + onValueChange={(value: { value: number[] }) => { + const val = value.value[0] + if (val !== blackLuminance) { + setState((state) => ({ + ...state, + blackLuminance: val, + })) + } + }} + value={[blackLuminance]} min={0} max={0.01} step={0.001} - > - - - - - + w={'full'} + /> - + Slightly increase the luminance to make your blacks more organic. - - + + - + -
-
+ ) } diff --git a/apps/palette/src/client/components/copy-button.tsx b/apps/palette/src/client/components/copy-button.tsx index 82a2d8002..dcd0f701d 100644 --- a/apps/palette/src/client/components/copy-button.tsx +++ b/apps/palette/src/client/components/copy-button.tsx @@ -1,11 +1,9 @@ import { + type ButtonProps, IconButton, - ButtonProps, Tooltip, useClipboard, -} from '@chakra-ui/react' - -import React from 'react' +} from '@saas-ui/react' import { FiCheck, FiCopy } from 'react-icons/fi' interface CopyButtonProps extends ButtonProps { @@ -13,12 +11,14 @@ interface CopyButtonProps extends ButtonProps { } function CopyButton({ code, ...props }: CopyButtonProps) { - const { hasCopied, onCopy } = useClipboard(code) + const { copied, copy } = useClipboard({ + value: code, + }) - const label = hasCopied ? 'Copied' : 'Copy' + const label = copied ? 'Copied' : 'Copy' return ( - + - {hasCopied ? : } + {copied ? : } ) diff --git a/apps/palette/pages/index.tsx b/apps/palette/src/client/components/index.tsx similarity index 68% rename from apps/palette/pages/index.tsx rename to apps/palette/src/client/components/index.tsx index 90cdde1fa..83c2035b4 100644 --- a/apps/palette/pages/index.tsx +++ b/apps/palette/src/client/components/index.tsx @@ -1,24 +1,24 @@ +'use client' + import { useMemo } from 'react' + +import PaletteConfiguration from '@/components/configuration' +import Layout from '@/components/layout' +import Page from '@/components/page' +import { Preview } from '@/components/preview' +import { + EditorProvider, + type UseEditorReturn, + useEditor, +} from '@/providers/editor' import { Box, Button, Drawer, - DrawerBody, - DrawerCloseButton, - DrawerContent, - DrawerHeader, HStack, - IconButton, useBreakpointValue, useDisclosure, -} from '@chakra-ui/react' - -import Layout from '@/components/layout' -import Page from '@/components/page' - -import { Preview } from '@/components/preview' -import { EditorProvider, useEditor, UseEditorReturn } from '@/providers/editor' -import PaletteConfiguration from '@/components/configuration' +} from '@saas-ui/react' import { FiSliders } from 'react-icons/fi' export default function ColorsPage() { @@ -26,13 +26,11 @@ export default function ColorsPage() { const ctx = useMemo( () => [state, setState], - [state, setState] + [state, setState], ) const isMobile = useBreakpointValue({ base: true, lg: false }) - const { isOpen, onOpen, onClose, onToggle } = useDisclosure({ - defaultIsOpen: isMobile, - }) + const { open, onOpen, onClose, onToggle } = useDisclosure() return ( @@ -43,22 +41,22 @@ export default function ColorsPage() { description="Quickly generate custom color palettes for Chakra UI." > {isMobile && ( - )} {isMobile ? ( <> - - - - + + + + - - - + + + ) : ( - + {/* - - - - - - - - - - -