@situaction/traq-ui-ste 1.0.6 → 1.0.8

package/dist/components/button/Button.d.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    mode?: string; /** Is this the principal call to action on the page? */
+    color?: string; /** What background color to use (blue, red, ...)*/
+    size?: 's' | 'm' | 'l' | 'xl'; /** How large should the button be? */
+    label: string; /** button contents */
+    children?: ReactNode; /** Additional content inside the button */
+    childrenPosition?: 'left' | 'right' | 'both'; /** Position of the children relative to the label */
+    onClick?: () => void; /** Optional click handler */
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ mode, size, color, label, children, childrenPosition, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,52 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import '../../styles/Button.css';const l = "_button_hzvpr_28", n = {
+  button: l,
+  "button-primary": "_button-primary_hzvpr_44",
+  "button-secondary": "_button-secondary_hzvpr_58",
+  "button-size-xl": "_button-size-xl_hzvpr_62",
+  "button-size-l": "_button-size-l_hzvpr_67",
+  "button-size-m": "_button-size-m_hzvpr_72",
+  "button-size-s": "_button-size-s_hzvpr_77",
+  "button-gap-xl": "_button-gap-xl_hzvpr_82",
+  "button-gap-l": "_button-gap-l_hzvpr_85",
+  "button-gap-m": "_button-gap-m_hzvpr_88",
+  "button-gap-s": "_button-gap-s_hzvpr_88"
+}, v = ({
+  mode: b = "primary",
+  size: a = "m",
+  color: t = "blue",
+  label: p,
+  children: o,
+  childrenPosition: r,
+  ...u
+}) => {
+  const _ = [
+    n.button,
+    n[`button-${b}`],
+    n[`button-size-${a}`],
+    n[`button-gap-${a}`],
+    "flexHorizontalCenter"
+  ].join(" "), e = {
+    "--dynamic-color": `var(--primary-color-${t})`,
+    "--dynamic-hover-color": `var(--primary-color-hover-${t})`,
+    "--dynamic-pressed-color": `var(--primary-color-pressed-${t})`,
+    "--dynamic-disabled-color": `var(--primary-color-disabled-${t})`
+  };
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      className: _,
+      style: e,
+      ...u,
+      children: [
+        (r === "left" || r === "both") && o && /* @__PURE__ */ s("span", { children: o }),
+        /* @__PURE__ */ s("span", { children: p }),
+        (r === "right" || r === "both") && o && /* @__PURE__ */ s("span", { children: o })
+      ]
+    }
+  );
+};
+export {
+  v as Button
+};

package/dist/components/theme/ThemeContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+type Theme = 'light' | 'dark';
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+}
+export declare const ThemeProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/dist/components/theme/ThemeContext.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as m, useState as s, useContext as d } from "react";
+const r = m(void 0), a = ({ children: e }) => {
+  const [t, h] = s("light"), i = () => {
+    h((n) => n === "light" ? "dark" : "light");
+  };
+  return /* @__PURE__ */ o(r.Provider, { value: { theme: t, toggleTheme: i }, children: /* @__PURE__ */ o("div", { "data-theme": t, children: e }) });
+}, v = () => {
+  const e = d(r);
+  if (e === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return e;
+};
+export {
+  a as ThemeProvider,
+  v as useTheme
+};

package/dist/components/theme/createTheme.d.ts

@@ -0,0 +1,7 @@
+declare const baseTheme: {
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+        fontFamilySecondary: string;
+    };
+};

package/dist/components/theme/createTheme.js

@@ -0,0 +1 @@
+

package/dist/main.d.ts

@@ -1,2 +1,4 @@
-export { Button } from './components/Button/Button';
-export { Input } from './components/Input/Input';
+/** Export components **/
+export { Button } from './components/button/Button';
+export { Input } from './components/input/Input';
+export { ThemeProvider, useTheme } from './components/theme/ThemeContext';

package/dist/main.js

