refactor: migrate existing sandbox to storybook

.storybook/preview.tsx

@@ -6,11 +6,10 @@ const preview: Preview = {
 
   parameters: {
     backgrounds: {
-      default: 'plain',
+      default: 'dark',
       values: [
-        { name: 'plain', value: 'white' },
-        { name: 'warm', value: 'hotpink' },
-        { name: 'cool', value: 'deepskyblue' },
+        { name: 'dark', value: '#1E1E1E' },
+        { name: 'light', value: '#FFFFFF' },
       ],
     },
     actions: { argTypesRegex: '^on[A-Z].*' },

package.json

@@ -43,8 +43,8 @@
     "//// QUALITY ////": "",
     "lint:ts": "yarn tsc",
     "lint": "eslint ./ --ext .js,.ts,.tsx,.json --fix --ignore-path .gitignore",
-    "prettify": "yarn prettier --write './**/*.{js,ts,tsx}'",
-    "pretty:check": "yarn prettier --check './**/*.{js,ts,tsx}'",
+    "prettify": "yarn prettier --write './**/*.{js,ts,tsx}' '!.storybook/storybook.requires.ts'",
+    "pretty:check": "yarn prettier --check './**/*.{js,ts,tsx}' '!.storybook/storybook.requires.ts'",
     "//// UTILITIES ////": "",
     "codegen": "graphql-codegen --config codegen.ts",
     "image:add": "ts-node -T ./scripts/importImages/index.ts",
@@ -87,7 +87,7 @@
     "expo-linking": "~6.3.1",
     "expo-localization": "~15.0.3",
     "expo-network": "~6.0.1",
-    "expo-router": "~3.5.23",
+    "expo-router": "~3.5.24",
     "expo-secure-store": "~13.0.2",
     "expo-splash-screen": "~0.27.6",
     "expo-status-bar": "~1.12.1",

src/core/providers/Providers.tsx

@@ -12,7 +12,6 @@ import { persistOptions, queryClient } from '$core/api/queryClient';
 import { FeatureFlagsProvider } from '$core/featureFlags';
 import { ErrorMonitoring } from '$core/monitoring';
 import { theme } from '$core/theme';
-import { Sandbox } from '$features/sandbox';
 import { FullscreenErrorBoundary } from '$shared/components/FullscreenErrorBoundary';
 import { Splashscreen } from '$shared/components/splashscreen';
 
@@ -75,9 +74,6 @@ const providers = [
   {
     component: KeyboardProvider,
   },
-  {
-    component: Sandbox,
-  },
   {
     component: FeatureFlagsProvider,
   },

src/core/theme/stories/colors.stories.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable filename-rules/match */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { ScrollView, View } from 'react-native';
+
+import { Box, Text } from '$shared/uiKit/primitives';
+
+import type { Colors as ThemeColors } from '../colors';
+import { theme } from '../theme';
+
+const meta = {
+  title: 'Theme/Colors',
+  component: View,
+  render: () => (
+    <ScrollView>
+      <Box p="spacing_16">
+        {(Object.keys(theme.colors) as ThemeColors[]).map((color) => (
+          <Box key={color} alignItems="center" mb="spacing_24">
+            <Text pb="spacing_8">{color}</Text>
+
+            <Box
+              aspectRatio={1}
+              bg={color}
+              borderRadius="radius_8"
+              width={100}
+            />
+          </Box>
+        ))}
+      </Box>
+    </ScrollView>
+  ),
+} satisfies Meta<typeof View>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Colors: Story = {};

src/core/theme/stories/fonts.stories.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable filename-rules/match */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import { Box, Text } from '$shared/uiKit/primitives';
+
+import type { FontSizes as ThemeFontSizes } from '../fonts';
+import { fontSizes } from '../fonts';
+
+const meta = {
+  title: 'Theme/FontSizes',
+  component: View,
+  render: () => (
+    <Box p="spacing_16">
+      {(Object.keys(fontSizes) as ThemeFontSizes[]).map((size) => (
+        <Text key={size} mb="spacing_24" variant={size}>
+          {`This is a ${size} text`}
+        </Text>
+      ))}
+    </Box>
+  ),
+} satisfies Meta<typeof View>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FontSizes: Story = {};

src/core/theme/stories/radius.stories.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable filename-rules/match */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import { Box, Text } from '$shared/uiKit/primitives';
+
+import type { BorderRadii } from '../radius';
+import { theme } from '../theme';
+
+const meta = {
+  title: 'Theme/Radiuses',
+  component: View,
+  render: () => (
+    <Box p="spacing_16">
+      {(Object.keys(theme.borderRadii) as BorderRadii[]).map((radius) => (
+        <Box key={radius} alignItems="center" mb="spacing_24">
+          <Text mb="spacing_8">{radius}</Text>
+
+          <Box bg="bg_focus" borderRadius={radius} height={100} width={100} />
+        </Box>
+      ))}
+    </Box>
+  ),
+} satisfies Meta<typeof View>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Radiuses: Story = {};

src/core/theme/stories/spacing.stories.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable filename-rules/match */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment } from 'react';
+import { View } from 'react-native';
+
+import { Box, Text } from '$shared/uiKit/primitives';
+
+import { spacing, type Spacing as ThemeSpacing } from '../spacing';
+import { theme } from '../theme';
+
+const meta = {
+  title: 'Theme/Spacing',
+  component: View,
+  render: () => (
+    <Box p="spacing_16">
+      {(Object.keys(theme.spacing) as ThemeSpacing[]).map((space) => (
+        <Fragment key={space}>
+          <Text mb="spacing_8">{space}</Text>
+
+          <Box
+            bg="bg_focus"
+            height={spacing[space]}
+            mb="spacing_32"
+            width="100%"
+          />
+        </Fragment>
+      ))}
+    </Box>
+  ),
+} satisfies Meta<typeof View>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Spacing: Story = {};