feat(dyne-button): add first button's version

.github/workflows/publish.yml

@@ -0,0 +1,92 @@
+name: 📢 Release & Publish
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+defaults:
+  run:
+    shell: bash
+
+permissions:
+  contents: read # for checkout@v4
+
+jobs:
+  test:
+    name: 🧪
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+      - run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: ${{ runner.os }}-pnpm-store-
+      - run: pnpm i
+      - run: npx playwright install --with-deps
+      - run: pnpm t
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 10
+
+  release:
+    name: 🔖
+    needs: test
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - uses: pnpm/actions-setup@v3
+        with:
+          version: 9
+      - uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: ${{ runner.os }}-pnpm-store-
+      - run: pnpm i
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  docs:
+    name: 📚
+    needs: release
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+      - uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: ${{ runner.os }}-pnpm-store-
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1
+        with:
+          install_command: pnpm i
+          build_command: pnpm run sbb
+          path: storybook-static
+

.releaserc

@@ -0,0 +1,47 @@
+{
+  "repositoryUrl": "[email protected]:dyne/components.git",
+  "dryRun": false,
+  "plugins": [
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "angular",
+        "releaseRules": [
+          { "type": "build", "scope": "deps", "release": "patch" },
+          { "type": "build", "scope": "deps-dev", "release": "patch" }
+        ]
+      }
+    ],
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": false
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "CHANGELOG.md",
+          "pnpm-lock.yaml",
+          "package.json"
+        ],
+        "message": "chore(release): 🚀 ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "assets": [
+          { "path": "dist/dyne-components/dyne-components.esm.js", "label": "JS distribution" },
+          { "path": "dist/dyne-components/dyne-components.css", "label": "CSS distribution" }
+        ]
+      }
+    ]
+  ],
+  "branches": [
+    "main"
+  ]
+}

.storybook/main.ts

@@ -3,9 +3,13 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: '@storybook/html-vite',
+  staticDirs: ['../dist'],
   async viteFinal(config, options) {
-    config.assetsInclude = ['**/*.md'];
-    return config;
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      assetsInclude: ['**/*.md'],
+    });
   },
   docs: {
     autodocs: true,

.storybook/preview-head.html

@@ -1,5 +1,2 @@
-<style></style>
-<!-- <link rel="stylesheet" href="./dyne-components/dyne-components.css" /> -->
-<!-- <script type="module" src="./dyne-components/dyne-components.esm.js"></script> -->
-<link rel="stylesheet" href="./dist/dyne-components/dyne-components.css" />
-<script type="module" src="./dist/dyne-components/dyne-components.esm.js"></script>
+<link rel="stylesheet" href="./dyne-components/dyne-components.css" />
+<script type="module" src="./dyne-components/dyne-components.esm.js"></script>

.storybook/preview.ts

@@ -8,6 +8,7 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     docs: { toc: true, themes: dyneTheme },
+    layout: 'centered',
   },
 };
 

README.md