@@ -1,6 +1,9 @@
-import { Button as r } from "./components/Button/Button.js";
-import { Input as e } from "./components/Input/Input.js";
-export {
+import { Button as r } from "./components/button/Button.js";
+import { Input as m } from "./components/input/Input.js";
+import { ThemeProvider as f, useTheme as u } from "./components/theme/ThemeContext.js";
+import './styles/main.css';export {
   r as Button,
-  e as Input
+  m as Input,
+  f as ThemeProvider,
+  u as useTheme
 };

package/dist/styles/Button.css

@@ -1 +1 @@
-._storybook-button_rvsxb_1{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;border-radius:3em;cursor:pointer;display:inline-block;line-height:1}._storybook-button--primary_rvsxb_11{color:#fff;background-color:#49259e}._storybook-button--secondary_rvsxb_16{color:#333;background-color:transparent;box-shadow:#00000026 0 0 0 1px inset}._storybook-button--small_rvsxb_22{font-size:12px;padding:10px 16px}._storybook-button--medium_rvsxb_27{font-size:14px;padding:11px 20px}._storybook-button--large_rvsxb_32{font-size:16px;padding:12px 24px}
+[data-theme=light]{--primary-color-blue: #1D3557;--primary-color-hover-blue: #1F416D;--primary-color-pressed-blue: #214B83;--primary-color-disabled-blue: #E5E7EA;--primary-color-text: #FFF;--primary-color-red: #dc3545;--primary-color-hover-red: #c82333;--primary-color-pressed-red: #bd2130;--primary-color-disabled-red: #c0c0c0}[data-theme=dark]{--primary-color-blue: #C3E9FD;--primary-color-hover-blue: #DFF1FF;--primary-color-pressed-blue: #EFF8FF;--primary-color-disabled-blue: #383F45;--primary-color-text: #1D3557;--primary-color-red: #bd7c88;--primary-color-hover-red: #80464c;--primary-color-pressed-red: #503135;--primary-color-disabled-red: #c0c0c0}._button_hzvpr_28{font-family:Urbanist,sans-serif;font-weight:500;border:0;border-radius:8px;cursor:pointer;display:inline-block;line-height:1;box-shadow:0 4px 10px #00000008;width:fit-content}._button_hzvpr_28:focus{outline:2px solid var(--dynamic-color);outline-offset:2px}._button-primary_hzvpr_44{color:var(--primary-color-text);background-color:var(--dynamic-color)}._button-primary_hzvpr_44:hover{background-color:var(--dynamic-hover-color)}._button-primary_hzvpr_44:active{background-color:var(--dynamic-pressed-color)}._button-primary_hzvpr_44:disabled{background-color:var(--dynamic-disabled-color);cursor:initial}._button-secondary_hzvpr_58{color:#333;background-color:transparent}._button-size-xl_hzvpr_62{padding:16px 32px;font-size:1.125em;line-height:28px}._button-size-l_hzvpr_67{padding:12px 24px;font-size:1em;line-height:24px}._button-size-m_hzvpr_72{padding:8px 16px;font-size:.875em;line-height:22px}._button-size-s_hzvpr_77{padding:6px 12px;font-size:.75em;line-height:16px}._button-gap-xl_hzvpr_82{gap:12px}._button-gap-l_hzvpr_85{gap:8px}._button-gap-m_hzvpr_88,._button-gap-s_hzvpr_88{gap:4px}

package/dist/styles/main.css

@@ -0,0 +1 @@
+@font-face{font-family:Urbanist-Thin;src:url(/fonts/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(/fonts/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(/fonts/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(/fonts/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(/fonts/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(/fonts/Urbanist-Black.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(/fonts/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(/fonts/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(/fonts/Urbanist-ExtraBold.ttf) format("truetype");font-weight:900;font-style:normal}:root,body{font-family:Urbanist,sans-serif}.fontUrbanist{font-family:Urbanist,sans-serif}.flexHorizontal{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}.flexHorizontalCenter{display:flex;justify-content:center;align-items:center;flex-direction:row}.flexVertical{display:flex;justify-content:flex-start;align-items:center;flex-direction:column}.flexVerticalCenter{display:flex;justify-content:center;align-items:center;flex-direction:row}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{overflow-x:hidden}body{line-height:1;width:100vw;height:100vh}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}button{border:none;padding:0;cursor:pointer}[data-theme=light]{--primary-color-blue: #1D3557;--primary-color-hover-blue: #1F416D;--primary-color-pressed-blue: #214B83;--primary-color-disabled-blue: #E5E7EA;--primary-color-text: #FFF;--primary-color-red: #dc3545;--primary-color-hover-red: #c82333;--primary-color-pressed-red: #bd2130;--primary-color-disabled-red: #c0c0c0}[data-theme=dark]{--primary-color-blue: #C3E9FD;--primary-color-hover-blue: #DFF1FF;--primary-color-pressed-blue: #EFF8FF;--primary-color-disabled-blue: #383F45;--primary-color-text: #1D3557;--primary-color-red: #bd7c88;--primary-color-hover-red: #80464c;--primary-color-pressed-red: #503135;--primary-color-disabled-red: #c0c0c0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -9,6 +9,7 @@
   ],
   "scripts": {
     "dev": "vite",
+    "test": "jest",
     "build": "tsc --p ./tsconfig-build.json && vite build",
     "prepublish": "npm run build",
     "publish": "npm publish --access public",
@@ -43,6 +44,10 @@
     "@storybook/react": "^8.1.9",
     "@storybook/react-vite": "^8.1.9",
     "@storybook/test": "^8.1.9",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.14.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
@@ -55,16 +60,23 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.4.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.77.5",
     "sass-loader": "^14.2.0",
     "storybook": "^8.1.9",
     "style-loader": "^4.0.0",
+    "ts-jest": "^29.1.5",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1"
   },
   "dependencies": {
-    "storybook-figma": "^0.1.2"
+    "storybook-figma": "^0.1.2",
+    "storybook-react-context": "^0.6.0"
   }
 }

package/dist/components/Button/Button.d.ts

@@ -1,27 +0,0 @@
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Button/Button.js

@@ -1,30 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import '../../styles/Button.css';const o = {
-  "storybook-button": "_storybook-button_rvsxb_1",
-  "storybook-button--primary": "_storybook-button--primary_rvsxb_11",
-  "storybook-button--secondary": "_storybook-button--secondary_rvsxb_16",
-  "storybook-button--small": "_storybook-button--small_rvsxb_22",
-  "storybook-button--medium": "_storybook-button--medium_rvsxb_27",
-  "storybook-button--large": "_storybook-button--large_rvsxb_32"
-}, e = ({
-  primary: t = !1,
-  size: b = "medium",
-  backgroundColor: r,
-  label: s,
-  ...n
-}) => {
-  const y = t ? o["storybook-button--primary"] : o["storybook-button--secondary"];
-  return /* @__PURE__ */ u(
-    "button",
-    {
-      type: "button",
-      className: [o["storybook-button"], o[`storybook-button--${b}`], y].join(" "),
-      style: { backgroundColor: r },
-      ...n,
-      children: s
-    }
-  );
-};
-export {
-  e as Button
-};