• fix: duplicate runtime for notch, android, and ios (#63) 394037c

Changelog

• fix[#60]: separate color-only logic from apply method into the new colors method (#61 by @DeVoresyah)

Changelog

• Migrating to React Context
• Adding Provider
• Adding useStyles Hooks
• Adding withStyles HoC

v0.7.0-alpha.4

Fix

• fix: text responsive (#42 by @DeVoresyah)

Feature

• feat: add percentage size (#43 by @DeVoresyah)
• feat: add notch support for iOS (#44 by @DeVoresyah)

Enhancement

• enhancement: add type support for exported connect (#41 by @DeVoresyah)

Fix

• Fix: fix custom theme type (#39 by @DeVoresyah)

Fix

• Fix: add transform features for connect (by @DeVoresyah)

Features

• Enhancement: Add transform translate (#33 by @deyusf)
• Enhancement: Add transform scale (#35 by @DeVoresyah)
• Enhancement: Add transform rotate in (#36 by @DeVoresyah)
• Enhancement: Add transform skew (#34 by @deyusf)

Bug Fixes

• Issue Fixed Width: Fix fixed-width processor by changing the detection with regex (#20 by @ambrizals)
• Issue Fixed Height: Fix fixed-height processor by changing the detection with regex (#20 by @ambrizals)

Unit Testing

• Update: Support unit testing for v0.6.x (#20 by @ambrizals)

Patch Release

We found some bugs since major releases v0.6.0, we hope this version will be a stable version for now.

Typescript Migration

We finally migrate to typescript, we hope by this migration more people can contribute to this project. And also if you found something that not best practice in our typescript migration, don't hesitate to contribute 🥂

Colors Improvement

Extend Color Palettes

Like TailwindCSS, we added more color palettes. Now every color has a 50 value. Example:

apply("bg-red-50")

Colors Opacity

We also add new features like TailwindCSS, colors opacity. Now you can add color opacity for Background Color, Border Color, and Text Color Example:

apply("bg-red-500 bg-opacity-50")
apply("text-blue-500 text-opacity-25")

Custom Theme Enhancement

We created a new algorithm for Custom Theme. With this algorithm, you just need to define small pre-defined styles on your custom theme. Take a look at our new custom theme rules :

{
  colors: {
    // custom colors
  },
  spacing: {
    // custom spacing
  },
  border: {
    width: {
	// border width
    },
    radius: {
	// border radius
    }
  },
  font: {
    family: {
	// font family
    },
    size: {
	// font size
    }
  }
}

And here's a usage example:

{
  // this will automatically generate background color, border color, and text color
  colors: {
    primary: "#f56565",
    secondary: "rgba(107, 114, 128, --osmi-opacity)"
  },
  // this will automatically generate margin, padding, top, right, left, bottom
  spacing: {
    "30": 120
  },
  // generate border width and radius
  border: {
    width: {
      "30": 120
    },
    radius: {
      "super-xl": 120
    }
  },
  // generate font family & font size
  font: {
    family: {
      "font-regular": "OpenSans-Regular"
    },
    size: {
      "xxl": 40
    }
  }
}

Dark & Light Theme

Finally, we can support the dark theme, you don't need to manually check if the mobile device is using a dark theme or not. We do it for you. You just need to tell us which color you want to use if the device is using a dark theme.

By using prefix dark: and then following with the type of color (background/border/text) Example:

apply("bg-white dark:gray-900")

It means that the default/light background will use white and for the dark them it will use gray-900

That's all for this new release, hope you all like it and enjoy it Cheers ~! 🥂

Changelog

Responsive Implementation for Width, Height, and Font Size

Actually, we already have a responsive module since 0.5.0. But we realize that the implementation of the responsive module still hard. Now we inject it into apply() and connect() ecosystem.

Responsive Width based on Window Dimensions Width

Example:

import { apply } from 'osmicsx'

const Button = props => {
  return (
    <View style={apply('w/90 bg-blue-500 self-center')}>
      <Text style={apply('text-white text/5 font-medium')}>Button</Text>
    </View>
  )
}

• w/90 will return 90% width of the window width
• text/5 will return 5% of the window width

Responsive Height based on Window Dimensions Height

Example:

import { apply } from 'osmicsx'

const Button = props => {
  return (
    <View style={apply('w/50 h/50 bg-blue-500 self-center items-center justify-center')}>
      <Text style={apply('text-white text/5 font-medium text-center')}>Hello World!</Text>
    </View>
  )
}

• w/50 will return 50% width of the window width
• h/50 will return 50% height of the window height
• text/5 will return 5% of the window width

Responsive Font Size based on Window Dimensions Height

Example:

import { apply } from 'osmicsx'

const Title = props => {
  return (
    <Text style={apply('text-white text/8 font-medium text-center')}>Hello World!</Text>
  )
}

• text/8 will return 5% of the window width

Changelog

Update algorithm for apply() method #4

Previously, apply() method need to use multiple params. Now, we gonna migrate to space separator instead of array params.

before

apply("flex", "items-center", "justify-center")

after

apply("flex items-center justify-center")

Update connect() method algorithm #5

Related to #4 plan, connect() algorithm will also have an update. We also want to use space separator on connect() method. Maybe it will easier and more simple,

before

export default connect({
    container: [
        "flex",
        "items-center",
        "justify-center",
    ],
    title: [
        "text-lg",
        "text-center",
        "text-black",
        "font-bold"
    ]
})

after

export default connect({
    container: "flex items-center justify-center",
    title: "text-lg text-center text-black font-bold"
})

Colors support in apply() method #6

Adding support to call any colors with apply() method. So, you don't need to use any colors extractor again

before

colors["red-500"]

after

apply("red-500")

Update scaling method & responsive text #7

We've updated the text responsive in this version.

Changelog

Remove family() helper method

family() helper method has been deprecated in this version. Please set up your custom font family on OsmiProvider

Remove default helper method

default helper method has been deprecated in this version. You cannot use import default anymore, please use apply() helper method instead.

Update apply() helper method algorithm

apply() helper method now has a new algorithm, instead of using array when call the method. Now you just need to write multiple namespaces on method params.

before

apply(["flex", "items-center", "justify-center"])

after:

apply("flex", "items-center", "justify-center")

Changelog

Fix minor bugs at Border Width

Add colors to provider

Changelog

Add new OsmiProvider

OsmiProvider is a new method to config the custom style / theme like adding custom namespace. And also in OsmiProvider we simplify the styling concept. For more detail please check the Release Notes in Documentation

Update Project Structure

Just move some file to another folder

Simplify Styling Concept

We're more simplify the styling concept, for the templating style by removing the apply method. Now you just need to use multiple namespace in the array.

deprecated some Method

In this release, we've been added OsmiProvider which will replace several method like the default method and family method.

Changelog

Fix Minor Bugs

Some bugs in Border Style has been fixed.

Refactor Flex Direction Namespace

Here's the new namespace for the flex direction:

• row
• row-reverse
• col
• col-reverse

Add more border style

In the previous version, border style only have 4 kind. Now we expand more styling for the border style

Update Official Documentation

Official documentation of OsmiCSX has been updated and can be access on https://osmicsx.github.io/docs

Changelog

• Fix Text Alignment bug
• Update custom style method
• Add new helper method family

family() helper

family() is a custom fontFamily style helper. You just need to put the font name from your project Example:

apply([
    "text-white",
    "text-lg",
    family("Roboto-Medium")
])

Update Custom Style Method

Now for custom style you just need put an object in the apply() array instead of second params. Example:

apply([
    "flex",
    "p-5",
    "rounded-lg",
    { backgroundColor: "red" } // custom style
])

Changelog

• Update typo

Changelog

• Refactoring Colors Name
• Add Scaling Lib

This is the initial release for OsmiCSX. We still develop more features and working on the documentation