diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md new file mode 100644 index 00000000..abd0f141 --- /dev/null +++ b/apps/docs/CHANGELOG.md @@ -0,0 +1,10 @@ +# docs + +## 0.0.1 + +### Patch Changes + +- 159bfb1: Bump react and @types/react +- Updated dependencies [159bfb1] +- Updated dependencies [167af9a] + - @compai/css-gui@0.0.92 diff --git a/apps/docs/components/Header.tsx b/apps/docs/components/Header.tsx new file mode 100644 index 00000000..3824e190 --- /dev/null +++ b/apps/docs/components/Header.tsx @@ -0,0 +1,108 @@ +import { useId } from 'react' +import Link from 'next/link' +import { Logo } from '@compai/logo' +import pkg from '../../../packages/gui/package.json' + +export const Header = () => { + const id = useId() + + return ( +
+ + + + + + + + + CSS GUI + + v{pkg.version} + + + + + + + Docs + + + + + Properties + + + + GitHub + +
+ ) +} diff --git a/apps/docs/components/Layout.tsx b/apps/docs/components/Layout.tsx index 96d5015d..60d251bf 100644 --- a/apps/docs/components/Layout.tsx +++ b/apps/docs/components/Layout.tsx @@ -1,93 +1,16 @@ -import { HTMLAttributes, useId } from 'react' -import Link from 'next/link' -import { Logo } from '@compai/logo' -import pkg from '../../../packages/gui/package.json' +import { HTMLAttributes } from 'react' +import { Header } from './Header' interface Props extends HTMLAttributes {} export const Layout = (props: Props) => { - const id = useId() return ( <> -
- - - - - - - - - CSS GUI - - v{pkg.version} - - - - - - GitHub - - - NPM - -
+
diff --git a/apps/docs/components/Nav.tsx b/apps/docs/components/Nav.tsx index 31c4e671..f7f3d832 100644 --- a/apps/docs/components/Nav.tsx +++ b/apps/docs/components/Nav.tsx @@ -1,13 +1,12 @@ -import { HTMLAttributes } from 'react' +import { HTMLAttributes, ReactNode } from 'react' import Link, { LinkProps } from 'next/link' import { useRouter } from 'next/router' -interface NavItemProps extends HTMLAttributes {} export const NavItem = ({ children, href, ...props -}: NavItemProps & LinkProps) => { +}: LinkProps & { children: ReactNode }) => { const router = useRouter() const isActive = router.asPath === href return ( @@ -16,7 +15,9 @@ export const NavItem = ({ sx={{ fontSize: 2, textDecoration: 'none', - display: 'block', + display: 'flex', + alignItems: 'center', + gap: '.5rem', width: '100%', color: isActive ? 'background' : 'muted', backgroundColor: isActive ? 'primary' : 'background', @@ -24,8 +25,8 @@ export const NavItem = ({ py: 2, transition: 'color .2s ease-in-out', ':hover': { - color: isActive? 'background' : 'primary' - } + color: isActive ? 'background' : 'primary', + }, }} > {children} @@ -34,8 +35,7 @@ export const NavItem = ({ ) } -interface NavSectionTitleProps extends HTMLAttributes {} -export const NavSectionTitle = (props: NavSectionTitleProps) => { +export const NavSectionTitle = (props: HTMLAttributes) => { return (

{
diff --git a/apps/docs/components/Sidebar.tsx b/apps/docs/components/Sidebar.tsx index ea122ed3..069e8327 100644 --- a/apps/docs/components/Sidebar.tsx +++ b/apps/docs/components/Sidebar.tsx @@ -1,3 +1,4 @@ +import { GitHub, Twitter } from 'react-feather' import { NavItem, NavSectionTitle } from './Nav' export const Sidebar = () => { @@ -5,16 +6,16 @@ export const Sidebar = () => { ) } + +const DiscordIcon = () => { + return ( + + + + + + + + + + + ) +} diff --git a/apps/docs/components/examples/AccentColorPreview.tsx b/apps/docs/components/examples/AccentColorPreview.tsx new file mode 100644 index 00000000..507b365d --- /dev/null +++ b/apps/docs/components/examples/AccentColorPreview.tsx @@ -0,0 +1,159 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-accent-color-preview' +import { defaultTheme } from '../../data/default-theme' + +export function AccentColorPreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> + + + ) +} diff --git a/apps/docs/components/examples/AlignItemsPreview.tsx b/apps/docs/components/examples/AlignItemsPreview.tsx new file mode 100644 index 00000000..e3a4ab58 --- /dev/null +++ b/apps/docs/components/examples/AlignItemsPreview.tsx @@ -0,0 +1,94 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-align-items-preview' +import { defaultTheme } from '../../data/default-theme' + +export function AlignItemsPreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> + + + ) +} diff --git a/apps/docs/components/examples/AppearancePreview.tsx b/apps/docs/components/examples/AppearancePreview.tsx new file mode 100644 index 00000000..42186076 --- /dev/null +++ b/apps/docs/components/examples/AppearancePreview.tsx @@ -0,0 +1,108 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-appearance-preview' +import { defaultTheme } from '../../data/default-theme' + +export function AppearancePreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> + + + ) +} diff --git a/apps/docs/components/examples/BackgroundBlendModePreview.tsx b/apps/docs/components/examples/BackgroundBlendModePreview.tsx index 694d9f70..b41aa56f 100644 --- a/apps/docs/components/examples/BackgroundBlendModePreview.tsx +++ b/apps/docs/components/examples/BackgroundBlendModePreview.tsx @@ -9,18 +9,21 @@ export function BackgroundBlendModePreview() { return ( <> -
) diff --git a/apps/docs/components/examples/BorderStylePreview.tsx b/apps/docs/components/examples/BorderStylePreview.tsx new file mode 100644 index 00000000..2c223140 --- /dev/null +++ b/apps/docs/components/examples/BorderStylePreview.tsx @@ -0,0 +1,87 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-border-style-preview' +import { defaultTheme } from '../../data/default-theme' + +export function BorderStylePreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> + + + ) +} diff --git a/apps/docs/components/examples/BorderTopLeftRadiusPreview.tsx b/apps/docs/components/examples/BorderTopLeftRadiusPreview.tsx new file mode 100644 index 00000000..e2f1a0ff --- /dev/null +++ b/apps/docs/components/examples/BorderTopLeftRadiusPreview.tsx @@ -0,0 +1,82 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-border-top-left-radius-preview' +import { defaultTheme } from '../../data/default-theme' + +export function BorderTopLeftRadiusPreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> +
+ + <Inputs.BorderTopLeftRadius /> + +
+ + +
+ +
div': { + display: 'grid', + gap: '.5rem', + }, + }} + > + +
+ +
+ 
+          {codegen.css(styles)}
+
+
+
+ + ) +} diff --git a/apps/docs/components/examples/BorderWidthPreview.tsx b/apps/docs/components/examples/BorderWidthPreview.tsx new file mode 100644 index 00000000..3338f700 --- /dev/null +++ b/apps/docs/components/examples/BorderWidthPreview.tsx @@ -0,0 +1,86 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-border-width-preview' +import { defaultTheme } from '../../data/default-theme' + +export function BorderWidthPreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> + + + ) +} diff --git a/apps/docs/components/examples/BoxShadowPreview.tsx b/apps/docs/components/examples/BoxShadowPreview.tsx new file mode 100644 index 00000000..61f389d7 --- /dev/null +++ b/apps/docs/components/examples/BoxShadowPreview.tsx @@ -0,0 +1,94 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Fieldset, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-box-shadow-preview' +import { defaultTheme } from '../../data/default-theme' + +export function BoxShadowPreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> + + + ) +} diff --git a/apps/docs/components/examples/CardPreview.tsx b/apps/docs/components/examples/CardPreview.tsx new file mode 100644 index 00000000..457067eb --- /dev/null +++ b/apps/docs/components/examples/CardPreview.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react' +import { Editor, styled, Fieldset, Inputs, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-card-preview' +import { defaultTheme } from '../../data/default-theme' + +export const CardPreview = () => { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> +
+ + +

Heading

+

Body text

+ + + <> +
+ <> + + +
+
+ <> + + +
+
+ <> + + +
+ + +
+ 
+        {codegen.css(styles)}
+
+ + ) +} diff --git a/apps/docs/components/examples/ColorPairPreview.tsx b/apps/docs/components/examples/ColorPairPreview.tsx new file mode 100644 index 00000000..c990c1d8 --- /dev/null +++ b/apps/docs/components/examples/ColorPairPreview.tsx @@ -0,0 +1,85 @@ +import { useState } from 'react' +import Link from 'next/link' +import { Editor, Fieldset, Inputs, styled, codegen } from '@compai/css-gui' +import { initialStyles } from '../../data/initial-styles-color-pair-preview' +import { defaultTheme } from '../../data/default-theme' + +export function ColorPairPreview() { + const [styles, setStyles] = useState(initialStyles) + + return ( + <> + + + ) +} diff --git a/apps/docs/components/examples/ColorPicker.tsx b/apps/docs/components/examples/ColorPicker.tsx index 96753608..858545a1 100644 --- a/apps/docs/components/examples/ColorPicker.tsx +++ b/apps/docs/components/examples/ColorPicker.tsx @@ -1,13 +1,14 @@ import { useState } from 'react' import { ColorPopover } from '@compai/css-gui' +import { defaultTheme } from '../../data/default-theme' export const ColorPickerExample = () => { const [color, setColor] = useState('tomato') return ( <> - -

I am {color}!

+ +

I am {color}!

) } diff --git a/apps/docs/components/examples/ColorPreview.tsx b/apps/docs/components/examples/ColorPreview.tsx index 26636f53..4b6d458c 100644 --- a/apps/docs/components/examples/ColorPreview.tsx +++ b/apps/docs/components/examples/ColorPreview.tsx @@ -9,19 +9,21 @@ export function ColorPreview() { return ( <> -