From 43eef8f74c14693fe4d48042b05275fc9b9e78d8 Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Fri, 19 Nov 2021 20:39:19 +0100 Subject: [PATCH 1/5] fixed rebranding issues --- README.md | 18 +++++++++--------- examples/typescript-app/package.json | 6 +++--- examples/typescript-app/src/theme.ts | 2 +- .../src/ui/components/Button/Button.styles.ts | 2 +- examples/typescript-app/yarn.lock | 10 +++++----- package.json | 4 ++-- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index ecb0f2c..f67113e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 🏃‍♀ Dynamic Styles -Banner +Banner
✨ Dynamic Css-in-Js styles engine, based on Emotion

- - - + + +
--- @@ -63,7 +63,7 @@ In the configuration object that the `createStylesheet()` method takes up, we can specify our application's current *theme*. We can easily access this theme in the stylesheets we create later. ```ts -import { createStylesheet } from 'create-styles'; +import { createStylesheet } from 'dynamic-styles'; // Initialization of a StyleSheet instance called 'styleSheet' export const styleSheet = createStylesheet({ @@ -211,7 +211,7 @@ Thus, we would have to specify it manually (e.g. `create` component to do this. ```jsx import React from 'react'; -import { GlobalStyles } from 'create-styles'; +import { GlobalStyles } from 'dynamic-styles'; const App = () => { return ( @@ -449,7 +449,7 @@ and in line with modern standards. The `NormalizeCss` Component sets the normalized styles specified in [normalize.css](https://necolas.github.io/normalize.css/) globally. ```jsx -import { NormalizeCSS } from 'create-styles'; +import { NormalizeCSS } from 'dynamic-styles'; const App = () => { return ( @@ -562,7 +562,7 @@ const Demo: React.FC = () => {
Click to expand -### `React-Native StyleSheet` vs `dynamic styles` +### `React-Native StyleSheet` vs `dynamic-styles` | | `dynamic-styles` | `React-Native` Stylesheet | |-----------------------------------------------|------------------|---------------------------| diff --git a/examples/typescript-app/package.json b/examples/typescript-app/package.json index 77133dc..607c465 100644 --- a/examples/typescript-app/package.json +++ b/examples/typescript-app/package.json @@ -11,7 +11,7 @@ "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", - "create-styles": "file:.yalc/create-styles", + "dynamic-styles": "file:.yalc/dynamic-styles", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", @@ -23,8 +23,8 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "install:dev:create-styles": "yalc add create-styles && yarn install", - "install:prod:create-styles": "yarn add create-styles && yarn install" + "install:dev:dynamic-styles": "yalc add dynamic-styles && yarn install", + "install:prod:dynamic-styles": "yarn add dynamic-styles && yarn install" }, "browserslist": { "production": [ diff --git a/examples/typescript-app/src/theme.ts b/examples/typescript-app/src/theme.ts index 5651a7f..ef0e7dd 100644 --- a/examples/typescript-app/src/theme.ts +++ b/examples/typescript-app/src/theme.ts @@ -1,4 +1,4 @@ -import { createStyleSheet } from 'create-styles'; +import { createStyleSheet } from 'dynamic-styles'; export type Theme = { colors: { diff --git a/examples/typescript-app/src/ui/components/Button/Button.styles.ts b/examples/typescript-app/src/ui/components/Button/Button.styles.ts index d6fb2cc..aee993d 100644 --- a/examples/typescript-app/src/ui/components/Button/Button.styles.ts +++ b/examples/typescript-app/src/ui/components/Button/Button.styles.ts @@ -1,5 +1,5 @@ import styleSheet from '../../../theme'; -import { UseStylesExtractStylesType } from 'create-styles'; +import { UseStylesExtractStylesType } from 'dynamic-styles'; const useStyles = styleSheet .withParams() diff --git a/examples/typescript-app/yarn.lock b/examples/typescript-app/yarn.lock index 77280c7..2cc6b42 100644 --- a/examples/typescript-app/yarn.lock +++ b/examples/typescript-app/yarn.lock @@ -3695,11 +3695,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" -"create-styles@file:.yalc/create-styles": - version "0.0.3" - dependencies: - clsx "^1.1.1" - cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -4320,6 +4315,11 @@ duplexify@^3.4.2, duplexify@^3.6.0: readable-stream "^2.0.0" stream-shift "^1.0.0" +"dynamic-styles@file:.yalc/dynamic-styles": + version "0.0.6" + dependencies: + clsx "^1.1.1" + ecc-jsbn@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" diff --git a/package.json b/package.json index f76502f..520cfba 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.6", "description": "Dynamic Css-in-Js styles engine, based on Emotion", "license": "MIT", - "homepage": "https://github.com/bennodev19/emotion-create-styles", + "homepage": "https://github.com/bennodev19/dynamic-styles", "author": "BennoDev ", "keywords": [ "react", @@ -77,7 +77,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/bennodev19/emotion-create-styles" + "url": "https://github.com/bennodev19/dynamic-styles" }, "bugs": { "url": "https://github.com/agile-ts/agile/issues" From da8421925b498c41e8128d8715b6e3a3f3f51a90 Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Fri, 19 Nov 2021 20:40:02 +0100 Subject: [PATCH 2/5] bumped version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 520cfba..905173b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dynamic-styles", - "version": "0.0.6", + "version": "0.0.7", "description": "Dynamic Css-in-Js styles engine, based on Emotion", "license": "MIT", "homepage": "https://github.com/bennodev19/dynamic-styles", From 32fa70faa8e48852db0050c337aba02db42f7348 Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Fri, 19 Nov 2021 20:43:14 +0100 Subject: [PATCH 3/5] fixed components export --- src/components/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/index.ts b/src/components/index.ts index 23982c4..ca8a28b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,9 @@ +import CacheProvider from './CacheProvider'; +import GlobalStyles from './GlobalStyles'; +import NormalizeCSS from './NormalizeCSS'; + export * from './CacheProvider'; export * from './GlobalStyles'; export * from './NormalizeCSS'; + +export { CacheProvider, GlobalStyles, NormalizeCSS }; From 79d3f2bded785552e62fde2db60e931bfc46d30b Mon Sep 17 00:00:00 2001 From: Benno Kohrs Date: Sat, 20 Nov 2021 08:36:57 +0100 Subject: [PATCH 4/5] fixed type issue --- README.md | 146 ++++++++++++++++++++++++------------------ src/css/StyleSheet.ts | 16 ++--- 2 files changed, 91 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index f67113e..66f756c 100644 --- a/README.md +++ b/README.md @@ -31,11 +31,12 @@ const MyComponent = (props) => { // Access dynamic styles as class names using the created 'useStyles()' hook // and specify the corresponding parameters const { classes } = useStyles({ color: props.color, fontSize: 10 }); + return ( -
- {/* */} -
-); +
+ {/* */} +
+ ); } ``` @@ -63,12 +64,13 @@ In the configuration object that the `createStylesheet()` method takes up, we can specify our application's current *theme*. We can easily access this theme in the stylesheets we create later. ```ts -import { createStylesheet } from 'dynamic-styles'; +import { createStyleSheet } from 'dynamic-styles'; // Initialization of a StyleSheet instance called 'styleSheet' -export const styleSheet = createStylesheet({ +export const styleSheet = createStyleSheet({ theme: { - primaryColor: "#32CD32", + primaryColor: "#aa11ee", + backgroundColor: "#f3f6f4" } }); ``` @@ -82,9 +84,9 @@ clustered in understandable chunks for the different parts of our Component. For example, styles for the `root` container and some `text` contained in the Component. ```js -import React from 'react'; -import { css } from '@emotion/react'; -import styleSheet from "./styles"; +import React from "react"; +import { css } from "@emotion/react"; +import { styleSheet } from "./styles"; // Specify dynamic styles and access them later in any React Component // with the returned 'useStyles()' hook. @@ -103,6 +105,7 @@ const useStyles = styleSheet.create( font-weight: bold; font-size: ${params.fontSize}px; color: black; + margin: 0; ` }), ); @@ -110,17 +113,18 @@ const useStyles = styleSheet.create( We use the `useStyles()` hook, to access the specified styles in the corresponding Component (`Demo`) and feed it with dynamic parameters (`params`). ```jsx -export const Demo = (props) => { +const Demo = (props) => { const { className } = props; - const [color, setColor] = useState("red"); + const [color, setColor] = React.useState("yellow"); // Use the created 'useStyles()' hook to access the specified styles as class names // and some utility functions like 'cx()' for merging class names. - const { classes, cx } = useStyles({ color, fontSize: 10 }); + const { classes, cx } = useStyles({ color, fontSize: 30 }); return (

hello world

+ setColor(e.target.value)} />
); } @@ -138,31 +142,34 @@ ensuring styles are overwritten in the correct order. Emotion-generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles. ```jsx -import React from 'react'; +import React from "react"; import { styleSheet } from "./styles"; const useStyles = styleSheet.create(({theme}) => ({ button: { - backgroundColor: theme.colors.darkBlue, + backgroundColor: "gray", border: 0, - color: theme.colors.white, + color: "black", borderRadius: 5, - padding: '10px 20px', - cursor: 'pointer', + padding: "10px 20px", + margin: 5, + cursor: "pointer" }, highlight: { - backgroundColor: theme.colors.lightBlue, - color: theme.colors.black, + backgroundColor: theme.primaryColor, + color: "black", + padding: 20 }, bold: { - fontWeight: 'bold', + fontWeight: 1000, + textDecoration: "underline" } })); const Demo = () => { - const [active, setActive] = useState(0); + const [active, setActive] = React.useState(0); const { classes, cx } = useStyles(); return ( @@ -208,10 +215,10 @@ which, by the way, is possible we would lose the type inference of the stylesheet object. Thus, we would have to specify it manually (e.g. `create()`). ```ts -import React from 'react'; -import { css } from '@emotion/react'; -import styleSheet from "./styles"; -import { StyleItem } from 'dynamic-styles'; +import React from "react"; +import { css } from "@emotion/react"; +import { StyleItem } from "dynamic-styles"; +import { styleSheet } from "./styles"; type DemoStyles = { color: string; @@ -241,9 +248,9 @@ const useStyles = styleSheet.create(
```ts -import React from 'react'; -import { css } from '@emotion/react'; -import styleSheet from "./styles"; +import React from "react"; +import { css } from "@emotion/react"; +import { styleSheet } from "./styles"; type DemoStyles = { color: string; @@ -269,6 +276,7 @@ const useStyles = styleSheet font-weight: bold; font-size: ${params.fontSize}px; color: black; + margin: 0; ` }), ); @@ -276,17 +284,18 @@ const useStyles = styleSheet In the actual Component where we include the created stylesheet with the `useStyles()` hook, we don't need to make any adjustments to achieve full type safety. ```tsx -export const Demo: React.FC = (props) => { +const Demo: React.FC = (props) => { const { className } = props; - const [color, setColor] = useState("red"); + const [color, setColor] = React.useState("yellow"); // Use the created 'useStyles()' hook to access the specified styles as class names // and some utility functions like 'cx()' for merging class names. - const { classes, cx } = useStyles({ color, fontSize: 10 }); + const { classes, cx } = useStyles({ color, fontSize: 30 }); return (

