refactor: merge 'main' branch

.github/pull_request_template.md

@@ -0,0 +1,46 @@
+## Description of changes
+
+This PR…
+
+## Checklist
+
+Before merging to main:
+
+- [ ] Tests
+- [ ] Manually tested in React apps
+- [ ] Release notes
+- [ ] Approved
+
+## Release notes
+
+```md
+# Component changes
+
+## Time Series
+
+- Added X feature to Time Series.
+
+## Leaderboard
+
+- Fixed Y bug to Leaderboard.
+
+## Counter
+
+- Added Z feature to Counter.
+
+# Packages changes
+
+## GraphQL
+
+- Added X query to GraphQL package.
+
+# App changes
+
+## React 18 example
+
+- Added X test to React 18 example.
+
+## Storybook
+
+- Added Y story for Time Series.
+```

.github/workflows/publish.yml → .github/workflows/publish-pre-release.yml

@@ -1,9 +1,10 @@
-name: publish
+name: publish-pre-release
 
 on:
   push:
     branches:
       - main
+
 env:
   PROPELDATA_CI_TOKEN: ${{ secrets.PROPELDATA_CI_TOKEN }}
 
@@ -47,11 +48,10 @@ jobs:
       - uses: ./.github/actions/prepare
         with:
           cache_fresh_start: 'true'
-      - run: yarn build
 
       # Release
       - run: |
           yarn config set -H 'npmAuthToken' "${{secrets.NPM_TOKEN}}"
           git config --global user.email "engineering@propeldata.com"
           git config --global user.name "Propel Data Cloud, Inc." 
-          COMMIT_MESSAGE=release yarn release
+          COMMIT_MESSAGE=release PRE_RELEASE=true yarn release

.github/workflows/publish-release.yml

@@ -0,0 +1,53 @@
+name: publish-release
+
+on: workflow_dispatch
+
+env:
+  PROPELDATA_CI_TOKEN: ${{ secrets.PROPELDATA_CI_TOKEN }}
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      # Setup
+      - uses: actions/checkout@v3
+        with:
+          # so that when we push tags, workflows are released, which does not happen with the default token
+          token: ${{ secrets.PROPELDATA_CI_TOKEN }}
+          # NOTE(mroberts): https://github.com/actions/checkout/issues/217
+          fetch-depth: '0'
+      - uses: actions/checkout@v3
+        with:
+          repository: propeldata/actions
+          token: ${{ secrets.PROPELDATA_CI_TOKEN }}
+          path: actions
+      - uses: ./actions/propel-slack
+        with:
+          slack_token: ${{ secrets.SLACK_TOKEN }}
+          slack_signing_secret: ${{ secrets.SLACK_SIGNING_SECRET }}
+          message_type: 'pipeline'
+      - uses: ./actions/propel-slack
+        with:
+          slack_token: ${{ secrets.SLACK_TOKEN }}
+          slack_signing_secret: ${{ secrets.SLACK_SIGNING_SECRET }}
+          message_type: 'publish'
+
+      # Build
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.13.0'
+      - uses: ./actions/propel-slack
+        with:
+          slack_token: ${{ secrets.SLACK_TOKEN }}
+          slack_signing_secret: ${{ secrets.SLACK_SIGNING_SECRET }}
+          message_type: 'build'
+      - uses: ./.github/actions/prepare
+        with:
+          cache_fresh_start: 'true'
+
+      # Release
+      - run: |
+          yarn config set -H 'npmAuthToken' "${{secrets.NPM_TOKEN}}"
+          git config --global user.email "engineering@propeldata.com"
+          git config --global user.name "Propel Data Cloud, Inc." 
+          COMMIT_MESSAGE=release yarn release

.yarnrc.yml

@@ -1,15 +1,19 @@
+nmHoistingLimits: dependencies
+
 nodeLinker: node-modules
 
+npmRegistryServer: "https://registry.npmjs.com/"
+
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: '@yarnpkg/plugin-workspace-tools'
-
-yarnPath: .yarn/releases/yarn-berry.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
 
 supportedArchitectures:
