0.0.1

Author: logonoff

.github/workflows/publish-to-npm.yml

@@ -0,0 +1,44 @@
+name: Release shalecss to NPM
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "lts/*"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build packages
+        run: npm run build
+
+      - name: Publish @shalecss/core
+        run: npm publish --workspace=@shalecss/core --access public --provenance --tolerate-republish
+
+      - name: Publish @shalecss/react
+        run: npm publish --workspace=@shalecss/react --access public --provenance --tolerate-republish
+
+      - name: Create GitHub release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          tag="${GITHUB_REF#refs/tags/}"
+
+          gh release create "$tag" \
+            --title="$tag" \
+            --generate-notes

README.md

@@ -26,6 +26,13 @@ This will run a next.js development server at `http://localhost:3000`, as well
 as a watch process to rebuild any css files or React components. Documentation
 is written in the TSdoc of each component directly in the React workspace.
 
+## Want to read more mes?
+
+This project is made up of two main packages:
+
+- [core](workspaces/core/README.md) - core CSS styles
+- [react](workspaces/react/README.md) - a thin React wrapper over said CSS styles
+
 ## Usage
 
 Include the following files in your project:

package-lock.json

@@ -13,7 +13,7 @@
     "build": "npm run build:core && npm run build:react && npm run build:website",
     "dev": "concurrently --names core,react,website 'npm run dev:core' 'npm run dev:react' 'npm run dev:website'",
     "pretty": "prettier --write . \"!**/reports/*.md\"",
-    "version": "node ./scripts/version-bump.mjs && npm install && npm run build"
+    "version": "npm run pretty && node ./scripts/version-bump.mjs && npm install && npm run build"
   },
   "devDependencies": {
     "concurrently": "^9.2.1",

package.json

@@ -3,19 +3,19 @@ import { readFileSync, writeFileSync } from "fs";
 // Take the monorepo version and propagate it to all workspaces
 
 const currentVersion = JSON.parse(
-    readFileSync("./package.json", "utf-8")
+  readFileSync("./package.json", "utf-8"),
 ).version;
 
 for (const workspace of ["core", "react", "website"]) {
-    let manifest = JSON.parse(
-        readFileSync(`./workspaces/${workspace}/package.json`, "utf-8")
-    );
+  let manifest = JSON.parse(
+    readFileSync(`./workspaces/${workspace}/package.json`, "utf-8"),
+  );
 
-    manifest.version = currentVersion;
+  manifest.version = currentVersion;
 
-    writeFileSync(
-        `./workspaces/${workspace}/package.json`,
-        JSON.stringify(manifest, null, 2) + "\n",
-        "utf-8"
-    );
+  writeFileSync(
+    `./workspaces/${workspace}/package.json`,
+    JSON.stringify(manifest, null, 2) + "\n",
+    "utf-8",
+  );
 }

scripts/version-bump.mjs

@@ -0,0 +1,30 @@
+# `@shalecss/core`
+
+[![NPM Version](https://img.shields.io/npm/v/%40shalecss%2Fcore)](https://www.npmjs.com/package/@shalecss/core)
+[![GitHub License](https://img.shields.io/github/license/logonoff/shalecss)](https://github.com/logonoff/shalecss/blob/main/LICENSE)
+
+A pseudo-skeuomorph CSS framework.
+
+## Installation
+
+```bash
+npm install @shalecss/core
+```
+
+## Usage
+
+Import the CSS in your project:
+
+```js
+import "@shalecss/core/dist/shale.css";
+```
+
+Or link directly in HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/@shalecss/core/dist/shale.css" />
+```
+
+## Documentation
+
+See the full documentation at [https://logonoff.co/shalecss](https://logonoff.co/shalecss)

workspaces/core/README.md

@@ -9,12 +9,20 @@
     "./dist/icons.svg": "./dist/icons.svg"
   },
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "generate:banner": "node ./scripts/generate-banner.js",
     "prebuild": "mkdir -p dist && cp ./shalecss.js ./dist/shalecss.js && cp ./icons.svg ./dist/icons.svg && npm run generate:banner",
     "build": "npm run prebuild && sass scss/shale.scss:dist/shale.css --style=compressed --error-css",
-    "dev": "npm run prebuild && sass scss/shale.scss:dist/shale.css --style=expanded --error-css --watch"
+    "dev": "npm run prebuild && sass scss/shale.scss:dist/shale.css --style=expanded --error-css --watch",
+    "prepublishOnly": "pushd ../ && npm run version"
   },
+  "keywords": [
+    "shalecss",
+    "react"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/logonoff/shalecss.git"

workspaces/core/package.json

@@ -0,0 +1,34 @@
+# `@shalecss/react`
+
+[![NPM Version](https://img.shields.io/npm/v/%40shalecss%2Freact)](https://www.npmjs.com/package/@shalecss/react)
+[![GitHub License](https://img.shields.io/github/license/logonoff/shalecss)](https://github.com/logonoff/shalecss/blob/main/LICENSE)
+
+A pseudo-skeuomorph React component library built on [@shalecss/core](https://www.npmjs.com/package/@shalecss/core).
+
+## Installation
+
+```bash
+npm install @shalecss/react @shalecss/core
+```
+
+## Usage
+
+Import the core CSS and use the components:
+
+```jsx
+import "@shalecss/core/dist/shale.css";
+import { Button, Card, Input } from "@shalecss/react";
+
+export default () => {
+  return (
+    <Card>
+      <Input type="text" placeholder="Enter text..." />
+      <Button>Submit</Button>
+    </Card>
+  );
+};
+```
+
+## Documentation
+
+See the full documentation at [https://logonoff.co/shalecss](https://logonoff.co/shalecss)

workspaces/react/README.md

@@ -13,8 +13,13 @@
     "api-extractor": "api-extractor run --local --verbose",
     "clean": "rm -rf dist",
     "build": "tsgo -p tsconfig.json && npm run api-extractor",
-    "dev": "npm-watch"
+    "dev": "npm-watch",
+    "prepublishOnly": "pushd ../ && npm run version"
   },
+  "keywords": [
+    "shalecss",
+    "react"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/logonoff/shalecss.git"
@@ -24,20 +29,20 @@
   "license": "MIT",
   "dependencies": {
     "@shalecss/core": "*",
-    "clsx": "^2.1.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "react": "^18 | ^19",
     "react-dom": "^18 | ^19"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.55.1",
-    "@typescript/native-preview": "^7.0.0-dev.20251129.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "npm-watch": "0.13.0"
+    "@typescript/native-preview": "^7.0.0-dev.20251129.1",
+    "npm-watch": "0.13.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "watch": {
     "build": {

workspaces/react/package.json

@@ -1,5 +1,6 @@
 /**
- * Shale UI React Library
+ * `@shalecss/react` is a React component library that provides
+ * a thin wrapper around `@shalecss/core` CSS styles.
  *
  * @packageDocumentation
  */