Skip to content

Commit

Permalink
Merge pull request #117 from cosmology-tech/fix/improvements
Browse files Browse the repository at this point in the history 
fix: improvements to theme system and build
  • Loading branch information
@yyyyaaa
yyyyaaa authored Nov 5, 2023
2 parents c84150a + 861fc34 commit 51bdbca
Show file tree
Hide file tree
Showing 126 changed files with 1,595 additions and 799 deletions.
8 changes: 5 additions & 3 deletions compiler/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ async function compile(rawOptions) {
};
}

async function addHooksExports() {
async function addReactSpecificCode() {
const targetRootPath = path.resolve(
cwd(),
`packages/${options.target}/src`
Expand Down Expand Up @@ -256,7 +256,9 @@ async function compile(rawOptions) {
})
.join("\n");

const indexResult = `${indexData}\n${hooksExports}`;
const clientOnlyMarker = `import "client-only";`;

const indexResult = `${indexData}\n${clientOnlyMarker}\n${hooksExports}`;

// Skip if hooks exports are the same
if (indexResult === indexData) {
Expand Down Expand Up @@ -327,7 +329,7 @@ async function compile(rawOptions) {
}

if (options.target === "react") {
addHooksExports();
addReactSpecificCode();
}

spinner.succeed();
Expand Down
2 changes: 2 additions & 0 deletions compiler/mitosis.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ module.exports = {
options: {
react: {
typescript: true,
// TODO: turn this on when we distribute components as preserved modules
addUseClientDirectiveIfNeeded: false,
plugins: [reactPlugin],
},
vue: {
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"@builder.io/qwik": "^0.100.0",
"@fastify/deepmerge": "^1.3.0",
"@formkit/auto-animate": "1.0.0-beta.6",
"@parcel/packager-ts": "^2.10.0",
"@parcel/packager-ts": "^2.10.2",
"@parcel/watcher": "^2.3.0",
"@react-aria/i18n": "^3.8.4",
"@react-aria/numberfield": "^3.9.1",
Expand Down Expand Up @@ -102,7 +102,7 @@
"clsx": "^1.2.1",
"immer": "^9.0.21",
"vue": "^3.2.47",
"zustand": "^4.3.7"
"zustand": "4.4.6"
},
"workspaces": {
"packages": [
Expand Down
6 changes: 3 additions & 3 deletions packages/parcel-transformer-unlink-css/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"lib"
],
"engines": {
"parcel": "^2.10.0"
"parcel": "^2.10.2"
},
"publishConfig": {
"registry": "https://registry.npmjs.org"
Expand All @@ -28,7 +28,7 @@
"url": "https://github.com/cosmology-tech/ui-kit/issues"
},
"dependencies": {
"@parcel/plugin": "^2.10.0",
"@parcel/utils": "^2.10.0"
"@parcel/plugin": "^2.10.2",
"@parcel/utils": "^2.10.2"
}
}
3 changes: 1 addition & 2 deletions packages/react-example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.9.0",
"react-select": "^5.7.3",
"zustand": "^4.3.8"
"react-select": "^5.7.3"
},
"devDependencies": {
"@types/react": "^18.2.21",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/.parcelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"optimizers": {
"*.js": [
"...",
"@parcel/optimizer-terser",
"parcel-optimizer-unlink-css"
]
}
Expand Down
125 changes: 66 additions & 59 deletions packages/react/.storybook/WithThemeDecorator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,53 +14,29 @@ import { DEFAULT_ACCENTS, Accent } from "../src/styles/tokens";
import { getAccent } from "../src/helpers/style";
import "../src/styles/global.css";

const WithThemeDecorator = (props) => {
const ThemeShell = (props) => {
const { theme, themeClass, setTheme } = useTheme();
const [accent, setAccent] = React.useState<Accent>("blue");

return (
<ThemeProvider
accent={accent}
// themeDefs={[
// {
// name: "custom",
// vars: {
// colors: {
// primary500: "#4A5568",
// },
// },
// },
// ]}
// customTheme="custom"
// Try out custom themes
// overrides={{
// button: {
// bg: {
// light: "red",
// dark: "blue",
// },
// },
// }}
>
<div id="app-root1" className={cls("app", themeClass)}>
<Box
backgroundColor={theme == "dark" ? "$gray700" : "$white"}
px="$10"
py="$16"
minHeight="700px"
position="relative"
>
{props.children}
<Box position="absolute" top="$4" right="$6">
<Stack
direction="horizontal"
space="$4"
attributes={{
p: "$2",
alignItems: "center",
}}
>
{/* <Select
<div id="app-root1" className={cls("app", themeClass)}>
<Box
backgroundColor={theme == "dark" ? "$gray700" : "$white"}
px="$10"
py="$16"
minHeight="700px"
position="relative"
>
{props.children}
<Box position="absolute" top="$4" right="$6">
<Stack
direction="horizontal"
space="$4"
attributes={{
p: "$2",
alignItems: "center",
}}
>
{/* <Select
size="sm"
width={180}
placeholder="Accent"
Expand All @@ -86,22 +62,53 @@ const WithThemeDecorator = (props) => {
</SelectOption>
))}
</Select> */}
<IconButton
variant="ghost"
intent="secondary"
size="sm"
icon={theme === "dark" ? "sunLine" : "moonLine"}
onClick={() => {
if (theme === "light") {
return setTheme("dark");
}
return setTheme("light");
}}
/>
</Stack>
</Box>
<IconButton
variant="ghost"
intent="secondary"
size="sm"
icon={theme === "dark" ? "sunLine" : "moonLine"}
onClick={() => {
if (theme === "light") {
return setTheme("dark");
}
return setTheme("light");
}}
/>
</Stack>
</Box>
</div>
</Box>
</div>
);
};

const WithThemeDecorator = (props) => {
const [accent, setAccent] = React.useState<Accent>("blue");

return (
<ThemeProvider
accent={accent}
// themeDefs={[
// {
// name: "custom",
// vars: {
// colors: {
// primary500: "#4A5568",
// },
// },
// },
// ]}
// customTheme="custom"
// Try out custom themes
// overrides={{
// button: {
// bg: {
// light: "red",
// dark: "blue",
// },
// },
// }}
>
<ThemeShell {...props} />
</ThemeProvider>
);
};
Expand Down
50 changes: 26 additions & 24 deletions packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,36 @@
"types": "dist/index.d.ts",
"exports": {
".": {
"types": {
"import": "./dist/index.d.ts",
"default": "./dist/index.d.ts"
},
"module": "./dist/interchain-ui-kit-react.esm.js",
"import": "./dist/interchain-ui-kit-react.cjs.js",
"default": "./dist/interchain-ui-kit-react.cjs.js"
"import": "./dist/interchain-ui-kit-react.esm.js",
"require": "./dist/interchain-ui-kit-react.cjs.js"
},
"./styles": {
"import": "./dist/interchain-ui-kit-react.cjs.css",
"require": "./dist/interchain-ui-kit-react.cjs.css"
},
"./globalStyles": {
"import": "./dist/styles/global.css.css",
"require": "./dist/styles/global.css.css"
},
"./styles": "./dist/interchain-ui-kit-react.cjs.css",
"./package.json": "./package.json"
},
"targets": {
"main": {
"optimize": true,
"includeNodeModules": [
"@formkit/auto-animate",
"@react-aria/i18n",
"@react-aria/numberfield",
"@react-aria/utils",
"@react-stately/numberfield"
"@formkit/auto-animate"
]
},
"module": {
"optimize": true,
"includeNodeModules": [
"@formkit/auto-animate",
"@react-aria/i18n",
"@react-aria/numberfield",
"@react-aria/utils",
"@react-stately/numberfield"
"@formkit/auto-animate"
]
},
"globalStyles": {
"source": "src/styles/global.css.ts",
"context": "browser",
"distDir": "./dist"
}
},
"sideEffects": false,
Expand All @@ -64,12 +63,13 @@
"@vanilla-extract/recipes": "^0.4.0",
"animejs": "^3.2.1",
"bignumber.js": "^9.1.1",
"client-only": "^0.0.1",
"clsx": "^1.2.1",
"copy-to-clipboard": "^3.3.3",
"immer": "^9.0.19",
"lodash": "^4.17.21",
"rainbow-sprinkles": "^0.17.0",
"zustand": "^4.3.8"
"zustand": "4.4.6"
},
"peerDependencies": {
"react": "^18.x",
Expand Down Expand Up @@ -101,10 +101,11 @@
"@chain-registry/osmosis": "^1.21.0",
"@chain-registry/types": "^0.17.0",
"@chain-registry/utils": "^1.14.0",
"@parcel/optimizer-swc": "^2.10.0",
"@parcel/reporter-bundle-analyzer": "^2.10.0",
"@parcel/transformer-typescript-tsc": "^2.10.0",
"@parcel/transformer-typescript-types": "^2.10.0",
"@parcel/optimizer-swc": "^2.10.2",
"@parcel/optimizer-terser": "^2.10.2",
"@parcel/reporter-bundle-analyzer": "^2.10.2",
"@parcel/transformer-typescript-tsc": "^2.10.2",
"@parcel/transformer-typescript-types": "^2.10.2",
"@storybook/addon-essentials": "^7.5.0",
"@storybook/addon-interactions": "^7.5.0",
"@storybook/addon-links": "^7.5.0",
Expand All @@ -113,11 +114,12 @@
"@storybook/react": "^7.5.0",
"@storybook/react-vite": "^7.5.0",
"@storybook/testing-library": "^0.2.2",
"@types/react": "^18.2.34",
"@vanilla-extract/parcel-transformer": "^1.0.0",
"@vanilla-extract/vite-plugin": "^3.8.2",
"@vitejs/plugin-react": "^4.1.0",
"chain-registry": "^1.19.0",
"parcel": "^2.10.0",
"parcel": "^2.10.2",
"parcel-optimizer-unlink-css": "^1.1.0",
"parcel-resolver-ts-base-url": "^1.3.1",
"prop-types": "^15.8.1",
Expand Down
Loading

0 comments on commit 51bdbca

Please sign in to comment.