mirror of
https://github.com/ershisan99/ui-kit-int.git
synced 2025-12-16 05:09:23 +00:00
Initial commit
This commit is contained in:
14
.eslintrc.cjs
Normal file
14
.eslintrc.cjs
Normal file
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
17
.storybook/main.ts
Normal file
17
.storybook/main.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import type { StorybookConfig } from "@storybook/react-vite";
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
||||
addons: [
|
||||
"@storybook/addon-onboarding",
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-interactions",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/react-vite",
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
14
.storybook/preview.ts
Normal file
14
.storybook/preview.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { Preview } from "@storybook/react";
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
30
README.md
Normal file
30
README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 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 {
|
||||
// other rules...
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -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>
|
||||
70
package.json
Normal file
70
package.json
Normal file
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"name": "@test-acoount-12312o3123123/ui-kit-int",
|
||||
"private": false,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"main": "./dist/index.cjs",
|
||||
"module": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/index.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/index.cjs"
|
||||
}
|
||||
},
|
||||
"./css": "./dist/style.css"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"sb": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"sideEffects": [
|
||||
"**/*.css"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@chromatic-com/storybook": "1.6.1",
|
||||
"@it-incubator/prettier-config": "0.1.2",
|
||||
"@storybook/addon-essentials": "^8.1.11",
|
||||
"@storybook/addon-interactions": "^8.1.11",
|
||||
"@storybook/addon-links": "^8.1.11",
|
||||
"@storybook/addon-onboarding": "^8.1.11",
|
||||
"@storybook/blocks": "^8.1.11",
|
||||
"@storybook/react": "^8.1.11",
|
||||
"@storybook/react-vite": "^8.1.11",
|
||||
"@storybook/test": "^8.1.11",
|
||||
"@types/node": "^20.14.9",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.13.1",
|
||||
"@typescript-eslint/parser": "^7.13.1",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.7",
|
||||
"eslint-plugin-storybook": "^0.8.0",
|
||||
"storybook": "^8.1.11",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"sass": "^1.77.6"
|
||||
}
|
||||
}
|
||||
8748
pnpm-lock.yaml
generated
Normal file
8748
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
79
src/components/button/button.module.scss
Normal file
79
src/components/button/button.module.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
// accent
|
||||
--color-accent-100: #bea6ff;
|
||||
--color-accent-300: #a280ff;
|
||||
--color-accent-500: #8c61ff;
|
||||
--color-accent-700: #704ecc;
|
||||
--color-accent-900: #382766;
|
||||
|
||||
// success
|
||||
--color-success-100: #80ffbf;
|
||||
--color-success-300: #22e584;
|
||||
--color-success-500: #14cc70;
|
||||
--color-success-700: #0f9954;
|
||||
--color-success-900: #0a6638;
|
||||
|
||||
// danger
|
||||
--color-danger-100: #ff8099;
|
||||
--color-danger-300: #f23d61;
|
||||
--color-danger-500: #cc1439;
|
||||
--color-danger-700: #990f2b;
|
||||
--color-danger-900: #660a1d;
|
||||
|
||||
// warning
|
||||
--color-warning-100: #ffd073;
|
||||
--color-warning-300: #e5ac39;
|
||||
--color-warning-500: #d99000;
|
||||
--color-warning-700: #960;
|
||||
--color-warning-900: #640;
|
||||
|
||||
// info
|
||||
--color-info-100: #73a5ff;
|
||||
--color-info-300: #4c8dff;
|
||||
--color-info-500: #397df6;
|
||||
--color-info-700: #2f68cc;
|
||||
--color-info-900: #234e99;
|
||||
|
||||
// light
|
||||
--color-light-100: #fff;
|
||||
--color-light-300: #f9f7ff;
|
||||
--color-light-500: #f4f2fa;
|
||||
--color-light-700: #dcdae0;
|
||||
--color-light-900: #c3c1c7;
|
||||
|
||||
// dark
|
||||
--color-dark-100: #808080;
|
||||
--color-dark-300: #4c4c4c;
|
||||
--color-dark-500: #333;
|
||||
--color-dark-700: #171717;
|
||||
--color-dark-900: #000;
|
||||
}
|
||||
|
||||
.button {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-info-500);
|
||||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: var(--color-accent-500);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--color-dark-300);
|
||||
}
|
||||
|
||||
.outlined {
|
||||
background-color: inherit;
|
||||
border: 1px solid var(--color-dark-300);
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
32
src/components/button/button.stories.tsx
Normal file
32
src/components/button/button.stories.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Button } from "./button";
|
||||
import { type Meta } from "@storybook/react";
|
||||
|
||||
const meta = {
|
||||
component: Button,
|
||||
title: "Components/Button",
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
children: "Default button",
|
||||
},
|
||||
};
|
||||
|
||||
export const AlertOnClick = {
|
||||
args: {
|
||||
children: "Alert!",
|
||||
onClick: () => alert("Button clicked"),
|
||||
},
|
||||
};
|
||||
|
||||
export const ButtonAsLink = {
|
||||
args: {
|
||||
children: "This is a link",
|
||||
as: "a",
|
||||
href: "https://google.com",
|
||||
target: "_blank",
|
||||
},
|
||||
};
|
||||
32
src/components/button/button.tsx
Normal file
32
src/components/button/button.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { ComponentPropsWithoutRef, ElementType } from "react";
|
||||
|
||||
import s from "./button.module.scss";
|
||||
import clsx from "clsx";
|
||||
|
||||
export type ButtonProps<T extends ElementType = "button"> = {
|
||||
variant?: "primary" | "secondary" | "outlined";
|
||||
fullWidth?: boolean;
|
||||
as?: T;
|
||||
} & ComponentPropsWithoutRef<T>;
|
||||
|
||||
export function Button<T extends ElementType = "button">({
|
||||
className,
|
||||
variant = "primary",
|
||||
fullWidth = false,
|
||||
as,
|
||||
...rest
|
||||
}: ButtonProps<T>) {
|
||||
const Component = as ?? "button";
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...rest}
|
||||
className={clsx(
|
||||
s.button,
|
||||
s[variant],
|
||||
fullWidth && s.fullWidth,
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
1
src/components/button/index.ts
Normal file
1
src/components/button/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './button'
|
||||
3
src/components/card.tsx
Normal file
3
src/components/card.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export function Card() {
|
||||
return <div>card</div>;
|
||||
}
|
||||
2
src/components/index.ts
Normal file
2
src/components/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from "./button";
|
||||
export * from "./card";
|
||||
19
src/components/main.tsx
Normal file
19
src/components/main.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Button } from "./button";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
export const Test = () => {
|
||||
return (
|
||||
<div>
|
||||
<Button as={MyLink} to={"https://google.com"} target={"_blank"}>
|
||||
Click me
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MyLink = ({
|
||||
to,
|
||||
...rest
|
||||
}: { to: string } & Omit<ComponentPropsWithoutRef<"a">, "href">) => {
|
||||
return <a href={to} {...rest} />;
|
||||
};
|
||||
1
src/index.ts
Normal file
1
src/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './components'
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
72
tsconfig.json
Normal file
72
tsconfig.json
Normal file
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"extends": [],
|
||||
"compilerOptions": {
|
||||
// This is a component library, so "ESNext" is a good choice. Also it requires very little down-leveling during transpilation.
|
||||
"target": "ESNext",
|
||||
|
||||
// Include a list of type definitions for build-in JS APIs.
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
|
||||
// Specify the module system for the output files. It's not required for Vite but good to have.
|
||||
"module": "ESNext",
|
||||
|
||||
// The types defined in "vite/client" are included in global scope.
|
||||
"types": ["vite/client"],
|
||||
|
||||
// Do not emit compiled output files, vite will take care of the that.
|
||||
"noEmit": true,
|
||||
|
||||
// Vite will handle the resolution of the import paths.
|
||||
"moduleResolution": "Bundler",
|
||||
|
||||
// Use the React 17 JSX transform, importing React is no longer required.
|
||||
"jsx": "react-jsx",
|
||||
|
||||
// Skip the type checking for declaration files to improve performance.
|
||||
"skipLibCheck": true,
|
||||
|
||||
// Allow importing modules with ".json" extension.
|
||||
"resolveJsonModule": true,
|
||||
|
||||
// "declarationMap" need to be enabled to let Vite generates source map files.
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
|
||||
// Importing .js files is not allowed, enable if needed.
|
||||
"allowJs": false,
|
||||
|
||||
// Fix the mis-match of behaviors between ES import and CommonJS require.
|
||||
"esModuleInterop": true,
|
||||
|
||||
// Allow default import from modules with no default export, i.e. you can write `import React from 'react'` instead of `import * as React from 'react'`.
|
||||
"allowSyntheticDefaultImports": true,
|
||||
|
||||
// Enforce the file name casing to be consistent with development environment.
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
||||
// Ensure the run-time code does not depend on the TypeScript-only features, such as constant enum.
|
||||
"isolatedModules": true,
|
||||
|
||||
// Allow importing TypeScript modules.
|
||||
"allowImportingTsExtensions": true,
|
||||
|
||||
// Enfore "type" modifier for type imports.
|
||||
"verbatimModuleSyntax": true,
|
||||
|
||||
// Ensure the public class field initialization is transpiled correctly to match the future JS standard.
|
||||
"useDefineForClassFields": true,
|
||||
|
||||
// Type-checking options
|
||||
"strict": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noImplicitOverride": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitThis": true,
|
||||
"noPropertyAccessFromIndexSignature": false,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": true
|
||||
},
|
||||
"include": ["./src/**/*.ts", "./src/**/*.tsx"],
|
||||
"exclude": ["./src/**/*.stories.*"]
|
||||
}
|
||||
38
vite.config.ts
Normal file
38
vite.config.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import {join, resolve} from 'node:path';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import {defineConfig} from 'vite';
|
||||
import dts from 'vite-plugin-dts';
|
||||
|
||||
// @ts-ignore
|
||||
import {peerDependencies,devDependencies} from './package.json';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
dts({rollupTypes: true}), // Output .d.ts files
|
||||
],
|
||||
build: {
|
||||
target: 'esnext',
|
||||
minify: false,
|
||||
lib: {
|
||||
entry: resolve(__dirname, join('src', 'index.ts')),
|
||||
fileName: 'index',
|
||||
formats: ['es', 'cjs'],
|
||||
},
|
||||
rollupOptions: {
|
||||
// Exclude peer dependencies from the bundle to reduce bundle size
|
||||
rollupOptions: {
|
||||
external: [
|
||||
...Object.keys(peerDependencies),
|
||||
...Object.keys(devDependencies),
|
||||
'react/jsx-runtime',
|
||||
],
|
||||
output: {
|
||||
dir: 'dist',
|
||||
entryFileNames: '[name].js',
|
||||
format: 'es',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user