[explorer] Base UI Components (#4572)

* Integrate storybook

* Remove some stories

* Fixing storybook

* Introduce base UI components

* Fix line-heights

* format

* Fix lint error

* Rename heading variant and simplify leading

* Rename tag to as

* Remove CSS reset for now

* comment

* re-install

* lint fix

.npmrc

@@ -1 +1,2 @@
 strict-peer-dependencies=false
+public-hoist-pattern[]=*storybook*

explorer/client/.gitignore

@@ -8,6 +8,7 @@
 
 # production
 /build
+/storybook-static
 
 # misc
 .env.local

explorer/client/.storybook/main.js

@@ -0,0 +1,18 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = {
+    stories: [
+        '../src/**/*.stories.mdx',
+        '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    ],
+    addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'],
+    framework: '@storybook/react',
+    core: {
+        builder: '@storybook/builder-vite',
+    },
+    features: {
+        storyStoreV7: true,
+    },
+    staticDirs: ['../public'],
+};

explorer/client/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+    window.global = window;
+</script>

explorer/client/.storybook/preview.js

@@ -0,0 +1,14 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import '../src/index.css';
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+};

explorer/client/package.json

@@ -21,7 +21,10 @@
         "stylelint:fix": "pnpm stylelint:check --fix",
         "lint": "pnpm eslint:check && pnpm prettier:check && pnpm stylelint:check",
         "lint:fix": "pnpm eslint:fix && pnpm prettier:fix && pnpm stylelint:fix",
-        "preview": "vite preview"
+        "preview": "vite preview",
+        "storybook": "start-storybook --port 6007",
+        "build-storybook": "build-storybook",
+        "preview-storybook": "pnpm dlx serve ./storybook-static -l 6007"
     },
     "dependencies": {
         "@mysten/sui.js": "workspace:*",
@@ -33,6 +36,7 @@
         "@visx/responsive": "^2.10.0",
         "@visx/tooltip": "^2.10.0",
         "bn.js": "^5.2.0",
+        "class-variance-authority": "^0.2.3",
         "classnames": "^2.3.1",
         "prism-react-renderer": "^1.3.5",
         "prism-themes": "^1.9.0",
@@ -45,6 +49,10 @@
         "vanilla-cookieconsent": "^2.8.0"
     },
     "devDependencies": {
+        "@storybook/addon-a11y": "^6.5.10",
+        "@storybook/addon-essentials": "^6.5.10",
+        "@storybook/builder-vite": "^0.2.2",
+        "@storybook/react": "^6.5.10",
         "@testing-library/dom": "^8.17.1",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^13.3.0",

explorer/client/src/index.css

@@ -1,4 +1,14 @@
 @import 'vanilla-cookieconsent/dist/cookieconsent.css';
+
+/*
+ * NOTE: The Tailwind CSS reset doesn't mix well with the existing styles.
+ * We currently disable the CSS reset and expect components to adapt accordingly.
+ * When we fix this, we should use the following as a CSS reset: @tailwind base;
+ */
+
+@tailwind components;
+@tailwind utilities;
+
 @font-face {
     font-family: Inter;
     src: url('./assets/Fonts/Inter-VariableFont_slnt,wght.ttf')

explorer/client/src/ui/Heading.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ReactNode } from 'react';
+
+const headingStyles = cva(
+    [
+        'font-sans',
+        // TODO: Remove when CSS reset is applied.
+        'my-0',
+    ],
+    {
+        variants: {
+            variant: {
+                heading1: 'text-h1',
+                heading2: 'text-h2',
+                heading3: 'text-h3',
+                heading4: 'text-h4',
+                heading5: 'text-h5',
+                heading6: 'text-h6',
+            },
+            weight: {
+                medium: 'font-medium',
+                semibold: 'font-semibold',
+                bold: 'font-bold',
+            },
+        },
+        defaultVariants: {
+            variant: 'heading1',
+            weight: 'semibold',
+        },
+    }
+);
+
+export interface HeadingProps extends VariantProps<typeof headingStyles> {
+    /**
+     * The HTML element that will be rendered.
+     * By default, we render a "div" in order to separate presentational styles from semantic markup.
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+    children: ReactNode;
+}
+
+export function Heading({
+    as: Tag = 'div',
+    children,
+    ...styleProps
+}: HeadingProps) {
+    return <Tag className={headingStyles(styleProps)}>{children}</Tag>;
+}

explorer/client/src/ui/Text.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ReactNode } from 'react';
+
+const textStyles = cva(['font-sans'], {
+    variants: {
+        weight: {
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold',
+        },
+        variant: {
+            body: 'text-body',
+            bodySmall: 'text-bodySmall',
+            subtitle: 'text-subtitle',
+            subtitleSmall: 'text-subtitleSmall',
+            subtitleSmallExtra: 'text-subtitleSmallExtra',
+            caption: 'uppercase text-caption',
+            captionSmall: 'uppercase text-captionSmall ',
+        },
+        italic: {
+            true: 'italic',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        weight: 'medium',
+        variant: 'body',
+    },
+});
+
+export interface TextProps extends VariantProps<typeof textStyles> {
+    children: ReactNode;
+}
+
+export function Text({ children, ...styleProps }: TextProps) {
+    return <div className={textStyles(styleProps)}>{children}</div>;
+}

explorer/client/src/ui/stories/Heading.stories.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type ComponentStory, type ComponentMeta } from '@storybook/react';
+
+import { Heading } from '../Heading';
+
+export default {
+    title: 'UI/Heading',
+    component: Heading,
+} as ComponentMeta<typeof Heading>;
+
+const Template: ComponentStory<typeof Heading> = (args) => (
+    <div>
+        <Heading {...args} weight="bold">
+            This is a sample heading.
+        </Heading>
+        <Heading {...args} weight="semibold">
+            This is a sample heading.
+        </Heading>
+        <Heading {...args} weight="medium">
+            This is a sample heading.
+        </Heading>
+    </div>
+);
+
+export const Heading1 = Template.bind({});
+Heading1.args = { as: 'h1', variant: 'heading1' };
+
+export const Heading2 = Template.bind({});
+Heading2.args = { as: 'h2', variant: 'heading2' };
+
+export const Heading3 = Template.bind({});
+Heading3.args = { as: 'h3', variant: 'heading3' };
+
+export const Heading4 = Template.bind({});
+Heading4.args = { as: 'h4', variant: 'heading4' };
+
+export const Heading5 = Template.bind({});
+Heading5.args = { as: 'h5', variant: 'heading5' };
+
+export const Heading6 = Template.bind({});
+Heading6.args = { as: 'h6', variant: 'heading6' };

explorer/client/src/ui/stories/Text.stories.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type ComponentMeta, type Story } from '@storybook/react';
+import { Fragment } from 'react';
+
+import { Text, type TextProps } from '../Text';
+
+export default {
+    title: 'UI/Text',
+    component: Text,
+} as ComponentMeta<typeof Text>;
+
+const Template: Story<{
+    variants: TextProps['variant'][];
+    weights?: TextProps['weight'][];
+    italic?: boolean;
+}> = ({ variants, weights = ['medium', 'semibold'], italic }) => (
+    <div>
+        {variants.map((variant) => (
+            <Fragment key={variant}>
+                {weights.map((weight) => (
+                    <Text key={weight} variant={variant} weight={weight}>
+                        {variant} - {weight}
+                    </Text>
+                ))}
+
+                {italic && (
+                    <Text variant={variant} italic>
+                        {variant} - Italic
+                    </Text>
+                )}
+            </Fragment>
+        ))}
+    </div>
+);
+
+export const Body = Template.bind({});
+Body.args = {
+    variants: ['body', 'bodySmall'],
+    italic: true,
+};
+
+export const Subtitle = Template.bind({});
+Subtitle.args = {
+    variants: ['subtitle', 'subtitleSmall', 'subtitleSmallExtra'],
+};
+
+export const Caption = Template.bind({});
+Caption.args = {
+    variants: ['caption', 'captionSmall'],
+    weights: ['medium', 'semibold', 'bold'],
+};

explorer/client/tailwind.config.js

@@ -7,6 +7,30 @@ module.exports = {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
     theme: {
         extend: {
+            // Line-heights that are found in the design:
+            lineHeight: {
+                80: '0.8',
+                100: '1',
+                130: '1.3',
+            },
+            fontSize: {
+                // Text sizes:
+                body: ['14px', '1'],
+                bodySmall: ['13px', '1'],
+                subtitle: ['12px', '1'],
+                subtitleSmall: ['11px', '1'],
+                subtitleSmallExtra: ['10px', '1'],
+                caption: ['12px', '1'],
+                captionSmall: ['11px', '1'],
+
+                // Heading sizes:
+                h1: ['28px', '0.8'],
+                h2: ['24px', '0.8'],
+                h3: ['20px', '1'],
+                h4: ['18px', '1'],
+                h5: ['17px', '1'],
+                h6: ['16px', '1'],
+            },
             fontFamily: {
                 sans: ['Inter', ...defaultTheme.fontFamily.sans],
                 mono: ['Space Mono', ...defaultTheme.fontFamily.mono],