@@ -0,0 +1,97 @@
+<!--
+SPDX-FileCopyrightText: 2023 Dyne.org foundation
+SPDX-FileCopyrightText: 2023 Puria Nafisi Azizi <[email protected]>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<h1 align="center">
+  <a href="https://dyne.org/components">
+    Dyne components
+  </a>
+  </br>
+  <sub>Make your HTML a Dyner place</sub>
+</h1>
+
+<br><br>
+
+<h4 align="center">
+  <a href="#-quick-start">🎮 Quick start</a>
+  <span> • </span>
+  <a href="#-acknowledgements">😍 Acknowledgements</a>
+  <span> • </span>
+  <a href="#-contributing">👤 Contributing</a>
+  <span> • </span>
+  <a href="#-license">💼 License</a>
+</h4>
+
+This software is meant for the Dyne.org hackers that want to easily implement web pages and follow the new design rules of Dyne.org.
+
+## 🎮 Quick start
+
+### To use it add to your html page the following:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@didroom/components/dist/dyne-components/dyne-components.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@didroom/components/dist/dyne-components/dyne-components.esm.js"></script>
+```
+
+for the list of components please head your browser to
+
+### [https://dyne.org/components](https://dyne.org/components)
+
+**[🔝 back to top](#toc)**
+
+---
+
+## 😍 Acknowledgements
+
+<img alt="software by Dyne.org" src="https://files.dyne.org/software_by_dyne.png" width="150" />
+
+Copyleft (ɔ) 2024 by [Dyne.org](https://www.dyne.org) foundation, Amsterdam
+
+Designed, written and maintained by Puria Nafisi Azizi aka [@pna](https://twitter.com/pna).
+
+Special thanks to:
+
+- Thailand 🇹🇭 that hosted me during the first writing of this components and make this work more harmonious
+- Tomato 🍅, Franziska von Guten and Micol Salomone for the hard creative work, the asset templates and the design rules
+
+**[🔝 back to top](#toc)**
+
+---
+
+## 👤 Contributing
+
+Please first take a look at the [Dyne.org - Contributor License Agreement](CONTRIBUTING.md) then
+
+1.  🔀 [FORK IT](../../fork)
+2.  Create your feature branch `git checkout -b feature/branch`
+3.  Commit your changes `git commit -am 'Add some fooBar'`
+4.  Push to the branch `git push origin feature/branch`
+5.  Create a new Pull Request
+6.  🙏 Thank you
+
+**[🔝 back to top](#toc)**
+
+---
+
+## 💼 License
+
+    Dyne components - Make your HTML Dynes
+    Copyleft (ɔ) 2024 Dyne.org foundation, Amsterdam
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as
+    published by the Free Software Foundation, either version 3 of the
+    License, or (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+**[🔝 back to top](#toc)**

package.json

@@ -13,35 +13,41 @@
       "import": "./dist/dyne-components/dyne-components.esm.js",
       "require": "./dist/dyne-components/dyne-components.cjs.js"
     },
-    "./my-component": {
-      "import": "./dist/components/my-component.js",
-      "types": "./dist/components/my-component.d.js"
+    "./dyne-button": {
+      "import": "./dist/components/dyne-button.js",
+      "types": "./dist/components/dyne-button.d.ts"
     }
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ionic-team/stencil-component-starter.git"
+    "url": "https://github.com/dyne/components.git"
   },
   "files": [
     "dist/",
     "loader/"
   ],
   "scripts": {
-    "clean": "rm -rf .stencil/ dist/ loader www",
+    "clean": "rm -rf .stencil/ dist/ loader www storybook-static",
     "build": "stencil build",
     "test": "stencil test --spec && playwright test",
     "generate": "stencil generate",
-    "build-storybook": "sb build --docs -s dist",
+    "sbb": "stencil build && storybook build --docs --test",
     "dev": "NODE_ENV=development npm-run-all -p dev:*",
     "dev:start": "stencil build --watch --serve",
-    "dev:storybook": "sleep 6 && sb dev -p 6006"
+    "dev:storybook": "sleep 6 && storybook dev -p 6006"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",
     "@fontsource-variable/inter": "^5.0.18",
     "@fontsource-variable/syne": "^5.0.20",
     "@material/web": "^1.4.1",
     "@playwright/test": "^1.43.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^12.0.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^10.0.3",
+    "@semantic-release/npm": "^12.0.0",
+    "@semantic-release/release-notes-generator": "^13.0.0",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/core": "^4.16.0",
     "@stencil/playwright": "^0.2.0",
@@ -67,13 +73,14 @@
     "stencil-tailwind-plugin": "^1.8.0",
     "storybook": "^8.0.8",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
   },
   "license": "AGPL-3.0-only",
   "dependencies": {
     "@types/node": "^20.12.8",
     "lucide-react": "^0.372.0",
     "zenroom": "^4.26.2"
   },
-  "packageManager": "pnpm@9.0.6+sha1.648f6014eb363abb36618f2ba59282a9eeb3e879"
+  "packageManager": "pnpm@9.1.0+sha512.67f5879916a9293e5cf059c23853d571beaf4f753c707f40cb22bed5fb1578c6aad3b6c4107ccb3ba0b35be003eb621a16471ac836c87beb53f9d54bb4612724"
 }