Iq Blueberry Design System

The Iq Design System (Blueberry) came to bring a series of benefits and to solve common problems in the Iq development workflow.

$3

- Keep visual consistency between components, pages and projects
- Create easily maintainable components
- Develop a common language between Design and Front-end teams
- Single source of truth to style code
- Share code between Iq applications
- Faster development of pages and features (keeping quality and isolation of code)
- Using css as base, the consumer applications can use almost any technology or framework such as React and css-in-js libraries

$3

- Code rewriting
- There are lots of React components already coded, but they are hard to modify and to be found in the codebase
- 100% of the code is rewritten on different applications that use different technologies (Ex: React, Pug), with the design system we can share style (css) code
- Some visual rules are rewritten every new layout, such as paddings, containers, alignment...
- Inconsistent layouts and components
- Layout breaking on specific breakpoints
- Pages and components with old styles that doesn't reflect the current state of the product
- Non standard styles and animations

---

Understanding blueberry

$3

It's an organized collection of reusable components, rules, and standards that help building applications in a convenient way - keeping the brand's visual identity. Since it's framework-agnostic, this library is independent of any framework, meaning that teams can use the components no matter what framework is used. This DS is developed in Storybook.

$3

They are Design System's values (or variables) created to name and reuse important information. Example: blueberry-60is a design token that stores the color #453AD3.

$3

1. Go to src/flavors/react/components and create a folder inside it for your component
2. Create the following files:
- YourComponent.stories.tsx: to index your component's page in Storybook
- index.tsx: your component's structure
3. On src/core/componentscreate a style file for your component, such as YourComponent.styl

---

Running the project

$3

Install all dependencies:

``
yarn
`

Then you run:

`
yarn dev:react
`

The port localhost:6006 is automatically opened.

$3

_Builds_

- yarn build-storybook:react
- yarn build-storybook
- yarn build:lib

_Others_

- yarn register-icons (to add a new icon)
- yarn only-bundle

---

$3

- React
- TypeScript
- Stylus
- Pug (will be deprecated soon)
- Yarn
- Babel
- Gatsby

$3

- Prod: https://iq-tech.github.io/blueberry/`

$3

#iq-design-system