@situaction/traq-ui-ste 1.0.5 → 1.0.7

package/README.md

@@ -1,3 +1,11 @@
 # Traq[UI]ste
 Tra[UI]ste est une librairie de composant crée par Situaction.
 
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+interface ButtonProps {
+    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/input/Input.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/input/Input.js

@@ -0,0 +1,11 @@
+import { jsx as p } from "react/jsx-runtime";
+import '../../styles/Input.css';const u = "_input_rpqtu_1", o = {
+  input: u
+};
+function i(t) {
+  const { className: n, ...s } = t;
+  return /* @__PURE__ */ p("input", { className: `${n} ${o.input}`, ...s });
+}
+export {
+  i as Input
+};

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

@@ -0,0 +1,4 @@
+/** 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

@@ -0,0 +1,9 @@
+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,
+  m as Input,
+  f as ThemeProvider,
+  u as useTheme
+};

package/dist/styles/Button.css

@@ -0,0 +1 @@
+[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/Input.css

@@ -0,0 +1 @@
+._input_rpqtu_1{padding:1rem;border-radius:4px;border:1px solid #1ea7fd}

package/dist/styles/main.css

@@ -0,0 +1 @@
+@font-face{font-family:Urbanist-Thin;src:url(./public/static/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(./public/static/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(./public/static/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(./public/static/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(./public/static/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(./public/static/Urbanist-Back.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(./public/static/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(./public/static/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(./public/static/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,16 +1,26 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "library react component Situaction",
-  "main": "dist/cjs/index.js",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && rimraf dist/esm/types/stories",
+    "dev": "vite",
+    "test": "jest",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
     "prepublish": "npm run build",
     "publish": "npm publish --access public",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "keywords": [
     "React",
     "components",
@@ -18,46 +28,54 @@
     "TypeScript",
     "sass"
   ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "author": "Situaction",
   "license": "ISC",
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.3",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-designs": "^8.0.0",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/addon-onboarding": "^8.0.8",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.0.8",
-    "@types/react": "^18.2.79",
-    "css-loader": "^7.1.1",
-    "node-sass": "^9.0.0",
-    "react": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.14.3",
-    "rollup-plugin-dts": "^6.1.0",
-    "sass": "^1.75.0",
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-onboarding": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
+    "@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",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "css-loader": "^7.1.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "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",
+    "sass": "^1.77.5",
     "sass-loader": "^14.2.0",
-    "storybook": "^8.0.8",
+    "storybook": "^8.1.9",
     "style-loader": "^4.0.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.4.5"
+    "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"
   },
-  "module": "dist/esm/index.js",
-  "files": [
-    "dist"
-  ],
-  "types": "dist/index.d.ts",
   "dependencies": {
-    "react-dom": "^18.2.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-scss": "^4.0.0"
+    "storybook-figma": "^0.1.2",
+    "storybook-react-context": "^0.6.0"
   }
 }