<project title="Componentdriven.Org" summary="The purpose of Component Driven is to promote and document the philosophy and practices of component-driven design, enabling developers and designers to build scalable, maintainable, and collaborative UI systems. The site serves as both an educational resource and a showcase of tools and examples that support component-based development, with a focus on accessibility, modularity, and cross-framework compatibility.">**Remember:**
- Component-driven design
- Storybook for component documentation
- Chromatic for visual regression testing
- Next.js as the frontend framework
- Reusability and modularity
- Cross-framework compatibility<concepts><doc title="Design Tools" desc="docs page.">/**
 * NOTE for contributors:
 * This is a curated list. Here's what qualifies:
 * - It should be the company’s main tool (one tool per company)
 * - Must be production-ready and have users (no alpha/beta products)
 * - Constrain the logo to 32px height and use a 180x180 canvas
 */
export const designTools = [{
  image: '/logos/logo-sketch.svg',
  link: 'https://www.sketch.com',
  title: 'Sketch',
}, {
  image: '/logos/logo-figma.svg',
  link: 'https://www.figma.com',
  title: 'Figma',
}, {
  image: '/logos/logo-adobe-xd.svg',
  link: 'https://www.adobe.com/ca/products/xd.html',
  title: 'Adobe XD',
}, {
  image: '/logos/logo-invision.svg',
  link: 'https://www.invisionapp.com',
  title: 'InVision',
}, {
  image: '/logos/logo-framer.svg',
  link: 'https://www.framer.com',
  title: 'Framer',
}, {
  image: '/logos/logo-uxpin.svg',
  link: 'https://www.uxpin.com',
  title: 'UX Pin',
}, {
  image: '/logos/logo-zeplin.svg',
  link: 'https://zeplin.io',
  title: 'Zeplin',
}, {
  image: '/logos/logo-abstract.svg',
  link: 'https://www.abstract.com',
  title: 'Abstract',
}, {
  image: '/logos/logo-zeroheight.svg',
  link: 'https://zeroheight.com',
  title: 'Zero Height',
}, {
  image: '/logos/logo-modulz.svg',
  link: 'https://www.modulz.app',
  title: 'Modulz',
}, {
  image: '/logos/logo-draftbit.svg',
  link: 'https://draftbit.com',
  title: 'Draftbit',
}, {
  image: '/logos/logo-interplay.svg',
  link: 'https://interplayapp.com',
  title: 'Interplay',
}, {
  image: '/logos/logo-relate.svg',
  link: 'https://relate.app',
  title: 'Relate',
}, {
    image: '/logos/logo-penpot.svg',
    link: 'https://penpot.app',
    title: 'Penpot',
}]
/**
 * NOTE for contributors:
 * This is a curated list. Here's what qualifies:
 * - It should be the company’s main tool (one tool per company)
 * - Must be production-ready and have users (no alpha/beta products)
 */</doc></concepts><.storybook><doc title="Main" desc="docs page.">module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@next/plugin-storybook/preset',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-viewport/register',
  ],
};</doc><doc title="Preview" desc="docs page.">import React from 'react';
import { addDecorator, addParameters } from '@storybook/react';
import {
  global as designSystemGlobal,
  loadFontsForStorybook,
} from '@storybook/design-system';
import '!style-loader!css-loader!react-github-button/assets/style.css';
import { GlobalStyle } from '../src/styles';

const { GlobalStyle: StorybookDSGlobalStyle } = designSystemGlobal;

const withGlobalStyle = (storyFn) => (
  <>
    <StorybookDSGlobalStyle />
    <GlobalStyle />
    {storyFn()}
  </>
);

addDecorator(withGlobalStyle);

loadFontsForStorybook();

addParameters({
  options: {
    showRoots: true,
  },
});</doc></.storybook><src><doc title="Development Tools" desc="docs page.">/**
 * NOTE for contributors:
 * This is a curated list. Here's what qualifies:
 * - It should be the company’s main tool (one tool per company)
 * - Must be production-ready and have users (no alpha/beta products)
 */
export const developmentTools = [
  {
    image: '/logos/logo-react.svg',
    link: 'https://reactjs.org',
    title: 'React',
  },
  {
    image: '/logos/logo-vue.svg',
    link: 'https://vuejs.org',
    title: 'Vue.js',
  },
  {
    image: '/logos/logo-angular.svg',
    link: 'https://angular.io',
    title: 'Angular',
  },
  {
    image: '/logos/logo-ember.svg',
    link: 'https://emberjs.com',
    title: 'Ember',
  },
  {
    image: '/logos/logo-svelte.svg',
    link: 'https://svelte.dev',
    title: 'Svelte',
  },
  {
    image: '/logos/logo-riot.svg',
    link: 'https://riot.js.org',
    title: 'Riot.js',
  },
  {
    image: '/logos/logo-storybook.svg',
    link: 'https://storybook.js.org',
    title: 'Storybook',
  },
  {
    image: '/logos/logo-chromatic.svg',
    link: 'https://www.chromatic.com',
    title: 'Chromatic',
  },
  {
    image: '/logos/logo-docz.svg',
    link: 'https://www.docz.site',
    title: 'docz',
  },
  {
    image: '/logos/logo-webcomponents.svg',
    link: 'https://www.webcomponents.org',
    title: 'Web Components',
  },
  {
    image: '/logos/logo-jest.svg',
    link: 'https://jestjs.io',
    title: 'Jest',
  },
  {
    image: '/logos/logo-react-styleguidist.svg',
    link: 'https://react-styleguidist.js.org',
    title: 'React Styleguidist',
  },
  {
    image: '/logos/logo-cosmos.svg',
    link: 'https://reactcosmos.org',
    title: 'React Cosmos',
  },
  {
    image: '/logos/logo-pattern-lab.svg',
    link: 'https://patternlab.io',
    title: 'Pattern Lab',
  },
  {
    image: '/logos/logo-bit.svg',
    link: 'https://bit.dev',
    title: 'Bit',
  },
  {
    image: '/logos/logo-backlight.svg',
    link: 'https://backlight.dev',
    title: 'Backlight',
  },
  {
    image: '/logos/logo-stencil.svg',
    link: 'https://stenciljs.com/',
    title: 'Stencil.js',
  },
  {
    image: '/logos/logo-anima.svg',
    link: 'https://www.animaapp.com/',
    title: 'Anima',
  },
];
/**
 * NOTE for contributors:
 * This is a curated list. Here's what qualifies:
 * - It should be the company’s main tool (one tool per company)
 * - Must be production-ready and have users (no alpha/beta products)
 */</doc><doc title="Styles" desc="docs page.">import { createGlobalStyle, css } from 'styled-components';
import { styles } from '@storybook/design-system';
const { breakpoint } = styles;

export const measure = { regular: 600, wide: 760, xwide: 980 };

export const margin = {
  xxsmall: 10,
  xsmall: 20,
  small: 40,
  medium: 64,
  large: 80,
  xlarge: 120,
};

export const GlobalStyle = createGlobalStyle`
  html {
    scroll-behavior: smooth;
  }
`;

export const sectionPadding = css`
  padding-top: 3rem;
  padding-bottom: 3rem;

  @media (min-width: ${breakpoint}px) {
    padding-top: ${margin.large}px;
    padding-bottom: ${margin.large}px;
  }
`</doc><doc title="Index" desc="docs page.">export { Benefits } from './Benefits';</doc><doc title="Index" desc="docs page.">export { How } from './How';</doc></src></project>
