Implements storybook (#31)

.gitignore

@@ -1 +1,3 @@
 node_modules
+
+*storybook.log

.prettierignore

@@ -7,3 +7,4 @@ pnpm-lock.yaml
 *.css
 *.jsx
 *.json
+.github/PULL_REQUEST_TEMPLATE.md

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import sass from 'sass';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    {
+      name: 'storybook-addon-sass-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: sass,
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react';
+import 'tgui-styles';
+import '../stories/assets/fonts.css';
+import '../stories/assets/all.min.css';
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      values: [{ name: 'dark', value: 'hsl(0, 0%, 14%)' }],
+      default: 'dark',
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["node_modules", "dist", "styles/**/*.d.ts"]
+    "ignore": ["node_modules", "dist", "stories/assets"]
   },
   "formatter": {
     "enabled": true,

package.json

@@ -2,14 +2,8 @@
   "name": "tgui-core",
   "version": "1.3.0",
   "description": "TGUI core component library",
-  "keywords": [
-    "TGUI",
-    "library",
-    "typescript"
-  ],
-  "files": [
-    "dist"
-  ],
+  "keywords": ["TGUI", "library", "typescript"],
+  "files": ["dist"],
   "exports": {
     "./components": {
       "import": "./dist/components/index.js",
@@ -28,14 +22,24 @@
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "lint": "biome check lib",
-    "lint:fix": "prettier . --write && biome check . --fix"
+    "lint:fix": "prettier . --write && biome check . --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "author": "jlsnow301",
   "license": "MIT",
   "type": "module",
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@chromatic-com/storybook": "3.2.2",
     "@popperjs/core": "^2.11.8",
+    "@storybook/addon-essentials": "8.4.4",
+    "@storybook/addon-interactions": "8.4.4",
+    "@storybook/addon-onboarding": "8.4.4",
+    "@storybook/blocks": "8.4.4",
+    "@storybook/react": "8.4.4",
+    "@storybook/react-vite": "8.4.4",
+    "@storybook/test": "8.4.4",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -44,6 +48,10 @@
     "glob": "^11.0.0",
     "prettier": "^3.3.3",
     "react-popper": "^2.3.0",
+    "sass": "^1.81.0",
+    "storybook": "8.4.4",
+    "storybook-addon-sass-postcss": "^0.3.2",
+    "tgui-styles": "^0.0.8",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0"