Merge pull request #2271 from mondaycom/vibe3

Vibe 3

Author: talkor

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -55,7 +55,7 @@ body:
     id: system-info
     attributes:
       label: System Info
-      description: Please run and copy the output of `npx envinfo --system --npmPackages monday-ui-react-core,react --binaries --browsers`
+      description: Please run and copy the output of `npx envinfo --system --npmPackages monday-ui-react-core,@vibe/core,react --binaries --browsers`
       render: shell
       placeholder: Operating System, Browsers, React version
   - type: textarea

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,7 +3,8 @@ Before we can review your submission, please fill the information below:
 
 Please describe the changes you're making. Include the motivation for these changes, any additional context, and the impact on the project. If your changes are related to any open issues, please link to them here. -->
 
-- [ ] I have read the [Contribution Guide](../packages/core/CONTRIBUTING.md) for this project.
+- [ ] I have read the [Contribution Guide](../CONTRIBUTING.md) for this project.
 
 <!-- Please add the issue nubmer that this PR closes: -->
+
 Resolves #

.github/workflows/chromatic.yml

@@ -35,3 +35,4 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: packages/core
           exitOnceUploaded: true
+          onlyChanged: false

.github/workflows/publish-storybook.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Build & deploy Storybooks to GitHub Pages
         run: |
           yarn lerna run build --include-dependencies
-          yarn lerna run --scope monday-ui-react-core build-storybook
+          yarn lerna run --scope @vibe/core build-storybook
           yarn lerna run --scope vibe-storybook-components build-storybook
           cd packages/core/static_storybook
           echo "vibe.monday.com" > ./CNAME
@@ -39,7 +39,9 @@ jobs:
       - name: Push core Storybook to Github Pages
         uses: JamesIves/github-pages-deploy-action@v4.5.0
         with:
-          clean-exclude: storybook-blocks/*
+          clean-exclude: |
+            storybook-blocks/*
+            v2/*
           folder: packages/core/static_storybook
           branch: gh-pages
         env:

.github/workflows/release-v2.yml

@@ -0,0 +1,42 @@
+name: Release v2 version
+
+on: workflow_dispatch
+
+jobs:
+  release:
+    if: github.ref_name == 'version2'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./packages/core
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Run Setup
+        uses: ./.github/actions/setup
+        with:
+          npm_token: ${{ secrets.npm_token }}
+      - uses: ./.github/actions/git-creds
+      - name: Build
+        run: yarn build
+      - name: Lint
+        run: yarn lint
+      - name: Test
+        run: yarn test
+      - name: Stylelint
+        run: yarn stylelint
+      - name: Generate new core version
+        run: |
+          npm version patch -m "chore(release): bump core package version to %s"
+      - run: yarn config set registry https://registry.npmjs.org/
+      - name: Setup .npmrc for publish
+        id: setup-npmrc
+        run: echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" > .npmrc
+      - name: Publish core to npm
+        run: npm publish --dry-run
+      - name: Remove .npmrc
+        if: steps.setup-npmrc.outcome == 'success'
+        run: rm .npmrc

.github/workflows/release.yml

@@ -35,7 +35,7 @@ jobs:
       - uses: ./.github/actions/git-creds
       - uses: ./.github/actions/download-builds
       - name: Generate new versions
-        run: yarn lerna version --exact --conventional-commits -y
+        run: yarn lerna version --exact --conventional-commits --conventional-graduate -y
       - run: yarn config set registry https://registry.npmjs.org/
       - name: Setup .npmrc for publish
         id: setup-npmrc

CONTRIBUTING.md

@@ -0,0 +1,63 @@
+# Contribution Guide
+
+Hi there! We're really excited that you're interested in contributing to Vibe. Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
+
+## Issue reporting
+
+For new features, suggestions, or general questions, please make sure to create a [discussion](https://github.com/mondaycom/vibe/discussions) first.
+
+If you found a bug, please [create an issue](https://github.com/mondaycom/vibe/issues/new).
+
+## Development Setup
+
+Storybook is used as the project's development environment. You can use it to preview your changes and test components in isolation. To start working locally, run the following command in the root directory:
+
+```bash
+yarn install
+yarn storybook
+```
+
+### Testing
+
+There are several layers of testing, such as unit/component tests, integration, a11y, and end-to-end tests. Every new feature or bug fix should be covered by tests, depending on the type of change.
+
+Please make sure to run tests before submitting your PR:
+
+```bash
+yarn test
+```
+
+If snapshot tests fail, and you are sure that the changes are intentional, update them by running:
+
+```bash
+yarn test:update
+```
+
+### Linting and formatting
+
+We use [Prettier](https://prettier.io/) for code formatting. Please, make sure to use it in your editor to keep the codebase consistent.
+
+Please make sure to run linting and formatting before submitting your PR:
+
+```bash
+yarn lint
+```
+
+### Commits
+
+The project is using [Conventional Commits](https://www.conventionalcommits.org/) to standardize the commit messages, and release new versions automatically according to [Semantic Versioning](https://semver.org/).
+
+Please make sure to follow the convention for creating Pull Requests and commits.
+
+## Creating a Pull Request
+
+When creating a PR, please make sure to:
+
+- Create a PR title based on the [Conventional Commits](https://www.conventionalcommits.org/) format
+- Add a description of the changes you're making, including the motivation for these changes, and any additional context
+- Link to any related issues or discussions
+- Make sure that all checks are passed
+
+After submitting your PR, the maintainers will review your changes and provide feedback. If everything is good, your PR will be merged.
+
+**We really appreciate your contribution to Vibe! 🚀**

README.md

@@ -1,35 +1,73 @@
-# Vibe Design System
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c350ec770.png" width="300px" alt="Vibe Design System, by monday.com">
+  <h1 align="center">Vibe Design System</h1>
+</p>
 
-> [!IMPORTANT]
->
-> **Exciting Update**: The `monday-ui-react-core` repository is now - `vibe`!
+<p align="center">
+Official <a href="https://monday.com">monday.com</a> UI resources for application development in React.js
+</p>
 
-<img src="https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c350ec770.png" width="300px" alt="Vibe Design System, by monday.com">
+<p align="center">
+  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vibe/core">
+  <a href="https://bundlephobia.com/package/@vibe/core"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@vibe/core"></a>
+  <a href="https://www.npmjs.com/package/@vibe/core"><img alt="NPM Version" src="https://img.shields.io/npm/v/@vibe/core?label=@vibe/core"></a>
+  <a href="https://github.com/mondaycom/vibe/stargazers"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/mondaycom/vibe"></a>
+</p>
 
-Welcome to the Vibe Design System repository! This monorepo contains various open-source packages maintained by Vibe ([monday.com](https://www.monday.com)).
+<p align="center">
+  <a href="https://vibe.monday.com">Documentation</a> •
+  <a href="https://vibe.monday.com/?path=/docs/catalog--docs">Catalog</a> •
+  <a href="https://vibe.monday.com/?path=/story/playground--playground">Playground</a>
+</p>
 
 ## Overview
 
-Vibe Design System is a collection of packages designed to streamline your development process and enhance the user experience. Below is a list of our main packages:
-
-1. [core](packages/core/README.md): Vibe ([monday.com](https://www.monday.com)) React components library - [Storybook](https://vibe.monday.com).
-2. [style](packages/style/README.md): Vibe ([monday.com](https://www.monday.com)) styling foundations library.
-3. [storybook-blocks](packages/storybook-blocks/README.md): Vibe ([monday.com](https://www.monday.com)) collection of Storybook blocks library.
-
-Each package comes with its own README providing detailed information about its usage, installation instructions, and getting started guide.
+Vibe Design System is a collection of packages designed to streamline your development process and enhance the user experience, by providing a set of components, styles, and guidelines for building applications in React.js.
 
 ## Installation
 
 ```bash
-npm install monday-ui-react-core
+npm install @vibe/core
+# or
+yarn add @vibe/core
+```
+
+To load all the relevant CSS tokens, import the tokens file in your root application file:
+
+```javascript
+import "@vibe/core/tokens";
+```
+
+## Usage
+
+Components are imported from the library's root entry:
+
+```javascript
+import { Button } from "@vibe/core";
 ```
 
-## Getting Started
+## Ecosystem
+
+- [@vibe/core](packages/core/README.md): Core component library
+- [@vibe/icons](packages/icons/README.md): Icons library
+- [@vibe/testkit](packages/testkit/README.md): Testing utilities for Playwright
+- [@vibe/codemod](packages/codemod/README.md): Codemods and CLI tools
+- [monday-ui-style](packages/style/README.md): Styling foundations (included in @vibe/core)
+- [vibe-storybook-components](packages/storybook-blocks/README.md): Vibe Storybook Blocks
+- [storybook-addon-playground](https://github.com/mondaycom/storybook-addon-playground/): A Component Playground Addon for Storybook
+
+## Older Versions
 
-If you're new to Vibe Design System, we recommend starting with our main package:
+Vibe 2 ([`monday-ui-react-core`](https://www.npmjs.com/package/monday-ui-react-core)) will no longer receive new features or enhancements but will continue to receive critical bug fixes as needed. We highly recommend following the [migration guide](http://vibe.monday.com/?path=/docs/migration-guide--docs) to upgrade to the actively maintained Vibe 3, which includes the latest improvements, new components, and ongoing support.
 
-- [core](packages/core/README.md): This is the core of the Vibe Design System. Follow the installation guide and getting started instructions to integrate it into your project.
+For version 2 documentation, see [vibe.monday.com/v2](https://vibe.monday.com/v2).
 
 ## Contributing
 
-We welcome every contributor, please read the [contribution guidelines](packages/core/CONTRIBUTING.md) before submitting a PR
+We welcome and encourage every contributor! Please read our [Contribution Guide](http://vibe.monday.com/?path=/docs/contributing--docs).
+
+## Suggestions
+
+If you have any questions or suggestions, please feel free to open a [discussion](https://github.com/mondaycom/vibe/discussions).
+
+Found a bug? Please [open an issue](https://github.com/mondaycom/vibe/issues/new/choose).

packages/core/VERSION_2_MIGRATION.md renamed to docs/vibe2-migration-guide.md

@@ -0,0 +1,23 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
+  "ignorePatterns": ["dist", ".eslintrc.json"],
+  "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "no-empty-function": "off",
+    "@typescript-eslint/no-empty-function": ["error", { "allow": ["arrowFunctions"] }],
+    "prettier/prettier": "error"
+  },
+  "env": {
+    "node": true
+  }
+}

packages/codemod/.eslintrc.json

@@ -0,0 +1 @@
+plop/**/*.hbs

