fix(docs): fix codesandbox link

bigcommerce · Sep 20, 2024 · d9afaaf · d9afaaf
1 parent 6bb21a5
commit d9afaaf
Show file tree

Hide file tree

Showing 7 changed files with 877 additions and 267 deletions.
diff --git a/.changeset/sharp-rabbits-end.md b/.changeset/sharp-rabbits-end.md
@@ -0,0 +1,6 @@
+---
+'@bigcommerce/docs': patch
+'@bigcommerce/examples': patch
+---
+
+Fix codesandbox link and update deps for examples.
diff --git a/packages/docs/next.config.js b/packages/docs/next.config.js
@@ -11,7 +11,7 @@ module.exports = {
   basePath: isProduction ? URL_PREFIX : '',
   output: 'export',
   env: {
-    CODE_SANDBOX_URL: `https://codesandbox.io/s/github/bigcommerce/big-design/tree/%40bigcommerce/examples%40${EXAMPLES_VERSION}/packages/examples`,
+    CODE_SANDBOX_URL: `https://codesandbox.io/p/devbox/github/bigcommerce/big-design/tree/%40bigcommerce/examples%40${EXAMPLES_VERSION}/packages/examples`,
     URL_PREFIX: isProduction ? URL_PREFIX : '',
     BD_VERSION: bdPkg.version,
   },

diff --git a/packages/examples/.eslintrc.js b/packages/examples/.eslintrc.js
@@ -1,5 +1,5 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
-  extends: [require.resolve('@bigcommerce/configs/eslint/base.js')],
+  extends: ['@bigcommerce/eslint-config'],
 };
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -10,23 +10,23 @@
   },
   "prettier": "@bigcommerce/eslint-config/prettier",
   "dependencies": {
-    "@bigcommerce/big-design": "workspace:^",
-    "@bigcommerce/big-design-icons": "workspace:^",
-    "@bigcommerce/big-design-theme": "workspace:^",
-    "formik": "^2.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.11",
-    "yup": "^1.0.2"
+    "@bigcommerce/big-design": "*",
+    "@bigcommerce/big-design-icons": "*",
+    "@bigcommerce/big-design-theme": "*",
+    "formik": "2.4.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.11",
+    "yup": "1.4.0"
   },
   "devDependencies": {
-    "@bigcommerce/configs": "workspace:^",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.73",
-    "@types/react-dom": "^18.2.23",
-    "@types/styled-components": "^5.1.34",
-    "@vitejs/plugin-react": "^4.0.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.10"
+    "@bigcommerce/eslint-config": "2.9.1",
+    "@types/node": "20.12.7",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.23",
+    "@types/styled-components": "5.1.34",
+    "@vitejs/plugin-react": "4.3.1",
+    "typescript": "5.4.5",
+    "vite": "5.4.7"
   }
 }
diff --git a/packages/examples/src/ProductForm.tsx b/packages/examples/src/ProductForm.tsx
@@ -11,23 +11,29 @@ const initialValues: Product = {
   category: 'Food',
 };
 
+const ProductSchema = Yup.object().shape({
+  name: Yup.string().min(2).max(50).required(),
+  stock: Yup.number().required().min(0).max(100),
+  category: Yup.string().required(),
+});
+
 interface Props {
   onNewProduct(product: Product): void;
 }
 
 export const ProductForm: React.FC<Props> = ({ onNewProduct }) => {
-  const onSubmit = (product: Product) => {
-    onNewProduct(product);
-    resetForm();
-  };
-
   const { errors, handleChange, handleSubmit, resetForm, setFieldValue, touched, values } =
     useFormik<Product>({
       initialValues,
       onSubmit,
       validationSchema: ProductSchema,
     });
 
+  function onSubmit(product: Product) {
+    onNewProduct(product);
+    resetForm();
+  }
+
   return (
     <>
       <H1>Product Form</H1>
@@ -80,9 +86,3 @@ export const ProductForm: React.FC<Props> = ({ onNewProduct }) => {
     </>
   );
 };
-
-const ProductSchema = Yup.object().shape({
-  name: Yup.string().min(2).max(50).required(),
-  stock: Yup.number().required().min(0).max(100),
-  category: Yup.string().required(),
-});
diff --git a/packages/examples/src/index.tsx b/packages/examples/src/index.tsx
@@ -1,5 +1,5 @@
 import { GlobalStyles } from '@bigcommerce/big-design';
-import { theme } from '@bigcommerce/big-design-theme';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import React from 'react';
 import { render } from 'react-dom';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
@@ -16,7 +16,7 @@ const AppGlobalStyles = createGlobalStyle`
 `;
 
 render(
-  <ThemeProvider theme={theme}>
+  <ThemeProvider theme={defaultTheme}>
     <>
       <AppGlobalStyles />
       <GlobalStyles />