-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16 from kaiachain/dev
Update version to v1.0.0
- Loading branch information
Showing
64 changed files
with
2,296 additions
and
1,724 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,5 +14,6 @@ module.exports = { | |
| 'warn', | ||
| { allowConstantExport: true }, | ||
| ], | ||
| '@typescript-eslint/no-explicit-any': 'warn', | ||
| }, | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,124 +1,169 @@ | ||
| **Note: This repository is currently in the experimental stage. Features and implementations are subject to change as development progresses.** | ||
|
|
||
|
|
||
| # Kaia Design System | ||
|
|
||
| This is the Kaia Design System built with React and emotion/styled, using Yarn for package management and building the project. The kit includes a variety of reusable UI components and SVG icons. | ||
|
|
||
| ## Features | ||
|
|
||
| - **React Components**: Modular and reusable React components. | ||
| - **@emotion/styled**: Utilizes @emotion/styled for styling. | ||
| - **SVG Icons**: Easy inclusion and use of SVG icons with automatic imports. | ||
| - **TypeScript**: Strongly typed components using TypeScript. | ||
| The **Kaia Design System** provides a set of reusable, consistent UI components, built to follow the Kaia Foundation's design guidelines. It includes components such as buttons, inputs, labels, and more, to ensure a unified design across all Kaia applications. | ||
|
|
||
| ## Getting Started | ||
| ## Requirements | ||
|
|
||
| ### Prerequisites | ||
| - Node.js (version 16 or higher) | ||
| - Yarn package manager | ||
|
|
||
| - Node.js and Yarn should be installed on your machine. | ||
| ## Installation | ||
|
|
||
| ### Installation | ||
| To install the Kaia Design System package, run the following command: | ||
|
|
||
| Clone the repository and install dependencies. | ||
|
|
||
| ```sh | ||
| git clone https://github.com/kaiachain/kaia-design-system | ||
| cd kaia-design-system | ||
| yarn install | ||
| ```bash | ||
| yarn add @kaiachain/kaia-design-system | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Usage | ||
| Once installed, you can start using the components by importing them into your project: | ||
|
|
||
| ### Using KaThemeProvider | ||
| ```jsx | ||
| import { useState } from 'react' | ||
| import { | ||
| KaThemeProvider, | ||
| KaButton, | ||
| KaText, | ||
| useKaTheme, | ||
| } from '@kaiachain/kaia-design-system' | ||
|
|
||
| To apply theming to your application using KaThemeProvider, set up your App.tsx as follows: | ||
| type ThemeType = 'light' | 'dark' | ||
|
|
||
| ```tsx | ||
| import React, { useState } from 'react'; | ||
| import { KaThemeProvider } from 'kaia-design-system'; | ||
| const Home = ({ | ||
| theme, | ||
| setTheme, | ||
| }: { | ||
| theme: ThemeType | ||
| setTheme: (theme: ThemeType) => void | ||
| }) => { | ||
| const { getTheme } = useKaTheme() | ||
|
|
||
| return ( | ||
| <div style={{ backgroundColor: getTheme('gray', '10') }}> | ||
| <KaText fontType="title/lg_700">Welcome to Kaia Design System</KaText> | ||
| <KaButton | ||
| onClick={() => { | ||
| setTheme(theme === 'light' ? 'dark' : 'light') | ||
| }} | ||
| > | ||
| Click Me | ||
| </KaButton> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| function App() { | ||
| const [theme, setTheme] = useState<'light' | 'dark'>('light'); | ||
| const [theme, setTheme] = useState<ThemeType>('light') | ||
|
|
||
| return ( | ||
| <KaThemeProvider theme={theme}> | ||
| <Home /> | ||
| <Home theme={theme} setTheme={setTheme} /> | ||
| </KaThemeProvider> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| export default App; | ||
| export default App | ||
|
|
||
| ``` | ||
|
|
||
| #### Importing Components | ||
| ## Key Features | ||
|
|
||
| The Kaia Design System provides the following key components and utilities: | ||
|
|
||
| To use a component from the design system, import it into your project: | ||
| - **KaIcon**: A set of scalable SVG icons that ensure consistency and flexibility across the UI. | ||
| - **KaLogo**: The official Kaia Foundation logo in SVG format, optimized for scalability and clarity. | ||
| - **KaButton & KaButtonProps**: A versatile button component with customizable size, type, icons, and state options. | ||
| - **KaCheckBox & KaCheckBoxProps**: A customizable checkbox component for user input, with support for various states. | ||
| - **KaTextInput & KaTextInputProps**: A text input component that handles various states like error, disabled, and sizes. | ||
| - **KaLabel & KaLabelProps**: A flexible label component with multiple styles, including solid, pale, line, and more. | ||
| - **KaRadio & KaRadioProps**: A radio button component designed for selecting between options, customizable in size and label. | ||
| - **KaText & KaTextProps**: A core text component that adheres to the system's typography standards, with multiple font styles and sizes. | ||
| - **KaSelectBox & KaSelectBoxProps**: A select box component for dropdowns, supporting customizable values and states. | ||
| - **useKaTheme**: A hook to access and control the current theme (light or dark). | ||
| - **font**: Standardized typography settings for consistent font sizes, weights, and line heights. | ||
| - **darkTheme**: A predefined dark theme for low-light environments, providing better readability. | ||
| - **lightTheme**: A predefined light theme for bright environments, ensuring clarity and usability. | ||
|
|
||
| ```tsx | ||
| import React from 'react'; | ||
| import { KaButton } from 'kaia-design-system'; | ||
| ## Theming | ||
|
|
||
| const App = () => ( | ||
| <div> | ||
| <KaButton>Click Me</KaButton> | ||
| </div> | ||
| ); | ||
| The Kaia Design System includes a theming mechanism, allowing you to switch between light and dark themes. You can easily toggle themes using the `useKaTheme` hook: | ||
|
|
||
| export default App; | ||
| ```jsx | ||
| import { useKaTheme, KaRadio, KaText } from '@kaiachain/kaia-design-system'; | ||
|
|
||
| function ThemeToggle() { | ||
| const { theme, setTheme } = useKaTheme(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <KaText fontType="title/sm_700">Toggle Theme</KaText> | ||
| <KaRadio selected={theme} value="light" onClick={() => setTheme('light')} /> | ||
| <KaText fontType="body/md_600">Light Theme</KaText> | ||
| <KaRadio selected={theme} value="dark" onClick={() => setTheme('dark')} /> | ||
| <KaText fontType="body/md_600">Dark Theme</KaText> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| #### Using SVG Icons | ||
| ## Example | ||
|
|
||
| The design system includes a variety of SVG icons. You can import and use them as follows: | ||
| You can find a working example that demonstrates how to use the components and theming system of `kaia-design-system`. The example project includes various components such as buttons, checkboxes, inputs, and more, along with a theme toggle feature. | ||
|
|
||
| ```tsx | ||
| import React from 'react'; | ||
| import { KaIcon } from 'kaia-design-system'; | ||
| ### Running the Example Project | ||
|
|
||
| const IconComponent: React.FC = () => ( | ||
| <div> | ||
| <KaIcon.SearchNormal style={{ width: 20, height: 30 }} stroke="blue" /> | ||
| </div> | ||
| ); | ||
| 1. Clone the repository and navigate to the example project directory: | ||
|
|
||
| export default IconComponent; | ||
| ``` | ||
| ```bash | ||
| git clone https://github.com/kaiachain/kaia-design-system.git | ||
| cd kaia-design-system/example | ||
| ``` | ||
|
|
||
| ### Development | ||
| 2. Install dependencies using `yarn`: | ||
|
|
||
| For development, use the following command to start a development server with hot reloading: | ||
| ```bash | ||
| yarn install | ||
| ``` | ||
|
|
||
| ```sh | ||
| yarn start | ||
| ``` | ||
| 3. Start the development server: | ||
|
|
||
| ### Testing | ||
| ```bash | ||
| yarn dev | ||
| ``` | ||
|
|
||
| To run tests, use the following command: | ||
| 4. Explore the various components and features provided by `kaia-design-system` directly in your browser. | ||
|
|
||
| ```sh | ||
| yarn test | ||
| ``` | ||
| > You can view the example source code in the `example` directory of the [kaia-design-system/example repository](https://github.com/kaiachain/kaia-design-system/tree/main/example). | ||
|
|
||
| ### Scripts | ||
|
|
||
| - `yarn build`: Builds the project for production. | ||
| - `yarn start`: Starts the development server. | ||
| - `yarn test`: Runs the test suite. | ||
| - `node generateIcons.js`: Generates icon imports and exports. | ||
| ## Development | ||
|
|
||
| ## License | ||
| ### Local Development and Linking | ||
|
|
||
| This project is licensed under the MIT License. | ||
| While developing the Kaia Design System locally, you can link the package to an example project to see live updates: | ||
|
|
||
| ## Contributing | ||
| 1. In the root directory of `kaia-design-system`, create a symbolic link: | ||
| ```bash | ||
| yarn link | ||
| ``` | ||
|
|
||
| 2. In the example project, link the design system: | ||
| ```bash | ||
| yarn link "@kaiachain/kaia-design-system" | ||
| ``` | ||
|
|
||
| 3. Build the design system to apply changes: | ||
| ```bash | ||
| yarn build | ||
| ``` | ||
|
|
||
| Contributions are welcome! Please open an issue or submit a pull request. | ||
| Now, any changes made in the design system will reflect in the example project after building. | ||
|
|
||
| ## Acknowledgments | ||
| ## Contributing | ||
|
|
||
| Contributions are welcome! Please follow the code style and run `yarn lint` before submitting pull requests. | ||
|
|
||
| Special thanks to the open-source community for providing valuable tools and libraries that made this project possible. | ||
| ## License | ||
|
|
||
| This project is licensed under the MIT License. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,106 @@ | ||
| # React + TypeScript + Vite | ||
| # Kaia Design System - Example Project | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
| This is an example project demonstrating the usage of `@kaiachain/kaia-design-system`. It includes examples of how to use various components such as buttons, text inputs, checkboxes, icons, and more. The project also supports theme toggling between light and dark themes. | ||
|
|
||
| Currently, two official plugins are available: | ||
| ## Requirements | ||
|
|
||
| - [@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 | ||
| - Node.js (version 16 or higher) | ||
| - Yarn package manager (npm is not allowed) | ||
|
|
||
| ## Expanding the ESLint configuration | ||
| ## Installation | ||
|
|
||
| If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
| Make sure to use `yarn` for installing dependencies: | ||
|
|
||
| - Configure the top-level `parserOptions` property like this: | ||
| ```bash | ||
| yarn install | ||
| ``` | ||
|
|
||
| `Note: The project is configured to throw an error if you attempt to use npm. Only yarn is allowed for dependency management.` | ||
|
|
||
|
|
||
| ## Scripts | ||
| Here are the available scripts defined in the package.json: | ||
|
|
||
| * `preinstall`: Ensures that only yarn is used to install dependencies. | ||
| * `dev`: Starts the development server using Vite. | ||
| * `lint`: Runs ESLint on the project and checks for unused disable directives with no warnings allowed. | ||
|
|
||
| ### Script Usage | ||
| To start the development server: | ||
|
|
||
| ```js | ||
| export default { | ||
| // other rules... | ||
| parserOptions: { | ||
| ecmaVersion: 'latest', | ||
| sourceType: 'module', | ||
| project: ['./tsconfig.json', './tsconfig.node.json'], | ||
| tsconfigRootDir: __dirname, | ||
| }, | ||
| } | ||
| ```bash | ||
| yarn dev | ||
| ``` | ||
|
|
||
| - 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 | ||
| To run the linter: | ||
|
|
||
| ```bash | ||
| yarn lint | ||
| ``` | ||
|
|
||
| ## Linking `kaia-design-system` | ||
| While developing kaia-design-system, you can link the local version of the package to this example project to see changes immediately. | ||
|
|
||
| Steps for Linking and Tracking Changes | ||
|
|
||
| 1. In the root directory of kaia-design-system, create a symbolic link: | ||
|
|
||
| ```bash | ||
| yarn link | ||
| ``` | ||
|
|
||
| 2. In the example project directory, link the design system: | ||
| ```bash | ||
| yarn link "@kaiachain/kaia-design-system" | ||
| ``` | ||
|
|
||
| 3. Build the design system to compile changes: | ||
| ```bash | ||
| yarn build | ||
| ``` | ||
|
|
||
| Now, any changes made in `kaia-design-system` will be reflected in the example project after running the build command. | ||
|
|
||
| ## Usage | ||
|
|
||
| Run the example project to explore various use cases and examples. | ||
|
|
||
| ## Key Features Demonstrated | ||
|
|
||
| This project showcases components that follow the Kaia Foundation's design system: | ||
|
|
||
| - **KaIcon**: A set of scalable SVG icons designed for consistent and flexible use across the UI. | ||
|
|
||
| - **KaLogo**: The official Kaia Foundation logo in SVG format, ensuring scalability and clarity. | ||
|
|
||
| - **KaButton & KaButtonProps**: A customizable button component with options for size, type, icons, and disabled states. | ||
|
|
||
| - **KaCheckBox & KaCheckBoxProps**: A checkbox component with customizable states like checked, disabled, and onChange handlers. | ||
|
|
||
| - **KaTextInput & KaTextInputProps**: A text input field with support for error states, disabled states, and various sizes. | ||
|
|
||
| - **KaLabel & KaLabelProps**: A label component with different styles (solid, pale, line, etc.) for tagging or categorization. | ||
|
|
||
| - **KaRadio & KaRadioProps**: A radio button component for selecting between multiple options, customizable in size and label. | ||
|
|
||
| - **KaText & KaTextProps**: A text component with predefined font styles and sizes, fully compliant with the design system’s typography. | ||
|
|
||
| - **KaSelectBox & KaSelectBoxProps**: A dropdown component for selecting options, with customizable value and state handling. | ||
|
|
||
| - **useKaTheme**: A hook that provides access to and control over the current theme (light or dark). | ||
|
|
||
| - **font**: The standardized typography settings, including font sizes, weights, and line heights. | ||
|
|
||
| - **darkTheme**: A predefined dark theme for better readability in low-light conditions. | ||
|
|
||
| - **lightTheme**: A predefined light theme for bright environments, ensuring clarity and usability. | ||
|
|
||
|
|
||
| ## Theming | ||
| The project allows toggling between light and dark themes using the `useKaTheme` hook from `@kaiachain/kaia-design-system`. The theme can be switched via radio buttons. | ||
|
|
||
| ## License | ||
| This project is licensed under the MIT License. | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.