@szum-tech/design-system 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Szum-Tech
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# Szum-Tech Design System
+

package/dist/index.css

@@ -0,0 +1,126 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --white: 250 250 250; /* rgb(250 250 250) */
+    --black: 28 28 28; /* rgb(28, 28, 28) */
+
+    --text-color: 28 28 28; /* rgb(28 28 28) */
+
+    --primary-100: 153 206 255; /* rgb(153, 206, 255) 60% */
+    --primary-200: 115 187 255; /* rgb(115, 187, 255) 45% */
+    --primary-300: 77 169 255; /* rgb(77, 169, 255) 30% */
+    --primary-400: 38 150 255; /* rgb(38, 150, 255) 15% */
+    --primary-500: 0 132 255; /* rgb(0, 132, 255) */
+    --primary-600: 0 112 217; /* rgb(0, 112, 217) 15% */
+    --primary-700: 0 92 179; /* rgb(0, 92, 179) 30% */
+    --primary-800: 0 73 140; /* rgb(0, 73, 140) 45% */
+    --primary-900: 0 53 102; /* rgb(0, 53, 102) 60% */
+
+    --success-100: 125 255 162; /* rgb(125, 255, 162) */
+    --success-200: 77 255 127; /* rgb(77, 255, 127) */
+    --success-300: 28 255 92; /* rgb(28, 255, 92) */
+    --success-400: 0 235 66; /* rgb(0, 235, 66) */
+    --success-500: 0 186 52; /* rgb(0, 186, 52) */
+    --success-600: 0 158 44; /* rgb(0, 158, 44) */
+    --success-700: 0 130 36; /* rgb(0, 130, 36) */
+    --success-800: 0 102 29; /* rgb(0, 102, 29) */
+    --success-900: 0 74 21; /* rgb(0, 74, 21) */
+
+    --warning-100: 255 207 151; /* rgb(255, 207, 151) */
+    --warning-200: 255 189 111; /* rgb(255, 189, 111) */
+    --warning-300: 255 171 72; /* rgb(255, 171, 72) */
+    --warning-400: 255 153 33; /* rgb(255, 153, 33) */
+    --warning-500: 249 134 0; /* rgb(249, 134, 0) */
+    --warning-600: 212 114 0; /*  rgb(212, 114, 0) */
+    --warning-700: 174 94 0; /* rgb(174, 94, 0) */
+    --warning-800: 137 74 0; /* rgb(137, 74, 0) */
+    --warning-900: 100 54 0; /* rgb(100, 54, 0) */
+
+    --error-100: 246 171 171; /* rgb(246, 171, 171) */
+    --error-200: 243 139 139; /* rgb(243, 139, 139) */
+    --error-300: 240 107 107; /* rgb(240, 107, 107) */
+    --error-400: 236 76 76; /* rgb(236, 76, 76) */
+    --error-500: 233 44 44; /* rgb(233, 44, 44) */
+    --error-600: 213 22 22; /* rgb(213, 22, 22) */
+    --error-700: 176 18 18; /* rgb(176, 18, 18) */
+    --error-800: 138 14 14; /* rgb(138, 14, 14) */
+    --error-900: 100 10 10; /* rgb(100, 10, 10) */
+
+    --gray-100: 75 75 75; /* rgb(75, 75, 75) 70% */
+    --gray-200: 100 100 100; /* rgb(100, 100, 100) 60% */
+    --gray-300: 125 125 125; /* rgb(125, 125, 125) 50% */
+    --gray-400: 150 150 150; /* rgb(150, 150, 150) 40% */
+    --gray-500: 175 175 175; /* rgb(175, 175, 175) 30% */
+    --gray-600: 200 200 200; /* rgb(200, 200, 200) 20% */
+    --gray-700: 212 212 212; /* rgb(212, 212, 212) 15% */
+    --gray-800: 225 225 225; /* rgb(225, 225, 225) 10% */
+    --gray-900: 237 237 237; /* rgb(237, 237, 237) 5% */
+  }
+
+  .dark {
+    --white: 250 250 250; /* rgb(250, 250, 250) */
+    --black: 28 28 28; /* rgb(28, 28, 28) */
+
+    --text-color: 242 242 242; /* rgb(242, 242, 242) */
+
+    --primary-100: 161 210 255; /* rgb(161, 210, 255) */
+    --primary-200: 126 193 255; /* rgb(126,193,255) */
+    --primary-300: 91 177 255; /* rgb(91,177,255) */
+    --primary-400: 56 160 255; /* rgb(56, 160, 255) */
+    --primary-500: 21 143 255; /* rgb(21, 143, 255) */
+    --primary-600: 0 122 235; /* rgb(0,122,235) */
+    --primary-700: 0 101 193; /* rgb(0, 101, 193) */
+    --primary-800: 0 79 152; /* rgb(0, 79, 152) */
+    --primary-900: 0 58 110; /* rgb(0, 58, 110) */
+
+    --success-100: 152 244 178; /* rgb(152, 244, 178) */
+    --success-200: 114 240 149; /* rgb(114, 240, 149) */
+    --success-300: 75 235 120; /* rgb(75, 235, 120) */
+    --success-400: 36 231 91; /* rgb(36, 231, 91) */
+    --success-500: 22 203 73; /* rgb(22, 203, 73) */
+    --success-600: 19 173 62; /* rgb(19, 173, 62) */
+    --success-700: 15 142 51; /* rgb(15, 142, 51) */
+    --success-800: 12 112 40; /* rgb(12, 112, 40) */
+    --success-900: 9 81 29; /* rgb(9, 81, 29) */
+
+    --warning-100: 255 217 171; /* rgb(255, 217, 171) */
+    --warning-200: 255 202 139; /* rgb(255, 202, 139) */
+    --warning-300: 255 188 108; /* rgb(255, 188, 108) */
+    --warning-400: 255 173 77; /* rgb(255, 173, 77) */
+    --warning-500: 255 159 45; /* rgb(255, 159, 45) */
+    --warning-600: 255 138 0; /* rgb(255, 138, 0) */
+    --warning-700: 210 114 0; /* rgb(210, 114, 0) */
+    --warning-800: 165 90 0; /* rgb(165, 90, 0) */
+    --warning-900: 120 65 0; /* rgb(120, 65, 0) */
+
+    --error-100: 252 179 179; /* rgb(252, 179, 179) */
+    --error-200: 251 150 150; /* rgb(251, 150, 150) */
+    --error-300: 249 122 121; /* rgb(249, 122, 121) */
+    --error-400: 248 93 93; /* rgb(248, 93, 93) */
+    --error-500: 247 65 64; /* rgb(247, 65, 64) */
+    --error-600: 245 20 19; /* rgb(245, 20, 19) */
+    --error-700: 209 10 9; /* rgb(209, 10, 9) */
+    --error-800: 164 8 7; /* rgb(164, 8, 7) */
+    --error-900: 119 6 5; /* rgb(119, 6, 5) */
+
+    --gray-100: 187 187 187; /* rgb(187, 187, 187) 70% */
+    --gray-200: 164 164 164; /* rgb(164, 164, 164) 60% */
+    --gray-300: 141 141 141; /* rgb(141, 141, 141) 50% */
+    --gray-400: 119 119 119; /* rgb(119, 119, 119) 40% */
+    --gray-500: 96 96 96; /* rgb(96, 96, 96) 30% */
+    --gray-600: 73 73 73; /* rgb(73, 73, 73) 20% */
+    --gray-700: 62 62 62; /* rgb(62, 62, 62) 15% */
+    --gray-800: 51 51 51; /* rgb(51, 51, 51) 10% */
+    --gray-900: 39 39 39; /* rgb(39, 39, 39) 5% */
+  }
+
+  body {
+    @apply text-typography-primary font-sans;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+declare function Button(): JSX.Element;
+
+declare type ThemeType = "light" | "dark";
+interface ThemeContextType {
+    theme: ThemeType;
+    setTheme: React.Dispatch<React.SetStateAction<ThemeType>>;
+}
+
+declare const ThemeContext: React.Context<ThemeContextType>;
+
+interface ThemeProviderProps {
+    defaultTheme?: ThemeType;
+    children?: React.ReactNode;
+}
+declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): JSX.Element;
+
+declare const useTheme: () => ThemeContextType;
+
+export { Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };

