New repo structure (#199)

saleor · Jan 12, 2023 · 54a5b7c · 54a5b7c
1 parent a8c3427
commit 54a5b7c
Show file tree

Hide file tree

Showing 548 changed files with 19,159 additions and 292 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,49 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier",
+  ],
+  overrides: [],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint", "react-hooks", "import"],
+  rules: {
+    "react/react-in-jsx-scope": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "import/no-unresolved": "error",
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "external",
+          "builtin",
+          "internal",
+          "sibling",
+          "parent",
+          "index",
+        ],
+      },
+    ],
+  },
+  ignorePatterns: [".eslintrc.cjs"],
+};
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -2,35 +2,34 @@ name: CI
 on: [push]
 jobs:
   build:
-    name: Build, lint, and test
+    name: Lint, check types and test
 
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0 # Required for Chromatic to retrieve full git history
+        uses: actions/checkout@v3
 
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
           node-version-file: ".nvmrc"
 
-      - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1
+      - name: Install legacy deps
+        run: npm ci
+        working-directory: legacy
 
-      - name: Lint
-        run: npm run lint
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: true
 
-      - name: Test
-        run: npm test --ci --coverage --maxWorkers=2
+      - name: Lint
+        run: pnpm lint
 
-      - name: Build
-        run: npm run build
+      - name: Check types
+        run: pnpm check-types
 
-      - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+      - name: Test
+        run: pnpm test
diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml
diff --git a/.gitignore b/.gitignore
@@ -1,14 +1,27 @@
-.*
-!.husky
-!.eslintrc.js
-!.svgrrc.js
-!.svgrrc-nomaterial.js
-!.gitignore
-!.gitkeep
-!.storybook
-!.github
-!.nvmrc
+# Logs
+logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Storybook
 storybook-static
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+pnpm dlx lint-staged
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,5 +1,4 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
-npm run build-tsc
+pnpm dlx npm-run-all --parallel lint check-types test
diff --git a/.lintstagedrc.cjs b/.lintstagedrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  "*.{ts,tsx,js,jsx}": "eslint --fix",
+  "*": "prettier --ignore-unknown --write",
+};
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1 @@
-puppeteer_skip_chromium_download = true
 legacy-peer-deps=true
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  printWidth: 80,
+  semi: true,
+  singleQuote: false,
+  trailingComma: "es5",
+};
diff --git a/.release-it.cjs b/.release-it.cjs
@@ -0,0 +1,7 @@
+module.exports = {
+  github: {
+    release: true,
+    draft: true,
+    releaseName: "${version}",
+  },
+};
diff --git a/.storybook/main.cjs b/.storybook/main.cjs
@@ -0,0 +1,22 @@
+const { mergeConfig } = require("vite");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [require("@vanilla-extract/vite-plugin").vanillaExtractPlugin()],
+    });
+  },
+};
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
diff --git a/.storybook/preview.cjs b/.storybook/preview.cjs
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/README.md b/README.md
@@ -7,22 +7,15 @@
 </div>
 
 # MacawUI
