diff --git a/.storybook/main.cjs b/.storybook/main.cjs index 85b4dba..56bb83a 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -1,5 +1,5 @@ module.exports = { - stories: ["../lib/**/*.stories.@(js|jsx|ts|tsx)"], + stories: ["../lib/**/*.mdx", "../lib/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", diff --git a/README.md b/README.md index 7f50c0c..d6643f6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # @tietokilta/ui -Component library built in Tietokilta style, for use in React apps w/ tailwindcss +Component library built in Tietokilta style, for use in React apps with TailwindCSS + +Design system [Figma](https://www.figma.com/file/eMVyR3hefnb9WvmZEkvgUf/TikUI?type=design&node-id=0-1), Documentation [Storybook](https://tietokilta.github.io/ui) ## Getting Started diff --git a/lib/components/Introduction.mdx b/lib/components/Introduction.mdx new file mode 100644 index 0000000..5a0ca1c --- /dev/null +++ b/lib/components/Introduction.mdx @@ -0,0 +1,41 @@ +import { Meta } from "@storybook/blocks"; + + + +# @tietokilta/ui + +Component library built in Tietokilta style, for use in React apps with TailwindCSS + +Design system [Figma](https://www.figma.com/file/eMVyR3hefnb9WvmZEkvgUf/TikUI?type=design&node-id=0-1), Source [GitHub](https://github.com/tietokilta/ui) + +## Installation + +1. Install @tietokilta/ui dependency (**Note:** not yet published to package managers!) + +```bash +pnpm install @tietokilta/ui # or npm/yarn +``` + +2. Add template path to `tailwind.config.cjs` file: + +```js +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./node_modules/@tietokilta/ui/**/*.{js,cjs}"] + // ... +}; +``` + +## Usage + +```tsx +import { Button } from "@tietokilta/ui"; + +const App = () => ( +
+ +
+); +```