From 6dfa0a9d88b1788cfd26624fcc2ffce5cddabc03 Mon Sep 17 00:00:00 2001 From: Carlos Santiago <5726971+csantiago132@users.noreply.github.com> Date: Thu, 17 Oct 2024 09:27:51 -0500 Subject: [PATCH] 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 | 13 +- Writerside/redirection-rules.xml | 13 + .../{Workflows.md => Github-Actions.md} | 6 +- Writerside/topics/Guides.md | 51 ++++ Writerside/topics/How-To-Install-ESLint.md | 140 +++++++++ Writerside/topics/How-To-Install-Prettier.md | 101 +++++++ ...able-GitHub-Actions-Across-Repositories.md | 37 --- ...ld-test-deploy-Writerside-documentation.md | 124 -------- Writerside/topics/PRD.md | 26 -- Writerside/topics/starter-topic.md | 281 ++++++++---------- Writerside/writerside-config.xml | 5 - package.json | 3 - 12 files changed, 430 insertions(+), 370 deletions(-) create mode 100644 Writerside/redirection-rules.xml rename Writerside/topics/{Workflows.md => Github-Actions.md} (63%) create mode 100644 Writerside/topics/Guides.md create mode 100644 Writerside/topics/How-To-Install-ESLint.md create mode 100644 Writerside/topics/How-To-Install-Prettier.md delete mode 100644 Writerside/topics/How-to-Set-Up-and-Use-Reusable-GitHub-Actions-Across-Repositories.md delete mode 100644 Writerside/topics/How-to-build-test-deploy-Writerside-documentation.md delete mode 100644 Writerside/topics/PRD.md delete mode 100644 Writerside/writerside-config.xml diff --git a/Writerside/dcs.tree b/Writerside/dcs.tree index 8d1a596..d3d60ab 100644 --- a/Writerside/dcs.tree +++ b/Writerside/dcs.tree @@ -3,14 +3,17 @@ SYSTEM "https://resources.jetbrains.com/writerside/1.0/product-profile.dtd"> + name="Kurocado Studio Styleguide" + start-page="starter-topic.md"> - - - + + + + + + diff --git a/Writerside/redirection-rules.xml b/Writerside/redirection-rules.xml new file mode 100644 index 0000000..6221d7f --- /dev/null +++ b/Writerside/redirection-rules.xml @@ -0,0 +1,13 @@ + + + + + + Created after removal of "Writerside.md" from Styleguide + Writerside-md.html + + diff --git a/Writerside/topics/Workflows.md b/Writerside/topics/Github-Actions.md similarity index 63% rename from Writerside/topics/Workflows.md rename to Writerside/topics/Github-Actions.md index ff44bc5..a787eba 100644 --- a/Writerside/topics/Workflows.md +++ b/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. diff --git a/Writerside/topics/Guides.md b/Writerside/topics/Guides.md new file mode 100644 index 0000000..d9c6419 --- /dev/null +++ b/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) + +``` + +``` diff --git a/Writerside/topics/How-To-Install-ESLint.md b/Writerside/topics/How-To-Install-ESLint.md new file mode 100644 index 0000000..8ce1449 --- /dev/null +++ b/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: + +``` ++ eslint@7.x.x +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"] + } + ``` diff --git a/Writerside/topics/How-To-Install-Prettier.md b/Writerside/topics/How-To-Install-Prettier.md new file mode 100644 index 0000000..83e1dad --- /dev/null +++ b/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: + +``` ++ prettier@2.x.x +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 + } + ``` diff --git a/Writerside/topics/How-to-Set-Up-and-Use-Reusable-GitHub-Actions-Across-Repositories.md b/Writerside/topics/How-to-Set-Up-and-Use-Reusable-GitHub-Actions-Across-Repositories.md deleted file mode 100644 index 6bedcb0..0000000 --- a/Writerside/topics/How-to-Set-Up-and-Use-Reusable-GitHub-Actions-Across-Repositories.md +++ /dev/null @@ -1,37 +0,0 @@ -# How to Set Up and Use Reusable GitHub Actions Across Repositories - -A How-to article is an action-oriented type of document. It explains how to perform a specific task -or solve a problem, and usually contains a sequence of steps. Start with a short introductory -paragraph that explains what users will accomplish by following this procedure, what they need to -perform it for, or define the target audience of the doc. - -> **Note** -> This guide assumes that you have installed `@kurocado-studio/style-guide` as a dev. dependency -> -> {style="note"} - -## Before you start - -It is good practice to list the prerequisites that are required or recommended. - -Make sure that: - -- First prerequisite -- Second prerequisite - -## How to perform a task - -Some introductory information. - -1. Step with a code block - - ```bash - run this --that - ``` - -2. Step with a [link](https://www.jetbrains.com) - -3. Step with a list. - - List item - - List item - - List item diff --git a/Writerside/topics/How-to-build-test-deploy-Writerside-documentation.md b/Writerside/topics/How-to-build-test-deploy-Writerside-documentation.md deleted file mode 100644 index 552f1b0..0000000 --- a/Writerside/topics/How-to-build-test-deploy-Writerside-documentation.md +++ /dev/null @@ -1,124 +0,0 @@ -Here's the revised guide with the updated assumption: - ---- - -# Release Github Action - -In this guide, you will learn how to set up a **reusable GitHub Actions workflow** to build, test, -and deploy Writerside documentation to GitHub Pages. The reusable workflow will be installed -alongside **ESLint**, **Prettier**, and **TSConfig** in your repository using **NPM**. This process -allows you to centralize and reuse workflows across multiple repositories while ensuring consistent -code quality. - -> **Note** -> This guide assumes that you have installed `@kurocado-studio/style-guide` as a dev. dependency -> -> {style="note"} - -## Before You Start - -Make sure that: - -- You have installed the reusable workflow package (`@kurocado-studio/style-guide`) in your - repository. -- Your repository is set up with **NPM** for package management. -- You have access to the **GITHUB_TOKEN** secret in your repository. - -## How to Install and Set Up the Workflow - -Follow these steps to integrate the Writerside documentation build and deploy workflow alongside -**ESLint**, **Prettier**, and **TSConfig**. - -### 1. Create the Workflow File - -To set up the reusable Writerside workflow, you need to create a workflow file in your repository -that references the reusable workflow. - -1. **Create the workflow directory and file**: - - In your terminal, create the workflow directory and file in your repository: - - ```bash - mkdir -p .github/workflows - touch .github/workflows/call-reusable-writerside.yml - ``` - -2. **Define the reusable workflow in the YAML file**: - - Open the `.github/workflows/call-reusable-writerside.yml` file in your preferred text editor and - paste the following configuration: - - ```yaml - name: Call Writerside Reusable Workflow - - on: - push: - branches: ['main'] # Trigger on push to the main branch - workflow_dispatch: # Allows manual triggering from the Actions tab - - jobs: - call-reusable-workflow: - uses: @kurocado-studio/style-guide/gh-actions/gh-docs-actions@main # Reference the reusable workflow - with: - INSTANCE: 'Writerside/dcs' # You can override instance if needed - ARTIFACT: 'webHelpDCS2-all.zip' # Override artifact name if necessary - DOCKER_VERSION: '242.21870' # Override Docker version if needed - secrets: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Use GITHUB_TOKEN secret to authenticate - ``` - - - **INSTANCE**: This is the Writerside instance name, which you can override as needed. - - **ARTIFACT**: The name of the artifact generated by the build process, which can also be - overridden. - - **DOCKER_VERSION**: The Docker version of Writerside that will be used for the build. - - **GITHUB_TOKEN**: This is the secret token that GitHub Actions use for authentication, and it - is automatically generated by GitHub. - -3. **Commit and push the changes**: - - Once you’ve added the reusable workflow configuration, commit and push the changes to the `main` - branch: - - ```bash - git add .github/workflows/call-reusable-writerside.yml - git commit -m "Add reusable Writerside build and deploy workflow" - git push origin main - ``` - -### 2. Trigger and Monitor the Workflow - -After pushing the workflow, it will be triggered automatically if there are any changes to the -`main` branch. You can also manually trigger it from the **Actions** tab in your GitHub repository. - -#### **Trigger the workflow manually**: - -1. Go to the **Actions** tab in your repository. -2. Select the workflow labeled `Call Writerside Reusable Workflow`. -3. Click **Run workflow** to manually trigger the process. - -#### **Monitor the workflow**: - -Once the workflow is running, you can monitor its progress in the **Actions** tab. You’ll see -detailed logs of each step, including: - -- Checking out the repository. -- Building the Writerside documentation. -- Testing the documentation using Writerside Checker. -- Deploying the documentation to GitHub Pages. - -### 3. Verify the Deployment - -Once the workflow has completed successfully, your Writerside documentation will be deployed to -GitHub Pages. - -- You can verify the deployment by visiting your GitHub Pages site (you can find the link under - **Settings** > **Pages**). -- If you’re using a custom domain, ensure the domain is properly configured in the **Settings** tab - of your repository. - -## Conclusion - -By following this guide, you have successfully set up and triggered a reusable workflow for -building, testing, and deploying Writerside documentation to GitHub Pages. This process allows for -centralized workflow management across multiple repositories, ensuring consistent deployment -practices while integrating seamlessly with NPM-managed tools like ESLint, Prettier, and TSConfig. diff --git a/Writerside/topics/PRD.md b/Writerside/topics/PRD.md deleted file mode 100644 index b4726a0..0000000 --- a/Writerside/topics/PRD.md +++ /dev/null @@ -1,26 +0,0 @@ -# Styleguide PRD - -## Vision and Scope - -Provide a comprehensive style guide based on Vercel's, enabling developers to set up repositories -quickly with high-quality standards. - -## Objectives - -- Accelerate repo setup for developers. -- Ensure code quality and consistency across projects. -- Showcase the studio's expertise to attract potential clients. - -## Requirements - -- Create a style guide repository with linting rules, formatting standards, and setup instructions. -- Create reusable GitHub Actions workflows - - Writerside - - Code Quality - - Release -- Include code samples and examples for quick reference. - -## Risks and Mitigation - -- **Risk**: Developers might find the style guide too restrictive. -- **Mitigation**: Make the style guide configurable to suit different project needs. diff --git a/Writerside/topics/starter-topic.md b/Writerside/topics/starter-topic.md index 16b2441..381679a 100644 --- a/Writerside/topics/starter-topic.md +++ b/Writerside/topics/starter-topic.md @@ -1,201 +1,152 @@ -# Setup - -This repository contains the style guide for our projects, specifically tailored for TypeScript. We -have used the [Vercel Style Guide](https://github.com/vercel/style-guide) as a base for our -TypeScript configurations, and aspire to maintain the same high standards in our code quality. - -## Overview - -- [Prettier](#prettier) -- [ESLint](#eslint) -- [TypeScript](#typescript) -- [Jest](#jest) -- [Commitlint](#commitlint) -- [Semantic Release](#semantic-release) -- [GitHub Actions](#github-actions) - -### Installation - -```bash -# If you use npm -npm install --save-dev @kurocado-studio/style-guide - -# If you use Yarn -yarn add --dev @kurocado-studio/style-guide -``` - -## Dependencies - -Below are the CLI dependencies needed to run the styleguide configurations - -```json -{ - "devDependencies": { - "@commitlint/cli": "19.0.3", - "@commitlint/config-conventional": "19.0.3", - "eslint": "8.57.0", - "husky": "9.0.11", - "jest": "^29.7.0", - "prettier": "3.3.3", - "semantic-release": "23.0.2", - "typescript": "5.3.3" - } -} -``` - -## Scripts - -Add the following scripts to `package.json` - -```json -{ - "scripts": { - "build": "YOUR BUILD SCRIPT", - "test": "jest --coverage --ci", - "commitlint": "pnpm exec commitlint --edit", - "eslint-check": "eslint --max-warnings=0 .", - "prepare": "husky install", - "prettier-check": "prettier --check .", - "prettier-fix": "prettier --check . --write", - "semantic-release": "semantic-release" - } -} -``` +# Kurocado Studio Styleguide -## Prettier + -To use our Prettier configuration, add the following `prettier.config.js` at the root of the -project: +| | | +| ----------------- | -------------------------------------------------------------------------------------------------- | +| **Owner** | [@csantiago132](https://github.com/csantiago132) | +| **Team** | [research-and-development](https://github.com/orgs/Kurocado-Studio/teams/research-and-development) | +| **Summary** | A styleguide to enable developers to set up repositories quickly | +| **Status** | **Live** | +| **Repository** | [](https://github.com/Kurocado-Studio/styleguide) | +| **Documentation** | [](https://kurocado-studio.github.io/styleguide/) | +| **NPM Registry** | [](https://www.npmjs.com/package/@kurocado-studio/style-guide) | +| **Releases** | [](https://github.com/Kurocado-Studio/styleguide/releases) | -```javascript -module.exports = require.resolve('@kurocado-studio/style-guide/prettier'); -``` +## Problem Definition -[See Prettier rules](https://github.com/Kurocado-Studio/styleguide/blob/main/src/prettier/) +This document outlines Kurocado Studio's internal Style Guide. It explores the challenges that this +initiative addresses and highlights the key reasons why companies like Vercel, and Airbnb +open-source their style guides. -## ESLint +By adopting a unified style guide inspired by Vercel's approach and integrating GitHub Actions, we +aim to streamline development processes, facilitate easier collaboration, enhance the overall +quality of our software products, and improving internal processes, demonstrating thought leadership +in design and development standards. -To use our ESLint configuration, add the following `.eslintrc.js` at the root of the project: +### Objective -### Browser +1. Provide a comprehensive style guide based on Vercel's, enabling Kurocado Studio set up + repositories quickly with high-quality standards. +2. Open-sourcing the style guide to position Kurocado Studio as a contributor to the developer + community, fostering goodwill and potentially attracting collaboration opportunities +3. Open-sourcing the Style Guide fosters transparency and gives external developers insight into + Kurocado Studio’s internal processes. -```javascript -module.exports = { - extends: [ - require.resolve('@kurocado-studio/style-guide/eslint/browser'), - // or create one with Vue-specific rules - require.resolve('@kurocado-studio/style-guide/eslint/react'), - ], - parserOptions: { - ecmaVersion: 2020, - project: true, - sourceType: 'module', - tsconfigRootDir: __dirname, - }, - // ...any additional rules -}; -``` +### Use Cases -### Node +1. Internal Team Adoption Kurocado Studio's internal teams will use the Style Guide as a primary + reference point for all design and development standards -```javascript -module.exports = { - extends: [require.resolve('@kurocado-studio/style-guide/eslint/node')], - parserOptions: { - ecmaVersion: 2020, - project: true, - sourceType: 'module', - tsconfigRootDir: __dirname, - }, - // ...any additional rules -}; -``` +2. External Contributor Alignment External developers or freelancers working with Kurocado Studio + will benefit from having access to the Style Guide, ensuring that their contributions are aligned + with the studio’s quality standards from the outset. -[See ESLint rules](https://github.com/Kurocado-Studio/styleguide/tree/main/src/eslint) +3. Client Collaboration When collaborating with clients, the open-source Style Guide can serve as a + transparent resource that clients can reference to understand how their projects are being built + and designed. -## Jest +### Stakeholders -To use our Commitlint configuration, add the following `.commitlintrc.js` at the root of the -project: +| | | +| --------------- | -------------------------------------------------------------------------------------------------- | +| **Responsible** | [research-and-development](https://github.com/orgs/Kurocado-Studio/teams/research-and-development) | +| **Accountable** | [@csantiago132](https://github.com/csantiago132) | +| **Consulted** | N/A | +| **Informed** | N/A | -```javascript -module.exports = { - extends: ['@kurocado-studio/style-guide/commitlint'], -}; -``` +### Scope & Constraints -[See Commitlint rules](https://github.com/Kurocado-Studio/styleguide/tree/main/src/commitlint) +**In Scope:** -## Commitlint - -To use our Commitlint configuration, add the following `.commitlintrc.js` at the root of the -project: - -```javascript -module.exports = { - extends: ['@kurocado-studio/style-guide/commitlint'], -}; -``` +- Development of a comprehensive style guide covering code formatting, linting rules, commit + conventions, configuration management, and automated workflows using GitHub Actions. +- Creation of reusable configuration files and scripts to enforce the style guide and automate + workflows across repositories. +- Documentation and onboarding materials to assist developers in adopting the style guide and GitHub + Actions workflows. +- Open-sourcing the style guide on GitHub and publishing it to the NPM registry. -[See Commitlint rules](https://github.com/Kurocado-Studio/styleguide/tree/main/src/commitlint) +**Out of Scope:** -## Semantic Release +- Support for languages and frameworks not currently used within Kurocado Studio. -To use our Semantic Release configuration, add the following `.releaserc.js` at the root of the -project: +**Constraints:** -### For apps and web-based projects +- Limited development time and resources; prioritization is essential. -```javascript -module.exports = require.resolve('@kurocado-studio/style-guide/release/app'); -``` +### Risks -### For packages that will be released publicly on NPM +- **Resource Allocation:** Limited resources might delay the implementation or lead to incomplete + coverage of standards and workflows. +- **Open Source Vulnerabilities:** Open-sourcing the style guide may expose it to malicious + contributions or misuse. +- **Workflow Failures:** Automated GitHub Actions workflows might fail or cause unintended + disruptions if not properly configured and tested. -```javascript -module.exports = require.resolve('@kurocado-studio/style-guide/release/npm'); -``` +## Solution Definition -[See Semantic Release](https://github.com/Kurocado-Studio/styleguide/tree/main/src/semantic-release) +### User flows -## TypeScript +1. **Initial Setup:** -In your `tsconfig.json`, extend our base TypeScript configuration + - Developer clones the repository. + - Installs necessary dependencies via NPM. -### TypeScript Base +2. **Development Workflow:** + - Developer writes code adhering to the style guide. + - Pre-commit hooks automatically lint and format code. + - GitHub Actions automatically run tests, linting, and build processes on each commit/pull + request. + - Pull requests are reviewed for compliance with the style guide and successful workflow runs. -```json -{ - "extends": "@kurocado-studio/styleguide/tsconfig/base" -} -``` +## Launch Readiness -### TypeScript Browser +### Key Milestones -```json -{ - "extends": "@kurocado-studio/styleguide/tsconfig/web" -} -``` +| | | +| -------------- | ------------------------------------------------------------- | +| Stable Release | [](https://github.com/Kurocado-Studio/styleguide/milestone/1) | -### TypeScript Node +### Testing plan -```json -{ - "extends": "@kurocado-studio/styleguide/tsconfig/node" -} -``` +- **Integration Testing:** Apply the style guide and GitHub Actions workflows to a set of + repositories and verify that the setup process works seamlessly. +- **User Acceptance Testing (UAT):** Collect feedback from developers during the beta phase to + identify any issues or areas for improvement. +- **Continuous Integration (CI) Validation:** Integrate the style guide and GitHub Actions workflows + with CI pipelines to automatically enforce code standards and workflow integrity during builds. -[See Typescript configs](https://github.com/Kurocado-Studio/styleguide/tree/main/src/tsconfig) +### Marketing plan -## GitHub Actions +- **Documentation:** Create comprehensive documentation and onboarding guides to facilitate + adoption. +- **Community Engagement:** Promote the open-source style guide and workflows through blog posts, + social media, and developer forums to attract external contributors. -This repository provides a standardized and reusable GitHub Actions workflow setup. The setup -includes three primary workflows designed to enhance your project’s CI/CD pipeline: +### Legal checks -1. [Release Workflow](Release.md): Automates the release process, including versioning, changelog - generation, and pull request creation. -2. [Code Quality Workflow](Code-Quality.md): Ensures code consistency and quality through automated - linting and formatting checks. -3. [Writerside Documentation Workflow](Writerside.md): Builds and deploys project documentation - using Docker-based builders. +- **License Compliance:** Ensure that all dependencies, configurations, and GitHub Actions workflows + comply with open-source licenses. +- **Intellectual Property:** Verify that no proprietary code or configurations are inadvertently + included in the open-source repository. +- **Terms of Use:** Update the repository's README, LICENSE, and CONTRIBUTING files to clearly state + usage terms and contribution guidelines. +- **Data Privacy:** Ensure that no sensitive information is exposed through documentation, + configuration files, or workflows. + +## Success + +- **Consistency Across Projects**: Measured by the reduction in discrepancies in design and code + standards across internal and client projects. +- **Community Engagement**: Number of contributions, issues raised, and discussions initiated on the + open-source Style Guide repository. +- **Industry Recognition**: Media mentions, citations, or adoption of the Kurocado Studio Style + Guide by other developers or companies. + +### Next steps + +- **Continuous Improvement:** Regularly update the style guide and GitHub Actions workflows based on + feedback and evolving best practices. +- **Community Building:** Foster a community around the style guide and workflows by organizing + events, hackathons, and collaborative projects to encourage external contributions. diff --git a/Writerside/writerside-config.xml b/Writerside/writerside-config.xml deleted file mode 100644 index 38b8c11..0000000 --- a/Writerside/writerside-config.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/package.json b/package.json index 799e8fe..4e44abc 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,8 @@ "exports": { "./eslint/base": "./src/eslint/eslint.base.js", "./eslint/browser": "./src/eslint/eslint.browser.js", - "./eslint/jest": "./src/eslint/eslint.jest.js", "./eslint/node": "./src/eslint/eslint.node.js", - "./eslint/playwright": "./src/eslint/eslint.playwright.js", "./eslint/react": "./src/eslint/eslint.react.js", - "./eslint/testingLibrary": "./src/eslint/eslint.testingLibrary.js", "./commitlint": "./src/commitlint/index.js", "./release/app": "./src/semantic-release/semanticRelease.app.js", "./release/npm": "./src/semantic-release/semanticRelease.npm.js",