+
 Official React UI components kit for [Saleor](https://saleor.io/) — 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](https://github.com/mirumee/saleor/discussions).
 
 ## Installation
-```sh
-npm i @saleor/macaw-ui
-```
-
-Note that this package depends on the following Material-UI **v4** packages: `@material-ui/core`, `@material-ui/icons` and `@material-ui/lab`. If your project doesn't have them installed and you're not using npm v7 with [automatically installed peer dependencies](https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/) then you'll need to install them manually:
 
 ```sh
-npm i @material-ui/core @material-ui/icons @material-ui/lab
+npm i @saleor/macaw-ui
 ```
 
-## Documentation
-Take a look at our [storybook docs](https://macaw-ui.vercel.app). You can find guides, component overview, and project ideas there.
-
 ### Development
 
 To begin, you need to install dependencies:
@@ -31,31 +24,8 @@ To begin, you need to install dependencies:
 npm install
 ```
 
-We use [husky](https://www.npmjs.com/package/husky) to provide precommit and prepush git hooks:
-
-```sh
-npx husky install
-```
-
-To develop our components we utilize [Storybook](https://storybook.js.org/) which is playing very nicely with our development flow. To run storybook's developer server run:
-
-```sh
-npm run storybook
-```
-
-### Working with Material-UI
-MacawUI was created to integrate with [Material-UI](https://material-ui.com/) seamlessly. It exports a `ThemeProvider` that will override Material-UI component styles:
-```jsx
-import { ThemeProvider } from "@saleor/macaw-ui";
-
-// ...
-
-<ThemeProvider>
-  <App />
-</ThemeProvider>
-```
-
 ## License
+
 Distributed under the Creative Common Attribution 4.0 International License
 [https://creativecommons.org/licenses/by/4.0/](https://creativecommons.org/licenses/by/4.0/)
 
@@ -64,4 +34,3 @@ Distributed under the Creative Common Attribution 4.0 International License
 <a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
 
 Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
-
diff --git a/.eslintrc.js → legacy/.eslintrc.js b/.eslintrc.js → legacy/.eslintrc.js
@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",

diff --git a/.husky/.gitignore → legacy/.husky/.gitignore b/.husky/.gitignore → legacy/.husky/.gitignore
diff --git a/legacy/.husky/pre-commit b/legacy/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint
diff --git a/legacy/.husky/pre-push b/legacy/.husky/pre-push
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint
+npm run build-tsc
diff --git a/legacy/.npmrc b/legacy/.npmrc
@@ -0,0 +1,2 @@
+puppeteer_skip_chromium_download = true
+legacy-peer-deps=true
diff --git a/.storybook/main.js → legacy/.storybook/main.js b/.storybook/main.js → legacy/.storybook/main.js
diff --git a/.storybook/preview.js → legacy/.storybook/preview.js b/.storybook/preview.js → legacy/.storybook/preview.js
diff --git a/.svgrrc-nomaterial.js → legacy/.svgrrc-nomaterial.js b/.svgrrc-nomaterial.js → legacy/.svgrrc-nomaterial.js
diff --git a/.svgrrc.js → legacy/.svgrrc.js b/.svgrrc.js → legacy/.svgrrc.js
diff --git a/legacy/README.md b/legacy/README.md
@@ -0,0 +1,67 @@
+<div align="center">
+  <a href="https://macaw-ui.vercel.app/" rel="noopener" target="_blank"><img src="/stories/assets/macaw-ui-logo.svg" alt="Material-ui-pickers logo"></a></p>
+
+  [![npm package](https://img.shields.io/npm/v/@saleor/macaw-ui.svg)](https://www.npmjs.com/package/@saleor/macaw-ui)
+  [![npm download](https://img.shields.io/npm/dm/@saleor/macaw-ui.svg)](https://www.npmjs.com/package/@saleor/macaw-ui)
+  [![Bundle Size](https://badgen.net/bundlephobia/minzip/@saleor/macaw-ui)](https://bundlephobia.com/package/@saleor/macaw-ui@latest)
+</div>
+
+# MacawUI
+Official React UI components kit for [Saleor](https://saleor.io/) — 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](https://github.com/mirumee/saleor/discussions).
+
+## Installation
+```sh
+npm i @saleor/macaw-ui
+```
+
+Note that this package depends on the following Material-UI **v4** packages: `@material-ui/core`, `@material-ui/icons` and `@material-ui/lab`. If your project doesn't have them installed and you're not using npm v7 with [automatically installed peer dependencies](https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/) then you'll need to install them manually:
+
+```sh
+npm i @material-ui/core @material-ui/icons @material-ui/lab
+```
+
+## Documentation
+Take a look at our [storybook docs](https://macaw-ui.vercel.app). You can find guides, component overview, and project ideas there.
+
+### Development
+
+To begin, you need to install dependencies:
+
+```sh
+npm install
+```
+
+We use [husky](https://www.npmjs.com/package/husky) to provide precommit and prepush git hooks:
+
+```sh
+npx husky install
+```
+
+To develop our components we utilize [Storybook](https://storybook.js.org/) which is playing very nicely with our development flow. To run storybook's developer server run:
+
+```sh
+npm run storybook
+```
+
+### Working with Material-UI
+MacawUI was created to integrate with [Material-UI](https://material-ui.com/) seamlessly. It exports a `ThemeProvider` that will override Material-UI component styles:
+```jsx
+import { ThemeProvider } from "@saleor/macaw-ui";
+
+// ...
+
+<ThemeProvider>
+  <App />
+</ThemeProvider>
+```
+
+## License
+Distributed under the Creative Common Attribution 4.0 International License
+[https://creativecommons.org/licenses/by/4.0/](https://creativecommons.org/licenses/by/4.0/)
+
+## Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
+
diff --git a/_templates/icon/new/hello.ejs.t → legacy/_templates/icon/new/hello.ejs.t b/_templates/icon/new/hello.ejs.t → legacy/_templates/icon/new/hello.ejs.t
diff --git a/generateFixture.js → legacy/generateFixture.js b/generateFixture.js → legacy/generateFixture.js
diff --git a/package-lock.json → legacy/package-lock.json b/package-lock.json → legacy/package-lock.json
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		puppeteer_skip_chromium_download = true
		legacy-peer-deps=true
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		puppeteer_skip_chromium_download = true
		legacy-peer-deps=true