Skip to content

Upgrade to Trousers v4 #63

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

Open
danieldelcore wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Upgrade to Trousers v4 #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d2ff199
💩 Initial macro migration
danieldelcore Jan 24, 2021
cbe79cc
💩 Trying to get the macro to work!!
danieldelcore Mar 6, 2021
c29abc8
🔨 fix type entry points, bump alpha ver, remove ignores
danieldelcore Mar 6, 2021
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
8 changes: 8 additions & 0 deletions .storybook/.babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": ["babel-plugin-macros"]
}
Empty file removed .storybook/addons.js
View file
Open in desktop
Empty file.
6 changes: 0 additions & 6 deletions .storybook/config.js
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
stories: ['../examples/**/*.@(js|jsx|ts|tsx|mdx)'],
addons: ['storybook-addon-performance'],
};
3 changes: 3 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
17 changes: 0 additions & 17 deletions .storybook/webpack.config.js
View file
Open in desktop

This file was deleted.

11 changes: 11 additions & 0 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = api => {
api.cache(true);
return {
plugins: ['macros'],
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
};
};
81 changes: 34 additions & 47 deletions examples/0_Palette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
/* eslint-disable jsx-a11y/accessible-emoji */
/** @jsx jsx */
import { storiesOf } from '@storybook/react';
import { useState } from 'react';
import { jsx } from '@trousers/core';
import React, { useState } from 'react';
import Avatar from '@precursor/avatar';
import Blockquote from '@precursor/blockquote';
import Text from '@precursor/text';
Expand All @@ -29,23 +27,29 @@ import Spinner from '@precursor/spinner';
import Skeleton from '@precursor/skeleton';
import Grid, { Column, Row } from '@precursor/grid';
import Inline from '@precursor/inline';
import Toggle from '@precursor/Toggle';
import Toggle from '@precursor/toggle';
import { Tabs, Tab, TabList, TabPanel } from '@precursor/tabs';
import List, { ListItem } from '@precursor/list';
import { theme as baseTheme, Theme, ThemeProvider } from '@precursor/theme';
import deepObject from 'object-deep-key';
import { Box, Container, ThemeEditor, themeSchema } from '../fixtures';
// import { theme as baseTheme, Theme, ThemeProvider } from '@precursor/theme';
// import deepObject from 'object-deep-key';
import {
Box,
Container,
// ThemeEditor,
//themeSchema
} from '../fixtures';

