feat: add new example for custom theme and copilot (#2052)

Author: nmerget

custom-theme-example/.codesandbox/template.json

@@ -0,0 +1,6 @@
+{
+  "title": "DB UX Design System - React 18 + tailwind example",
+  "description": "This is an example of using the DB UX Design System with React 18 and tailwind.",
+  "tags": ["react", "tailwind", "typescript", "vite"],
+  "published": true
+}

custom-theme-example/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};

custom-theme-example/.github/copilot-instructions.md

@@ -0,0 +1,67 @@
+
+--- START: DB UX Copilot Instructions ---
+
+# @db-ux/core-components
+## Common AI mistakes
+
+### `DBButton` or `db-button`
+
+- available variants are `outline`, `brand`, `filled`, `ghost`
+- always use variant `outline` as default
+- use variant `brand` as CTA or primary action
+- if `noText`/`no-text` property is used add a `DBTooltip` or `db-tooltip` inside the Button
+- always add a `type` as property as best practise
+
+
+# @db-ux/core-foundations
+## CSS
+
+- If you use CSS follow these rules:
+    - use for `variables` like, sizing, spacing, elevation, border, container-size the file node_modules/@db-ux/core-foundations/css/Variables.md
+
+## SCSS
+
+- If you use SCSS follow these rules:
+    - use for `variables` like, sizing, spacing, elevation, border, container-size the file node_modules/@db-ux/core-foundations/scss/Variables.md
+
+## Tailwind
+
+- If you use Tailwind follow these rules:
+    - use for `variables` like, sizing, spacing, elevation, border, container-size the file node_modules/@db-ux/core-foundations/tailwind/Variables.md
+    - Always stick with the variables don't use something like `p-4` or `m-[16px]` use `p-fix-xs` or `m-fix-md` instead.
+
+
+# @db-ux/react-core-components
+- Use "@db-ux/react-core-components" as import for components:
+  - use for `DBDrawer` or `Drawer` the file node_modules/@db-ux/react-core-components/Drawer.md
+  - use for `DBTooltip` or `Tooltip` the file node_modules/@db-ux/react-core-components/Tooltip.md
+  - use for `DBTextarea` or `Textarea` the file node_modules/@db-ux/react-core-components/Textarea.md
+  - use for `DBTag` or `Tag` the file node_modules/@db-ux/react-core-components/Tag.md
+  - use for `DBTabs` or `Tabs` the file node_modules/@db-ux/react-core-components/Tabs.md
+  - use for `DBTabItem` or `TabItem` the file node_modules/@db-ux/react-core-components/TabItem.md
+  - use for `DBSwitch` or `Switch` the file node_modules/@db-ux/react-core-components/Switch.md
+  - use for `DBStack` or `Stack` the file node_modules/@db-ux/react-core-components/Stack.md
+  - use for `DBSelect` or `Select` the file node_modules/@db-ux/react-core-components/Select.md
+  - use for `DBSection` or `Section` the file node_modules/@db-ux/react-core-components/Section.md
+  - use for `DBRadio` or `Radio` the file node_modules/@db-ux/react-core-components/Radio.md
+  - use for `DBPopover` or `Popover` the file node_modules/@db-ux/react-core-components/Popover.md
+  - use for `DBPage` or `Page` the file node_modules/@db-ux/react-core-components/Page.md
+  - use for `DBNotification` or `Notification` the file node_modules/@db-ux/react-core-components/Notification.md
+  - use for `DBNavigationItem` or `NavigationItem` the file node_modules/@db-ux/react-core-components/NavigationItem.md
+  - use for `DBNavigation` or `Navigation` the file node_modules/@db-ux/react-core-components/Navigation.md
+  - use for `DBLink` or `Link` the file node_modules/@db-ux/react-core-components/Link.md
+  - use for `DBInput` or `Input` the file node_modules/@db-ux/react-core-components/Input.md
+  - use for `DBInfotext` or `Infotext` the file node_modules/@db-ux/react-core-components/Infotext.md
+  - use for `DBIcon` or `Icon` the file node_modules/@db-ux/react-core-components/Icon.md
+  - use for `DBHeader` or `Header` the file node_modules/@db-ux/react-core-components/Header.md
+  - use for `DBDivider` or `Divider` the file node_modules/@db-ux/react-core-components/Divider.md
+  - use for `DBCustomSelect` or `CustomSelect` the file node_modules/@db-ux/react-core-components/CustomSelect.md
+  - use for `DBCheckbox` or `Checkbox` the file node_modules/@db-ux/react-core-components/Checkbox.md
+  - use for `DBCard` or `Card` the file node_modules/@db-ux/react-core-components/Card.md
+  - use for `DBButton` or `Button` the file node_modules/@db-ux/react-core-components/Button.md
+  - use for `DBBrand` or `Brand` the file node_modules/@db-ux/react-core-components/Brand.md
+  - use for `DBBadge` or `Badge` the file node_modules/@db-ux/react-core-components/Badge.md
+  - use for `DBAccordionItem` or `AccordionItem` the file node_modules/@db-ux/react-core-components/AccordionItem.md
+  - use for `DBAccordion` or `Accordion` the file node_modules/@db-ux/react-core-components/Accordion.md
+
+--- END: DB UX Copilot Instructions ---

custom-theme-example/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+**/fonts/all
+**/fonts/**/info.json
+**/fonts/**/*.eot
+**/fonts/**/*.svg
+**/fonts/**/*.ttf
+**/fonts/**/*.woff

custom-theme-example/.stackblitzrc

@@ -0,0 +1,3 @@
+{
+  "startCommand": "npm run dev"
+}

custom-theme-example/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

custom-theme-example/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DB UX Custom Theme</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>