chore(core): packages docs

.cz-config.js

@@ -27,6 +27,7 @@ module.exports = {
       name: 'coral-react',
       description: 'anyting @divetool/coral-react related',
     },
+    { name: 'core', description: 'anything Coral core related' },
     {
       name: 'repo',
       description: 'anything related to managing the repo itself',

README.md

@@ -4,7 +4,7 @@
 [![CI](https://github.com/divetool/coral/actions/workflows/ci.yml/badge.svg)](https://github.com/divetool/coral/actions/workflows/ci.yml)
 ![license](https://img.shields.io/npm/l/@divetool/coral.svg?style=flat-square)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdivetool%2Fcoral.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fdivetool%2Fcoral?ref=badge_shield)
-[![NPM Version](https://badge.fury.io/js/%40divetool%2Fcoral.svg)](https://www.npmjs.com/@divetool/coral)
+[![NPM Version](https://img.shields.io/npm/v/@divetool/coral?color=green&label=NPM+version&logo=npm)](https://www.npmjs.com/@divetool/coral)
 [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)]()
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](docs/CODE_OF_CONDUCT.md)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

nx.json

@@ -9,7 +9,14 @@
     "default": {
       "runner": "@nrwl/nx-cloud",
       "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"],
+        "cacheableOperations": [
+          "build",
+          "build-stencil",
+          "build-storybook",
+          "lint",
+          "test",
+          "e2e"
+        ],
         "accessToken": "MzY2NjJhODEtMzUwZC00NjMwLTkyZGItMDBlOThiOTJkMDdjfHJlYWQ="
       }
     }

package.json

@@ -30,17 +30,17 @@
     "@babel/plugin-proposal-export-default-from": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@nrwl/angular": "15.0.10",
-    "@nrwl/cli": "15.0.10",
-    "@nrwl/cypress": "15.0.10",
-    "@nrwl/eslint-plugin-nx": "15.0.10",
-    "@nrwl/jest": "15.0.10",
-    "@nrwl/linter": "15.0.10",
+    "@nrwl/angular": "15.0.13",
+    "@nrwl/cli": "15.0.13",
+    "@nrwl/cypress": "15.0.13",
+    "@nrwl/eslint-plugin-nx": "15.0.13",
+    "@nrwl/jest": "15.0.13",
+    "@nrwl/linter": "15.0.13",
     "@nrwl/nx-cloud": "15.0.2",
-    "@nrwl/react": "15.0.10",
-    "@nrwl/storybook": "15.0.10",
-    "@nrwl/web": "15.0.10",
-    "@nrwl/workspace": "15.0.10",
+    "@nrwl/react": "15.0.13",
+    "@nrwl/storybook": "15.0.13",
+    "@nrwl/web": "15.0.13",
+    "@nrwl/workspace": "15.0.13",
     "@nxext/stencil": "^14.0.6",
     "@nxkit/style-dictionary": "^0.0.5",
     "@stencil/angular-output-target": "^0.4.0",
@@ -78,7 +78,7 @@
     "jest-preset-angular": "~12.2.2",
     "lerna": "^6.0.3",
     "ng-packagr": "~14.2.0",
-    "nx": "15.0.10",
+    "nx": "15.0.13",
     "postcss": "^8.4.5",
     "postcss-import": "~14.1.0",
     "postcss-preset-env": "~7.5.0",

packages/coral-angular/README.md

@@ -1,7 +1,52 @@
-# coral-angular
+<div align="right">
+    <img src="https://angular.io/assets/images/logos/angular/angular.svg" alt="Angular Logo" itemprop="image" width="50" align="right">
+    <img src="https://github.com/divetool/coral/raw/main/docs/coral-logo.png" alt="Coral logo" title="Coral" width="50" align="right" style="margin-right: 1rem;"/>
+</div>
 
-This library was generated with [Nx](https://nx.dev).
+[![CI](https://github.com/divetool/coral/actions/workflows/ci.yml/badge.svg)](https://github.com/divetool/coral/actions/workflows/ci.yml)
+[![NPM Version](https://img.shields.io/npm/v/@divetool/coral-angular?color=green&label=%40divetool%2Fcoral-angular&logo=npm)](https://www.npmjs.com/@divetool/coral-angular)
 
-## Running unit tests
+# Coral Angular Components
 
-Run `nx test coral-angular` to execute the unit tests.
+The Coral's Angular components are built using **StencilJS**. Read more about it in the [StencilJS website](https://stenciljs.com/).
+
+## Documentation
+
+Read the full docs at https://divetool.github.io/coral
+
+## Getting started
+
+To start using Coral's Angular components, start by installing `@divetool/coral-angular` in your Angular project.
+
+```bash
+npm install @divetool/coral-angular
+```
+
+Then add the `CoralAngularModule` to your NgModule.
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { CoralAngularModule } from '@divetool/coral-angular';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [CoralAngularModule, BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+You are now able to use Coral components in your Angular component templates:
+
+```html
+<crl-button variant="secondary" [disabled]="isDisabled"> Click me </crl-button>
+```
+
+## License
+
+This project is licensed under the **MIT License**.
+
+See [LICENSE](https://github.com/divetool/coral/blob/main/LICENSE) for more information.

packages/coral-angular/package.json

@@ -1,15 +1,33 @@
 {
   "name": "@divetool/coral-angular",
+  "description": "Angular components for the Coral Design System 🪸",
   "version": "0.0.1",
+  "keywords": [
+    "Monorepo",
+    "Design-System",
+    "Stencil",
+    "Component Library",
+    "Web Components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "github",
+    "url": "https://github.com/divetool/coral",
+    "directory": "packages/coral-angular"
+  },
+  "bugs": {
+    "url": "https://github.com/divetool/coral/issues"
+  },
+  "homepage": "https://github.com/divetool/coral#readme",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0"
   },
   "dependencies": {
     "@divetool/coral": "file:../coral",
     "tslib": "^2.3.0"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

packages/coral-angular/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "coral-angular",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "implicitDependencies": ["coral"],

packages/coral-react/README.md

@@ -1,7 +1,41 @@
-# coral-react
+<div align="right">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React logo" height="50" align="right">
+    <img src="https://github.com/divetool/coral/raw/main/docs/coral-logo.png" alt="Coral logo" title="Coral" width="50" align="right" style="margin-right: 1rem;"/>
+</div>
 
-This library was generated with [Nx](https://nx.dev).
+[![CI](https://github.com/divetool/coral/actions/workflows/ci.yml/badge.svg)](https://github.com/divetool/coral/actions/workflows/ci.yml)
+[![NPM Version](https://img.shields.io/npm/v/@divetool/coral-react?color=green&label=%40divetool%2Fcoral-react&logo=npm)](https://www.npmjs.com/@divetool/coral-react)
 
-## Running unit tests
+# Coral React Components
 
-Run `nx test coral-react` to execute the unit tests via [Jest](https://jestjs.io).
+The Coral's React components are built using **StencilJS**. Read more about it in the [StencilJS website](https://stenciljs.com/).
+
+## Documentation
+
+Read the full docs at https://divetool.github.io/coral
+
+## Getting started
+
+To start using Coral's React components, start by installing `@divetool/coral-react` in your React project.
+
+```bash
+npm install @divetool/coral-angular
+```
+
+Then import the components into your application TSX/JSX.
+
+```tsx
+import { CrlButton } from '@divetool/coral-react';
+
+export function App() {
+  return <CrlButton>Click me</CrlButton>;
+}
+
+export default App;
+```
+
+## License
+
+This project is licensed under the **MIT License**.
+
+See [LICENSE](https://github.com/divetool/coral/blob/main/LICENSE) for more information.

packages/coral-react/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@divetool/coral-react",
+  "description": "React components for the Coral Design System 🪸",
   "version": "0.0.1",
   "keywords": [
     "Monorepo",
@@ -11,11 +12,13 @@
   "license": "MIT",
   "repository": {
     "type": "github",
-    "url": "https://github.com/divetool/coral"
+    "url": "https://github.com/divetool/coral",
+    "directory": "packages/coral-react"
   },
   "bugs": {
     "url": "https://github.com/divetool/coral/issues"
   },
+  "homepage": "https://github.com/divetool/coral#readme",
   "publishConfig": {
     "access": "public"
   },

packages/coral-react/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "coral-react",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/coral-react/src",
   "projectType": "library",

packages/coral-tokens/README.md

@@ -1,3 +1,15 @@
-# Coral Tokens
+<div align="right">
+    <img src="https://amzn.github.io/style-dictionary/assets/logo.png" alt="Style Dictionary logo" height="50" align="right">
+    <img src="https://github.com/divetool/coral/raw/main/docs/coral-logo.png" alt="Coral logo" title="Coral" width="50" align="right" style="margin-right: 1rem;"/>
+</div>
 
-This library was generated with [Nx](https://nx.dev).
+[![CI](https://github.com/divetool/coral/actions/workflows/ci.yml/badge.svg)](https://github.com/divetool/coral/actions/workflows/ci.yml)
+[![NPM Version](https://img.shields.io/npm/v/@divetool/coral-tokens?color=green&label=%40divetool%2Fcoral-tokens&logo=npm)](https://www.npmjs.com/@divetool/coral-tokens)
+
+# Coral Design Tokens
+
+## License
+
+This project is licensed under the **MIT License**.
+
+See [LICENSE](https://github.com/divetool/coral/blob/main/LICENSE) for more information.

packages/coral-tokens/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@divetool/coral-tokens",
+  "description": "Design Tokens for the Coral Design System 🪸",
   "version": "0.0.1",
+  "module": "./index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts",
   "keywords": [
     "Monorepo",
     "Design-System",
     "Style Dictionary",
     "Design-Tokens",
-    "Styles"
+    "Styles",
+    "SCSS"
   ],
   "files": [
     "scss",
@@ -15,15 +20,14 @@
   "license": "MIT",
   "repository": {
     "type": "github",
-    "url": "https://github.com/divetool/coral"
+    "url": "https://github.com/divetool/coral",
+    "directory": "packages/coral-tokens"
   },
   "bugs": {
     "url": "https://github.com/divetool/coral/issues"
   },
+  "homepage": "https://github.com/divetool/coral#readme",
   "publishConfig": {
     "access": "public"
-  },
-  "module": "./index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
+  }
 }

packages/coral-tokens/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "coral-tokens",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "packages/coral-tokens/src",