const BasicExample = () => {
const [theme, setTheme] = useState<Theme>(baseTheme);
// const [theme, setTheme] = useState<Theme>(baseTheme);
const [isModalOpen, setIsModalOpen] = useState(false);

const closeModal = () => setIsModalOpen(false);
const openModal = () => setIsModalOpen(true);

return (
<ThemeProvider theme={theme}>
<aside
<React.Fragment>
{/* <ThemeProvider theme={theme}> */}
{/* <aside
style={{
width: '320px',
height: '100%',
Expand All @@ -70,7 +74,7 @@ const BasicExample = () => {
}}
/>
</Stack>
</aside>
</aside> */}
<div
style={{
display: 'block',
Expand All @@ -83,30 +87,12 @@ const BasicExample = () => {
<Heading id="typography">Typography</Heading>
<Panel>
<Stack>
<Heading weight="h1">
Heading One ({theme.fontSize.h1}/
{theme.lineHeight.h1})
</Heading>
<Heading>
Heading Two ({theme.fontSize.h2}/
{theme.lineHeight.h2})
</Heading>
<Heading weight="h3">
Heading Three ({theme.fontSize.h3}/
{theme.lineHeight.h3})
</Heading>
<Heading weight="h4">
Heading Four ({theme.fontSize.h4}/
{theme.lineHeight.h4})
</Heading>
<Heading weight="h5">
Heading Five ({theme.fontSize.h5}/
{theme.lineHeight.h5})
</Heading>
<Heading weight="h6">
Heading Six ({theme.fontSize.h6}/
{theme.lineHeight.h6})
</Heading>
<Heading weight="h1">Heading One</Heading>
<Heading>Heading Two</Heading>
<Heading weight="h3">Heading Three</Heading>
<Heading weight="h4">Heading Four</Heading>
<Heading weight="h5">Heading Five</Heading>
<Heading weight="h6">Heading Six</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris volutpat, odio vitae
Expand Down Expand Up @@ -176,7 +162,7 @@ const BasicExample = () => {
</Stack>
</Panel>
<Heading id="spacing">Spacing</Heading>
<Panel>
{/* <Panel>
<Stack>
{Object.keys(theme.space).map(key => (
<div key={key}>
Expand All @@ -192,7 +178,7 @@ const BasicExample = () => {
</div>
))}
</Stack>
</Panel>
</Panel> */}
<Heading id="Stack">Stack</Heading>
<Panel>
<Stack>
Expand Down Expand Up @@ -479,23 +465,23 @@ const BasicExample = () => {
name="input-success"
onChange={() => console.log('onChange')}
value=""
state="success"
appearance="success"
/>
<Label htmlFor="input-warning">Warning</Label>
<Input
id="input-warning"
name="input-warning"
onChange={() => console.log('onChange')}
value=""
state="warning"
appearance="warning"
/>
<Label htmlFor="input-error">Error</Label>
<Input
id="input-error"
name="input-error"
onChange={() => console.log('onChange')}
value=""
state="error"
appearance="error"
/>
<Label htmlFor="input-disabled">Disabled</Label>
<Input
Expand Down Expand Up @@ -551,7 +537,7 @@ const BasicExample = () => {
name="TextArea-success"
onChange={() => console.log('onChange')}
value=""
state="success"
appearance="success"
/>
<Label htmlFor="TextArea-warning">
Warning
Expand All @@ -561,15 +547,15 @@ const BasicExample = () => {
name="TextArea-warning"
onChange={() => console.log('onChange')}
value=""
state="warning"
appearance="warning"
/>
<Label htmlFor="TextArea-error">Error</Label>
<TextArea
id="TextArea-error"
name="TextArea-error"
onChange={() => console.log('onChange')}
value=""
state="error"
appearance="error"
/>
<Label htmlFor="TextArea-disabled">
Disabled
Expand Down Expand Up @@ -625,7 +611,7 @@ const BasicExample = () => {
id="select-success"
name="select-success"
onChange={() => console.log('onChange')}
state="success"
appearance="success"
>
<option value="hello">Hello</option>
<option value="world">world</option>
Expand All @@ -635,7 +621,7 @@ const BasicExample = () => {
id="select-warning"
name="select-warning"
onChange={() => console.log('onChange')}
state="warning"
appearance="warning"
>
<option value="hello">Hello</option>
<option value="world">world</option>
Expand All @@ -645,7 +631,7 @@ const BasicExample = () => {
id="select-error"
name="select-error"
onChange={() => console.log('onChange')}
state="error"
appearance="error"
>
<option value="hello">Hello</option>
<option value="world">world</option>
Expand Down Expand Up @@ -985,7 +971,8 @@ const BasicExample = () => {
</Stack>
</Container>
</div>
</ThemeProvider>
{/* </ThemeProvider> */}
</React.Fragment>
);
};

Expand Down
26 changes: 13 additions & 13 deletions fixtures/Box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/** @jsx jsx */
import { jsx, css } from '@trousers/core';
import { ReactNode, FC } from 'react';
import { css } from '@trousers/macro';
import React, { ReactNode, FC } from 'react';

import { Theme } from '@precursor/theme';
// import { Theme } from '@precursor/theme';

const Box: FC<{
width?: string;
Expand All @@ -11,15 +10,16 @@ const Box: FC<{
backgroundColor?: string;
}> = ({ width = '100%', height = 0, children, backgroundColor }) => (
<div
css={css<Theme>`
display: block;
color: white;
min-height: 20px;
width: ${width};
height: ${height};
background-color: ${({ color }) =>
backgroundColor || color.background.light};
`}
// @ts-ignore
css={css('Box', {
display: 'block',
color: 'white',
minHeight: '20px',
width,
height,
// background-color: ${({ color }) =>
// backgroundColor || color.background.light};
})}
>
{children}
</div>
Expand Down
6 changes: 2 additions & 4 deletions fixtures/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
/** @jsx jsx */
import { jsx } from '@trousers/core';
import { ReactNode, FC } from 'react';
import React, { ReactNode, FC } from 'react';

const Container: FC<{ children?: ReactNode }> = ({ children }) => (
<div
css={{
style={{
maxWidth: '1000px',
margin: '0 auto',
display: 'block',
Expand Down
4 changes: 2 additions & 2 deletions fixtures/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export { default as ThemeEditor } from './ThemeEditor';
export { default as themeSchema } from './themeSchema';
// export { default as ThemeEditor } from './ThemeEditor';
// export { default as themeSchema } from './themeSchema';
export { default as Box } from './Box';
export { default as Container } from './Container';
Loading