docs:switch,text

SySagar · Sep 30, 2024 · 98af8bc · 98af8bc
1 parent c71528d
commit 98af8bc
Show file tree

Hide file tree

Showing 12 changed files with 413 additions and 70 deletions.
diff --git a/.changeset/cuddly-rivers-decide.md b/.changeset/cuddly-rivers-decide.md
@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+storybook and comp revamped
diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx
@@ -38,7 +38,7 @@ export default function HomePage() {
               application.
             </p>
             <h3
-              className='font-medium text-xl text-gray-400'
+              className='font-medium text-xl dark:text-gray-400 text-gray-600'
               style={{
                 width: '50vw',
                 textAlign: 'center',

diff --git a/apps/docs/app/layout.config.tsx b/apps/docs/app/layout.config.tsx
@@ -41,7 +41,7 @@ export const baseOptions: HomeLayoutProps = {
           href='https://cal.com/sy-sagar/quick-chat'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-slate-800 border-2 border-slate-500 px-2 py-1 rounded-md text-sm dark:text-blue-500 dark:border-blue-500'
+          className='text-blue-800 border-2 border-blue-500 px-2 py-1 rounded-md text-sm dark:text-blue-500 dark:border-blue-500'
         >
           Hire me!
         </a>

diff --git a/apps/docs/app/ui/ComponenentWrapper.tsx b/apps/docs/app/ui/ComponenentWrapper.tsx
@@ -3,11 +3,15 @@ import React from 'react';
 
 export default function ComponenentWrapper({
   children,
+  height = '300px',
 }: {
   children: React.ReactNode;
+  height?: string;
 }) {
   return (
-    <div className='ui flex flex-row items-center justify-center h-[300px] gap-20'>
+    <div
+      className={`ui flex flex-row items-center justify-center h-[${height}] gap-20`}
+    >
       {children}
     </div>
   );

diff --git a/apps/docs/content/docs/(components)/progress.mdx b/apps/docs/content/docs/(components)/progress.mdx
@@ -20,9 +20,10 @@ import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
         justifyItems: 'start',
         width:"400px",
         gap: '1rem',
+        padding:'1rem'
       }}
     >
-      <Text variant="heading-5">{40}% complete</Text>
+      <Text alignment="left" variant="heading-5">{40}% complete</Text>
       <Progress value={40} />
     </div>
   </ComponenentWrapper>

diff --git a/apps/docs/content/docs/(components)/select.mdx b/apps/docs/content/docs/(components)/select.mdx
@@ -0,0 +1,6 @@
+---
+title: Select
+description: Displays a list of options for the user to pick from—triggered by a button.
+---
+
+## Default
diff --git a/apps/docs/content/docs/(components)/switch.mdx b/apps/docs/content/docs/(components)/switch.mdx
@@ -0,0 +1,56 @@
+---
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+---
+
+## Default
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Switch, Text } from '@/app/ui';
+import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+  <ComponenentWrapper>
+       <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyItems: 'center',
+        gap:'1rem',
+        padding:'1rem'
+      }}
+    >
+    <Text variant="Heading-5">Game-mode</Text>
+     <Switch className='SwitchRoot' id='basic-Switch' />
+    </div>
+  </ComponenentWrapper>
+
+  </Tab>
+  <Tab value='Code'>
+
+```tsx
+import { Switch } from "@groovy-box/ui"
+
+export function SwitchDefault() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'start',
+        flexDirection: 'column',
+        justifyItems: 'center',
+        gap: '1rem',
+      }}
+    >
+      <Switch className='SwitchRoot' id='basic-Switch' />
+    </div>
+  );
+}
+
+    ```
+
+    </Tab>
+
+</Tabs>
diff --git a/apps/docs/content/docs/(components)/text.mdx b/apps/docs/content/docs/(components)/text.mdx
@@ -0,0 +1,234 @@
+---
+title: Text
+description: A text based on various sizes
+---
+
+## Default
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Text } from '@/app/ui';
+import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+  <ComponenentWrapper height="900px">
+       <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        justifyItems: 'center',
+        gap:'1rem'
+      }}
+    >
+
+    <Text variant="body-1">body-1</Text>
+    <Text variant="body-2">body-2</Text>
+    <Text variant="body-3">body-3</Text>
+    <Text variant="button-1">Button-1</Text>
+    <Text variant="button-2">Button-2</Text>
+    <Text variant="heading-1">Heading-1</Text>
+    <Text variant="heading-2">Heading-2</Text>
+    <Text variant="heading-3">Heading-3</Text>
+    <Text variant="heading-4">Heading-4</Text>
+    <Text variant="heading-5">Heading-5</Text>
+    <Text variant="heading-6">Heading-6</Text>
+    <Text variant="label-1">label-1</Text>
+    <Text variant="label-2">label-2</Text>
+    <Text variant="subtitle-1">subtitle-1</Text>
+    <Text variant="subtitle-2">subtitle-2</Text>
+    <Text variant="subtitle-3">subtitle-3</Text>
+    </div>
+  </ComponenentWrapper>
+
+  </Tab>
+  <Tab value='Code'>
+
+```tsx
+import { Text } from "@groovy-box/ui"
+
+export function TextDefault() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        justifyItems: 'center',
+        gap: '1rem',
+      }}
+    >
+      <Text variant='body-1'>body-1</Text>
+      <Text variant='body-2'>body-2</Text>
+      <Text variant='body-3'>body-3</Text>
+      <Text variant='button-1'>Button-1</Text>
+      <Text variant='button-2'>Button-2</Text>
+      <Text variant='heading-1'>Heading-1</Text>
+      <Text variant='heading-2'>Heading-2</Text>
+      <Text variant='heading-3'>Heading-3</Text>
+      <Text variant='heading-4'>Heading-4</Text>
+      <Text variant='heading-5'>Heading-5</Text>
+      <Text variant='heading-6'>Heading-6</Text>
+      <Text variant='label-1'>label-1</Text>
+      <Text variant='label-2'>label-2</Text>
+      <Text variant='subtitle-1'>subtitle-1</Text>
+      <Text variant='subtitle-2'>subtitle-2</Text>
+      <Text variant='subtitle-3'>subtitle-3</Text>
+    </div>
+  );
+}
+
+    ```
+
+    </Tab>
+
+</Tabs>
+
+## With Tailwind
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+  <ComponenentWrapper >
+    <div className="p-8">
+         <Text className="grv-text-[#f0a000] grv-underline" variant='heading-3'>With extensible tailwind classes</Text>
+    </div>
+
+  </ComponenentWrapper>
+
+  </Tab>
+  <Tab value='Code'>
+
+```tsx
+import { Text } from "@groovy-box/ui"
+
+export function TextTailwindDefault() {
+  return (
+    <div>
+      <div className='p-8'>
+        <Text className='text-[#f0a000] underline' variant='heading-3'>
+          With extensible tailwind classes
+        </Text>
+      </div>
+    </div>
+  );
+}
+
+    ```
+
+    </Tab>
+
+</Tabs>
+
+## With Alignment: Center
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+  <ComponenentWrapper >
+    <div className="p-8">
+         <Text alignment="center" variant='body-1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
+    </div>
+
+  </ComponenentWrapper>
+
+  </Tab>
+  <Tab value='Code'>
+
+```tsx
+import { Text } from "@groovy-box/ui"
+
+export function TextAlignmentDefault() {
+  return (
+    <div>
+      <div className='p-8'>
+        <Text alignment='center' variant='body-1'>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </Text>
+      </div>
+    </div>
+  );
+}
+
+    ```
+
+    </Tab>
+
+</Tabs>
+
+## With Alignment: Left
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+  <ComponenentWrapper >
+    <div className="p-8">
+         <Text alignment="left" variant='body-1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
+    </div>
+
+  </ComponenentWrapper>
+
+  </Tab>
+  <Tab value='Code'>
+
+```tsx
+import { Text } from "@groovy-box/ui"
+
+export function TextAlignmentDefault() {
+  return (
+    <div>
+      <div className='p-8'>
+        <Text alignment='left' variant='body-1'>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </Text>
+      </div>
+    </div>
+  );
+}
+
+    ```
+
+    </Tab>
+
+</Tabs>
+
+## With Alignment: Right
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+  <ComponenentWrapper >
+    <div className="p-8">
+         <Text alignment="right" variant='body-1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
+    </div>
+
+  </ComponenentWrapper>
+
+  </Tab>
+  <Tab value='Code'>
+
+```tsx
+import { Text } from "@groovy-box/ui"
+
+export function TextAlignmentDefault() {
+  return (
+    <div>
+      <div className='p-8'>
+        <Text alignment='right' variant='body-1'>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </Text>
+      </div>
+    </div>
+  );
+}
+
+    ```
+
+    </Tab>
+
+</Tabs>
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -11,12 +11,15 @@
   "dependencies": {
     "@groovy-box/tokens": "*",
     "@groovy-box/ui": "*",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-select": "^2.1.1",
     "framer-motion": "^11.5.6",
     "fumadocs-core": "13.4.10",
     "fumadocs-mdx": "10.0.2",
     "fumadocs-ui": "13.4.10",
     "lucide-react": "^0.441.0",
     "next": "^14.2.8",
+    "radix-ui": "^1.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

diff --git a/apps/ui/lib/components/Typography/Text.tsx b/apps/ui/lib/components/Typography/Text.tsx
@@ -40,13 +40,11 @@ export const Text: React.FC<TextProps> = ({
   const mergedClasses = cn(style.text, classNames?.slice(1), props.className);
 
   return (
-    <div>
-      <Comp
-        {...props}
-        className={cn(mergedClasses, 'ui')}
-        style={textStyle}
-        children={children}
-      />
-    </div>
+    <Comp
+      {...props}
+      className={cn(mergedClasses, 'ui')}
+      style={textStyle}
+      children={children}
+    />
   );
 };