-  os: [linux, darwin]
-  cpu: [x64, arm64]
-
-npmRegistryServer: "https://registry.npmjs.com/"
+  cpu:
+    - x64
+    - arm64
+  os:
+    - linux
+    - darwin
 
-nmHoistingLimits: "dependencies"
+yarnPath: .yarn/releases/yarn-3.6.0.cjs

CONTRIBUTING.md

@@ -0,0 +1,63 @@
+# Contributing
+
+All contributions are welcome, whether they are technical in nature or not.
+
+Feel free to open a new issue to ask questions, discuss issues or propose enhancements.
+
+The rest of this document describes how to get started developing on this repository.
+
+## What should I know before I get started?
+
+### Propel API
+
+To enable the "Connected" mode in our UI components, we rely on the Propel API. It is important for contributors to understand the functionality of each Propel resource and how the GraphQL API operates. Detailed information about Propel's API can be found in [Propel's documentation](https://www.propeldata.com/docs), which we highly recommend reviewing before making contributions.
+
+### Chart.js
+
+The UI components rely on [Chart.js](https://www.chartjs.org/docs/latest/) for various types of charts, including the Bar Chart and the Line Chart. Familiarity with Chart.js is a prerequisite for effectively working on and enhancing these components.
+
+## Contributing changes
+
+### Preview component changes
+
+There are two ways you can preview changes made to a component:
+
+- Storybook
+- React sample apps
+
+#### Storybook
+
+To run Storybook, navigate to the root of the project and execute the command `yarn storybook`. Within Storybook, you will find dedicated stories for each component, allowing you to preview changes in real-time. Use the command `yarn dev` in the component you are working on to observe the changes instantly.
+
+#### React sample apps
+
+The React sample apps are purpose-built UI applications designed for manual component testing. These apps allow you to run a React application using versions 16.8.0, 17.0.0, or 18.0.0. To launch a specific app, navigate to its respective folder and run the command `yarn start`. This will initiate the React application and enable you to explore and interact with the components in the desired React version.
+
+### Manual testing
+
+To thoroughly test your feature or bug fix across different React versions (16.8.0, 17.0.0, and 18.0.0), utilize the React sample apps. These apps are specifically designed for manual testing of components. It is crucial to ensure compatibility with each React version. Keep in mind that using React 17 or React 18 specific features in the components is not permitted, as it would cause compatibility issues with other versions. Maintaining cross-version support is essential for maintaining the functionality of the components.
+
+Feel free to customize the React sample apps according to your needs for testing specific features or bug fixes. However, it is crucial to maintain synchronization of these modifications across all React versions.
+
+### Release Procedure
+
+Every merge to main creates a new release candidate. For example, if we are currently developing 1.2.3, merging to main will create 1.2.3-rc.0. Merging another change to main will create 1.2.3-rc.1, and so on. These release candidates allow us to perform additional testing of the UI Kit in external applications. Once we are satisfied with a release candidate, we will create a proper release for it.
+
+To create a proper release, first
+
+1. **Draft a new Release in GitHub.** You can use [this link](https://github.com/propeldata/ui-kit/releases/new).
+
+   1. Do not choose a tag yet.
+   2. Set the title to the version of the UI Kit that will be released (for example, "1.2.3").
+   3. Get the list of all pull requests merged since the last release. You can do this by comparing to the last release in GitHub. For example, if the last release was 1.2.2, the following URL will show all the pull requests merged since 1.2.2:
+
+      ```
+      https://github.com/propeldata/ui-kit/compare/%40propeldata/ui-kit%401.2.3...main
+      ```
+
+   4. Combine the release notes from each of the pull requests.
+   5. Type them into the GitHub Release and click "Save draft".
+
+2. **Manually trigger the "publish-release" workflow.** Go to the "Actions" tab, click on the "publish-release" workflow, and then click "Run workflow". This will release 1.2.3, publish it to NPM, and create its git tag.
+
+3. **Go back to the GitHub Release, set its tag, and publish it.** The "publish-release" workflow will have created the tag "@propeldata/ui-kit@1.2.3". Choose this for the GitHub Release and click "Publish release".

app/examples/react-16/package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-16",
+  "private": true,
   "scripts": {
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start"
   },

app/examples/react-17/package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-17",
+  "private": true,
   "scripts": {
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start"
   },

app/examples/react-18/package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-18",
+  "private": true,
   "scripts": {
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start"
   },

app/storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-kit-storybook",
-  "packageManager": "yarn@3.3.0",
+  "private": true,
   "dependencies": {
     "@propeldata/react-counter": "workspace:^",
     "@propeldata/react-leaderboard": "workspace:^",

package.json

@@ -40,6 +40,7 @@
     "@typescript-eslint/parser": "^5.43.0",
     "babel-loader": "^8.3.0",
     "commitizen": "^4.2.5",
+    "conventional-changelog-angular": "^6.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
@@ -57,7 +58,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "packageManager": "yarn@3.3.0",
+  "packageManager": "yarn@3.6.0",
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

packages/core/components/package.json

@@ -11,7 +11,8 @@
     "build": "parcel build"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "group": "@propeldata/ui-kit"
   },
   "devDependencies": {
     "parcel": "^2.8.2",

packages/core/graphql/package.json

@@ -12,7 +12,8 @@
     "gen": "graphql-codegen --config codegen.yml"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "group": "@propeldata/ui-kit"
   },
   "dependencies": {
     "dotenv": "^16.0.3",

packages/core/plugins/package.json

@@ -15,7 +15,8 @@
     "src"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "group": "@propeldata/ui-kit"
   },
   "devDependencies": {
     "chart.js": "^4.2.1",

packages/core/release/package.json

@@ -19,14 +19,16 @@
     "bin",
     "lib"
   ],
+  "peerDependencies": {
+    "conventional-changelog-angular": "^6.0.0"
+  },
   "devDependencies": {
     "@tsconfig/node18": "1.0.1",
     "eslint": "^8.32.0",
     "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@monodeploy/node": "^3.6.0",
-    "@monodeploy/types": "^3.6.0",
-    "conventional-changelog-angular": "^5.0.13"
+    "@monodeploy/node": "^4.0.1",
+    "@monodeploy/types": "^4.0.1"
   }
 }

packages/core/release/src/index.ts

@@ -8,13 +8,19 @@ import { execSync } from 'child_process'
 async function main(): Promise<void> {
   try {
     const autoCommitMessage = process.env.COMMIT_MESSAGE
+    const dryRun = process.env.DRY_RUN === 'true'
+    const prerelease = process.env.PRE_RELEASE === 'true'
+
     const config: RecursivePartial<MonodeployConfiguration> = {
       access: 'infer',
       autoCommit: true,
       autoCommitMessage,
       commitIgnorePatterns: [autoCommitMessage ?? 'chore: release \\[skip ci\\]'],
       conventionalChangelogConfig: 'conventional-changelog-angular',
+      dryRun,
       persistVersions: true,
+      prerelease,
+      packageGroupManifestField: 'publishConfig.group',
       topologicalDev: true
     }
 
@@ -24,13 +30,30 @@ async function main(): Promise<void> {
     // push them individually.
 
     const branch = getBranch()
-    execSync(`git push origin ${branch}`)
+    if (!dryRun) {
+      execSync(`git push origin ${branch}`)
+    } else {
+      console.log(`[Dry Run] git push origin ${branch}`)
+    }
 
+    // NOTE(mroberts): With package groups, the same tag could be generated
+    // multiple times, so we need to dedupe them.
+
+    const tags = new Set<string>()
     for (const packageName in changeset) {
       const change = changeset[packageName]
       const { tag } = change
+
       if (tag !== null) {
+        tags.add(tag)
+      }
+    }
+
+    for (const tag of tags) {
+      if (!dryRun) {
         execSync(`git push origin refs/tags/${tag}`)
+      } else {
+        console.log(`[Dry Run] git push origin refs/tags/${tag}`)
       }
     }
   } catch (error) {

packages/react/counter/README.md

@@ -28,7 +28,7 @@ function MonthSalesCount() {
     accessToken: '<PROPEL_ACCESS_TOKEN>',
     metric: 'salesCount',
     timeRange: {
-      relative: 'LAST_MONTH'
+      relative: 'PREVIOUS_MONTH'
     }
   }
   return <Counter query={queryOptions} />