Skip to content

Commit

Permalink
Merge pull request #22 from tonyghiani/icon-refactor-and-improvements
Browse files Browse the repository at this point in the history
Move styles definition for smaller components
  • Loading branch information
tonyghiani authored Dec 7, 2023
2 parents ec70c14 + 74d4e36 commit 868a1d6
Show file tree
Hide file tree
Showing 34 changed files with 1,826 additions and 1,609 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -144,3 +144,5 @@ dist
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

.nx/cache
3 changes: 2 additions & 1 deletion lerna.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
"conventionalCommits": true,
"message": "chore(release): publish new release(s) [skip ci]"
}
}
},
"$schema": "node_modules/lerna/schemas/lerna-schema.json"
}
42 changes: 14 additions & 28 deletions nx.json
Original file line number Diff line number Diff line change
@@ -1,40 +1,26 @@
{
"tasksRunnerOptions": {
"default": {
"runner": "nx/tasks-runners/default",
"options": {
"cacheableOperations": [
"build",
"lint",
"lint:package",
"test"
]
}
}
},
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
],
"outputs": [
"{projectRoot}/dist"
]
"dependsOn": ["^build"],
"outputs": ["{projectRoot}/dist"],
"cache": true
},
"lint": {
"dependsOn": [
"^lint"
]
"dependsOn": ["^lint"],
"cache": true
},
"lint:package": {
"dependsOn": [
"^lint:package"
]
"dependsOn": ["^lint:package"],
"cache": true
},
"test": {
"dependsOn": [
"^test"
]
"dependsOn": ["^test"],
"cache": true
}
},
"namedInputs": {
"default": ["{projectRoot}/**/*", "sharedGlobals"],
"sharedGlobals": [],
"production": ["default"]
}
}
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@
"@commitlint/cli": "^18.4.3",
"@commitlint/config-conventional": "^18.4.3",
"@commitlint/config-lerna-scopes": "^18.4.3",
"@types/jest": "^29.5.10",
"@typescript-eslint/eslint-plugin": "^6.12.0",
"@typescript-eslint/parser": "^6.12.0",
"@vitejs/plugin-react": "^4.2.0",
"@types/jest": "^29.5.11",
"@typescript-eslint/eslint-plugin": "^6.13.2",
"@typescript-eslint/parser": "^6.13.2",
"@vitejs/plugin-react": "^4.2.1",
"babel-loader": "^9.1.3",
"commitlint": "^18.4.3",
"eslint": "^8.54.0",
"eslint-config-prettier": "^9.0.0",
"eslint": "^8.55.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-simple-import-sort": "^10.0.0",
Expand All @@ -50,17 +50,17 @@
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-localstorage-mock": "^2.4.26",
"lerna": "^7.4.2",
"lerna": "^8.0.0",
"lerna-changelog": "^2.2.0",
"lint-staged": "^15.1.0",
"lint-staged": "^15.2.0",
"npm-check-updates": "^16.14.11",
"prettier": "^3.1.0",
"rimraf": "^5.0.5",
"sort-package-json": "^2.6.0",
"ts-jest": "^29.1.1",
"ts-node": "^10.9.1",
"typescript": "^5.3.2",
"vite": "^5.0.2",
"typescript": "^5.3.3",
"vite": "^5.0.6",
"vite-plugin-babel-macros": "^1.0.6",
"vite-tsconfig-paths": "^4.2.1"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/doc-tools/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@
}
},
"dependencies": {
"react-mnt": "^1.1.4"
"react-mnt": "^1.1.5"
},
"devDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.3.5"
"tailwindcss": "^3.3.6"
},
"peerDependencies": {
"react": ">=17",
Expand Down
34 changes: 17 additions & 17 deletions packages/react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,38 +65,38 @@
"@mountain-ui/react-hooks": "^1.0.2",
"@mountain-ui/utils": "^1.0.1",
"prism-react-renderer": "2.3.0",
"react-mnt": "^1.1.4",
"react-mnt": "^1.1.5",
"react-range": "^1.8.14"
},
"devDependencies": {
"@storybook/addon-a11y": "^7.5.3",
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/addon-storyshots": "^7.5.3",
"@storybook/blocks": "^7.5.3",
"@storybook/react": "^7.5.3",
"@storybook/react-vite": "^7.5.3",
"@storybook/test-runner": "^0.15.2",
"@storybook/addon-a11y": "^7.6.4",
"@storybook/addon-essentials": "^7.6.4",
"@storybook/addon-interactions": "^7.6.4",
"@storybook/addon-links": "^7.6.4",
"@storybook/addon-storyshots": "^7.6.4",
"@storybook/blocks": "^7.6.4",
"@storybook/react": "^7.6.4",
"@storybook/react-vite": "^7.6.4",
"@storybook/test-runner": "^0.16.0",
"@storybook/testing-library": "^0.2.2",
"@svgr/cli": "^8.1.0",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@types/mertasan__tailwindcss-variables": "^2.6.4",
"@types/react": "^18.2.38",
"@types/react": "^18.2.42",
"@types/react-dom": "^18.2.17",
"autoprefixer": "^10.4.16",
"axe-playwright": "^1.2.3",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"eslint-plugin-react-refresh": "^0.4.5",
"eslint-plugin-storybook": "^0.6.15",
"fs-extra": "^11.1.1",
"fs-extra": "^11.2.0",
"inquirer": "^9.2.12",
"postcss": "^8.4.31",
"postcss": "^8.4.32",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.5.3",
"tailwindcss": "^3.3.5"
"storybook": "^7.6.4",
"tailwindcss": "^3.3.6"
},
"peerDependencies": {
"react": ">=17",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/scripts/generate.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function createComponent(name) {
return writeFile(
COMPONENT_IMPLEMENTATION,
`
import { mnt } from 'mnt-internals';
import mnt from 'react-mnt';
export interface Mnt${name}Props { }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const btnClasses = {
'.mnt-btn': {
'@apply relative inline-block w-fit border-0 rounded-lg font-medium text-body py-2 px-4 cursor-pointer transition ease-out duration-150 disabled:text-gray-700 disabled:bg-gray-100 disabled:cursor-not-allowed':
{},
'&-primary': { '@apply text-blue-700 bg-blue-600 from-blue-600 to-blue-400': {} },
'&-accent': { '@apply text-purple-700 bg-purple-600 from-purple-600 to-purple-400': {} },
'&-success': { '@apply text-green-600 bg-green-600 from-green-600 to-green-400': {} },
'&-warning': {
'@apply text-yellow-600 bg-yellow-500 from-yellow-600 to-yellow-400': {}
},
'&-danger': { '@apply text-red-700 bg-red-600 from-red-600 to-red-400': {} },
'&-disabled': { '@apply text-gray-600 bg-gray-500 from-gray-600 to-gray-400': {} },
'&-shade': { '@apply bg-opacity-20 hover:bg-opacity-30': {} },
'&-solid': { '@apply !text-light': {} },
'&-outline': { '@apply bg-opacity-10 hover:bg-opacity-30 shadow-outline-button': {} },
'&-gradient': { '@apply bg-gradient-to-br hover:bg-gradient-to-r !text-light': {} },
'&-link': { '@apply !bg-transparent hover:underline underline-offset-4': {} },
'&-text': { '@apply !bg-transparent hover:scale-105': {} }
}
};

export default btnClasses;
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ export const Main: Story = {
children: 'Mountain UI',
color: 'primary',
disabled: false,
rounded: false,
variant: 'shade',
}
};

export const Variant: Story = {
args: {
color: 'primary',
children: 'Mountain UI',
},
render: (args) => {
return (
<MntGrid columns={6} justifyItems='center' alignItems='center'>
{variants.map(variant => <MntButton key={variant} {...args} variant={variant} />)}
{variants.map(variant => <MntButton key={variant} {...args} variant={variant}>{variant}</MntButton>)}
</MntGrid>
)
}
Expand Down
34 changes: 19 additions & 15 deletions packages/react-components/src/components/atoms/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
import mnt from 'react-mnt';

export const BUTTON_BASE_CLASS =
'relative inline-block w-fit border-0 rounded-lg font-medium text-body py-2 px-4 cursor-pointer transition ease duration-150 disabled:text-gray-700 disabled:bg-gray-100 disabled:cursor-not-allowed';
export const BUTTON_BASE_CLASS = 'mnt-btn';
export const BUTTON_COLORS = {
primary: 'text-blue-700 bg-blue-600 from-blue-600 to-blue-400',
accent: 'text-purple-700 bg-purple-600 from-purple-600 to-purple-400',
success: 'text-green-600 bg-green-600 from-green-600 to-green-400',
warning: 'text-yellow-600 bg-yellow-500 from-yellow-600 to-yellow-400',
danger: 'text-red-700 bg-red-600 from-red-600 to-red-400',
disabled: 'text-gray-600 bg-gray-500 from-gray-600 to-gray-400'
primary: 'mnt-btn-primary',
accent: 'mnt-btn-accent',
success: 'mnt-btn-success',
warning: 'mnt-btn-warning',
danger: 'mnt-btn-danger',
disabled: 'mnt-btn-disabled'
} as const;
export const BUTTON_VARIANTS = {
shade: 'bg-opacity-20 hover:bg-opacity-30',
solid: '!text-light',
outline: 'bg-opacity-10 hover:bg-opacity-30 shadow-outline-button',
gradient: 'bg-gradient-to-br hover:bg-gradient-to-r !text-light',
link: '!bg-transparent hover:underline underline-offset-4',
text: '!bg-transparent hover:scale-105'
shade: 'mnt-btn-shade',
solid: 'mnt-btn-solid',
outline: 'mnt-btn-outline',
gradient: 'mnt-btn-gradient',
link: 'mnt-btn-link',
text: 'mnt-btn-text'
} as const;

export type MntButtonColor = keyof typeof BUTTON_COLORS;
Expand All @@ -31,6 +30,10 @@ export interface MntButtonProps {
* The button status
*/
disabled?: boolean;
/**
* Makes the button rounded
*/
rounded?: boolean;
/**
* The variant to use for the button
*/
Expand All @@ -41,9 +44,10 @@ export interface MntButtonProps {
* Button component for triggering actions or events in the UI.
* Provides interactivity with styled visuals, enhancing user engagement and navigation within the application.
*/
export const MntButton = mnt('button')<MntButtonProps>`
export const MntButton = mnt('button') <MntButtonProps>`
${BUTTON_BASE_CLASS}
${({ color = 'primary' }) => BUTTON_COLORS[color]}
${({ rounded = false }) => rounded && '!rounded-full'}
${({ variant = 'shade' }) => BUTTON_VARIANTS[variant]}
`;

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const codeClasses = {
'.mnt-code': {
'@apply bg-blue-950 text-secondaryBody text-light inline-block px-1 rounded': {}
}
};

export default codeClasses;
7 changes: 3 additions & 4 deletions packages/react-components/src/components/atoms/Code/Code.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import mnt from 'react-mnt';

export const CODE_BASE_CLASS =
'bg-blue-950 text-bold text-secondaryBody text-light inline-block px-1 rounded';
export const CODE_BASE_CLASS = 'mnt-code';

export interface MntCodeProps {}
export interface MntCodeProps { }

/**
* Code component for displaying and styling code snippets.
* Enhances code readability and presentation, ideal for showcasing programming examples within a UI.
*/
export const MntCode = mnt('code')<MntCodeProps>`
export const MntCode = mnt('code') <MntCodeProps>`
${CODE_BASE_CLASS}
`;

Expand Down
4 changes: 3 additions & 1 deletion packages/react-components/src/components/atoms/Icon/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import mnt from 'react-mnt';
import { MntIconType, typesToIconMap } from './icons';

export const ICON_COLORS = {
light: 'text-light',
dark: 'text-dark',
current: 'text-current',
primary: 'text-sky-600',
accent: 'text-purple-600',
Expand Down Expand Up @@ -73,7 +75,7 @@ type BaseIconProps = Omit<MntIconProps, 'iconType'>;
const BaseIcon = mnt('span').params<BaseIconProps>(props => ({
as: ICON_VARIANTS[props.variant || 'icon']?.tag
}))`
${({ color = 'primary' }) => ICON_COLORS[color]}
${({ color = 'current' }) => ICON_COLORS[color]}
${({ size = 'm' }) => ICON_SIZES[size]}
${({ variant = 'icon' }) => ICON_VARIANTS[variant]?.classes}
${({ withTransition = false }) =>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const inputClasses = {
'.mnt-input': {
'@apply w-full relative focus-within:[--text-input:theme(colors.blue.500)] focus-within:[--bg-input:theme(colors.blue.50)] focus-within:bg-opacity-20':
{},
'&-wrapper': {
'@apply w-full rounded-lg bg-[--bg-input] shadow-input focus-within:shadow-input-focus flex items-center flex-nowrap gap-2 transition duration-200':
{}
},
'&-node': {
'@apply w-full text-dark font-medium border-0 bg-transparent placeholder:font-normal': {}
},
'&-default': {
'@apply [--text-input:theme(colors.gray.500)] [--bg-input:theme(colors.gray.50)]': {}
},
'&-success': {
'@apply [--text-input:theme(colors.green.600)] [--bg-input:theme(colors.emerald.50)]': {}
},
'&-warning': {
'@apply [--text-input:theme(colors.yellow.600)] [--bg-input:theme(colors.yellow.50)]': {}
},
'&-error': {
'@apply [--text-input:theme(colors.red.600)] [--bg-input:theme(colors.red.50)]': {}
}
}
};

export default inputClasses;
Loading

1 comment on commit 868a1d6

@vercel
Copy link

@vercel vercel bot commented on 868a1d6 Dec 7, 2023

Choose a reason for hiding this comment

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

Please sign in to comment.