From 926a89c238233276072c3f105c8d356e3b840afb Mon Sep 17 00:00:00 2001
From: Rishabh Mishra <me@rsbh.dev>
Date: Tue, 19 Nov 2024 14:26:48 +0530
Subject: [PATCH] feat: add `Flex` and `Text` components (#176)

* feat: add text component

* feat: add flex component

* feat: export text and flex component

* chore: deprecate old flex and text component

* doc: update text component docs

* docs: add docs for flex component
---
 .../content/primitives/components/flex.mdx    |  56 +++++++
 .../content/primitives/components/text.mdx    |  64 ++++++--
 apps/www/utils/routes.ts                      |  43 +++++-
 packages/raystack/flex/flex.tsx               |   3 +
 packages/raystack/text/text.tsx               |   3 +
 .../v1/components/flex/flex.module.css        |  88 +++++++++++
 packages/raystack/v1/components/flex/flex.tsx |  65 ++++++++
 .../raystack/v1/components/flex/index.tsx     |   1 +
 .../raystack/v1/components/text/index.tsx     |   1 +
 .../v1/components/text/text.module.css        | 139 ++++++++++++++++++
 packages/raystack/v1/components/text/text.tsx |  68 +++++++++
 packages/raystack/v1/index.tsx                |   2 +
 12 files changed, 510 insertions(+), 23 deletions(-)
 create mode 100644 apps/www/content/primitives/components/flex.mdx
 create mode 100644 packages/raystack/v1/components/flex/flex.module.css
 create mode 100644 packages/raystack/v1/components/flex/flex.tsx
 create mode 100644 packages/raystack/v1/components/flex/index.tsx
 create mode 100644 packages/raystack/v1/components/text/index.tsx
 create mode 100644 packages/raystack/v1/components/text/text.module.css
 create mode 100644 packages/raystack/v1/components/text/text.tsx

diff --git a/apps/www/content/primitives/components/flex.mdx b/apps/www/content/primitives/components/flex.mdx
new file mode 100644
index 00000000..46929e15
--- /dev/null
+++ b/apps/www/content/primitives/components/flex.mdx
@@ -0,0 +1,56 @@
+---
+title: Flex
+description:
+---
+
+## Preview
+
+<Preview>
+  <Flex gap="large">
+    <Flex gap="small" direction="column">
+      <Button variant="primary">Primary button</Button>
+      <Button variant="primary">Primary button</Button>
+      <Button variant="primary">Primary button</Button>
+    </Flex>
+    <Flex gap="small" direction="column">
+      <Button variant="primary">Primary button</Button>
+      <Button variant="primary">Primary button</Button>
+      <Button variant="primary">Primary button</Button>
+    </Flex>
+  </Flex>
+</Preview>
+
+## Installation
+
+Install the component from your command line.
+
+<LiveProvider>
+  <LiveEditor code={`npm install @raystack/apsara`} border />
+</LiveProvider>
+
+## Props
+
+The `Flex` component accepts the following props:
+
+- `gap`: sets the gutter space between row and columns
+- `wrap`: sets whether flex items are forced onto one line or can wrap onto multiple lines.
+- `justify`: defines how the browser distributes space between and around content items along the main axis of a flex container.
+- `align`: it controls the alignment of items on the cross axis.
+- `direction`: sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
+- `className`: Custom CSS class names
+
+## Anatomy
+
+Import all parts and piece them together.
+
+<LiveProvider>
+    <LiveEditor code={`
+import { Flex } from '@raystack/apsara/v1'
+
+<Flex direction="column" justify="center">
+  <Flex direction="row" gap="medium"></Flex>
+  <Flex direction="row" align="center"></Flex>
+</Flex>
+`} border />
+
+</LiveProvider>
diff --git a/apps/www/content/primitives/components/text.mdx b/apps/www/content/primitives/components/text.mdx
index bb4907a0..b69b83f8 100644
--- a/apps/www/content/primitives/components/text.mdx
+++ b/apps/www/content/primitives/components/text.mdx
@@ -2,6 +2,7 @@
 title: Text
 description:
 ---
+
 ## Preview
 
 <Preview>
@@ -25,7 +26,7 @@ description:
     <Text weight="600">This is a test</Text> 
     <Text weight="700">This is a test</Text> 
     <Text weight="800">This is a test</Text> 
-    <Text weight="900">This is a test</Text> 
+    <Text weight="900">This is a test</Text>
 
   </Flex>
 </Preview>
@@ -35,28 +36,59 @@ description:
 Install the component from your command line.
 
 <LiveProvider>
-    <LiveEditor code={`npm install @raystack/apsara`} border/>
+  <LiveEditor code={`npm install @raystack/apsara`} border />
 </LiveProvider>
 
+## Variants
+
+<Preview>
+  <Flex
+    style={{
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "8px",
+    }}
+  >
+    <Text variant="primary">primary</Text>
+    <Text variant="secondary">secondary</Text>
+    <Text variant="tertiary">tertiary</Text>
+    <div
+      style={{
+        backgroundColor: "var(--rs-background-neutral-tertiary)",
+        padding: "var(--rs-space-3)",
+      }}
+    >
+      <Text variant="emphasis">emphasis</Text>
+    </div>
+    <Text variant="accent">accent</Text>
+    <Text variant="attention">attention</Text>
+    <Text variant="danger">danger</Text>
+    <Text variant="success">success</Text>
+  </Flex>
+</Preview>
 
 ## Anatomy
+
 Import all parts and piece them together.
 
 <LiveProvider>
     <LiveEditor code={`
-import { Command } from '@raystack/apsara'
-
-<Text size="1">This is a test</Text> 
-<Text size="2">This is a test</Text> 
-<Text size="3">This is a test</Text> 
-<Text size="4">This is a test</Text> 
-<Text size="5">This is a test</Text> 
-<Text weight="400">This is a test</Text> 
-<Text weight="500">This is a test</Text> 
-<Text weight="600">This is a test</Text> 
-<Text weight="bold">This is a test</Text> 
-<Text weight="bolder">This is a test</Text> 
-<Text weight="normal">This is a test</Text> 
-<Text weight="lighter">This is a test</Text> 
+import { Text } from '@raystack/apsara/v1'
+
+<Text size="1">This is a test</Text>
+<Text size="2">This is a test</Text>
+<Text size="3">This is a test</Text>
+<Text size="4">This is a test</Text>
+<Text size="5">This is a test</Text>
+<Text weight="400">This is a test</Text>
+<Text weight="500">This is a test</Text>
+<Text weight="600">This is a test</Text>
+<Text weight="bold">This is a test</Text>
+<Text weight="bolder">This is a test</Text>
+<Text weight="normal">This is a test</Text>
+<Text weight="lighter">This is a test</Text>
+<Text variant="secondary">This is a test</Text>
+
 `} border />
+
 </LiveProvider>
diff --git a/apps/www/utils/routes.ts b/apps/www/utils/routes.ts
index 22c38854..dc52bf9f 100644
--- a/apps/www/utils/routes.ts
+++ b/apps/www/utils/routes.ts
@@ -12,10 +12,22 @@ export const primitivesRoutes = [
   {
     label: "Components",
     pages: [
-      { title: "Avatar", slug: "docs/primitives/components/avatar", newBadge: true, },
+      {
+        title: "Avatar",
+        slug: "docs/primitives/components/avatar",
+        newBadge: true,
+      },
       { title: "Badge", slug: "docs/primitives/components/badge" },
-      { title: "Breadcrumb", slug: "docs/primitives/components/breadcrumb", newBadge: true, },
-      { title: "Button", slug: "docs/primitives/components/button", newBadge: true, },
+      {
+        title: "Breadcrumb",
+        slug: "docs/primitives/components/breadcrumb",
+        newBadge: true,
+      },
+      {
+        title: "Button",
+        slug: "docs/primitives/components/button",
+        newBadge: true,
+      },
       { title: "Calendar", slug: "docs/primitives/components/calendar" },
       { title: "Command", slug: "docs/primitives/components/command" },
       { title: "Checkbox", slug: "docs/primitives/components/checkbox" },
@@ -25,10 +37,15 @@ export const primitivesRoutes = [
       {
         title: "Dropdown Menu",
         slug: "docs/primitives/components/dropdownmenu",
-        newBadge: true
+        newBadge: true,
       },
       { title: "Empty State", slug: "docs/primitives/components/emptystate" },
       { title: "ErrorState", slug: "docs/primitives/components/errorstate" },
+      {
+        title: "Flex",
+        slug: "docs/primitives/components/flex",
+        newBadge: true,
+      },
       { title: "Headline", slug: "docs/primitives/components/headline" },
       { title: "Image", slug: "docs/primitives/components/image" },
       { title: "Label", slug: "docs/primitives/components/label" },
@@ -38,15 +55,27 @@ export const primitivesRoutes = [
       { title: "Select", slug: "docs/primitives/components/select" },
       { title: "Separator", slug: "docs/primitives/components/separator" },
       { title: "Sheet", slug: "docs/primitives/components/sheet" },
-      { title: "Spinner", slug: "docs/primitives/components/spinner", newBadge: true, },
+      {
+        title: "Spinner",
+        slug: "docs/primitives/components/spinner",
+        newBadge: true,
+      },
       { title: "Switch", slug: "docs/primitives/components/switch" },
       { title: "Tabs", slug: "docs/primitives/components/tabs" },
       { title: "Table", slug: "docs/primitives/components/table" },
-      { title: "Text", slug: "docs/primitives/components/text" },
+      {
+        title: "Text",
+        slug: "docs/primitives/components/text",
+        newBadge: true,
+      },
       { title: "Text Field", slug: "docs/primitives/components/textfield" },
       { title: "Tooltip", slug: "docs/primitives/components/tooltip" },
       { title: "Toggle Group", slug: "docs/primitives/components/togglegroup" },
-      { title: "Toast", slug: "docs/primitives/components/toast", newBadge: true },
+      {
+        title: "Toast",
+        slug: "docs/primitives/components/toast",
+        newBadge: true,
+      },
     ],
   },
 ];
diff --git a/packages/raystack/flex/flex.tsx b/packages/raystack/flex/flex.tsx
index 6e2063cf..e85c2184 100644
--- a/packages/raystack/flex/flex.tsx
+++ b/packages/raystack/flex/flex.tsx
@@ -47,6 +47,9 @@ const flex = cva(styles.flex, {
 type BoxProps = PropsWithChildren<VariantProps<typeof flex>> &
   HTMLAttributes<HTMLDivElement>;
 
+/**
+ * @deprecated Use Flex from '@raystack/apsara/v1' instead.
+ */
 export const Flex = forwardRef<HTMLDivElement, BoxProps>(
   (
     { children, direction, align, justify, wrap, gap, className, ...props },
diff --git a/packages/raystack/text/text.tsx b/packages/raystack/text/text.tsx
index 6d0e8277..2a23eb25 100644
--- a/packages/raystack/text/text.tsx
+++ b/packages/raystack/text/text.tsx
@@ -41,6 +41,9 @@ const text = cva(styles.text, {
 export type TextProps = PropsWithChildren<VariantProps<typeof text>> &
   HTMLAttributes<HTMLSpanElement>;
 
+/**
+ * @deprecated Use Text from '@raystack/apsara/v1' instead.
+ */
 export function Text({
   children,
   className,
diff --git a/packages/raystack/v1/components/flex/flex.module.css b/packages/raystack/v1/components/flex/flex.module.css
new file mode 100644
index 00000000..571b3371
--- /dev/null
+++ b/packages/raystack/v1/components/flex/flex.module.css
@@ -0,0 +1,88 @@
+.flex {
+  box-sizing: border-box;
+  display: flex;
+}
+
+.direction-row {
+  flex-direction: row;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.direction-rowReverse {
+  flex-direction: row-reverse;
+}
+
+.direction-columnReverse {
+  flex-direction: column-reverse;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.wrap-noWrap {
+  flex-wrap: nowrap;
+}
+
+.wrap-wrap {
+  flex-wrap: wrap;
+}
+
+.wrap-wrapReverse {
+  flex-wrap: wrap-reverse;
+}
+
+.gap-xs {
+  gap: var(--rs-space-2);
+}
+
+.gap-sm {
+  gap: var(--rs-space-3);
+}
+
+.gap-md {
+  gap: var(--rs-space-5);
+}
+
+.gap-lg {
+  gap: var(--rs-space-9);
+}
+
+.gap-xl {
+  gap: var(--rs-space-11);
+}
diff --git a/packages/raystack/v1/components/flex/flex.tsx b/packages/raystack/v1/components/flex/flex.tsx
new file mode 100644
index 00000000..6e2063cf
--- /dev/null
+++ b/packages/raystack/v1/components/flex/flex.tsx
@@ -0,0 +1,65 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { forwardRef, HTMLAttributes, PropsWithChildren } from "react";
+import styles from "./flex.module.css";
+
+const flex = cva(styles.flex, {
+  variants: {
+    direction: {
+      row: styles["direction-row"],
+      column: styles["direction-column"],
+      rowReverse: styles["direction-rowReverse"],
+      columnReverse: styles["direction-columnReverse"],
+    },
+    align: {
+      start: styles["align-start"],
+      center: styles["align-center"],
+      end: styles["align-end"],
+      stretch: styles["align-stretch"],
+      baseline: styles["align-baseline"],
+    },
+    justify: {
+      start: styles["justify-start"],
+      center: styles["justify-center"],
+      end: styles["justify-end"],
+      between: styles["justify-between"],
+    },
+    wrap: {
+      noWrap: styles["wrap-noWrap"],
+      wrap: styles["wrap-wrap"],
+      wrapReverse: styles["wrap-wrapReverse"],
+    },
+    gap: {
+      "extra-small": styles["gap-xs"],
+      small: styles["gap-sm"],
+      medium: styles["gap-md"],
+      large: styles["gap-lg"],
+      "extra-large": styles["gap-xl"],
+    },
+  },
+  defaultVariants: {
+    direction: "row",
+    align: "stretch",
+    justify: "start",
+    wrap: "noWrap",
+  },
+});
+
+type BoxProps = PropsWithChildren<VariantProps<typeof flex>> &
+  HTMLAttributes<HTMLDivElement>;
+
+export const Flex = forwardRef<HTMLDivElement, BoxProps>(
+  (
+    { children, direction, align, justify, wrap, gap, className, ...props },
+    ref
+  ) => {
+    return (
+      <div
+        className={flex({ direction, align, justify, wrap, gap, className })}
+        {...props}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  }
+);
diff --git a/packages/raystack/v1/components/flex/index.tsx b/packages/raystack/v1/components/flex/index.tsx
new file mode 100644
index 00000000..5f309049
--- /dev/null
+++ b/packages/raystack/v1/components/flex/index.tsx
@@ -0,0 +1 @@
+export { Flex } from "./flex";
diff --git a/packages/raystack/v1/components/text/index.tsx b/packages/raystack/v1/components/text/index.tsx
new file mode 100644
index 00000000..6e474c64
--- /dev/null
+++ b/packages/raystack/v1/components/text/index.tsx
@@ -0,0 +1 @@
+export { Text } from "./text";
diff --git a/packages/raystack/v1/components/text/text.module.css b/packages/raystack/v1/components/text/text.module.css
new file mode 100644
index 00000000..2e580d54
--- /dev/null
+++ b/packages/raystack/v1/components/text/text.module.css
@@ -0,0 +1,139 @@
+.text {
+  display: block;
+  line-height: 1;
+  margin: 0;
+  color: var(--rs-foreground-base-primary);
+}
+
+.text-1 {
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}
+.text-2 {
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+}
+.text-3 {
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+}
+.text-4 {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+}
+.text-5 {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+.text-6 {
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+}
+.text-7 {
+  font-size: 20px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+.text-8 {
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+.text-9 {
+  font-size: 24px;
+  line-height: 32px;
+}
+.text-10 {
+  font-size: 28px;
+  line-height: 36px;
+}
+
+.text-weight-bold {
+  font-weight: bold;
+}
+
+.text-weight-bolder {
+  font-weight: bolder;
+}
+
+.text-weight-normal {
+  font-weight: normal;
+}
+
+.text-weight-lighter {
+  font-weight: lighter;
+}
+
+.text-weight-100 {
+  font-weight: 100;
+}
+
+.text-weight-200 {
+  font-weight: 200;
+}
+
+.text-weight-300 {
+  font-weight: 300;
+}
+
+.text-weight-400 {
+  font-weight: 400;
+}
+
+.text-weight-500 {
+  font-weight: 500;
+}
+
+.text-weight-600 {
+  font-weight: 600;
+}
+
+.text-weight-700 {
+  font-weight: 700;
+}
+
+.text-weight-800 {
+  font-weight: 800;
+}
+
+.text-weight-900 {
+  font-weight: 900;
+}
+
+.text-primary {
+  color: var(--rs-foreground-base-primary);
+}
+
+.text-secondary {
+  color: var(--rs-foreground-base-secondary);
+}
+
+.text-tertiary {
+  color: var(--rs-foreground-base-tertiary);
+}
+
+.text-emphasis {
+  color: var(--rs-foreground-base-emphasis);
+}
+
+.text-accent {
+  color: var(--rs-foreground-accent-primary);
+}
+
+.text-attention {
+  color: var(--rs-foreground-attention-primary);
+}
+
+.text-danger {
+  color: var(--rs-foreground-danger-primary);
+}
+
+.text-success {
+  color: var(--rs-foreground-success-primary);
+}
diff --git a/packages/raystack/v1/components/text/text.tsx b/packages/raystack/v1/components/text/text.tsx
new file mode 100644
index 00000000..8d6b280a
--- /dev/null
+++ b/packages/raystack/v1/components/text/text.tsx
@@ -0,0 +1,68 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { HTMLAttributes, PropsWithChildren } from "react";
+import styles from "./text.module.css";
+
+const text = cva(styles.text, {
+  variants: {
+    variant: {
+      primary: styles["text-primary"],
+      secondary: styles["text-secondary"],
+      tertiary: styles["text-tertiary"],
+      emphasis: styles["text-emphasis"],
+      accent: styles["text-accent"],
+      attention: styles["text-attention"],
+      danger: styles["text-danger"],
+      success: styles["text-success"],
+    },
+    size: {
+      1: styles["text-1"],
+      2: styles["text-2"],
+      3: styles["text-3"],
+      4: styles["text-4"],
+      5: styles["text-5"],
+      6: styles["text-6"],
+      7: styles["text-7"],
+      8: styles["text-8"],
+      9: styles["text-9"],
+      10: styles["text-10"],
+    },
+    weight: {
+      bold: styles["text-weight-bold"],
+      bolder: styles["text-weight-bolder"],
+      normal: styles["text-weight-normal"],
+      lighter: styles["text-weight-lighter"],
+      100: styles["text-weight-100"],
+      200: styles["text-weight-200"],
+      300: styles["text-weight-300"],
+      400: styles["text-weight-400"],
+      500: styles["text-weight-500"],
+      600: styles["text-weight-600"],
+      700: styles["text-weight-700"],
+      800: styles["text-weight-800"],
+      900: styles["text-weight-900"],
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: 2,
+    weight: 400,
+  },
+});
+
+export type TextProps = PropsWithChildren<VariantProps<typeof text>> &
+  HTMLAttributes<HTMLSpanElement>;
+
+export function Text({
+  children,
+  className,
+  size,
+  variant,
+  weight,
+  ...props
+}: TextProps) {
+  return (
+    <span className={text({ size, className, weight, variant })} {...props}>
+      {children}
+    </span>
+  );
+}
diff --git a/packages/raystack/v1/index.tsx b/packages/raystack/v1/index.tsx
index 571363ab..0231a3cc 100644
--- a/packages/raystack/v1/index.tsx
+++ b/packages/raystack/v1/index.tsx
@@ -6,6 +6,8 @@ export { Spinner } from "./components/spinner";
 export { Avatar, AvatarGroup } from "./components/avatar";
 export { ToastContainer, toast } from "./components/toast";
 export { DropdownMenu } from "./components/dropdownMenu";
+export { Text } from "./components/text";
+export { Flex } from "./components/flex";
 export {
   ThemeProvider,
   ThemeProviderProps,