diff --git a/apps/starlight/astro.config.mjs b/apps/starlight/astro.config.mjs index dcdcf6e5..5aab8f38 100644 --- a/apps/starlight/astro.config.mjs +++ b/apps/starlight/astro.config.mjs @@ -1,12 +1,16 @@ // @ts-check import { defineConfig } from 'astro/config'; +import solidJs from '@astrojs/solid-js'; import starlight from '@astrojs/starlight'; +import { sidebar } from './src/assets/sidebar.ts'; // https://astro.build/config export default defineConfig({ base: '/jslibs/', site: 'https://spuxx-dev.github.io', + integrations: [ + solidJs(), starlight({ title: '@spuxx/jslibs', favicon: '/favicon.png', @@ -14,43 +18,8 @@ export default defineConfig({ github: 'https://github.com/spuxx-dev/jslibs', blueSky: 'https://bsky.app/profile/spuxx.bsky.social', }, - sidebar: [ - { - label: 'js-utils', - items: [ - { label: 'Introduction', slug: 'js-utils' }, - { - label: 'Types', - slug: 'js-utils/types', - }, - { - label: 'Services', - autogenerate: { directory: 'js-utils/services' }, - }, - { - label: 'Utilities', - autogenerate: { directory: 'js-utils/utils' }, - }, - ], - }, - { - label: 'browser-utils', - items: [ - { - label: 'Introduction', - slug: 'browser-utils', - }, - { - label: 'Styles and Themes', - slug: 'browser-utils/styles-and-themes', - }, - { - label: 'Services', - autogenerate: { directory: 'browser-utils/services' }, - }, - ], - }, - ], + customCss: ['./src/styles/global.css'], + sidebar, }), ], }); diff --git a/apps/starlight/package.json b/apps/starlight/package.json index 47bcc46e..89486cb8 100644 --- a/apps/starlight/package.json +++ b/apps/starlight/package.json @@ -15,6 +15,9 @@ "@astrojs/mdx": "4.0.8", "@astrojs/solid-js": "5.0.5", "@astrojs/starlight": "0.32.1", + "@spuxx/browser-utils": "workspace:@spuxx/browser-utils@*", + "@spuxx/js-utils": "workspace:@spuxx/js-utils@*", + "@spuxx/solid": "workspace:@spuxx/solid@*", "astro": "5.4.1", "sharp": "0.33.5", "solid-js": "1.9.4", diff --git a/apps/starlight/src/assets/houston.webp b/apps/starlight/src/assets/houston.webp deleted file mode 100644 index 930c1649..00000000 Binary files a/apps/starlight/src/assets/houston.webp and /dev/null differ diff --git a/apps/starlight/src/assets/sidebar.ts b/apps/starlight/src/assets/sidebar.ts new file mode 100644 index 00000000..adcc53f3 --- /dev/null +++ b/apps/starlight/src/assets/sidebar.ts @@ -0,0 +1,57 @@ +import type { StarlightUserConfigWithPlugins } from 'node_modules/@astrojs/starlight/utils/plugins'; + +export const sidebar: StarlightUserConfigWithPlugins['sidebar'] = [ + { + label: 'js-utils', + items: [ + { label: 'Introduction', slug: 'js-utils' }, + { + label: 'Types', + slug: 'js-utils/types', + }, + { + label: 'Services', + autogenerate: { directory: 'js-utils/services' }, + }, + { + label: 'Utilities', + autogenerate: { directory: 'js-utils/utils' }, + }, + ], + }, + { + label: 'browser-utils', + items: [ + { + label: 'Introduction', + slug: 'browser-utils', + }, + { + label: 'Styles and Themes', + slug: 'browser-utils/styles-and-themes', + }, + { + label: 'Services', + autogenerate: { directory: 'browser-utils/services' }, + }, + ], + }, + { + label: 'solid', + items: [ + { + label: 'Introduction', + slug: 'solid', + }, + { + label: 'Components', + items: [ + { + label: 'Layout', + autogenerate: { directory: 'solid/components/layout' }, + }, + ], + }, + ], + }, +]; diff --git a/apps/starlight/src/components/interactive/Interactive.astro b/apps/starlight/src/components/interactive/Interactive.astro new file mode 100644 index 00000000..1caa131d --- /dev/null +++ b/apps/starlight/src/components/interactive/Interactive.astro @@ -0,0 +1,12 @@ +--- +import { InteractiveSolid } from './InteractiveSolid'; +import { type Argument } from './types'; + +interface Props { + componentName: string; + argDefinitions: Record>; + title?: string; +} +--- + + diff --git a/apps/starlight/src/components/interactive/InteractiveControls.tsx b/apps/starlight/src/components/interactive/InteractiveControls.tsx new file mode 100644 index 00000000..c4c6bfb2 --- /dev/null +++ b/apps/starlight/src/components/interactive/InteractiveControls.tsx @@ -0,0 +1,51 @@ +import { Container } from '@packages/solid'; +import { createSignal, For, type Component } from 'solid-js'; +import { isEmptyOrWhitespace } from '@spuxx/js-utils'; +import type { Argument } from './types'; + +interface Props { + argDefinitions: Record>; + onArgsChange: (args: Record) => void; +} + +export const InteractiveControls: Component = (props) => { + const { argDefinitions, onArgsChange } = props; + const [args, setArgs] = createSignal>({}); + + const handleArgsChange = (event: Event) => { + const target = event.target as HTMLInputElement; + const newArgs = { ...args(), [target.name]: target.checked ?? target.value }; + for (const key in newArgs) { + if (isEmptyOrWhitespace(newArgs[key])) delete newArgs[key]; + } + setArgs(newArgs); + onArgsChange(newArgs); + }; + + const controls = Object.entries(argDefinitions).map(([key, def]) => ( + + )); + + return ( + + {(control) => control} + + ); +}; diff --git a/apps/starlight/src/components/interactive/InteractiveSolid.tsx b/apps/starlight/src/components/interactive/InteractiveSolid.tsx new file mode 100644 index 00000000..d287090a --- /dev/null +++ b/apps/starlight/src/components/interactive/InteractiveSolid.tsx @@ -0,0 +1,71 @@ +import { createEffect, createSignal, Show, type Component } from 'solid-js'; +import { render } from 'solid-js/web'; +import { Container, Divider, Heading } from '@spuxx/solid'; +import { InteractiveControls } from './InteractiveControls'; +import type { Argument } from './types'; + +interface Props { + componentName: string; + argDefinitions: Record>; + title?: string; +} + +export const InteractiveSolid: Component = (props) => { + const { title, componentName, argDefinitions } = props; + + let dispose: (() => void) | undefined; + // eslint-disable-next-line prefer-const + let containerRef: HTMLDivElement | null = null; + + const [state, setState] = createSignal<{ + component: Component | null; + args: Record; + }>({ component: null, args: {} }); + + const importComponent = async () => { + const module = await import(`@spuxx/solid`); + const importedComponent = module[componentName as keyof typeof module] as Component; + setState({ component: importedComponent, args: {} }); + }; + importComponent(); + + const handleArgsChange = (args: Record) => { + setState({ component: state().component!, args }); + }; + + createEffect(() => { + const { component, args } = state(); + if (dispose) { + dispose(); + } + + if (containerRef && component) { + dispose = render(() => component(args), containerRef); + } + }); + + return ( +
+ + Interactive Example: {title ?? componentName} + + + + + +
+ + + +

