Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ThemeProvider #200

Merged
merged 14 commits into from
Jan 12, 2023
Merged

Add ThemeProvider #200

merged 14 commits into from
Jan 12, 2023

Conversation

krzysztofzuraw
Copy link
Member

@krzysztofzuraw krzysztofzuraw commented Jan 11, 2023

Fixes: #195

I've added:

  • new theme contract
  • defaultLight theme that fulfills the contract
  • sprinkles and box for components/helpers that will be building blocks for UI lib

@vercel
Copy link

vercel bot commented Jan 11, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
macaw-ui ❌ Failed (Inspect) Jan 12, 2023 at 1:29PM (UTC)

@krzysztofzuraw krzysztofzuraw changed the base branch from main to 194-new-structure January 11, 2023 09:30
Copy link
Member

@poulch poulch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Comment on lines +16 to +20
return React.createElement(ThemeProvider, {
children: React.createElement(Story),
});
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
(Story) => {
return React.createElement(ThemeProvider, {
children: React.createElement(Story),
});
},
(Story) => (
<ThemeProvider>
<Story />
</ThemeProvider>
),

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would love to but I've got this error from storybook:

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .cjs file format, or if it's an asset, add "**/*.cjs" to `assetsInclude` in your configuration.
  Plugin: vite:import-analysis
  File: /Users/kzuraw/Developer/macaw-ui/.storybook/preview.cjs:19:21
  17 |      <ThemeProvider>
  18 |        <Story />
  19 |      </ThemeProvider>
     |                      ^
  20 |    ),
  21 |  ];

import { defaultLightTheme } from "./defaultLight.css";

type ThemeProviderProps = {
children?: React.ReactNode;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO children should be undefined in this case

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React node is already undefined:
CleanShot 2023-01-11 at 12 52 46@2x

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok so why not use like this

children: React.ReactNode;

},
defaultCondition: "mobile",
properties: {
display: ["none", "flex"],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we going to defined list of all supported option here? E.g. grid ?

Copy link
Member Author

@krzysztofzuraw krzysztofzuraw Jan 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - for now I've added only flex but in the future we should add other displays as well 😄

@krzysztofzuraw krzysztofzuraw marked this pull request as ready for review January 11, 2023 11:53
"@vanilla-extract/css": "^1.9.2",
"@vanilla-extract/recipes": "^0.3.0",
"@vanilla-extract/sprinkles": "^1.5.1"
"@vanilla-extract/sprinkles": "^1.5.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vanilla is only a dev tool, we don't need this in the runtime i guess, so please move it to dev deps

@@ -0,0 +1,4 @@
import { createBox } from "@dessert-box/react";
import { sprinkles } from "../../theme";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

consider to use aliases

Base automatically changed from 194-new-structure to canary January 12, 2023 13:05
@krzysztofzuraw krzysztofzuraw merged commit 0a1f2d3 into canary Jan 12, 2023
@krzysztofzuraw krzysztofzuraw deleted the 195-theme-provider branch January 12, 2023 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants