basefn 1.0.0

package/README.md

@@ -0,0 +1,104 @@
+# basefn-UI
+
+A simple, neutrally styled UI component library for [Xote](https://github.com/brnrdog/xote) applications, primarily used to battle-test the Xote framework against a real-world user interface system.
+
+## Installation
+
+```bash
+npm install basefn
+```
+
+Make sure you have installed [xote](https://github.com/brnrdog/xote) and [rescript-signals](https://github.com/brnrdog/rescript-signals).
+
+## Usage Patterns
+
+Components accept both regular values and signals. Use the `static()` for static values, or `reactive()` for reactive signals:
+
+```rescript
+open basefnUI
+open ReactiveProp
+
+// Using regular values (static)
+<Button
+  variant={Button.Primary}
+  label={static("Click me")}
+  onClick={_ => Console.log("You clicked!")}
+/>
+
+// Using signals (reactive)
+let labelSignal = Signal.make("Click me")
+<Button
+  variant={Button.Primary}
+  label={reactive(labelSignal)}
+  onClick={_ => Signal.set(labelSignal, "You clicked!")}
+/>
+```
+
+## Components
+
+See the available components at [src/components](https://github.com/brnrdog/basefn-ui/tree/main/src/components). Contributions are welcome if features are missing.
+
+## Theming
+
+All components use CSS variables for styling, making them easy to customize. Override the variables in your CSS:
+
+```css
+:root {
+  --basefn-color-primary: #your-color;
+  --basefn-color-secondary: #your-color;
+  /* ... other variables */
+}
+```
+
+See `src/styles/variables.css` for all available CSS variables.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server with Vite (hot reload)
+npm run dev
+
+# Build ReScript code
+npm run build
+
+# Watch mode for ReScript
+npm run watch
+
+# Build for production
+npm run build:vite
+
+# Preview production build
+npm run preview
+
+# Clean ReScript build
+npm run clean
+```
+
+### Running the Demo
+
+1. Install dependencies: `npm install`
+2. Build the ReScript code: `npm run build`
+3. Start the dev server: `npm run dev`
+4. Open your browser to `http://localhost:3000`
+
+The demo application showcases all components with live form state updates.
+
+## Project Structure
+
+```
+basefn-ui/
+├── src/
+│   ├── components/     # All UI components
+│   ├── styles/         # CSS variables and theming
+│   ├── Basefn__Dom.res # Simple dom bindings used in the lib
+│   └── Basefn.res       # Main export file
+├── package.json
+└── rescript.json
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "basefn",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brnrdog/basefn.git"
+  },
+  "description": "A simple UI component library for Xote applications",
+  "main": "src/Basefn.res.mjs",
+  "type": "module",
+  "files": [
+    "src/**/*.res",
+    "src/**/*.resi",
+    "src/**/*.res.mjs",
+    "src/**/*.css",
+    "rescript.json"
+  ],
+  "scripts": {
+    "build": "rescript",
+    "clean": "rescript clean",
+    "watch": "rescript build -w",
+    "dev": "vite",
+    "preview": "vite preview",
+    "build:vite": "vite build"
+  },
+  "keywords": [
+    "rescript",
+    "xote",
+    "ui",
+    "components"
+  ],
+  "author": "Bernardo Gurgel <brnrdog@hey.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@rescript/core": "^1.6.1",
+    "highlight.js": "^11.11.1",
+    "lucide": "^0.562.0",
+    "xote": "^4.8.0"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "docs/CHANGELOG.md"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "docs/CHANGELOG.md"
+          ]
+        }
+      ],
+      "@semantic-release/github",
+      [
+        "@semantic-release/npm",
+        {
+          "npmPublish": true,
+          "provenance": true
+        }
+      ]
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@rescript/core": "^1.6.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.3",
+    "rescript": "^12.0.1",
+    "vite": "^5.0.0"
+  }
+}

package/rescript.json

@@ -0,0 +1,32 @@
+{
+  "name": "basefn",
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true,
+      "public": ["Basefn"]
+    },
+    {
+      "dir": "docs",
+      "subdirs": true,
+      "public": ["Basefn"]
+    }
+  ],
+  "package-specs": {
+    "module": "esmodule",
+    "in-source": true
+  },
+  "suffix": ".res.mjs",
+  "dependencies": [
+    "@rescript/core",
+    "rescript-signals",
+    "xote"
+  ],
+  "compiler-flags": [
+    "-open RescriptCore"
+  ],
+  "jsx": {
+    "version": 4,
+    "module": "Xote__JSX"
+  }
+}

package/src/Basefn.css

@@ -0,0 +1,14 @@
+@import "./styles/variables.css";
+
+.bold {
+	font-weight: 600;
+}
+
+.muted {
+	color: var(--basefn-color-neutral-500);
+}
+
+.font-normal {
+	font-weight: 400;
+}
+

package/src/Basefn.res

@@ -0,0 +1,105 @@
+%%raw(`import './basefn.css'`)
+// Main basefn UI module - exposes all components and utilities
+
+// Re-export component types
+type selectOption = Basefn__Select.selectOption
+type inputType = Basefn__Input.inputType
+type buttonVariant = Basefn__Button.variant
+type badgeVariant = Basefn__Badge.variant
+type badgeSize = Basefn__Badge.size
+type spinnerSize = Basefn__Spinner.size
+type spinnerVariant = Basefn__Spinner.variant
+type separatorOrientation = Basefn__Separator.orientation
+type separatorVariant = Basefn__Separator.variant
+type kbdSize = Basefn__Kbd.size
+type typographyVariant = Basefn__Typography.variant
+type typographyAlign = Basefn__Typography.align
+type alertVariant = Basefn__Alert.variant
+type progressSize = Basefn__Progress.size
+type progressVariant = Basefn__Progress.variant
+type tab = Basefn__Tabs.tab
+type accordionItem = Basefn__Accordion.accordionItem
+type breadcrumbItem = Basefn__Breadcrumb.breadcrumbItem
+type modalSize = Basefn__Modal.size
+type tooltipPosition = Basefn__Tooltip.position
+type switchSize = Basefn__Switch.size
+type dropdownMenuItem = Basefn__Dropdown.menuItem
+type dropdownMenuContent = Basefn__Dropdown.menuContent
+type toastVariant = Basefn__Toast.variant
+type toastPosition = Basefn__Toast.position
+type stepperOrientation = Basefn__Stepper.orientation
+type stepStatus = Basefn__Stepper.stepStatus
+type stepperStep = Basefn__Stepper.step
+type drawerPosition = Basefn__Drawer.position
+type drawerSize = Basefn__Drawer.size
+type timelineOrientation = Basefn__Timeline.orientation
+type timelineVariant = Basefn__Timeline.variant
+type timelineItem = Basefn__Timeline.timelineItem
+type sidebarSize = Basefn__Sidebar.size
+type sidebarNavItem = Basefn__Sidebar.navItem
+type sidebarNavSection = Basefn__Sidebar.navSection
+type topbarSize = Basefn__Topbar.size
+type topbarNavItem = Basefn__Topbar.navItem
+type appLayoutContentWidth = Basefn__AppLayout.contentWidth
+type iconName = Basefn__Icon.name
+type iconSize = Basefn__Icon.size
+type gridColumns = Basefn__Grid.columns
+type gridRows = Basefn__Grid.rows
+type gridAutoFlow = Basefn__Grid.autoFlow
+type gridJustifyItems = Basefn__Grid.justifyItems
+type gridAlignItems = Basefn__Grid.alignItems
+type gridJustifyContent = Basefn__Grid.justifyContent
+type gridAlignContent = Basefn__Grid.alignContent
+type gridItemColumnSpan = Basefn__Grid.Item.columnSpan
+type gridItemRowSpan = Basefn__Grid.Item.rowSpan
+
+// Form Components
+module Button = Basefn__Button
+module Input = Basefn__Input
+module Textarea = Basefn__Textarea
+module Select = Basefn__Select
+module Checkbox = Basefn__Checkbox
+module Radio = Basefn__Radio
+module Label = Basefn__Label
+
+// Tier 1 Foundation Components
+module Badge = Basefn__Badge
+module Spinner = Basefn__Spinner
+module Separator = Basefn__Separator
+module Kbd = Basefn__Kbd
+module Typography = Basefn__Typography
+
+// Tier 2
+module Card = Basefn__Card
+module Avatar = Basefn__Avatar
+module Grid = Basefn__Grid
+module Alert = Basefn__Alert
+module Progress = Basefn__Progress
+module Tabs = Basefn__Tabs
+module Accordion = Basefn__Accordion
+module Breadcrumb = Basefn__Breadcrumb
+
+// Tier 3
+module Modal = Basefn__Modal
+module Tooltip = Basefn__Tooltip
+module Switch = Basefn__Switch
+module Slider = Basefn__Slider
+module Dropdown = Basefn__Dropdown
+module Toast = Basefn__Toast
+
+// Tier 4 - Navigation & Layout
+module Stepper = Basefn__Stepper
+module Drawer = Basefn__Drawer
+module Timeline = Basefn__Timeline
+
+// Application Layout
+module Sidebar = Basefn__Sidebar
+module Topbar = Basefn__Topbar
+module AppLayout = Basefn__AppLayout
+
+// Theme
+module Theme = Basefn__Theme
+module ThemeToggle = Basefn__ThemeToggle
+
+// Icons
+module Icon = Basefn__Icon

package/src/Basefn.res.mjs

@@ -0,0 +1,114 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+import './basefn.css'
+;
+
+let Button;
+
+let Input;
+
+let Textarea;
+
+let Select;
+
+let Checkbox;
+
+let Radio;
+
+let Label;
+
+let Badge;
+
+let Spinner;
+
+let Separator;
+
+let Kbd;
+
+let Typography;
+
+let Card;
+
+let Avatar;
+
+let Grid;
+
+let Alert;
+
+let Progress;
+
+let Tabs;
+
+let Accordion;
+
+let Breadcrumb;
+
+let Modal;
+
+let Tooltip;
+
+let Switch;
+
+let Slider;
+
+let Dropdown;
+
+let Toast;
+
+let Stepper;
+
+let Drawer;
+
+let Timeline;
+
+let Sidebar;
+
+let Topbar;
+
+let AppLayout;
+
+let Theme;
+
+let ThemeToggle;
+
+let Icon;
+
+export {
+  Button,
+  Input,
+  Textarea,
+  Select,
+  Checkbox,
+  Radio,
+  Label,
+  Badge,
+  Spinner,
+  Separator,
+  Kbd,
+  Typography,
+  Card,
+  Avatar,
+  Grid,
+  Alert,
+  Progress,
+  Tabs,
+  Accordion,
+  Breadcrumb,
+  Modal,
+  Tooltip,
+  Switch,
+  Slider,
+  Dropdown,
+  Toast,
+  Stepper,
+  Drawer,
+  Timeline,
+  Sidebar,
+  Topbar,
+  AppLayout,
+  Theme,
+  ThemeToggle,
+  Icon,
+}
+/*  Not a pure module */

package/src/Basefn__Dom.res

@@ -0,0 +1,9 @@
+let target = (e: Dom.event) => Obj.magic(e)["target"]
+
+let preventDefault = (e: Dom.event) => %raw(`e.preventDefault()`)
+
+let stopPropagation = (e: Dom.event) => %raw(`e.stopPropagation()`)
+
+let addEventListener = %raw(`function(a, b) { document.addEventListener(a, b) }`)
+
+@set external setInnerHTML: (Dom.element, string) => unit = "setInnerHTML"

package/src/Basefn__Dom.res.mjs

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+function target(e) {
+  return e.target;
+}
+
+function preventDefault(e) {
+  return (e.preventDefault());
+}
+
+function stopPropagation(e) {
+  return (e.stopPropagation());
+}
+
+let addEventListener = (function(a, b) { document.addEventListener(a, b) });
+
+export {
+  target,
+  preventDefault,
+  stopPropagation,
+  addEventListener,
+}
+/* No side effect */

package/src/Basefn__Utils.res

@@ -0,0 +1,15 @@
+// Utility types and functions for handling both regular values and signals
+
+type reactive<'a> =
+  | Value('a)
+  | SignalValue(Signals.Signal.t<'a>)
+
+let getValue = (reactive: reactive<'a>): 'a => {
+  switch reactive {
+  | Value(v) => v
+  | SignalValue(s) => Signals.Signal.get(s)
+  }
+}
+
+let makeReactive = (value: 'a): reactive<'a> => Value(value)
+let makeReactiveFromSignal = (signal: Signals.Signal.t<'a>): reactive<'a> => SignalValue(signal)

package/src/Basefn__Utils.res.mjs

@@ -0,0 +1,32 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Signals from "rescript-signals/src/Signals.res.mjs";
+
+function getValue(reactive) {
+  if (reactive.TAG === "Value") {
+    return reactive._0;
+  } else {
+    return Signals.Signal.get(reactive._0);
+  }
+}
+
+function makeReactive(value) {
+  return {
+    TAG: "Value",
+    _0: value
+  };
+}
+
+function makeReactiveFromSignal(signal) {
+  return {
+    TAG: "SignalValue",
+    _0: signal
+  };
+}
+
+export {
+  getValue,
+  makeReactive,
+  makeReactiveFromSignal,
+}
+/* Signals Not a pure module */