added docs

wip

.vscode/tasks.json

@@ -1,6 +1,16 @@
 {
   "version": "2.0.0",
   "tasks": [
+    {
+      "label": "Build CSS",
+      "type": "shell",
+      "command": "nvm use && npm run build:css",
+      "detail": "Task to build the Stellar CSS package.",
+      "isBackground": false,
+      "presentation": {
+        "group": "groupA"
+      }
+    },
     {
       "label": "React",
       "type": "shell",

README.md

@@ -6,10 +6,24 @@ A CSS implementation of the Stellar design system for spacecraft operation tools
 
 ## Install
 
+### CSS only
+
 ```sh
 npm install @nasa-jpl/stellar --save
 ```
 
+### React components
+
+```sh
+npm install @nasa-jpl/stellar-react --save
+```
+
+### Svelte components
+
+```sh
+npm install @nasa-jpl/stellar-svelte --save
+```
+
 ## Usage
 
 Import the desired CSS files into your project to make the classes globally available. See our [example project][stellar-example] for detailed API usage.
@@ -25,6 +39,12 @@ Import the desired CSS files into your project to make the classes globally avai
 </html>
 ```
 
+## Development
+
+If you are a developer you can get started quickly by reading the [developer documentation][dev].
+
+[dev]: ./docs/DEVELOPER.md
+
 ## License
 
 The scripts and documentation in this project are released under the [MIT License](LICENSE).

docs/DEVELOPER.md

@@ -0,0 +1,88 @@
+# Developer
+
+This document describes how to set up your development environment to build and develop stellar.
+
+- [Prerequisite Software](#prerequisite-software)
+- [Code Editor](#code-editor)
+- [Getting the Sources](#getting-the-sources)
+- [Installing NPM Modules](#installing-npm-modules)
+- [Start Development Server](#start-development-server)
+- [Building For Production](#building-for-production)
+- [Cleaning](#cleaning)
+
+## Prerequisite Software
+
+Before you can run stellar you must install and configure the following products on your development machine:
+
+- [Git](http://git-scm.com) and/or the [GitHub app](https://desktop.github.com/); [GitHub's Guide to Installing Git](https://help.github.com/articles/set-up-git) is a good source of information.
+
+- [Node.js LTS](http://nodejs.org) which is used to run a development web server, and generate distributable files. We recommend using the [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm) to install Node.js and [NPM](https://www.npmjs.com/) on your machine. Once you have NVM installed you can use the required Node.js/NPM versions via:
+
+  ```shell
+  cd stellar
+  nvm use
+  ```
+
+## Code Editor
+
+The recommended editor for developing stellar is [VS Code](https://code.visualstudio.com/) with the following settings and extensions. You can easily use another editor of your choice as long as you can replicate the code formatting settings.
+
+### Settings.json
+
+Your editor should follow the same settings found in [.vscode/settings.json](../.vscode/settings.json).
+
+### Extensions
+
+1. [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
+1. [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+1. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+1. [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+1. [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+1. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
+1. [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+1. [Task Explorer](https://marketplace.visualstudio.com/items?itemName=spmeesseman.vscode-taskexplorer)
+
+## Getting the Sources
+
+[Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) the stellar repository:
+
+```shell
+git clone https://github.com/nasa-jpl/stellar.git
+cd stellar
+```
+
+## Installing NPM Modules
+
+Install the JavaScript modules needed to build stellar:
+
+```shell
+npm install
+```
+
+## Development
+
+### CSS
+
+Any changes made to the [CSS package](../packages/css/) locally must first be built via `npm run build:css` or the VSCode Task: `Build CSS`
+
+To preview the changes, open [packages/css/example/index.html](../packages/css/example/index.html) in a browser.
+
+### React
+
+To run the React package for development:
+
+`npm run dev:react` (VSCode Task: `React`)
+
+For more details, view the [README](../packages/react/README.md) for the package
+
+### Svelte
+
+To run the Svelte package for development:
+
+`npm run dev:svelte` (VSCode Task: `Svelte`)
+
+For more details, view the [README](../packages/svelte/README.md) for the package
+
+## Building For Production
+
+Run `npm run build` (VSCode Task: `Build`) to build a production version of the project. The built artifacts for each package will be stored in the `dist/` directory under their respective workspaces.

docs/RELEASE.md

@@ -0,0 +1,19 @@
+# Release
+
+This document contains instructions on how to release Stellar
+
+## Steps
+
+This project utilizes [Lerna](https://lerna.js.org/docs/features/version-and-publish) to handle publishing relevant packages.
+
+1. Figure out what version you are releasing and use the format `{MAJOR}.{MINOR}.{PATCH}`. For descriptions of MAJOR, MINOR, and PATCH please refer to the [Semantic Versioning](https://semver.org/) documentation.
+1. To publish using lerna you can utilize the [npm version management](https://docs.npmjs.com/cli/v10/commands/npm-version#synopsis) to increment the version accordingly before publishing
+
+- e.g. `npx lerna publish patch`
+- `npx lerna publish` will only apply new versions to packages that have changes
+
+### Additional Notes:
+
+If you want to do a pre-release to test out functionality in other projects, you can publish a pre-release candidate to npm:
+
+- e.g. `npx lerna publish --preid=alpha`

packages/css/package.json

@@ -31,8 +31,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npm run build:css && node scripts/build.js",
-    "build:css": "rm -rf dist/css && sass src/scss:dist/css",
+    "build": "npm run build:css-only && node scripts/build.js",
+    "build:css-only": "rm -rf dist/css && sass src/scss:dist/css",
     "lint": "stylelint scss/**/*.scss --fix",
     "prepublishOnly": "npm run build"
   },

packages/react/.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-    "cSpell.enableFiletypes": [
-        "!typescript"
-    ]
-}
+  "prettier.configPath": "./.prettierrc.mjs",
+  "eslint.validate": ["css", "javascript", "typescript", "svelte"],
+  "cSpell.enableFiletypes": ["!typescript"]
+}

packages/react/README.md

@@ -1,37 +1,39 @@
-[![npm version](https://img.shields.io/npm/v/@nasa-jpl/react-stellar.svg)](https://www.npmjs.com/package/@nasa-jpl/react-stellar)
+[![npm version](https://img.shields.io/npm/v/@nasa-jpl/stellar-react.svg)](https://www.npmjs.com/package/@nasa-jpl/stellar-react)
 
-# react-stellar
+# Stellar React
 
-React implementation of the Stellar design system built on top of the (native CSS Stellar) implementation [https://github.com/nasa-jpl/react-stellar]. The React implementation of the Stellar design system provides a more complete implementation of the Stellar design system whereas the native CSS Stellar only provides styling for native HTML elements as well as CSS variables for color and typography. React Stellar is written in Typescript and bundled with Rollup.
+React implementation of the Stellar design system built on top of the (native CSS Stellar) implementation.
+
+The React implementation of the Stellar design system provides a more complete implementation of the Stellar design system whereas the native CSS Stellar only provides styling for native HTML elements as well as CSS variables for color and typography. Stellar React is written in Typescript and bundled with Rollup.
 
 ## What is Stellar?
 
 Stellar is design system for operations tools that enables developers and designers to make use of battle-tested components and focus their efforts on the unique aspects of their applications. Included in this design system are code components, design files and assets, and guidelines for use.
 
 ## Component Usage and Demos
 
-Demos and documentation for the components can be found here: https://nasa-jpl.github.io/react-stellar/. Not all Stellar design system components are supported yet as this is an ongoing effort. Many components in this library are build on top of [Radix Primitives](https://www.radix-ui.com/docs/primitives/overview/getting-started). Radix Primitives provide unstyled, accessible components meant to be used as building blocks for design systems. React Stellar components that use Radix Primitives will contain links to the Radix documentation for more detailed information regarding component properties and usage.
+Demos and documentation for the components can be found here: https://nasa-jpl.github.io/stellar-react/. Not all Stellar design system components are supported yet as this is an ongoing effort. Many components in this library are build on top of [Radix Primitives](https://www.radix-ui.com/docs/primitives/overview/getting-started). Radix Primitives provide unstyled, accessible components meant to be used as building blocks for design systems. React Stellar components that use Radix Primitives will contain links to the Radix documentation for more detailed information regarding component properties and usage.
 
 ## Library Installation and Usage
 
 Run the following command in the root of your React application repository to install the library. This assumes you already have NodeJS installed on your machine and that you are installing this library into a React project.
 
 ```sh
-npm install --save-dev @nasa-jpl/react-stellar
+npm install @nasa-jpl/stellar-react --save
 ```
 
 ## Importing Stellar Components in React
 
-Include react-stellar and stellar styles using the following import in your app:
+Include stellar-react and stellar styles using the following import in your app:
 
 ```JS
-import "@nasa-jpl/react-stellar/dist/esm/stellar.css";
+import "@nasa-jpl/stellar-react/dist/esm/stellar.css";
 ```
 
 You can import a Stellar component using the following syntax:
 
 ```JS
-import { Button } from "@nasa-jpl/react-stellar";
+import { Button } from "@nasa-jpl/stellar-react";
 ```
 
 Example usage:
@@ -46,14 +48,12 @@ Example usage:
 
 ### Prerequisite Software
 
-Before you can develop components for react-stellar you must install and configure the following products on your development machine:
-
-- [Git](http://git-scm.com) and/or the [GitHub app](https://desktop.github.com/); [GitHub's Guide to Installing Git](https://help.github.com/articles/set-up-git) is a good source of information.
+Before you can develop components for stellar-react you must install and configure the following products on your development machine:
 
 - [Node.js LTS](http://nodejs.org) which is used to run a development web server, and generate distributable files. We recommend using the [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm) to install Node.js and [NPM](https://www.npmjs.com/) on your machine. Once you have NVM installed you can use the required Node.js/NPM versions via:
 
   ```shell
-  cd react-stellar
+  cd stellar-react
   nvm use
   ```
 
@@ -69,34 +69,25 @@ The recommended editor for developing aerie-ui is [VS Code](https://code.visuals
 1. [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
 1. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
 
-### Getting the Source
-
-[Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) the react-stellar repository:
-
-```sh
-git clone https://github.com/nasa-jpl/react-stellar.git
-cd react-stellar
-```
-
 ### Installing NPM Modules
 
-Install the JavaScript modules needed to build react-stellar:
+Install the JavaScript modules needed to build stellar-react:
 
 ```sh
 npm install
 ```
 
 ### Start Development Server
 
-Development of react-stellar components is accomplished with [Storybook](https://storybook.js.org/), a frontend workshop for building UI components and pages in isolation. Run `npm run storybook` to automatically launch the Storybook for react-stellar in your default browser. The app will automatically reload if you change any of the source files.
+Development of stellar-react components is accomplished with [Storybook](https://storybook.js.org/), a frontend workshop for building UI components and pages in isolation. Run `npm run storybook` to automatically launch the Storybook for stellar-react in your default browser. The app will automatically reload if you change any of the source files.
 
 ### Building For Production
 
 Run `npm run build-lib` to build a production version of the component library. The build artifacts will be stored in the `dist/` directory. Note that the build normally occurs in a Github Action but local building will often be performed for troubleshooting purposes.
 
 ### Updating Stellar Icons
 
-The react-stellar library creates React components for every icon supplied by the base Stellar repository. Run `npm run build-icons` to build these icons after updating the base Stellar depencency. Icons will automatically be created and exported in `src/components/Icons`.
+The stellar-react library creates React components for every icon supplied by the base Stellar repository. Run `npm run build-icons` to build these icons after updating the base Stellar depencency. Icons will automatically be created and exported in `src/components/Icons`.
 
 ## Publish Component Library
 
@@ -108,7 +99,7 @@ Storybook is built and deployed to Github Pages using Github Actions.
 
 ## Theming
 
-Both Stellar and React-Stellar are built to be easily themable using a combination of class and CSS variable overrides. For a complete list of CSS variables that can be overridden please refer to the Stellar [variables.scss](https://github.com/nasa-jpl/stellar/blob/develop/scss/variables.scss) file as well as the React Stellar [variables.scss] file. For example, to change the background color of a primary button you can override the CSS variable that defines that primary button background color:
+Both Stellar and Stellar-react are built to be easily themable using a combination of class and CSS variable overrides. For a complete list of CSS variables that can be overridden please refer to the Stellar [variables.scss](https://github.com/nasa-jpl/stellar/blob/develop/scss/variables.scss) file as well as the React Stellar [variables.scss] file. For example, to change the background color of a primary button you can override the CSS variable that defines that primary button background color:
 
 ```css
 :root {