feat: Code Block Component

apps/www/src/app/playground/page.tsx

@@ -17,6 +17,7 @@ export default function Page() {
       <Playground.CalloutExamples />
       <Playground.CheckboxExamples />
       <Playground.ChipExamples />
+      <Playground.CodeBlockExamples />
       <Playground.CommandExamples />
       <Playground.ContainerExamples />
       <Playground.DataTableExamples />

apps/www/src/components/playground/code-block-examples.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { CodeBlock, Flex } from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function CodeBlockExamples() {
+  return (
+    <PlaygroundLayout title='CodeBlock'>
+      <Flex gap='large' style={{ width: 800 }}>
+        <CodeBlock maxLines={10} defaultValue='jsx'>
+          <CodeBlock.Header>
+            <CodeBlock.Label>Code</CodeBlock.Label>
+            <CodeBlock.LanguageSelect>
+              <CodeBlock.LanguageSelectTrigger />
+              <CodeBlock.LanguageSelectContent>
+                <CodeBlock.LanguageSelectItem value='jsx'>
+                  JSX
+                </CodeBlock.LanguageSelectItem>
+                <CodeBlock.LanguageSelectItem value='tsx'>
+                  TSX
+                </CodeBlock.LanguageSelectItem>
+              </CodeBlock.LanguageSelectContent>
+            </CodeBlock.LanguageSelect>
+            <CodeBlock.CopyButton />
+          </CodeBlock.Header>
+          <CodeBlock.Content>
+            <CodeBlock.Code language='jsx'>{`<Dialog>
+  <Dialog.Trigger asChild>
+    <Button>Basic Dialog</Button>
+  </Dialog.Trigger>
+  <Dialog.Content
+    width={300}
+    ariaLabel="Basic Dialog"
+    ariaDescription="A simple dialog example"
+  >
+    <Dialog.Header>
+      <Dialog.Title>A simple dialog example</Dialog.Title>
+      <Dialog.CloseButton />
+    </Dialog.Header>
+    <Dialog.Body>
+      <Dialog.Description>
+        This is a basic dialog with title and description.
+      </Dialog.Description>
+    </Dialog.Body>
+    <Dialog.Footer>
+      <Button>OK</Button>
+      <Dialog.Close asChild>
+        <Button color="neutral">Cancel</Button>
+      </Dialog.Close>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog>`}</CodeBlock.Code>
+            <CodeBlock.Code language='tsx'>{`function add(a: number, b: number): number {
+  return a + b;
+}`}</CodeBlock.Code>
+            <CodeBlock.CollapseTrigger />
+          </CodeBlock.Content>
+        </CodeBlock>
+      </Flex>
+    </PlaygroundLayout>
+  );
+}

apps/www/src/components/playground/index.ts

@@ -7,6 +7,7 @@ export * from './calendar-examples';
 export * from './callout-examples';
 export * from './checkbox-examples';
 export * from './chip-examples';
+export * from './code-block-examples';
 export * from './command-examples';
 export * from './container-examples';
 export * from './data-table-examples';

apps/www/src/components/playground/select-examples.tsx

@@ -1,38 +1,38 @@
-"use client";
+'use client';
 
-import { Select, Flex } from "@raystack/apsara";
-import PlaygroundLayout from "./playground-layout";
+import { Flex, Select } from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
 
 export function SelectExamples() {
   return (
-    <PlaygroundLayout title="Select">
-      <Flex align="center" gap="large" wrap="wrap">
+    <PlaygroundLayout title='Select'>
+      <Flex align='center' gap='large' wrap='wrap'>
         <Select>
-          <Select.Trigger size="small">
-            <Select.Value placeholder="Small select" />
+          <Select.Trigger size='small'>
+            <Select.Value placeholder='Small select' />
           </Select.Trigger>
           <Select.Content>
-            <Select.Item value="1">Option 1</Select.Item>
-            <Select.Item value="2">Option 2</Select.Item>
+            <Select.Item value='1'>Option 1</Select.Item>
+            <Select.Item value='2'>Option 2</Select.Item>
           </Select.Content>
         </Select>
         <Select>
           <Select.Trigger>
-            <Select.Value placeholder="Large select" />
+            <Select.Value placeholder='Large select' />
           </Select.Trigger>
           <Select.Content>
-            <Select.Item value="1">Option 1</Select.Item>
-            <Select.Item value="2">Option 2</Select.Item>
+            <Select.Item value='1'>Option 1</Select.Item>
+            <Select.Item value='2'>Option 2</Select.Item>
           </Select.Content>
         </Select>
         <Select>
-          <Select.Trigger variant="filter">
-            <Select.Value placeholder="Filter..." />
+          <Select.Trigger variant='text'>
+            <Select.Value placeholder='Filter...' />
           </Select.Trigger>
           <Select.Content>
-            <Select.Item value="all">All</Select.Item>
-            <Select.Item value="active">Active</Select.Item>
-            <Select.Item value="inactive">Inactive</Select.Item>
+            <Select.Item value='all'>All</Select.Item>
+            <Select.Item value='active'>Active</Select.Item>
+            <Select.Item value='inactive'>Inactive</Select.Item>
           </Select.Content>
         </Select>
       </Flex>

apps/www/src/content/docs/components/code-block/demo.ts

@@ -0,0 +1,193 @@
+'use client';
+
+import { getPropsString } from '@/lib/utils';
+
+const jsxCode = `{\`function add(a, b) {
+  return a + b;
+}\`}`;
+
+const tsxCode = `{\`function add(a: number, b: number): number {
+  return a + b;
+}\`}`;
+
+const longCode = `{\`<Dialog>
+  <Dialog.Trigger asChild>
+    <Button>Basic Dialog</Button>
+  </Dialog.Trigger>
+  <Dialog.Content
+    width={300}
+    ariaLabel="Basic Dialog"
+    ariaDescription="A simple dialog example"
+  >
+    <Dialog.Header>
+      <Dialog.Title>A simple dialog example</Dialog.Title>
+      <Dialog.CloseButton />
+    </Dialog.Header>
+    <Dialog.Body>
+      <Dialog.Description>
+        This is a basic dialog with title and description.
+      </Dialog.Description>
+    </Dialog.Body>
+    <Dialog.Footer>
+      <Button>OK</Button>
+      <Dialog.Close asChild>
+        <Button color="neutral">Cancel</Button>
+      </Dialog.Close>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog>\`}`;
+
+const getCode = (props: Record<string, unknown>) => {
+  const { children, maxLines, defaultValue = 'jsx', ...rest } = props;
+  return `<CodeBlock${getPropsString({ ...rest, ...(maxLines ? { maxLines: Number(maxLines) } : {}), defaultValue })}>
+  <CodeBlock.Header>
+          <CodeBlock.Label>Code</CodeBlock.Label>
+          <CodeBlock.LanguageSelect>
+            <CodeBlock.LanguageSelectTrigger />
+            <CodeBlock.LanguageSelectContent>
+              <CodeBlock.LanguageSelectItem value='jsx'>
+                JSX
+              </CodeBlock.LanguageSelectItem>
+              <CodeBlock.LanguageSelectItem value='tsx'>
+                TSX
+              </CodeBlock.LanguageSelectItem>
+            </CodeBlock.LanguageSelectContent>
+          </CodeBlock.LanguageSelect>
+          <CodeBlock.CopyButton />
+        </CodeBlock.Header>
+        <CodeBlock.Content>
+          <CodeBlock.Code language='jsx'>${longCode}</CodeBlock.Code>
+          <CodeBlock.Code language='tsx'>${tsxCode}</CodeBlock.Code>
+          <CodeBlock.CollapseTrigger />
+        </CodeBlock.Content>
+      </CodeBlock>`;
+};
+
+export const playground = {
+  type: 'playground',
+  controls: {
+    hideLineNumbers: {
+      type: 'checkbox',
+      defaultValue: false
+    },
+    maxLines: {
+      type: 'number',
+      defaultValue: 0,
+      initialValue: 10,
+      min: 0,
+      max: 20
+    },
+    defaultValue: {
+      type: 'select',
+      options: ['jsx', 'tsx'],
+      defaultValue: 'jsx'
+    }
+  },
+  getCode
+};
+
+export const basicDemo = {
+  type: 'code',
+  code: `<CodeBlock>
+  <CodeBlock.Content>
+    <CodeBlock.Code language="jsx">
+      ${jsxCode}
+    </CodeBlock.Code>
+  </CodeBlock.Content>
+</CodeBlock>`
+};
+
+export const withHeaderDemo = {
+  type: 'code',
+  code: `<CodeBlock>
+      <CodeBlock.Header>
+        <CodeBlock.Label>Header Example</CodeBlock.Label>
+        <CodeBlock.CopyButton />
+      </CodeBlock.Header>
+      <CodeBlock.Content>
+        <CodeBlock.Code language="jsx">
+          ${jsxCode}
+        </CodeBlock.Code>
+      </CodeBlock.Content>
+    </CodeBlock>`
+};
+
+export const languageSwitcherDemo = {
+  type: 'code',
+  code: `<CodeBlock>
+        <CodeBlock.Header>
+          <CodeBlock.Label>Code</CodeBlock.Label>
+          <CodeBlock.LanguageSelect>
+            <CodeBlock.LanguageSelectTrigger />
+            <CodeBlock.LanguageSelectContent>
+              <CodeBlock.LanguageSelectItem value='jsx'>
+                JSX
+              </CodeBlock.LanguageSelectItem>
+              <CodeBlock.LanguageSelectItem value='tsx'>
+                TSX
+              </CodeBlock.LanguageSelectItem>
+            </CodeBlock.LanguageSelectContent>
+          </CodeBlock.LanguageSelect>
+        </CodeBlock.Header>
+        <CodeBlock.Content>
+          <CodeBlock.Code language='tsx'>${jsxCode}</CodeBlock.Code>
+          <CodeBlock.Code language='jsx'>${tsxCode}</CodeBlock.Code>
+        </CodeBlock.Content>
+      </CodeBlock>`
+};
+
+export const noLineNumbersDemo = {
+  type: 'code',
+  code: `<CodeBlock hideLineNumbers>
+  <CodeBlock.Content>
+      <CodeBlock.Code language="jsx">
+        ${jsxCode}
+      </CodeBlock.Code>
+    </CodeBlock.Content>
+    </CodeBlock>`
+};
+
+export const collapsibleDemo = {
+  type: 'code',
+  code: `<CodeBlock maxLines={10}>
+  <CodeBlock.Content>
+  <CodeBlock.Code language="jsx">
+    ${longCode}
+  </CodeBlock.Code>
+  <CodeBlock.CollapseTrigger />
+  </CodeBlock.Content>
+</CodeBlock>`
+};
+
+export const copyButtonDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Floating',
+      code: `
+      <CodeBlock>
+      <CodeBlock.Content>
+      <CodeBlock.Code language="jsx">
+          ${jsxCode}
+        </CodeBlock.Code>
+        <CodeBlock.CopyButton variant="floating" />
+      </CodeBlock.Content>
+    </CodeBlock>`
+    },
+    {
+      name: 'In header',
+      code: `
+      <CodeBlock>
+      <CodeBlock.Header>
+        <CodeBlock.Label>Code</CodeBlock.Label>
+        <CodeBlock.CopyButton />
+      </CodeBlock.Header>
+      <CodeBlock.Content>
+      <CodeBlock.Code language="jsx">
+          ${jsxCode}
+        </CodeBlock.Code>
+      </CodeBlock.Content>
+    </CodeBlock>`
+    }
+  ]
+};