No component specified.

+ + +
+ ); +}; diff --git a/apps/starlight/src/components/interactive/index.ts b/apps/starlight/src/components/interactive/index.ts new file mode 100644 index 00000000..7d5b0e53 --- /dev/null +++ b/apps/starlight/src/components/interactive/index.ts @@ -0,0 +1,3 @@ +import Interactive from './Interactive.astro'; +export * from './types'; +export { Interactive }; diff --git a/apps/starlight/src/components/interactive/types.ts b/apps/starlight/src/components/interactive/types.ts new file mode 100644 index 00000000..73c7a001 --- /dev/null +++ b/apps/starlight/src/components/interactive/types.ts @@ -0,0 +1,4 @@ +export interface Argument { + type: 'string' | 'number' | 'boolean'; + options?: T[]; +} diff --git a/apps/starlight/src/content/docs/index.mdx b/apps/starlight/src/content/docs/index.mdx index 333e95c7..325af84a 100644 --- a/apps/starlight/src/content/docs/index.mdx +++ b/apps/starlight/src/content/docs/index.mdx @@ -28,4 +28,8 @@ import { CardGrid, Card, LinkCard } from '@astrojs/starlight/components'; `@spuxx/browser-utils` contains a selection of common utilities for use in browser applications. + + `@spuxx/solid` contains a selection of components for use in SolidJS applications. + + diff --git a/apps/starlight/src/content/docs/solid/components/layout/divider.mdx b/apps/starlight/src/content/docs/solid/components/layout/divider.mdx new file mode 100644 index 00000000..4ba4a48b --- /dev/null +++ b/apps/starlight/src/content/docs/solid/components/layout/divider.mdx @@ -0,0 +1,27 @@ +--- +title: 'Divider' +description: 'A library containing various production-ready components for SolidJS applications.' +--- + +import TypeDoc from '@docs/solid/components/layout/divider.md'; +import { BaseColor, ContentColor } from '@packages/browser-utils/dist/main'; +import { Interactive } from '@src/components/interactive'; + + + + diff --git a/apps/starlight/src/content/docs/solid/index.mdx b/apps/starlight/src/content/docs/solid/index.mdx new file mode 100644 index 00000000..62ec13c8 --- /dev/null +++ b/apps/starlight/src/content/docs/solid/index.mdx @@ -0,0 +1,8 @@ +--- +title: 'Solid' +description: 'A library containing various production-ready components for SolidJS applications.' +--- + +import README from '@packages/solid/README.md'; + + diff --git a/apps/starlight/src/styles/global.css b/apps/starlight/src/styles/global.css new file mode 100644 index 00000000..fdcd232d --- /dev/null +++ b/apps/starlight/src/styles/global.css @@ -0,0 +1,2 @@ +@import '@spuxx/browser-utils/styles'; +@import '@spuxx/browser-utils/themes'; diff --git a/packages/browser-utils/src/styles.css b/packages/browser-utils/src/styles.css index 4fe11106..b15b7c55 100644 --- a/packages/browser-utils/src/styles.css +++ b/packages/browser-utils/src/styles.css @@ -1,8 +1,10 @@ @import './styles/variables.css'; +@import './styles/variants.css'; +@import './styles/colors.css'; +@import './styles/animations.css'; + @import './styles/layout.css'; @import './styles/application.css'; + @import './styles/components.css'; @import './styles/modal.css'; -@import './styles/variants.css'; -@import './styles/colors.css'; -@import './styles/animations.css'; diff --git a/packages/browser-utils/src/styles/components/layout/container.css b/packages/browser-utils/src/styles/components/layout/container.css index dff0a62c..0e69b5c1 100644 --- a/packages/browser-utils/src/styles/components/layout/container.css +++ b/packages/browser-utils/src/styles/components/layout/container.css @@ -19,5 +19,5 @@ } .spx-container[spx-variant='outlined'] { - color: inherit; + color: inherit !important; } diff --git a/packages/browser-utils/src/styles/components/layout/divider.css b/packages/browser-utils/src/styles/components/layout/divider.css index bd145c1f..25b34f18 100644 --- a/packages/browser-utils/src/styles/components/layout/divider.css +++ b/packages/browser-utils/src/styles/components/layout/divider.css @@ -7,6 +7,7 @@ .spx-divider[spx-vertical] { display: flex; + min-height: 1em; height: 100%; align-self: stretch; width: 1px; diff --git a/packages/solid/README.md b/packages/solid/README.md index 29ee0992..cbabdd7b 100644 --- a/packages/solid/README.md +++ b/packages/solid/README.md @@ -1,16 +1,45 @@ -## Colors and Themes +# @spuxx/solid -### Custom Colors +![Main pipeline](https://github.com/spuxx-dev/jslibs/actions/workflows/main.yml/badge.svg) +![Release pipeline](https://github.com/spuxx-dev/jslibs/actions/workflows/release_solid.yml/badge.svg) +![npm version](https://img.shields.io/npm/v/%40spuxx%2Fsolid) +![npm bundle size](https://img.shields.io/bundlephobia/min/%40spuxx%2Fsolid) +![License](https://img.shields.io/github/license/spuxx-dev/jslibs) -Types for default colors provided by `@spuxx/styles` are defined in [src/types/registry.ts](packages/solidsrc/types/registry.ts). -Custom colors can be added in a type-safe way by extending the `ColorRegistry` interface. + -```ts -import { Colors } from '@spuxx/solid'; +- [Description](#Description) +- [Documentation](#Documentation) +- [Installation](#Installation) +- [Links](#Links) -declare module '@spuxx/solid' { - interface ColorRegistry { - myCustomColor: 'my-custom-color'; - } -} -``` + + + +## Description + +`@spuxx/solid` contains a selection of both primitive and composite components for SolidJS applications. It is primarily intended for my own use, but feel free to use it in your own projects. The components directly use the `@spuxx/browser-utils` package for styling and other utilities. In addition, the library bundles a couple of third-party components such as: + +- [@corvu/dialog](https://corvu.dev/docs/primitives/dialog/) + +## Documentation + +Documentation can be found [here](https://spuxx-dev.github.io/jslibs/solid). + +## Installation + +Depending on your package manager, run: + +- `npm install @spuxx/solid` (npm) +- `pnpm install @spuxx/solid` (pnpm) + +## Links + +- [About me](https://spuxx.dev/) +- [Documentation](https://spuxx-dev.github.io/jslibs/solid) +- [Source](https://github.com/spuxx-dev/jslibs) +- [NPM](https://www.npmjs.com/package/@spuxx/solid) +- [Buy me a coffee](https://buymeacoffee.com/spuxx) ☕️ diff --git a/packages/solid/src/components/input/button/button.component.test.tsx b/packages/solid/src/components/input/button/button.component.test.tsx index 8e6eb620..c357e9e5 100644 --- a/packages/solid/src/components/input/button/button.component.test.tsx +++ b/packages/solid/src/components/input/button/button.component.test.tsx @@ -71,4 +71,10 @@ describe('Button', () => { button.click(); expect(onClick).not.toHaveBeenCalled(); }); + + it('should accept inline styles', () => { + const { getByRole } = render(() => ); + const button = getByRole('button'); + expect(button).toHaveStyle({ width: '1337px' }); + }); }); diff --git a/packages/solid/src/components/input/button/button.component.tsx b/packages/solid/src/components/input/button/button.component.tsx index e8cea3b7..8fa3d7f7 100644 --- a/packages/solid/src/components/input/button/button.component.tsx +++ b/packages/solid/src/components/input/button/button.component.tsx @@ -1,7 +1,7 @@ import { JSX, Show, type Component } from 'solid-js'; import { ButtonProps } from './button.types'; import { Icon, IconifyIcon } from '@iconify-icon/solid'; -import { classNames } from '@src/main'; +import { attributes, classNames } from '@src/main'; export const Button: Component = (props) => { const { variant = 'contained', color = 'primary', rounded, loading } = props; @@ -10,7 +10,7 @@ export const Button: Component = (props) => { return (