Create design system package (#2)

# Create design system package ## ♻️ Current situation & Problem We need separate package with design system components and instructions to reuse. ## ⚙️ Release Notes * Create design system package ## 📚 Documentation * Adds design-system module * Removes example module * Adds `Button` component with storybook, tests, cva. Blueprint for future components ### Code of Conduct & Contributing Guidelines By submitting creating this pull request, you agree to follow our [Code of Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md) and [Contributing Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md): - [x] I agree to follow the [Code of Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md) and [Contributing Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).
StanfordBDHG · Jun 5, 2024 · bc23665 · bc23665
1 parent 5f7feb8
commit bc23665
Show file tree

Hide file tree

Showing 34 changed files with 27,239 additions and 5,832 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -103,7 +103,7 @@
   },
   "overrides": [
     {
-      "files": ["app/**/*.ts?(x)"],
+      "files": ["app/**/*.ts?(x)", "**/*.stories.ts?(x)"],
       "rules": {
         "import/no-default-export": "off"
       }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,10 +5,11 @@
 //
 // SPDX-License-Identifier: MIT
 //
-
 import type { Metadata } from 'next'
 import type { ReactNode } from 'react'
 import './globals.css'
+import '@stanfordbdhg/design-system/main.css'
+import { themeToCSSVariables, lightTheme } from '@stanfordbdhg/design-system'
 
 export const metadata: Metadata = {
   title: 'ENGAGE-HF Web Frontend',
@@ -22,6 +23,14 @@ interface RootLayoutProps {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
+      <head>
+        <style>
+          {`
+          :root { ${themeToCSSVariables(lightTheme)} }
+          `}
+        </style>
+      </head>
+
       <body>{children}</body>
     </html>
   )

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,13 +5,9 @@
 //
 // SPDX-License-Identifier: MIT
 //
-
 import Image from 'next/image'
-import { generateGreeting } from '@stanfordbdhg/example-package'
 
 export default function Home() {
-  const greeting = generateGreeting()
-
   return (
     <div className="flex min-h-screen items-center justify-center">
       <div className="flex flex-col items-center">
@@ -21,7 +17,10 @@ export default function Home() {
           width={634}
           height={235}
         />
-        <h1 className="mt-4 text-center text-3xl">{`${greeting.message} to the ${greeting.project}`}</h1>
+        <h1 className="mt-4 text-center text-3xl">
+          Welcome to the Stanford Biodesign Digital Health ENGAGE-HF Web
+          Frontend
+        </h1>
       </div>
     </div>
   )

diff --git a/jest.config.js b/jest.config.js
@@ -20,8 +20,4 @@ module.exports = {
       },
     ],
   },
-  moduleNameMapper: {
-    '^@stanfordbdhg/example-package$':
-      '<rootDir>/packages/example-package/dist',
-  },
 }