feat: add comprehensive design system package

.storybook/main.js

@@ -0,0 +1,41 @@
+/**
+ * Storybook Configuration for SubTrackr Design System
+ * 
+ * Location: .storybook/main.js
+ * Run: npm run storybook
+ */
+
+module.exports = {
+  stories: [
+    '../src/design-system/stories/**/*.stories.{ts,tsx}',
+    '../src/**/*.stories.{ts,tsx}',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-ondevice-actions',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-controls',
+  ],
+  framework: {
+    name: '@storybook/react-native',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+    defaultName: 'Documentation',
+  },
+  typescript: {
+    check: true,
+    checkOptions: {},
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesAsTypes: true,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: (prop: any) => {
+        if (prop.parent) {
+          return !prop.parent.fileName.includes('node_modules');
+        }
+        return true;
+      },
+    },
+  },
+};

.storybook/preview.js

@@ -0,0 +1,39 @@
+/**
+ * Storybook Preview Configuration
+ * 
+ * Location: .storybook/preview.js
+ */
+
+import * as React from 'react';
+import { View, SafeAreaView } from 'react-native';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    default: 'dark',
+    values: [
+      { name: 'dark', value: '#0f172a' },
+      { name: 'light', value: '#f8fafc' },
+      { name: 'high-contrast', value: '#000000' },
+    ],
+  },
+  layout: 'centered',
+};
+
+export const decorators = [
+  (Story) => (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0f172a' }}>
+      <View style={{ flex: 1, padding: 16, justifyContent: 'center' }}>
+        <Story />
+      </View>
+    </SafeAreaView>
+  ),
+];
+
+export const tags = ['autodocs'];