Code style

In order to maintain code consistency in ink, we have some rules of how names and files should be written and how the folders should be organized.

Our linter runs automatically within all scripts and will catch most issues that may exist in your code. You will see the status of your changes in real time, regardless of the script you choose to run.

If you are unsure about something, looking at Airbnb's Style Guide will guide you in the right direction.

React

We also have some specific conventions which should be followed above and beyond the Airbnb Style Guide:

• Favor functional components over classes, and use React hooks
• Any internal methods which are not dependent on component state should be considered helper methods
  • Helper methods should be stored in a sub-folder called helpers
  • One helper method per file inside helpers (e.g. if you have getHelpA() and getHelpB() they should be in helpers/getHelpA.ts and helpers/getHelpB.ts respectively)
  • Each helper file should be accompanied by a test suite next to the code itself (e.g. helpers/getHelpA.spec.ts)
  • Component identifiers and their filenames should use PascalCase
• Constants can be placed:
  • Inline in the component file for simple cases
  • In styles.ts if they're style-related
  • In a separate constants.ts file if there are many unrelated constants
• File names:
  • For Components or Classes the name should match the name of the Component or Class (and therefore be in camel-case)
  • For anything else, like helpers or constants should start with a lower-case letter (eg constants.ts or helperFunction.ts for a module containing a helper of the same name)
  • File names should reflect the file's primary export

When building a component, take care that new code meets these criteria to save time in the code review process:

The component code itself should:

• Be a function, not a Class (We use React hooks)
• Have its own folder inside src/components
• Be written in Typescript
• `// ink-component` on the first line of the main tsx file
• All components should export their props interfaces. Parent components should also import/export their children props
• If the component has subcomponents (like Dropdown.Item, Dropdown.Button), they should:
  • Be placed in a components/ subfolder
  • Be attached to the parent component (e.g., Dropdown.Item = DropdownItem)
  • Have their props exported from the parent component file
• If the component uses Context API, place context files in a contexts/ subfolder

Styled Components and Tokens:

• If a component has extensive styled-components, place them in a separate styles.ts file
• To understand how we use styled components with tokens in ink, refer to the Color and Spacing sections.

Documentation and Samples

• Each component should have a ComponentName.md file with important information about the usage of the component. They should have the file even if no information is added
• Optionally, components may include accessibility.md and testing.md files for detailed documentation on those specific aspects
• Each component should have a samples.js file where samples for the components are to be written in an Array of objects.

References in ink/src/index.ts:

• Each component should be exported with both the component and its props interface:
  export { default as Button, ButtonProps } from './components/Button/Button';
• For components with subcomponents, export all props interfaces:
  export { default as Dropdown, DropdownProps, DropdownItemProps, DropdownTriggerProps, ... } from './components/Dropdown/Dropdown';

Tests:

• Each new component should have a test suite (including non-public components and sub-components). Read Testing in ink to learn more about how we test components and functions in ink.
• Components should include a ComponentName.spec.tsx file for unit tests using Jest and Testing Library
• Components should include a ComponentName.axe.tsx file for accessibility testing using axe-core
• Any helpers go in the helpers folder. See React to learn more about helpers.

If you need any further help navigating the ink folder, you can reach out on the ink channel #ink