Design system

We use Storybook to manage, develop and test our components in order to re-use components across different Tengiva platforms and adapt similar usage as possible as we can.

The intruduction will separate into x parts to help devs to get farmiliar with storybook, build and maintain components

Folder structure

.
├── .storybook/                            # Storybook configurations folder
│   ├── main.ts
│   ├── preview.ts
│   └── storyWrapper.ts
├── packages/                              # The folder contains all implemented components.
│   └── [ComponentName]/
│       ├── index.vue                      # The component inplementation
│       ├── style.scss                     # [Optional] If the style is simple, it can be included in index.vue <style /> tag
├── stories/
│   └── [ComponentName].stories.ts         # Stories for a components, normally it contains different states for a component
├── dist                                   # the bundled folder for the component library
└── ...

Dev guide

• We should consider stateless and usability as mush as possible in order to avoid creating a similar component twice.

• Try to give enough flexibility to a component so it can adapt to different states from the design, we encourage to refactoring or adding a new feature to existed components.

• Try to avoid implementing any bussiness specific logic into components.

Example for creating a new component.

1. create a new folder at packages folder, and the folder name will be the component name in CamelCase, e.g. TextInput.

2. Normally we build the components based on vuetify3 components and customize them. But if there is not a based component from vuetify3 we can take advantage of, you are also encouraged to create it!

3. Write the component logic to index.vue in the component folder. Write the component style into a separated style.scss file if it is complex in order to easy to manage, otherwise you can also write in file style tag if the style is simple.

4. Adding the component stories. We centralize the stories into stories folder, each file contains one or many stories based on the design.

// Example for a component stories

// import the storybook type defs
import type { Meta, StoryObj } from "@storybook/vue3";
// import the implemented component
import TextInput from "../packages/TextInput/index.vue";
// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

const meta = {
	title: "TextInput",
	component: TextInput,

	// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
	tags: ["autodocs"],

	// argTypes are inferred from the component' props. It setup how we want to interact with the component props in storybook UI.
	argTypes: {
		type: {
			control: "select",
			description: "Select type of input",
			options: ["text", "password", "email", "number"],
		},
		placeholder: {
			control: "text",
			description: "Define input placeholder",
		},
		// ....rest argTypes
	},
	args: {}, // default value
} satisfies Meta<typeof TextInput>;

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

/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.js.org/docs/vue/api/csf
 * to learn how to use render functions.
 */

/*
 * Every story control a set of specifc component prop value. Make sure adding the corresponding Figma design to the component if apply.
 */

export const Default: Story = {
	args: { modelValue: "", variant: "underlined", label: "Email address", required: true },
	parameters: {
		design: {
			type: "figma",
			url: "https://www.figma.com/file/hA4OmeXCikwIWl6BucBn8p/Admin-%2F-system.tengiva.com?node-id=38%3A719",
		},
	},
};

export const Filled: Story = {
	args: { modelValue: "[email protected]", variant: "underlined", label: "Email address", required: true },
	parameters: {
		design: {
			type: "figma",
			url: "https://www.figma.com/file/hA4OmeXCikwIWl6BucBn8p/Admin-%2F-system.tengiva.com?node-id=38%3A720",
		},
	},
};

export const Focused: Story = {
	args: {
		modelValue: "[email protected]",
		variant: "underlined",
		label: "Email address",
		required: true,
		focused: true,
	},
	parameters: {
		design: {
			type: "figma",
			url: "https://www.figma.com/file/hA4OmeXCikwIWl6BucBn8p/Admin-%2F-system.tengiva.com?node-id=82%3A9725",
		},
	},
};

Review process

After your commit merges to main branch, a notice will send to Design & Dev channel. Reviewers will test on Chromatic app and give feedback here. Github CI will checked after reviewers approve the change, otherwise it will fail. Create another PR to address the feedback and looping the process.

Dev commands

Project Setup

npm install

Compile and Hot-Reload for Development

npm run storybook

Build storybook locally

npm run build-storybook

Running storybook static application locally

npm run preview