@szum-tech/design-system 1.1.4 → 1.1.6

package/README.md

@@ -23,12 +23,14 @@ Szum-Tech Design System is available as an [npm package](https://www.npmjs.com/p
 
 ```sh
 npm install @szum-tech/design-system
+npm install -D tailwindcss tailwind-scrollbar 
 ```
 
 **yarn:**
 
 ```sh
 yarn add @szum-tech/design-system
+yarn add -D tailwindcss tailwind-scrollbar
 ```
 
 ## Configuration 
@@ -50,7 +52,7 @@ module.exports = {
     extend: {}
   },
   plugins: [],
-  presets: [require("@szum-tech/design-system/tailwind-preset")]
+  presets: [require("@szum-tech/design-system/tailwindcss/main-preset")]
 };
 ```
 
@@ -59,7 +61,7 @@ module.exports = {
 > Import CSS file from `@szum-tech/design-system/theme` with colors palette for dark and light theme and default styles (see file with [theme styles](https://github.com/JanSzewczyk/design-system/blob/main/src/theme/global.css))
 
 ```css
-@import "@szum-tech/design-system/theme/global.css";
+@import "@szum-tech/design-system/tailwindcss/global.css";
 
 @tailwind base;
 @tailwind components;
@@ -83,8 +85,6 @@ function Providers({children}) {
 }
 ```
 
-
-
 ## Documentation 
 
 [Szum-Tech Design System](https://janszewczyk.github.io/design-system)

package/dist/index.d.ts

@@ -11,10 +11,20 @@ interface ThemeContextType {
 declare const ThemeContext: React.Context<ThemeContextType>;
 
 interface ThemeProviderProps {
-    defaultTheme?: ThemeType;
+    /**
+     * Children Components using theming.
+     */
     children?: React.ReactNode;
+    /**
+     * Define the default theme which is set at the beginning if neither local storage nor media is defined.
+     */
+    defaultTheme?: ThemeType;
+    /**
+     * Define theme that is always set initially.
+     */
+    theme?: ThemeType;
 }
-declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderProps): JSX.Element;
 
 declare const useTheme: () => ThemeContextType;
 

package/dist/index.js

@@ -12,23 +12,23 @@ var React2__default = /*#__PURE__*/_interopDefaultLegacy(React2);
 // src/components/index.tsx
 function Button() {
   return /* @__PURE__ */ jsxRuntime.jsx("button", {
-    className: "rounded-lg border border-red-800 bg-red-300 p-4",
+    className: "scroll rounded-lg border border-red-800 bg-red-300 p-4",
     children: "button"
   });
 }
 var ThemeContext = React2__default["default"].createContext({});
-function getInitialTheme() {
+function getInitialTheme(defaultTheme) {
   if (typeof window !== "undefined" && window.localStorage) {
     const storageTheme = window.localStorage.getItem("theme");
     if (storageTheme === "dark" || !storageTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
       return "dark";
     }
   }
-  return "light";
+  return defaultTheme ?? "light";
 }
-function ThemeProvider({ children, defaultTheme }) {
-  const [theme, setTheme] = React2__default["default"].useState(
-    defaultTheme ? defaultTheme : getInitialTheme
+function ThemeProvider({ children, defaultTheme, theme }) {
+  const [themeState, setThemeState] = React2__default["default"].useState(
+    theme ? theme : getInitialTheme(defaultTheme)
   );
   function rawSetTheme(rawTheme) {
     if (typeof window !== "undefined" && window.localStorage) {
@@ -41,10 +41,10 @@ function ThemeProvider({ children, defaultTheme }) {
     }
   }
   React2__default["default"].useEffect(() => {
-    rawSetTheme(theme);
-  }, [theme]);
+    rawSetTheme(themeState);
+  }, [themeState]);
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
-    value: { theme, setTheme },
+    value: { theme: themeState, setTheme: setThemeState },
     children
   });
 }

package/dist/index.mjs

@@ -4,23 +4,23 @@ import React2 from 'react';
 // src/components/index.tsx
 function Button() {
   return /* @__PURE__ */ jsx("button", {
-    className: "rounded-lg border border-red-800 bg-red-300 p-4",
+    className: "scroll rounded-lg border border-red-800 bg-red-300 p-4",
     children: "button"
   });
 }
 var ThemeContext = React2.createContext({});
-function getInitialTheme() {
+function getInitialTheme(defaultTheme) {
   if (typeof window !== "undefined" && window.localStorage) {
     const storageTheme = window.localStorage.getItem("theme");
     if (storageTheme === "dark" || !storageTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
       return "dark";
     }
   }
-  return "light";
+  return defaultTheme ?? "light";
 }
-function ThemeProvider({ children, defaultTheme }) {
-  const [theme, setTheme] = React2.useState(
-    defaultTheme ? defaultTheme : getInitialTheme
+function ThemeProvider({ children, defaultTheme, theme }) {
+  const [themeState, setThemeState] = React2.useState(
+    theme ? theme : getInitialTheme(defaultTheme)
   );
   function rawSetTheme(rawTheme) {
     if (typeof window !== "undefined" && window.localStorage) {
@@ -33,10 +33,10 @@ function ThemeProvider({ children, defaultTheme }) {
     }
   }
   React2.useEffect(() => {
-    rawSetTheme(theme);
-  }, [theme]);
+    rawSetTheme(themeState);
+  }, [themeState]);
   return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-    value: { theme, setTheme },
+    value: { theme: themeState, setTheme: setThemeState },
     children
   });
 }

package/package.json

@@ -50,8 +50,7 @@
   },
   "files": [
     "dist/**",
-    "tailwind-preset.js",
-    "theme/**"
+    "tailwindcss/**"
   ],
   "homepage": "https://github.com/JanSzewczyk/design-system#readme",
   "keywords": [
@@ -83,17 +82,16 @@
     "clean": "rm -rf node_modules && rm -rf dist",
     "dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
     "dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
-    "dev:css": "tailwindcss -w -i ./src/theme/global.css -o ./src/styles/default.css",
-    "postbuild": "cpy './theme' '../' --cwd='src'",
+    "dev:css": "tailwindcss -w -i tailwindcss/global.css -o src/styles/default.css",
     "storybook": "start-storybook -p 6006",
     "semantic-release": "semantic-release",
     "build:storybook": "build-storybook",
     "build:storybook:docs": "build-storybook --docs",
-    "prebuild:storybook": "tailwindcss -i ./src/theme/global.css -o ./src/styles/default.css"
+    "prebuild:storybook": "tailwindcss -i tailwindcss/global.css -o src/styles/default.css"
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "peerDependencies": {
     "react": "^18.2.0",
     "tailwind-scrollbar": "^2.0.1",

package/{theme → tailwindcss}/global.css

@@ -121,12 +121,6 @@
   }
 
   body {
-    @apply app-scroll bg-gray-900 font-sans text-typography-primary antialiased;
-  }
-}
-
-@layer components {
-  .app-scroll {
-    @apply scrollbar scrollbar-thin scrollbar-thumb-gray-600/100 hover:scrollbar-thumb-gray-600/80;
+    @apply scroll bg-gray-900 font-sans text-typography-primary antialiased;
   }
 }

package/{tailwind-preset.js → tailwindcss/main-preset.js}

@@ -87,5 +87,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("tailwind-scrollbar")]
+  plugins: [require("tailwind-scrollbar"), require("./plugins/components")]
 };

package/tailwindcss/plugins/components.js

@@ -0,0 +1,10 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addComponents }) {
+  addComponents({
+    ".scroll": {
+      "@apply scrollbar scrollbar-thin scrollbar-thumb-gray-600/100 hover:scrollbar-thumb-gray-600/80":
+        {}
+    }
+  });
+});