hello world

+ setColor(e.target.value)} />
); } @@ -303,7 +312,7 @@ An established reference created to a selector (e.g. `prefix-ref_button_1`), how In order to create such a reference, we can use the `createRef()` method, which is given to the `create()` method. ```jsx -import React from 'react'; +import React from "react"; import { styleSheet } from "./styles"; const useStyles = styleSheet.create(({theme, params, createRef, assignRef}) => { @@ -317,8 +326,9 @@ const useStyles = styleSheet.create(({theme, params, createRef, assignRef}) => { ref: button, // and add any other style properties - backgroundColor: theme.colors.blue, - color: theme.colors.white, + backgroundColor: theme.primaryColor, + border: 0, + color: "black", padding: `10px 20px`, borderRadius: 5, cursor: 'pointer', @@ -328,8 +338,9 @@ const useStyles = styleSheet.create(({theme, params, createRef, assignRef}) => { // Assign the reference to the selector via the 'assignRef()' method button2: assignRef(button, { // and add any other style properties - backgroundColor: theme.colors.blue, - color: theme.colors.white, + backgroundColor: theme.primaryColor, + border: 0, + color: "black", padding: `10px 20px`, borderRadius: 5, cursor: 'pointer', @@ -338,12 +349,12 @@ const useStyles = styleSheet.create(({theme, params, createRef, assignRef}) => { container: { display: 'flex', justifyContent: 'center', - backgroundColor: theme.colors.white, - padding: 10, + backgroundColor: theme.backgroundColor, + padding: 50, // Reference button with the previously created static selector [`&:hover .${button}`]: { - backgroundColor: theme.colors.violet[6], + backgroundColor: "rred", }, }, }; @@ -369,36 +380,36 @@ We can define animations using the [`keyframes`](https://emotion.sh/docs/keyfram and returns an object we can use in the corresponding styles. We can use strings or objects just like `css` to create such *css keyframes*. ```jsx -import React from 'react'; -import { keyframes } from '@emotion/react'; +import React from "react"; +import { keyframes } from "@emotion/react"; import { styleSheet } from "./styles"; // Define keyframes with the 'keyframes()' method from '@emotion/react' const bounce = keyframes` from, 20%, 53%, 80%, to { - transform: translate3d(0,0,0); + transform: translate3d(0, 0, 0); } 40%, 43% { - transform: translate3d(0, -30px, 0); + transform: translate3d(0, 30px, 0); } 70% { - transform: translate3d(0, -15px, 0); + transform: translate3d(0, 15px, 0); } 90% { - transform: translate3d(0,-4px,0); + transform: translate3d(0, 4px,0); } ` -const useStyles = styleSheet.create(({theme}) => ({ +const useStyles = styleSheet.create({ container: { textAlign: 'center', // Use created 'bounce' keyframes in the 'container' styles animation: `${bounce} 3s ease-in-out infinite`, - }, -})); + } +}); const Demo = () => { const { classes } = useStyles(); @@ -412,10 +423,13 @@ const Demo = () => { Sometimes we might want to insert `global css` styles. We can use the `` component to do this. ```jsx -import React from 'react'; -import { GlobalStyles } from 'dynamic-styles'; +import React from "react"; +import { GlobalStyles } from "dynamic-styles"; +import { useTheme } from "./useTheme"; const App = () => { + const theme = useTheme(); + return ( <> {/* Specify global Styles at the root of your App */} @@ -426,8 +440,8 @@ const App = () => { }, body: { - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark : theme.white, - color: theme.colorScheme === 'dark' ? theme.colors.dark : theme.black, + backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white, + color: theme.colorScheme === 'dark' ? theme.white : theme.black, lineHeight: 20, }, }} @@ -449,7 +463,7 @@ and in line with modern standards. The `NormalizeCss` Component sets the normalized styles specified in [normalize.css](https://necolas.github.io/normalize.css/) globally. ```jsx -import { NormalizeCSS } from 'dynamic-styles'; +import { NormalizeCSS } from "dynamic-styles"; const App = () => { return ( @@ -470,15 +484,17 @@ We can easily make Components customizable with inline styles by specifying the `styles` property (e.g. partial of specified stylesheet) in the `useStyles()` hook's configuration object. -#### `Button.tsx` +#### `./components/Button.tsx` Here we create a reusable Button that can be styled via inline styles using the `styles` property. ```tsx -import React from 'react'; -import { styleSheet } from "./styles"; +import React from "react"; +import { UseStylesExtractStylesType } from "dynamic-styles"; +import { styleSheet } from "../styles"; -const useStyles = styleSheet.withParams() +const useStyles = styleSheet + .withParams() .create(({theme, params: { color, radius }}) => ({ root: { color: theme.colors.white, @@ -496,7 +512,7 @@ type ButtonStyles = { // Create type that represents the created stylesheet type (extracted from the 'useStyles()' hook). // This type can be used to add a typesafe 'styles' property to the Button component. -export type ExtractedStylesType = ExtractStylesType; +export type ExtractedStylesType = UseStylesExtractStylesType; export const Button: React.FC = (props) => { const { color = 'blue', radius = 0, styles = {}, onClick } = props; @@ -523,11 +539,13 @@ type ButtonProps = { Use the created `Button` Component and specify `inline` styles with the `styles` property. ```tsx -import React from 'react'; -import { css } from '@emotion/react'; -import { Button } from './Button'; +import React from "react"; +import { css } from "@emotion/react"; +import { Button } from "./components/Button"; const Demo: React.FC = () => { + const [toggled, setToggled] = React.useState(false); + return (