chore(docs): update Stable Release PRD (#42)

* chore(docs): rewrite PRD (#38)

* chore(docs): create LICENSE (#28)

* chore(docs): rewrite PRD and documentation

* fix(docs): rewrite prettier setup (#39)

* fix(docs): rewrite prettier setup (#40)

* fix(docs): rewrite eslint config (#41)

* fix(docs): rewrite eslint config

Writerside/dcs.tree

@@ -3,14 +3,17 @@
         SYSTEM "https://resources.jetbrains.com/writerside/1.0/product-profile.dtd">
 
 <instance-profile id="dcs"
-                 name="Style Guide"
-                 start-page="PRD.md">
+                 name="Kurocado Studio Styleguide"
+                 start-page="starter-topic.md">
 
-    <toc-element topic="PRD.md"/>
     <toc-element topic="starter-topic.md"/>
-    <toc-element topic="Workflows.md">
-        <toc-element topic="Writerside.md"/>
+    <toc-element topic="Guides.md">
+        <toc-element topic="How-To-Install-Prettier.md"/>
+        <toc-element topic="How-To-Install-ESLint.md"/>
+    </toc-element>
+    <toc-element topic="Github-Actions.md">
         <toc-element topic="Code-Quality.md"/>
         <toc-element topic="Release.md"/>
+        <toc-element topic="Writerside.md"/>
     </toc-element>
 </instance-profile>

Writerside/redirection-rules.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE rules SYSTEM "https://resources.jetbrains.com/writerside/1.0/redirection-rules.dtd">
+<rules>
+    <!-- format is as follows
+    <rule id="<unique id>">
+        <accepts>page.html</accepts>
+    </rule>
+    -->
+    <rule id="23cb757e">
+        <description>Created after removal of "Writerside.md" from Styleguide</description>
+        <accepts>Writerside-md.html</accepts>
+    </rule>
+</rules>

Writerside/topics/Workflows.md → Writerside/topics/Github-Actions.md

@@ -1,8 +1,4 @@
-# GitHub Actions
-
-This repository provides a standardized and reusable GitHub Actions workflow setup inspired by
-Vercel’s Styleguide. The setup includes three primary workflows designed to enhance your project’s
-CI/CD pipeline:
+# Github Actions
 
 1. [Release Workflow](Release.md): Automates the release process, including versioning, changelog
    generation, and pull request creation.

Writerside/topics/Guides.md

@@ -0,0 +1,51 @@
+# Guides
+
+## Prerequisites
+
+To complete this, you will need:
+
+- A local development environment for JavaScript
+- **Node.js** (v20.x or later) and **npm** (v6.x or later) installed. You can follow
+  [How to Install Node.js and Create a Local Development Environment](https://www.digitalocean.com/community/tutorial_series/how-to-install-node-js-and-create-a-local-development-environment)
+  guide.
+- A code editor like [Visual Studio Code](https://code.visualstudio.com/download)
+- [@kurocado-studio/style-guide installed](https://www.npmjs.com/package/@kurocado-studio/style-guide)
+
+## Initialize Your Project
+
+First, navigate to your project's root directory in the terminal. If you don't have a project set up
+yet, you can create one using the following commands:
+
+```bash
+mkdir my-project
+cd my-project
+npm init -y
+```
+
+You'll see the following output:
+
+```
+Wrote to /path/to/my-project/package.json:
+
+{
+  "name": "my-project",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
+```
+
+## Setup
+
+- [How To Install Prettier](How-To-Install-Prettier.md)
+- [How To Install ESLint](How-To-Install-ESLint.md)
+
+```
+
+```

Writerside/topics/How-To-Install-ESLint.md

@@ -0,0 +1,140 @@
+# How To Install ESLint
+
+## Prerequisites
+
+[See Prerequisites](Guides.md)
+
+## Step 1 — Install ESLint
+
+Next, install ESLint as a development dependency:
+
+```bash
+npm install --save-dev eslint
+```
+
+You'll see output similar to:
+
+```
++ [email protected]
+added 200 packages from 150 contributors and audited 200 packages in 5s
+found 0 vulnerabilities
+```
+
+## Step 2 — Configure ESLint
+
+To use our ESLint configuration, add the following `.eslintrc.js` file at the root of your project.
+This configuration supports both browser and Node.js environments. Choose the one that fits your
+project or customize as needed.
+
+**[See all ESLint configurations available](https://github.com/Kurocado-Studio/styleguide/tree/main/src/eslint)**
+
+### Browser Configuration
+
+Create a `.eslintrc.js` file with the following content for browser-based projects:
+
+```javascript
+module.exports = {
+  extends: [
+    require.resolve('@kurocado-studio/style-guide/eslint/browser'),
+    require.resolve('@kurocado-studio/style-guide/eslint/react'),
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    project: true,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+  // ...any additional rules
+};
+```
+
+### Node.js Configuration
+
+If you're working on a Node.js project, use the following configuration:
+
+```javascript
+module.exports = {
+  extends: [require.resolve('@kurocado-studio/style-guide/eslint/node')],
+  parserOptions: {
+    ecmaVersion: 2020,
+    project: true,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+  // ...any additional rules
+};
+```
+
+## Step 3 — Add Linting Scripts
+
+To simplify the linting process, add scripts to your `package.json`. Open `package.json` and add the
+following under the `"scripts"` section:
+
+```json
+"scripts": {
+  "eslint-check": "eslint --max-warnings=0 .",
+  "eslint-fix": "eslint --max-warnings=0 . --fix",
+}
+```
+
+## Step 4 — Run ESLint
+
+Run the lint script to analyze your code for issues:
+
+```bash
+npm run eslint-check
+```
+
+You'll see output similar to:
+
+```
+/path/to/my-project/src/index.js
+  5:10  error  'React' is defined but never used  no-unused-vars
+
+✖ 1 problem (1 error, 0 warnings)
+```
+
+To automatically fix fixable issues, run:
+
+```bash
+npm run eslint-fix
+```
+
+You'll see output similar to:
+
+```
+/path/to/my-project/src/index.js
+  5:10  error  'React' is defined but never used  no-unused-vars
+
+✖ 1 problem (1 error, 0 warnings)
+
+Fixed some of the issues.
+```
+
+## Step 5 — Integrate ESLint with Your Code Editor
+
+To enhance your workflow, integrate ESLint with your code editor to display linting errors in
+real-time.
+
+### Visual Studio Code
+
+1. **Install the ESLint Extension:**
+
+   - Open VS Code.
+   - Go to the Extensions view by clicking the square icon in the sidebar or pressing
+     `CTRL+SHIFT+X`.
+   - Search for "ESLint" and install the extension by Dirk Baeumer.
+
+2. **Configure VS Code to Use ESLint:**
+
+   - Open your VS Code settings (`CTRL+,`).
+   - Add the following settings to your `settings.json`:
+
+     ```json
+     {
+       "editor.codeActionsOnSave": {
+         "source.fixAll.eslint": true
+       },
+       "eslint.validate": ["javascript", "javascriptreact"]
+     }
+     ```

Writerside/topics/How-To-Install-Prettier.md

@@ -0,0 +1,101 @@
+# How To Install Prettier
+
+## Prerequisites
+
+[See Prerequisites](Guides.md)
+
+## Step 1 — Install Prettier
+
+install Prettier as a development dependency:
+
+```bash
+npm install --save-dev prettier
+```
+
+You'll see the following output:
+
+```
++ [email protected]
+added 1 package from 1 contributor and audited 1 package in 2s
+found 0 vulnerabilities
+```
+
+## Step 2 — Configure .prettierignore
+
+```bash
+touch .prettierignore
+```
+
+**[See Ignoring Code](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)**
+
+## Step 3 — Configure Prettier
+
+Create a `prettier.config.js` file in the root of your project:
+
+```bash
+touch prettier.config.js
+```
+
+Open `prettier.config.js` in your code editor and add the following configuration:
+
+```javascript
+module.exports = require.resolve('@kurocado-studio/style-guide/prettier');
+```
+
+**[See all configuration options](https://github.com/Kurocado-Studio/styleguide/tree/main/src/prettier/index.js)**
+
+## Step 4 — Add a Format Script
+
+To simplify the formatting process, add a script to your `package.json`. Open `package.json` and add
+the following under the `"scripts"` section:
+
+```json
+"scripts": {
+  "prettier-check": "prettier --check .",
+  "prettier-fix": "prettier --check . --write",
+}
+```
+
+This script tells Prettier to format all files within the `src` directory.
+
+## Step 5 — Format Your Code
+
+Run the format script to automatically format your code:
+
+```bash
+npm run prettier-fix
+```
+
+You'll see output similar to:
+
+```
+src/index.js 50ms
+src/components/App.jsx 30ms
+✨  Done in 1.50s.
+```
+
+## Step 6 — Integrate Prettier with Your Code Editor
+
+To enhance your workflow, integrate Prettier with your code editor to format code on save.
+
+### Visual Studio Code
+
+1. **Install the Prettier Extension:**
+
+   - Open VS Code.
+   - Go to the Extensions view by clicking the square icon in the sidebar or pressing
+     `CTRL+SHIFT+X`.
+   - Search for "Prettier - Code formatter" and install it.
+
+2. **Configure VS Code to Use Prettier:**
+
+   - Open your VS Code settings (`CTRL+,`).
+   - Search for "Format On Save" and enable it by checking the box.
+   - Set Prettier as the default formatter by adding the following to your `settings.json`:
+
+     ```json
+     {
+       "editor.defaultFormatter": "esbenp.prettier-vscode",
+       "editor.formatOnSave": true
+     }
+     ```