Skip to content

Commit

Permalink
release doc
Browse files Browse the repository at this point in the history
Lionel Bertrand committed Nov 21, 2023
1 parent 11b124c commit 9cd1751
Showing 11 changed files with 44 additions and 19 deletions.
8 changes: 8 additions & 0 deletions apps/docs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# crossed-docs

## 0.2.3

### Patch Changes

- fix error styled('button')
- Updated dependencies
- @crossed/demo@0.2.1

## 0.2.2

### Patch Changes
4 changes: 2 additions & 2 deletions apps/docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "crossed-docs",
"version": "0.2.2",
"version": "0.2.3",
"description": "Nextra docs template",
"private": true,
"scripts": {
@@ -19,7 +19,7 @@
"homepage": "https://github.com/shuding/nextra-docs-template#readme",
"dependencies": {
"@crossed/core": "0.8.0",
"@crossed/demo": "0.2.0",
"@crossed/demo": "0.2.1",
"@crossed/next-adapter": "0.5.1",
"@crossed/primitive": "1.6.0",
"@crossed/styled": "0.12.0",
13 changes: 9 additions & 4 deletions apps/docs/pages/styled/colorMode.mdx
Original file line number Diff line number Diff line change
@@ -26,16 +26,21 @@ You can specify color mode for each component styled

```typescript
import { styled } from '@crossed/styled';
import { Pressable } from 'react-native';

export const Button = styled('button', {
'className': ['px-2 py-1', 'bg-neutral-300 text-black', 'dark:bg-neutral-800 dark:text-white'],
'variants': {
export const Button = styled(Pressable, {
className: [
'px-2 py-1',
'bg-neutral-300 text-black',
'dark:bg-neutral-800 dark:text-white',
],
variants: {
color: {
red: {
className: ['bg-red-300 text-black', 'dark:bg-red-800 dark:text-white'],
},
},
}
},
});
```

2 changes: 1 addition & 1 deletion apps/docs/pages/styled/installation.mdx
Original file line number Diff line number Diff line change
@@ -156,7 +156,7 @@ See [documentation](/styled/babel)
import { styled } from '@crossed/styled';
import { Pressable } from 'react-native';

export const Button = styled('button', {
export const Button = styled(Pressable, {
'className': [
'border border-neutral-900 bg-neutral-500 rounded-md text-white',
],
2 changes: 1 addition & 1 deletion apps/expo/package.json
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
"@babel/runtime": "^7.22.10",
"@crossed/babel-plugin": "0.3.1",
"@crossed/core": "0.8.0",
"@crossed/demo": "0.2.0",
"@crossed/demo": "0.2.1",
"@crossed/styled": "workspace:^",
"@crossed/ui": "0.9.0",
"@expo/vector-icons": "^13.0.0",
6 changes: 6 additions & 0 deletions packages/demo/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @crossed/demo

## 0.2.1

### Patch Changes

- fix error styled('button')

## 0.2.0

### Minor Changes
2 changes: 1 addition & 1 deletion packages/demo/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@crossed/demo",
"description": "A universal & performant styling library for React Native, Next.js & React",
"version": "0.2.0",
"version": "0.2.1",
"keywords": [
"React Native",
"Next.js",
5 changes: 3 additions & 2 deletions packages/demo/src/core/styled-html.tsx
Original file line number Diff line number Diff line change
@@ -2,8 +2,9 @@ import { styled } from '@crossed/styled';
import { withStaticProperties } from '@crossed/core';
import type { Props } from '../props';
import { YBox } from '@crossed/ui';
import { Pressable, Text } from 'react-native';

const ButtonFrame = styled('button', {
const ButtonFrame = styled(Pressable, {
'className': ['bg-blue-500', 'rounded'],
':hover': {
className: ['bg-blue-400'],
@@ -33,7 +34,7 @@ const ButtonFrame = styled('button', {
size: 'md',
},
});
const ButtonText = styled('span', {
const ButtonText = styled(Text, {
className: ['text-white'],
variants: {
size: {
4 changes: 2 additions & 2 deletions packages/demo/src/styled/button/Extends.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { styled } from '@crossed/styled';
import { Pressable } from 'react-native';
import { Pressable, TextInput } from 'react-native';

const Button = styled(Pressable, {
'className': ['px-3 py-2', 'border border-neutral-700', 'bg-neutral-800'],
@@ -14,7 +14,7 @@ const Button = styled(Pressable, {
},
});

const InputStyledFrom = styled('input', {
const InputStyledFrom = styled(TextInput, {
extends: Button.styles,
});

13 changes: 9 additions & 4 deletions packages/demo/src/styled/colorMode.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { CrossedTheme, useCrossedTheme } from '@crossed/styled';
import { styled } from '@crossed/styled';
import { Pressable, Text } from 'react-native';

const ButtonWithoutVariant = styled('button', {
const ButtonWithoutVariant = styled(Pressable, {
className: [
'px-2 py-1',
'bg-neutral-300 text-black',
'dark:bg-neutral-800 dark:text-white',
],
});

const ButtonWithVariant = styled('button', {
const ButtonWithVariant = styled(Pressable, {
className: ['px-2 py-1'],
variants: {
variant: {
@@ -43,8 +44,12 @@ export const ColorModeDemo = () => {
<CrossedTheme>
<div className="flex flex-col items-center gap-2">
<div className="flex flex-row gap-2">
<ButtonWithoutVariant>Button without variant</ButtonWithoutVariant>
<ButtonWithVariant>Button with variant</ButtonWithVariant>
<ButtonWithoutVariant>
<Text>Button without variant</Text>
</ButtonWithoutVariant>
<ButtonWithVariant>
<Text>Button with variant</Text>
</ButtonWithVariant>
</div>
<ButtonTheme />
</div>
4 changes: 2 additions & 2 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 9cd1751

Please sign in to comment.