Skip to content
This repository was archived by the owner on Jul 14, 2023. It is now read-only.

Commit 703cb12

Browse files
colinhemphillcolinhemphill
authored
[1.1.0] Adding new components (#21)
* Update dependencies. Add a Badge component and update documentation. * Add Checkbox component. Add error state to the Select component. Update docs for all form elements. * Add borderRadius prop to Button. Add disabled state example and additional styles for checkbox. * Add error state to Checkbox. Improved error styles on other form elements. * Working on Radio components. * Add Radio tests and error state styles. Complete Radio documentation. * Docs and styles. * PropsTable now display all exported components for a file. Add CopyButton to code previews. Working on Card components. * Display import statements above each component props table. * Wrap up the Card components. Add emphasis prop to Alert. * Dependency upgrades. Add NPM badges to docs home page. * Changelog date.
1 parent 8a4ddaa commit 703cb12

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+2076
-713
lines changed

‎apps/docs/package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@vanilla-extract/css": "1.9.0",
2727
"@vanilla-extract/css-utils": "0.1.2",
2828
"@vanilla-extract/next-plugin": "2.0.2",
29+
"copy-to-clipboard": "3.3.2",
2930
"glob": "8.0.3",
3031
"lodash": "4.17.21",
3132
"next": "12.3.0",
@@ -39,19 +40,19 @@
3940
"remark-mdx-code-meta": "2.0.0"
4041
},
4142
"devDependencies": {
42-
"@babel/core": "7.19.0",
43+
"@babel/core": "7.19.1",
4344
"@strum/eslint-config": "*",
4445
"@strum/tsconfig": "*",
4546
"@types/deepmerge": "2.2.0",
4647
"@types/glob": "8.0.0",
4748
"@types/lodash": "4.14.185",
48-
"@types/node": "18.7.17",
49-
"@types/react": "18.0.19",
49+
"@types/node": "18.7.18",
50+
"@types/react": "18.0.20",
5051
"eslint": "8.23.1",
5152
"next-compose-plugins": "2.2.1",
5253
"next-transpile-modules": "9.0.0",
5354
"rimraf": "3.0.2",
54-
"turbo": "1.4.6",
55+
"turbo": "1.4.7",
5556
"typescript": "4.8.3"
5657
}
5758
}

‎apps/docs/public/sitemap-0.xml

+27-27
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3-
<url><loc>https://strum.design</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
4-
<url><loc>https://strum.design/overview/design-concepts</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
5-
<url><loc>https://strum.design/overview/development</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
6-
<url><loc>https://strum.design/components/Alert</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
7-
<url><loc>https://strum.design/components/Avatar</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
8-
<url><loc>https://strum.design/components/Badge</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
9-
<url><loc>https://strum.design/components/Box</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
10-
<url><loc>https://strum.design/components/Button</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
11-
<url><loc>https://strum.design/components/Card</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
12-
<url><loc>https://strum.design/components/Checkbox</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
13-
<url><loc>https://strum.design/components/Container</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
14-
<url><loc>https://strum.design/components/Dialog</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
15-
<url><loc>https://strum.design/components/Heading</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
16-
<url><loc>https://strum.design/components/Input</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
17-
<url><loc>https://strum.design/components/Nav</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
18-
<url><loc>https://strum.design/components/Radio</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
19-
<url><loc>https://strum.design/components/Select</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
20-
<url><loc>https://strum.design/components/Skeleton</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
21-
<url><loc>https://strum.design/components/Spinner</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
22-
<url><loc>https://strum.design/components/Stack</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
23-
<url><loc>https://strum.design/components/StrumProvider</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
24-
<url><loc>https://strum.design/components/Switch</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
25-
<url><loc>https://strum.design/components/Text</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
26-
<url><loc>https://strum.design/components/Textarea</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
27-
<url><loc>https://strum.design/components/Toast</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
28-
<url><loc>https://strum.design/components/Tooltip</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
29-
<url><loc>https://strum.design/components/VisuallyHidden</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
3+
<url><loc>https://strum.design</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
4+
<url><loc>https://strum.design/overview/design-concepts</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
5+
<url><loc>https://strum.design/overview/development</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
6+
<url><loc>https://strum.design/components/Alert</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
7+
<url><loc>https://strum.design/components/Avatar</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
8+
<url><loc>https://strum.design/components/Badge</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
9+
<url><loc>https://strum.design/components/Box</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
10+
<url><loc>https://strum.design/components/Button</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
11+
<url><loc>https://strum.design/components/Card</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
12+
<url><loc>https://strum.design/components/Checkbox</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
13+
<url><loc>https://strum.design/components/Container</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
14+
<url><loc>https://strum.design/components/Dialog</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
15+
<url><loc>https://strum.design/components/Heading</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
16+
<url><loc>https://strum.design/components/Input</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
17+
<url><loc>https://strum.design/components/Nav</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
18+
<url><loc>https://strum.design/components/Radio</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
19+
<url><loc>https://strum.design/components/Select</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
20+
<url><loc>https://strum.design/components/Skeleton</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
21+
<url><loc>https://strum.design/components/Spinner</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
22+
<url><loc>https://strum.design/components/Stack</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
23+
<url><loc>https://strum.design/components/StrumProvider</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
24+
<url><loc>https://strum.design/components/Switch</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
25+
<url><loc>https://strum.design/components/Text</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
26+
<url><loc>https://strum.design/components/Textarea</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
27+
<url><loc>https://strum.design/components/Toast</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
28+
<url><loc>https://strum.design/components/Tooltip</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
29+
<url><loc>https://strum.design/components/VisuallyHidden</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
3030
</urlset>

