mirror of
https://github.com/ershisan99/lib-live-03-07.git
synced 2025-12-16 20:59:23 +00:00
migrate to gitea
This commit is contained in:
GitHub
@@ -1,14 +0,0 @@
|
|||||||
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 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
26
.gitignore
vendored
26
.gitignore
vendored
@@ -1,26 +0,0 @@
|
|||||||
# 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?
|
|
||||||
|
|
||||||
*storybook.log
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
import "../src/index.css";
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
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;
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import type { Preview } from "@storybook/react";
|
|
||||||
|
|
||||||
const preview: Preview = {
|
|
||||||
parameters: {
|
|
||||||
controls: {
|
|
||||||
matchers: {
|
|
||||||
color: /(background|color)$/i,
|
|
||||||
date: /Date$/i,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default preview;
|
|
||||||
31
README.md
31
README.md
@@ -1,30 +1 @@
|
|||||||
# React + TypeScript + Vite
|
The code for this repository can now be found at [https://git.andrii.es/ershisan/lib-live-2024-07-03](https://git.andrii.es/ershisan/lib-live-2024-07-03)
|
||||||
|
|
||||||
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', './tsconfig.app.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
13
index.html
@@ -1,13 +0,0 @@
|
|||||||
<!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>
|
|
||||||
65
package.json
65
package.json
@@ -1,65 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "ui-kit",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"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",
|
|
||||||
"build-storybook": "storybook build"
|
|
||||||
},
|
|
||||||
"main": "./dist/index.cjs",
|
|
||||||
"module": "./dist/index.js",
|
|
||||||
"types": "./dist/index.d.ts",
|
|
||||||
"exports": {
|
|
||||||
".": {
|
|
||||||
"import": {
|
|
||||||
"types": "./dist/index.d.ts",
|
|
||||||
"default": "./dist/index.cjs"
|
|
||||||
},
|
|
||||||
"require": {
|
|
||||||
"types": "./dist/index.d.ts",
|
|
||||||
"default": "./dist/index.cjs"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"./style.css": "./dist/style.css"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@radix-ui/react-select": "^2.1.1",
|
|
||||||
"@radix-ui/react-slot": "^1.1.0",
|
|
||||||
"clsx": "^2.1.1",
|
|
||||||
"react": "^18.3.1",
|
|
||||||
"react-dom": "^18.3.1",
|
|
||||||
"tailwind-merge": "^2.4.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@ladle/react": "^4.1.0",
|
|
||||||
"@chromatic-com/storybook": "^1.6.1",
|
|
||||||
"@storybook/addon-essentials": "^8.2.7",
|
|
||||||
"@storybook/addon-interactions": "^8.2.7",
|
|
||||||
"@storybook/addon-links": "^8.2.7",
|
|
||||||
"@storybook/addon-onboarding": "^8.2.7",
|
|
||||||
"@storybook/blocks": "^8.2.7",
|
|
||||||
"@storybook/react": "^8.2.7",
|
|
||||||
"@storybook/react-vite": "^8.2.7",
|
|
||||||
"@storybook/test": "^8.2.7",
|
|
||||||
"@types/node": "^22.1.0",
|
|
||||||
"@types/react": "^18.3.3",
|
|
||||||
"@types/react-dom": "^18.3.0",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^7.15.0",
|
|
||||||
"@typescript-eslint/parser": "^7.15.0",
|
|
||||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
|
||||||
"eslint": "^8.57.0",
|
|
||||||
"eslint-plugin-react-hooks": "^4.6.2",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.7",
|
|
||||||
"eslint-plugin-storybook": "^0.8.0",
|
|
||||||
"prettier": "^3.3.3",
|
|
||||||
"storybook": "^8.2.7",
|
|
||||||
"typescript": "5.4.2",
|
|
||||||
"vite": "^5.3.4",
|
|
||||||
"vite-plugin-dts": "4.0.0-beta.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
10106
pnpm-lock.yaml
generated
10106
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,22 +0,0 @@
|
|||||||
export const ChevronDown = (props: React.SVGProps<SVGSVGElement>) => (
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<g clipPath="url(#clip0_376_9169)">
|
|
||||||
<path
|
|
||||||
d="M5.51416 9.45842C5.5137 9.22477 5.59508 8.99834 5.74416 8.81842C5.82811 8.71717 5.93121 8.63346 6.04756 8.57211C6.1639 8.51076 6.29121 8.47296 6.42219 8.46089C6.55316 8.44881 6.68524 8.46269 6.81084 8.50174C6.93644 8.54078 7.05311 8.60422 7.15416 8.68842L12.5142 13.1684L17.8842 8.84843C17.9864 8.76536 18.1041 8.70333 18.2305 8.6659C18.3568 8.62846 18.4893 8.61637 18.6203 8.63031C18.7514 8.64425 18.8784 8.68395 18.994 8.74712C19.1096 8.81029 19.2116 8.8957 19.2942 8.99843C19.3852 9.10189 19.4539 9.22306 19.4959 9.35432C19.5378 9.48558 19.5522 9.62411 19.5382 9.7612C19.5241 9.89829 19.4818 10.031 19.414 10.151C19.3462 10.271 19.2543 10.3756 19.1442 10.4584L13.1442 15.2884C12.9652 15.4355 12.7408 15.5159 12.5092 15.5159C12.2775 15.5159 12.0531 15.4355 11.8742 15.2884L5.87416 10.2884C5.75314 10.1881 5.65748 10.0607 5.59493 9.91646C5.53238 9.77225 5.50471 9.61533 5.51416 9.45842Z"
|
|
||||||
fill="black"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="clip0_376_9169">
|
|
||||||
<rect width="24" height="24" fill="white" />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
.buttonRoot {
|
|
||||||
all: unset;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttonRoot.primary {
|
|
||||||
background-color: blue;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttonRoot.secondary {
|
|
||||||
background-color: gray;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttonRoot:focus-visible{
|
|
||||||
outline: 2px solid blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttonRoot.fullWidth {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
import { Button } from "./button";
|
|
||||||
import { Meta, StoryObj } from "@storybook/react";
|
|
||||||
import { useRef } from "react";
|
|
||||||
|
|
||||||
const meta = {
|
|
||||||
component: Button,
|
|
||||||
title: "Components/Button",
|
|
||||||
} satisfies Meta<typeof Button>;
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof meta>;
|
|
||||||
|
|
||||||
export const Primary: Story = {
|
|
||||||
args: {
|
|
||||||
variant: "primary",
|
|
||||||
children: "Primary",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Secondary: Story = {
|
|
||||||
args: {
|
|
||||||
variant: "secondary",
|
|
||||||
children: "Secondary",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FullWidth: Story = {
|
|
||||||
args: {
|
|
||||||
...Primary.args,
|
|
||||||
fullWidth: true,
|
|
||||||
children: "Full Width",
|
|
||||||
variant: "secondary",
|
|
||||||
},
|
|
||||||
render: (args) => {
|
|
||||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
||||||
const anchorRef = useRef<HTMLAnchorElement>(null);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Button {...args} asChild>
|
|
||||||
<a href="https://google.com" target="_blank" ref={anchorRef}>
|
|
||||||
Go to google
|
|
||||||
</a>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
{...args}
|
|
||||||
ref={buttonRef}
|
|
||||||
onClick={() => alert("clicked nice button")}
|
|
||||||
>
|
|
||||||
Nice button
|
|
||||||
</Button>
|
|
||||||
<button onClick={() => buttonRef.current?.click()}>Button</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const AsLink: Story = {
|
|
||||||
args: {
|
|
||||||
...Primary.args,
|
|
||||||
children: "Link",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
|
|
||||||
import s from "./button.module.css";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { Slot } from "@radix-ui/react-slot";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
asChild?: boolean;
|
|
||||||
variant?: "primary" | "secondary" | "outlined" | "ghost";
|
|
||||||
fullWidth?: boolean;
|
|
||||||
} & ComponentPropsWithoutRef<"button">;
|
|
||||||
|
|
||||||
export const Button = forwardRef<ElementRef<"button">, Props>(
|
|
||||||
({ variant = "primary", fullWidth, className, asChild, ...props }, ref) => {
|
|
||||||
const Comp = asChild ? Slot : "button";
|
|
||||||
return (
|
|
||||||
<Comp
|
|
||||||
{...props}
|
|
||||||
ref={ref}
|
|
||||||
className={clsx(
|
|
||||||
s.buttonRoot,
|
|
||||||
s[variant],
|
|
||||||
fullWidth && s.fullWidth,
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from "./button/button.tsx";
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import { Meta, StoryObj } from "@storybook/react";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectGroup,
|
|
||||||
SelectItem,
|
|
||||||
SelectLabel,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "./select";
|
|
||||||
import { SelectSeparator } from "@radix-ui/react-select";
|
|
||||||
|
|
||||||
const meta = {
|
|
||||||
component: Select,
|
|
||||||
title: "Components/Select",
|
|
||||||
} satisfies Meta<typeof Select>;
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof meta>;
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: "Option 1",
|
|
||||||
value: "1",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Option 2",
|
|
||||||
value: "2",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Option 3",
|
|
||||||
value: "3",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
export const Primary: Story = {
|
|
||||||
args: {
|
|
||||||
placeholder: "Select a theme",
|
|
||||||
children: (
|
|
||||||
<>
|
|
||||||
{options.map(({ label, value }) => {
|
|
||||||
return <SelectItem value={value}>{label}</SelectItem>;
|
|
||||||
})}
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectLabel>Group 1</SelectLabel>
|
|
||||||
<SelectItem value={"1"}>1</SelectItem>
|
|
||||||
<SelectSeparator />
|
|
||||||
<SelectItem value={"2"}>2</SelectItem>
|
|
||||||
<SelectItem value={"3"}>3</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
<SelectGroup>
|
|
||||||
<SelectLabel>Group 2</SelectLabel>
|
|
||||||
<SelectItem value={"4"}>4</SelectItem>
|
|
||||||
<SelectItem value={"5"}>5</SelectItem>
|
|
||||||
<SelectItem value={"6"}>6</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import * as React from "react";
|
|
||||||
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
||||||
|
|
||||||
import { ChevronDown } from "../../assets/icons/chevron-down.tsx";
|
|
||||||
import { cn } from "../../lib/utils.ts";
|
|
||||||
import { ComponentPropsWithoutRef } from "react";
|
|
||||||
|
|
||||||
const Select = ({
|
|
||||||
children,
|
|
||||||
placeholder,
|
|
||||||
triggerProps = {},
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
|
|
||||||
placeholder?: string;
|
|
||||||
triggerProps?: Omit<
|
|
||||||
ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
|
|
||||||
"children"
|
|
||||||
>;
|
|
||||||
}) => (
|
|
||||||
<SelectPrimitive.Root {...props}>
|
|
||||||
<SelectTrigger {...triggerProps}>
|
|
||||||
<SelectValue placeholder={placeholder} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>{children}</SelectContent>
|
|
||||||
</SelectPrimitive.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
const SelectGroup = SelectPrimitive.Group;
|
|
||||||
|
|
||||||
const SelectValue = SelectPrimitive.Value;
|
|
||||||
|
|
||||||
const SelectTrigger = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Trigger
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<SelectPrimitive.Icon asChild>
|
|
||||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
||||||
</SelectPrimitive.Icon>
|
|
||||||
</SelectPrimitive.Trigger>
|
|
||||||
));
|
|
||||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
||||||
|
|
||||||
const SelectContent = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
|
||||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Portal>
|
|
||||||
<SelectPrimitive.Content
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
||||||
position === "popper" &&
|
|
||||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
position={position}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<SelectPrimitive.Viewport
|
|
||||||
className={cn(
|
|
||||||
"p-1",
|
|
||||||
position === "popper" &&
|
|
||||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</SelectPrimitive.Viewport>
|
|
||||||
</SelectPrimitive.Content>
|
|
||||||
</SelectPrimitive.Portal>
|
|
||||||
));
|
|
||||||
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
||||||
|
|
||||||
const SelectLabel = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Label
|
|
||||||
ref={ref}
|
|
||||||
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
||||||
|
|
||||||
const SelectItem = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Item
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
||||||
</SelectPrimitive.Item>
|
|
||||||
));
|
|
||||||
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
||||||
|
|
||||||
export {
|
|
||||||
Select,
|
|
||||||
SelectGroup,
|
|
||||||
SelectValue,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectContent,
|
|
||||||
SelectLabel,
|
|
||||||
SelectItem,
|
|
||||||
};
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
:root {
|
|
||||||
background-color: navy;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
import "./index.css";
|
|
||||||
|
|
||||||
export * from "./components";
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { clsx, type ClassValue } from "clsx";
|
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return twMerge(clsx(inputs));
|
|
||||||
}
|
|
||||||
1
src/vite-env.d.ts
vendored
1
src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
{
|
|
||||||
"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": false,
|
|
||||||
|
|
||||||
// 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.*"]
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import { join, resolve } from "node:path";
|
|
||||||
import react from "@vitejs/plugin-react-swc";
|
|
||||||
import { defineConfig } from "vite";
|
|
||||||
import dts from "vite-plugin-dts";
|
|
||||||
|
|
||||||
import { dependencies, 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
|
|
||||||
external: [
|
|
||||||
...Object.keys(dependencies),
|
|
||||||
...Object.keys(devDependencies),
|
|
||||||
"react/jsx-runtime",
|
|
||||||
],
|
|
||||||
output: {
|
|
||||||
dir: "dist",
|
|
||||||
entryFileNames: "[name].cjs",
|
|
||||||
format: "cjs",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user