Vegard  Sandnes

Vegard Sandnes

1568427469

How to Build a design system with Grommet and Storybook

Introduction

We’ve all heard the buzzword “design system” thrown up and down. But how do we make sense of it, and more importantly, how do we build one for ourselves? This post will guide you through creating a design system using React, Grommet, and Storybook.

What exactly is a design system?

A design system consists of a design language, a component library, and a documentation/style guide website where the first two live.

As detailed in this talk by Emma Wedekind, when developers talk about design systems, they mostly refer to the component library; when designers do, they refer to the design language. Project managers are most likely concerned with the documentation/style guide website where everything lives.

The following expatiates on the purpose of these three pieces:

  • Design language: This helps shape our products into a representation of our brand. It includes color (for emotion), type scale, accessibility, and motion (for personality).
  • Component library: These are reusable code components that serve as the building blocks of our application. They also give expression to the design language. These include buttons, input fields, etc. If you aren’t building yours from scratch, you could customize a popular library such as Grommet to your project needs.
  • Documentation/style guide website: This is the site where you document everything about the design language and component library. This creates consistency by allowing all your team members to access it for use.

Design systems generally provide building blocks with which we construct our applications. It leads to consistent user experience across a company’s suite of products as they become more complex and its teams grow in size.

All major software companies have their own design system. Some examples of popular design systems are Shopify’s Polaris, Google’s Material Design, and Trello’s Nachos.

So, how do you build one for your own brand? You first need to have the three pieces of a design system in place.

Grommet

Grommet is a React component library that provides responsive and accessible mobile-first code components you can easily use for your projects.

Of particular note is the fact that Grommet provides powerful theming tools that let you tailor the component library to align with your color, type, component interaction, and layout needs. This addresses the design language piece we discussed earlier.

Storybook

Storybook is an open source tool that allows you to document and explore your code’s components. It works with React, Vue, and Angular, and it also enables you to work on your components in isolation and test them in different states.

Most importantly, Storybook enables automatic generation of a customizable style guide site.

Installation

To get started, let’s scaffold a blank React app.

npx create-react-app my-app
cd grommet-storybook-react-app

Open the project in your code editor. The next step is to install Grommet:

npm install grommet styled-components --save

Also install Storybook:

npx -p @storybook/cli sb init

Recall that Storybook can be used for React, Vue, and Angular. The above command will detect which framework we are using and install the appropriate Storybook version. In our case, the React version @storybook/react will be installed.

After the installation, run the app:

npm run storybook

The following screen will be displayed in the browser:

As you can see in the component explorer, Storybook provided two components out of the box for demo purposes. These are the Welcome and Button components.

If we look into our project folder, we’ll notice .storybook and stories folders have been added after the installation.

Visit the stories/index.js folder to see the demo components. Observe and remove or comment out the portion below; we will be building our own welcome and button components.

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storiesOf(‘Button’, module)
.add(‘with text’, () => <Button onClick={action(‘clicked’)}>Hello Button</Button>)
.add(‘with some emoji’, () => (
<Button onClick={action(‘clicked’)}>
<span role=“img” aria-label=“so cool”>

  span
&lt;/Button&gt;

));

This is what should be left:

import React from ‘react’;

import { storiesOf } from ‘@storybook/react’;
import { action } from ‘@storybook/addon-actions’;
import { linkTo } from ‘@storybook/addon-links’;

Creating our components

Now, onto the main thing: we’ll start by building welcome and button components just like we saw earlier.

One of the qualities of any good documentation is that it has a welcome note that helps developers get started. This usually provides a setup or installation guide. Let’s pretend we were building a design system for your company. We could use the welcome component as our welcome note. That means it will just be filled with plaintext.

The Welcome component

Create a components folder inside the src folder, then create a Welcome.js file inside components. Place the following code into the file:

import React from ‘react’;
import { Heading, Paragraph, Box } from ‘grommet’;

