Merge branch 'main' of https://github.com/Wizleap-Inc/wiz-ui into cho…

…re/input-disabled-color
Wizleap-Inc · Oct 31, 2024 · f9178c8 · f9178c8
2 parents c8a907d + b3ba477
commit f9178c8
Show file tree

Hide file tree

Showing 168 changed files with 4,535 additions and 1,690 deletions.
diff --git a/examples/react/.eslintrc.json b/examples/react/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["../../.eslintrc.json", "../../.eslintrc.react.json"]
+}
diff --git a/examples/react/.gitignore b/examples/react/.gitignore
@@ -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?
diff --git a/examples/react/CHANGELOG.md b/examples/react/CHANGELOG.md
@@ -0,0 +1,17 @@
+# @wizleap-inc/wiz-ui-example-react
+
+## 1.0.0
+
+### Major Changes
+
+- [#1366](https://github.com/Wizleap-Inc/wiz-ui/pull/1366) [`022fd19b634b91733ad32d6eeeb1725dcdbe8fd2`](https://github.com/Wizleap-Inc/wiz-ui/commit/022fd19b634b91733ad32d6eeeb1725dcdbe8fd2) Thanks [@RyushiAok](https://github.com/RyushiAok)! - feat(input): value の generics 対応
+
+  - (BREAKING) WizSelectBox, WizSearchInput, WizSearchSelector の value に generics 対応
+    - 基本的には props で渡した options や value の型から T が推論される
+    - ただし、`typeof WizSelectBox`, `typeof WizSearchInput`, `typeof WizSearchSelector` のように指定している場合、T が unknown の型が得られるため、`typeof WizSelectBox<number>`, `typeof WizSearchInput<number>`, `typeof WizSearchSelector<number>` と指定する必要がある
+
+### Patch Changes
+
+- Updated dependencies [[`d0e8556a47433c4e40226fe171b638e593103061`](https://github.com/Wizleap-Inc/wiz-ui/commit/d0e8556a47433c4e40226fe171b638e593103061), [`022fd19b634b91733ad32d6eeeb1725dcdbe8fd2`](https://github.com/Wizleap-Inc/wiz-ui/commit/022fd19b634b91733ad32d6eeeb1725dcdbe8fd2)]:
+  - @wizleap-inc/wiz-ui-react@1.0.0
+  - @wizleap-inc/wiz-ui-constants@0.32.0
diff --git a/examples/react/README.md b/examples/react/README.md
@@ -0,0 +1,27 @@
+# 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
+   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
diff --git a/examples/react/index.html b/examples/react/index.html
@@ -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>Wiz UI Playground in React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@wizleap-inc/wiz-ui-example-react",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "@wizleap-inc/wiz-ui-constants": "workspace:",
+    "@wizleap-inc/wiz-ui-react": "workspace:",
+    "@wizleap-inc/wiz-ui-utils": "workspace:"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.31",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.0.2",
+    "vite": "^5.3.5"
+  }
+}
diff --git a/examples/react/public/vite.svg b/examples/react/public/vite.svg
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -0,0 +1,7 @@
+import { AppRoutes } from "./routes";
+
+function App() {
+  return <AppRoutes />;
+}
+
+export default App;
diff --git a/examples/react/src/assets/react.svg b/examples/react/src/assets/react.svg
diff --git a/examples/react/src/components/layout/navigation/index.tsx b/examples/react/src/components/layout/navigation/index.tsx
@@ -0,0 +1,102 @@
+import {
+  WizAnchor,
+  WizIAssignment,
+  WizIBusinessCenter,
+  WizIChat,
+  WizIDashboard,
+  WizIHelp,
+  WizIOpenInNew,
+  WizNavigationContainer,
+  WizNavigationItem,
+  WizVStack,
+} from "@wizleap-inc/wiz-ui-react";
+
+const navItems = [
+  {
+    icon: WizIDashboard,
+    label: "Home",
+    href: "/",
+  },
+  {
+    icon: WizIAssignment,
+    label: "About",
+    href: "/about",
+  },
+  {
+    icon: WizIBusinessCenter,
+    label: "Contact",
+    href: "/contact",
+  },
+  {
+    icon: WizIChat,
+    label: "Chat",
+    href: "/chat",
+  },
+  {
+    icon: WizIHelp,
+    label: "Help",
+    href: "https://wizleap.co.jp",
+  },
+];
+
+const Footer = () => (
+  <WizVStack>
+    <WizAnchor
+      href="https://wizleap.co.jp"
+      icon={WizIOpenInNew}
+      iconPosition="right"
+      color="gray.700"
+      fontSize="sm"
+      openInNewTab
+      nowrap
+    >
+      会社概要
+    </WizAnchor>
+    <WizAnchor
+      href="https://wizleap.co.jp/services/"
+      icon={WizIOpenInNew}
+      iconPosition="right"
+      color="gray.700"
+      fontSize="sm"
+      openInNewTab
+      nowrap
+    >
+      サービス
+    </WizAnchor>
+    <WizAnchor
+      href="https://wizleap.co.jp/news/"
+      icon={WizIOpenInNew}
+      iconPosition="right"
+      color="gray.700"
+      fontSize="sm"
+      openInNewTab
+      nowrap
+    >
+      ニュース
+    </WizAnchor>
+  </WizVStack>
+);
+
+type NavigationProps = {
+  isOpen: boolean;
+};
+
+export const Navigation = ({ isOpen }: NavigationProps) => {
+  return (
+    <WizNavigationContainer
+      style={{ display: "flex", height: "90vh" }}
+      isOpen={isOpen}
+      footer={<Footer />}
+    >
+      {navItems.map((path) => (
+        <WizNavigationItem
+          key={`path-${path.label}`}
+          icon={path.icon}
+          label={path.label}
+          href={path.href}
+          active={false}
+        />
+      ))}
+    </WizNavigationContainer>
+  );
+};
diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  overflow-y: scroll;
+}
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import "@wizleap-inc/wiz-ui-react/dist/style.css";
+import App from "./App.tsx";
+import "./index.css";
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/react/src/pages/about/index.tsx b/examples/react/src/pages/about/index.tsx
@@ -0,0 +1,7 @@
+export const About = () => {
+  return (
+    <div>
+      <h1>About</h1>
+    </div>
+  );
+};
diff --git a/examples/react/src/pages/chat/index.tsx b/examples/react/src/pages/chat/index.tsx
@@ -0,0 +1,7 @@
+export const Chat = () => {
+  return (
+    <div>
+      <h1>Chat</h1>
+    </div>
+  );
+};
diff --git a/examples/react/src/pages/contact/index.tsx b/examples/react/src/pages/contact/index.tsx
@@ -0,0 +1,7 @@
+export const Contact = () => {
+  return (
+    <div>
+      <h1>Contact</h1>
+    </div>
+  );
+};
diff --git a/examples/react/src/pages/help/index.tsx b/examples/react/src/pages/help/index.tsx
@@ -0,0 +1,7 @@
+export const Help = () => {
+  return (
+    <div>
+      <h1>Help</h1>
+    </div>
+  );
+};
diff --git a/examples/react/src/pages/home/index.tsx b/examples/react/src/pages/home/index.tsx
@@ -0,0 +1,24 @@
+import { WizVStack } from "@wizleap-inc/wiz-ui-react";
+
+import { SearchInputNum, SearchInputStr } from "./selects/search-input";
+import {
+  SearchSelectorNum,
+  SearchSelectorStr,
+} from "./selects/search-selector";
+import { SelectBoxNum, SelectBoxStr } from "./selects/selectbox";
+
+export const Home = () => {
+  return (
+    <div>
+      <h1>Home</h1>
+      <WizVStack>
+        <SearchSelectorNum />
+        <SearchSelectorStr />
+        <SearchInputNum />
+        <SearchInputStr />
+        <SelectBoxNum />
+        <SelectBoxStr />
+      </WizVStack>
+    </div>
+  );
+};
diff --git a/examples/react/src/pages/home/selects/search-input.tsx b/examples/react/src/pages/home/selects/search-input.tsx
@@ -0,0 +1,42 @@
+import { WizSearchInput } from "@wizleap-inc/wiz-ui-react";
+import { useState } from "react";
+
+const normalOptions = [
+  { label: "Option 1", value: 1 },
+  { label: "Option 2", value: 2 },
+  { label: "Option 3", value: 3 },
+];
+
+export const SearchInputNum = () => {
+  const [values, setValues] = useState<number[]>([]);
+  return (
+    <div>
+      <div>Selected number values: [{values.join(", ")}]</div>
+      <WizSearchInput
+        options={normalOptions}
+        values={values}
+        onChangeValues={(changed) => setValues(changed)}
+      />
+    </div>
+  );
+};
+
+export const SearchInputStr = () => {
+  const stringOptions = normalOptions.map((option) => ({
+    ...option,
+    value: option.value.toString().padStart(4, "0"),
+  }));
+
+  const [values, setValues] = useState<string[]>([]);
+
+  return (
+    <div>
+      <div>Selected string values: [{values.join(", ")}]</div>
+      <WizSearchInput
+        options={stringOptions}
+        values={values}
+        onChangeValues={(changed) => setValues(changed)}
+      />
+    </div>
+  );
+};