Add ThemeProvider (#200)

Fixes #195
saleor · Jan 12, 2023 · 0a1f2d3 · 0a1f2d3
1 parent 54a5b7c
commit 0a1f2d3
Show file tree

Hide file tree

Showing 19 changed files with 331 additions and 20 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -10,6 +10,9 @@ module.exports = {
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx"],
     },
+    "import/resolver": {
+      typescript: {},
+    },
   },
   extends: [
     "eslint:recommended",

diff --git a/.storybook/preview.cjs b/.storybook/preview.cjs
@@ -1,3 +1,7 @@
+import React from "react";
+
+import { ThemeProvider } from "../src/theme";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,4 +10,12 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+};
+
+export const decorators = [
+  (Story) => {
+    return React.createElement(ThemeProvider, {
+      children: React.createElement(Story),
+    });
+  },
+];
diff --git a/legacy/.storybook/main.cjs b/legacy/.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/legacy/.storybook/preview-head.html b/legacy/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
diff --git a/legacy/.storybook/preview.cjs b/legacy/.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/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "8.0.0-pre",
+  "version": "1.0.0",
   "license": "CC-BY-4.0",
   "homepage": "https://macaw-ui.vercel.app/",
   "repository": {
@@ -39,10 +39,10 @@
   },
   "scripts": {
     "build:legacy": "cd legacy && npm run build",
-    "build:next": "npm-run-all check-types-next && vite build",
+    "build:next": "npm-run-all check-types:next && vite build",
     "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook",
     "lint:legacy": "cd legacy && npm run lint",
-    "lint:next": "eslint 'src/**/*.@(tsx|ts|jsx|js)' --fix --config .eslintrc.cjs",
+    "lint:next": "eslint 'src/**/*.@(tsx|ts|jsx|js)' --fix",
     "check-types:next": "tsc",
     "check-types:legacy": "cd legacy && npm run build-tsc",
     "test:legacy": "cd legacy && npm run test",
@@ -51,8 +51,7 @@
     "test": "npm-run-all test:*",
     "build": "npm-run-all build:*",
     "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
-    "make-release": "release-it pre",
-    "release": "npm-run-all build make-release",
+    "release": "npm-run-all build release-it",
     "prepare": "is-ci || husky install"
   },
   "name": "@saleor/macaw-ui",
@@ -95,13 +94,13 @@
     "typescript": "^4.9.3",
     "vite": "^3.2.5",
     "vite-plugin-dts": "^1.7.1",
-    "webpack": "^5.75.0"
-  },
-  "dependencies": {
+    "webpack": "^5.75.0",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/recipes": "^0.3.0",
-    "@vanilla-extract/sprinkles": "^1.5.1"
+    "@vanilla-extract/sprinkles": "^1.5.1",
+    "@dessert-box/react": "^0.4.0"
   },
+  "dependencies": {},
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx
@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Box } from "./Box";
+
+export default {
+  component: Box,
+} as ComponentMeta<typeof Box>;
+
+const Template: ComponentStory<typeof Box> = (args) => (
+  <Box {...args}>Box component</Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  padding: 3,
+  borderWidth: 1,
+  borderStyle: "solid",
+};
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -0,0 +1,5 @@
+import { createBox } from "@dessert-box/react";
+
+import { sprinkles } from "~/theme";
+
+export const Box = createBox({ atoms: sprinkles });
diff --git a/src/components/Box/index.ts b/src/components/Box/index.ts
@@ -0,0 +1 @@
+export * from "./Box";
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1 @@
+export * from "./Box";
diff --git a/src/index.tsx b/src/index.tsx
@@ -1 +1,2 @@
-export {};
+export * from "./components";
+export * from "./theme";