Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Core upgrade xstyled styled components v6 #2436

Closed
wants to merge 15 commits into from
Closed

Core upgrade xstyled styled components v6 #2436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bbd7ff9
chore: upgrade root workspace to styled-components v6.1.8
P1X3L Mar 21, 2024
75bacf8
chore: upgrade styled-components to v6.1.8 in all packages
P1X3L Mar 21, 2024
7e61955
chore: use forked xstyled in root
P1X3L Mar 21, 2024
2681604
chore: upgrade all peer dependencies to use forked xstyled v4.0.0
P1X3L Mar 21, 2024
e008672
chore: change all imports to use forked xstyled
P1X3L Mar 25, 2024
8cdad2e
chore: use tagBox format to better filter props that end on dom
P1X3L Mar 25, 2024
c49ae08
fix: tests back on tracks
P1X3L Mar 25, 2024
6ea36db
fix: ts error of shape component
P1X3L Mar 25, 2024
a6145ac
fix: welcome font being cut on heading level with lines prop set
P1X3L Mar 26, 2024
467256a
fix: ts errors
P1X3L Mar 27, 2024
6c3c57b
fix: remove unused deps for deps-check script
P1X3L Mar 27, 2024
ccac996
fix: put system override on text styles
P1X3L Mar 27, 2024
9e2fa32
v5.13.3-alpha.0
P1X3L Mar 27, 2024
9fa9a04
v5.13.3-alpha.1
P1X3L Mar 27, 2024
ab2bbbc
v5.14.1-alpha.0
P1X3L Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Here you'll find all the core components you need to create a delightful webapp.
1 - Install the **peer dependencies** listed below:

```bash
yarn add @xstyled/styled-components react styled-components
yarn add @wttj/xstyled-styled-components react styled-components
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it public ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not yet but it's will be discuss tomorrow :)

```

2 - Install the the **core** component and any other components you need for your webapp e.g. if you need just a button…
Expand Down
8 changes: 4 additions & 4 deletions docs/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ module.exports = {
{
ssr: true,
topLevelImportPaths: [
'@xstyled/styled-components',
'@xstyled/styled-components/no-tags',
'@xstyled/styled-components/native',
'@xstyled/styled-components/primitives',
'@wttj/xstyled-styled-components',
'@wttj/xstyled-styled-components/no-tags',
'@wttj/xstyled-styled-components/native',
'@wttj/xstyled-styled-components/primitives',
],
},
],
Expand Down
2 changes: 1 addition & 1 deletion docs/components/Colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { withTheme } from '@xstyled/styled-components'
import { withTheme } from '@wttj/xstyled-styled-components'
import { Card } from '@welcome-ui/card'
import { Box } from '@welcome-ui/box'
import { Grid } from '@welcome-ui/grid'
Expand Down
8 changes: 4 additions & 4 deletions docs/components/ComponentsList/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import styled, { css, th } from '@xstyled/styled-components'
import styled, { css, th } from '@wttj/xstyled-styled-components'
import { Box } from '@welcome-ui/box'
import { Link } from '@welcome-ui/link'

export const Ul = styled.ul`
export const Ul = styled.ulBox`
margin: 0;
padding: 0;
list-style: none;
`

export const Li = styled.li`
export const Li = styled.liBox`
a {
display: block;
}
`

export const MainTitle = styled(Box)`
export const MainTitle = styled.divBox`
${th('texts.subtitle-sm')};
text-transform: uppercase;
color: dark-300;
Expand Down
2 changes: 1 addition & 1 deletion docs/components/GlobalStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { defaultFieldStyles } from '@welcome-ui/utils'
import { createGlobalStyle, th } from '@xstyled/styled-components'
import { createGlobalStyle, th } from '@wttj/xstyled-styled-components'

export const GlobalStyle = createGlobalStyle`
/* ALGOLIA DOCSEARCH */
Expand Down
6 changes: 3 additions & 3 deletions docs/components/Header/NavBar/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled, { css, system, th } from '@xstyled/styled-components'
import styled, { css, system, th } from '@wttj/xstyled-styled-components'

export const NavBar = styled.ul`
export const NavBar = styled.ulBox`
display: inline-flex;
margin: 0;
padding: 0;
Expand All @@ -26,7 +26,7 @@ const activeItem = css`
}
`

export const Item = styled.a(
export const Item = styled.aBox(
({ isActive }) => css`
${th('texts.subtitle-md')};
text-transform: uppercase;
Expand Down
4 changes: 2 additions & 2 deletions docs/components/Header/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import styled, { css } from '@xstyled/styled-components'
import styled, { css } from '@wttj/xstyled-styled-components'
import { Drawer as WUIDrawer } from '@welcome-ui/drawer'

import { Item } from './NavBar/styles'

export const headerHeight = '3.75rem' // 60

