diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 153766979..4a2887faa 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,7 +12,12 @@ on:
workflow_dispatch:
jobs:
+ update-deps:
+ uses: SolidOS/solidos/.github/workflows/update-solidos-deps.yml@main
+ secrets: inherit
+
build:
+ needs: update-deps
runs-on: ubuntu-latest
strategy:
matrix:
@@ -63,7 +68,7 @@ jobs:
run: gh pr merge --auto --merge "$PR_URL" # Use Github CLI to merge automatically the PR
env:
PR_URL: ${{github.event.pull_request.html_url}}
- GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+ GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
npm-publish-dev:
needs: build
@@ -88,8 +93,8 @@ jobs:
registry-url: 'https://registry.npmjs.org'
- name: Update npm to latest (required for OIDC)
run: npm install -g npm@latest
- - name: Disable pre- and post-publish actions
- run: 'sed -i -E "s/\"((pre|post)publish)/\"ignore:\1/" package.json'
+ - name: Disable publish and install actions
+ run: 'sed -i -E "s/\"((pre|post)(publish|install))/\"ignore:\1/" package.json'
- name: Publish to npm
if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]'
run: npm publish --tag latest
@@ -109,12 +114,12 @@ jobs:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
TAG="v$(node -p 'require("./package.json").version')"
-
+
if gh release view "$TAG" >/dev/null 2>&1; then
echo "Release $TAG already exists. Skipping."
exit 0
fi
-
+
if git ls-remote --exit-code --tags origin "refs/tags/$TAG" >/dev/null 2>&1; then
echo "Tag $TAG already exists on origin. Creating release from existing tag."
gh release create "$TAG" --verify-tag --generate-notes
diff --git a/.gitignore b/.gitignore
index 9b1a4436b..f94e75f5a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
node_modules
dist
-lib
src/versionInfo.ts
+src/types/custom-elements.d.ts
.idea
.vscode
coverage
diff --git a/.storybook/main.js b/.storybook/main.js
deleted file mode 100644
index a80bd7872..000000000
--- a/.storybook/main.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export default {
- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-
- addons: [
- '@storybook/addon-links',
- '@storybook/addon-essentials',
- '@storybook/addon-mdx-gfm',
- '@storybook/addon-webpack5-compiler-swc'
- ],
-
- framework: {
- name: '@storybook/html-webpack5',
- options: {}
- },
-
- docs: {
- autodocs: true
- },
- webpackFinal: async (config) => {
- // For Storybook, we DON'T externalize rdflib and solid-logic
- // Instead, we let webpack bundle them from node_modules
-
- // Handle Node.js modules for browser
- config.resolve.fallback = {
- ...config.resolve.fallback,
- path: false,
- fs: false,
- crypto: false,
- stream: false,
- util: false,
- buffer: false
- }
-
- // Alias $rdf to rdflib for solid-logic compatibility
- config.resolve.alias = {
- ...config.resolve.alias,
- $rdf: 'rdflib'
- }
-
- return config
- }
-}
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 000000000..aa46e7a91
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/web-components-vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.ts'],
+ addons: ['@storybook/addon-docs'],
+ framework: '@storybook/web-components-vite',
+
+ async viteFinal (config) {
+ return mergeConfig(config, {
+ resolve: {
+ dedupe: ['lit', 'lit-html', 'lit-element', '@lit/reactive-element'],
+ },
+ optimizeDeps: {
+ include: ['lit/directive-helpers.js'],
+ },
+ })
+ },
+}
+
+export default config
diff --git a/.storybook/preview.js b/.storybook/preview.js
deleted file mode 100644
index 996229f9d..000000000
--- a/.storybook/preview.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// For backward compatibility, provide rdflib and solid-logic as globals
-import * as rdflib from 'rdflib'
-import * as solidLogic from 'solid-logic'
-
-// Some legacy code might expect these as globals
-if (typeof window !== 'undefined') {
- window.$rdf = rdflib
- window.SolidLogic = solidLogic
-}
-
-export const parameters = {}
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 000000000..576bf2027
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,57 @@
+import { withProvider, getThemeColors } from '@/storybook'
+import { definePreview } from '@storybook/web-components-vite'
+import addonDocs from '@storybook/addon-docs'
+
+import '@/styles/theme.css'
+
+export default definePreview({
+ addons: [addonDocs()],
+ tags: ['autodocs'],
+ decorators: [withProvider],
+ parameters: {
+ options: {
+ storySort: {
+ order: ['Basic UI', 'Advanced', 'Solid'],
+ },
+ },
+ docs: {
+ source: {
+ excludeDecorators: true,
+ transform(code) {
+ const MAX_LINE_LENGTH = 120;
+ const lines = code.trim().split('\n');
+ const formattedLines = lines.map(line => {
+ if (line.length <= MAX_LINE_LENGTH) {
+ return line;
+ }
+
+ const baseIndentMatch = line.match(/^\s*/);
+ const baseIndent = baseIndentMatch ? baseIndentMatch[0] : '';
+ const attrIndent = baseIndent + ' ';
+ const formattedLine = line.replace(/ ([a-z0-9-]+=")/gi, `\n${attrIndent}$1`);
+
+ if (formattedLine !== line) {
+ return formattedLine.replace(/>(<\/[a-z0-9-]+>)$/i, `\n${baseIndent}>$1`);
+ }
+
+ return formattedLine;
+ });
+
+ return formattedLines.filter(line => line.trim() !== '').join('\n');
+ },
+ },
+ },
+ },
+ globalTypes: {
+ primaryColor: {
+ description: 'Primary Color',
+ defaultValue: 'purple',
+ toolbar: {
+ title: 'Primary',
+ icon: 'paintbrush',
+ items: getThemeColors().map((color) => ({ label: color.slice(0, 1).toUpperCase() + color.slice(1), value: color })),
+ dynamicTitle: true,
+ },
+ },
+ },
+});
diff --git a/README.md b/README.md
index c34a97fb8..13ef9cade 100644
--- a/README.md
+++ b/README.md
@@ -7,376 +7,192 @@ User Interface widgets and utilities for Solid (solid-ui)
These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps.
Vanilla JS. Includes large widgets like chat, table, matrix, form fields, and small widgets.
-See [Solid-Ui Storybook](http://solidos.github.io/solid-ui/examples/storybook/) for UI widgets.
-See [Solid-UI API](https://solidos.github.io/solid-ui/docs/api/) for UI functions.
-See [Forms introduction](./docs/FormsReadme.md) for UI vocabulary implementation.
+- See [Solid-UI Storybook](http://solidos.github.io/solid-ui/examples/storybook/) for UI widgets.
+- See [Solid-UI API](https://solidos.github.io/solid-ui/docs/api/) for UI functions.
+- See [Forms introduction](./docs/FormsReadme.md) for UI vocabulary implementation.
## Table of Contents
- [Getting Started](#getting-started)
- [Install via npm](#install-via-npm)
-- [Use Directly in Browser](#use-directly-in-a-browser)
- - [UMD Bundle](#umd-bundle-global-variable)
- - [ESM Bundle](#esm-bundle-import-as-module)
-- [Web Components](#web-components)
- - [solid-ui-header](#solid-ui-header)
+- [Use directly in a browser](#use-directly-in-a-browser)
- [Development](#development)
-- [Testing](#adding-tests)
+- [Testing](#testing)
+- [Build Config](#build-config)
+- [GitHub Pages](#github-pages)
- [Further Documentation](#further-documentation)
- [Generative AI usage](#generative-ai-usage)
-
## Getting started
Contributions of bug fixes and new functionality, documentation, and tests are
always appreciated.
+
## Install via npm
```sh
npm install solid-ui rdflib solid-logic
```
-Then import in your JavaScript/TypeScript code:
+In order to use components, choose whether to import specific ones or all of them:
```js
-import * as UI from 'solid-ui'
-import * as $rdf from 'rdflib'
-import * as SolidLogic from 'solid-logic'
-
-// Example: Create a button
-const button = UI.widgets.button(
- document,
- 'https://solidproject.org/assets/img/solid-emblem.svg',
- 'Click me',
- () => alert('Button clicked!')
-)
-document.body.appendChild(button)
+// Import individual components...
+import 'solid-ui/components/button'
+import 'solid-ui/components/combobox'
+
+// Or all of them.
+import 'solid-ui/components'
```
-## Use Directly in a Browser
+Then, you can use them in your HTML like you would use any element (all of them are prefixed by `solid-ui`):
-Solid-UI provides both **UMD** and **ESM** bundles for direct browser usage. Both bundles externalize `rdflib` and `solid-logic`, which must be loaded separately.
+```html
+Click me!
+```
-### Available Files
+And don't forget to also include the CSS, either with a link tag or inside a CSS file:
-- **UMD (Universal Module Definition)**:
- - Development: `dist/solid-ui.js` (exposes global `window.UI`)
- - Production: `dist/solid-ui.min.js` (minified)
-
-- **ESM (ES Modules)**:
- - Development: `dist/solid-ui.esm.js`
- - Production: `dist/solid-ui.esm.min.js` (minified)
+```css
+@import "solid-ui"
+```
-### UMD Bundle (Global Variable)
+```html
+
+```
-If you use the legacy UMD bundle (`solid-ui.js` / `solid-ui.min.js`), `rdflib` must define `window.$rdf` before `solid-ui` loads. If `rdflib` is missing, `solid-ui` will throw `ReferenceError: $rdf is not defined`.
+You can also use some of the helpers exported from the default entry:
-Load via `
-
-
-
-
-
-
-
-