Skip to content

Commit

Permalink
upgrade storybook and update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@YieldRay
YieldRay committed May 15, 2024
1 parent b5bd6d6 commit 65f86ac
Show file tree
Hide file tree
Showing 19 changed files with 283 additions and 263 deletions.
10 changes: 8 additions & 2 deletions .storybook/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,23 @@ import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@chromatic-com/storybook',
],

framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',

docs: {},

typescript: {
reactDocgen: 'react-docgen-typescript',
},
}
export default config
40 changes: 24 additions & 16 deletions .storybook/preview.css
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,38 @@
@import url('https://fonts.loli.net/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap');
@import url('https://fonts.upset.dev/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap');
@import url('https://fonts.upset.dev/css2?family=Google+Sans+Mono:wght@100;200;300;400;500;700;900&display=swap');
.docs-story,
.docs-story *,
.sb-unstyled {
font-family:
'Google Sans',
Roboto,
system-ui,
'Nunito Sans',
-apple-system,
Tahoma,
'.SFNSText-Regular',
'San Francisco',
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
}

pre {
&,
* {
font-size: 15px;
font-family:
Consolas,
Courier,
Courier New,
monospace !important;
}
.token.operator {
background: transparent;
}
code,
pre,
pre *,
table,
table * {
font-family:
'Google Sans Mono',
Consolas,
Courier,
Courier New,
monospace !important;
}

pre .token.operator {
background: transparent;
}

@media (prefers-color-scheme: dark) {
Expand Down
2 changes: 2 additions & 0 deletions .storybook/preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ const preview: Preview = {
},
},
},

tags: ['autodocs'],
}

