From 9f60ca96c8baccf80b107fe8e41451e58b9e1409 Mon Sep 17 00:00:00 2001
From: Aron <i@aron.tw>
Date: Mon, 10 Jun 2024 05:55:06 +0800
Subject: [PATCH] Add segment controls and tab views

---
 packages/core/src/index.ts                    |  2 +-
 packages/core/src/segments.ts                 | 21 +++++++++--
 packages/react/src/Segment.tsx                | 12 +++++++
 packages/react/src/Segments.tsx               | 14 ++++++++
 packages/react/src/TabControl.tsx             | 21 +++++++++++
 packages/react/src/TabPane.tsx                | 17 +++++++++
 packages/react/src/TabView.tsx                | 34 ++++++++++++++++++
 packages/react/src/index.tsx                  |  7 ++++
 .../[locale]/components/button/metadata.ts    |  2 +-
 .../[locale]/components/checkbox/metadata.ts  |  2 +-
 .../components/components/Overview.tsx        |  3 +-
 .../[locale]/components/segments/content.mdx  |  9 +++++
 .../[locale]/components/segments/metadata.ts  | 13 +++++++
 .../app/[locale]/components/segments/page.tsx | 21 +++++++++++
 .../[locale]/components/select/metadata.ts    |  2 +-
 .../[locale]/components/switch/metadata.ts    |  2 +-
 .../[locale]/components/tab-view/content.mdx  |  6 ++++
 .../[locale]/components/tab-view/metadata.ts  | 13 +++++++
 .../app/[locale]/components/tab-view/page.tsx | 21 +++++++++++
 site/app/[locale]/previews/layout.tsx         | 20 ++++++++++-
 .../previews/segments/normal/content.tsx      | 16 +++++++++
 .../previews/segments/normal/page.tsx         |  9 +++++
 .../segments/with-leading-icon/content.tsx    | 35 +++++++++++++++++++
 .../segments/with-leading-icon/page.tsx       |  9 +++++
 .../previews/tab-view/basic/content.tsx       | 23 ++++++++++++
 .../[locale]/previews/tab-view/basic/page.tsx | 11 ++++++
 26 files changed, 335 insertions(+), 10 deletions(-)
 create mode 100644 packages/react/src/Segment.tsx
 create mode 100644 packages/react/src/Segments.tsx
 create mode 100644 packages/react/src/TabControl.tsx
 create mode 100644 packages/react/src/TabPane.tsx
 create mode 100644 packages/react/src/TabView.tsx
 create mode 100644 site/app/[locale]/components/segments/content.mdx
 create mode 100644 site/app/[locale]/components/segments/metadata.ts
 create mode 100644 site/app/[locale]/components/segments/page.tsx
 create mode 100644 site/app/[locale]/components/tab-view/content.mdx
 create mode 100644 site/app/[locale]/components/tab-view/metadata.ts
 create mode 100644 site/app/[locale]/components/tab-view/page.tsx
 create mode 100644 site/app/[locale]/previews/segments/normal/content.tsx
 create mode 100644 site/app/[locale]/previews/segments/normal/page.tsx
 create mode 100644 site/app/[locale]/previews/segments/with-leading-icon/content.tsx
 create mode 100644 site/app/[locale]/previews/segments/with-leading-icon/page.tsx
 create mode 100644 site/app/[locale]/previews/tab-view/basic/content.tsx
 create mode 100644 site/app/[locale]/previews/tab-view/basic/page.tsx

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index a4e36bd..2255124 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -2,5 +2,5 @@ export { default } from './master.css'
 
 export { default as button, buttonSizes, buttonColors } from './button'
 export { default as select, selectSizes } from './select'
-export { default as segments } from './segments'
+export { default as segments, segmentsSizes } from './segments'
 export { default as switch, switchSizes, switchColors } from './switch'
\ No newline at end of file
diff --git a/packages/core/src/segments.ts b/packages/core/src/segments.ts
index da0371a..502eeac 100644
--- a/packages/core/src/segments.ts
+++ b/packages/core/src/segments.ts
@@ -1,8 +1,23 @@
 import type { Config } from '@master/css'
 
