no message

Author: archibara

src/components/Gallery/index.story.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Gallery as Component } from './index.tsx';
+
+const meta = {
+  title: 'components',
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Gallery: Story = {
+  args: {
+    items: new Array(20).fill(null).map((_, i) => ({
+      src: `https://cataas.com/cat?key=${i}`,
+      label: `Placeholder ${i}`,
+    }))
+  }
+};

src/components/Gallery/index.tsx

@@ -0,0 +1,13 @@
+export type GalleryProps = {
+  items: { src: string, label: string }[];
+};
+
+export const Gallery = (props: GalleryProps) => {
+  return (
+    <div className={'grid grid-flow-col'}>
+      {props.items.map((item, idx) => (
+        <img className={'h-auto max-h-20 rounded-lg'} key={idx} src={item.src} alt={item.label}></img>
+      ))}
+    </div>
+  );
+}

src/components/PageTemplate/index.tsx

@@ -1,15 +1,18 @@
 import { ComponentType, PropsWithChildren } from 'react';
 import { Header } from 'src/components/Header';
-import { SideBar } from 'src/uikit/SideBar';
+import { SideBar } from 'src/components/SideBar';
 
 export const PageTemplate: ComponentType<PropsWithChildren> = ({ children }) => {
   return (
-    <main className="min-h-screen bg-gray-100 text-xs">
+    <main className="min-h-screen bg-gray-100">
       <Header/>
-      <SideBar/>
-      <div className="w-full  overflow-y-auto">
-        {children}
+      <div className="flex">
+        <SideBar/>
+        <div>
+          {children}
+        </div>
       </div>
+
     </main>
   )
 }

src/components/Post/index.story.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Post as Component } from './index.tsx';
+
+const meta = {
+  title: 'components',
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Post: Story = {
+  args: {}
+};

src/components/Post/index.tsx

@@ -0,0 +1,8 @@
+export const Post = () => (<div>
+  <div>Author</div>
+  <div>Date</div>
+  <div>Text</div>
+  <button>like</button>
+  <button>Share</button>
+  <button>Save</button>
+</div>)

src/components/PostForm/index.story.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PostForm as Component } from './index.tsx';
+
+const meta = {
+  title: 'components',
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PostForm: Story = {
+  args: {}
+};

src/components/PostForm/index.tsx

@@ -0,0 +1,4 @@
+export const PostForm = () => (<div>
+  what's new?<input></input>
+  <button>submit</button>
+</div>)

src/components/ProfileHeader/index.story.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProfileHeader as Component } from './index.tsx';
+
+const meta = {
+  title: 'components',
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ProfileHeader: Story = {
+  args: {
+    name: 'John Doe',
+    isOnline: true,
+    status: 'Looking for a job',
+  }
+};

src/components/ProfileHeader/index.tsx

@@ -0,0 +1,19 @@
+import { Typography } from 'src/uikit/Typography';
+
+export type ProfileHeaderProps = {
+  isOnline: boolean;
+  name: string;
+  status?: string;
+};
+
+export const ProfileHeader = (props: ProfileHeaderProps) => {
+  return (
+    <div>
+      <div className={'flex justify-between'}>
+        <Typography variant={'h6'}>{props.name}</Typography>
+        <Typography className={'text-end'} variant={'span'}>{props.isOnline ? 'online' : 'offline'}</Typography>
+      </div>
+      <Typography variant={'span'}>{props.status}</Typography>
+    </div>
+  )
+}

src/components/ProfileInfo/index.story.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProfileInfo as Component } from './index.tsx';
+
+const meta = {
+  title: 'components',
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ProfileInfo: Story = {
+  args: {
+    dob: new Date(0),
+    location: {
+      city: 'Carretera Tulum',
+      coords: {
+        lat: 20.395914,
+        long: -87.312324
+      }
+    }
+  }
+};

src/components/ProfileInfo/index.tsx

@@ -0,0 +1,35 @@
+import { Typography } from 'src/uikit/Typography';
+
+export type ProfileInfoProps = {
+  dob: Date;
+  location: {
+    city: string;
+    coords?: {
+      lat: number;
+      long: number;
+    }
+  };
+};
+
+export const ProfileInfo = (props: ProfileInfoProps) => {
+  return (<ul>
+    <li>
+      DOB: {props.dob.getUTCFullYear()}
+    </li>
+    <li>
+      City: {props.location.city}
+    </li>
+    {props.location.coords && (
+      <li>
+        <Typography
+          as={'a'}
+          href={`https://maps.google.com/?q=${props.location.coords.lat},${props.location.coords.long}`}
+          target={'_blank'}
+          rel={'noreferrer noopener'}
+        >
+          Location
+        </Typography>
+      </li>
+    )}
+  </ul>)
+}

src/uikit/SideBar/index.story.ts src/components/SideBar/index.story.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SideBar as Component } from './index.tsx';
 
 const meta = {
-  title: 'uikit',
+  title: 'components',
   component: Component,
 } satisfies Meta<typeof Component>;
 

src/components/SideBar/index.tsx

@@ -0,0 +1,24 @@
+import { ComponentType, PropsWithChildren } from 'react';
+import { Clickable } from 'src/uikit/Clickable';
+
+const Li: ComponentType<PropsWithChildren> = ({ children }) => {
+  return (
+    <li className="bg-gray-50 mt-0.5 mr-0.5 rounded">
+      <Clickable className="px-4 py-2">
+        {children}
+      </Clickable>
+    </li>
+  )
+}
+
+export const SideBar = () => {
+  return (
+    <div className="w-60 bg-gray-300">
+      <ul>
+        <Li>My Page</Li>
+        <Li>Contacts</Li>
+        <Li>Messages</Li>
+      </ul>
+    </div>
+  )
+}

src/components/Statistic/index.story.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Statistic as Component } from './index.tsx';
+
+const meta = {
+  title: 'components',
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Statistic: Story = {
+  args: {
+    friends: 30,
+    followers: 100,
+    photos: 150,
+  }
+};

src/components/Statistic/index.tsx

@@ -0,0 +1,25 @@
+import { Typography } from 'src/uikit/Typography';
+
+export type StatisticProps = {
+  friends: number;
+  followers: number;
+  photos: number;
+}
+
+const Item = (props: { label: string, value: number }) => {
+  if (!props.value) return null
+  return (
+    <div className={'flex flex-col'}>
+      <Typography className={'text-center'}>{props.value}</Typography>
+      <Typography className={'text-center'}>{props.label}</Typography>
+    </div>
+  )
+}
+
+export const Statistic = (props: StatisticProps) => {
+  return (<div className={'flex flex-row justify-around text-slate-400'}>
+    <Item label={'Friends'} value={props.friends}/>
+    <Item label={'Followers'} value={props.followers}/>
+    <Item label={'photos'} value={props.photos}/>
+  </div>)
+}

src/components/__Template__/index.story.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { __Template__ as Component } from './index.tsx';
+
+const meta = {
+  title: 'components',
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const __Template__: Story = {
+  args: {}
+};

src/components/__Template__/index.tsx

@@ -0,0 +1,3 @@
+export const __Template__ = () => {
+  return null;
+}