Enhance storybook components

.storybook/main.ts

@@ -3,7 +3,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-docs', '@storybook/addon-themes'],
-  staticDirs: ['../src/static'],
+  staticDirs: ['../src/static', '../src/lib/assets/fonts'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

.storybook/manager-head.html

@@ -0,0 +1,8 @@
+<!--
+Pull in static files served from your Static directory or the internet
+Example:
+`main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts`
+directory inside your `public` directory
+-->
+<link rel="stylesheet" href="../src/lib/assets/fonts/inter/inter.css?v=2" />
+<link rel="stylesheet" href="../src/lib/assets/fonts/jetbrains-mono/jetbrains-mono.css?v=2" />

.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<!--
+Pull in static files served from your Static directory or the internet
+Example:
+`main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts`
+directory inside your `public` directory
+-->
+<link rel="stylesheet" href="../src/lib/assets/fonts/inter/inter.css?v=2" />
+<link rel="stylesheet" href="../src/lib/assets/fonts/jetbrains-mono/jetbrains-mono.css?v=2" />

.storybook/preview.tsx

@@ -31,6 +31,9 @@ const preview: Preview = {
     }),
   ],
   parameters: {
+    docs: {
+      codePanel: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

src/Introduction.mdx

@@ -0,0 +1,45 @@
+import {Meta} from "@storybook/addon-docs/blocks";
+
+<Meta title="Getting started"/>
+
+# Introduction
+
+<br/>
+___
+<br/>
+
+It’s the React UI component library powering [CSPR.live](https://cspr.live) and [Casper Wallet](https://www.casperwallet.io/). Give it a try to build faster with a consistent look the Casper community already knows and loves.
+
+✅ **Battle-tested** components from production apps \
+✅ **Blockchain-focused** with CSPR-specific utilities \
+✅ **Consistent design** across the Casper ecosystem \
+✅ **TypeScript-first** with great developer experience \
+✅ **Zero configuration** - works out of the box
+
+# Getting started
+
+Install from NPM to access ready-to-use components that bring the beloved Casper community UI to your dApp.
+Save time on design and implementation with clean, consistent look tailored for Web3.
+
+```
+npm install @make-software/cspr-design --save
+```
+
+### Example of using the `Cspr` component to display an account balance:
+``` tsx
+import {
+  Cspr,
+  BodyText,
+  FlexColumn,
+} from '@make-software/cspr-design';
+
+const balance = () => (
+  <FlexColumn itemsSpacing={20}>
+    <BodyText size={2}>Account balance:</BodyText>
+    <Cspr
+      motes="50000000000000"
+      precisionCase={PrecisionCase.full}
+    />
+  </FlexColumn>
+);
+```

src/Palette.mdx

@@ -0,0 +1,138 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs/blocks';
+import {themeConfig} from "./lib/index.js";
+
+<Meta title="Palette of colors"/>
+
+# Palette of colors
+
+<br/>
+___
+<br/>
+
+# Light
+
+<ColorPalette>
+    <ColorItem
+        title="Backgrounds"
+        subtitle={'These colors are used for backgrounds and containers.'}
+        colors={{
+            backgroundPrimary: themeConfig.light.styleguideColors.backgroundPrimary,
+            backgroundSecondary: themeConfig.light.styleguideColors.backgroundSecondary,
+            backgroundTertiary: themeConfig.light.styleguideColors.backgroundTertiary,
+            backgroundQuaternary: themeConfig.light.styleguideColors.backgroundQuaternary
+        }}
+    />
+    <ColorItem
+        title="Borders (lines, borders)"
+        subtitle={'These colors are used for borders and lines.'}
+        colors={{
+            borderPrimary: themeConfig.light.styleguideColors.borderPrimary,
+            borderSecondary: themeConfig.light.styleguideColors.borderPrimary,
+            borderRed: themeConfig.light.styleguideColors.borderRed
+        }}
+    />
+    <ColorItem
+        title="Fills (buttons, dropdowns, inputs)"
+        subtitle={'These colors are used for buttons, dropdowns, and inputs.'}
+        colors={{
+            fillPrimaryRed: themeConfig.light.styleguideColors.fillPrimaryRed,
+            fillPrimaryRedHover: themeConfig.light.styleguideColors.fillPrimaryRedHover,
+            fillPrimaryRedClick: themeConfig.light.styleguideColors.fillPrimaryRedClick,
+            fillPrimaryBlue: themeConfig.light.styleguideColors.fillPrimaryBlue,
+            fillPrimaryBlueHover: themeConfig.light.styleguideColors.fillPrimaryBlueHover,
+            fillPrimaryBlueClick: themeConfig.light.styleguideColors.fillPrimaryBlueClick,
+            fillSecondary: themeConfig.light.styleguideColors.fillSecondary,
+            fillSecondaryRedHover: themeConfig.light.styleguideColors.fillSecondaryRedHover,
+            fillSecondaryRedClick: themeConfig.light.styleguideColors.fillSecondaryRedClick,
+            fillSecondaryBlueHover: themeConfig.light.styleguideColors.fillSecondaryBlueHover,
+            fillSecondaryBlueClick: themeConfig.light.styleguideColors.fillSecondaryBlueClick,
+            fillTertiary: themeConfig.light.styleguideColors.fillTertiary,
+            fillGreen: themeConfig.light.styleguideColors.fillGreen,
+            fillVioletGradient: themeConfig.light.styleguideColors.fillVioletGradient,
+            fillBlueGradient: themeConfig.light.styleguideColors.fillBlueGradient,
+            fillLoadingInTable: themeConfig.light.styleguideColors.fillLoadingInTable
+        }}
+    />
+    <ColorItem
+        title="Content (text, icons)"
+        subtitle={'These colors are used for text and icons.'}
+        colors={{
+            fillPrimaryRed: themeConfig.light.styleguideColors.contentPrimary,
+            fillPrimaryRedHover: themeConfig.light.styleguideColors.contentSecondary,
+            fillPrimaryRedClick: themeConfig.light.styleguideColors.contentTertiary,
+            fillPrimaryBlue: themeConfig.light.styleguideColors.contentQuaternary,
+            fillPrimaryBlueHover: themeConfig.light.styleguideColors.contentOnFill,
+            fillPrimaryBlueClick: themeConfig.light.styleguideColors.contentBlue,
+            fillSecondary: themeConfig.light.styleguideColors.contentRed,
+            fillSecondaryRedHover: themeConfig.light.styleguideColors.contentGreen,
+            fillSecondaryRedClick: themeConfig.light.styleguideColors.contentViolet,
+            fillSecondaryBlueHover: themeConfig.light.styleguideColors.contentYellow,
+            fillSecondaryBlueClick: themeConfig.light.styleguideColors.contentWarmGreen,
+            fillTertiary: themeConfig.light.styleguideColors.contentLightBlue,
+        }}
+    />
+</ColorPalette>
+
+# Dark
+
+<ColorPalette>
+    <ColorItem
+        title="Backgrounds"
+        subtitle={'These colors are used for backgrounds and containers.'}
+        colors={{
+            backgroundPrimary: themeConfig.dark.styleguideColors.backgroundPrimary,
+            backgroundSecondary: themeConfig.dark.styleguideColors.backgroundSecondary,
+            backgroundTertiary: themeConfig.dark.styleguideColors.backgroundTertiary,
+            backgroundQuaternary: themeConfig.dark.styleguideColors.backgroundQuaternary
+        }}
+    />
+    <ColorItem
+        title="Borders (lines, borders)"
+        subtitle={'These colors are used for borders and lines.'}
+        colors={{
+            borderPrimary: themeConfig.dark.styleguideColors.borderPrimary,
+            borderSecondary: themeConfig.dark.styleguideColors.borderPrimary,
+            borderRed: themeConfig.dark.styleguideColors.borderRed
+        }}
+    />
+    <ColorItem
+        title="Fills (buttons, dropdowns, inputs)"
+        subtitle={'These colors are used for buttons, dropdowns, and inputs.'}
+        colors={{
+            fillPrimaryRed: themeConfig.dark.styleguideColors.fillPrimaryRed,
+            fillPrimaryRedHover: themeConfig.dark.styleguideColors.fillPrimaryRedHover,
+            fillPrimaryRedClick: themeConfig.dark.styleguideColors.fillPrimaryRedClick,
+            fillPrimaryBlue: themeConfig.dark.styleguideColors.fillPrimaryBlue,
+            fillPrimaryBlueHover: themeConfig.dark.styleguideColors.fillPrimaryBlueHover,
+            fillPrimaryBlueClick: themeConfig.dark.styleguideColors.fillPrimaryBlueClick,
+            fillSecondary: themeConfig.dark.styleguideColors.fillSecondary,
+            fillSecondaryRedHover: themeConfig.dark.styleguideColors.fillSecondaryRedHover,
+            fillSecondaryRedClick: themeConfig.dark.styleguideColors.fillSecondaryRedClick,
+            fillSecondaryBlueHover: themeConfig.dark.styleguideColors.fillSecondaryBlueHover,
+            fillSecondaryBlueClick: themeConfig.dark.styleguideColors.fillSecondaryBlueClick,
+            fillTertiary: themeConfig.dark.styleguideColors.fillTertiary,
+            fillGreen: themeConfig.dark.styleguideColors.fillGreen,
+            fillVioletGradient: themeConfig.dark.styleguideColors.fillVioletGradient,
+            fillBlueGradient: themeConfig.dark.styleguideColors.fillBlueGradient,
+            fillLoadingInTable: themeConfig.dark.styleguideColors.fillLoadingInTable
+        }}
+    />
+    <ColorItem
+        title="Content (text, icons)"
+        subtitle={'These colors are used for text and icons.'}
+        colors={{
+            fillPrimaryRed: themeConfig.dark.styleguideColors.contentPrimary,
+            fillPrimaryRedHover: themeConfig.dark.styleguideColors.contentSecondary,
+            fillPrimaryRedClick: themeConfig.dark.styleguideColors.contentTertiary,
+            fillPrimaryBlue: themeConfig.dark.styleguideColors.contentQuaternary,
+            fillPrimaryBlueHover: themeConfig.dark.styleguideColors.contentOnFill,
+            fillPrimaryBlueClick: themeConfig.dark.styleguideColors.contentBlue,
+            fillSecondary: themeConfig.dark.styleguideColors.contentRed,
+            fillSecondaryRedHover: themeConfig.dark.styleguideColors.contentGreen,
+            fillSecondaryRedClick: themeConfig.dark.styleguideColors.contentViolet,
+            fillSecondaryBlueHover: themeConfig.dark.styleguideColors.contentYellow,
+            fillSecondaryBlueClick: themeConfig.dark.styleguideColors.contentWarmGreen,
+            fillTertiary: themeConfig.dark.styleguideColors.contentLightBlue,
+        }}
+    />
+</ColorPalette>

src/Typography.mdx

@@ -0,0 +1,161 @@
+import {Meta, Typeset} from '@storybook/addon-docs/blocks';
+import {themeConfig} from "./lib/index.js";
+
+<Meta title="Typography"/>
+
+export const typography = {
+    type: {
+        primary: themeConfig.light.typography.fontFamily.primary,
+        mono: themeConfig.light.typography.fontFamily.mono,
+    },
+    weight: {
+        light: 300,
+        regular: 400,
+        medium: 500,
+        semiBold: 600,
+        bold: 700,
+        extraBold: 800,
+    },
+    size: {
+        label: {
+            sm: 10,
+        },
+        caption: {
+            sm: 11,
+        },
+        body: {
+            xs: 13,
+            sm: 14,
+            md: 16,
+        },
+        subtitle: {
+            md: 18,
+            lg: 20,
+        },
+        header: {
+            sm: 24,
+            md: 28,
+            lg: 32,
+            xl: 40,
+            xxl: 46,
+        }
+    },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+# Typography
+
+<br/>
+___
+<br/>
+
+### **Font:** Inter
+
+**Weights:** light: 300, regular: 400, medium: 500, semiBold: 600, bold: 700, extraBold: 800
+
+### **Header:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.header.sm),
+        Number(typography.size.header.md),
+        Number(typography.size.header.lg),
+        Number(typography.size.header.xl),
+        Number(typography.size.header.xxl),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.primary}
+/>
+
+### **Subtitle:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.subtitle.md),
+        Number(typography.size.subtitle.lg),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.primary}
+/>
+
+### **Body:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.body.xs),
+        Number(typography.size.body.sm),
+        Number(typography.size.body.md),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.primary}
+/>
+
+### **Caption:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.caption.sm),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.primary}
+/>
+
+
+### **Label:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.label.sm),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.primary}
+/>
+
+
+<br/>
+___
+<br/>
+
+### **Font:** JetBrains Mono
+
+**Weights:** regular: 400, medium: 500, bold: 700,
+
+### **Header:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.header.sm),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.mono}
+/>
+
+### **Subtitle:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.subtitle.lg),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.mono}
+/>
+
+### **Body:**
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.body.xs),
+        Number(typography.size.body.sm),
+    ]}
+    fontWeight={typography.weight.medium}
+    sampleText={SampleText}
+    fontFamily={typography.type.mono}
+/>