npm - @canaia/ui-kit - Versions diffs - 0.0.1 - Mend

@canaia/ui-kit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/.storybook/main.ts +21 -0
package/.storybook/preview.ts +23 -0
package/README.md +50 -0
package/eslint.config.js +30 -0
package/index.html +13 -0
package/package.json +56 -0
package/src/components/Select/Select.stories.tsx +29 -0
package/src/components/Select/Select.styles.ts +12 -0
package/src/components/Select/Select.tsx +16 -0
package/src/components/Select/Select.types.ts +9 -0
package/src/components/Select/index.tsx +3 -0
package/src/index.tsx +6 -0
package/src/provider/index.tsx +14 -0
package/src/theme/index.tsx +44 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.app.json +26 -0
package/tsconfig.json +7 -0
package/tsconfig.node.json +24 -0
package/vite.config.ts +26 -0

package/.storybook/main.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { mergeConfig } from "vite";
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/components/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+   '@chakra-ui/storybook-addon',
+  ],
+  framework: "@storybook/react-vite",
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      optimizeDeps: {
+        include: ["lodash.mergewith"],
+      },
+    });
+  },
+};
+export default config;

package/.storybook/preview.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { Preview } from "@storybook/react";
+import theme from "../src/theme"; // Tu tema personalizado
+export const parameters = {
+  chakra: {
+    theme,
+  },
+}
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    chakra: {
+      theme,
+    },
+  },
+};
+export default preview;

package/README.md ADDED Viewed

@@ -0,0 +1,50 @@
+# 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
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+- Configure the top-level `parserOptions` property like this:
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,56 @@
+{
+  "name": "@canaia/ui-kit",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/react": "^2.10.4",
+    "@chakra-ui/storybook-addon": "^5.2.5",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@storybook/addon-themes": "^8.4.5",
+    "framer-motion": "^11.11.17",
+    "lodash.mergewith": "^4.6.2",
+    "path": "^0.12.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@types/node": "^22.9.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.1",
+    "globals": "^15.11.0",
+    "storybook": "^8.4.5",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/components/Select/Select.stories.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Select from "./Select";
+import { SelectProps } from "./Select.types";
+export default {
+    title: "Components/Select",
+    component: Select,
+    argTypes: {
+        options: { control: "object" },
+        size: { control: "select", options: ["sm", "md", "lg"] },
+        variant: { control: "select", options: ["outline", "filled", "flushed", "unstyled"] },
+    },
+} as Meta;
+const Template: StoryFn<SelectProps> = (args) => <Select {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+    options: [
+        { label: "Option 1", value: "1" },
+        { label: "Option 2", value: "2" },
+    ],
+    size: "md",
+    variant: "outline",
+    onChange: (value) => console.log(value),
+    color: "white.50",
+    placeholder: "placeholder",
+    disabled: false,
+};

package/src/components/Select/Select.styles.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { extendTheme } from "@chakra-ui/react";
+export const selectTheme = extendTheme({
+    components: {
+        Select: {
+            baseStyle: {
+                bg:"white.50",
+                color:"black.300"
+            },
+        },
+    },
+});

package/src/components/Select/Select.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import { Select as ChakraSelect } from "@chakra-ui/react";
+import { SelectProps } from "./Select.types";
+const Select: React.FC<SelectProps> = ({ options, onChange, ...rest }) => {
+    return (
+        <ChakraSelect onChange={(e) => onChange(e.target.value)} {...rest}>
+            {options.map((option) => (
+                <option key={option.value} value={option.value}>
+                    {option.label}
+                </option>
+            ))}
+        </ChakraSelect>
+    );
+};
+export default Select;

package/src/components/Select/Select.types.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export interface SelectProps {
+    options: { label: string; value: string }[];
+    onChange: (value: string) => void;
+    size: string;
+    variant: string;
+    color: string;
+    placeholder?: string;
+    disabled: boolean;
+}

package/src/components/Select/index.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export { default } from "./Select";
+// eslint-disable-next-line react-refresh/only-export-components
+export * from "./Select.types";

package/src/index.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+// export provider Chackra UI
+export { default as CanaiaProvider } from "./provider";
+// export components
+export { default as Select } from "./components/Select";

package/src/provider/index.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { Outlet } from "react-router-dom";
+import theme from "../theme";
+const ChakraOutletProvider: React.FC = () => {
+  return (
+    <ChakraProvider theme={theme}>
+      <Outlet />
+    </ChakraProvider>
+  );
+};
+export default ChakraOutletProvider;

package/src/theme/index.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { extendTheme } from "@chakra-ui/react";
+const theme = extendTheme({
+  colors: {
+    primary: {
+        50: "#e3f2f9",
+        100: "#c5e4f3",
+        500: "#062B60",
+        600: "#0C56C0",
+        700: "#0A48A1",
+    },
+    secondary: {
+        500: "#38ADC7",
+        700: "#2D9DB2",
+    },
+    blue: {
+        50: "#38ADC7",
+        100: "#0C56C0",
+        500: "#094192",
+        600: "#062B60",
+        700: "#094192",
+        800: "#051a39"
+    },
+    grey: {
+        50: "#F7F7F7",
+        100: "#999",
+        500: "#ECECEC",
+        600: "#4E4D4D",
+    },
+    white: {
+        50: "#FFF"
+    },
+    green: {
+        100: "#34C759",
+        300: "#269642"
+    },
+    black: {
+        300: "#000000"
+    }
+  },
+});
+export default theme;

package/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/tsconfig.app.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+export default defineConfig({
+    plugins: [react()],
+    optimizeDeps: {
+        include: ["lodash.mergewith"],
+      },
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, "src/index.tsx"),
+            name: "CanaiaUiKit",
+            fileName: (format) => `canaia-ui-kit.${format}.js`,
+        },
+        rollupOptions: {
+            external: ["react", "react-dom"],
+            output: {
+                globals: {
+                    react: "React",
+                    "react-dom": "ReactDOM",
+                },
+            },
+        },
+    },
+});