+export const segmentsSizes = {
+    sm: 'p:1 r:4 h:24 {font:12;px:10;r:4}>.segment',
+    md: 'p:5 r:8 h:32 {font:12;px:10;r:4}>.segment',
+    lg: 'p:6 r:10 h:40 {font:14;px:12;r:5}>.segment'
+}
+
 export default {
     styles: {
-        segments: 'flex bg:canvas p:5 r:2x w:fit',
-        segment: 'center-content flex font:12 font:medium leading:1.375rem px:3x r:1x white-space:nowrap {bg:surface;s:01;outline:1|line-lightest;fg:strong}.active'
+        segments: {
+            '': 'flex bg:canvas gap:2 w:fit',
+            ...segmentsSizes
+        },
+        segment: {
+            '': 'center-content flex font:medium gap:6 white-space:nowrap {bg:surface;s:01;outline:1|line-lightest;fg:strong}.active',
+            icon: 'fg:lighter size:1em mx:-2'
+        }
     }
-} as Config
\ No newline at end of file
+} as Config
+
+// <div class="segment-tab">
+// <div class="segment-tab">
\ No newline at end of file
diff --git a/packages/react/src/Segment.tsx b/packages/react/src/Segment.tsx
new file mode 100644
index 0000000..61f8c94
--- /dev/null
+++ b/packages/react/src/Segment.tsx
@@ -0,0 +1,12 @@
+import type { ButtonHTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+type SegmentProps = {
+    active?: boolean
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+const Segment = ({ className, active, ...props }: SegmentProps) => {
+    return <button {...props} className={clsx('segment', className, active && 'active')} />
+}
+
+export default Segment
\ No newline at end of file
diff --git a/packages/react/src/Segments.tsx b/packages/react/src/Segments.tsx
new file mode 100644
index 0000000..b233308
--- /dev/null
+++ b/packages/react/src/Segments.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react'
+import type { segmentsSizes } from '@master/ui'
+import clsx from 'clsx'
+
+type SegmentsProps = {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    size?: (keyof typeof segmentsSizes) | (string & {})
+} & HTMLAttributes<HTMLDivElement>
+
+const Segments = ({ className, size = 'md', ...props }: SegmentsProps) => {
+    return <div {...props} className={clsx('segments', size && `segments-${size}`, className)} />
+}
+
+export default Segments
\ No newline at end of file
diff --git a/packages/react/src/TabControl.tsx b/packages/react/src/TabControl.tsx
new file mode 100644
index 0000000..3a5fe34
--- /dev/null
+++ b/packages/react/src/TabControl.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { type ElementType, type ComponentPropsWithoutRef, useMemo } from 'react'
+import clsx from 'clsx'
+import { useTabView } from './TabView'
+
+type TabControlProps<T extends ElementType> = {
+    name: string
+    as?: T
+    disabled?: boolean
+} & ComponentPropsWithoutRef<T>
+
+export default function TabControl<T extends ElementType = 'button'>({ as, className, disabled, ...props }: TabControlProps<T>) {
+    const tabView = useTabView()
+    const Component = as || 'button'
+    return <Component  {...props}
+        className={clsx(!Component && 'tab', className, tabView.activeTab === props.name && 'active')}
+        onClick={() => tabView.setActiveTab(props.name)}
+        disabled={Component === 'button' ? disabled : undefined}
+    />
+}
diff --git a/packages/react/src/TabPane.tsx b/packages/react/src/TabPane.tsx
new file mode 100644
index 0000000..ce25ed7
--- /dev/null
+++ b/packages/react/src/TabPane.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import type { ElementType, ComponentPropsWithoutRef } from 'react'
+import { useTabView } from './TabView'
+
+type TabPaneProps<T extends ElementType> = {
+    name: string
+    as?: T
+} & ComponentPropsWithoutRef<T>
+
+const TabPane = <T extends ElementType = 'div'>({ as, ...props }: TabPaneProps<T>) => {
+    const tabView = useTabView()
+    const Component = as || 'div'
+    return <Component  {...props} hidden={tabView.activeTab !== props.name} />
+}
+
+export default TabPane
\ No newline at end of file
diff --git a/packages/react/src/TabView.tsx b/packages/react/src/TabView.tsx
new file mode 100644
index 0000000..0b6353d
--- /dev/null
+++ b/packages/react/src/TabView.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { FC, ReactNode, createContext, useContext, useState } from 'react'
+
+type TabViewContextType = {
+    activeTab?: string
+    setActiveTab: (tab: string) => void
+};
+
+export const TabViewContext = createContext<TabViewContextType | undefined>(undefined)
+
+export const useTabView = () => {
+    const context = useContext(TabViewContext)
+    if (context === undefined) {
+        throw new Error('useTabView must be used within a TabView')
+    }
+    return context
+}
+
+type TabViewProps = {
+    activeTab?: string
+    children: ReactNode
+}
+
+const TabView: FC<TabViewProps> = (props) => {
+    const [activeTab, setActiveTab] = useState<string | undefined>(props.activeTab)
+    return (
+        <TabViewContext.Provider value={{ activeTab, setActiveTab }}>
+            {props.children}
+        </TabViewContext.Provider>
+    )
+}
+
+export default TabView
\ No newline at end of file
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index 29573de..7089e1c 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -3,3 +3,10 @@ export { default as Switch } from './Switch'
 export { default as Select } from './Select'
 export { default as SelectIndicator } from './SelectIndicator'
 export { default as SelectChevronIndicator } from './SelectChevronIndicator'
+export { default as Segments } from './Segments'
+export { default as Segment } from './Segment'
+export { default as TabView } from './TabView'
+export { default as TabControl } from './TabControl'
+export { default as TabPane } from './TabPane'
+
+
diff --git a/site/app/[locale]/components/button/metadata.ts b/site/app/[locale]/components/button/metadata.ts
index 9f1ab01..1a2aaa1 100644
--- a/site/app/[locale]/components/button/metadata.ts
+++ b/site/app/[locale]/components/button/metadata.ts
@@ -3,7 +3,7 @@ import define from 'internal/utils/metadata'
 const metadata = define({
     title: 'Button',
     description: 'Beautiful button components crafted with care in every size, color and shape.',
-    category: 'Element',
+    category: 'Control',
     openGraph: {
         images: new URL('~/site/public/images/components/button.jpg', import.meta.url).toString()
     },
diff --git a/site/app/[locale]/components/checkbox/metadata.ts b/site/app/[locale]/components/checkbox/metadata.ts
index 46b507f..85810ce 100644
--- a/site/app/[locale]/components/checkbox/metadata.ts
+++ b/site/app/[locale]/components/checkbox/metadata.ts
@@ -3,7 +3,7 @@ import define from 'internal/utils/metadata'
 const metadata = define({
     title: 'Checkbox',
     description: 'Beautiful checkbox components crafted with care in every size, color and interaction.',
-    category: 'Element',
+    category: 'Control',
     openGraph: {
         images: new URL('~/site/public/images/components/checkbox.jpg', import.meta.url).toString()
     },
diff --git a/site/app/[locale]/components/components/Overview.tsx b/site/app/[locale]/components/components/Overview.tsx
index 2969f8c..7dc116e 100644
--- a/site/app/[locale]/components/components/Overview.tsx
+++ b/site/app/[locale]/components/components/Overview.tsx
@@ -15,7 +15,8 @@ export default function Overview() {
             .filter(({ name }) => name !== 'Overview')
             .map((category, index) => (
                 <Fragment key={index}>
-                    <h2>{category.name}</h2>
+                    <hr />
+                    <h3 id={category.name}>{category.name}</h3>
                     <div className="grid-cols:2 grid-cols:4@sm mt:5x gap:5x">
                         {
                             category.definedMetadataList.map((definedMetadata, index) => (
diff --git a/site/app/[locale]/components/segments/content.mdx b/site/app/[locale]/components/segments/content.mdx
new file mode 100644
index 0000000..a44de8a
--- /dev/null
+++ b/site/app/[locale]/components/segments/content.mdx
@@ -0,0 +1,9 @@
+## Normal
+<CodePreview src="segments/normal"
+    raw={require('!!raw-loader!../../previews/segments/normal/content').default}
+    children={require('../../previews/segments/normal/content').default()} />
+
+## With leading icon
+<CodePreview src="segments/with-leading-icon"
+    raw={require('!!raw-loader!../../previews/segments/with-leading-icon/content').default}
+    children={require('../../previews/segments/with-leading-icon/content').default()} />
\ No newline at end of file
diff --git a/site/app/[locale]/components/segments/metadata.ts b/site/app/[locale]/components/segments/metadata.ts
new file mode 100644
index 0000000..6d7d644
--- /dev/null
+++ b/site/app/[locale]/components/segments/metadata.ts
@@ -0,0 +1,13 @@
+import define from 'internal/utils/metadata'
+
+const metadata = define({
+    title: 'Segments',
+    description: 'A set of segment controls, each of which functions as a button.',
+    category: 'Control',
+    openGraph: {
+        images: new URL('~/site/public/images/components/select.jpg', import.meta.url).toString()
+    },
+    filename: import.meta.url
+})
+
+export default metadata
\ No newline at end of file
diff --git a/site/app/[locale]/components/segments/page.tsx b/site/app/[locale]/components/segments/page.tsx
new file mode 100644
index 0000000..9d88d48
--- /dev/null
+++ b/site/app/[locale]/components/segments/page.tsx
@@ -0,0 +1,21 @@
+import Layout from 'internal/layouts/doc'
+import metadata from './metadata'
+/* @ts-expect-error toc */
+import Content, { toc } from './content.mdx'
+import generate from 'internal/utils/generate-metadata'
+import { getUnitCategories } from '~/site/metadata'
+
+export const dynamic = 'force-static'
+export const revalidate = false
+
+export async function generateMetadata(props: any, parent: any) {
+    return await generate(metadata, props, parent)
+}
+
+export default async function Page(props: any) {
+    return (
+        <Layout {...props} $type="preview" pageCategories={getUnitCategories('components')} pageDirname={__dirname} metadata={metadata} toc={toc} >
+            <Content />
+        </Layout >
+    )
+}
\ No newline at end of file
diff --git a/site/app/[locale]/components/select/metadata.ts b/site/app/[locale]/components/select/metadata.ts
index a660499..764099e 100644
--- a/site/app/[locale]/components/select/metadata.ts
+++ b/site/app/[locale]/components/select/metadata.ts
@@ -3,7 +3,7 @@ import define from 'internal/utils/metadata'
 const metadata = define({
     title: 'Select',
     description: 'Beautiful select components crafted with care in every size, color and interaction.',
-    category: 'Element',
+    category: 'Control',
     openGraph: {
         images: new URL('~/site/public/images/components/select.jpg', import.meta.url).toString()
     },
diff --git a/site/app/[locale]/components/switch/metadata.ts b/site/app/[locale]/components/switch/metadata.ts
index cd72199..0ceab0c 100644
--- a/site/app/[locale]/components/switch/metadata.ts
+++ b/site/app/[locale]/components/switch/metadata.ts
@@ -3,7 +3,7 @@ import define from 'internal/utils/metadata'
 const metadata = define({
     title: 'Switch',
     description: 'Beautiful toggle switch components crafted with care in every size, color and interaction.',
-    category: 'Element',
+    category: 'Control',
     openGraph: {
         images: new URL('~/site/public/images/components/switch.jpg', import.meta.url).toString()
     },
diff --git a/site/app/[locale]/components/tab-view/content.mdx b/site/app/[locale]/components/tab-view/content.mdx
new file mode 100644
index 0000000..e452337
--- /dev/null
+++ b/site/app/[locale]/components/tab-view/content.mdx
@@ -0,0 +1,6 @@
+import Basic from '../../previews/tab-view/basic/content'
+
+## Basic
+<CodePreview src="tab-view/basic" raw={require('!!raw-loader!../../previews/tab-view/basic/content').default}>
+    <Basic />
+</CodePreview>
\ No newline at end of file
diff --git a/site/app/[locale]/components/tab-view/metadata.ts b/site/app/[locale]/components/tab-view/metadata.ts
new file mode 100644
index 0000000..0653799
--- /dev/null
+++ b/site/app/[locale]/components/tab-view/metadata.ts
@@ -0,0 +1,13 @@
+import define from 'internal/utils/metadata'
+
+const metadata = define({
+    title: 'Tab View',
+    description: 'A tab view presents multiple mutually exclusive content panes in the same context area, which users can switch between.',
+    category: 'View Organizing',
+    openGraph: {
+        images: new URL('~/site/public/images/components/select.jpg', import.meta.url).toString()
+    },
+    filename: import.meta.url
+})
+
+export default metadata
\ No newline at end of file
diff --git a/site/app/[locale]/components/tab-view/page.tsx b/site/app/[locale]/components/tab-view/page.tsx
new file mode 100644
index 0000000..9d88d48
--- /dev/null
+++ b/site/app/[locale]/components/tab-view/page.tsx
@@ -0,0 +1,21 @@
+import Layout from 'internal/layouts/doc'
+import metadata from './metadata'
+/* @ts-expect-error toc */
+import Content, { toc } from './content.mdx'
+import generate from 'internal/utils/generate-metadata'
+import { getUnitCategories } from '~/site/metadata'
+
+export const dynamic = 'force-static'
+export const revalidate = false
+
+export async function generateMetadata(props: any, parent: any) {
+    return await generate(metadata, props, parent)
+}
+
+export default async function Page(props: any) {
+    return (
+        <Layout {...props} $type="preview" pageCategories={getUnitCategories('components')} pageDirname={__dirname} metadata={metadata} toc={toc} >
+            <Content />
+        </Layout >
+    )
+}
\ No newline at end of file
diff --git a/site/app/[locale]/previews/layout.tsx b/site/app/[locale]/previews/layout.tsx
index 564745f..da3725d 100644
--- a/site/app/[locale]/previews/layout.tsx
+++ b/site/app/[locale]/previews/layout.tsx
@@ -1,10 +1,13 @@
 'use client'
 
-import { useLayoutEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
+import type ThemeMode from 'theme-mode'
+import { useThemeMode } from '@master/theme-mode.react'
 
 export default function Layout({ children }: {
     children: JSX.Element
 }) {
+    const themeMode = useThemeMode()
     useLayoutEffect(() => {
         const sendHeight = () => {
             const height = document.body.scrollHeight
@@ -16,5 +19,20 @@ export default function Layout({ children }: {
             resizeObserver.disconnect()
         }
     })
+
+    useEffect(() => {
+        if (window.parent) {
+            const handleThemeModeChange = (e: any) => {
+                const parentThemeMode = e.detail as ThemeMode
+                if (parentThemeMode.value) {
+                    themeMode.value = parentThemeMode.value
+                }
+            }
+            window.parent.document.documentElement.addEventListener('themeModeChange', handleThemeModeChange)
+            return () => {
+                window.parent.document.documentElement.removeEventListener('themeModeChange', handleThemeModeChange)
+            }
+        }
+    }, [themeMode])
     return children
 }
\ No newline at end of file
diff --git a/site/app/[locale]/previews/segments/normal/content.tsx b/site/app/[locale]/previews/segments/normal/content.tsx
new file mode 100644
index 0000000..c9398e9
--- /dev/null
+++ b/site/app/[locale]/previews/segments/normal/content.tsx
@@ -0,0 +1,16 @@
+import { Segment, Segments } from '@master/ui.react'
+
+export default () => <>
+    <Segments size='sm'>
+        <Segment active>Grid</Segment>
+        <Segment>List</Segment>
+    </Segments>
+    <Segments>
+        <Segment active>Grid</Segment>
+        <Segment>List</Segment>
+    </Segments>
+    <Segments size='lg'>
+        <Segment active>Grid</Segment>
+        <Segment>List</Segment>
+    </Segments>
+</>
\ No newline at end of file
diff --git a/site/app/[locale]/previews/segments/normal/page.tsx b/site/app/[locale]/previews/segments/normal/page.tsx
new file mode 100644
index 0000000..6295b2a
--- /dev/null
+++ b/site/app/[locale]/previews/segments/normal/page.tsx
@@ -0,0 +1,9 @@
+import Content from './content'
+
+export default function Page() {
+    return (
+        <div className="app-demo gap:8x flex:col@<2xs bg:none!">
+            <Content />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/site/app/[locale]/previews/segments/with-leading-icon/content.tsx b/site/app/[locale]/previews/segments/with-leading-icon/content.tsx
new file mode 100644
index 0000000..9d12ca9
--- /dev/null
+++ b/site/app/[locale]/previews/segments/with-leading-icon/content.tsx
@@ -0,0 +1,35 @@
+import { Segment, Segments } from '@master/ui.react'
+import { IconLayoutGrid, IconList } from '@tabler/icons-react'
+
+export default () => <>
+    <Segments size="sm">
+        <Segment active>
+            <IconLayoutGrid className='segment-icon' />
+            Grid
+        </Segment>
+        <Segment>
+            <IconList className='segment-icon' />
+            List
+        </Segment>
+    </Segments>
+    <Segments>
+        <Segment active>
+            <IconLayoutGrid className='segment-icon' />
+            Grid
+        </Segment>
+        <Segment>
+            <IconList className='segment-icon' />
+            List
+        </Segment>
+    </Segments>
+    <Segments size="lg">
+        <Segment active>
+            <IconLayoutGrid className='segment-icon' />
+            Grid
+        </Segment>
+        <Segment>
+            <IconList className='segment-icon' />
+            List
+        </Segment>
+    </Segments>
+</>
\ No newline at end of file
diff --git a/site/app/[locale]/previews/segments/with-leading-icon/page.tsx b/site/app/[locale]/previews/segments/with-leading-icon/page.tsx
new file mode 100644
index 0000000..6295b2a
--- /dev/null
+++ b/site/app/[locale]/previews/segments/with-leading-icon/page.tsx
@@ -0,0 +1,9 @@
+import Content from './content'
+
+export default function Page() {
+    return (
+        <div className="app-demo gap:8x flex:col@<2xs bg:none!">
+            <Content />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/site/app/[locale]/previews/tab-view/basic/content.tsx b/site/app/[locale]/previews/tab-view/basic/content.tsx
new file mode 100644
index 0000000..81918aa
--- /dev/null
+++ b/site/app/[locale]/previews/tab-view/basic/content.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { Segment, Segments, TabControl, TabPane, TabView } from '@master/ui.react'
+
+export default () => {
+    const tabs = [
+        { name: 'a', label: 'A Label', content: 'A Pane' },
+        { name: 'b', label: 'B Label', content: 'B Pane' }
+    ]
+    return (
+        <TabView activeTab={tabs[0].name}>
+            <Segments>
+                {tabs.map((tab) =>
+                    <TabControl name={tab.name} key={tab.name} as={Segment}>
+                        {tab.label}
+                    </TabControl>)}
+            </Segments>
+            {tabs.map((tab) =>
+                <TabPane name={tab.name} key={tab.name}>
+                    {tab.content}
+                </TabPane>)}
+        </TabView>
+    )
+}
\ No newline at end of file
diff --git a/site/app/[locale]/previews/tab-view/basic/page.tsx b/site/app/[locale]/previews/tab-view/basic/page.tsx
new file mode 100644
index 0000000..c3f8953
--- /dev/null
+++ b/site/app/[locale]/previews/tab-view/basic/page.tsx
@@ -0,0 +1,11 @@
+import Content from './content'
+
+export default function Page() {
+    return (
+        <div className="app-demo gap:8x">
+            <div>
+                <Content />
+            </div>
+        </div>
+    )
+}
\ No newline at end of file