export default preview
125 changes: 4 additions & 121 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ export default function App() {

Next.js is also supported out of the box.

> [!TIP]
> This library is designed to maintain a small footprint, making it easy to integrate with other libraries in the ecosystem.
> For instance, it pairs well with Tailwind CSS, although this does not depend on it.
# Documentation

See: <https://soda.js.org>
Expand All @@ -82,127 +86,6 @@ See: <https://soda.js.org>
> If has, it will be the root DOM node of the entire component.
> If not, it will be documented and will be checked if you use typescript.
# Resources

## Icons

This library uses the [MDI Icon Library](https://pictogrammers.com/library/mdi/)
You can refer to it at <https://materialdesignicons.com/>

```tsx
import { mdiMagnify } from '@mdi/js'
import Icon from '@mdi/react'
import { IconButton } from 'soda-material'

const App = () => (
<>
<Icon path={mdiMagnify} size={1} />
<IconButton path={mdiMagnify} />
</>
)
```

A replacement is Google fonts: <https://fonts.google.com/icons>

## Fonts

It's highly recommended that you use a font that supports `font-weight: 500`,
as some component states require it to behavior clear to the user.

The easiest way is to use the `Roboto` font, just simply add a few lines of css
code as below!

```css
/* using Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
/*
Tips:
Chinese user may prefer:
@import url('https://fonts.loli.net/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap');
@import url('https://fonts.upset.dev/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap');
@import url('https://fonts.font.im/css?family=Roboto:100,300,400,500,700,900');
@import url('https://fonts.bunny.net/css?family=roboto:100,300,400,500,700,900');
*/

/* using Google Sans */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@100;200;300;400;500;700;900&display=swap');
* {
font-family: 'Google Sans', sans-serif;
}
```

## Theming

This library uses the official material design css variable
(`--md-sys-color-<token>`, at `:root`) to theming.
So you can simply overwrite them or use the
[@material/material-color-utilities](https://github.com/material-foundation/material-color-utilities/tree/main/typescript)
package to apply the theme.

```tsx
// we also provide a series of wrapper functions, making theming easier
import { applyThemeForSoda } from 'soda/dist/utils/theme'

// simply
applyThemeForSoda('#f82506')

// or
applyThemeForSoda(themeFromHexString('#f82506'), [
{
name: 'custom-1',
value: argbFromHex('#ff0000'),
blend: true,
},
])

// or
function SelectThemeFromFileButton() {
const onClick = async () => {
const fileHandleArray = await window.showOpenFilePicker({
types: [
{
description: 'please choose an image',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp'],
},
},
],
multiple: false,
excludeAcceptAllOption: true,
})
const file: File = await fileHandleArray[0].getFile()
applyThemeForSoda(await themeFromImageOrFile(file)) // *
}
return <button onClick={onClick}>Select An Image</button>
}
```

## zIndex

Some components have a `fixed` boolean property, it's useful to set it to `true`.
When enabled, the component will become `position: fixed`.
Also, components have a default `zIndex` value, but you can also set the `zIndex`
property to overwrite it, it also exposes an `inset` property, which can be used
for controlling the position.

```tsx
<Snackbar fixed open={true} zIndex={999} inset="auto 0 5rem">
Fixed Snackbar
</Snackbar>
```

Currently, the default `zIndex` is:

| Component | zIndex |
| ---------- | ------ |
| snackbar | 1 |
| app-bar | 1 |
| navigation | 2 |
| sheet | 3 |

# TODO

- [ ] ARIA support
Expand Down
143 changes: 72 additions & 71 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,74 @@
{
"name": "soda-material",
"version": "0.0.27",
"type": "module",
"types": "dist",
"main": "dist/index.js",
"style": "dist/style.css",
"sideEffects": false,
"scripts": {
"build": "vite build && tsc",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier --write ./src",
"preview": "vite preview",
"chromatic": "chromatic --exit-zero-on-changes"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"devDependencies": {
"@floating-ui/react": "^0.26.14",
"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
"@material/material-color-utilities": "^0.2.7",
"@mdi/js": "^7.4.47",
"@mdi/react": "^1.6.1",
"@storybook/addon-essentials": "^8.0.10",
"@storybook/addon-interactions": "^8.0.10",
"@storybook/addon-links": "^8.0.10",
"@storybook/blocks": "^8.0.10",
"@storybook/react": "^8.0.10",
"@storybook/react-vite": "^8.0.10",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.9.0",
"@typescript-eslint/parser": "^7.9.0",
"@vitejs/plugin-react": "^4.2.1",
"chromatic": "^11.3.2",
"clsx": "^2.1.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"eslint-plugin-storybook": "^0.8.0",
"glob": "^10.3.15",
"prettier": "^3.2.5",
"sass": "^1.77.1",
"storybook": "^8.0.10",
"styled-jsx": "^5.1.3",
"typescript": "^5.4.5",
"vite": "^5.2.11"
},
"publishConfig": {
"registry": "https://registry.npmjs.org"
},
"description": "Modern lightweight React Component Library",
"keywords": [
"material design",
"material you"
],
"author": {
"name": "YieldRay"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/YieldRay/soda.git"
},
"bugs": {
"url": "https://github.com/YieldRay/soda/issues"
},
"homepage": "https://github.com/YieldRay/soda#readme"
"name": "soda-material",
"version": "0.0.27",
"type": "module",
"types": "dist",
"main": "dist/index.js",
"style": "dist/style.css",
"sideEffects": false,
"scripts": {
"build": "vite build && tsc",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier --write ./src",
"preview": "vite preview",
"chromatic": "chromatic --exit-zero-on-changes"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"devDependencies": {
"@chromatic-com/storybook": "1",
"@floating-ui/react": "^0.26.15",
"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
"@material/material-color-utilities": "^0.2.7",
"@mdi/js": "^7.4.47",
"@mdi/react": "^1.6.1",
"@storybook/addon-essentials": "^8.1.1",
"@storybook/addon-interactions": "^8.1.1",
"@storybook/addon-links": "^8.1.1",
"@storybook/blocks": "^8.1.1",
"@storybook/react": "^8.1.1",
"@storybook/react-vite": "^8.1.1",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.9.0",
"@typescript-eslint/parser": "^7.9.0",
"@vitejs/plugin-react": "^4.2.1",
"chromatic": "^11.3.2",
"clsx": "^2.1.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"eslint-plugin-storybook": "^0.8.0",
"glob": "^10.3.15",
"prettier": "^3.2.5",
"sass": "^1.77.1",
"storybook": "^8.1.1",
"styled-jsx": "^5.1.3",
"typescript": "^5.4.5",
"vite": "^5.2.11"
},
"publishConfig": {
"registry": "https://registry.npmjs.org"
},
"description": "Modern lightweight React Component Library",
"keywords": [
"material design",
"material you"
],
"author": {
"name": "YieldRay"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/YieldRay/soda.git"
},
"bugs": {
"url": "https://github.com/YieldRay/soda/issues"
},
"homepage": "https://github.com/YieldRay/soda#readme"
}
Loading

0 comments on commit 65f86ac

Please sign in to comment.