Mono repo (#102)

Co-authored-by: Aaron Plave <[email protected]>

.editorconfig

@@ -4,9 +4,9 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
+end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.md]
-max_line_length = off
-trim_trailing_whitespace = false
+insert_final_newline = false

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
-css
+packages/css/css
 node_modules
+dist

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+v18.18.0

.prettierignore

@@ -1 +1,4 @@
-scss
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc.mjs

@@ -0,0 +1,9 @@
+const config = {
+  arrowParens: "avoid",
+  printWidth: 120,
+  semi: true,
+  singleQuote: true,
+  trailingComma: "all",
+};
+
+export default config;

.stylelintignore

@@ -0,0 +1,5 @@
+.svelte-kit/**
+build/**
+e2e-test-results/**
+node_modules/**
+unit-test-results/**

.stylelintrc.mjs

@@ -0,0 +1,23 @@
+const config = {
+  extends: 'stylelint-config-standard-scss',
+  overrides: [
+    {
+      files: ['**/*.scss'],
+      customSyntax: 'postcss-scss',
+      rules: {
+        'scss/at-import-no-partial-leading-underscore': null,
+        'scss/at-import-partial-extension': null,
+      },
+    },
+  ],
+  plugins: ['stylelint-scss', 'stylelint-order'],
+  rules: {
+    'custom-property-pattern': '(--st-)?.*',
+    'declaration-empty-line-before': 'never',
+    'order/order': ['custom-properties', 'declarations'],
+    'order/properties-alphabetical-order': true,
+    'selector-class-pattern': '^([a-z][a-z0-9]*)((-){0,2}[a-z0-9]+)*$',
+  },
+};
+
+export default config;

.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "EditorConfig.EditorConfig",
+    "christian-kohler.path-intellisense",
+    "streetsidesoftware.code-spell-checker",
+    "spmeesseman.vscode-taskexplorer",
+    "csstools.postcss",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,42 @@
+{
+  "prettier.configPath": "./.prettierrc.mjs",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortImports": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "[json]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "always"
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript][typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css][scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "[javascriptreact][typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "stylelint.validate": ["css", "scss"],
+  "terminal.integrated.profiles.osx": {
+    "bash": {
+      "args": ["--login"],
+      "icon": "terminal-bash",
+      "path": "bash"
+    },
+    "zsh": {
+      "args": ["--login", "--interactive"],
+      "path": "zsh"
+    }
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,68 @@
+{
+  "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",
+      "command": "nvm use && cd ./packages/react && npm run storybook",
+      "detail": "Task to run Stellar React in development mode.",
+      "isBackground": true,
+      "problemMatcher": [
+        {
+          "background": {
+            "activeOnStart": true,
+            "beginsPattern": ".*\\[webpack-dev-middleware\\]",
+            "endsPattern": ".*bundle\\.js"
+          },
+          "pattern": {
+            "regexp": "."
+          }
+        }
+      ],
+      "presentation": {
+        "group": "groupA"
+      }
+    },
+    {
+      "label": "Svelte",
+      "type": "shell",
+      "command": "nvm use && cd ./packages/svelte && npm run dev",
+      "detail": "Task to run Stellar Svelte in development mode.",
+      "isBackground": true,
+      "problemMatcher": [
+        {
+          "background": {
+            "activeOnStart": true,
+            "beginsPattern": "\\s*VITE v",
+            "endsPattern": ".*to show help"
+          },
+          "pattern": {
+            "regexp": "."
+          }
+        }
+      ],
+      "presentation": {
+        "group": "groupA"
+      }
+    },
+    {
+      "label": "Build",
+      "type": "shell",
+      "command": "nvm use && npm run build",
+      "detail": "Task to build the entire library",
+      "presentation": {
+        "group": "groupB"
+      }
+    }
+  ]
+}

README.md

@@ -6,25 +6,45 @@ 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.
 
 ```html
 <html>
   <head>
-    <link href="@nasa-jpl/stellar/css/button.css" rel="stylesheet" />
+    <link href="@nasa-jpl/stellar/dist/css/button.css" rel="stylesheet" />
   </head>
   <body>
     <button class="st-button">Stellar!</button>
   </body>
 </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,28 @@
+# 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:
+
+`npx lerna publish --preid=alpha --dist-tag=alpha`
+
+This will bump the version patch and appends the version with `-alpha` and tag the package release on npm with `alpha`
+
+If you accidentally published a release with the wrong tag you can run something like the following:
+
+```
+npm dist-tag add @nasa-jpl/[email protected] latest
+npm dist-tag add @nasa-jpl/[email protected] foo
+```

lerna.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "packages": ["packages/*"],
+  "version": "2.0.0-alpha.27"
+}