Create design-system package

StanfordBDHG · Jun 4, 2024 · 8da12e2 · 8da12e2
1 parent ef1a895
commit 8da12e2
Show file tree

Hide file tree

Showing 34 changed files with 13,207 additions and 98 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -103,10 +103,10 @@
   },
   "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
@@ -7,11 +7,8 @@
 //
 
 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 +18,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',
-  },
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,21 +13,20 @@
   },
   "private": true,
   "scripts": {
-    "dev": "concurrently \"next dev\" \"npm --prefix packages/example-package run watch\"",
-    "prebuild": "npm --prefix packages/example-package run build",
-    "buildTypes": "npm --prefix packages/example-package run buildTypes",
+    "dev": "concurrently \"next dev\" \"npm --prefix packages/design-system run watch\"",
+    "prebuild": "npm --prefix packages/design-system run build",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix & prettier --write .",
-    "lint:ci": "npm run buildTypes && eslint --output-file eslint_report.json --format json .",
-    "pretest": "npm --prefix packages/example-package run build",
+    "lint:ci": "npm run prebuild && eslint --output-file eslint_report.json --format json .",
+    "pretest": "npm run prebuild",
     "test": "jest",
     "docs": "typedoc",
     "docs:ci": "typedoc --out ./out/docs --githubPages true"
   },
   "dependencies": {
-    "@stanfordbdhg/example-package": "file:../packages/example-package",
+    "@stanfordbdhg/design-system": "file:./packages/design-system",
     "next": "^14",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "react": "^18",

diff --git a/packages/example-package/.gitignore → packages/design-system/.gitignore b/packages/example-package/.gitignore → packages/design-system/.gitignore
@@ -6,4 +6,6 @@
 # SPDX-License-Identifier: MIT
 #
 
-dist
+dist
+node_modules
+*storybook.log
diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
@@ -0,0 +1,16 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+}
+export default config