From 8e578aa06b4ae5e66824f05f719992a3092ef0ee Mon Sep 17 00:00:00 2001 From: lobor Date: Tue, 14 Nov 2023 15:29:10 +0100 Subject: [PATCH 1/7] add extends type in compounVariants --- .changeset/chilled-balloons-doubt.md | 5 +++++ packages/core/src/types.ts | 9 +++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 .changeset/chilled-balloons-doubt.md diff --git a/.changeset/chilled-balloons-doubt.md b/.changeset/chilled-balloons-doubt.md new file mode 100644 index 00000000..9355d22a --- /dev/null +++ b/.changeset/chilled-balloons-doubt.md @@ -0,0 +1,5 @@ +--- +'@crossed/core': patch +--- + +add extends type in compounVariants diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index b96becc4..11b9c840 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -77,8 +77,10 @@ export type Config< defaultVariants?: ConfigVariants & PropsFromExtends; extends?: E; compoundVariants?: (T extends ConfigSchemaUndefined - ? (ConfigVariants | ConfigVariantsMulti) & BaseWithState

- : BaseWithState

)[]; + ? (ConfigVariants | ConfigVariantsMulti) & + BaseWithState

& + PropsFromExtends + : BaseWithState

& PropsFromExtends)[]; }; export type Props< @@ -106,6 +108,9 @@ export type NewComponentProps< className?: string; // animations?: boolean; states?: { isActive?: boolean; isFocus?: boolean; isHover?: boolean }; + hoverTheme?: boolean; + activeTheme?: boolean; + focusTheme?: boolean; $dark?: Base

; $light?: Base

; }; From d7db0506954676b52fefba9c5f4935217e2c0d8c Mon Sep 17 00:00:00 2001 From: lobor Date: Tue, 14 Nov 2023 15:31:23 +0100 Subject: [PATCH 2/7] set local regex tailwind intellisens --- .vscode/settings.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 4191a40c..5f5dd7fb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,5 @@ { "tailwindCSS.experimental.classRegex": [ - ["className: ?([^;]*)[;]", "[`'\"`]([^'\"`,;]*)[`'\"`]"] - ], - "mdx.experimentalLanguageServer": true + ["className: ?([^;]*)[;]", "[`'\"`]([^'\"`,;]*)[`'\"`]"], + ] } From bd4a7bae1fe19fe1c13bf4edffdf2f4112e25018 Mon Sep 17 00:00:00 2001 From: lobor Date: Tue, 14 Nov 2023 15:32:35 +0100 Subject: [PATCH 3/7] increase doc primitive --- apps/docs/pages/primitive/createBadge.mdx | 41 +++++++++++++++++++--- apps/docs/pages/primitive/createButton.mdx | 37 +++++++++---------- 2 files changed, 55 insertions(+), 23 deletions(-) diff --git a/apps/docs/pages/primitive/createBadge.mdx b/apps/docs/pages/primitive/createBadge.mdx index e82e1d74..9a69f3a5 100644 --- a/apps/docs/pages/primitive/createBadge.mdx +++ b/apps/docs/pages/primitive/createBadge.mdx @@ -2,24 +2,55 @@ import { CreateBadgeSimpleDemo } from '@crossed/demo'; import { CodeDemo } from 'components/CodeDemo'; import { getStaticDemo } from 'components/getStaticDemo'; import { Tabs } from 'components/Tabs'; +import { Table } from 'components/Table'; export const getStaticProps = async (e) => { return { props: { ssg: { - simple: (await getStaticDemo('primitive/createBadge/simple')(e)).props.ssg.code, - } - } - } + simple: (await getStaticDemo('primitive/createBadge/simple')(e)).props + .ssg.code, + }, + }, + }; }; # createBadge - + ## simple
+ + + + ## Usage + ```tsx + import type { ComponentProps } from "react"; + import { createBadge } from "@crossed/primitive"; + + const Badge = createBadge({ + Root: (props: ComponentProps<"div">) =>

, + Text: (props: ComponentProps<"p">) =>

