[explorer] Base UI Components

.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],