‎apps/docs/src/components/AccentSelect/AccentSelect.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const AccentSelect: React.FC = () => {
99
return (
1010
<Select
1111
name="Accent color"
12-
onValueChange={(value: AccentColor) => setAccent(value)}
12+
onChange={(value: AccentColor) => setAccent(value)}
1313
placeholder="Select accent color"
1414
value={accent}
1515
>

‎apps/docs/src/components/CodeBlock/CodeBlock.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,20 @@ import Highlight, {
66
} from 'prism-react-renderer';
77
import vsDark from 'prism-react-renderer/themes/vsDark';
88
import vsLight from 'prism-react-renderer/themes/vsLight';
9-
import { PropsWithChildren } from 'react';
9+
import { PropsWithChildren, ReactNode } from 'react';
1010
import { useIsMounted } from '../../hooks/useIsMounted';
1111
import CodePreview from '../CodePreview/CodePreview';
12+
import CopyButton from '../CopyButton/CopyButton';
13+
14+
export type PreProps = {
15+
props: { children: string; className: string };
16+
};
1217

1318
type CodeBlockProps = {
1419
live?: boolean;
1520
/** Name the element to add an accessible editor label */
1621
name?: string;
17-
};
18-
19-
type PreProps = {
20-
props: { children: string; className: string };
22+
children?: PreProps | ReactNode;
2123
};
2224

2325
const CodeBlock: React.FC<PropsWithChildren<CodeBlockProps>> = ({
@@ -76,6 +78,8 @@ const CodeBlock: React.FC<PropsWithChildren<CodeBlockProps>> = ({
7678
padding="5"
7779
position="relative"
7880
>
81+
<CopyButton content={code} />
82+
7983
{tokens.map((line, i) => (
8084
<Box
8185
key={i}

‎apps/docs/src/components/CodePreview/CodePreview.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Box, Text, VisuallyHidden } from '@strum/react';
44
import { kebabCase } from 'lodash';
55
import { PrismTheme } from 'prism-react-renderer';
66
import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live';
7+
import CopyButton from '../CopyButton/CopyButton';
78
import { codeEditorContainerStyle } from './CodePreview.css';
89

910
interface CodePreviewProps {
@@ -69,6 +70,8 @@ const CodePreview: React.FC<CodePreviewProps> = ({
6970
position="relative"
7071
whiteSpace="normal"
7172
>
73+
<CopyButton content={code} />
74+
7275
<VisuallyHidden as="label" htmlFor={kebabCase(name)}>
7376
Edit the {name} code
7477
</VisuallyHidden>

‎apps/docs/src/components/CopyButton/CopyButton.css.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { style } from '@vanilla-extract/css';
2+
3+
export const copyButtonStyle = style({
4+
right: '1rem',
5+
top: '1rem',
6+
zIndex: 1,
7+
});

‎apps/docs/src/components/CopyButton/CopyButton.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2+
import { faCheck, faCopy } from '@fortawesome/sharp-solid-svg-icons';
3+
import { Box, Button, Tooltip } from '@strum/react';
4+
import { default as copy } from 'copy-to-clipboard';
5+
import React from 'react';
6+
import { copyButtonStyle } from './CopyButton.css';
7+
8+
type CopyButtonProps = {
9+
content: string;
10+
};
11+
12+
type State = {
13+
copied: boolean;
14+
};
15+
16+
const initialState = {
17+
copied: false,
18+
};
19+
20+
const CopyButton: React.FC<CopyButtonProps> = ({ content }) => {
21+
const timeoutRef = React.useRef<NodeJS.Timeout>();
22+
const [state, setState] = React.useState<State>(initialState);
23+
24+
const onClick = React.useCallback(() => {
25+
if (timeoutRef.current) {
26+
clearTimeout(timeoutRef.current);
27+
setState((x) => ({ ...x, copied: false }));
28+
}
29+
30+
copy(content, {
31+
format: 'text/plain',
32+
});
33+
34+
setState((x) => ({ ...x, copied: true }));
35+
timeoutRef.current = setTimeout(
36+
() => setState((x) => ({ ...x, copied: false })),
37+
2000,
38+
);
39+
}, [content]);
40+
41+
return (
42+
<Box className={copyButtonStyle} position="absolute">
43+
<Tooltip color="neutral" content="Copy to clipboard">
44+
<Button
45+
color={state.copied ? 'success' : 'neutral'}
46+
onClick={onClick}
47+
size="small"
48+
>
49+
{state.copied ? (
50+
<>
51+
<FontAwesomeIcon fixedWidth icon={faCheck} />
52+
</>
53+
) : (
54+
<>
55+
<FontAwesomeIcon fixedWidth icon={faCopy} />
56+
</>
57+
)}
58+
</Button>
59+
</Tooltip>
60+
</Box>
61+
);
62+
};
63+
64+
export default CopyButton;

‎apps/docs/src/components/MDX/MDXComponents.tsx

+3-25
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
22
import { faLink } from '@fortawesome/sharp-solid-svg-icons';
33
import { Components } from '@mdx-js/react/lib';
4-
import { Box, Heading, Skeleton, Text, VisuallyHidden } from '@strum/react';
4+
import { Box, Heading, Text, VisuallyHidden } from '@strum/react';
55
import { kebabCase } from 'lodash';
66
import dynamic from 'next/dynamic';
77
import Link from 'next/link';
8-
import { Suspense } from 'react';
98
import InlineCode from '../InlineCode/InlineCode';
109
import PageHead from '../PageHead/PageHead';
1110
import PageTitle from '../PageTitle/PageTitle';
@@ -16,9 +15,7 @@ import {
1615
headingWithAnchorStyle,
1716
} from './MDXComponents.css';
1817

19-
const CodeBlock = dynamic(() => import('../CodeBlock/CodeBlock'), {
20-
suspense: true,
21-
});
18+
const CodeBlock = dynamic(() => import('../CodeBlock/CodeBlock'));
2219

2320
const MDXComponents: Components = {
2421
code: ({ children }) => <InlineCode>{children}</InlineCode>,
@@ -69,26 +66,7 @@ const MDXComponents: Components = {
6966
<Text as="p">{children}</Text>
7067
</Box>
7168
),
72-
pre: ({ children, ...rest }) => (
73-
<Suspense
74-
fallback={
75-
<Box
76-
backgroundColor="neutral2"
77-
borderColor="neutral6"
78-
borderRadius="2xLarge"
79-
borderStyle="solid"
80-
borderWidth="1"
81-
color="neutral10"
82-
padding="5"
83-
position="relative"
84-
>
85-
<Skeleton />
86-
</Box>
87-
}
88-
>
89-
<CodeBlock {...rest}>{children}</CodeBlock>
90-
</Suspense>
91-
),
69+
pre: (props) => <CodeBlock {...props} />,
9270
PageHead,
9371
PageTitle,
9472
PropsTable,

‎apps/docs/src/components/MainNav/NavLinks.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@ type NavLinksProps = {
1212

1313
const navGap = '3';
1414

15-
const NavGroupHeading: React.FC<PropsWithChildren> = ({ children }) => (
16-
<Box marginBottom={navGap}>
17-
<Text color="neutral12" transform="uppercase" weight="semiBold">
18-
{children}
19-
</Text>
20-
</Box>
21-
);
15+
const NavGroupHeading: React.FC<PropsWithChildren> = ({ children }) => {
16+
return (
17+
<Box marginBottom={navGap}>
18+
<Text color="neutral12" transform="uppercase" weight="semiBold">
19+
{children}
20+
</Text>
21+
</Box>
22+
);
23+
};
2224

2325
type NavListProps = {
2426
links: NavLink[];

‎apps/docs/src/components/NeutralSelect/NeutralSelect.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const NeutralSelect: React.FC = () => {
99
return (
1010
<Select
1111
name="Neutral color"
12-
onValueChange={(value: NeutralColor) => setNeutral(value)}
12+
onChange={(value: NeutralColor) => setNeutral(value)}
1313
placeholder="Select neutral color"
1414
value={neutral}
1515
>

0 commit comments

Comments
 (0)