, + }) + + const { Text } = Badge; + + function App() { + return ( + + + Hello + + + ); + } + ``` + diff --git a/apps/docs/pages/primitive/createButton.mdx b/apps/docs/pages/primitive/createButton.mdx index fbfcc600..6b7432d8 100644 --- a/apps/docs/pages/primitive/createButton.mdx +++ b/apps/docs/pages/primitive/createButton.mdx @@ -14,14 +14,11 @@ export const getStaticProps = async (e) => { return { props: { ssg: { - codeSimple: (await getStaticDemo('primitive/createButton/simple')(e)) - .props.ssg.code, codeSimpleNative: ( await getStaticDemo('primitive/createButton/simple.native')(e) ).props.ssg.code, - codeGroup: ( - await getStaticDemo('primitive/createButton/group')(e) - ).props.ssg.code, + codeGroup: (await getStaticDemo('primitive/createButton/group')(e)) + .props.ssg.code, }, }, }; @@ -32,28 +29,32 @@ export const getStaticProps = async (e) => { ## Simple - - - - - - - - + ## Group + ```tsx - + import { createButton } from "@crossed/primitive/createButton" + const Button = createButton(/* ... */); + + + + ``` ## Button -
+
From 5c84ba7a322638b106e91b578a89145dcbfa8101 Mon Sep 17 00:00:00 2001 From: lobor Date: Tue, 14 Nov 2023 15:35:26 +0100 Subject: [PATCH 4/7] some changes --- .changeset/rotten-owls-wave.md | 5 ++++ .changeset/seven-cobras-fly.md | 5 ++++ apps/docs/pages/styled/base.mdx | 3 +++ apps/docs/pages/styled/colorMode.mdx | 2 +- apps/docs/pages/styled/installation.mdx | 10 ++++---- apps/expo/app/(tabs)/index.tsx | 2 +- packages/demo/src/core/styled-html.tsx | 2 +- packages/demo/src/core/styled.tsx | 2 +- .../demo/src/primitive/createButton/group.tsx | 7 +++--- .../primitive/createButton/simple.native.tsx | 25 ++++++------------- .../src/primitive/createButton/simple.tsx | 2 +- .../demo/src/primitive/createInput/simple.tsx | 2 +- .../styled/button/CompoundVariants.native.tsx | 3 ++- .../src/styled/button/CompoundVariants.tsx | 3 ++- .../styled/button/DefaultVariants.native.tsx | 3 ++- .../src/styled/button/DefaultVariants.tsx | 3 ++- .../demo/src/styled/button/Extends.native.tsx | 3 ++- packages/demo/src/styled/button/Extends.tsx | 2 +- .../src/styled/button/OnlyBase.native.tsx | 11 +++++--- packages/demo/src/styled/button/OnlyBase.tsx | 3 ++- .../demo/src/styled/button/PropsProperty.tsx | 2 +- .../demo/src/styled/button/State.native.tsx | 3 ++- packages/demo/src/styled/button/State.tsx | 2 +- .../src/styled/button/Variants.native.tsx | 3 ++- packages/demo/src/styled/button/Variants.tsx | 3 ++- packages/demo/src/styled/colorMode.tsx | 3 ++- packages/demo/src/ui/forms/Select.tsx | 2 +- packages/primitive/package.json | 24 ++++++++++++++++++ packages/styled/package.json | 17 +++++++++++++ packages/styled/src/index.ts | 1 - packages/styled/src/styled.tsx | 14 ++++++++--- packages/ui/src/animations/Animate.tsx | 2 +- packages/ui/src/display/Badge.tsx | 18 +++++++------ packages/ui/src/display/List.tsx | 3 ++- packages/ui/src/forms/Button.tsx | 3 ++- packages/ui/src/forms/Checkbox.tsx | 3 ++- packages/ui/src/forms/Input.tsx | 3 ++- packages/ui/src/forms/Label.tsx | 3 ++- packages/ui/src/forms/Select/index.tsx | 3 ++- packages/ui/src/forms/Switch.tsx | 2 +- packages/ui/src/layout/Box.ts | 3 ++- packages/ui/src/layout/Divider.ts | 2 +- packages/ui/src/layout/XBox.ts | 2 +- packages/ui/src/layout/YBox.ts | 3 ++- packages/ui/src/typography/Heading.ts | 2 +- packages/ui/src/typography/Text.ts | 3 ++- 46 files changed, 153 insertions(+), 74 deletions(-) create mode 100644 .changeset/rotten-owls-wave.md create mode 100644 .changeset/seven-cobras-fly.md diff --git a/.changeset/rotten-owls-wave.md b/.changeset/rotten-owls-wave.md new file mode 100644 index 00000000..99f50200 --- /dev/null +++ b/.changeset/rotten-owls-wave.md @@ -0,0 +1,5 @@ +--- +'@crossed/styled': minor +--- + +add hoverTheme, focusTheme and activeTheme diff --git a/.changeset/seven-cobras-fly.md b/.changeset/seven-cobras-fly.md new file mode 100644 index 00000000..1086446d --- /dev/null +++ b/.changeset/seven-cobras-fly.md @@ -0,0 +1,5 @@ +--- +'@crossed/styled': minor +--- + +split export for seperate styled diff --git a/apps/docs/pages/styled/base.mdx b/apps/docs/pages/styled/base.mdx index 2aa39294..8cedcb55 100644 --- a/apps/docs/pages/styled/base.mdx +++ b/apps/docs/pages/styled/base.mdx @@ -105,6 +105,9 @@ You can manage state from parent with `states` props added to component styled +### Disbaled state +You can disable state with `hoverTheme`, `activeTheme`, `focusTheme` + ## Color mode When you create styled component, you can specify `:dark` or `:light` keys diff --git a/apps/docs/pages/styled/colorMode.mdx b/apps/docs/pages/styled/colorMode.mdx index ffc909a1..212dd344 100644 --- a/apps/docs/pages/styled/colorMode.mdx +++ b/apps/docs/pages/styled/colorMode.mdx @@ -25,7 +25,7 @@ export const getStaticProps = async (e) => { You can specify color mode for each component styled ```typescript -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; export const Button = styled('button', { 'className': ['px-2 py-1'], diff --git a/apps/docs/pages/styled/installation.mdx b/apps/docs/pages/styled/installation.mdx index 5047ee1f..c90b029d 100644 --- a/apps/docs/pages/styled/installation.mdx +++ b/apps/docs/pages/styled/installation.mdx @@ -1,5 +1,5 @@ import { Tabs } from 'components/Tabs'; -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Box } from '@crossed/ui'; import { Steps } from 'nextra/components'; @@ -95,7 +95,7 @@ module.exports = nextConfig; ```typescript -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; export const Button = styled('button', { 'className': [ @@ -171,14 +171,14 @@ See [documentation](/styled/babel) ```typescript -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; export const Button = styled('button', { 'className': [ 'border border-neutral-900 bg-neutral-500 rounded-md text-white', ], - ':hover': { className: 'bg-neutral-400' }, - ':active': { className: 'bg-neutral-600' }, + ':hover': { className: ['bg-neutral-400'] }, + ':active': { className: ['bg-neutral-600'] }, 'variants': { size: { md: { className: ['px-3 py-2'] }, diff --git a/apps/expo/app/(tabs)/index.tsx b/apps/expo/app/(tabs)/index.tsx index 2f311d82..728b914f 100644 --- a/apps/expo/app/(tabs)/index.tsx +++ b/apps/expo/app/(tabs)/index.tsx @@ -1,5 +1,5 @@ import { YBox, Heading, Button } from '@crossed/ui'; -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Text as NText } from 'react-native'; const TextTheme = styled(NText, { diff --git a/packages/demo/src/core/styled-html.tsx b/packages/demo/src/core/styled-html.tsx index ac9fb0cc..46e97136 100644 --- a/packages/demo/src/core/styled-html.tsx +++ b/packages/demo/src/core/styled-html.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { withStaticProperties } from '@crossed/core'; import type { Props } from '../props'; import { YBox } from '@crossed/ui'; diff --git a/packages/demo/src/core/styled.tsx b/packages/demo/src/core/styled.tsx index 1d000ea8..27cdb1b9 100644 --- a/packages/demo/src/core/styled.tsx +++ b/packages/demo/src/core/styled.tsx @@ -1,5 +1,5 @@ import { Pressable, Text } from 'react-native'; -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { withStaticProperties } from '@crossed/core'; import type { Props } from '../props'; import { YBox } from '@crossed/ui'; diff --git a/packages/demo/src/primitive/createButton/group.tsx b/packages/demo/src/primitive/createButton/group.tsx index 1d0be124..d74f63e4 100644 --- a/packages/demo/src/primitive/createButton/group.tsx +++ b/packages/demo/src/primitive/createButton/group.tsx @@ -1,10 +1,11 @@ import { createButton } from '@crossed/primitive'; -import { GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { createScope } from '@crossed/core'; import { YBox } from '@crossed/ui'; -import { Pressable, Text, TextProps } from 'react-native'; +import { Pressable, Text, TextProps, View } from 'react-native'; -const Group = styled(Pressable, { +const Group = styled(View, { className: ['overflow-hidden', 'rounded-md'], variants: { horizontal: { true: { className: ['flex-row'] } }, diff --git a/packages/demo/src/primitive/createButton/simple.native.tsx b/packages/demo/src/primitive/createButton/simple.native.tsx index 2baa274f..576314ad 100644 --- a/packages/demo/src/primitive/createButton/simple.native.tsx +++ b/packages/demo/src/primitive/createButton/simple.native.tsx @@ -1,25 +1,16 @@ import { createButton } from '@crossed/primitive'; +import { styled } from '@crossed/styled/styled'; import { Box } from '@crossed/ui'; -import { Pressable, PressableProps, Text, TextProps } from 'react-native'; +import { Pressable, Text, TextProps } from 'react-native'; const Button = createButton({ Group: Pressable, - Root: (props: PressableProps) => { - return ( - - ); - }, + Root: styled(Pressable, { + 'className': ['flex-row', 'bg-blue-500', 'rounded', 'px-3 py-2', 'gap-2'], + ':hover': { + className: ['bg-blue-400'], + }, + }), Text: (props: TextProps) => { return ; }, diff --git a/packages/demo/src/primitive/createButton/simple.tsx b/packages/demo/src/primitive/createButton/simple.tsx index a7dee015..e474dfe1 100644 --- a/packages/demo/src/primitive/createButton/simple.tsx +++ b/packages/demo/src/primitive/createButton/simple.tsx @@ -1,5 +1,5 @@ import { createButton } from '@crossed/primitive'; -import { styled } from '@crossed/styled/src'; +import { styled } from '@crossed/styled/styled'; import { Box } from '@crossed/ui'; import type { HTMLAttributes } from 'react'; import { Pressable } from 'react-native'; diff --git a/packages/demo/src/primitive/createInput/simple.tsx b/packages/demo/src/primitive/createInput/simple.tsx index 62b4de01..c396e183 100644 --- a/packages/demo/src/primitive/createInput/simple.tsx +++ b/packages/demo/src/primitive/createInput/simple.tsx @@ -1,5 +1,5 @@ import { createInput } from '@crossed/primitive'; -import { styled } from '@crossed/styled/src'; +import { styled } from '@crossed/styled/styled'; import { Button, YBox } from '@crossed/ui'; import { Pressable, Text, TextInput, View } from 'react-native'; diff --git a/packages/demo/src/styled/button/CompoundVariants.native.tsx b/packages/demo/src/styled/button/CompoundVariants.native.tsx index b844ba5f..123d2e7c 100644 --- a/packages/demo/src/styled/button/CompoundVariants.native.tsx +++ b/packages/demo/src/styled/button/CompoundVariants.native.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/CompoundVariants.tsx b/packages/demo/src/styled/button/CompoundVariants.tsx index 31e24b76..12146453 100644 --- a/packages/demo/src/styled/button/CompoundVariants.tsx +++ b/packages/demo/src/styled/button/CompoundVariants.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/DefaultVariants.native.tsx b/packages/demo/src/styled/button/DefaultVariants.native.tsx index ce6b3f57..55e51317 100644 --- a/packages/demo/src/styled/button/DefaultVariants.native.tsx +++ b/packages/demo/src/styled/button/DefaultVariants.native.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/DefaultVariants.tsx b/packages/demo/src/styled/button/DefaultVariants.tsx index fd0784ee..a65f4bc6 100644 --- a/packages/demo/src/styled/button/DefaultVariants.tsx +++ b/packages/demo/src/styled/button/DefaultVariants.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/Extends.native.tsx b/packages/demo/src/styled/button/Extends.native.tsx index 7d2eeade..a46bee53 100644 --- a/packages/demo/src/styled/button/Extends.native.tsx +++ b/packages/demo/src/styled/button/Extends.native.tsx @@ -1,4 +1,5 @@ -import { styled, tw } from '@crossed/styled'; +import { tw } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable, Text, TextInput } from 'react-native'; const ButtonText = styled(Text, { diff --git a/packages/demo/src/styled/button/Extends.tsx b/packages/demo/src/styled/button/Extends.tsx index 5c44351f..f1146111 100644 --- a/packages/demo/src/styled/button/Extends.tsx +++ b/packages/demo/src/styled/button/Extends.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/OnlyBase.native.tsx b/packages/demo/src/styled/button/OnlyBase.native.tsx index 96e90566..268e7676 100644 --- a/packages/demo/src/styled/button/OnlyBase.native.tsx +++ b/packages/demo/src/styled/button/OnlyBase.native.tsx @@ -1,5 +1,6 @@ -import { type GetProps, styled } from '@crossed/styled'; -import { Pressable } from 'react-native'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; +import { Pressable, Text } from 'react-native'; const Button = styled(Pressable, { className: [ @@ -16,5 +17,9 @@ const Button = styled(Pressable, { type ButtonProps = GetProps; export const ButtonOnlyBaseNativeDemo = (props: ButtonProps) => { - return ; + return ( + + ); }; diff --git a/packages/demo/src/styled/button/OnlyBase.tsx b/packages/demo/src/styled/button/OnlyBase.tsx index c886e2d2..c8d1bfd9 100644 --- a/packages/demo/src/styled/button/OnlyBase.tsx +++ b/packages/demo/src/styled/button/OnlyBase.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/PropsProperty.tsx b/packages/demo/src/styled/button/PropsProperty.tsx index 4c974efd..3436da2b 100644 --- a/packages/demo/src/styled/button/PropsProperty.tsx +++ b/packages/demo/src/styled/button/PropsProperty.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { TextInput } from 'react-native'; const Input = styled(TextInput, { diff --git a/packages/demo/src/styled/button/State.native.tsx b/packages/demo/src/styled/button/State.native.tsx index 1d8337b4..47c62eb8 100644 --- a/packages/demo/src/styled/button/State.native.tsx +++ b/packages/demo/src/styled/button/State.native.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/State.tsx b/packages/demo/src/styled/button/State.tsx index ac2d6043..bab9eedf 100644 --- a/packages/demo/src/styled/button/State.tsx +++ b/packages/demo/src/styled/button/State.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { memo, type PropsWithChildren } from 'react'; import { Pressable } from 'react-native'; diff --git a/packages/demo/src/styled/button/Variants.native.tsx b/packages/demo/src/styled/button/Variants.native.tsx index 539fa933..445a78c3 100644 --- a/packages/demo/src/styled/button/Variants.native.tsx +++ b/packages/demo/src/styled/button/Variants.native.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/Variants.tsx b/packages/demo/src/styled/button/Variants.tsx index 14bc21bc..67e6b218 100644 --- a/packages/demo/src/styled/button/Variants.tsx +++ b/packages/demo/src/styled/button/Variants.tsx @@ -1,4 +1,5 @@ -import { type GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/colorMode.tsx b/packages/demo/src/styled/colorMode.tsx index 3ba939e9..83389d9e 100644 --- a/packages/demo/src/styled/colorMode.tsx +++ b/packages/demo/src/styled/colorMode.tsx @@ -1,4 +1,5 @@ -import { CrossedTheme, styled, useCrossedTheme } from '@crossed/styled'; +import { CrossedTheme, useCrossedTheme } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; const ButtonWithoutVariant = styled('button', { 'className': ['px-2 py-1'], diff --git a/packages/demo/src/ui/forms/Select.tsx b/packages/demo/src/ui/forms/Select.tsx index 2cfca871..93e60979 100644 --- a/packages/demo/src/ui/forms/Select.tsx +++ b/packages/demo/src/ui/forms/Select.tsx @@ -1,6 +1,6 @@ import { Select } from '@crossed/ui'; import type { Props } from '../../props'; -import { styled } from '@crossed/styled/src'; +import { styled } from '@crossed/styled/styled'; import { TextInput } from 'react-native'; const RootFrame = styled(TextInput, { diff --git a/packages/primitive/package.json b/packages/primitive/package.json index 44081906..d3d80f74 100644 --- a/packages/primitive/package.json +++ b/packages/primitive/package.json @@ -8,6 +8,30 @@ "react-native": "src/index", "source": "src/index", "typings": "lib/typescript/index.d.ts", + "exports": { + ".": { + "import": "./lib/module/index.js", + "require": "./lib/commonjs/index.js" + }, + "./createButton": { + "import": "./lib/module/Button/index.js", + "require": "./lib/commonjs/Button/index.js" + }, + "./createBadge": { + "import": "./lib/module/Badge/index.js", + "require": "./lib/commonjs/Badge/index.js" + } + }, + "typesVersions": { + "*": { + "createButton": [ + "./lib/typescript/Button/index.d.js" + ], + "createBadge": [ + "./lib/typescript/Badge/index.d.js" + ] + } + }, "scripts": { "release": "release-it", "clean": "rm -rf lib", diff --git a/packages/styled/package.json b/packages/styled/package.json index bb2b9761..d7a4f78d 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -8,6 +8,23 @@ "react-native": "src/index", "source": "src/index", "typings": "lib/typescript/index.d.ts", + "exports": { + ".": { + "import": "./lib/module/index.js", + "require": "./lib/commonjs/index.js" + }, + "./styled": { + "import": "./lib/module/styled.js", + "require": "./lib/commonjs/styled.js" + } + }, + "typesVersions": { + "*": { + "styled": [ + "./lib/typescript/styled.d.js" + ] + } + }, "scripts": { "clean": "rm -rf lib", "watch": "crossed-build --watch --project-path ./tsconfig.build.json", diff --git a/packages/styled/src/index.ts b/packages/styled/src/index.ts index deeabb2e..c67b69f2 100644 --- a/packages/styled/src/index.ts +++ b/packages/styled/src/index.ts @@ -1,6 +1,5 @@ export * from './crossed/types'; export * from './styleSheet'; -export * from './styled'; export * from './types'; export { clsx as cx } from 'clsx'; export { twMerge as merge } from 'tailwind-merge'; diff --git a/packages/styled/src/styled.tsx b/packages/styled/src/styled.tsx index 58598613..c1887bcd 100644 --- a/packages/styled/src/styled.tsx +++ b/packages/styled/src/styled.tsx @@ -111,7 +111,13 @@ export function styled< }; const NewComponent = forwardRef>( - function CrossedStyledComponent(props, ref) { + function CrossedStyledComponent(originalProps, ref) { + const { + hoverTheme = true, + activeTheme = true, + focusTheme = true, + ...props + } = originalProps; const { theme } = useCrossedTheme(); const [active, setActive] = useUncontrolled({ @@ -139,9 +145,9 @@ export function styled< props, { disabled: props.disabled, - active, - hover, - focus, + active: hoverTheme ? active : false, + hover: activeTheme ? hover : false, + focus: focusTheme ? focus : false, }, theme ); diff --git a/packages/ui/src/animations/Animate.tsx b/packages/ui/src/animations/Animate.tsx index 550ba526..33acfd80 100644 --- a/packages/ui/src/animations/Animate.tsx +++ b/packages/ui/src/animations/Animate.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { View } from 'react-native'; export const Animate = styled(View, { className: [] }); diff --git a/packages/ui/src/display/Badge.tsx b/packages/ui/src/display/Badge.tsx index b8ce5eff..bd59af14 100644 --- a/packages/ui/src/display/Badge.tsx +++ b/packages/ui/src/display/Badge.tsx @@ -1,5 +1,5 @@ -import { createBadge } from '@crossed/primitive'; -import { styled } from '@crossed/styled'; +import { createBadge } from '@crossed/primitive/createBadge'; +import { styled } from '@crossed/styled/styled'; import { View } from 'react-native'; import { Text } from '../typography/Text'; import { Text as NText } from 'react-native'; @@ -40,10 +40,9 @@ const BadgeTextFrame = (props: BadgeTextStyledProps) => { }; const BadgeFrame = styled(View, { - 'className': ['border'], - ':hover': { className: ['bg-transparent'] }, - 'extends': ButtonFrame.styles, - 'variants': { + className: ['border'], + extends: ButtonFrame.styles, + variants: { size: { xs: { className: ['px-1', 'py-px'] }, sm: { className: ['px-1', 'py-px'] }, @@ -78,7 +77,12 @@ const Badge = createBadge({ size={size} variant={props.variant ?? 'outlined'} > - + {children ?? {text}} diff --git a/packages/ui/src/display/List.tsx b/packages/ui/src/display/List.tsx index 9989372a..45cba2a9 100644 --- a/packages/ui/src/display/List.tsx +++ b/packages/ui/src/display/List.tsx @@ -1,5 +1,6 @@ import { createList } from '@crossed/primitive'; -import { GetProps, styled, tw, useCrossedTheme } from '@crossed/styled'; +import { GetProps, tw, useCrossedTheme } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Fragment, ReactElement, ReactNode, cloneElement, useId } from 'react'; import { Pressable, Text, View } from 'react-native'; import { Divider } from '../layout/Divider'; diff --git a/packages/ui/src/forms/Button.tsx b/packages/ui/src/forms/Button.tsx index fc6c344f..daa4fed0 100644 --- a/packages/ui/src/forms/Button.tsx +++ b/packages/ui/src/forms/Button.tsx @@ -1,5 +1,6 @@ 'use client'; -import { styled, tw, type GetProps, useCrossedTheme } from '@crossed/styled'; +import { tw, type GetProps, useCrossedTheme } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { createButton } from '@crossed/primitive'; import { Pressable, Text, View } from 'react-native'; import { Fragment, ReactNode, cloneElement } from 'react'; diff --git a/packages/ui/src/forms/Checkbox.tsx b/packages/ui/src/forms/Checkbox.tsx index 060d4d0e..3005b3ae 100644 --- a/packages/ui/src/forms/Checkbox.tsx +++ b/packages/ui/src/forms/Checkbox.tsx @@ -5,7 +5,8 @@ import { useUncontrolled, withStaticProperties, } from '@crossed/core'; -import { styled, cx, tw } from '@crossed/styled'; +import { cx, tw } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { Label } from './Label'; import { useRef, type PropsWithChildren, cloneElement } from 'react'; import { UilCheck } from '@crossed/unicons'; diff --git a/packages/ui/src/forms/Input.tsx b/packages/ui/src/forms/Input.tsx index 45b3f310..e2f6218a 100644 --- a/packages/ui/src/forms/Input.tsx +++ b/packages/ui/src/forms/Input.tsx @@ -1,6 +1,7 @@ 'use client'; import { createScope, withStaticProperties, GetProps } from '@crossed/core'; -import { styled, tw } from '@crossed/styled'; +import { tw } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { cloneElement, forwardRef, diff --git a/packages/ui/src/forms/Label.tsx b/packages/ui/src/forms/Label.tsx index 614c625c..31b9519d 100644 --- a/packages/ui/src/forms/Label.tsx +++ b/packages/ui/src/forms/Label.tsx @@ -1,7 +1,8 @@ import { createLabel } from '@crossed/primitive'; import { Text } from 'react-native'; import { Box } from '../layout/Box'; -import { GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; const LabelTextFrame = styled(Text, { 'className': ['font-medium'], diff --git a/packages/ui/src/forms/Select/index.tsx b/packages/ui/src/forms/Select/index.tsx index 741b4210..7695116e 100644 --- a/packages/ui/src/forms/Select/index.tsx +++ b/packages/ui/src/forms/Select/index.tsx @@ -1,6 +1,7 @@ 'use client'; import { composeRefs, createScope } from '@crossed/core'; -import { GetProps, merge, styled } from '@crossed/styled'; +import { GetProps, merge } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { HtmlHTMLAttributes, PropsWithChildren, diff --git a/packages/ui/src/forms/Switch.tsx b/packages/ui/src/forms/Switch.tsx index 38433651..dc2bcee5 100644 --- a/packages/ui/src/forms/Switch.tsx +++ b/packages/ui/src/forms/Switch.tsx @@ -6,7 +6,7 @@ import { useUncontrolled, withStaticProperties, } from '@crossed/core'; -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import type { colorVariants, sizeVariants } from '../variants'; import { Label } from './Label'; import { Platform, Pressable, View } from 'react-native'; diff --git a/packages/ui/src/layout/Box.ts b/packages/ui/src/layout/Box.ts index 5f14f29b..d3845db2 100644 --- a/packages/ui/src/layout/Box.ts +++ b/packages/ui/src/layout/Box.ts @@ -1,7 +1,8 @@ 'use client'; import { View } from 'react-native'; -import { GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { spaceVariants } from '../variants'; export const Box = styled(View, { diff --git a/packages/ui/src/layout/Divider.ts b/packages/ui/src/layout/Divider.ts index b304c774..7e3cde94 100644 --- a/packages/ui/src/layout/Divider.ts +++ b/packages/ui/src/layout/Divider.ts @@ -1,7 +1,7 @@ 'use client'; import { View } from 'react-native'; -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; export const Divider = styled(View, { 'className': ['flex'], diff --git a/packages/ui/src/layout/XBox.ts b/packages/ui/src/layout/XBox.ts index 432fe9ad..a36b5752 100644 --- a/packages/ui/src/layout/XBox.ts +++ b/packages/ui/src/layout/XBox.ts @@ -1,7 +1,7 @@ 'use client'; import { View } from 'react-native'; -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { spaceVariants } from '../variants/space'; export const XBox = styled(View, { diff --git a/packages/ui/src/layout/YBox.ts b/packages/ui/src/layout/YBox.ts index bfd47702..0d8792f3 100644 --- a/packages/ui/src/layout/YBox.ts +++ b/packages/ui/src/layout/YBox.ts @@ -1,7 +1,8 @@ 'use client'; import { View } from 'react-native'; -import { GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { spaceVariants } from '../variants/space'; export const YBox = styled(View, { diff --git a/packages/ui/src/typography/Heading.ts b/packages/ui/src/typography/Heading.ts index f22c7797..bb14a9a8 100644 --- a/packages/ui/src/typography/Heading.ts +++ b/packages/ui/src/typography/Heading.ts @@ -1,7 +1,7 @@ 'use client'; import { Text as TextNative } from 'react-native'; -import { styled } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; import { Text } from './Text'; diff --git a/packages/ui/src/typography/Text.ts b/packages/ui/src/typography/Text.ts index 091e4734..ed42c978 100644 --- a/packages/ui/src/typography/Text.ts +++ b/packages/ui/src/typography/Text.ts @@ -1,7 +1,8 @@ 'use client'; import { Text as TextNative } from 'react-native'; -import { GetProps, styled } from '@crossed/styled'; +import type { GetProps } from '@crossed/styled'; +import { styled } from '@crossed/styled/styled'; export const Text = styled(TextNative, { variants: { From a9cbf38c3f5a239d3e8c15c35c75a1da3f0f37af Mon Sep 17 00:00:00 2001 From: Lionel Bertrand Date: Wed, 15 Nov 2023 12:39:22 +0100 Subject: [PATCH 5/7] remove alias --- apps/docs/pages/styled/colorMode.mdx | 2 +- apps/docs/pages/styled/installation.mdx | 6 +++--- apps/expo/app/(tabs)/index.tsx | 2 +- packages/demo/src/core/styled-html.tsx | 2 +- packages/demo/src/core/styled.tsx | 2 +- packages/demo/src/primitive/createButton/group.tsx | 2 +- packages/demo/src/primitive/createButton/simple.native.tsx | 2 +- packages/demo/src/primitive/createButton/simple.tsx | 2 +- packages/demo/src/primitive/createInput/simple.tsx | 2 +- packages/demo/src/styled/button/CompoundVariants.native.tsx | 2 +- packages/demo/src/styled/button/CompoundVariants.tsx | 2 +- packages/demo/src/styled/button/DefaultVariants.native.tsx | 2 +- packages/demo/src/styled/button/DefaultVariants.tsx | 2 +- packages/demo/src/styled/button/Extends.native.tsx | 2 +- packages/demo/src/styled/button/Extends.tsx | 2 +- packages/demo/src/styled/button/OnlyBase.native.tsx | 2 +- packages/demo/src/styled/button/OnlyBase.tsx | 2 +- packages/demo/src/styled/button/PropsProperty.tsx | 2 +- packages/demo/src/styled/button/State.native.tsx | 2 +- packages/demo/src/styled/button/State.tsx | 2 +- packages/demo/src/styled/button/Variants.native.tsx | 2 +- packages/demo/src/styled/button/Variants.tsx | 2 +- packages/demo/src/styled/colorMode.tsx | 2 +- packages/demo/src/ui/forms/Select.tsx | 2 +- packages/ui/src/animations/Animate.tsx | 2 +- packages/ui/src/display/Badge.tsx | 2 +- packages/ui/src/display/List.tsx | 2 +- packages/ui/src/forms/Button.tsx | 2 +- packages/ui/src/forms/Checkbox.tsx | 2 +- packages/ui/src/forms/Input.tsx | 2 +- packages/ui/src/forms/Label.tsx | 2 +- packages/ui/src/forms/Select/index.tsx | 2 +- packages/ui/src/forms/Switch.tsx | 2 +- packages/ui/src/layout/Box.ts | 2 +- packages/ui/src/layout/Divider.ts | 2 +- packages/ui/src/layout/XBox.ts | 2 +- packages/ui/src/layout/YBox.ts | 2 +- packages/ui/src/typography/Heading.ts | 2 +- packages/ui/src/typography/Text.ts | 2 +- 39 files changed, 41 insertions(+), 41 deletions(-) diff --git a/apps/docs/pages/styled/colorMode.mdx b/apps/docs/pages/styled/colorMode.mdx index 212dd344..ffc909a1 100644 --- a/apps/docs/pages/styled/colorMode.mdx +++ b/apps/docs/pages/styled/colorMode.mdx @@ -25,7 +25,7 @@ export const getStaticProps = async (e) => { You can specify color mode for each component styled ```typescript -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; export const Button = styled('button', { 'className': ['px-2 py-1'], diff --git a/apps/docs/pages/styled/installation.mdx b/apps/docs/pages/styled/installation.mdx index c90b029d..aacc8395 100644 --- a/apps/docs/pages/styled/installation.mdx +++ b/apps/docs/pages/styled/installation.mdx @@ -1,5 +1,5 @@ import { Tabs } from 'components/Tabs'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Box } from '@crossed/ui'; import { Steps } from 'nextra/components'; @@ -95,7 +95,7 @@ module.exports = nextConfig; ```typescript -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; export const Button = styled('button', { 'className': [ @@ -171,7 +171,7 @@ See [documentation](/styled/babel) ```typescript -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; export const Button = styled('button', { 'className': [ diff --git a/apps/expo/app/(tabs)/index.tsx b/apps/expo/app/(tabs)/index.tsx index 728b914f..2f311d82 100644 --- a/apps/expo/app/(tabs)/index.tsx +++ b/apps/expo/app/(tabs)/index.tsx @@ -1,5 +1,5 @@ import { YBox, Heading, Button } from '@crossed/ui'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Text as NText } from 'react-native'; const TextTheme = styled(NText, { diff --git a/packages/demo/src/core/styled-html.tsx b/packages/demo/src/core/styled-html.tsx index 46e97136..ac9fb0cc 100644 --- a/packages/demo/src/core/styled-html.tsx +++ b/packages/demo/src/core/styled-html.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { withStaticProperties } from '@crossed/core'; import type { Props } from '../props'; import { YBox } from '@crossed/ui'; diff --git a/packages/demo/src/core/styled.tsx b/packages/demo/src/core/styled.tsx index 27cdb1b9..1d000ea8 100644 --- a/packages/demo/src/core/styled.tsx +++ b/packages/demo/src/core/styled.tsx @@ -1,5 +1,5 @@ import { Pressable, Text } from 'react-native'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { withStaticProperties } from '@crossed/core'; import type { Props } from '../props'; import { YBox } from '@crossed/ui'; diff --git a/packages/demo/src/primitive/createButton/group.tsx b/packages/demo/src/primitive/createButton/group.tsx index d74f63e4..8fbfe77c 100644 --- a/packages/demo/src/primitive/createButton/group.tsx +++ b/packages/demo/src/primitive/createButton/group.tsx @@ -1,6 +1,6 @@ import { createButton } from '@crossed/primitive'; import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { createScope } from '@crossed/core'; import { YBox } from '@crossed/ui'; import { Pressable, Text, TextProps, View } from 'react-native'; diff --git a/packages/demo/src/primitive/createButton/simple.native.tsx b/packages/demo/src/primitive/createButton/simple.native.tsx index 576314ad..73002efc 100644 --- a/packages/demo/src/primitive/createButton/simple.native.tsx +++ b/packages/demo/src/primitive/createButton/simple.native.tsx @@ -1,5 +1,5 @@ import { createButton } from '@crossed/primitive'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Box } from '@crossed/ui'; import { Pressable, Text, TextProps } from 'react-native'; diff --git a/packages/demo/src/primitive/createButton/simple.tsx b/packages/demo/src/primitive/createButton/simple.tsx index e474dfe1..7baba6cb 100644 --- a/packages/demo/src/primitive/createButton/simple.tsx +++ b/packages/demo/src/primitive/createButton/simple.tsx @@ -1,5 +1,5 @@ import { createButton } from '@crossed/primitive'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Box } from '@crossed/ui'; import type { HTMLAttributes } from 'react'; import { Pressable } from 'react-native'; diff --git a/packages/demo/src/primitive/createInput/simple.tsx b/packages/demo/src/primitive/createInput/simple.tsx index c396e183..8334a6b4 100644 --- a/packages/demo/src/primitive/createInput/simple.tsx +++ b/packages/demo/src/primitive/createInput/simple.tsx @@ -1,5 +1,5 @@ import { createInput } from '@crossed/primitive'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Button, YBox } from '@crossed/ui'; import { Pressable, Text, TextInput, View } from 'react-native'; diff --git a/packages/demo/src/styled/button/CompoundVariants.native.tsx b/packages/demo/src/styled/button/CompoundVariants.native.tsx index 123d2e7c..224bf63d 100644 --- a/packages/demo/src/styled/button/CompoundVariants.native.tsx +++ b/packages/demo/src/styled/button/CompoundVariants.native.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/CompoundVariants.tsx b/packages/demo/src/styled/button/CompoundVariants.tsx index 12146453..16150da3 100644 --- a/packages/demo/src/styled/button/CompoundVariants.tsx +++ b/packages/demo/src/styled/button/CompoundVariants.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/DefaultVariants.native.tsx b/packages/demo/src/styled/button/DefaultVariants.native.tsx index 55e51317..19742150 100644 --- a/packages/demo/src/styled/button/DefaultVariants.native.tsx +++ b/packages/demo/src/styled/button/DefaultVariants.native.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/DefaultVariants.tsx b/packages/demo/src/styled/button/DefaultVariants.tsx index a65f4bc6..fd748fa3 100644 --- a/packages/demo/src/styled/button/DefaultVariants.tsx +++ b/packages/demo/src/styled/button/DefaultVariants.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/Extends.native.tsx b/packages/demo/src/styled/button/Extends.native.tsx index a46bee53..cb204961 100644 --- a/packages/demo/src/styled/button/Extends.native.tsx +++ b/packages/demo/src/styled/button/Extends.native.tsx @@ -1,5 +1,5 @@ import { tw } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable, Text, TextInput } from 'react-native'; const ButtonText = styled(Text, { diff --git a/packages/demo/src/styled/button/Extends.tsx b/packages/demo/src/styled/button/Extends.tsx index f1146111..5c44351f 100644 --- a/packages/demo/src/styled/button/Extends.tsx +++ b/packages/demo/src/styled/button/Extends.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/OnlyBase.native.tsx b/packages/demo/src/styled/button/OnlyBase.native.tsx index 268e7676..f7780001 100644 --- a/packages/demo/src/styled/button/OnlyBase.native.tsx +++ b/packages/demo/src/styled/button/OnlyBase.native.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable, Text } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/OnlyBase.tsx b/packages/demo/src/styled/button/OnlyBase.tsx index c8d1bfd9..8fe049d1 100644 --- a/packages/demo/src/styled/button/OnlyBase.tsx +++ b/packages/demo/src/styled/button/OnlyBase.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/PropsProperty.tsx b/packages/demo/src/styled/button/PropsProperty.tsx index 3436da2b..4c974efd 100644 --- a/packages/demo/src/styled/button/PropsProperty.tsx +++ b/packages/demo/src/styled/button/PropsProperty.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { TextInput } from 'react-native'; const Input = styled(TextInput, { diff --git a/packages/demo/src/styled/button/State.native.tsx b/packages/demo/src/styled/button/State.native.tsx index 47c62eb8..b5853370 100644 --- a/packages/demo/src/styled/button/State.native.tsx +++ b/packages/demo/src/styled/button/State.native.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/State.tsx b/packages/demo/src/styled/button/State.tsx index bab9eedf..ac2d6043 100644 --- a/packages/demo/src/styled/button/State.tsx +++ b/packages/demo/src/styled/button/State.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { memo, type PropsWithChildren } from 'react'; import { Pressable } from 'react-native'; diff --git a/packages/demo/src/styled/button/Variants.native.tsx b/packages/demo/src/styled/button/Variants.native.tsx index 445a78c3..6b3ec091 100644 --- a/packages/demo/src/styled/button/Variants.native.tsx +++ b/packages/demo/src/styled/button/Variants.native.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/button/Variants.tsx b/packages/demo/src/styled/button/Variants.tsx index 67e6b218..2fa94895 100644 --- a/packages/demo/src/styled/button/Variants.tsx +++ b/packages/demo/src/styled/button/Variants.tsx @@ -1,5 +1,5 @@ import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Pressable } from 'react-native'; const Button = styled(Pressable, { diff --git a/packages/demo/src/styled/colorMode.tsx b/packages/demo/src/styled/colorMode.tsx index 83389d9e..e088fa8f 100644 --- a/packages/demo/src/styled/colorMode.tsx +++ b/packages/demo/src/styled/colorMode.tsx @@ -1,5 +1,5 @@ import { CrossedTheme, useCrossedTheme } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; const ButtonWithoutVariant = styled('button', { 'className': ['px-2 py-1'], diff --git a/packages/demo/src/ui/forms/Select.tsx b/packages/demo/src/ui/forms/Select.tsx index 93e60979..3c3062cf 100644 --- a/packages/demo/src/ui/forms/Select.tsx +++ b/packages/demo/src/ui/forms/Select.tsx @@ -1,6 +1,6 @@ import { Select } from '@crossed/ui'; import type { Props } from '../../props'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { TextInput } from 'react-native'; const RootFrame = styled(TextInput, { diff --git a/packages/ui/src/animations/Animate.tsx b/packages/ui/src/animations/Animate.tsx index 33acfd80..550ba526 100644 --- a/packages/ui/src/animations/Animate.tsx +++ b/packages/ui/src/animations/Animate.tsx @@ -1,4 +1,4 @@ -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { View } from 'react-native'; export const Animate = styled(View, { className: [] }); diff --git a/packages/ui/src/display/Badge.tsx b/packages/ui/src/display/Badge.tsx index bd59af14..8cb2dcae 100644 --- a/packages/ui/src/display/Badge.tsx +++ b/packages/ui/src/display/Badge.tsx @@ -1,5 +1,5 @@ import { createBadge } from '@crossed/primitive/createBadge'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { View } from 'react-native'; import { Text } from '../typography/Text'; import { Text as NText } from 'react-native'; diff --git a/packages/ui/src/display/List.tsx b/packages/ui/src/display/List.tsx index 45cba2a9..5715ad97 100644 --- a/packages/ui/src/display/List.tsx +++ b/packages/ui/src/display/List.tsx @@ -1,6 +1,6 @@ import { createList } from '@crossed/primitive'; import { GetProps, tw, useCrossedTheme } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Fragment, ReactElement, ReactNode, cloneElement, useId } from 'react'; import { Pressable, Text, View } from 'react-native'; import { Divider } from '../layout/Divider'; diff --git a/packages/ui/src/forms/Button.tsx b/packages/ui/src/forms/Button.tsx index daa4fed0..f7cf38f6 100644 --- a/packages/ui/src/forms/Button.tsx +++ b/packages/ui/src/forms/Button.tsx @@ -1,6 +1,6 @@ 'use client'; import { tw, type GetProps, useCrossedTheme } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { createButton } from '@crossed/primitive'; import { Pressable, Text, View } from 'react-native'; import { Fragment, ReactNode, cloneElement } from 'react'; diff --git a/packages/ui/src/forms/Checkbox.tsx b/packages/ui/src/forms/Checkbox.tsx index 3005b3ae..82d0ee90 100644 --- a/packages/ui/src/forms/Checkbox.tsx +++ b/packages/ui/src/forms/Checkbox.tsx @@ -6,7 +6,7 @@ import { withStaticProperties, } from '@crossed/core'; import { cx, tw } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { Label } from './Label'; import { useRef, type PropsWithChildren, cloneElement } from 'react'; import { UilCheck } from '@crossed/unicons'; diff --git a/packages/ui/src/forms/Input.tsx b/packages/ui/src/forms/Input.tsx index e2f6218a..415ebf8e 100644 --- a/packages/ui/src/forms/Input.tsx +++ b/packages/ui/src/forms/Input.tsx @@ -1,7 +1,7 @@ 'use client'; import { createScope, withStaticProperties, GetProps } from '@crossed/core'; import { tw } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { cloneElement, forwardRef, diff --git a/packages/ui/src/forms/Label.tsx b/packages/ui/src/forms/Label.tsx index 31b9519d..58d0bcb8 100644 --- a/packages/ui/src/forms/Label.tsx +++ b/packages/ui/src/forms/Label.tsx @@ -2,7 +2,7 @@ import { createLabel } from '@crossed/primitive'; import { Text } from 'react-native'; import { Box } from '../layout/Box'; import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; const LabelTextFrame = styled(Text, { 'className': ['font-medium'], diff --git a/packages/ui/src/forms/Select/index.tsx b/packages/ui/src/forms/Select/index.tsx index 7695116e..bcfbc9b9 100644 --- a/packages/ui/src/forms/Select/index.tsx +++ b/packages/ui/src/forms/Select/index.tsx @@ -1,7 +1,7 @@ 'use client'; import { composeRefs, createScope } from '@crossed/core'; import { GetProps, merge } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { HtmlHTMLAttributes, PropsWithChildren, diff --git a/packages/ui/src/forms/Switch.tsx b/packages/ui/src/forms/Switch.tsx index dc2bcee5..38433651 100644 --- a/packages/ui/src/forms/Switch.tsx +++ b/packages/ui/src/forms/Switch.tsx @@ -6,7 +6,7 @@ import { useUncontrolled, withStaticProperties, } from '@crossed/core'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import type { colorVariants, sizeVariants } from '../variants'; import { Label } from './Label'; import { Platform, Pressable, View } from 'react-native'; diff --git a/packages/ui/src/layout/Box.ts b/packages/ui/src/layout/Box.ts index d3845db2..ab8e20df 100644 --- a/packages/ui/src/layout/Box.ts +++ b/packages/ui/src/layout/Box.ts @@ -2,7 +2,7 @@ import { View } from 'react-native'; import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { spaceVariants } from '../variants'; export const Box = styled(View, { diff --git a/packages/ui/src/layout/Divider.ts b/packages/ui/src/layout/Divider.ts index 7e3cde94..b304c774 100644 --- a/packages/ui/src/layout/Divider.ts +++ b/packages/ui/src/layout/Divider.ts @@ -1,7 +1,7 @@ 'use client'; import { View } from 'react-native'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; export const Divider = styled(View, { 'className': ['flex'], diff --git a/packages/ui/src/layout/XBox.ts b/packages/ui/src/layout/XBox.ts index a36b5752..432fe9ad 100644 --- a/packages/ui/src/layout/XBox.ts +++ b/packages/ui/src/layout/XBox.ts @@ -1,7 +1,7 @@ 'use client'; import { View } from 'react-native'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { spaceVariants } from '../variants/space'; export const XBox = styled(View, { diff --git a/packages/ui/src/layout/YBox.ts b/packages/ui/src/layout/YBox.ts index 0d8792f3..a9b0cfe0 100644 --- a/packages/ui/src/layout/YBox.ts +++ b/packages/ui/src/layout/YBox.ts @@ -2,7 +2,7 @@ import { View } from 'react-native'; import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { spaceVariants } from '../variants/space'; export const YBox = styled(View, { diff --git a/packages/ui/src/typography/Heading.ts b/packages/ui/src/typography/Heading.ts index bb14a9a8..f22c7797 100644 --- a/packages/ui/src/typography/Heading.ts +++ b/packages/ui/src/typography/Heading.ts @@ -1,7 +1,7 @@ 'use client'; import { Text as TextNative } from 'react-native'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; import { Text } from './Text'; diff --git a/packages/ui/src/typography/Text.ts b/packages/ui/src/typography/Text.ts index ed42c978..cbc09012 100644 --- a/packages/ui/src/typography/Text.ts +++ b/packages/ui/src/typography/Text.ts @@ -2,7 +2,7 @@ import { Text as TextNative } from 'react-native'; import type { GetProps } from '@crossed/styled'; -import { styled } from '@crossed/styled/styled'; +import { styled } from '@crossed/styled'; export const Text = styled(TextNative, { variants: { From 8866deb13476d2d5c3b2462c07334759becaa7b5 Mon Sep 17 00:00:00 2001 From: Lionel Bertrand Date: Fri, 17 Nov 2023 07:13:37 +0100 Subject: [PATCH 6/7] some clean --- apps/docs/pages/_app.mdx | 2 +- apps/docs/pages/primitive/createLabel.mdx | 12 +--------- apps/docs/tailwind.config.js | 5 ++-- packages/core/src/types.ts | 6 ++++- packages/demo/src/ui/typography/text.tsx | 10 ++------ packages/primitive/package.json | 24 ------------------- packages/primitive/src/Button/Button.tsx | 9 +++---- packages/primitive/src/Button/ButtonIcon.tsx | 4 +--- packages/primitive/src/Button/ButtonText.tsx | 18 +++++++++----- packages/primitive/src/Button/context.ts | 8 ++++++- packages/primitive/src/Button/index.tsx | 25 ++++++++++++++------ packages/styled/package.json | 17 ------------- packages/styled/src/index.ts | 1 + packages/styled/src/styled.tsx | 16 ++++--------- packages/ui/src/display/Badge.tsx | 2 +- 15 files changed, 60 insertions(+), 99 deletions(-) diff --git a/apps/docs/pages/_app.mdx b/apps/docs/pages/_app.mdx index cd560646..24ec91aa 100644 --- a/apps/docs/pages/_app.mdx +++ b/apps/docs/pages/_app.mdx @@ -1,6 +1,6 @@ import 'raf/polyfill'; import '../styles/global.css'; -import { CrossedTheme } from '@crossed/ui'; +import { CrossedTheme } from '@crossed/ui/src/Provider'; import { PortalProvider } from '@gorhom/portal'; export default function App({ Component, pageProps }) { diff --git a/apps/docs/pages/primitive/createLabel.mdx b/apps/docs/pages/primitive/createLabel.mdx index b919434c..b7846cd0 100644 --- a/apps/docs/pages/primitive/createLabel.mdx +++ b/apps/docs/pages/primitive/createLabel.mdx @@ -1,5 +1,4 @@ import { - CreateLabelSimpleDemo, CreateLabelSimpleNativeDemo, } from '@crossed/demo'; import { CodeDemo } from 'components/CodeDemo'; @@ -11,8 +10,6 @@ export const getStaticProps = async (e) => { return { props: { ssg: { - simple: (await getStaticDemo('primitive/createLabel/simple')(e)).props - .ssg.code, simpleNative: ( await getStaticDemo('primitive/createLabel/simple.native')(e) ).props.ssg.code, @@ -26,14 +23,7 @@ export const getStaticProps = async (e) => { ## simple - - - - - - - - + ```tsx diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js index be77c7cf..2201effe 100644 --- a/apps/docs/tailwind.config.js +++ b/apps/docs/tailwind.config.js @@ -7,8 +7,9 @@ module.exports = { content: [ './pages/**/*.{js,jsx,ts,tsx,md,mdx}', './components/**/*.{js,jsx,ts,tsx,md,mdx}', - './node_modules/@crossed/demo/lib/**/*.{js,jsx,ts,tsx,md,mdx}', - './node_modules/@crossed/ui/lib/**/*.{js,jsx,ts,tsx,md,mdx}', + './node_modules/@crossed/demo/src/**/*.{js,jsx,ts,tsx,md,mdx}', + './node_modules/@crossed/ui/src/**/*.{js,jsx,ts,tsx,md,mdx}', + './node_modules/@crossed/primitive/src/**/*.{js,jsx,ts,tsx,md,mdx}', './theme.config.tsx', ], theme: { diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 11b9c840..6d451ea9 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -96,7 +96,11 @@ export type StyledComponent< E extends StylesFunctionUndefined

> = ForwardRefExoticComponent< NewComponentProps & RefAttributes -> & { styles: StylesFunction & PropsFromExtends> }; +> & { + styles: StylesFunction< + Omit, keyof ConfigVariants> & Props + >; +}; export type NewComponentProps< T extends ConfigSchemaUndefined

, diff --git a/packages/demo/src/ui/typography/text.tsx b/packages/demo/src/ui/typography/text.tsx index 7f3609dc..62c33bb5 100644 --- a/packages/demo/src/ui/typography/text.tsx +++ b/packages/demo/src/ui/typography/text.tsx @@ -1,11 +1,5 @@ import { Text } from '@crossed/ui'; -import React from 'react'; -import type { Props } from '../../props'; -export const TextDemo = ({ weight }: Props) => { - return ( - - Link - - ); +export const TextDemo = () => { + return Link; }; diff --git a/packages/primitive/package.json b/packages/primitive/package.json index d3d80f74..44081906 100644 --- a/packages/primitive/package.json +++ b/packages/primitive/package.json @@ -8,30 +8,6 @@ "react-native": "src/index", "source": "src/index", "typings": "lib/typescript/index.d.ts", - "exports": { - ".": { - "import": "./lib/module/index.js", - "require": "./lib/commonjs/index.js" - }, - "./createButton": { - "import": "./lib/module/Button/index.js", - "require": "./lib/commonjs/Button/index.js" - }, - "./createBadge": { - "import": "./lib/module/Badge/index.js", - "require": "./lib/commonjs/Badge/index.js" - } - }, - "typesVersions": { - "*": { - "createButton": [ - "./lib/typescript/Button/index.d.js" - ], - "createBadge": [ - "./lib/typescript/Badge/index.d.js" - ] - } - }, "scripts": { "release": "release-it", "clean": "rm -rf lib", diff --git a/packages/primitive/src/Button/Button.tsx b/packages/primitive/src/Button/Button.tsx index cfb59866..6d3ef874 100644 --- a/packages/primitive/src/Button/Button.tsx +++ b/packages/primitive/src/Button/Button.tsx @@ -1,20 +1,17 @@ import { ComponentType, forwardRef } from 'react'; import { useContext } from './context'; -import type { RequiredAccessibilityProps } from '../types'; export const createButtonMain = >( StyledButton: ComponentType ) => - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - forwardRef>((props, ref) => { + forwardRef((props, ref) => { const context = useContext(); return ( ); diff --git a/packages/primitive/src/Button/ButtonIcon.tsx b/packages/primitive/src/Button/ButtonIcon.tsx index e040ccb9..97f838ef 100644 --- a/packages/primitive/src/Button/ButtonIcon.tsx +++ b/packages/primitive/src/Button/ButtonIcon.tsx @@ -1,8 +1,6 @@ import { ComponentType, forwardRef } from 'react'; -import { useContext } from './context'; export const createButtonIcon = (StyledIcon: ComponentType) => forwardRef((props, ref) => { - const context = useContext(); - return ; + return ; }); diff --git a/packages/primitive/src/Button/ButtonText.tsx b/packages/primitive/src/Button/ButtonText.tsx index 94da17c9..052c3cf5 100644 --- a/packages/primitive/src/Button/ButtonText.tsx +++ b/packages/primitive/src/Button/ButtonText.tsx @@ -1,8 +1,14 @@ -import { ComponentType, forwardRef } from 'react'; +import { AriaAttributes, ComponentType, forwardRef } from 'react'; import { useContext } from './context'; -export const createButtonText = (StyledText: ComponentType) => - forwardRef((props, ref) => { - const context = useContext(); - return ; - }); +export const createButtonText = < + T extends Record & AriaAttributes +>( + StyledText: ComponentType +) => + forwardRef & { children: string }>( + (props, ref) => { + const context = useContext(); + return ; + } + ); diff --git a/packages/primitive/src/Button/context.ts b/packages/primitive/src/Button/context.ts index f2d557f2..8cfd9d3b 100644 --- a/packages/primitive/src/Button/context.ts +++ b/packages/primitive/src/Button/context.ts @@ -1,3 +1,9 @@ import { createScope } from '@crossed/core'; -export const [Provider, useContext] = createScope({}); +export type ContextButton = { + id: string; +}; + +export const [Provider, useContext] = createScope( + {} as ContextButton +); diff --git a/packages/primitive/src/Button/index.tsx b/packages/primitive/src/Button/index.tsx index ca9948c9..c2e1a96c 100644 --- a/packages/primitive/src/Button/index.tsx +++ b/packages/primitive/src/Button/index.tsx @@ -1,10 +1,11 @@ -import { withStaticProperties } from '@crossed/core'; -import type { ComponentType } from 'react'; +import { GetProps, withStaticProperties } from '@crossed/core'; +import { useId, type ComponentType } from 'react'; import { createButtonMain } from './Button'; import { createButtonText } from './ButtonText'; import { createButtonIcon } from './ButtonIcon'; import type { TextProps as NTextProps } from 'react-native'; import { createButtonGroup } from './ButtonGroup'; +import { Provider } from './context'; export { useContext as useButtonContext } from './context'; export const createButton = < @@ -29,9 +30,19 @@ export const createButton = < ButtonIcon.displayName = 'ButtonIcon'; ButtonGroup.displayName = 'ButtonGroup'; - return withStaticProperties(Button, { - Group: ButtonGroup, - Text: ButtonText, - Icon: ButtonIcon, - }); + return withStaticProperties( + function CreateButton(props: GetProps) { + const id = useId(); + return ( + +