Adding Toast component (#46)

* Starting work on Toast component.

* Toast is working and looking good, but still working on some architecture decisions.

* Add useToast hook and update provider. Update docs.

* Docs update.

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
 
 yarnPath: .yarn/releases/yarn-3.2.3.cjs
 
-npmPublishRegistry: https://registry.npmjs.org
+npmPublishRegistry: https://registry.yarnpkg.com

apps/docs/package.json

@@ -46,7 +46,7 @@
     "@types/deepmerge": "2.2.0",
     "@types/glob": "8.0.0",
     "@types/lodash": "4.14.186",
-    "@types/node": "18.7.23",
+    "@types/node": "18.8.0",
     "@types/react": "18.0.21",
     "eslint": "8.24.0",
     "next-compose-plugins": "2.2.1",

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

@@ -12,12 +12,14 @@ interface CodePreviewProps {
   /** Name the element to add an accessible editor label */
   name?: string;
   theme: PrismTheme;
+  wrapped?: boolean;
 }
 
 const CodePreview: React.FC<CodePreviewProps> = ({
   code,
   name,
   theme,
+  wrapped = true,
   ...rest
 }) => {
   return (
@@ -30,7 +32,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
         ...rest,
       }}
       theme={theme}
-      transformCode={(code) => `<>${code}</>`}
+      transformCode={(code) => (wrapped ? `<>${code}</>` : code)}
     >
       <Box
         backgroundColor="neutral1"

apps/docs/src/pages/[category]/[slug].tsx

@@ -51,7 +51,6 @@ type StaticProps = {
 };
 
 export const getStaticProps: GetStaticProps<StaticProps> = async (context) => {
-  const category = context.params?.category?.toString() as string;
   const slug = context.params?.slug?.toString() as string;
   const pathname = getAllPaths().find(
     (x) => getComponentName(x) === slug,

packages/strum-react/package.json

@@ -56,6 +56,7 @@
     "@radix-ui/react-label": "1.0.0",
     "@radix-ui/react-radio-group": "1.0.0",
     "@radix-ui/react-select": "1.0.0",
+    "@radix-ui/react-toast": "1.0.0",
     "@radix-ui/react-tooltip": "1.0.0",
     "@vanilla-extract/css": "1.9.1",
     "@vanilla-extract/css-utils": "0.1.2",

packages/strum-react/src/components/Button/Button.tsx

@@ -3,7 +3,7 @@ import { Box, BoxProps, Stack } from '../../layouts';
 import { Spinner } from '../Spinner';
 import * as styles from './Button.css';
 
-type BaseProps = {
+type ButtonBaseProps = {
   /** Shape of the button */
   borderRadius?: BoxProps['borderRadius'];
   /** Show a loading spinner as a prefix */
@@ -26,12 +26,12 @@ type WithAnchor = {
 } & Pick<JSX.IntrinsicElements['a'], 'href' | 'rel' | 'target'>;
 
 type WithoutAnchor = {
+  as?: 'button';
   /** Set the disabled state of the button */
   disabled?: boolean;
-  as?: 'button';
 };
 
-type ButtonProps = BaseProps & (WithAnchor | WithoutAnchor);
+export type ButtonProps = ButtonBaseProps & (WithAnchor | WithoutAnchor);
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (

packages/strum-react/src/components/Input/Input.docs.mdx

@@ -78,7 +78,7 @@ To control your input with React, simply include a `value` string prop and a `on
 ```tsx live name="controlled input" songTitle="Symphony No. 31" changeSongTitle={(e) => {alert(e.target.value)}}
 <Stack>
   <Input
-    id="input-text"
+    id="controlled-input"
     label="Text input"
     onChange={changeSongTitle}
     type="text"

packages/strum-react/src/components/Toast/Toast.css.ts

@@ -0,0 +1,161 @@
+import { createVar, keyframes, style } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { atoms, motionSafe, vars } from '../../css';
+
+export const TOAST_VIEWPORT_PADDING = '2rem';
+const translateDistance = calc.add('100%', TOAST_VIEWPORT_PADDING);
+
+const colorPrimary = createVar();
+const colorSecondary = createVar();
+
+const hide = keyframes({
+  '0%': { opacity: 1 },
+  '100%': { opacity: 0 },
+});
+
+const slideIn = keyframes({
+  from: {
+    transform: `translateX(${translateDistance})`,
+  },
+  to: { transform: 'translateX(0)' },
+});
+
+const swipeOut = keyframes({
+  from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
+  to: { transform: `translateX(${translateDistance})` },
+});
+
+export const toastRecipe = recipe({
+  base: [
+    atoms({
+      alignItems: 'center',
+      borderRadius: 'medium',
+      boxShadow: 'medium',
+      borderStyle: 'solid',
+      borderWidth: '1',
+      display: 'flex',
+      padding: '4',
+    }),
+    {
+      columnGap: vars.space[2],
+
+      ...motionSafe({
+        selectors: {
+          '&[data-state="open"]': {
+            animationName: slideIn,
+            animationDuration: vars.transitionDurations[300],
+            animationTimingFunction: vars.transitionEasingFunctions.out,
+          },
+          '&[data-state="closed"]': {
+            animationName: hide,
+            animationDuration: vars.transitionDurations[150],
+            animationTimingFunction: vars.transitionEasingFunctions.in,
+          },
+          '&[data-swipe="move"]': {
+            transform: 'translateX(var(--radix-toast-swipe-move-x))',
+          },
+          '&[data-swipe="cancel"]': {
+            transform: 'translateX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: vars.transitionDurations[300],
+            transitionTimingFunction: vars.transitionEasingFunctions.out,
+          },
+          '&[data-swipe="end"]': {
+            animationName: swipeOut,
+            animationDuration: vars.transitionDurations[150],
+            animationTimingFunction: vars.transitionEasingFunctions.out,
+          },
+        },
+      }),
+    },
+  ],
+  defaultVariants: {
+    color: 'neutral',
+  },
+  variants: {
+    color: {
+      accent: [
+        atoms({
+          backgroundColor: 'accent3',
+          borderColor: 'accent6',
+        }),
+        {
+          vars: {
+            [colorPrimary]: vars.accent.accent12,
+            [colorSecondary]: vars.accent.accent11,
+          },
+        },
+      ],
+      neutral: [
+        atoms({
+          backgroundColor: 'neutral3',
+          borderColor: 'neutral6',
+        }),
+        {
+          vars: {
+            [colorPrimary]: vars.neutral.neutral12,
+            [colorSecondary]: vars.neutral.neutral11,
+          },
+        },
+      ],
+      error: [
+        atoms({
+          backgroundColor: 'error3',
+          borderColor: 'error6',
+        }),
+        {
+          vars: {
+            [colorPrimary]: vars.error.error12,
+            [colorSecondary]: vars.error.error11,
+          },
+        },
+      ],
+      warning: [
+        atoms({
+          backgroundColor: 'warning3',
+          borderColor: 'warning6',
+        }),
+        {
+          vars: {
+            [colorPrimary]: vars.warning.warning12,
+            [colorSecondary]: vars.warning.warning11,
+          },
+        },
+      ],
+      success: [
+        atoms({
+          backgroundColor: 'success3',
+          borderColor: 'success6',
+        }),
+        {
+          vars: {
+            [colorPrimary]: vars.success.success12,
+            [colorSecondary]: vars.success.success11,
+          },
+        },
+      ],
+    },
+  },
+});
+
+export const toastTitleStyle = style([
+  atoms({
+    fontSize: 'base',
+    fontWeight: 'medium',
+    marginBottom: '2',
+  }),
+  { color: colorPrimary },
+]);
+
+export const toastDescriptionStyle = style([
+  atoms({
+    fontSize: 'small',
+    margin: '0',
+  }),
+  {
+    color: colorSecondary,
+  },
+]);
+
+export type ToastRecipe = RecipeVariants<typeof toastRecipe>;