Merge remote-tracking branch 'origin/main' into taylor/tailwind

package.json

@@ -5,14 +5,15 @@
     "packages/*"
   ],
   "scripts": {
-    "ci": "yarn prettier && yarn lint && yarn dbuild && yarn test",
+    "ci": "yarn prettier && yarn lint && yarn sbuild && yarn dbuild && yarn test",
     "clean": "rimraf node_modules -g 'packages/*/.eslintcache' 'packages/*/*.tsbuildinfo' 'packages/*/dist' 'packages/*/.rollup.cache' 'packages/*/types' 'packages/*/coverage'",
     "dbuild": "npm-run-all 'dbuild:*'",
     "dbuild:utils": "yarn workspace @dolthub/web-utils dbuild",
     "dbuild:hooks": "yarn workspace @dolthub/react-hooks dbuild",
     "dbuild:contexts": "yarn workspace @dolthub/react-contexts dbuild",
     "dbuild:resource": "yarn workspace @dolthub/proto-resource-utils dbuild",
     "dbuild:components": "yarn workspace @dolthub/react-components dbuild",
+    "sbuild": "yarn workspace @dolthub/react-components build-storybook",
     "lint": "npm-run-all --parallel 'lint:*'",
     "lint:hooks": "yarn workspace @dolthub/react-hooks lint",
     "lint:contexts": "yarn workspace @dolthub/react-contexts lint",

packages/components/.eslintignore

@@ -2,3 +2,4 @@ dist
 node_modules
 .eslintrc.js
 ./*.js
+storybook-static

packages/components/.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: "../../.eslintrc.cjs",
+  extends: ["../../.eslintrc.cjs", "plugin:storybook/recommended"],
 };

packages/components/.storybook/main.js

@@ -0,0 +1,50 @@
+import { join, dirname, resolve } 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) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-styling-webpack"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            postcssOptions: {
+              plugins: { tailwindcss: {}, autoprefixer: {} },
+            },
+          },
+        },
+      ],
+      include: resolve(__dirname, "../"),
+    });
+    return config;
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

packages/components/.storybook/preview.js

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

packages/components/package.json

@@ -27,7 +27,9 @@
     "npm:publish": "yarn dbuild && npm publish",
     "test": "jest --env=jest-environment-jsdom",
     "yalc:publish": "yarn dbuild && yalc publish",
-    "yalc:push": "yarn dbuild && yalc push"
+    "yalc:push": "yarn dbuild && yalc push",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "^18",
@@ -47,9 +49,19 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@dolthub/web-utils": "^0.1.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/addon-styling-webpack": "^0.0.6",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "^14.2.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -59,6 +71,7 @@
     "@types/eslint": "^8",
     "@types/identity-obj-proxy": "^3",
     "@types/jest": "^29.5.11",
+    "@types/prop-types": "^15",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-loader": "^2",
@@ -69,20 +82,24 @@
     "babel-jest": "^29.7.0",
     "cssnano": "^6.0.3",
     "eslint": "^8.56.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.33",
+    "postcss-loader": "^8.1.0",
     "postcss-modules": "^6.0.0",
     "postcss-preset-env": "^9.3.0",
     "prettier": "^3.2.4",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.9.6",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^7.6.17",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "yalc": "^1.0.0-pre.53"

packages/components/src/CharCount/index.module.css

@@ -0,0 +1,7 @@
+.charCount {
+  @apply text-acc-grey;
+}
+
+.charCountOver {
+  @apply text-acc-red;
+}

packages/components/src/CharCount/index.tsx

@@ -0,0 +1,22 @@
+import cx from "classnames";
+import React from "react";
+import css from "./index.module.css";
+
+export const maxChar = 2048;
+
+type Props = {
+  desc: string;
+  className?: string;
+};
+
+export default function CharCount(props: Props) {
+  return (
+    <span
+      className={cx(css.charCount, props.className, {
+        [css.charCountOver]: props.desc.length > maxChar,
+      })}
+    >
+      {props.desc.length}/{maxChar}
+    </span>
+  );
+}

packages/components/src/__tests__/CharCount.test.tsx

@@ -0,0 +1,30 @@
+import { nTimes } from "@dolthub/web-utils";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import CharCount from "../CharCount";
+import css from "./index.module.css";
+
+const tilde = () => "~";
+
+const mocks = [
+  { words: "", over: false },
+  { words: nTimes(9, tilde).join(""), over: false },
+  { words: nTimes(2050, tilde).join(""), over: true },
+];
+
+describe("test CharCount", () => {
+  mocks.forEach(mock => {
+    it(`renders CharCount for word length of ${mock.words.length}`, () => {
+      render(<CharCount desc={mock.words} className="classname" />);
+
+      const content = screen.getByText(`${mock.words.length}/2048`);
+      expect(content).toBeVisible();
+      expect(content).toHaveClass(css.charCount);
+      expect(content).toHaveClass("classname");
+
+      if (mock.over) {
+        expect(content).toHaveClass(css.charCountOver);
+      }
+    });
+  });
+});

packages/components/src/index.ts

@@ -1,3 +1,4 @@
+export { default as CharCount } from "./CharCount";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as Loader } from "./Loader";
 export { default as Markdown } from "./Markdown";

packages/components/src/main.css

@@ -0,0 +1,53 @@
+/* Fonts import should come first */
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i|Space+Mono:400,400i,700,700i&display=swap");
+
+@tailwind base;
+
+html,
+body {
+  @apply font-sans text-primary;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  @apply text-primary;
+}
+
+h2,
+h3,
+h4 {
+  @apply font-semibold;
+}
+
+h1 {
+  @apply font-bold text-3xl;
+}
+
+h2 {
+  @apply text-2xl;
+}
+
+h3 {
+  @apply text-xl;
+}
+
+h4 {
+  @apply text-lg;
+}
+
+/* a {
+  @apply font-semibold text-link-1;
+}
+
+a:hover {
+  @apply text-link-2;
+} */
+
+p {
+  @apply text-sm text-primary leading-normal;
+}
+
+@tailwind components;
+@tailwind utilities;

packages/components/src/stories/CharCount.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CharCount from "../CharCount";
+
+const meta: Meta<typeof CharCount> = {
+  title: "CharCount",
+  component: CharCount,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CharCount>;
+
+export const WithinLimit: Story = {
+  args: {
+    desc: "short desc",
+  },
+};
+
+export const TooLong: Story = {
+  args: {
+    desc: "abc".repeat(2048),
+  },
+};

packages/components/src/stories/ExternalLink.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import ExternalLink from "../ExternalLink";
+
+const meta: Meta<typeof ExternalLink> = {
+  title: "ExternalLink",
+  component: ExternalLink,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ExternalLink>;
+
+export const Default: Story = {
+  args: {
+    href: "https://dolthub.com",
+    children: <span>Go to DoltHub in new tab</span>,
+  },
+};

packages/components/src/stories/Loader.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import Loader from "../Loader";
+
+const meta: Meta<typeof Loader> = {
+  title: "Loader",
+  component: Loader,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loader>;
+
+export const NotLoadedNoChild: Story = {
+  args: {
+    loaded: false,
+  },
+};
+
+export const NotLoadedWithChild: Story = {
+  args: {
+    loaded: false,
+    children: <span>Loaded</span>,
+  },
+};
+
+export const LoadedWithChild: Story = {
+  args: {
+    loaded: true,
+    children: <span>Loaded</span>,
+  },
+};
+
+export const LoadedNoChild: Story = {
+  args: {
+    loaded: true,
+  },
+};
+
+export const NotLoadedWithStyles: Story = {
+  args: {
+    loaded: false,
+    options: {
+      color: "red",
+      lines: 4,
+      radius: 10,
+      shadow: true,
+      speed: 0.5,
+      opacity: 0.2,
+    },
+  },
+};