• 🛠️ Skill guides documentations about the skills you need in order to contribute!
• ✨ Conventional commits patterns to create branches and write commits!
• 👨‍💻 Code patterns code patterns you must follow when developing new components!
• ⚙️ Commands useful commands you might use when developing on this repository!
• 💅 Recommended extensions extensions that will improve your developing experience!
• 🗒️ How to use how to use the library on another project!

In this section we have all the documentations of the tools we are using to develop the Starship design system. React | Typescript | Styled Components | Storybook | Jest | Testing Library | Rollup | Lint

ES6 Principal Framework React 18 Coding with Typescript CSS in JavaScript with Styled Components Unit tests with Jest and Testing library Building with RollupJs Support and integration plugins with modern web dev Standard style guide and Linters NodeJS Documenting with Storybook

Conventional commits are well stablished patterns among git users. Please follow the instructions on how we're using it on this project:

Branch names

   type/[scope]-optional-name

   Ex: feature/[AB-0001]-button-component

Commits

   type[optional-scope]: description

   Ex: fix[FPS-0002]: fixing latest changes

type examples: feature | fix | refact | test | doc.

scope examples: AB-0001 | FPS-0002 | addons-29.

see more in the documentation

⚠️ The following patterns are a must when you get to code for this project and they have to be considered under all code reviews.

Each component must have the following files:

• Component.doc.mdx

import { Meta, ArgTypes, Canvas, Primary } from '@storybook/blocks';
import * as Component from './Component.stories';

<Meta of={ Component } />

# Component

{{!--
- Explain what is the component / what it is made for;
- Give an example of the component usage throughout the internet;
- You are encouraged to leave a joke or two. Just do some funny stuff along the documentation to match our culture!
--}}

<Primary />

## Props

<ArgTypes />

{{!--
- Here we put the component variations! Example:
<Canvas of={Notification.Default} />
--}}

• Component.spec.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Component } from './Component';

describe('<Component />', () => {
	// TODO: Should rename the test bellow
	it('', () => {
		// TODO: Should test component
	});
});

• Component.stories.tsx

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import Component from './Component';
import { ComponentProps } from './Component.types';

const meta: Meta<typeof Component> = {
	component: Component,
	title: '', // Todo: Set the title
	argTypes: {
		/*
		Todo: Set the argTypes
		Example:
		prop: {
			description: 'What this prop do?',
			control: 'type',
			table: {
				defaultValue: { summary: false },
				type: {
					summary: 'prop type',
					detail: "Additional description about the attribute's type"
				},
			},
		}
		*/
	},
};

export default meta;
type Story = StoryObj<typeof Component>;

export const Default: Story = {
	args: {
		children: <>Hello world!</>,
	},
} as Meta<ComponentProps>;

• Component.styles.ts

import styled from 'styled-components';
import isPropValid from '@emotion/is-prop-valid';
import { ComponentProps } from './Component.types';

// TODO: Change the type of the element you want o create, the default is 'div'
export const StyledComponent = styled('div').withConfig({
	shouldForwardProp: isPropValid,
})<ComponentProps>`
	color: red;
`;

• Component.tsx

import React from 'react';
import { ComponentProps } from './Component.types';
import { StyledComponent } from './Component.styles';

const Component: React.FC<ComponentProps> = (props) => (
	<StyledComponent>Component</StyledComponent>
);

export default Component;

• Component.types.ts

import React from 'react';

export interface ComponentProps {
	children: React.ReactNode;
}

• index.ts

import Component from './Component';

export default Component;

The commands below are configured on the package.json. You can run it with yarn or npm run. In the examples we are using yarn:

yarn start - it starts the project on localhost:8080. yarn start:storybook - it starts the project on localhost:6006. yarn build:site - it builds the design system homepage. yarn start:site - it runs the bundled design system homepage. yarn start:site-dev - it runs the design system homepage on dev environment. yarn pre:test - it runs the "clean" command. yarn test - it runs tests. yarn pre:build - it cleans dist directory and caches. yarn build - it bundles the project. yarn build:types - it bundles types on dist directory with .d.ts. extension. yarn build:storybook - it bundles stories and convert files in static bundles. yarn lint - it runs lint for .ts and .tsx files. yarn lint:fix - it runs lint for .ts and .tsx files and fixes basic lint errors. yarn clean - it cleans cache of static files. yarn clean:all - it cleans cache of static files and the node_modules directory. yarn build:icons - it creates icon components based on SVG files located in the "/assets/icons/svg" directory.

• Better comments It highlights the comments on your code.
• GitLens. It adds useful information to your code, such as the last commit that modified a particular line or method.
• Material Icon Theme It adds Material Design icons to VS Code.
• MDX Language support for MDX.
• Prettier Code formatter.
• SonarLint It helps developers with code quality and security issues as they code.
• vscode-styles-components Syntax highlighting for styled-components.

Here is how you can use the Starship design system on another project:

install the library

   yarn install @docket_brasil/starship-ds

import the component you need

import React from 'react';
import { Component } from '@docket_brasil/starship-ds';

const functionExample: React.FC<PropsExample> = (props) => (
	<Component></Component>
);

Th-th-that's all, folks.🐷🧥