docs:switch,text

.changeset/cuddly-rivers-decide.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+storybook and comp revamped

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',

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>

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>
  );

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>

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

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>

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>

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",

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}
+ />
  );
 };