components: Customize tailwind config

packages/components/.storybook/main.js → packages/components/.storybook/main.ts

@@ -1,33 +1,32 @@
-import { join, dirname, resolve } from "path";
+import { StorybookConfig } from "@storybook/react-webpack5";
+import { dirname, join, 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) {
+function getAbsolutePath(value: string): string {
   return dirname(require.resolve(join(value, "package.json")));
 }
 
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
-const config = {
+const config: StorybookConfig = {
   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"),
+    name: "@storybook/react-webpack5",
     options: {
       builder: {
         useSWC: true,
       },
     },
   },
   webpackFinal: async config => {
-    config.module.rules.push({
+    (config.module?.rules ?? []).push({
       test: /\.css$/,
       use: [
         {

packages/components/.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import { Preview } from "@storybook/react";
+import React from "react";
+import "../src/main.css";
+import ThemeWrapper from "../src/tailwind/Wrapper";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <ThemeWrapper>
+        <Story />
+      </ThemeWrapper>
+    ),
+  ],
+};
+
+export default preview;

packages/components/package.json

@@ -2,7 +2,7 @@
   "name": "@dolthub/react-components",
   "author": "DoltHub",
   "description": "A collection of React components for common tasks",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -32,27 +32,31 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "dependencies": {
+    "@dolthub/web-utils": "^0.1.3",
     "classnames": "^2.5.1",
+    "deepmerge": "^4.3.1",
+    "github-markdown-css": "^5.5.1",
     "react-loader": "^2.4.7",
-    "reactjs-popup": "^2.0.6"
+    "react-markdown": "^9.0.1",
+    "reactjs-popup": "^2.0.6",
+    "remark-gfm": "^4.0.0",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@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",
@@ -96,7 +100,6 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "storybook": "^7.6.17",
-    "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "yalc": "^1.0.0-pre.53"

packages/components/rollup.config.js

@@ -33,7 +33,9 @@ export default [
         config: {
           path: "./postcss.config.js",
         },
-        extensions: [".css"],
+        modules: {
+          generateScopedName: "[folder]_[local]___[hash:base64:5]",
+        },
         minimize: true,
         inject: {
           insertAt: "top",

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

@@ -0,0 +1,7 @@
+.link {
+  @apply font-semibold text-link-2;
+
+  &:hover {
+    @apply text-link-1;
+  }
+}

packages/components/src/ExternalLink/index.tsx

@@ -1,4 +1,6 @@
+import cx from "classnames";
 import React, { ReactNode } from "react";
+import css from "./index.module.css";
 
 type Props = {
   href: string;
@@ -9,7 +11,12 @@ type Props = {
 
 export default function ExternalLink(props: Props) {
   return (
-    <a {...props} target="_blank" rel="noopener noreferrer">
+    <a
+      {...props}
+      className={cx(css.link, props.className)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {props.children}
     </a>
   );

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

@@ -0,0 +1,42 @@
+.preview {
+  @apply p-6 font-sans text-primary leading-5;
+  text-align: -webkit-auto;
+  > * {
+    @apply text-primary font-sans;
+  }
+  h2,
+  h3,
+  h4,
+  h5 {
+    @apply font-semibold;
+  }
+  h1 {
+    @apply font-semibold text-3xl;
+  }
+  ol {
+    @apply list-decimal;
+  }
+  ul {
+    @apply list-disc;
+  }
+  li {
+    @apply text-sm;
+  }
+  a {
+    @apply text-link-1 hover:text-link-2;
+  }
+  @media (max-width: 767px) {
+    @apply p-4;
+  }
+}
+
+.baseText {
+  p,
+  li {
+    @apply text-base;
+  }
+}
+
+.forModal {
+  @apply overflow-y-scroll max-h-[12.5rem];
+}

packages/components/src/Markdown/index.tsx

@@ -0,0 +1,44 @@
+import cx from "classnames";
+import "github-markdown-css/github-markdown-light.css";
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import css from "./index.module.css";
+
+type Props = {
+  className?: string;
+  value: string;
+  ["data-cy"]?: string;
+  forModal?: boolean;
+  baseTextSize?: boolean;
+  isDoc?: boolean;
+};
+
+export default function Markdown({
+  forModal = false,
+  baseTextSize = false,
+  ...props
+}: Props) {
+  return (
+    <div
+      className={cx(
+        css.preview,
+        {
+          [css.forModal]: forModal,
+          [css.baseText]: baseTextSize,
+        },
+        props.className,
+      )}
+      data-cy={props["data-cy"]}
+      aria-label="markdown"
+      dir="auto"
+    >
+      <ReactMarkdown
+        className={`markdown-body ${props.isDoc ? "markdown-doc" : ""}`}
+        remarkPlugins={[remarkGfm]}
+      >
+        {props.value}
+      </ReactMarkdown>
+    </div>
+  );
+}

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

@@ -1,4 +1,3 @@
 .successMsg {
-  /* TODO(color): acc-green */
-  @apply text-[#5ac58d] font-semibold;
+  @apply text-acc-green font-semibold;
 }

packages/components/src/index.ts

@@ -1,6 +1,9 @@
 export { default as CharCount } from "./CharCount";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as Loader } from "./Loader";
+export { default as Markdown } from "./Markdown";
 export { default as Popup, PopupProps } from "./Popup";
 export { default as SmallLoader } from "./SmallLoader";
 export { default as SuccessMsg } from "./SuccessMsg";
+export { default as applyTailwindTheme } from "./tailwind/applyTheme";
+export { mergeConfig } from "./tailwind/mergeConfig";

packages/components/src/main.css

@@ -37,14 +37,6 @@ 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;
 }

packages/components/src/stories/Markdown.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Markdown from "../Markdown";
+
+const meta: Meta<typeof Markdown> = {
+  title: "Markdown",
+  component: Markdown,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Markdown>;
+
+const markdown = `
+# Heading 1
+
+This is a paragraph with some **bold** and *italic* text.
+
+## Heading 2
+
+This is a paragraph with a [link](https://example.com).
+
+And a list:
+- Item 1
+- Item 2
+- Item 3
+`;
+
+export const Basic: Story = {
+  args: {
+    value: markdown,
+  },
+};
+
+export const ForModal: Story = {
+  args: {
+    value: markdown,
+    forModal: true,
+  },
+};
+
+export const BaseText: Story = {
+  args: {
+    value: markdown,
+    baseTextSize: true,
+  },
+};
+
+export const ForDoc: Story = {
+  args: {
+    value: markdown,
+    isDoc: true,
+  },
+};

packages/components/src/tailwind/Wrapper.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+import applyTheme from "./applyTheme";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function ThemeWrapper(props: Props) {
+  useEffect(() => {
+    applyTheme();
+  }, []);
+
+  return props.children;
+}