Merge pull request #10 from Numigi/next

refac: File and code structure

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Publish release
+run-name: Release by @${{ github.actor }}
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-release:
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Generate build
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run build
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          HUSKY: 0

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/bin/bash
+#yarn run test && yarn run lint

.husky/prepare-commit-msg

@@ -0,0 +1,2 @@
+#!/bin/bash
+exec < /dev/tty && npx cz --hook || true

.prettierignore

@@ -0,0 +1,2 @@
+LICENSE
+package-lock.json

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+}

.releaserc.json

@@ -0,0 +1,34 @@
+{
+    "branches": [
+        "main"
+    ],
+    "plugins": [
+        "@semantic-release/commit-analyzer",
+        "@semantic-release/release-notes-generator",
+        "@semantic-release/npm",
+        [
+            "@semantic-release/changelog",
+            {
+                "changelogFile": "CHANGELOG.md"
+            }
+        ],
+        [
+            "@semantic-release/git",
+            {
+                "assets": [
+                    "package.json",
+                    "CHANGELOG.md"
+                ],
+                "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+            }
+        ],
+        [
+            "@semantic-release/github",
+            {
+                "successComment": false,
+                "failTitle": false
+            }
+        ]
+    ],
+    "preset": "angular"
+}

.stylelintrc.json

@@ -0,0 +1,23 @@
+{
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-recess-order"
+    ],
+    "ignoreFiles": "dist/**/*",
+    "rules": {
+        "rule-empty-line-before": [
+            "always-multi-line",
+            {
+                "except": [
+                    "after-single-line-comment",
+                    "first-nested"
+                ],
+                "ignore": [
+                    "after-comment",
+                    "inside-block"
+                ]
+            }
+        ],
+        "no-invalid-position-at-import-rule": null
+    }
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "stylelint.vscode-stylelint"]
+}

.vscode/settings.json

@@ -17,7 +17,6 @@
     "source.fixAll.stylelint": "explicit"
   },
 
-  "githubPullRequests.ignoredPullRequestBranches": [
-    "main"
-  ]
+  "githubPullRequests.ignoredPullRequestBranches": ["main"],
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

README.md

@@ -1,47 +1,58 @@
-# GROWI Plugin Numigi Theme
-
-> A GROWI plugin to add the Numigi brand flavor.
-
-## TBD
-
-- [ ] Login page
-  - [ ] SSO buttons
-- [ ] Navigation sidebar
-  - [ ] Icons
-- [x] Header
-- [x] Administration panel
-- [ ] Components
-  - [x] Buttons
-  - [ ] Links
-    - [x] Autonomous
-    - [ ] Inline & external
-  - [x] Dropdowns
-  - [x] Checkboxes
-  - [x] Badges
-  - [x] Alerts
-  - [ ] List items
-  - [ ] Text inputs
-    - [ ] Input states
-  - [x] Code blocks and inline code
-  - [ ] Modals
-  - [x] Headings
-- [x] Various font weight adjustements
-- [ ] Optimizations for Saas
-
-## About The Project
-
-This theme is based off a GROWI preset's themes. It is built for GROWI version 7.0.0 and onward.
-
-## Contributing
-
-1. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-2. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-3. Push to the Branch (`git push origin feature/AmazingFeature`)
-4. Open a Pull Request
-
-## Resources
-
-- [Othneildrew README Template](https://github.com/othneildrew/Best-README-Template)
-- [Choosing an Open Source License](https://choosealicense.com/)
-- [GROWI Documentation](https://docs.growi.org/)
-- [GROWI Install Plugins](https://docs.growi.org/en/admin-guide/management-cookbook/plugins.html#how-to-install-plugins)
+# Numigi DOCS theme
+
+This repository contains a [GROWI](https://github.com/weseek/growi) plugin for the Numigi custom UI theme.
+
+## Getting Started
+
+1. Clone this repository
+2. Create a new branch
+
+```bash
+git checkout -b MY_BRANCH_NAME
+```
+
+3. Install the project dependencies
+
+```bash
+npm install
+```
+
+4. Test your build
+
+```bash
+npm run build
+```
+
+5. Commit your changes
+6. Open a pull request
+
+### Commits & Releases
+
+#### Committing
+
+Commits format is enforced using [Commitizen](https://github.com/commitizen/cz-cli) and follows the [AngularJS commit standard](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#type).
+
+This allows for [easier automated releases](#automated-releases)
+
+#### Automated Releases
+
+Releases and packages version changes are all automated using [semantic-release](https://semantic-release.gitbook.io/semantic-release).
+
+Its configuration is available in the `.releaserc.json` file.
+
+Make sure that the `TOKEN` action secret is configured and has access to this repository.
+
+## Ressources
+
+This plugin design is based off [GROWI's Vivid Internet plugin example](https://github.com/weseek/growi-plugin-theme-vivid-internet).
+
+### Structure
+
+The structure is divided following a Sass atomic structure. This helps creating and maintaining components rules in many files, from the least complex element to a complete page.
+
+![alt text](sass-atomic.png)
+
+Many articles and blogs refer to this type of architecture convention;
+
+- [Atomic Design System Architecture with SCSS, ITCSS](https://gael-boyenval.gitbook.io/atomic-design-css-architecture-with-itcss-bem-sass/principles/atomic-design-system)
+- [Atomic Design - Your Ultimate Guide to Scalable & Modular CSS (Sass)](https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/)