@educabot/styles

Educabot styles library

The Educabot Styles Library is a utility library designed to streamline and standardize the management of styles in all applications across the Educabot organization. This library allows you to create consistent and maintainable styles while ensuring a unified theme is applied globally.

✨ Features

• Same Language: All team developers understand and follow the same rules and methodologies.
• Enhanced Developer Experience (DX): Fully typed and easy to learn.
• Global Theming: Easily set and manage a global theme for your applications.
• Reusable Styles: Define and reuse styles consistently across educabot projects.
• JS in CSS: Write your styles using TypeScript, following the same pattern in all applications.

📦 Installation

npm install @educabot/styles

Usage

• Setting Up the Global Theme In your application's entry point, set up the global theme using ThemeProvider provided:

import { ThemeProvider, defaultTheme } from '@educabot/styles'

ReactDOM.render(
  <ThemeProvider theme={createTheme(defaultTheme)}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
)

• Stylized componente using makeStyles function. In your components, you can use the makeStyles function to define and apply styles based on the global theme:

import { makeStyles } from '@educabot/styles'

const useStyles = makeStyles((theme) => ({
  button: {
    border: 0
    padding: theme.spacing(2, 2, 4, 4),
    background: theme.palette.primary.main,
  },
}))

const Button = () => {
  const styles = useStyles()
  return <button className={styles.button}>Continue</button>
}

• Stylized componente using useTheme hook.

import { useTheme } from '@educabot/styles'

const Text = () => {
  const theme = useTheme()
  return <span style={{ color: theme.palette.primary.main }}>Yay!</span>
}

• Combine multiple styles.

import { cx, makeStyles } from '@educabot/styles'

const useStyles = makeStyles((theme) => ({
  text: {
    color: theme.palette.primary.main,
  },
  textBorder: {
    color: theme.palette.secondary.main,
  },
}))

const Text = () => {
  const styles = useStyles()
  const [selected, setSelected] = useState(false)
  return <span className={cx(styles.text, styles.textBorder)}>Yay!</span>
}

• Use Fonts and CSS Typography. Include fonts in the project

import '@educabot/styles/dist/styles/fonts.css'