diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8d0213205..0476bdafe 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -4,9 +4,11 @@ on:
push:
branches:
- main
+ - staging
pull_request:
branches:
- main
+ - staging
workflow_dispatch:
jobs:
@@ -23,6 +25,8 @@ jobs:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm test
+ - run: npm run typecheck
+ - run: npm run typecheck-test
- run: npm run build
- run: npm run doc
- name: Save build
@@ -61,7 +65,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
@@ -107,12 +111,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/.storybook/main.js b/.storybook/main.js
deleted file mode 100644
index f49f9709c..000000000
--- a/.storybook/main.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import path from 'path'
-import Icons from 'unplugin-icons/webpack'
-import { fileURLToPath } from 'url'
-
-import iconsConfig from '../config/icons.mjs'
-import postCSSConfig from '../config/postcss.mjs'
-import { litDecoratorsLoaderOptions, resolvePathsUsingDecorators } from '../config/babel.mjs'
-import { excludePathsFromRules } from '../config/webpack.mjs'
-
-const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
-
-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'
- }
-
- // Configure Lit decorators
- const pathsUsingDecorators = resolvePathsUsingDecorators(projectRoot)
-
- config.module.rules.unshift({
- test: /\.(mjs|js|ts|tsx)$/,
- include: pathsUsingDecorators,
- use: {
- loader: 'babel-loader',
- options: litDecoratorsLoaderOptions,
- }
- })
-
- excludePathsFromRules(config.module?.rules, pathsUsingDecorators)
-
- // Configure icons
- config.plugins.push(Icons(iconsConfig))
-
- // Configure component styles
- const litCssPattern = /\.styles\.css$/
-
- config.module.rules = config.module.rules.map(rule => {
- if (rule?.test?.test?.('component.css')) {
- return {
- ...rule,
- exclude: [
- ...(Array.isArray(rule.exclude) ? rule.exclude : rule.exclude ? [rule.exclude] : []),
- litCssPattern
- ]
- }
- }
-
- return rule
- })
-
- config.module.rules.push({
- test: litCssPattern,
- loader: 'lit-css-loader',
- options: postCSSConfig
- })
-
- return config
- }
-}
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 000000000..04d60238c
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/web-components-vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.ts'],
+ addons: [
+ '@storybook/addon-links',
+ '@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
index 1704e2a63..eb9b4f0c2 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -11,4 +11,5 @@ if (typeof window !== 'undefined') {
window.SolidLogic = solidLogic
}
+export const tags = ['autodocs']
export const parameters = {}
diff --git a/README.md b/README.md
index c34a97fb8..3001b666b 100644
--- a/README.md
+++ b/README.md
@@ -7,376 +7,154 @@ 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)
- [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'
-## Use Directly in a Browser
+// Or all of them.
+import 'solid-ui/components'
+```
-Solid-UI provides both **UMD** and **ESM** bundles for direct browser usage. Both bundles externalize `rdflib` and `solid-logic`, which must be loaded separately.
+Then, you can use them in your HTML like you would use any element (all of them are prefixed by `solid-ui`):
-### Available Files
+```html
+Click me!
+```
-- **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)
+And don't forget to also include the CSS, either with a link tag or inside a CSS file:
-### UMD Bundle (Global Variable)
+```css
+@import "solid-ui"
+```
-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`.
+```html
+
+```
-Load via `
-
-
-
-
-
-
-
-