@noeticlabs/nlds-svelte

A collection of reusable Svelte components developed by Noetic Labs. This library provides a set of UI components built with Svelte 5 for use in your Svelte or SvelteKit applications.

Note: We are currently using SvelteKit specific features and conventions, so this library will not work with Svelte applications that do not use SvelteKit until further notice.

Inspiration

This design system is heavily inspired by the excellent work done by the team behind IBM's Carbon Design System. While not a direct port or clone, we aim to capture its principles of consistency, modularity, and professionalism within a Svelte context, tailored for our needs at Noetic Laboratories.

Features

• Modern: Built with Svelte 5.
• Type-Safe: Includes TypeScript definitions for better developer experience.
• Modular: Import only the components you need.
• Core Styling: Includes a base stylesheet (core.css).

Installation

Currently, this library is intended for direct installation from its GitHub repository.

# Using npm
npm install github:NoeticLaboratories/nlds-svelte

# Using yarn
yarn add github:NoeticLaboratories/nlds-svelte

# Using pnpm
pnpm add github:NoeticLaboratories/nlds-svelte

You can also install from a specific branch, tag, or commit hash:

npm install github:NoeticLaboratories/nlds-svelte#branch-name/OR/commit-hash

Important Note: Installation directly from Git relies on npm/yarn/pnpm executing the prepare script (npm run build) after cloning to generate the necessary dist files. Alternatively, ensure the dist directory is pre-built and committed to the specific branch or tag you are installing from for maximum reliability.

Usage

1. Import Core Styles

You need to import the core stylesheet in your application. This is typically done in your main layout file (e.g., src/routes/+layout.svelte in SvelteKit) or your main application entry point.

import '@noeticlabs/nlds-svelte/styles/core.css';
// Import other global styles or components if needed

Or in a JavaScript/TypeScript entry file:

// src/app.js (example)
import '@noeticlabs/nlds-svelte/styles/core.css';

2. Import and Use Components

Import components directly from their path within the library as defined in package.json exports.

<script>
  import { Button } from '@noeticlabs/nlds-svelte';

  let count = 0;
  const handleButtonClick = () => count++;
</script>

<h1>Welcome to NLDS Svelte</h1>

<Button kind="primary" on:click={handleButtonClick}>
  Click Me ({count})
</Button>

Development

To contribute or run this project locally:

1. Clone the repository:

   git clone https://github.com/NoeticLaboratories/nlds-svelte.git
   cd nlds-svelte
   

2. Install dependencies:

   npm install
   # or yarn install / pnpm install
   

3. Run the development server (for the demo/docs app):

   npm run dev
   

4. Build the library:

   npm run build
   

5. Linting and Type Checking:

   npm run lint
   npm run check
   

Repository Structure

• src/lib: Contains the library source code (components, styles, utilities).
  • src/lib/components: Individual Svelte components.
  • src/lib/styles: Core stylesheets (e.g., core.css).
• src/routes: Contains the development/documentation site (if using SvelteKit).
• dist: Contains the built output of the library (generated by npm run build). This is what gets used when the package is installed.

License

This project is licensed under the MIT License. See the LICENSE file for details.