export const Header = styled.header(
export const Header = styled.headerBox(
({ variant = 'black' }) => css`
position: sticky;
display: flex;
Expand Down
6 changes: 3 additions & 3 deletions docs/components/IconsList/Item.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Box } from '@welcome-ui/box'
import styled, { css } from '@xstyled/styled-components'
import styled, { css } from '@wttj/xstyled-styled-components'

export const Content = styled(Box)`
export const Content = styled.divBox`
background-color: light-900;
border-color: border;
border-width: sm;
Expand All @@ -13,7 +13,7 @@ export const Content = styled(Box)`
transition: medium;
`

export const Item = styled(Box)(
export const Item = styled.divBox(
({ copied }) => css`
align-items: center;
display: flex;
Expand Down
6 changes: 3 additions & 3 deletions docs/components/Layouts/Docs/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import styled, { th } from '@xstyled/styled-components'
import styled, { th } from '@wttj/xstyled-styled-components'

import { headerHeight } from '../../Header/styles'

const navigationWidth = '16.875rem' // 270

export const Navigation = styled.nav`
export const Navigation = styled.navBox`
display: none;
position: fixed;
width: ${navigationWidth};
Expand All @@ -21,7 +21,7 @@ export const Navigation = styled.nav`
}
`

export const Content = styled.main`
export const Content = styled.mainBox`
width: 100%;
min-height: ${`calc(100vh - ${headerHeight})`};

Expand Down
10 changes: 5 additions & 5 deletions docs/components/Mdx/Code/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import styled, { css, th } from '@xstyled/styled-components'
import styled, { css, th } from '@wttj/xstyled-styled-components'
import { LiveEditor as ReactLiveEditor, LiveError as ReactLiveError } from 'react-live'
import { Box } from '@welcome-ui/box'

export const LiveEditor = styled(Box)`
export const LiveEditor = styled.divBox`
position: relative;
background-color: black;
border: 1px solid ${th('colors.dark-200')};
Expand Down Expand Up @@ -52,21 +52,21 @@ export const LiveError = styled(ReactLiveError)`
margin: sm 0 lg;
`

export const ShowEditor = styled.div`
export const ShowEditor = styled.divBox`
background-color: nude-200;
padding: sm lg;
border-top: 1px solid ${th.color('border')};
`

export const CodeContent = styled.div`
export const CodeContent = styled.divBox`
> * {
&:not(:last-child) {
margin-bottom: lg;
}
}
`

export const CodeContentRow = styled.div`
export const CodeContentRow = styled.divBox`
display: flex;
align-items: center;
margin-bottom: -xs;
Expand Down
6 changes: 2 additions & 4 deletions docs/components/Mdx/Headings/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import styled, { system } from '@xstyled/styled-components'
import styled from '@wttj/xstyled-styled-components'
import { Text } from '@welcome-ui/text'

export const Link = styled.a`
export const Link = styled.aBox`
opacity: 0;
color: primary-600;
text-decoration: none;
transition: medium;
`
export const Title = styled(Text)`
${system};

&:hover {
${Link} {
opacity: 1;
Expand Down
4 changes: 2 additions & 2 deletions docs/components/Mdx/InlineCode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from '@xstyled/styled-components'
import styled from '@wttj/xstyled-styled-components'

export const InlineCode = styled.code`
export const InlineCode = styled.codeBox`
background-color: transparent;
font-family: inherit;
font-size: inherit;
Expand Down
4 changes: 2 additions & 2 deletions docs/components/Mdx/Pagination/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled, { css, th } from '@xstyled/styled-components'
import styled, { css, th } from '@wttj/xstyled-styled-components'

export const Link = styled.a(
export const Link = styled.aBox(
({ isNext }) => css`
${th('texts.h5')};
display: flex;
Expand Down
4 changes: 2 additions & 2 deletions docs/components/Mdx/Pre.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from '@xstyled/styled-components'
import styled from '@wttj/xstyled-styled-components'

export const Pre = styled.pre`
export const Pre = styled.preBox`
font-size: sm;
line-height: 1.5;
font-family: texts;
Expand Down
2 changes: 1 addition & 1 deletion docs/components/Spacing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { withTheme } from '@xstyled/styled-components'
import { withTheme } from '@wttj/xstyled-styled-components'
import { Table } from '@welcome-ui/table'
import { Box } from '@welcome-ui/box'

Expand Down
6 changes: 3 additions & 3 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"@mdx-js/loader": "1.6.22",
"@mdx-js/react": "1.6.22",
"@next/mdx": "^12.3.1",
"@xstyled/styled-components": "^3.7.3",
"@wttj/xstyled-styled-components": "^4.0.0",
"date-fns": "^2.30.0",
"next": "^12.1.4",
"prism-react-renderer": "1.3.5",
Expand All @@ -45,7 +45,7 @@
"react-dom": "^18.2.0",
"react-hook-form": "^7.44.3",
"react-live": "^3.1.2",
"styled-components": "^5.3.9",
"styled-components": "^6.1.8",
"yup": "1.2.0"
}
}
}
2 changes: 1 addition & 1 deletion docs/pages/blog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Link } from '@welcome-ui/link'
import { Tag } from '@welcome-ui/tag'
import { Stack } from '@welcome-ui/stack'
import { RightIcon } from '@welcome-ui/icons'
import styled, { th } from '@xstyled/styled-components'
import styled, { th } from '@wttj/xstyled-styled-components'
import { Avatar } from '@welcome-ui/avatar'

const posts = [
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
Install the `@welcome-ui/core` component and **peer dependencies** listed below:

```bash
yarn add @welcome-ui/core @xstyled/styled-components react styled-components
yarn add @welcome-ui/core @wttj/xstyled-styled-components react styled-components
```

### 2. Install UI components
Expand Down Expand Up @@ -115,14 +115,14 @@ In order to get your theme object typed with our theme, you have to override the
```
// styled.d.ts
import 'styled-components'
import '@xstyled/styled-components'
import '@wttj/xstyled-styled-components'
import { WuiTheme } from '@welcome-ui/core'

interface AppTheme extends WuiTheme {
// customize your theme
}

declare module '@xstyled/styled-components' {
declare module '@wttj/xstyled-styled-components' {
export interface Theme extends AppTheme {}
}

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/upgrade.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Make sure you update all `@welcome-ui` packages and `styled-components` packages
{
"dependencies": {
"@welcome-ui/YOUR_PACKAGE": "^5.0.0",
"@xstyled/styled-components": "^3.7.3",
"@wttj/xstyled-styled-components": "^4.0.0",
"react": "^18.0.0",
"styled-components": "^5.3.9"
}
Expand Down
4 changes: 2 additions & 2 deletions icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@welcome-ui/icons",
"version": "5.12.0",
"version": "5.14.1-alpha.0",
"description": "Customizable design system with react • styled-components • styled-system and ariakit.",
"main": "dist/index.js",
"module": "dist/index.mjs",
Expand Down Expand Up @@ -49,6 +49,6 @@
"homepage": "https://welcome-ui.com/components/icons",
"component": "Icons",
"dependencies": {
"@welcome-ui/icon": "^5.12.0"
"@welcome-ui/icon": "^5.14.1-alpha.0"
}
}
2 changes: 1 addition & 1 deletion lerna.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"packages/*",
"icons"
],
"version": "5.13.2",
"version": "5.14.1-alpha.0",
"npmClient": "yarn",
"useWorkspaces": true,
"useNx": false
Expand Down
12 changes: 7 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,9 @@
"@types/react": "18.0.25",
"@types/react-dom": "18.2.7",
"@types/react-window": "^1.8.5",
"@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^5.59.11",
"@typescript-eslint/parser": "^5.59.11",
"@vusion/webfonts-generator": "^0.8.0",
"@xstyled/styled-components": "^3.7.3",
"aws-sdk": "^2.1397.0",
"babel-jest": "29.6.4",
"babel-plugin-annotate-pure-calls": "^0.4.0",
Expand Down Expand Up @@ -137,7 +135,7 @@
"react-router-dom": "6.16.0",
"rimraf": "^4.1.1",
"standard-version": "9.5.0",
"styled-components": "^5.3.9",
"styled-components": "^6.1.8",
"svgo": "^3.0.1",
"typescript": "5.0.2",
"wttj-config": "^2.6.2",
Expand All @@ -146,8 +144,12 @@
"resolutions": {
"@babel/traverse": ">=7.23.2",
"@types/react": "18.0.25",
"styled-components": "5.3.9",
"loader-utils": "2.0.3"
},
"homepage": "https://welcome-ui.com"
"homepage": "https://welcome-ui.com",
"dependencies": {
"@wttj/xstyled-styled-components": "4.0.0",
"babel-plugin-styled-components": "^2.1.4",
"styled-components": "^6.1.8"
}
}
11 changes: 5 additions & 6 deletions packages/Accordion/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@welcome-ui/accordion",
"version": "5.13.0",
"version": "5.14.1-alpha.0",
"description": "Customizable design system with react • styled-components • styled-system and ariakit.",
"main": "dist/index.js",
"module": "dist/index.mjs",
Expand Down Expand Up @@ -47,14 +47,13 @@
},
"dependencies": {
"@ariakit/react": "0.4.3",
"@welcome-ui/box": "^5.12.0",
"@welcome-ui/icons": "^5.12.0",
"@welcome-ui/system": "^5.12.0"
"@welcome-ui/icons": "^5.14.1-alpha.0",
"@welcome-ui/system": "^5.14.1-alpha.0"
},
"peerDependencies": {
"@xstyled/styled-components": "^3.7.3",
"@wttj/xstyled-styled-components": "^4.0.0",
"react": "^18.0.0",
"styled-components": "^5.3.9"
"styled-components": "^6.1.8"
},
"gitHead": "974e7bfd71f8cfe846cbffd678c3860a8952f9e9",
"sideEffects": false,
Expand Down
Loading