New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@g123jp/g123-ui

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@g123jp/g123-ui

Reuseable UI based on G123 Design System

2.5.16
latest
Source
npm

Version published: 2 months ago

Weekly downloads: 13; decreased by-89.26%

Maintainers: 0

Weekly downloads

Created: 3 years ago

Source

g123-ui

Reuseable UI based on G123 Design System and Atomic Design

📦 Install

yarn add @g123jp/g123-ui

🔨 Usage

make sure tailwindcss has been installed correctly.

make sure Tailwind's default style has been loaded correctly.

expand details

# in your root css
@tailwind base;
@tailwind components;
@tailwind utilities;

make sure postcss has been configured correctly(if you use TailwindCSS as a PostCSS plugin).

import g123-ui's config as default(use tailwindcss's presents)

import { g123TailwindPresets } from '@g123jp/g123-ui';

const TailwindConfig = {
  // use g123-ui's presets as default
  presets: [g123TailwindPresets],
  content: [
    // ... put your content here
    './node_modules/@g123jp/g123-ui/dist/components/**/*.js',
    './node_modules/@g123jp/g123-ui/dist/utils/**/*.js',
  ],
  // ... your other configs
};

use g123-ui's component:

import { Button, ButtonType, Logo } from '@g123jp/g123-ui';

const App = () => (
  <>
    <Logo />
    <Button type={ButtonType.primay}>Submit</Button>
  </>
);

🌛 Dark Mode:

g123-ui supports the system's dark mode by default(uses the prefers-color-scheme CSS media feature).
But you can also build sites that support toggling dark mode manually using the ‘class’ strategy.
Or use your own customize the dark mode selector, for example, add the following code in your tailwind.config.js and control dark mode by adding data-mode="g123-dark" to your <html> tag:

darkMode: ['class', '[data-mode="g123-dark"]'];

⌨️ Development

install
```
yarn
```
build

⛑: Make sure to run build before publishing it.
```
yarn build
```
🤹🏼 check with storybook
```
yarn storybook
```
bundle visualize and analyze with rollup-plugin-visualizer
```
yarn build
```
then open stats/network/index.html or stats/treemap/index.html in your browser.

FAQs

What is @g123jp/g123-ui?

Is @g123jp/g123-ui popular?

Is @g123jp/g123-ui well maintained?

Package last updated on 10 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@g123jp/g123-ui

g123-ui

📦 Install

🔨 Usage

make sure tailwindcss has been installed correctly.

make sure Tailwind's default style has been loaded correctly.

make sure postcss has been configured correctly(if you use TailwindCSS as a PostCSS plugin).

import g123-ui's config as default(use tailwindcss's presents)

use g123-ui's component:

🌛 Dark Mode:

g123-ui supports the system's dark mode by default(uses the `prefers-color-scheme` CSS media feature).

But you can also build sites that support toggling dark mode manually using the ‘class’ strategy.

Or use your own customize the dark mode selector, for example, add the following code in your `tailwind.config.js` and control dark mode by adding `data-mode="g123-dark"` to your `<html>` tag:

⌨️ Development

install

build

🤹🏼 check with storybook

bundle visualize and analyze with rollup-plugin-visualizer

Related posts

@g123jp/g123-ui

g123-ui

📦 Install

🔨 Usage

make sure tailwindcss has been installed correctly.

make sure Tailwind's default style has been loaded correctly.

make sure postcss has been configured correctly(if you use TailwindCSS as a PostCSS plugin).

import g123-ui's config as default(use tailwindcss's presents)

use g123-ui's component:

🌛 Dark Mode:

g123-ui supports the system's dark mode by default(uses the prefers-color-scheme CSS media feature).

But you can also build sites that support toggling dark mode manually using the ‘class’ strategy.

Or use your own customize the dark mode selector, for example, add the following code in your tailwind.config.js and control dark mode by adding data-mode="g123-dark" to your <html> tag:

⌨️ Development

install

build

🤹🏼 check with storybook

bundle visualize and analyze with rollup-plugin-visualizer

Related posts

Create React App Officially Deprecated Amid React 19 Compatibility Issues

Oracle Drags Its Feet in the JavaScript Trademark Dispute

g123-ui supports the system's dark mode by default(uses the `prefers-color-scheme` CSS media feature).

Or use your own customize the dark mode selector, for example, add the following code in your `tailwind.config.js` and control dark mode by adding `data-mode="g123-dark"` to your `<html>` tag: