@sabom/ds-pribadi

Reusable React component library with predefined design tokens, typography, and styling utilities.

Installation

Install the package using npm:

npm install @sabom/ds-pribadi

or with yarn:

yarn add @sabom/ds-pribadi

Initial Setup

To use the components correctly, follow the setup steps below.

1. Import the Font Styles

Import the provided font stylesheet into your global CSS file (for example index.css or global.css).

@import "./assets/style/font.css";

If the font file does not exist in your project, create it at:

/assets/style/font.css

Then copy the following default content into the file.

/* Thin */
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-Thin.woff2") format("truetype");
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-ThinItalic.woff2") format("truetype");
    font-weight: 100;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-Regular.woff2") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-Italic.woff2") format("truetype");
    font-weight: 400;
    font-style: italic;
}

/* SemiBold */
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-SemiBold.woff2") format("truetype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-SemiBoldItalic.woff2") format("truetype");
    font-weight: 600;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-Bold.woff2") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-BoldItalic.woff2") format("truetype");
    font-weight: 700;
    font-style: italic;
}

/* ExtraBold */
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-ExtraBold.woff2") format("truetype");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-ExtraBoldItalic.woff2") format("truetype");
    font-weight: 800;
    font-style: italic;
}

/* Black */
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-Black.woff2") format("truetype");
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: GarudaSans;
    src: url("../font/sans/GarudaSans-BlackItalic.woff2") format("truetype");
    font-weight: 900;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: "Garuda Serif";
    src: url("../font/serif/GarudaSerif-Regular.woff2") format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Garuda Serif";
    src: url("../font/serif/GarudaSerif-Italic.woff2") format("opentype");
    font-weight: 400;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: "Garuda Serif";
    src: url("../font/serif/GarudaSerif-Bold.woff2") format("opentype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Garuda Serif";
    src: url("../font/serif/GarudaSerif-BoldItalic.woff2") format("opentype");
    font-weight: 700;
    font-style: italic;
}

/* ExtraBold */
@font-face {
    font-family: "Garuda Serif";
    src: url("../font/serif/GarudaSerif-ExtraBold.woff2") format("opentype");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Garuda Serif";
    src: url("../font/serif/GarudaSerif-ExtraBoldItalic.woff2") format("opentype");
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/sans/Inter-VariableFont_slnt\,wght.woff2') format('woff2'),
        url('../font/sans/Inter-VariableFont_slnt\,wght.woff') format('woff');
}

2. Wrap Your Application with StyleWrapper

Wrap your root application with StyleWrapper.
This provides the design tokens, CSS variables, and base styles required by all components.

Example:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { StyleWrapper } from "@sabom/ds-pribadi";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StyleWrapper>
    <App />
  </StyleWrapper>
);

3. Use Components

You can now import and use components from the library.

Example usage with Typography:

import { Typography } from "./Typography";

export default function Example() {
  return (
    <Typography variant="displaySpecial">
      This is Runway GIA
    </Typography>
  );
}

Component Reference

For full documentation and additional component examples, open the component reference site:

[ask to your coworker for the reference]

This page includes:

• Component previews
• Props documentation
• Usage examples

Testing

After completing the setup:

1. Import a component from the library
2. Render it inside your application
3. Verify that styles and fonts are applied correctly

Notes

• Ensure the font stylesheet is imported globally
• Ensure the app is wrapped with StyleWrapper
• Components may not render correctly if fonts or tokens are missing

License

ISC