package/dist/index.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React2 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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",
+    children: "button"
+  });
+}
+var ThemeContext = React2__default["default"].createContext({});
+function getInitialTheme() {
+  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";
+}
+function ThemeProvider({ children, defaultTheme }) {
+  const [theme, setTheme] = React2__default["default"].useState(
+    defaultTheme ? defaultTheme : getInitialTheme
+  );
+  function rawSetTheme(rawTheme) {
+    if (typeof window !== "undefined" && window.localStorage) {
+      if (rawTheme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      localStorage.setItem("theme", rawTheme);
+    }
+  }
+  React2__default["default"].useEffect(() => {
+    rawSetTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
+    value: { theme, setTheme },
+    children
+  });
+}
+
+// src/hooks/useTheme/useTheme.tsx
+var useTheme = () => React2__default["default"].useContext(ThemeContext);
+
+exports.Button = Button;
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;

package/dist/index.mjs

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+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",
+    children: "button"
+  });
+}
+var ThemeContext = React2.createContext({});
+function getInitialTheme() {
+  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";
+}
+function ThemeProvider({ children, defaultTheme }) {
+  const [theme, setTheme] = React2.useState(
+    defaultTheme ? defaultTheme : getInitialTheme
+  );
+  function rawSetTheme(rawTheme) {
+    if (typeof window !== "undefined" && window.localStorage) {
+      if (rawTheme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      localStorage.setItem("theme", rawTheme);
+    }
+  }
+  React2.useEffect(() => {
+    rawSetTheme(theme);
+  }, [theme]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+    value: { theme, setTheme },
+    children
+  });
+}
+
+// src/hooks/useTheme/useTheme.tsx
+var useTheme = () => React2.useContext(ThemeContext);
+
+export { Button, ThemeContext, ThemeProvider, useTheme };

