Refactor and simplify

[emi420]

Sorry, this is a big PR :)

Refactor & simplify

Things were somewhat complex for me to understand, things were not working on all use cases/frameworks.

My strategy was to start with the Shoelace code as an inspiration, not only because we're using Shoelace components but because the goal is similar: to have a web components UI library with React support.

I removed Vite, Uno and other additional things. I think it's better to have something easy, simple and clear, then once we go forward with the development and reach certain stability we can add any tool that's useful for optimization or development.

How to test this PR

You can install the branch on any project that uses either web components or React (18/19), directly from the dev branch of this repository:

npm install "hotosm/ui#dev"

Then, include the style sheet and some components, both from Shoelace and HOT custom ones, and check that everything works all right.

Web components

import '@hotosm/ui/dist/style.css';
import { Button, Logo } from '@hotosm/ui/dist/hotosm-ui.js';

<hot-logo></hot-logo>
<hot-button variant="success">Click me!</hot-button>

React

import '@hotosm/ui/dist/style.css';
import { Logo, Button } from '@hotosm/ui/dist/react';

<Logo />
<br /> 
<Button variant="primary">Click me</Button>

Build

pnpm run build

Build is performed by an simple script (scripts/build.js) that calls a compiler (tsc) and a bundler (esbuild).

Then, it just copy some files (assets and styles) to dist, that's the folder we'll release for distributing the package.

Exports are defined in the exports section of package.json.

Docs

I've started more complete and clear docs using Storybook doc blocks which includes also docs for color and typography styling, developed following specifications for a HOT UI design system based on the HOT branding guidelines.

Storybook for React was removed because it was not really useful for testing.

Examples were also removed, we can add them to the docs directly.

Bundled version via CDN was removed for now, for reducing complexity and because the most common use and main priority is to have the library as a NPM package.

[spwoodcock]

Very nice Looks good on review, although I haven't run it myself yet 😄

You mention the examples have been removed. Originally they were included just to prove that it works in a few different frameworks.

Some of the examples had specific implementation details that were documented (such as Vue needing some specific config params to work). Do you think this might be useful to a potential developer needing to use our lib?

[emi420]

Some of the examples had specific implementation details that were documented (such as Vue needing some specific config params to work). Do you think this might be useful to a potential developer needing to use our lib?

Yes! I'll add that in the docs , thanks @spwoodcock