diff --git a/packages/design-system-component-library-yeahyeahyeah/README.md b/packages/design-system-component-library-yeahyeahyeah/README.md index ac181c8a..ba6b9ae0 100644 --- a/packages/design-system-component-library-yeahyeahyeah/README.md +++ b/packages/design-system-component-library-yeahyeahyeah/README.md @@ -37,20 +37,12 @@ Or with npm npm i @smartive-education/design-system-component-library-yeahyeahyeah@latest ``` -## Resources - -- [Typescript](https://www.typescriptlang.org/) -- [React](https://reactjs.org/) -- [styled-components](https://styled-components.com/) -- [Twin](https://github.com/ben-rogerson/twin.macro) -- [Github](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-packages-from-other-organizations) - # Install Example App with Twin + Next.js + Styled Components + TypeScript + Mumble Component Library

TwinTwinNext.jsNext.jsStyled componentsStyled componentsTypeScript

-**Download this example using [git](https://github.com/tomschall/mumble-test-stack-yeahyeahyeah)** +**Download demo app using [git](https://github.com/tomschall/mumble-test-stack-yeahyeahyeah)** ```shell git clone git@github.com:tomschall/mumble-test-stack-yeahyeahyeah.git folder-name @@ -69,8 +61,10 @@ From within the new folder, run `yarn install`, then `yarn dev` to start the dev - [Add the TypeScript types](#add-typescript-types) - [Add the next babel config](#add-the-next-babel-config) - [Add the server stylesheet](#add-the-server-stylesheet) +- [Resources](#resources) - [Customization](#customization) - [Next steps](#next-steps) +- [Other](#other) [](#getting-started) @@ -101,11 +95,16 @@ Create .npmrc and add following line @smartive-education:registry=https://npm.pkg.github.com ``` -Install Mumble Component Library And Other Needed Dependencies +Install Mumble Component Library and Styled Components ```shell yarn add styled-components @smartive-education/design-system-component-library-yeahyeahyeah@latest -yarn add twin.macro tailwindcss babel-plugin-macros @types/styled-components babel-loader @babel/plugin-syntax-typescript --dev +``` + +Install DEV Dependencies + +```shell +yarn add twin.macro tailwindcss babel-plugin-macros babel-plugin-twin @types/styled-components @babel/core babel-loader @babel/plugin-syntax-typescript --dev ``` ### Add the global styles @@ -126,10 +125,7 @@ import { createGlobalStyle } from 'styled-components'; import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'; const CustomStyles = createGlobalStyle({ - body: { - WebkitTapHighlightColor: theme`colors.purple.500`, - ...tw`antialiased`, - }, + body: {}, }); const GlobalStyles = () => ( @@ -142,9 +138,9 @@ const GlobalStyles = () => ( export default GlobalStyles; ``` -Then import the GlobalStyles file and Mumble Global CSS file in `pages/_app.tsx`: +The `@smartive-education/design-system-component-library-yeahyeahyeah/tailwind.css` import adds Mumble Global CSS settings - it includes all CSS vars and body styles that are needed for Mumble -Mumble Global CSS has all CSS vars and body styles that are needed for Mumble +All you have to do ist to import the GlobalStyles file and Mumble Global CSS file in `pages/_app.tsx`: Also import @@ -257,6 +253,7 @@ module.exports = function withTwin(nextConfig) { options: { sourceMaps: dev, plugins: [ + require.resolve('babel-plugin-twin'), require.resolve('babel-plugin-macros'), [require.resolve('babel-plugin-styled-components'), { ssr: true, displayName: true }], [require.resolve('@babel/plugin-syntax-typescript'), { isTSX: true }], @@ -339,16 +336,299 @@ export default class MyDocument extends Document { } ``` +### Add index.tsx + +To see a nice mumble demo timeline add following code to `pages/index.tsx`. + +```js +import { + Navigation, + Mumble, + WriteComponent, + Heading, +} from '@smartive-education/design-system-component-library-yeahyeahyeah'; + +export default function Home() { + const handleAvatar = () => { + console.log('avatar clicked'); + }; + + return ( + <> +
+ console.log('logo'), + isNavigation: true, + }} + avatar={{ + label: 'Label', + variant: 'profile', + fCallBack: handleAvatar, + src: 'https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif', + }} + settings={{ + label: 'Settings', + variant: 'default', + fCallBack: () => console.log('settings'), + icon: 'settings', + }} + logout={{ + label: 'Logout', + variant: 'default', + fCallBack: () => console.log('logout'), + icon: 'logout', + }} + /> +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
 
