Merge pull request #5 from teambit/automations.design/design-system-foundation

feat: heading component and theme

Author: nachoaldamav

.bitmap

@@ -9,6 +9,15 @@
  */
 
 {
+    "automations-theme": {
+        "name": "automations-theme",
+        "scope": "automations.design",
+        "version": "7205314d3cc10458a251d9304828496b0d5187c8",
+        "mainFile": "index.ts",
+        "rootDir": "bit-components/design/automations-theme",
+        "onLanesOnly": true,
+        "isAvailableOnCurrentLane": true
+    },
     "envs/automations-env": {
         "name": "envs/automations-env",
         "scope": "automations.design",
@@ -30,6 +39,15 @@
         "mainFile": "index.ts",
         "rootDir": "bit-components/design/patterns/header"
     },
+    "typography/heading": {
+        "name": "typography/heading",
+        "scope": "automations.design",
+        "version": "1d88b85c2d7a37a0daff860ab684dc15adcbae43",
+        "mainFile": "index.ts",
+        "rootDir": "bit-components/design/typography/heading",
+        "onLanesOnly": true,
+        "isAvailableOnCurrentLane": true
+    },
     "ui/button": {
         "name": "ui/button",
         "scope": "automations.design",
@@ -58,5 +76,12 @@
         "mainFile": "index.ts",
         "rootDir": "bit-components/design/ui/input"
     },
-    "$schema-version": "17.0.0"
+    "$schema-version": "17.0.0",
+    "_bit_lane": {
+        "id": {
+            "name": "design-system-foundation",
+            "scope": "automations.design"
+        },
+        "exported": true
+    }
 }

.github/workflows/pull-request.yml

@@ -21,7 +21,7 @@ jobs:
             ws-dir: '.'
 
       - name: Bit Pull Request
-        uses: bit-tasks/pull-request@main
+        uses: bit-tasks/pull-request@v3
         with:
           build: true
           version-labels: true

.github/workflows/verify.yml

@@ -1,6 +1,9 @@
 name: Bit verify
 
-on: push
+on:
+  push:
+    branches:
+      - main
 
 jobs:
   verify:

bit-components/design/automations-theme/automations-theme-provider.tsx

@@ -0,0 +1,16 @@
+import { createTheme } from '@bitdesign/sparks.sparks-theme';
+import { AutomationsThemeSchema, automationsTokens } from './automations-tokens.js';
+
+/**
+ * creating and declaring the automations theme.
+ * define the theme schema as a type variable for proper type completions.
+ */
+export const AutomationsThemeProvider = createTheme<AutomationsThemeSchema>({
+  tokens: automationsTokens,
+});
+
+/**
+ * a react hook for contextual access to design token
+ * from components.
+ */
+export const { useTheme } = AutomationsThemeProvider;

bit-components/design/automations-theme/automations-theme.compositions.tsx

@@ -0,0 +1,25 @@
+import { TokenViewer } from '@bitdesign/sparks.sparks-theme';
+import { useTheme } from './automations-theme-provider.js';
+import { AutomationsTheme } from './automations-theme.js';
+
+function ViewTokens() {
+  const theme = useTheme();
+
+  return <TokenViewer theme={theme} />;
+}
+
+export const LightTheme = () => {
+  return (
+    <AutomationsTheme>
+      <ViewTokens />
+    </AutomationsTheme>
+  );
+};
+
+export const DarkTheme = () => {
+  return (
+    <AutomationsTheme initialTheme='dark'>
+      <ViewTokens />
+    </AutomationsTheme>
+  );
+};

bit-components/design/automations-theme/automations-theme.docs.mdx

