Implement new about page design

code/ui/.storybook/main.ts

@@ -50,6 +50,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
+    '@storybook/addon-designs',
   ],
   framework: {
     name: '@storybook/react-vite',

code/ui/components/src/clipboard/ClipboardCode.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { color, styled, typography } from '@storybook/theming';
+
+const Code = styled.pre`
+  line-height: 18px;
+  padding: 11px 1rem;
+  white-space: pre-wrap;
+  background: rgba(0, 0, 0, 0.05);
+  color: ${color.darkest};
+  border-radius: 3px;
+  margin: 1rem 0;
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  font-family: ${typography.fonts.mono};
+  font-size: ${typography.size.s2 - 1}px;
+`;
+
+interface ClipboardCodeProps {
+  code: string;
+}
+
+export const ClipboardCode = ({ code, ...props }: ClipboardCodeProps) => (
+  <Code id="clipboard-code" {...props}>
+    {code}
+  </Code>
+);

code/ui/components/src/index.ts

@@ -26,7 +26,6 @@ export { Span } from './typography/elements/Span';
 export { Table } from './typography/elements/Table';
 export { TT } from './typography/elements/TT';
 export { UL } from './typography/elements/UL';
-
 export { Badge } from './Badge/Badge';
 
 // Typography
@@ -85,6 +84,8 @@ export * from './typography/ResetWrapper';
 
 export { withReset, codeCommon } from './typography/lib/common';
 
+export { ClipboardCode } from './clipboard/ClipboardCode';
+
 // eslint-disable-next-line prefer-destructuring
 export const components = typography.components;
 

code/ui/manager/package.json

@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@storybook/addon-designs": "^7.0.0",
     "@storybook/addons": "7.1.0-beta.1",
     "@storybook/api": "7.1.0-beta.1",
     "@storybook/channel-postmessage": "7.1.0-beta.1",

code/ui/manager/src/settings/about.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { AboutScreen } from './about';
+
+const meta = {
+  component: AboutScreen,
+  title: 'Settings/AboutScreen',
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          position: 'relative',
+          height: '100vh',
+          width: '100vw',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AboutScreen>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    current: {
+      version: '7.0.1',
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ur4kydUbRqdDyfoZWzdiIw/Storybook-app?type=design&node-id=9564-120444&mode=design&t=0TPINZFpwgFQFQeX-4',
+    },
+  },
+};