@asantemedia-org/atlas-copco-vt-storybook 1.0.0

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"]
+}

package/.nvmrc

@@ -0,0 +1 @@
+21.6.1

package/.prettierignore

@@ -0,0 +1,2 @@
+# Ignore MDX files - Prettier corrupts JSX comment syntax {/* */} in MDX
+*.mdx

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false
+}

package/.storybook/AtlasCopcoTheme.ts

@@ -0,0 +1,14 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  appBg: "white",
+  appContentBg: "white",
+  appBorderColor: "#c5c7c4",
+  appBorderRadius: 4,
+  brandTitle: "Atlas Copco VT - Design System",
+  brandUrl: "https://www.atlascopco.com/",
+  brandImage:
+    "https://www.atlascopco.com/etc.clientlibs/settings/wcm/designs/accommons/design-system/clientlib-assets/resources/icons/logo.svg",
+  brandTarget: "_self",
+});

package/.storybook/global.scss

@@ -0,0 +1,15 @@
+/* Global CSS for Atlas Copco VTBA Design System */
+@use "../src/utils/styles/global" as *;
+@use "../src/utils/styles/base.scss" as *;
+@use "../src/utils/styles/typography.scss";
+
+.sidebar-item {
+  svg {
+    display: none !important;
+  }
+}
+
+.sbdocs.sbdocs-wrapper {
+  padding-top: 0;
+  padding-bottom: 0;
+}

package/.storybook/main.ts

@@ -0,0 +1,125 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+import type { RuleSetRule } from "webpack";
+import path from "path";
+
+const isCssLoader = (loaderPath: string): boolean => {
+  return loaderPath.includes("css-loader") && !loaderPath.includes("postcss-loader");
+};
+
+const updateCssLoaderOptions = (loaders: unknown[]): unknown[] => {
+  return loaders.map((loader) => {
+    if (
+      loader &&
+      typeof loader === "object" &&
+      "loader" in loader &&
+      typeof (loader as { loader?: string }).loader === "string" &&
+      isCssLoader((loader as { loader: string }).loader)
+    ) {
+      const loaderObj = loader as { loader: string; options?: Record<string, unknown> };
+      const existingModules = loaderObj.options?.modules;
+      return {
+        ...loaderObj,
+        options: {
+          ...loaderObj.options,
+          modules:
+            typeof existingModules === "object" && existingModules !== null
+              ? {
+                  ...existingModules,
+                  localIdentName: "[name]__[local]___[hash:base64:5]",
+                }
+              : {
+                  auto: (resourcePath: string) => resourcePath.endsWith(".module.scss"),
+                  localIdentName: "[name]__[local]___[hash:base64:5]",
+                },
+        },
+      };
+    }
+    return loader;
+  });
+};
+
+const config: StorybookConfig = {
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  staticDirs: ["../public"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-pseudo-states",
+    "@storybook/addon-storysource",
+    "@storybook/addon-a11y",
+    "@whitespace/storybook-addon-html",
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  env: {
+    STORYBOOK: "true",
+  },
+
+  webpackFinal: async (config) => {
+    config.module = config.module || { rules: [] };
+    config.resolve = config.resolve || {};
+
+    const processRule = (rule: RuleSetRule): RuleSetRule => {
+      if (rule.oneOf) {
+        rule.oneOf = rule.oneOf.map((oneOfRule) => {
+          if (oneOfRule && typeof oneOfRule === "object" && "use" in oneOfRule) {
+            const r = oneOfRule as RuleSetRule;
+            if (r.use && Array.isArray(r.use)) {
+              r.use = updateCssLoaderOptions(r.use) as RuleSetRule["use"];
+            }
+          }
+          return oneOfRule;
+        });
+      }
+      if (rule.use && Array.isArray(rule.use)) {
+        rule.use = updateCssLoaderOptions(rule.use) as RuleSetRule["use"];
+      }
+      return rule;
+    };
+
+    config.module.rules = config.module.rules?.map((rule) => {
+      if (rule && typeof rule === "object" && "test" in rule) {
+        return processRule(rule as RuleSetRule);
+      }
+      return rule;
+    });
+
+    // Edwards design system expects FontAwesome Pro; alias to free icons so build works without Pro license
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@fonts": path.resolve(__dirname, "../public/fonts"),
+      "@fortawesome/pro-solid-svg-icons": path.resolve(
+        __dirname,
+        "../node_modules/@fortawesome/free-solid-svg-icons"
+      ),
+    };
+
+    config.module?.rules?.push({
+      test: /\.(ttf|woff|woff2|eot|otf)$/i,
+      type: "asset/resource",
+      generator: {
+        filename: "fonts/[name][ext]",
+      },
+      include: path.resolve(__dirname, "../public/fonts"),
+    });
+
+    return config;
+  },
+};
+
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import atlasCopcoTheme from "./AtlasCopcoTheme";
+
+addons.setConfig({
+  theme: atlasCopcoTheme,
+});