class Welcome extends React.Component {

render() {
return (
<Box direction=“column” pad=“medium”>

    &lt;Heading margin="none" level="3"&gt;Chapter 1&lt;/Heading&gt;
    &lt;Paragraph margin="none"&gt;
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    &lt;/Paragraph&gt;
    &lt;Paragraph margin="none"&gt;
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    &lt;/Paragraph&gt;

  &lt;/Box&gt;
);

}

}

export default Welcome;

In the above code, we imported Heading and Paragraph, which are type components from Grommet. We also imported Box, which is a container to lay out our content. Everything is inside a Welcome component, which we have set up for export.

Inside the stories folder, go to index.js and import the Welcome component.

import Welcome from ‘…/components/Welcome’;

Also add the following to index.js:

storiesOf(‘Welcome’, module).add(‘getting started’, () => <Welcome />);

In Storybook, a story refers to a component and several possible states of it — for example, a button in different states.

In the code above, the storiesOf() function helps us name a particular story in the component explorer interface, and the .add() function sets up a dropdown, which, when released, presents different states of the component. This will be clearer when we create our next component.

The Button component

Buttons are used a lot in interfaces. They have great impact on products and are a great place to start when creating a design system.

To create the Button component, create a Button.js file inside the components folder. Paste the following code in:

import React from ‘react’;
import { Button as GrommetBtn } from ‘grommet’;

class Button extends React.Component {
render() {
return (
<GrommetBtn label=“default” />
);
}
}

export default Button;

Notice that because I want to create our own component called Button, I had to rename Grommet’s default button to GrommetBtn to prevent name clashing.

Now import the Button component in index.js:

import Button from ‘…/components/Button’;

Add the button story to the same file:

storiesOf(‘Button’, module).add(‘basic’, () => <Button />);

This will render out as shown:

As expected in any design system, we should be able to reuse a component like our button in many situations. This is usually done by passing custom props to the component.

Whatever props are passed will affect the way a component is rendered. Fortunately, Grommet comes with enough props for each component to fill your needs.

To ensure our button component receives any props passed to it from index.js, go to Button.js and add an expression between curly braces.

<GrommetBtn label={this.props.label} {…this.props} />

Now let’s create and document different variations of our button. Go to the button story and make the following changes:

storiesOf(‘Button’, module)
.add(‘primary’, () => <Button primary label=“primary” />)
.add(‘secondary’, () => <Button primary={false} label=“secondary” />)
.add(‘plain’, () => <Button plain label=“plain” />)
.add(‘Disabled’, () => <Button disabled label=“Disabled” />);

When we run the code, we should see the following screen:

Grommet buttons have lots of useful props, such as accessibilityTitleactiveiconplaintargetsizeonClickhrefidlabeltype, etc. Feel free to check them all out here.

It is worth mentioning that Storybook can be supercharged with add-ons, which you can see here. Add-ons are extra features that can be appended to Storybook to make it more useful and add advanced functionality.

Examples are the Source add-on (which lets you view the component’s source code to copy and paste), the notes add-on (for documenting component usage in markdown), and the background add-on for storybook customization.

Customizing the Grommet theme

We’ll now take a look at three ways you can customize your Grommet theme.

  1. Grommet components have a top-level wrapper container that can be used to style components globally.
const customTheme = {
global: {
colors: {
custom: “#cc6633”
}
}
};

const Themed = () => (
<Grommet theme={customTheme}>
<Box pad=“medium”>
<Anchor icon={<Add />} label=“Add” color=“custom” />
</Box>
</Grommet>
);

  1. Grommet also provides ThemeContext.Extend to style components locally.
<ThemeContext.Extend
value={{ global: { colors: { doc: ‘#ff99cc’ } } }}
>
<Box pad=“large” background=“doc” direction=“row” />
<Box pad=“large” background=“doc” direction=“row” />
</ThemeContext.Extend>
  1. You can also use styled-components to style components individually.
import styled from 'styled-components; import { Button } from 'grommet'; const MyStyledButton = styled(Button)
font-weight: bold;
background-color: #BADA55;
`;

const MyComponent = () => (
<div>
Press Button <MyStyledButton label=“Press Me” />
</div>
);

Deploying your documentation as a static app

In order to showcase our component library to our whole team, we have to deploy it as a site. You can deploy it to Netlify, GitHub pages, or any static hosting service.

Simply add the following npm script to your package.json:

{
“scripts”: {
“build-storybook”: “build-storybook -c .storybook -o .out”
}
}

Then run yarn build-storybook.

This will build Storybook from the project directory into a static web app and place it inside the .out directory. You can now deploy the content in the .out directory wherever you want.

To test it locally:

npx http-server .out

Conclusion

In this post, we’ve explored the technologies that will enable you to build a design system. We’ve covered how to implement components, customization, documentation, and hosting your design system. Now go build something awesome!

Hope this tutorial will surely help and you! Keep Visiting

Originally published on blog.logrocket.com

#reactjs #react-native #design-pattern #web-development

What is GEEK

Buddha Community

How to Build a design system with Grommet and Storybook
Wilford  Pagac

Wilford Pagac

1602759600

Glossary: Design Systems Defined for Developers and Designers

Design systems are interdisciplinary by nature. They are built and consumed by designers and developers, therefore it is important for common terminologies to exist to support the communication between these two disciplines and other related actors.

Note: while some of the concepts are explained in a way that is more related to the context of web development, most of them are applicable to other contexts as well.

📖 Glossary

In this post we will present some key concepts from design and development, explain their meaning in the context of design systems and point to any ambiguity that may exist.

Foundation/Essentials/Principles

Example of Material Design foundations

Every design system is built on top of a set of fundamental rules which are shared across components or other parts. These rules can relate to visual design (e.g. animationcolorstypography) or define more abstract principles such as brand personality or writing style.

Components

Example of Kor UI button component

Perhaps the most used term, components are individual units (such as buttonsinputstabs) that have defined appearances and interaction paradigms. Components can have different variations and be customized through APIs (Application Programming Interfaces).

Patterns

Example of Carbon Design login pattern

Patterns define how different components can be combined in a certain way to serve specific user goals that are often repeated across screens or applications. For example, input fields, icons and buttons can be combined in a certain way to serve the goal of signing into an application. Examples of patterns are formsnavigation and onboarding.

Note: UX patterns should not be mistaken with ‘design patterns’ in software engineering, which are also common ways of solving problems but specifically related to the context of engineering.

#ux #design #design-systems #web-development #frontend #software-development #design-systems-glossary #latest-tech-stories

Landscapes Website Design | Nature Landscapes Website Designer

Most landscapers think of their website as an online brochure. In reality of consumers have admitted to judging a company’s credibility based on their web design, making your website a virtual sales rep capable of generating massive amounts of leads and sales. If your website isn’t actively increasing leads and new landscaping contracts, it may be time for a redesign.

DataIT Solutions specializes in landscape website designing that are not only beautiful but also rank well in search engine results and convert your visitors into customers. We’ve specialized in the landscaping industry for over 10 years, and we look at your business from an owner’s perspective.

Why use our Landscapes for your landscape design?

  • Superior experience
  • Friendly personal service
  • Choice of design layout
  • Budget sensitive designs
  • Impartial product choice and advice
  • Planting and lighting designs

Want to talk about your website?
If you are a gardener or have a gardening company please do not hesitate to contact us for a quote.
Need help with your website?
Get in touch

#nature landscapes website design #landscapes website design #website design #website designing #website designer #designer

Ruth  Nabimanya

Ruth Nabimanya

1620633584

System Databases in SQL Server

Introduction

In SSMS, we many of may noticed System Databases under the Database Folder. But how many of us knows its purpose?. In this article lets discuss about the System Databases in SQL Server.

System Database

Fig. 1 System Databases

There are five system databases, these databases are created while installing SQL Server.

  • Master
  • Model
  • MSDB
  • Tempdb
  • Resource
Master
  • This database contains all the System level Information in SQL Server. The Information in form of Meta data.
  • Because of this master database, we are able to access the SQL Server (On premise SQL Server)
Model
  • This database is used as a template for new databases.
  • Whenever a new database is created, initially a copy of model database is what created as new database.
MSDB
  • This database is where a service called SQL Server Agent stores its data.
  • SQL server Agent is in charge of automation, which includes entities such as jobs, schedules, and alerts.
TempDB
  • The Tempdb is where SQL Server stores temporary data such as work tables, sort space, row versioning information and etc.
  • User can create their own version of temporary tables and those are stored in Tempdb.
  • But this database is destroyed and recreated every time when we restart the instance of SQL Server.
Resource
  • The resource database is a hidden, read only database that holds the definitions of all system objects.
  • When we query system object in a database, they appear to reside in the sys schema of the local database, but in actually their definitions reside in the resource db.

#sql server #master system database #model system database #msdb system database #sql server system databases #ssms #system database #system databases in sql server #tempdb system database

Houston  Sipes

Houston Sipes

1602752400

Improving Design Handoffs: A Guide

To build an awesome and successful digital product you need to do a lot of things. Such as planning, market research, build a prototype, design it, code it, ship it etc. For this whole process, you need to go through lots of handoffs and team communications. One of the more painful handoffs is the Design-to-Development Handoff.

This happens usually as the design and development happen in 2 separate teams. The design team handles creating the design system, user interfaces, graphics and visuals. The dev team turn the design deliverables into a functional product.

What is Design-to-Development Handoff?

Design handoff is when the design team hands their deliverables over to the dev team. The dev team then begins with the implementation. This process could turn into a nightmare if there are no standards implemented. Since the product’s quality is at stake, it’s a good idea to enable a good collaboration between the two teams.

This is not rocket science. There are tons of tools and platforms available that ease the design handoff.

To maintain a smooth design handoff, both designers and developers must take part in the process.

Here are some tips for the designers and developers on how to improve the design handoff.

Tips for Designers

Be interested in the frameworks. Talk with the developers on what framework they plan to use and read about it. Are they using Bootstrap? Or Tailwind CSS? Get to know it and its possible limitations. Knowing the possibilities and limitations will help you create more suitable design elements. After studying the framework, try to use the UI elements that come with it. Map the framework’s color palette, spacing, typography settings and everything that you can. Follow the design trends for the platform that you’re designing. For example, if you’re designing an iOS app, don’t set the tab bar height by random. There are Design Guidelines for both iOS and Android available, so make sure you read them. The development team will thank you for it! Use a modern tool for UI Design. It’s time to ditch Photoshop. If you want to stay in the Adobe ecosystem, then check out Adobe XD. If not, I recommend taking a look at Figma.

#figma #ux #ux-design #web-design #ui-design #ui #design-systems #website-design

Juned Ghanchi

1621315250

Designing Mobile Apps using the latest UI Design Principles

The mobile technology world is growing at the speed of light, and the apps have become an integral part of our daily life. We can now see an influx of technology with tools that can help create mobile apps. All of them are becoming more accessible and hence people are getting on their first app making journeys. Since the mobile app industry is getting bigger and better than ever, businesses from all corners of the world are trying to develop mobile apps for their operations and marketing. Designing a mobile app for businesses is the first step, though. Company owners are in charge of the basic look and feel of the designed product. With a brilliant mobile app design, one can establish a relationship between app and user very well.

Read Blog Here: https://www.indianappdevelopers.com/blog/designing-mobile-apps-using-latest-ui-design-principles/

#designing mobile apps #ui design principles #mobile ui design #mobile app design #ui design #app design