chore: create a new package for mobile components

.gitignore

@@ -96,3 +96,12 @@ yarn-error.log*
 
 # asdf version manager
 .tool-versions
+
+# storybook
+*storybook.log
+
+# output
+*.log
+.DS_Store
+.cache
+coverage

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2
+}

packages/mobile/.nvmrc

@@ -0,0 +1 @@
+v20.17.0

packages/mobile/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+}
+export default config

packages/mobile/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,600" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet" />

packages/mobile/.storybook/preview.tsx

@@ -0,0 +1,58 @@
+import type { Preview } from "@storybook/react"
+import preset from "../src/theme/tailwind-preset"
+import "../src/theme/main.css"
+import NDSProvider from "../src/providers/nds-provider"
+
+const VIEW_PORTS = {
+  small: {
+    name: "Small",
+    styles: {
+      width: preset.theme.screens.sm,
+      height: "100%",
+    },
+  },
+  medium: {
+    name: "Medium",
+    styles: {
+      width: preset.theme.screens.md,
+      height: "100%",
+    },
+  },
+  large: {
+    name: "Large",
+    styles: {
+      width: preset.theme.screens.lg,
+      height: "100%",
+    },
+  },
+  extraLarge: {
+    name: "Extra Large",
+    styles: {
+      width: preset.theme.screens.xl,
+      height: "100%",
+    },
+  },
+}
+
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: VIEW_PORTS,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <NDSProvider>
+        <Story />
+      </NDSProvider>
+    ),
+  ],
+}
+
+export default preview