package/dist/tailwind-preset.js

@@ -0,0 +1,58 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      borderRadius: {
+        "1/2": "50%"
+      },
+      fontFamily: {
+        sans: ["'Open Sans', sans-serif"],
+        code: ["'JetBrains Mono', monospace"]
+      },
+      width: {
+        128: "32.0rem",
+        300: "75.0rem"
+      },
+      letterSpacing: {
+        1: "0.25rem",
+        2: "0.5rem",
+        8: "2.0rem"
+      },
+      colors: {
+        black: "rgb(var(--black) / <alpha-value>)",
+        gray: {
+          100: "rgb(var(--gray-100) / <alpha-value>)",
+          200: "rgb(var(--gray-200) / <alpha-value>)",
+          300: "rgb(var(--gray-300) / <alpha-value>)",
+          400: "rgb(var(--gray-400) / <alpha-value>)",
+          500: "rgb(var(--gray-500) / <alpha-value>)",
+          600: "rgb(var(--gray-600) / <alpha-value>)",
+          700: "rgb(var(--gray-700) / <alpha-value>)",
+          800: "rgb(var(--gray-800) / <alpha-value>)",
+          900: "rgb(var(--gray-900) / <alpha-value>)"
+        },
+        primary: {
+          100: "rgb(var(--primary-100) / <alpha-value>)",
+          200: "rgb(var(--primary-200) / <alpha-value>)",
+          300: "rgb(var(--primary-300) / <alpha-value>)",
+          400: "rgb(var(--primary-400) / <alpha-value>)",
+          500: "rgb(var(--primary-500) / <alpha-value>)",
+          600: "rgb(var(--primary-600) / <alpha-value>)",
+          700: "rgb(var(--primary-700) / <alpha-value>)",
+          800: "rgb(var(--primary-800) / <alpha-value>)",
+          900: "rgb(var(--primary-900) / <alpha-value>)"
+        },
+        transparent: "transparent",
+        typography: {
+          DEFAULT: "rgb(var(--text-color) / <alpha-value>)",
+          primary: "rgb(var(--text-color) / 1)",
+          secondary: "rgb(var(--text-color) / 0.60)",
+          disabled: "rgb(var(--text-color) / 0.43)"
+        },
+        white: "rgb(var(--white) / <alpha-value>)"
+      }
+    }
+  },
+  plugins: []
+};

package/package.json

@@ -0,0 +1,89 @@
+{
+  "author": "Jan Szewczyk (Szum-Tech)",
+  "bugs": {
+    "url": "https://github.com/JanSzewczyk/design-system/issues"
+  },
+  "description": "Szum-Tech design system with tailwindcss support",
+  "devDependencies": {
+    "@babel/core": "^7.19.6",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.6",
+    "@semantic-release/npm": "^9.0.1",
+    "@semantic-release/release-notes-generator": "^10.0.3",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addons": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/core-events": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "^6.5.13",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/prettier": "^2.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@types/semantic-release": "^17.2.4",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^8.2.5",
+    "concurrently": "^7.5.0",
+    "cpy-cli": "^4.2.0",
+    "postcss": "^8.4.18",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "react": "^18.2.0",
+    "react-docgen": "^5.4.3",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^19.0.5",
+    "storybook-dark-mode": "^1.1.2",
+    "tailwindcss": "^3.2.1",
+    "tsup": "^6.3.0",
+    "typescript": "^4.8.4"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "homepage": "https://github.com/JanSzewczyk/design-system#readme",
+  "keywords": [
+    "szum-tech",
+    "Szum-Tech",
+    "szum-tech design system",
+    "tailwindcss",
+    "React components",
+    "React JS"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "name": "@szum-tech/design-system",
+  "module": "./dist/index.mjs",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JanSzewczyk/design-system.git"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --treeshake --external react",
+    "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/index.css -o ./src/styles/default.css",
+    "postbuild": "cpy './tailwind-preset.js' './dist' && cpy 'index.css' '../../dist/' --cwd='src/theme'",
+    "storybook": "start-storybook -p 6006",
+    "semantic-release": "semantic-release",
+    "build-storybook": "build-storybook",
+    "build-storybook:docs": "build-storybook --docs",
+    "sd": "tailwindcss -i ./src/theme/index.css -o ./src/styles/default.css"
+  },
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "version": "1.0.0",
+  "dependencies": {}
+}