feat: extend base table components (#19)

* feat: extend base table components

* changeset

.changeset/gorgeous-rice-appear.md

@@ -0,0 +1,5 @@
+---
+"@arkejs/table": patch
+---
+
+feat: extend components prop

.github/changeset-version.js

@@ -0,0 +1,12 @@
+// ORIGINALLY FROM CLOUDFLARE WRANGLER:
+// https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
+
+import { exec } from "child_process";
+
+// This script is used by the `release.yml` workflow to update the version of the packages being released.
+// The standard step is only to run `changeset version` but this does not update the package-lock.json file.
+// So we also run `npm install`, which does this update.
+// This is a workaround until this is handled automatically by `changeset version`.
+// See https://github.com/changesets/changesets/issues/421.
+exec("npx changeset version");
+exec("npm install");

.github/version-script-beta.js

@@ -0,0 +1,21 @@
+// ORIGINALLY FROM CLOUDFLARE WRANGLER:
+// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js
+
+import { exec } from "child_process";
+import fs from "fs";
+
+const pkgJsonPath = "packages/table/package.json";
+try {
+  const pkg = JSON.parse(fs.readFileSync(pkgJsonPath));
+  exec("git rev-parse --short HEAD", (err, stdout) => {
+    if (err) {
+      console.log(err);
+      process.exit(1);
+    }
+    pkg.version = "0.0.0-beta." + stdout.trim();
+    fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n");
+  });
+} catch (error) {
+  console.error(error);
+  process.exit(1);
+}

.github/workflows/prerelease-comment.yml

@@ -0,0 +1,65 @@
+# Adapted from create-t3-app.
+name: Write Beta Release comment
+
+on:
+  workflow_run:
+    workflows: ["Release - Beta"]
+    types:
+      - completed
+
+jobs:
+  comment:
+    if: |
+      github.repository_owner == 'arkemishub' &&
+      ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    name: Write comment to the PR
+    steps:
+      - name: "Comment on PR"
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: context.payload.workflow_run.id,
+            });
+
+            for (const artifact of allArtifacts.data.artifacts) {
+              // Extract the PR number and package version from the artifact name
+              const match = /^npm-package-arke-table@(.*?)-pr-(\d+)/.exec(artifact.name);
+            
+              if (match) {
+                require("fs").appendFileSync(
+                  process.env.GITHUB_ENV,
+                  `\nBETA_PACKAGE_VERSION=${match[1]}` +
+                  `\nWORKFLOW_RUN_PR=${match[2]}` +
+                  `\nWORKFLOW_RUN_ID=${context.payload.workflow_run.id}`
+                );
+                break;
+              }
+            }
+
+      - name: "Comment on PR with Link"
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          number: ${{ env.WORKFLOW_RUN_PR }}
+          message: |
+            A new prerelease is available for testing:
+
+            ```sh
+            pnpm i @arkejs/table@${{ env.BETA_PACKAGE_VERSION }}
+            ```
+
+      - name: "Remove the autorelease label once published"
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.rest.issues.removeLabel({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: '${{ env.WORKFLOW_RUN_PR }}',
+              name: '🚀 autorelease',
+            });

.github/workflows/prerelease.yml

@@ -0,0 +1,60 @@
+# Adapted from create-t3-app.
+
+name: Release - Beta
+
+on:
+  pull_request:
+    types: [labeled]
+    branches:
+      - main
+jobs:
+  prerelease:
+    if: |
+      github.repository_owner == 'arkemishub' &&
+      contains(github.event.pull_request.labels.*.name, '🚀 autorelease')
+    name: Build & Publish a beta release to NPM
+    runs-on: ubuntu-latest
+    environment: Preview
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Use PNPM
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 8.6.1
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: Install NPM Dependencies
+        run: pnpm install
+
+      - name: Modify package.json version
+        run: node .github/version-script-beta.js
+
+      - name: Authenticate to NPM
+        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/table/.npmrc
+        env:
+          NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+
+      - name: Publish Beta to NPM
+        run: pnpm pub:beta
+
+      - name: get-npm-version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@main
+        with:
+          path: packages/table
+
+      - name: Upload packaged artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: npm-package-arke-table@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
+          path: packages/table/dist/index.js

.github/workflows/release.yml

@@ -1,52 +1,56 @@
+# Adapted from create-t3-app.
+
 name: Release
 
 on:
-  workflow_dispatch:
   push:
     branches:
       - main
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 jobs:
   release:
-    name: Release
+    if: ${{ github.repository_owner == 'arkemishub' }}
+    name: Create a PR for release workflow
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: Checkout Repo
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
-          persist-credentials: false
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.1
+
+      - name: Use PNPM
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8.7.6
-      - name: Setup Node.js 18
+          version: 8.6.1
+
+      - name: Use Node.js 18
         uses: actions/setup-node@v3
         with:
+          version: 8.6.1
           node-version: 18
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-      - name: Build package
-        run: pnpm build --filter=@arkejs/table
-      #      - name: Test
-      #        run: pnpm test --filter=@arkejs/table
-      #      - name: Upload coverage reports to Codecov
-      #        uses: codecov/codecov-action@v3
-      - name: Create Release Pull Request or Publish to npm
+          cache: "pnpm"
+
+      - name: Install NPM Dependencies
+        run: pnpm install
+
+      # - name: Check for errors
+      #   run: pnpm check
+
+      - name: Build the package
+        run: pnpm build
+
+      - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1
+        uses: changesets/action@v1.4.1
         with:
           commit: "chore(release): version packages"
           title: "chore(release): version packages"
-          version: npx changeset version
+          version: node .github/changeset-version.js
           publish: npx changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-  docs:
+          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+          NODE_ENV: "production"
+  next:
     name: Publish docs
-    needs: Release
-    if: needs.release.outputs.published == 'true'
     uses: './.github/workflows/docs.yml'

apps/docs/content/docs/install.mdx

@@ -14,9 +14,9 @@ npm i @arkejs/table
 
 ## Using Tailwind CSS?
 
-If you're using Tailwind CSS remember to add this line to your `tailwind.config.js`
+If you're using Tailwind CSS remember to add this line to your `tailwind.config.cjs`
 
-```js title='tailwind.config.js'
+```js title='tailwind.config.cjs'
 module.exports = {
   //   ...
   content: [

apps/storybook/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended', "prettier",
+    "plugin:prettier/recommended"],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

apps/storybook/.storybook/main.ts

@@ -1,14 +1,25 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    "@storybook/addon-styling-webpack"
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
   docs: {

apps/storybook/.storybook/preview.ts

@@ -1,12 +1,13 @@
 import type { Preview } from "@storybook/react";
+import '../src/index.css';
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
+        date: /Date$/i,
       },
     },
   },

apps/storybook/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}