Merge pull request #11 from jtiala/stack

Add Stack component
jtiala · Jul 31, 2023 · 590185d · 590185d
2 parents bc52a47 + 3e1439c
commit 590185d
Show file tree

Hide file tree

Showing 17 changed files with 562 additions and 394 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ dist
 out
 build
 *.tsbuildinfo
+vite.config.ts.timestamp-*
 storybook-static
 reports
 .next

diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts
@@ -11,6 +11,7 @@ const preview: Preview = {
           "Typography",
           "Navigation",
           "Form",
+          "Layout",
         ],
       },
     },

diff --git a/apps/docs/stories/Layout/Stack.stories.tsx b/apps/docs/stories/Layout/Stack.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from "@themeless-ui/react";
+
+const meta = {
+  title: "Layout/Stack",
+  component: Stack,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const children = [
+  <div key="1">1</div>,
+  <div key="2">2</div>,
+  <div key="3">3</div>,
+];
+
+export const Vertical: Story = {
+  args: {
+    direction: "vertical",
+    children,
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    direction: "horizontal",
+    children,
+  },
+};
diff --git a/apps/nextjs-example/app/about/page.tsx b/apps/nextjs-example/app/about/page.tsx
@@ -1,17 +1,20 @@
-import { Heading, Paragraph } from "@themeless-ui/react";
+import { Heading, Paragraph, Stack } from "@themeless-ui/react";
 
 export default async function About() {
   return (
     <article>
-      <Heading level={1}>About</Heading>
-      <Paragraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar
-        quam ipsum, at placerat quam eleifend in. Nulla gravida eros eu vehicula
-        laoreet. Duis vitae consequat ante. Vestibulum quis semper neque.
-        Pellentesque et ante ut nisi posuere dictum. Aenean dictum ligula id
-        velit cursus, in tincidunt felis faucibus. Class aptent taciti sociosqu
-        ad litora torquent per conubia nostra, per inceptos himenaeos.
-      </Paragraph>
+      <Stack>
+        <Heading level={1}>About</Heading>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar
+          quam ipsum, at placerat quam eleifend in. Nulla gravida eros eu
+          vehicula laoreet. Duis vitae consequat ante. Vestibulum quis semper
+          neque. Pellentesque et ante ut nisi posuere dictum. Aenean dictum
+          ligula id velit cursus, in tincidunt felis faucibus. Class aptent
+          taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+          himenaeos.
+        </Paragraph>
+      </Stack>
     </article>
   );
 }
diff --git a/apps/nextjs-example/app/layout.tsx b/apps/nextjs-example/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Heading, Text } from "@themeless-ui/react";
+import { Anchor, Heading, Stack, Text } from "@themeless-ui/react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import "./index.css";
@@ -21,36 +21,44 @@ export default function RootLayout({
             <header>
               <Heading level={2}>ThemelessUI Next.js Example App</Heading>
               <nav>
-                <Text>
-                  <Link href="/" passHref legacyBehavior>
-                    <Anchor>Home</Anchor>
-                  </Link>
-                  {" | "}
-                  <Link href="/about" passHref legacyBehavior>
-                    <Anchor>About</Anchor>
-                  </Link>
-                </Text>
+                <Stack direction="horizontal">
+                  <Text>
+                    <Link href="/" passHref legacyBehavior>
+                      <Anchor>Home</Anchor>
+                    </Link>
+                  </Text>
+                  <Text>&nbsp;|&nbsp;</Text>
+                  <Text>
+                    <Link href="/about" passHref legacyBehavior>
+                      <Anchor>About</Anchor>
+                    </Link>
+                  </Text>
+                </Stack>
               </nav>
             </header>
             <main>{children}</main>
             <footer>
-              <Text type="small">
-                <Link
-                  href="https://github.com/jtiala/themeless-ui"
-                  passHref
-                  legacyBehavior
-                >
-                  <Anchor target="_blank">GitHub</Anchor>
-                </Link>
-                {" | "}
-                <Link
-                  href="https://jtiala.github.io/themeless-ui"
-                  passHref
-                  legacyBehavior
-                >
-                  <Anchor target="_blank">Storybook</Anchor>
-                </Link>
-              </Text>
+              <Stack direction="horizontal">
+                <Text type="small">
+                  <Link
+                    href="https://github.com/jtiala/themeless-ui"
+                    passHref
+                    legacyBehavior
+                  >
+                    <Anchor target="_blank">GitHub</Anchor>
+                  </Link>
+                </Text>
+                <Text type="small">&nbsp;|&nbsp;</Text>
+                <Text type="small">
+                  <Link
+                    href="https://jtiala.github.io/themeless-ui"
+                    passHref
+                    legacyBehavior
+                  >
+                    <Anchor target="_blank">Storybook</Anchor>
+                  </Link>
+                </Text>
+              </Stack>
             </footer>
           </div>
         </div>

diff --git a/apps/nextjs-example/app/page.tsx b/apps/nextjs-example/app/page.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Heading, List, Text } from "@themeless-ui/react";
+import { Anchor, Heading, List, Stack, Text } from "@themeless-ui/react";
 import { allPosts } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
 import Link from "next/link";
@@ -10,19 +10,21 @@ export default async function Home() {
 
   return (
     <article>
-      <Heading level={1}>All posts</Heading>
-      {posts.length === 0 && <Text>No posts.</Text>}
-      {posts.length > 0 && (
-        <List>
-          {posts.map((post) => (
-            <List.Item key={post._id}>
-              <Link href={post.url} passHref legacyBehavior>
-                <Anchor>{post.title}</Anchor>
-              </Link>
-            </List.Item>
-          ))}
-        </List>
-      )}
+      <Stack>
+        <Heading level={1}>All posts</Heading>
+        {posts.length === 0 && <Text>No posts.</Text>}
+        {posts.length > 0 && (
+          <List>
+            {posts.map((post) => (
+              <List.Item key={post._id}>
+                <Link href={post.url} passHref legacyBehavior>
+                  <Anchor>{post.title}</Anchor>
+                </Link>
+              </List.Item>
+            ))}
+          </List>
+        )}
+      </Stack>
     </article>
   );
 }
diff --git a/apps/nextjs-example/app/posts/[slug]/page.tsx b/apps/nextjs-example/app/posts/[slug]/page.tsx
@@ -1,5 +1,5 @@
 import { mdxComponents } from "@/utils/mdx";
-import { Heading } from "@themeless-ui/react";
+import { Heading, Stack } from "@themeless-ui/react";
 import { allPosts } from "contentlayer/generated";
 import { format, parseISO } from "date-fns";
 import { getMDXComponent } from "next-contentlayer/hooks";
@@ -29,12 +29,14 @@ export default async function Post({ params }: { params: { slug: string } }) {
 
   return (
     <article>
-      <Heading level={1}>{post.title}</Heading>
-      {/* TODO: Add `time` type to <Text> and use it here */}
-      <time dateTime={post.date}>
-        {format(parseISO(post.date), "LLLL d, yyyy")}
-      </time>
-      <Content components={mdxComponents} />
+      <Stack>
+        <Heading level={1}>{post.title}</Heading>
+        {/* TODO: Add `time` type to <Text> and use it here */}
+        <time dateTime={post.date}>
+          {format(parseISO(post.date), "LLLL d, yyyy")}
+        </time>
+        <Content components={mdxComponents} />
+      </Stack>
     </article>
   );
 }
diff --git a/apps/react-example/src/App.tsx b/apps/react-example/src/App.tsx
@@ -1,4 +1,4 @@
-import { Heading, Text } from "@themeless-ui/react";
+import { Anchor, Heading, Stack, Text } from "@themeless-ui/react";
 import { TypographyExample } from "./examples/Typography/TypographyExample";
 
 export function App() {
@@ -11,23 +11,27 @@ export function App() {
         <TypographyExample />
       </main>
       <footer>
-        <Text>
-          <a
-            href="https://github.com/jtiala/themeless-ui"
-            target="_blank"
-            rel="noreferrer"
-          >
-            GitHub
-          </a>
-          {" | "}
-          <a
-            href="https://jtiala.github.io/themeless-ui"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Storybook
-          </a>
-        </Text>
+        <Stack direction="horizontal">
+          <Stack direction="horizontal">
+            <Text type="small">
+              <Anchor
+                href="https://github.com/jtiala/themeless-ui"
+                target="_blank"
+              >
+                GitHub
+              </Anchor>
+            </Text>
+            <Text type="small">&nbsp;|&nbsp;</Text>
+            <Text type="small">
+              <Anchor
+                href="https://jtiala.github.io/themeless-ui"
+                target="_blank"
+              >
+                Storybook
+              </Anchor>
+            </Text>
+          </Stack>
+        </Stack>
       </footer>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ dist @@
     out
     build
     *.tsbuildinfo
+    vite.config.ts.timestamp-*
     storybook-static
     reports
     .next
@@ Expand Down @@