glide-design-system/.storybook/preview.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import { themes } from "@storybook/theming";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },


  storybookCodePanel: {
    disabled: true,
    allowedExtensions: ["js", "jsx", "ts", "tsx", "css", "sass"],
  },
};

export const decorators = [
  (Story) => (
    <>
      <style>
        {`
          /* Import Google Material Icons stylesheet */
          @import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');

          /* Example usage */
          .material-icons {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px; /* Adjust size as needed */
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: 'liga';
          }

          /* Example style for using Material Icons */
          .icon-example {
            display: flex;
            align-items: center;
          }
        `}
      </style>
      <Story />
    </>
  ),
];