@@ -0,0 +1,79 @@
+---
+description: A theme for the Automations organization, providing tokens, fonts, and styling for components.
+labels: ['theme', 'design tokens', 'theming', 'automations']
+---
+
+The `AutomationsTheme` component provides a consistent look and feel across your application by applying design tokens for typography, colors, spacing, and sizes. It supports both light and dark modes.
+
+## Get Started
+
+To use the `AutomationsTheme` in your project:
+
+```bash
+bit install @your-org/automations-theme
+```
+or
+```bash
+npm install @your-org/automations-theme
+```
+Wrap your application with the `AutomationsTheme` component:
+```tsx
+function App() {
+  return (
+    <AutomationsTheme>
+      <YourAppContent />
+    </AutomationsTheme>
+  );
+}
+```
+## Usage Examples
+### Basic Usage
+Apply the `AutomationsTheme` to wrap your application and provide a consistent theme.
+```tsx
+function AppContent() {
+  return (
+    <div>
+      <h1>Welcome to Automations App</h1>
+      <p>This is a themed paragraph.</p>
+    </div>
+  );
+}
+export const BasicUsage = () => (
+  <AutomationsTheme>
+    <AppContent />
+  </AutomationsTheme>
+);
+```
+### Dark Mode
+Use the `initialTheme` prop to set the theme to dark mode by default.
+```tsx
+function AppContent() {
+  return (
+    <div>
+      <h1>Welcome to Automations App</h1>
+      <p>This is a themed paragraph in dark mode.</p>
+    </div>
+  );
+}
+export const DarkModeExample = () => (
+  <AutomationsTheme initialTheme="dark">
+    <AppContent />
+  </AutomationsTheme>
+);
+```
+### Custom Class Name
+Add a `className` prop to customize the theme's appearance, and/or override certain styles.
+```tsx
+function AppContent() {
+  return (
+    <div>
+      <h1>Welcome to Automations App</h1>
+      <p>This is a themed paragraph with custom styles.</p>
+    </div>
+  );
+}
+export const CustomClassName = () => (
+  <AutomationsTheme className="my-custom-theme">
+    <AppContent />
+  </AutomationsTheme>
+);

bit-components/design/automations-theme/automations-theme.module.scss

@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+.automationsTheme {
+  /* use a font family here to apply a default font on theme childs. */
+  font-family: var(--typography-font-family);
+
+  /* use the theme background color to apply for all components in your tree. */
+  background-color: var(--colors-surface-background);
+}
+
+:global {
+  html {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  *, *::before, *::after {
+    box-sizing: inherit;
+  }
+}

bit-components/design/automations-theme/automations-theme.spec.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { AutomationsTheme } from './automations-theme.js';
+import styles from './automations-theme.module.scss';
+
+describe('AutomationsTheme', () => {
+  it('renders with children', () => {
+    render(
+      <MemoryRouter>
+        <AutomationsTheme>
+          <div>Hello World</div>
+        </AutomationsTheme>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('applies the automationsTheme class', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <AutomationsTheme>
+          <div>Hello World</div>
+        </AutomationsTheme>
+      </MemoryRouter>
+    );
+    expect(container.firstChild).toHaveClass(styles.automationsTheme);
+  });
+
+  it('accepts a className prop', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <AutomationsTheme className="custom-class">
+          <div>Hello World</div>
+        </AutomationsTheme>
+      </MemoryRouter>
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+});

bit-components/design/automations-theme/automations-theme.tsx

@@ -0,0 +1,72 @@
+import { ReactNode, useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { AutomationsThemeProvider } from './automations-theme-provider.js';
+import { AutomationsThemeSchema } from './automations-tokens.js';
+import { ThemeContext, ThemeContextValue, ThemeMode } from './theme-controller.js';
+import { themeOptions } from './theme-options.js';
+import styles from './automations-theme.module.scss';
+
+export type AutomationsThemeProps = {
+  /**
+   * a root ReactNode for the component tree 
+   * applied with the theme.
+   */
+  children?: ReactNode;
+
+  /**
+   * inject a class name to override to the theme.
+   * this allows people to affect your theme. remove to avoid.
+   */
+  className?: string;
+
+  /**
+   * override tokens in the schema
+   */
+  overrides?: Partial<AutomationsThemeSchema>;
+
+  /**
+   * preset of the theme.
+   */
+  initialTheme?: ThemeMode;
+
+  /**
+   * style tags to include.
+   */
+  style?: React.CSSProperties;
+};
+
+/**
+ * a theme for the Automations organization.
+ * it provides tokens, fonts and general styling for all components.
+ */
+export function AutomationsTheme({ children, initialTheme = 'light', className, style, ...rest }: AutomationsThemeProps) {
+  const [themeMode, setThemeModeState] = useState<ThemeMode>(initialTheme);
+  const themePreset = themeOptions[themeMode];
+
+  const setThemeMode = useCallback((mode: ThemeMode) => {
+    setThemeModeState(mode);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setThemeModeState(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
+  }, []);
+
+  const themeContextValue: ThemeContextValue = {
+    themeMode,
+    toggleTheme,
+    setThemeMode,
+  };
+  
+  return (
+    <ThemeContext.Provider value={themeContextValue}>
+      <AutomationsThemeProvider.ThemeProvider
+        className={classNames(styles.automationsTheme, className)}
+        style={style}
+        overrides={themePreset}
+        {...rest}
+      >
+        {children}
+      </AutomationsThemeProvider.ThemeProvider>
+    </ThemeContext.Provider>
+  );
+}