packages/codemod/.prettierignore

@@ -0,0 +1,73 @@
+# @vibe/codemod
+
+> Vibe Design System's Codemods and CLI tools for automating migrations and transformations
+
+The @vibe/codemod package is designed to automate the migration to the latest version of the Vibe design system. It applies specific transformations to your codebase based on the migration type you choose. The tool can be run interactively or via command-line arguments.
+
+## Usage
+
+To run, use the following command:
+
+```bash
+npx @vibe/codemod [options]
+```
+
+## Options
+
+### `--migration` (alias: `-m`)
+
+- **Description**: Specifies which migration type to run (e.g., `v3`).
+- **Choices**: `v3`
+- **Required**: Yes
+- **Example**:
+
+  ```bash
+  npx @vibe/codemod --migration v3
+  ```
+
+### `--target` (alias: `-t`)
+
+- **Description**: Specifies the target directory where the transformations will be applied.
+- **Default**: Current working directory (`process.cwd()`)
+- **Required**: No
+- **Example**:
+
+  ```bash
+  npx @vibe/codemod --target /path/to/your/project
+  ```
+
+### `--extensions` (alias: `-x`)
+
+- **Description**: Specifies which file extensions to include for the migration.
+- **Choices**: `jsx`, `tsx`, `js`, `ts`
+- **Default**: `jsx`, `tsx`
+- **Required**: No
+- **Example**:
+
+  ```bash
+  npx @vibe/codemod --extensions jsx tsx
+  ```
+
+### `--verbose` (alias: `-v`)
+
+- **Description**: Enables verbose mode. When enabled, detailed logs of the transformation process will be printed.
+- **Default**: `false`
+- **Example**:
+
+  ```bash
+  npx @vibe/codemod --verbose
+  ```
+
+## Included Migrations
+
+The following migrations are included in this CLI:
+
+### `v3` Migration
+
+- **Migration Type**: `v3` (`--migration v3`)
+- **Description**: This migration transforms components and files to comply with version 3 of @vibe/code.
+
+### `enums` Migration
+
+- **Migration Type**: `enums` (`--migration enums`)
+- **Description**: This migration transforms enums to TS types with version 3 of @vibe/code.