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

Commit

Permalink
[1.1.0] Adding new components (#21)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@colinhemphill
colinhemphill authored Sep 19, 2022
1 parent 8a4ddaa commit 703cb12
Show file tree
Hide file tree
Showing 76 changed files with 2,076 additions and 713 deletions.
9 changes: 5 additions & 4 deletions apps/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@vanilla-extract/css": "1.9.0",
"@vanilla-extract/css-utils": "0.1.2",
"@vanilla-extract/next-plugin": "2.0.2",
"copy-to-clipboard": "3.3.2",
"glob": "8.0.3",
"lodash": "4.17.21",
"next": "12.3.0",
Expand All @@ -39,19 +40,19 @@
"remark-mdx-code-meta": "2.0.0"
},
"devDependencies": {
"@babel/core": "7.19.0",
"@babel/core": "7.19.1",
"@strum/eslint-config": "*",
"@strum/tsconfig": "*",
"@types/deepmerge": "2.2.0",
"@types/glob": "8.0.0",
"@types/lodash": "4.14.185",
"@types/node": "18.7.17",
"@types/react": "18.0.19",
"@types/node": "18.7.18",
"@types/react": "18.0.20",
"eslint": "8.23.1",
"next-compose-plugins": "2.2.1",
"next-transpile-modules": "9.0.0",
"rimraf": "3.0.2",
"turbo": "1.4.6",
"turbo": "1.4.7",
"typescript": "4.8.3"
}
}
54 changes: 27 additions & 27 deletions apps/docs/public/sitemap-0.xml
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<url><loc>https://strum.design</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<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>
<url><loc>https://strum.design/overview/development</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Alert</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Avatar</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Badge</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Box</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Button</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Card</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Checkbox</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Container</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Dialog</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Heading</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Input</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Nav</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Radio</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Select</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Skeleton</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Spinner</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Stack</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/StrumProvider</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Switch</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Text</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Textarea</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Toast</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Tooltip</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/VisuallyHidden</loc><lastmod>2022-09-13T14:27:20.746Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<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>
<url><loc>https://strum.design/overview/development</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Alert</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Avatar</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Badge</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Box</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Button</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Card</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Checkbox</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Container</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Dialog</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Heading</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Input</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Nav</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Radio</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Select</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Skeleton</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Spinner</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Stack</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/StrumProvider</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Switch</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Text</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Textarea</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Toast</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/Tooltip</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://strum.design/components/VisuallyHidden</loc><lastmod>2022-09-19T22:47:57.912Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
</urlset>
2 changes: 1 addition & 1 deletion apps/docs/src/components/AccentSelect/AccentSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const AccentSelect: React.FC = () => {
return (
<Select
name="Accent color"
onValueChange={(value: AccentColor) => setAccent(value)}
onChange={(value: AccentColor) => setAccent(value)}
placeholder="Select accent color"
value={accent}
>
Expand Down
14 changes: 9 additions & 5 deletions apps/docs/src/components/CodeBlock/CodeBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,20 @@ import Highlight, {
} from 'prism-react-renderer';
import vsDark from 'prism-react-renderer/themes/vsDark';
import vsLight from 'prism-react-renderer/themes/vsLight';
import { PropsWithChildren } from 'react';
import { PropsWithChildren, ReactNode } from 'react';
import { useIsMounted } from '../../hooks/useIsMounted';
import CodePreview from '../CodePreview/CodePreview';
import CopyButton from '../CopyButton/CopyButton';

export type PreProps = {
props: { children: string; className: string };
};

type CodeBlockProps = {
live?: boolean;
/** Name the element to add an accessible editor label */
name?: string;
};

type PreProps = {
props: { children: string; className: string };
children?: PreProps | ReactNode;
};

const CodeBlock: React.FC<PropsWithChildren<CodeBlockProps>> = ({
Expand Down Expand Up @@ -76,6 +78,8 @@ const CodeBlock: React.FC<PropsWithChildren<CodeBlockProps>> = ({
padding="5"
position="relative"
>
<CopyButton content={code} />

{tokens.map((line, i) => (
<Box
key={i}
Expand Down
3 changes: 3 additions & 0 deletions apps/docs/src/components/CodePreview/CodePreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Box, Text, VisuallyHidden } from '@strum/react';
import { kebabCase } from 'lodash';
import { PrismTheme } from 'prism-react-renderer';
import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live';
import CopyButton from '../CopyButton/CopyButton';
import { codeEditorContainerStyle } from './CodePreview.css';

interface CodePreviewProps {
Expand Down Expand Up @@ -69,6 +70,8 @@ const CodePreview: React.FC<CodePreviewProps> = ({
position="relative"
whiteSpace="normal"
>
<CopyButton content={code} />

<VisuallyHidden as="label" htmlFor={kebabCase(name)}>
Edit the {name} code
</VisuallyHidden>
Expand Down
7 changes: 7 additions & 0 deletions apps/docs/src/components/CopyButton/CopyButton.css.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { style } from '@vanilla-extract/css';

export const copyButtonStyle = style({
right: '1rem',
top: '1rem',
zIndex: 1,
});
64 changes: 64 additions & 0 deletions apps/docs/src/components/CopyButton/CopyButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck, faCopy } from '@fortawesome/sharp-solid-svg-icons';
import { Box, Button, Tooltip } from '@strum/react';
import { default as copy } from 'copy-to-clipboard';
import React from 'react';
import { copyButtonStyle } from './CopyButton.css';

type CopyButtonProps = {
content: string;
};

type State = {
copied: boolean;
};

const initialState = {
copied: false,
};

const CopyButton: React.FC<CopyButtonProps> = ({ content }) => {
const timeoutRef = React.useRef<NodeJS.Timeout>();
const [state, setState] = React.useState<State>(initialState);

const onClick = React.useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
setState((x) => ({ ...x, copied: false }));
}

copy(content, {
format: 'text/plain',
});

setState((x) => ({ ...x, copied: true }));
timeoutRef.current = setTimeout(
() => setState((x) => ({ ...x, copied: false })),
2000,
);
}, [content]);

return (
<Box className={copyButtonStyle} position="absolute">
<Tooltip color="neutral" content="Copy to clipboard">
<Button
color={state.copied ? 'success' : 'neutral'}
onClick={onClick}
size="small"
>
{state.copied ? (
<>
<FontAwesomeIcon fixedWidth icon={faCheck} />
</>
) : (
<>
<FontAwesomeIcon fixedWidth icon={faCopy} />
</>
)}
</Button>
</Tooltip>
</Box>
);
};

export default CopyButton;
28 changes: 3 additions & 25 deletions apps/docs/src/components/MDX/MDXComponents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLink } from '@fortawesome/sharp-solid-svg-icons';
import { Components } from '@mdx-js/react/lib';
import { Box, Heading, Skeleton, Text, VisuallyHidden } from '@strum/react';
import { Box, Heading, Text, VisuallyHidden } from '@strum/react';
import { kebabCase } from 'lodash';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { Suspense } from 'react';
import InlineCode from '../InlineCode/InlineCode';
import PageHead from '../PageHead/PageHead';
import PageTitle from '../PageTitle/PageTitle';
Expand All @@ -16,9 +15,7 @@ import {
headingWithAnchorStyle,
} from './MDXComponents.css';

const CodeBlock = dynamic(() => import('../CodeBlock/CodeBlock'), {
suspense: true,
});
const CodeBlock = dynamic(() => import('../CodeBlock/CodeBlock'));

const MDXComponents: Components = {
code: ({ children }) => <InlineCode>{children}</InlineCode>,
Expand Down Expand Up @@ -69,26 +66,7 @@ const MDXComponents: Components = {
<Text as="p">{children}</Text>
</Box>
),
pre: ({ children, ...rest }) => (
<Suspense
fallback={
<Box
backgroundColor="neutral2"
borderColor="neutral6"
borderRadius="2xLarge"
borderStyle="solid"
borderWidth="1"
color="neutral10"
padding="5"
position="relative"
>
<Skeleton />
</Box>
}
>
<CodeBlock {...rest}>{children}</CodeBlock>
</Suspense>
),
pre: (props) => <CodeBlock {...props} />,
PageHead,
PageTitle,
PropsTable,
Expand Down
16 changes: 9 additions & 7 deletions apps/docs/src/components/MainNav/NavLinks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ type NavLinksProps = {

const navGap = '3';

const NavGroupHeading: React.FC<PropsWithChildren> = ({ children }) => (
<Box marginBottom={navGap}>
<Text color="neutral12" transform="uppercase" weight="semiBold">
{children}
</Text>
</Box>
);
const NavGroupHeading: React.FC<PropsWithChildren> = ({ children }) => {
return (
<Box marginBottom={navGap}>
<Text color="neutral12" transform="uppercase" weight="semiBold">
{children}
</Text>
</Box>
);
};

type NavListProps = {
links: NavLink[];
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/components/NeutralSelect/NeutralSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const NeutralSelect: React.FC = () => {
return (
<Select
name="Neutral color"
onValueChange={(value: NeutralColor) => setNeutral(value)}
onChange={(value: NeutralColor) => setNeutral(value)}
placeholder="Select neutral color"
value={neutral}
>
Expand Down
Loading

1 comment on commit 703cb12

@vercel
Copy link

@vercel vercel bot commented on 703cb12 Sep 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

strum-design – ./

strum.design
strum-design-git-main-colin-hemphill.vercel.app
www.strum.design
strum-design.vercel.app
strum-design-colin-hemphill.vercel.app

Please sign in to comment.