+
+
+ + ); +} +``` + +[](#resources) + +## Resources + [](#customization) -## Customization +### Customization - [View the config options →](https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md) - [Customizing the tailwind config →](https://github.com/ben-rogerson/twin.macro/blob/master/docs/customizing-config.md) [](#next-steps) -## Next steps +### Next steps Learn how to work with twin @@ -360,3 +640,13 @@ Learn more about styled-components - [The css prop](https://styled-components.com/docs/api#css-prop) - [The css import](https://styled-components.com/docs/api#css) - [The styled import](https://styled-components.com/docs/api#styled) + +[](#other) + +### Other + +- [Typescript](https://www.typescriptlang.org/) +- [React](https://reactjs.org/) +- [styled-components](https://styled-components.com/) +- [Twin](https://github.com/ben-rogerson/twin.macro) +- [Github](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-packages-from-other-organizations) diff --git a/packages/design-system-component-library-yeahyeahyeah/components/forms/WriteComponent.tsx b/packages/design-system-component-library-yeahyeahyeah/components/forms/WriteComponent.tsx index f0f24167..8dd470fd 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/forms/WriteComponent.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/forms/WriteComponent.tsx @@ -5,6 +5,7 @@ import { InputForm, IFormInputProps } from './Input'; import { Button, IButtonProps } from '../buttons/Button'; import { BottomSpacing } from '../Spacing'; import { Heading, Paragraph } from '../index'; +import type { TSpacing } from '../../types/types'; export interface IWriteComponentProps { user: IUserProps; diff --git a/packages/design-system-component-library-yeahyeahyeah/components/mumble/Mumble.tsx b/packages/design-system-component-library-yeahyeahyeah/components/mumble/Mumble.tsx index 5f0d71a6..f8c61744 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/mumble/Mumble.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/mumble/Mumble.tsx @@ -7,6 +7,7 @@ import { IShareButton, ShareButton } from '../buttons/ShareButton'; import { IImageContainerProps, ImageContainer } from '../ImageContainer'; import { Avatar } from '../Avatar'; import { BottomSpacing } from '../Spacing'; +import type { TSpacing } from '../../types/types'; export interface IMumbleProps { variant?: 'detailpage' | 'timeline' | 'response'; diff --git a/packages/design-system-component-library-yeahyeahyeah/components/typography/Heading.tsx b/packages/design-system-component-library-yeahyeahyeah/components/typography/Heading.tsx index 2f78e349..b0b5a03a 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/typography/Heading.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/typography/Heading.tsx @@ -1,6 +1,7 @@ import React from 'react'; import tw, { styled } from 'twin.macro'; import { BottomSpacing } from '../Spacing'; +import type { TSpacing } from '../../types/types'; export interface IHeadingProps { label: string; diff --git a/packages/design-system-component-library-yeahyeahyeah/components/typography/Paragraph.tsx b/packages/design-system-component-library-yeahyeahyeah/components/typography/Paragraph.tsx index 4e0beba2..9a73ad24 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/typography/Paragraph.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/typography/Paragraph.tsx @@ -1,6 +1,7 @@ import React from 'react'; import tw, { styled } from 'twin.macro'; import { BottomSpacing } from '../Spacing'; +import type { TSpacing } from '../../types/types'; export interface IParagraphProps { size?: 'default' | 'medium' | 'large'; diff --git a/packages/design-system-component-library-yeahyeahyeah/index.ts b/packages/design-system-component-library-yeahyeahyeah/index.ts index 07635cbb..195d95f5 100644 --- a/packages/design-system-component-library-yeahyeahyeah/index.ts +++ b/packages/design-system-component-library-yeahyeahyeah/index.ts @@ -1 +1,2 @@ export * from './components'; +export * from './types'; diff --git a/packages/design-system-component-library-yeahyeahyeah/tsconfig.dist.json b/packages/design-system-component-library-yeahyeahyeah/tsconfig.dist.json index dfe550b3..d251dce0 100644 --- a/packages/design-system-component-library-yeahyeahyeah/tsconfig.dist.json +++ b/packages/design-system-component-library-yeahyeahyeah/tsconfig.dist.json @@ -1,5 +1,5 @@ { "extends": "./tsconfig.json", - "include": ["./**/*.tsx", "./**/*.ts", "./../../types/**/*.d.ts"], + "include": ["./**/*.tsx", "./**/*.ts", "./../../types/**/*.d.ts", "./types/*.d.ts"], "exclude": ["./dist", "./stories"] } diff --git a/packages/design-system-component-library-yeahyeahyeah/tsconfig.json b/packages/design-system-component-library-yeahyeahyeah/tsconfig.json index 09c19b2a..0c9cf07b 100644 --- a/packages/design-system-component-library-yeahyeahyeah/tsconfig.json +++ b/packages/design-system-component-library-yeahyeahyeah/tsconfig.json @@ -22,7 +22,7 @@ "outDir": "dist", "allowJs": true }, - "include": ["./**/*.tsx", "./**/*.ts", "./../../types/*.d.ts"], - "typeRoots": ["./../../types/*.d.ts", "./../../node_modules/@types"], + "include": ["./**/*.tsx", "./**/*.ts", "./../../types/*.d.ts", "./types/*.d.ts"], + "typeRoots": ["./../../types/*.d.ts", "./types/*.d.ts", "./../../node_modules/@types"], "exclude": ["node_modules", "dist"] } diff --git a/packages/design-system-component-library-yeahyeahyeah/types/index.ts b/packages/design-system-component-library-yeahyeahyeah/types/index.ts new file mode 100644 index 00000000..fcb073fe --- /dev/null +++ b/packages/design-system-component-library-yeahyeahyeah/types/index.ts @@ -0,0 +1 @@ +export * from './types'; diff --git a/packages/design-system-component-library-yeahyeahyeah/types/types.ts b/packages/design-system-component-library-yeahyeahyeah/types/types.ts new file mode 100644 index 00000000..2854590b --- /dev/null +++ b/packages/design-system-component-library-yeahyeahyeah/types/types.ts @@ -0,0 +1 @@ +export type TSpacing = '0' | '2' | '4' | '8' | '16' | '32' | '64'; diff --git a/types/types.d.ts b/types/types.d.ts index 4a1efe25..df12a476 100644 --- a/types/types.d.ts +++ b/types/types.d.ts @@ -29,6 +29,4 @@ declare global { as?: string; } } - - type TSpacing = '0' | '2' | '4' | '8' | '16' | '32' | '64'; }