paymium/crossed

Warning Package a not ready production and not published

crossed UI

Universal Headless Components built with react-native-unistyles for react-native + web

Introduction

Crossed is UI lib component which worked on react-native and web based on react-native-unistyles.

Documentation

See documentation.

Inspiration

• tamagui

Contribution

Environment

pnpm version 7 node 20

Command

First run packages build pnpm watch
Second run doc build pnpm run docs

crossed's Issues

[Feature] [primitive] createSheet

• [Primitive] createSheet aria behavior
• [Primitive] createSheet accessibility behavior
• [Primitive] createSheet implement test
• [Primitive] createSheet documentation

[Primitive] createInput accessibility behavior

[Primitive] createButton accessibility behavior

Implement accessibility beahvior for button and button group

add test on @crossed/styled

[Feature] [primitive] createButton

• #36
• #27
• #28
• #29
• #30
• #31

[Feature] [primitive] createList

• #33
• #38

[Primitive] createButton create test

[Primitive] createButton Group component

Create Group component in createButton

add theme in @crossed/ui

Create tailwind plugin which take theme params

type Theme = {
  background: string
  backgroundFocus: string
  backgroundHover: string
  backgroundPress: string
  backgroundStrong: string
  backgroundTransparent: string
  borderColor: string
  borderColorFocus: string
  borderColorHover: string
  borderColorPress: string
  color: string
  colorFocus: string
  colorHover: string
  colorPress: string
}

// several possibility
// what is the best possibility?
pluginTailwindCrossed({
  Button: {} as Theme,
  ButtonText: {} as Theme,
  ButtonElement: {} as Theme,
  ...,
});

pluginTailwindCrossed({
  Button: {
    Root: {} as Theme,
    Text: {} as Theme,
    Element: {} as Theme,
  },
  ...,
});

The plugin generate className like this

.Button-Text-background { /* ... */ }
.Button-Text-backgroundFocus { /* ... */ }
.Button-Text-backgroundPress { /* ... */ }`
.Button-Text-color { /* ... */ }

.Button-Root-background { /* ... */ }
.Button-Root-backgroundFocus { /* ... */ }
.Button-Root-backgroundPress { /* ... */ }

shoudl be use like this with styled

import { styled } from "@crossed/styled";
import { Pressable } from "react-native";

const ButtonFrame = styled(Pressable, {
  className: ['Button-Root-background'],
  ':active': {
    className: ['Button-Root-backgroundPress']
  },
});

About github page of lobor is down

Trying getting into the link provided in the repo, lobor.github.io/crossed/ but I think is down.

create plugin postcss

[Primitive] createButton aria behavior

Implement air behavior in createButton

[Feature] [Primitive] createBadge

• [Primitive] createBadge implement test
• [Primitive] createBadge documentation

[Primitive] createButton Element component

Create Element component in createButton

[Feature] [primitive] createSelect

• [Primitive] createSelect aria behavior
• [Primitive] createSelect accessibility behavior
• [Primitive] createSelect implement test
• [Primitive] createSelect documentation

[Primitive] createInput aria behavior

[Primitive] createList accessibility behavior

Implement accessibility behavior in createList

[Primitive] createInput create test

[Doc] update babel doc

babel plugin not change className to style.
It create file which load config of tailwind in twrnc (see create API) and change all import to this file created
It's only for react-native, for web, use basic className behavior

[Feature] [Primitive] createSelect

[Primitive] createButton Addon component

Create Addon component in createButton

Benchmark

implement benchmark for mobile and browser

[Feature] [Primitive] createInput

• #44
• #45
• #46

[Feature] [Primitive] createLabel

• [Primitive] createLabel aria behavior
• [Primitive] createLabel accessibility behavior
• [Primitive] createLabel implement test
• [Primitive] createLabel documentation

Modifiate all package and readme

Add Licence
Add Paymium brand
Add Collaborator
Add keyword in package.json
Add description in package.json
Update readme of all packages published

[Feature] [primitive] createModal

• [Primitive] createModal aria behavior
• [Primitive] createModal accessibility behavior
• [Primitive] createModal implement test
• [Primitive] createModal documentation

[Feature] [Primitive] createDropdown

• [Primitive] createDropdown aria behavior
• [Primitive] createDropdown accessibility behavior
• [Primitive] createDropdown implement test
• [Primitive] createDropdown documentation

add props property

[Primitive] createList aria behavior