Skip to main content

Acro Media Gesso Design System

Usage

Theme Usage​

// Do NOT use anything directly from '@mui/whatever' it will not connect right with Gesso
import { useTheme } from '@acromedia/gesso';
import type { Theme } from '@acromedia/gesso/dist/themes/Gesso/Gesso.types';

const MyComponent = () => {
  // This tells useTheme to return an enhanced Gesso style theme instead of just the default
  const theme = useTheme<Theme>();

  return <></>;
}

Development

Hosted environments​

Setup​

Run Storybook​

View the components by running Storybook.

  • yarn storybook

This will run Storybook on http://localhost:5000/

Creating Stories​

If you create a new story, remember to export it via src/stories/index.ts so it can be used downstream. If you get a test error related to @acromedia/gesso/stories this is probably what you missed.

Available scripts​

In the project directory, you can run:

pnpm storybook​

Runs the Storybook in the development mode.
Open http://localhost:5000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

pnpm figmagic​

This will pull the tokens from the Figma file. You need to make sure you've setup you .env file, see example.env to start. You also need permissions to the Figma file. These values are committed to git, so unless you need to pull an update you don't need to worry about this.

pnpm test​

Runs cypress tests in headless mode​

Testing​

When making changes you should consider 3 different parts:

Linting​

pnpm lint

Automated tests​

pnpm test

Visually check storybook​

pnpm storybook

Then browse the components you changed and confirm everything looks right, automated tests are imperfect at determining visual bugs

Naming convention and folder structure​

New components should be placed within src/components or src/helpers, depending on what they are. When adding a new component, follow this naming convention.

ComponentName (directory)
  - index.ts
  - ComponentName.tsx
  - ComponentName.css.ts
  - ComponentName.spec.tsx
  - ComponentName.stories.tsx
  - ComponentName.types.ts
  - assets (directory)
    - AssetDescriptorA.jpg
    - AssetDescriptorB.jpg
  - mocks (directory)
    - SampleData.mock.js
    - ProductA.mock.js
    - ProductB.mock.js

Performance​

Typescript​

There is a known issue where if you extend an existing material ComponentProps interface to use with ComponentThemeProps, it will cause terrible looping compile issues that will take a lot of time and use a lot of memory. Always use a separate interface that you keep as simple as possible for the Theme props. If you want to share props between both, make a simple SharedProps interface that you can share between both Component and Theme interfaces.

Incorrect:

Even though the below code appears fine, due to the complexity of material prop types, any usage of it in conjunction with styled() will cause extremely long compile time and extremely high memory usage.

import { MaterialBoxProps } from '@mui/material'

export interface BoxProps extends MaterialBoxProps {
  customProp?: string;
}

export interface BoxThemeProps extends BoxProps {
  theme?: Theme;
}

Correct:

Note that picking color is not always necessary, but just shows an example of how to safely use a single prop from a material prop type if needed.

import { MaterialBoxProps } from '@mui/material'

interface SharedProps {
  customProp?: string;
}

export interface BoxProps extends MaterialBoxProps, SharedProps {}

export interface BoxThemeProps extends SharedProps, Pick<MaterialBoxProps, 'color'> {
  theme?: Theme;
}

If typescript compiling is taking a long time (>15 seconds) or you are noticing slowdown in your IDE, you might have tsc performance issues. yarn test:ts-performance will run a trace and output any problem areas