2.5.13 โ€ข Published 9 months ago

@g123jp/g123-ui v2.5.13

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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.

    # 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"]'];

image

โŒจ๏ธ 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.

2.5.10-canary.2

9 months ago

2.5.10-canary.1

9 months ago

2.5.13

9 months ago

2.5.12

10 months ago

2.5.10

10 months ago

2.5.11

10 months ago

2.5.6

11 months ago

2.5.5

11 months ago

2.5.8

11 months ago

2.5.9

11 months ago

2.5.1-beta.0

1 year ago

2.5.0

1 year ago

2.5.2

1 year ago

2.5.1

1 year ago

2.5.4

12 months ago

2.4.10-beta.0

1 year ago

2.4.9

1 year ago

2.4.8

1 year ago

2.4.5

2 years ago

2.4.4

2 years ago

2.4.7

2 years ago

2.4.6-canary.1

2 years ago

2.4.6-canary.0

2 years ago

2.4.3

2 years ago

2.4.2

2 years ago

2.4.1

2 years ago

2.4.1-canary.0

2 years ago

2.4.0

2 years ago

2.4.0-canary.0

2 years ago

2.3.1

2 years ago

2.3.0

2 years ago

2.2.2-canary.9

2 years ago

2.2.2-canary.17

2 years ago

2.2.2-canary.16

2 years ago

2.2.2-canary.18

2 years ago

2.2.2-canary.11

2 years ago

2.2.2-canary.10

2 years ago

2.2.2-canary.12

2 years ago

2.2.2-canary.15

2 years ago

2.2.2-canary.14

2 years ago

2.2.2-canary.8

2 years ago

2.2.2-canary.7

2 years ago

2.2.2-canary.6

2 years ago

2.2.2-canary.5

2 years ago

2.2.2-canary.4

2 years ago

2.2.2-canary.3

2 years ago

2.2.2-canary.2

2 years ago

2.2.2-canary.1

2 years ago

2.2.2-canary.0

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.0-canary.11

2 years ago

2.0.8

2 years ago

2.0.0-canary.10

2 years ago

2.0.8-canary.0

2 years ago

2.0.8-canary.1

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

2.0.0-canary.13

2 years ago

2.2.0-canary.1

2 years ago

2.1.9

2 years ago

2.0.0-canary.12

2 years ago

2.0.0-canary.15

2 years ago

2.0.0-canary.14

2 years ago

2.0.0-canary.17

2 years ago

2.0.0-canary.16

2 years ago

2.0.0-canary.19

2 years ago

2.0.0-canary.18

2 years ago

2.0.0-canary.20

2 years ago

2.2.0-canary.0

2 years ago

2.1.10

2 years ago

2.0.0-canary.21

2 years ago

2.0.0-canary.8

2 years ago

2.0.0-canary.7

2 years ago

2.0.0-canary.9

2 years ago

2.0.0-canary.4

2 years ago

2.0.0-canary.3

2 years ago

2.0.0-canary.6

2 years ago

2.0.0-canary.5

2 years ago

2.0.0-canary.0

2 years ago

2.0.0-canary.2

2 years ago

2.0.0-canary.1

2 years ago

2.2.1-canary.0

2 years ago

2.2.1-canary.1

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.0.11

2 years ago

2.1.5

2 years ago

2.0.12

2 years ago

2.1.8

2 years ago

2.1.7

2 years ago

2.0.10

2 years ago

2.1.0

2 years ago

2.0.13-canary.1

2 years ago

2.0.13-canary.2

2 years ago

2.0.9-canary.1

2 years ago

2.0.9-canary.2

2 years ago

2.0.9-canary.3

2 years ago

2.0.9-canary.4

2 years ago

2.0.9-canary.5

2 years ago

2.0.9-canary.6

2 years ago

2.0.9-canary.7

2 years ago

1.7.3

2 years ago

1.7.2

2 years ago

1.7.1

2 years ago

1.7.0

2 years ago

1.8.0-alpha.2

2 years ago

1.8.0-alpha.0

2 years ago

1.8.0-alpha.1

2 years ago

1.7.5

2 years ago

1.7.4

2 years ago

1.6.2

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.5.5

3 years ago

1.5.4

3 years ago

1.5.7

3 years ago

1.5.6

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.14

3 years ago

1.4.13

3 years ago

1.4.12

3 years ago

1.4.11

3 years ago

1.4.10

3 years ago

1.4.9

3 years ago

1.4.7

3 years ago

1.4.6

3 years ago

1.4.5

3 years ago

1.4.4

4 years ago

1.4.3

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.0.4

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago