zaelot-inc / z-ui Goto Github PK

https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/

props:

• variant: solid, outline
• color: primary, secondary, tertiary, contrast, success, danger, warning
• size: lg, md, sm
• tesxt: string

In React, state should be immutable. If you modify the state directly, it’ll cause performance issues that are difficult to fix.
Let’s look at an example:

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petsList);
};

You want to update the checked key of an object in an array based on the state of a checkbox, but you have a problem. React can’t observe and trigger re-rendering because the object is being changed with the same reference.

To fix this, you can either use the setState() method or the useState() [hook]. Either of these methods will ensure that your changes are acknowledged by React and your DOM is correctly re-rendered.

Let’s rewrite the previous example and use the useState() method.

Note: You could also use map() and spread syntax to avoid mutating other state values.

const modifyPetsList = (element, id) => {
  const { checked } = element.target;
  setpetsList((pets) => {
    return pets.map((pet, index) => {
      if (id === index) {
        pet = { ...pet, checked };
      }
      return pet;
    });
  });
};

base of all cards. Has to contemplate the three different border radius and shadows depending on the size and elevation.

props:

• variant: solid, outline
• color: primary, secondary, tertiary, contrast, success, danger, warning
• size: lg, md, sm
• value: number

Description

One of the design components that is required for this project's design must be the Icon.

Screenshots

Files

For example, if you are using React , you can use https://mui.com/material-ui/icons/
If you are using Bootstrap, you can use https://getbootstrap.com/docs/3.3/components/

Tasks

- If using Bootstrap:
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested and apply the icon classes to the .

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Changing the icon font location

Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

Change the @icon-font-path and/or @icon-font-name variables in the source Less files.

Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you're creating controls with no other text (such as a that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

- If using React
In App.js, paste the import code at the top of the file after the React import code
Go back to the React icons page and choose any icon from the Font Awesome icons
Click on the icon to copy it
Go back to your import code in the App.js file
Paste and replace the IconName in the curly braces with the copied icon
Render the icon name as a React element.

Code example

import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";

class Like extends Component {
render() {
return
}
}

export default Like;

https://www.linkedin.com/pulse/setting-up-rtl-vite-react-project-william-ku/

color: primary, secondary, tertiary, success, danger, warning

hover and active
$primary-hover: darken($color, $amount)
$primary-active: lighten($color, $amount)

https://sass-lang.com/documentation/modules/color

$2xsm
$xsm
$sm
$base
$lg
$xlg
$2xlg
$3xlg
...

Fontweight: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build.

By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.

If you aren’t sure whether your build process is set up correctly, you can check it by installing React Developer Tools for Chrome (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).

If you visit a site with React in production mode, the icon will have a dark background:

If you visit a site with React in development mode, the icon will have a red background:

It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.

props:

• className
• variant: solid, outline, ghost
• color: primary, secondary, tertiary, success, danger, warning
• size: sm, md, lg
• disabled
• type: one of the different button types
• onClick
• href

if the button has an href then it has to render as an <a>, if it doesn't it renders as a <div>

when we run npx create-react-app app-name, we need an option to specify which react component has been created, should it be a functional component or a class component.

This will reduce developers initial code changes as per the requirement!