storybook: add tsconfig and tsc command

apps/storybook/package.json

@@ -6,7 +6,8 @@
     "dev": "start-storybook -p 6001",
     "build": "build-storybook --docs",
     "preview-storybook": "serve storybook-static",
-    "clean": "rm -rf .turbo && rm -rf node_modules"
+    "clean": "rm -rf .turbo && rm -rf node_modules",
+    "tsc": "tsc"
   },
   "dependencies": {
     "@tih/ui": "*",

apps/storybook/stories/dialog.stories.tsx

@@ -12,7 +12,10 @@ export default {
   },
 } as ComponentMeta<typeof Dialog>;
 
-export function Basic({ children, title }) {
+export function Basic({
+  children,
+  title,
+}: Pick<React.ComponentProps<typeof Dialog>, 'children' | 'title'>) {
   const [isShown, setIsShown] = useState(false);
 
   return (
@@ -43,14 +46,3 @@ export function Basic({ children, title }) {
     </div>
   );
 }
-
-Basic.args = {
-  title: 'Lorem ipsum, dolor sit amet',
-  children: (
-    <div>
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam
-      laudantium explicabo pariatur iste dolorem animi vitae error totam. At
-      sapiente aliquam accusamus facere veritatis.
-    </div>
-  ),
-};

apps/storybook/stories/dropdown-menu.stories.tsx

@@ -35,7 +35,14 @@ export default {
   },
 } as ComponentMeta<typeof DropdownMenu>;
 
-export function Basic({ align, label, size }) {
+export function Basic({
+  align,
+  label,
+  size,
+}: Pick<
+  React.ComponentProps<typeof DropdownMenu>,
+  'align' | 'label' | 'size'
+>) {
   const menuItems = [
     {
       label: 'Apple',

apps/storybook/stories/select.stories.tsx

@@ -24,7 +24,15 @@ export default {
   },
 } as ComponentMeta<typeof Select>;
 
-export function Basic({ display, isLabelHidden, label, name }) {
+export function Basic({
+  display,
+  isLabelHidden,
+  label,
+  name,
+}: Pick<
+  React.ComponentProps<typeof Select>,
+  'display' | 'isLabelHidden' | 'label' | 'name'
+>) {
   const [value, setValue] = useState('apple');
 
   return (

apps/storybook/stories/slide-out.stories.tsx

@@ -23,7 +23,15 @@ export default {
   },
 } as ComponentMeta<typeof SlideOut>;
 
-export function Basic({ children, enterFrom, size, title }) {
+export function Basic({
+  children,
+  enterFrom,
+  size,
+  title,
+}: Pick<
+  React.ComponentProps<typeof SlideOut>,
+  'children' | 'enterFrom' | 'size' | 'title'
+>) {
   const [isShown, setIsShown] = useState(false);
 
   return (

apps/storybook/stories/tabs.stories.tsx

@@ -12,7 +12,9 @@ export default {
   },
 } as ComponentMeta<typeof Tabs>;
 
-export function Basic({ label }) {
+export function Basic({
+  label,
+}: Pick<React.ComponentProps<typeof Tabs>, 'label'>) {
   const [value, setValue] = useState('apple');
 
   return (

apps/storybook/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "exclude": ["node_modules"],
+  "extends": "@tih/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "rootDir": "stories",
+    "outDir": "dist",
+    "baseUrl": "./stories",
+    "paths": {
+      "~/*": ["*"]
+    }
+  },
+  "include": ["stories"]
+}