Add UI monorepo package

.eslintrc.json

@@ -96,5 +96,16 @@
         "unicorn/filename-case": "off",
         "max-depth": "off"
     },
+    "overrides": [
+        {
+            "files": ["packages/**/*"],
+            "rules": {
+                "semi": [
+                    "error",
+                    "always"
+                ]
+            }
+        }
+    ],
     "root": true
 }

package.json

@@ -15,7 +15,7 @@
     "test-mc-server": "tsx cypress/minecraft-server.mjs",
     "lint": "eslint \"{src,cypress}/**/*.{ts,js,jsx,tsx}\"",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build && node scripts/build.js moveStorybookFiles",
+    "build-storybook": "storybook build -o dist/storybook && node scripts/build.js moveStorybookFiles",
     "start-experiments": "vite --config experiments/vite.config.ts",
     "watch-worker": "node prismarine-viewer/buildWorker.mjs -w"
   },
@@ -29,6 +29,7 @@
   "dependencies": {
     "@dimaka/interface": "0.0.3-alpha.0",
     "@floating-ui/react": "^0.26.1",
+    "@prismarine-web-client": "link:packages/ui",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/wicg-file-system-access": "^2023.10.2",

packages/ui/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "semi": true,
+  "quoteProps": "consistent"
+}

packages/ui/.storybook/main.ts

@@ -0,0 +1,19 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)', '../src/**/*.mdx'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+
+export default config;

packages/ui/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

packages/ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@prismarine-web-client/ui",
+  "version": "1.0.0",
+  "main": "./src/index.ts",
+  "scripts": {
+    "storybook:start": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "------------------------------------------------------": "",
+    "prettier:fix": "prettier --write './**/*.{ts,tsx}'",
+    "prettier:check": "prettier --check './**/*.{ts,tsx}'"
+  },
+  "peerDependencies": {
+    "classnames": "^2.5.1",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react-dom": "^18.2.14",
+    "classnames": "^2.5.1",
+    "prettier": "^3.2.1",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.6",
+    "vite": "^4.5.0"
+  }
+}

packages/ui/src/components/AppRoot/AppRoot.module.css

@@ -0,0 +1,6 @@
+.root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  font-family: minecraft, mojangles, monospace;
+}

packages/ui/src/components/AppRoot/AppRoot.tsx

@@ -0,0 +1,10 @@
+import classNames from 'classnames';
+import { HTMLAttributes } from 'react';
+
+import styles from './AppRoot.module.css';
+
+export interface AppRootProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const AppRoot = ({ className, ...restProps }: AppRootProps) => {
+  return <div className={classNames(styles.root, className)} {...restProps} />;
+};

packages/ui/src/components/AppRoot/index.ts

@@ -0,0 +1 @@
+export { AppRoot, type AppRootProps } from './AppRoot';

packages/ui/src/components/RootComponent/RootComponent.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { AllHTMLAttributes } from 'react';
+
+import { HasComponent, HasRootRef } from '../../types';
+
+export interface RootComponentProps<T> extends AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
+  baseClassName?: string | false;
+}
+
+export const RootComponent = <T,>({
+  Component = 'div',
+  getRootRef,
+  baseClassName,
+  className,
+  ...restProps
+}: RootComponentProps<T>) => {
+  return <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />;
+};

packages/ui/src/components/RootComponent/index.ts

@@ -0,0 +1 @@
+export * from './RootComponent';

packages/ui/src/components/Typography/Text/Text.module.css

@@ -0,0 +1,3 @@
+.root {
+  font-size: var(--ui_font_size_text);
+}

packages/ui/src/components/Typography/Text/Text.tsx

@@ -0,0 +1,10 @@
+import classNames from 'classnames';
+import { Typography, TypographyProps } from '../Typography';
+
+import styles from './Text.module.css';
+
+export type TextProps = TypographyProps;
+
+export const Text = ({ Component = 'span', className, ...restProps }: TextProps) => {
+  return <Typography Component={Component} className={classNames(styles.root, className)} {...restProps} />;
+};

packages/ui/src/components/Typography/Text/index.ts

@@ -0,0 +1 @@
+export { Text, type TextProps } from './Text';