1.1.14 • Published 12 months ago

@saleor/macaw-ui v1.1.14

Weekly downloads
633
License
CC-BY-4.0
Repository
github
Last release
12 months ago

npm package npm download Bundle Size

MacawUI

Official React UI components kit for Saleor — an open-source GraphQL-first and Next.js ready e-commerce platform. You can find most of the elements used in the creation of Saleor's dashboard interface and use it to create Saleor Apps. Have a great time working on your projects and empowering your users. If you have any questions, feel free to let us know on GitHub Discussions.

Installation

npm i @saleor/macaw-ui

Usage

You need to import the styles into your app. You can do it in your main entry point, for example index.tsx`:

import "@saleor/macaw-ui/style";

Next, you need to add the ThemeProvider to your app. It will provide the theme to the components:

import { ThemeProvider } from "@saleor/macaw-ui";

const App = () => (
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

Usage with Next.js

If you need to render styles on the server we recommend that you use getCSSVariables helper to get the CSS variables that can be injected in _document.tsx:

import { getCSSVariables } from "@saleor/macaw-ui";
import Document, { Head, Html, Main, NextScript } from "next/document";

const css = getCSSVariables("defaultLight"); // or "defaultDark"

export default class AppDocument extends Document {
  render() {
    return (
      <Html style={css}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Usage with form libraries

React Hook Form

You need to wrap the MacawUI component with Controller. For example:

import { Input } from "@saleor/macaw-ui";

<Controller
  control={control}
  name="name-input"
  render={({ field }) => <Input {...field} />}
/>;

Usage with Sentry

Add following configuration to Sentry.Integrations.Breadcrumbs:

{
  dom: {
    serializeAttribute: ["macaw-ui-component"];
  }
}

Right now sentry will display MacawUI components names in breadcrumbs.

Development

To begin, you need to install dependencies:

pnpm install

Then, you can run the Storybook:

pnpm dev

You can run build in watch mode (useful for real-time development with e.g Dashboard):

pnpm watch

When you finish woking, you can add new changeset

pnpm change:add

License

Distributed under the Creative Common Attribution 4.0 International License https://creativecommons.org/licenses/by/4.0/

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

1.1.14

12 months ago

1.1.12

1 year ago

1.1.11

1 year ago

1.1.13

12 months ago

1.1.9

1 year ago

1.1.10

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago

1.0.0-pre.21

2 years ago

1.0.0-pre.20

2 years ago

1.0.0-pre.19

2 years ago

1.0.0-pre.17

2 years ago

1.0.0-pre.18

2 years ago

1.0.0-pre.16

2 years ago

1.0.0-pre.15

2 years ago

1.0.0-pre.13

2 years ago

1.0.0-pre.14

2 years ago

1.0.0-pre.12

2 years ago

1.0.0-pre.11

2 years ago

0.7.4

2 years ago

0.7.4-0

2 years ago

1.0.0-pre.10

2 years ago

0.8.0-pre.136

2 years ago

0.8.0-dev.104

2 years ago

0.8.0-pre.130

2 years ago

0.8.0-pre.131

2 years ago

0.8.0-pre.132

2 years ago

0.8.0-pre.133

2 years ago

0.8.0-pre.134

2 years ago

0.8.0-pre.135

2 years ago

0.8.0-pre.125

2 years ago

0.8.0-pre.126

2 years ago

0.8.0-pre.127

2 years ago

0.8.0-pre.128

2 years ago

0.8.0-pre.129

2 years ago

0.8.0-pre.120

2 years ago

0.8.0-pre.121

2 years ago

0.8.0-pre.122

2 years ago

0.8.0-pre.123

2 years ago

0.8.0-pre.124

2 years ago

0.8.0-pre.114

2 years ago

0.8.0-pre.115

2 years ago

0.8.0-pre.116

2 years ago

0.8.0-pre.117

2 years ago

0.8.0-pre.118

2 years ago

0.8.0-pre.119

2 years ago

0.8.0-pre.110

2 years ago

0.8.0-pre.111

2 years ago

0.8.0-pre.112

2 years ago

0.8.0-pre.113

2 years ago

0.8.0-pre.103

2 years ago

0.8.0-pre.104

2 years ago

0.8.0-pre.105

2 years ago

0.8.0-pre.106

2 years ago

0.8.0-pre.107

2 years ago

0.8.0-pre.108

2 years ago

0.8.0-pre.109

2 years ago

0.8.0-pre.100

2 years ago

0.8.0-pre.101

2 years ago

0.8.0-pre.102

2 years ago

1.0.0-pre.2

2 years ago

1.0.0-pre.1

2 years ago

1.0.0-pre.9

2 years ago

1.0.0-pre.8

2 years ago

1.0.0-pre.7

2 years ago

1.0.0-pre.6

2 years ago

1.0.0-pre.5

2 years ago

1.0.0-pre.4

2 years ago

1.0.0-pre.3

2 years ago

0.8.0-pre.99

2 years ago

0.8.0-pre.94

2 years ago

0.8.0-pre.93

2 years ago

0.8.0-pre.92

2 years ago

0.8.0-pre.91

2 years ago

0.8.0-pre.90

2 years ago

0.8.0-pre.98

2 years ago

0.8.0-pre.97

2 years ago

0.8.0-pre.96

2 years ago

0.8.0-pre.95

2 years ago

0.8.0-pre.83

2 years ago

0.8.0-pre.82

2 years ago

0.8.0-pre.81

2 years ago

0.8.0-pre.89

2 years ago

0.8.0-pre.88

2 years ago

0.8.0-pre.87

2 years ago

0.8.0-pre.86

2 years ago

0.8.0-pre.85

2 years ago

0.8.0-pre.84

2 years ago

0.7.3

2 years ago

0.8.0-pre.80

2 years ago

0.8.0-pre.72

2 years ago

0.8.0-pre.71

2 years ago

0.8.0-pre.70

2 years ago

0.8.0-pre.79

2 years ago

0.8.0-pre.78

2 years ago

0.8.0-pre.77

2 years ago

0.8.0-pre.76

2 years ago

0.8.0-pre.75

2 years ago

0.8.0-pre.74

2 years ago

0.8.0-pre.73

2 years ago

0.8.0-pre.61

2 years ago

0.8.0-pre.60

2 years ago

0.8.0-pre.69

2 years ago

0.8.0-pre.68

2 years ago

0.8.0-pre.67

2 years ago

0.8.0-pre.66

2 years ago

0.8.0-pre.65

2 years ago

0.8.0-pre.64

2 years ago

0.8.0-pre.63

2 years ago

0.8.0-pre.62

2 years ago

0.8.0-pre.59

2 years ago

0.8.0-pre.50

3 years ago

0.8.0-pre.58

3 years ago

0.8.0-pre.57

3 years ago

0.8.0-pre.56

3 years ago

0.8.0-pre.55

3 years ago

0.8.0-pre.54

3 years ago

0.8.0-pre.53

3 years ago

0.8.0-pre.52

3 years ago

0.8.0-pre.51

3 years ago

0.8.0-pre.49

3 years ago

0.8.0-pre.48

3 years ago

0.8.0-pre.47

3 years ago

0.8.0-pre.46

3 years ago

0.8.0-pre.45

3 years ago

0.8.0-pre.44

3 years ago

0.8.0-pre.43

3 years ago

0.8.0-pre.42

3 years ago

0.8.0-pre.41

3 years ago

0.8.0-pre.40

3 years ago

0.8.0-pre.39

3 years ago

0.8.0-pre.38

3 years ago

0.8.0-pre.37

3 years ago

0.8.0-pre.36

3 years ago

0.8.0-pre.35

3 years ago

0.8.0-pre.34

3 years ago

0.8.0-pre.14

3 years ago

0.8.0-pre.13

3 years ago

0.8.0-pre.12

3 years ago

0.8.0-pre.11

3 years ago

0.8.0-pre.10

3 years ago

0.8.0-pre.33

3 years ago

0.8.0-pre.32

3 years ago

0.8.0-pre.31

3 years ago

0.8.0-pre.30

3 years ago

0.8.0-pre.29

3 years ago

0.8.0-pre.28

3 years ago

0.8.0-pre.27

3 years ago

0.8.0-pre.26

3 years ago

0.8.0-pre.25

3 years ago

0.8.0-pre.24

3 years ago

0.8.0-pre.23

3 years ago

0.8.0-pre.22

3 years ago

0.8.0-pre.21

3 years ago

0.8.0-pre.20

3 years ago

0.8.0-pre.19

3 years ago

0.8.0-pre.18

3 years ago

0.8.0-pre.17

3 years ago

0.8.0-pre.16

3 years ago

0.8.0-pre.15

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.0

3 years ago

0.8.0-pre.5

3 years ago

0.8.0-pre.4

3 years ago

0.8.0-pre.7

3 years ago

0.8.0-pre.6

3 years ago

0.8.0-pre.9

3 years ago

0.8.0-pre.8

3 years ago

0.8.0-pre.1

3 years ago

0.8.0-pre.0

3 years ago

0.8.0-pre.3

3 years ago

0.8.0-pre.2

3 years ago

0.6.7

3 years ago

0.6.6

3 years ago

0.6.8-1

3 years ago

0.6.8-0

3 years ago

0.6.5

3 years ago

0.6.3

3 years ago

0.6.4

3 years ago

0.6.2

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.0

3 years ago

0.4.0

3 years ago

0.5.2

3 years ago

0.5.1

3 years ago

0.3.3

4 years ago

0.3.0-a.7

4 years ago

0.3.1-0

4 years ago

0.3.1-1

4 years ago

0.3.0

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.0-a.5

4 years ago

0.3.0-a.6

4 years ago

0.3.0-a.3

4 years ago

0.3.0-a.4

4 years ago

0.3.0-a.2

4 years ago

0.2.7

4 years ago

0.2.6

4 years ago

0.3.0-a.1

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.2.3

4 years ago

0.2.1

4 years ago

0.2.2

4 years ago

0.2.0

4 years ago

0.1.1-9

6 years ago

0.1.1-8

6 years ago

0.1.1-7

6 years ago

0.1.1-6

6 years ago

0.1.1-4

6 years ago

0.1.1-3

6 years ago

0.1.1-5

6 years ago

0.1.1-2

6 years ago

0.1.1-1

6 years ago

0.1.1-0

6 years ago