package/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<!-- .storybook/preview-head.html -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

package/.storybook/preview.tsx

@@ -0,0 +1,73 @@
+import type { Preview } from "@storybook/react";
+import React from "react";
+import { Title, Subtitle, Description, Primary, Controls, Stories } from "@storybook/blocks";
+
+import "./global.scss";
+
+const ATLAS_COPCO_VIEWPORTS = {
+  xs: {
+    name: "Extra Small",
+    styles: { width: "375px", height: "667px" },
+  },
+  sm: {
+    name: "Small",
+    styles: { width: "768px", height: "1024px" },
+  },
+  md: {
+    name: "Medium",
+    styles: { width: "992px", height: "1024px" },
+  },
+  lg: {
+    name: "Large",
+    styles: { width: "1024px", height: "1024px" },
+  },
+  xl: {
+    name: "Extra Large",
+    styles: { width: "1440px", height: "1024px" },
+  },
+};
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    viewport: {
+      viewports: ATLAS_COPCO_VIEWPORTS,
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+    options: {
+      storySort: {
+        order: [
+          "Introduction",
+          ["Welcome", "About Design System", "Designers Guide"],
+          "Foundation",
+          ["Colours", "Icons", "Spacing", "Layout"],
+          "Typography",
+          ["Typography", "Typography Styles"],
+          "Atoms",
+          "Components",
+          "Experiences",
+          "Templates",
+        ],
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/types.d.ts

@@ -0,0 +1,5 @@
+declare module "*.module.scss";
+declare module "*.scss";
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.svg";

package/.vscode/settings.json

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

package/README.md

@@ -0,0 +1,59 @@
+# Atlas Copco VTBA – Storybook
+
+Storybook-based design system for Atlas Copco VTBA, bootstrapped from the Leybold Storybook boilerplate.
+
+## Tech stack
+
+- **React 18** + **TypeScript**
+- **Storybook 7** with `@storybook/nextjs`
+- **SCSS modules** + **Tailwind CSS** + **PostCSS**
+- **Next.js 13** (App Router) for optional dev app
+
+## Getting started
+
+```bash
+# Install dependencies
+npm install
+
+# Run Storybook (default: http://localhost:6006)
+npm run storybook
+
+# Build static Storybook
+npm run build-storybook
+```
+
+## Scripts
+
+| Script              | Description                    |
+|---------------------|--------------------------------|
+| `npm run storybook` | Start Storybook dev server     |
+| `npm run build-storybook` | Build static Storybook  |
+| `npm run dev`       | Start Next.js dev server       |
+| `npm run build`     | Build Next.js app              |
+| `npm run lint`      | Run ESLint                     |
+
+## Project structure
+
+```
+.storybook/           # Storybook config, theme, preview
+src/
+  app/                # Next.js App Router (optional)
+  components/         # React components + *.stories.tsx
+  stories/            # Introduction & foundation MDX
+  utils/styles/       # Design tokens, base, typography
+public/               # Static assets
+```
+
+## Adding components
+
+1. Add a component under `src/components/<Name>/` (e.g. `Button.tsx`, `Button.module.scss`).
+2. Add `*.stories.tsx` in the same folder or in `src/stories/`.
+3. Use design tokens from `src/utils/styles/base.scss` (e.g. `--atlascopco-blue`).
+
+## Design tokens
+
+- **Primary:** `--atlascopco-blue` (#0062b0)
+- **Greys:** `--atlascopco-grey-100` … `--atlascopco-grey-600`
+- **Typography:** `--font-family-base` (Inter), heading/body CSS vars in `base.scss`
+
+Customize tokens in `src/utils/styles/base.scss` and reuse in components.

package/next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+};
+
+module.exports = nextConfig;

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@asantemedia-org/atlas-copco-vt-storybook",
+  "version": "1.0.0",
+  "description": "Atlas Copco VT Design System - Storybook",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "next": "13.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@asantemedia-org/edwardsvacuum-design-system": "^1.6.69",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "~6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@babel/preset-react": "^7.26.3",
+    "@storybook/addon-a11y": "7.6.21",
+    "@storybook/addon-essentials": "7.6.21",
+    "@storybook/addon-interactions": "7.6.21",
+    "@storybook/addon-links": "7.6.21",
+    "@storybook/addon-storysource": "7.6.21",
+    "@storybook/addon-styling": "1.0.1",
+    "@storybook/blocks": "7.6.21",
+    "@storybook/nextjs": "7.6.21",
+    "@storybook/react": "7.6.21",
+    "@storybook/testing-library": "0.0.14-next.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.35",
+    "@types/react-dom": "18.0.11",
+    "@whitespace/storybook-addon-html": "^5.1.6",
+    "autoprefixer": "10.4.14",
+    "css-loader": "^7.1.2",
+    "eslint": ">=6.8.0",
+    "eslint-config-next": "13.3.0",
+    "eslint-plugin-storybook": "^0.6.11",
+    "postcss": "8.4.31",
+    "postcss-loader": "^7.3.4",
+    "prettier": "^2.8.8",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.85.0",
+    "sass-loader": "^16.0.5",
+    "storybook": "7.6.21",
+    "storybook-addon-pseudo-states": "~2.0.2",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "3.3.1",
+    "typescript": "5.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "main": "next.config.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AsanteMediaServices/atlascopco-vt-storybook.git"
+  },
+  "author": "Bernard Asante",
+  "bugs": {
+    "url": "https://github.com/AsanteMediaServices/atlascopco-vt-storybook/issues"
+  },
+  "homepage": "https://github.com/AsanteMediaServices/atlascopco-vt-storybook#readme"
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/app/globals.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-rgb: 255, 255, 255;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: rgb(var(--background-rgb));
+}

package/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import "./globals.css";
+
+export const metadata = {
+  title: "Atlas Copco VTBA Design System",
+  description: "Design system for Atlas Copco VTBA",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,11 @@
+export default function Home() {
+  return (
+    <main style={{ padding: "2rem" }}>
+      <h1>Atlas Copco VTBA Design System</h1>
+      <p>Welcome to the Atlas Copco VTBA Design System development environment.</p>
+      <p>
+        Run <code>npm run storybook</code> to view the component library.
+      </p>
+    </main>
+  );
+}

package/src/components/Button/Button.module.scss

@@ -0,0 +1,77 @@
+@use "../../utils/styles/base.scss" as *;
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  font-family: $font-family-base;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+
+  &:focus-visible {
+    outline: 2px solid $atlascopco-black;
+    outline-offset: 2px;
+  }
+
+  &--primary {
+    color: $atlascopco-white;
+    background-color: $atlascopco-blue;
+    border-color: $atlascopco-blue;
+
+    &:hover:not(.button--disabled) {
+      background-color: $atlascopco-blue-dark;
+      border-color: $atlascopco-blue-dark;
+    }
+  }
+
+  &--secondary {
+    color: $atlascopco-blue;
+    background-color: transparent;
+    border-color: $atlascopco-blue;
+
+    &:hover:not(.button--disabled) {
+      color: $atlascopco-white;
+      background-color: $atlascopco-blue;
+    }
+  }
+
+  &--outlined {
+    color: $atlascopco-grey-500;
+    background-color: transparent;
+    border-color: $atlascopco-grey-300;
+
+    &:hover:not(.button--disabled) {
+      border-color: $atlascopco-blue;
+      color: $atlascopco-blue;
+    }
+  }
+
+  &--small {
+    padding: $spacing-xs $spacing-sm;
+    font-size: 0.75rem;
+  }
+
+  &--medium {
+    padding: $spacing-sm $spacing-md;
+    font-size: 0.875rem;
+  }
+
+  &--large {
+    padding: $spacing-md $spacing-lg;
+    font-size: 1rem;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "Primary action button with Atlas Copco VTBA variants and sizes.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outlined"],
+      description: "Visual variant",
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"],
+      description: "Button size",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disabled state",
+    },
+    onClick: {
+      action: "clicked",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    children: "Primary action",
+    variant: "primary",
+    size: "medium",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary",
+    variant: "secondary",
+    size: "medium",
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    children: "Outlined",
+    variant: "outlined",
+    size: "medium",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: "Small",
+    variant: "primary",
+    size: "small",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: "Large",
+    variant: "primary",
+    size: "large",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled",
+    variant: "primary",
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outlined">Outlined</Button>
+    </div>
+  ),
+};