Skip to content

Commit 3b813fb

Browse files
shervinchenshervinchen
committed
docs(Layout): add basic content
1 parent 81c7d89 commit 3b813fb

File tree

8 files changed

+146
-8
lines changed

8 files changed

+146
-8
lines changed

‎data/sidebars.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@ export const SIDEBARS = [
6161
name: 'Grid',
6262
url: '/components/grid',
6363
},
64+
{
65+
name: 'Layout',
66+
url: '/components/layout',
67+
},
6468
],
6569
},
6670
{

‎demo/layout/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Grid, Layout, RawUITheme, useTheme } from '@/packages';
22
import { CSSProperties } from 'react';
33

4-
const headerStyle = (theme: RawUITheme): CSSProperties => ({
4+
export const headerStyle = (theme: RawUITheme): CSSProperties => ({
55
display: 'flex',
66
alignItems: 'center',
77
justifyContent: 'center',
@@ -10,7 +10,7 @@ const headerStyle = (theme: RawUITheme): CSSProperties => ({
1010
backgroundColor: theme.palette.accents4,
1111
});
1212

13-
const contentStyle = (theme: RawUITheme): CSSProperties => ({
13+
export const contentStyle = (theme: RawUITheme): CSSProperties => ({
1414
display: 'flex',
1515
alignItems: 'center',
1616
justifyContent: 'center',
@@ -19,7 +19,7 @@ const contentStyle = (theme: RawUITheme): CSSProperties => ({
1919
backgroundColor: theme.palette.accents6,
2020
});
2121

22-
const sidebarStyle = (theme: RawUITheme): CSSProperties => ({
22+
export const sidebarStyle = (theme: RawUITheme): CSSProperties => ({
2323
display: 'flex',
2424
alignItems: 'center',
2525
justifyContent: 'center',
@@ -28,7 +28,7 @@ const sidebarStyle = (theme: RawUITheme): CSSProperties => ({
2828
backgroundColor: theme.palette.accents5,
2929
});
3030

31-
const footerStyle = (theme: RawUITheme): CSSProperties => ({
31+
export const footerStyle = (theme: RawUITheme): CSSProperties => ({
3232
display: 'flex',
3333
alignItems: 'center',
3434
justifyContent: 'center',

‎jest-setup.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import '@testing-library/jest-dom';
21
import { act } from 'react';
2+
import { TextEncoder, TextDecoder } from 'util';
3+
import '@testing-library/jest-dom';
4+
5+
global.TextEncoder = TextEncoder;
6+
global.TextDecoder = TextDecoder;
37

48
beforeEach(() => {
59
jest.useFakeTimers();

‎packages/Layout/__tests__/Layout.test.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import ReactDOMServer from 'react-dom/server';
23
import { render, screen } from '@testing-library/react';
34
import Layout from '..';
45

@@ -62,4 +63,18 @@ describe('Layout', () => {
6263
'raw-layout-has-sidebar'
6364
);
6465
});
66+
67+
test('should auto check whether has sidebar', () => {
68+
const htmlContent = ReactDOMServer.renderToString(
69+
<Layout>
70+
<Layout.Header>Header</Layout.Header>
71+
<Layout>
72+
<Layout.Sidebar>Sidebar</Layout.Sidebar>
73+
<Layout.Content>Content</Layout.Content>
74+
</Layout>
75+
<Layout.Footer>Footer</Layout.Footer>
76+
</Layout>
77+
);
78+
expect(htmlContent).toContain('raw-layout-has-sidebar');
79+
});
6580
});

‎src/app/(article)/components/grid/grid.mdx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import Unit from '@/demo/Unit';
2-
import { LightBox, DarkBox, rowStyle, box60, box80, box100, box120 } from '@/demo/grid'
31
import { Grid } from '@/packages';
42
import Playground from '@/src/app/components/playground';
3+
import { LightBox, DarkBox, rowStyle, box60, box80, box100, box120 } from '@/demo/grid'
54

65
# Grid
76

@@ -337,7 +336,7 @@ import { Grid } from 'raw-ui';
337336
| gutter | spacing between grids | Gutter | [0, 0] |
338337
| align | vertical alignment | ResponsiveValue\<Align\> | 'normal' |
339338
| justify | horizontal arrangement | ResponsiveValue\<Justify\> | 'normal' |
340-
| ... | native props | React.HTMLAttributes | - |
339+
| ... | native props | React.HTMLAttributes | - |
341340

342341
### Grid.Col
343342

‎src/app/(article)/components/layout/layout.mdx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { Grid, Layout, useTheme } from '@/packages';
2+
import Playground from '@/src/app/components/playground';
3+
import { headerStyle, contentStyle, sidebarStyle, footerStyle } from '@/demo/layout'
4+
5+
# Layout
6+
7+
Used to divide the overall layout of the page.
8+
9+
## Import
10+
11+
```tsx
12+
import { Layout } from 'raw-ui';
13+
```
14+
15+
## Basic
16+
17+
<Playground
18+
scope={{ Grid, Layout, useTheme, headerStyle, contentStyle, sidebarStyle, footerStyle }}
19+
code={`
20+
() => {
21+
const theme = useTheme();
22+
23+
return (
24+
<Grid gutter={[16, 16]}>
25+
<Grid.Col span={12}>
26+
<Layout>
27+
<Layout.Header style={headerStyle(theme)}>Header</Layout.Header>
28+
<Layout.Content style={contentStyle(theme)}>Content</Layout.Content>
29+
<Layout.Footer style={footerStyle(theme)}>Footer</Layout.Footer>
30+
</Layout>
31+
</Grid.Col>
32+
<Grid.Col span={12}>
33+
<Layout>
34+
<Layout.Header style={headerStyle(theme)}>Header</Layout.Header>
35+
<Layout>
36+
<Layout.Sidebar style={sidebarStyle(theme)}>Sidebar</Layout.Sidebar>
37+
<Layout.Content style={contentStyle(theme)}>Content</Layout.Content>
38+
</Layout>
39+
<Layout.Footer style={footerStyle(theme)}>Footer</Layout.Footer>
40+
</Layout>
41+
</Grid.Col>
42+
<Grid.Col span={12}>
43+
<Layout>
44+
<Layout.Header style={headerStyle(theme)}>Header</Layout.Header>
45+
<Layout>
46+
<Layout.Content style={contentStyle(theme)}>Content</Layout.Content>
47+
<Layout.Sidebar style={sidebarStyle(theme)}>Sidebar</Layout.Sidebar>
48+
</Layout>
49+
<Layout.Footer style={footerStyle(theme)}>Footer</Layout.Footer>
50+
</Layout>
51+
</Grid.Col>
52+
<Grid.Col span={12}>
53+
<Layout>
54+
<Layout.Sidebar style={sidebarStyle(theme)}>Sidebar</Layout.Sidebar>
55+
<Layout>
56+
<Layout.Header style={headerStyle(theme)}>Header</Layout.Header>
57+
<Layout.Content style={contentStyle(theme)}>Content</Layout.Content>
58+
<Layout.Footer style={footerStyle(theme)}>Footer</Layout.Footer>
59+
</Layout>
60+
</Layout>
61+
</Grid.Col>
62+
</Grid>
63+
);
64+
}
65+
`}
66+
/>
67+
68+
## API
69+
70+
### Layout
71+
72+
| Prop | Description | Type | Default |
73+
| ------------ | ---------------------- | -------------------------- | -------- |
74+
| ... | native props | React.HTMLAttributes | - |
75+
76+
### Layout.Header
77+
78+
| Prop | Description | Type | Default |
79+
| ------------ | ---------------------- | -------------------------- | -------- |
80+
| ... | native props | React.HTMLAttributes | - |
81+
82+
### Layout.Sidebar
83+
84+
| Prop | Description | Type | Default |
85+
| ------------ | ---------------------- | -------------------------- | -------- |
86+
| ... | native props | React.HTMLAttributes | - |
87+
88+
### Layout.Content
89+
90+
| Prop | Description | Type | Default |
91+
| ------------ | ---------------------- | -------------------------- | -------- |
92+
| ... | native props | React.HTMLAttributes | - |
93+
94+
### Layout.Footer
95+
96+
| Prop | Description | Type | Default |
97+
| ------------ | ---------------------- | -------------------------- | -------- |
98+
| ... | native props | React.HTMLAttributes | - |
99+

‎src/app/(article)/components/layout/mdx-content.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use client';
2+
3+
import MDX from './layout.mdx';
4+
5+
export default function MDXContent() {
6+
return <MDX />;
7+
}

‎src/app/(article)/components/layout/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Metadata } from 'next';
2+
import MDXContent from './mdx-content';
3+
4+
export const metadata: Metadata = {
5+
title: 'Layout - Raw UI',
6+
};
7+
8+
export default function Page() {
9+
return <MDXContent />;
10+
}

0 commit comments

Comments
 (0)